fix: 数据库连接设置超时时间&界面优化

mayfly_go_web/package.json

@@ -12,7 +12,7 @@
     "countup.js": "^2.0.7",
     "cropperjs": "^1.5.11",
     "echarts": "^5.3.2",
-    "element-plus": "^2.1.11",
+    "element-plus": "^2.2.2",
     "@element-plus/icons-vue": "^1.1.3",
     "jsonlint": "^1.6.3",
     "lodash": "^4.17.21",

mayfly_go_web/src/theme/element.scss

@@ -993,4 +993,15 @@
 }
 .el-drawer-fade-leave-active .el-drawer.ltr {
 	animation: ltr-drawer-animation 0.3s ease !important;
-}
+}
+
+// el-tooltip使用自定义主题时的样式
+.el-popper.is-customized {
+    /* Set padding to ensure the height is 32px */
+  //   padding: 6px 12px;
+    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
+  }
+  .el-popper.is-customized .el-popper__arrow::before {
+    background: linear-gradient(45deg, #b2e68d, #bce689);
+    right: 0;
+  }

mayfly_go_web/src/views/ops/db/SqlExec.vue

@@ -10,13 +10,7 @@
                     <project-env-select @changeProjectEnv="changeProjectEnv">
                         <template #default>
                             <el-form-item label="资源">
-                                <el-select
-                                    v-model="dbId"
-                                    placeholder="请选择资源实例"
-                                    @change="changeDbInstance"
-                                    filterable
-                                    style="width: 150px"
-                                >
+                                <el-select v-model="dbId" placeholder="请选择资源实例" @change="changeDbInstance" filterable style="width: 150px">
                                     <el-option v-for="item in dbs" :key="item.id" :label="item.name" :value="item.id">
                                         <span style="float: left">{{ item.name }}</span>
                                         <span style="float: right; color: #8492a6; margin-left: 6px; font-size: 13px">{{
@@ -27,7 +21,15 @@
                             </el-form-item>
 
                             <el-form-item label="数据库">
-                                <el-select v-model="db" placeholder="请选择数据库" @change="changeDb" @clear="clearDb" clearable filterable style="width: 150px">
+                                <el-select
+                                    v-model="db"
+                                    placeholder="请选择数据库"
+                                    @change="changeDb"
+                                    @clear="clearDb"
+                                    clearable
+                                    filterable
+                                    style="width: 150px"
+                                >
                                     <el-option v-for="item in databaseList" :key="item" :label="item" :value="item"> </el-option>
                                 </el-select>
                             </el-form-item>
@@ -211,11 +213,11 @@
                             :sortable="nowTableName != '' ? 'custom' : false"
                         >
                             <template #header>
-                                <el-tooltip raw-content effect="dark" placement="top">
+                                <el-tooltip raw-content placement="top" effect="customized">
                                     <template #content> {{ getColumnTip(dt.name, item) }} </template>
-                                    <el-icon><question-filled /></el-icon>
+                                    <!-- <el-icon><question-filled /></el-icon> -->
+                                    {{ item }}
                                 </el-tooltip>
-                                {{ item }}
                             </template>
                         </el-table-column>
                     </el-table>
@@ -515,29 +517,45 @@ export default defineComponent({
                 }
                 columnContent = tableData[index][str];
             }
+            const contentWidth: number = getContentWidth(columnContent);
+            // 获取列名称的长度 加上排序图标长度
+            const columnWidth: number = getContentWidth(str) + 43;
+            const flexWidth: number = contentWidth > columnWidth ? contentWidth : columnWidth;
+            return flexWidth + 'px';
+        };
+
+        /**
+         * 获取内容所需要占用的宽度
+         */
+        const getContentWidth = (content: any): number => {
             // 以下分配的单位长度可根据实际需求进行调整
             let flexWidth = 0;
-            for (const char of columnContent) {
-                if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
-                    // 如果是英文字符，为字符分配8个单位宽度
+            for (const char of content) {
+                if (flexWidth > 500) {
+                    break;
+                }
+                if ((char >= '0' && char <= '9') || (char >= 'a' && char <= 'z')) {
+                    // 如果是小写字母、数字字符，分配8个单位宽度
                     flexWidth += 8;
-                } else if (char >= '\u4e00' && char <= '\u9fa5') {
-                    // 如果是中文字符，为字符分配15个单位宽度
+                    continue;
+                }
+                if (char >= 'A' && char <= 'Z') {
+                    flexWidth += 8.5;
+                    continue;
+                }
+                if (char >= '\u4e00' && char <= '\u9fa5') {
+                    // 如果是中文字符，为字符分配16个单位宽度
                     flexWidth += 16;
                 } else {
-                    // 其他种类字符，为字符分配10个单位宽度
-                    flexWidth += 10;
+                    // 其他种类字符，为字符分配9个单位宽度
+                    flexWidth += 9;
                 }
             }
-            if (flexWidth < 80) {
-                // 设置最小宽度
-                flexWidth = 80;
-            }
             if (flexWidth > 500) {
                 // 设置最大宽度
                 flexWidth = 500;
             }
-            return flexWidth + 'px';
+            return flexWidth;
         };
 
         const getColumnTip = (tableName: string, columnName: string) => {

mayfly_go_web/src/views/ops/mongo/MongoList.vue

@@ -139,7 +139,7 @@
                         {{ collectionsDialog.statsDialog.data.count }}
                     </el-descriptions-item>
                     <el-descriptions-item label="avgObjSize" label-align="right" align="center">
-                        {{ collectionsDialog.statsDialog.data.avgObjSize }}
+                        {{ formatByteSize(collectionsDialog.statsDialog.data.avgObjSize) }}
                     </el-descriptions-item>
                     <el-descriptions-item label="nindexes" label-align="right" align="center">
                         {{ collectionsDialog.statsDialog.data.nindexes }}

mayfly_go_web/src/views/system/resource/ResourceEdit.vue

@@ -5,7 +5,7 @@
                 <el-row :gutter="10">
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
                         <el-form-item prop="type" label="类型" required>
-                            <el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择" width="w100">
+                            <el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择" >
                                 <el-option v-for="item in enums.ResourceTypeEnum" :key="item.value" :label="item.label" :value="item.value">
                                 </el-option>
                             </el-select>
@@ -83,7 +83,7 @@
             </el-form>
 
             <template #footer>
-                <div class="dialog-footer mt10">
+                <div>
                     <el-button @click="cancel()">取 消</el-button>
                     <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
                 </div>

server/devops/application/db_app.go

@@ -158,6 +158,7 @@ func (da *dbAppImpl) GetDbInstance(id uint64, db string) *DbInstance {
 	biz.ErrIsNil(err, fmt.Sprintf("Open %s failed, err:%v\n", d.Type, err))
 	perr := DB.Ping()
 	if perr != nil {
+		global.Log.Errorf("连接db失败: %s:%d/%s", d.Host, d.Port, db)
 		panic(biz.NewBizErr(fmt.Sprintf("数据库连接失败: %s", perr.Error())))
 	}
 
@@ -302,7 +303,7 @@ func (d *DbInstance) Close() {
 // 获取dataSourceName
 func getDsn(d *entity.Db) string {
 	if d.Type == "mysql" {
-		return fmt.Sprintf("%s:%s@%s(%s:%d)/%s", d.Username, d.Password, d.Network, d.Host, d.Port, d.Database)
+		return fmt.Sprintf("%s:%s@%s(%s:%d)/%s?timeout=8s", d.Username, d.Password, d.Network, d.Host, d.Port, d.Database)
 	}
 	return ""
 }