feat: 数据库表格数据表头支持展示备注

mayfly_go_web/.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+*.lock
 
 # local env files
 .env.local

mayfly_go_web/package.json

@@ -33,7 +33,7 @@
     "splitpanes": "^3.1.5",
     "sql-formatter": "^14.0.0",
     "uuid": "^9.0.1",
-    "vue": "^3.4.5",
+    "vue": "^3.4.6",
     "vue-router": "^4.2.5",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",

mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue

@@ -4,7 +4,7 @@
             <template #default="{ height, width }">
                 <el-table-v2
                     ref="tableRef"
-                    :header-height="30"
+                    :header-height="showColumnTip && dbConfig.showColumnComment ? 45 : 30"
                     :row-height="30"
                     :row-class="rowClass"
                     :row-key="null"
@@ -22,13 +22,12 @@
                                 :style="{
                                     width: `${column.width}px`,
                                     height: '100%',
-                                    lineHeight: '30px',
                                     textAlign: 'center',
                                     borderRight: 'var(--el-table-border)',
                                 }"
                             >
                                 <!-- 行号列 -->
-                                <div v-if="column.key == rowNoColumn.key">
+                                <div v-if="column.key == rowNoColumn.key" class="header-column-title">
                                     <b class="el-text" tag="b"> {{ column.title }} </b>
                                 </div>
 
@@ -43,20 +42,31 @@
                                     </div>
 
                                     <div v-if="showColumnTip">
-                                        <b :title="column.remark" class="el-text" style="cursor: pointer">
-                                            {{ column.title }}
-                                        </b>
+                                        <div class="header-column-title">
+                                            <b :title="column.remark" class="el-text" style="cursor: pointer">
+                                                {{ column.title }}
+                                            </b>
 
-                                        <span>
-                                            <SvgIcon
-                                                color="var(--el-color-primary)"
-                                                v-if="column.title == nowSortColumn?.columnName"
-                                                :name="nowSortColumn?.order == 'asc' ? 'top' : 'bottom'"
-                                            ></SvgIcon>
+                                            <span>
+                                                <SvgIcon
+                                                    color="var(--el-color-primary)"
+                                                    v-if="column.title == nowSortColumn?.columnName"
+                                                    :name="nowSortColumn?.order == 'asc' ? 'top' : 'bottom'"
+                                                ></SvgIcon>
+                                            </span>
+                                        </div>
+
+                                        <!-- 字段备注信息 -->
+                                        <span
+                                            v-if="dbConfig.showColumnComment"
+                                            style="color: var(--el-color-info-light-3)"
+                                            class="font10 el-text el-text--small is-truncated"
+                                        >
+                                            {{ column.columnComment }}
                                         </span>
                                     </div>
 
-                                    <div v-else>
+                                    <div v-else class="header-column-title">
                                         <b class="el-text">
                                             {{ column.title }}
                                         </b>
@@ -141,8 +151,8 @@ import { Contextmenu, ContextmenuItem } from '@/components/contextmenu';
 import SvgIcon from '@/components/svgIcon/index.vue';
 import { exportCsv, exportFile } from '@/common/utils/export';
 import { dateStrFormat } from '@/common/utils/date';
-import { useIntervalFn } from '@vueuse/core';
-import { ColumnTypeSubscript, compatibleMysql, DataType, DbDialect, DbType, getDbDialect } from '../../dialect/index';
+import { useIntervalFn, useStorage } from '@vueuse/core';
+import { ColumnTypeSubscript, compatibleMysql, DataType, DbDialect, getDbDialect } from '../../dialect/index';
 import ColumnFormItem from './ColumnFormItem.vue';
 
 const emits = defineEmits(['dataDelete', 'sortChange', 'deleteData', 'selectionChange', 'changeUpdatedField']);
@@ -333,6 +343,8 @@ const state = reactive({
 
 const { tableHeight, datas } = toRefs(state);
 
+const dbConfig = useStorage('dbConfig', { showColumnComment: false });
+
 /**
  * 行号字段列
  */
@@ -825,6 +837,13 @@ defineExpose({
         border-right: var(--el-table-border);
     }
 
+    .header-column-title {
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     .table-data-cell {
         width: 100%;
         height: 100%;
@@ -844,7 +863,7 @@ defineExpose({
         color: var(--el-color-info-light-3);
         font-weight: bold;
         position: absolute;
-        top: -12px;
+        top: -7px;
         padding: 2px;
         height: 12px;
     }

mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue

@@ -47,6 +47,22 @@
                     </el-tooltip>
                     <el-divider direction="vertical" border-style="dashed" />
 
+                    <!-- 表数据展示配置 -->
+                    <el-popover
+                        popper-style="max-height: 550px; overflow: auto; max-width: 450px"
+                        placement="bottom"
+                        width="auto"
+                        title="展示配置"
+                        trigger="click"
+                    >
+                        <el-checkbox v-model="dbConfig.showColumnComment" label="显示字段备注" :true-label="true" :false-label="false" size="small" />
+                        <template #reference>
+                            <el-link type="primary" icon="setting" :underline="false"></el-link>
+                        </template>
+                    </el-popover>
+
+                    <el-divider direction="vertical" border-style="dashed" />
+
                     <el-tooltip :show-after="500" v-if="hasUpdatedFileds" class="box-item" effect="dark" content="提交修改" placement="top">
                         <el-link @click="submitUpdateFields()" type="success" :underline="false" class="font12">提交</el-link>
                     </el-tooltip>
@@ -188,11 +204,11 @@
         </el-dialog>
 
         <el-dialog v-model="addDataDialog.visible" :title="addDataDialog.title" :destroy-on-close="true" width="600px">
-            <el-form ref="dataForm" :model="addDataDialog.data" label-width="auto" size="small">
+            <el-form ref="dataForm" :model="addDataDialog.data" :show-message="false" label-width="auto" size="small">
                 <el-form-item
                     v-for="column in columns"
                     :key="column.columnName"
-                    class="w100"
+                    class="w100 mb5"
                     :prop="column.columnName"
                     :label="column.columnName"
                     :required="column.nullable != 'YES' && column.columnKey != 'PRI'"
@@ -224,7 +240,7 @@ import DbTableData from './DbTableData.vue';
 import { DbDialect, getDbDialect } from '@/views/ops/db/dialect';
 import SvgIcon from '@/components/svgIcon/index.vue';
 import ColumnFormItem from './ColumnFormItem.vue';
-import { useEventListener } from '@vueuse/core';
+import { useEventListener, useStorage } from '@vueuse/core';
 
 const props = defineProps({
     dbId: {
@@ -253,6 +269,8 @@ const condDialogInputRef: Ref = ref(null);
 
 const defaultPageSize = DbInst.DefaultLimit;
 
+const dbConfig = useStorage('dbConfig', { showColumnComment: false });
+
 const state = reactive({
     datas: [],
     sql: '', // 当前数据tab执行的sql

server/internal/db/domain/entity/db_backup.go

@@ -11,16 +11,6 @@ type DbBackup struct {
 	DbInstanceId uint64 `json:"dbInstanceId"` // 数据库实例ID
 }
 
-var (
-	backupResult = map[TaskStatus]string{
-		TaskDelay:    "等待备份数据库",
-		TaskReady:    "准备备份数据库",
-		TaskReserved: "数据库备份中",
-		TaskSuccess:  "数据库备份成功",
-		TaskFailed:   "数据库备份失败",
-	}
-)
-
 func (*DbBackup) MessageWithStatus(status TaskStatus) string {
 	var result string
 	switch status {

server/internal/db/domain/entity/db_binlog_history.go

@@ -23,6 +23,6 @@ func (d *DbBinlogHistory) TableName() string {
 
 type BinlogInfo struct {
 	FileName string `json:"fileName"`
-	Sequence int64  `json:"sequence""`
+	Sequence int64  `json:"sequence"`
 	Position int64  `json:"position"`
 }

server/internal/db/infrastructure/persistence/db_backup.go

@@ -4,12 +4,13 @@ import (
 	"context"
 	"errors"
 	"fmt"
-	"gorm.io/gorm"
 	"mayfly-go/internal/db/domain/entity"
 	"mayfly-go/internal/db/domain/repository"
 	"mayfly-go/pkg/gormx"
 	"mayfly-go/pkg/model"
 	"slices"
+
+	"gorm.io/gorm"
 )
 
 var _ repository.DbBackup = (*dbBackupRepoImpl)(nil)
@@ -61,7 +62,7 @@ func (d *dbBackupRepoImpl) AddTask(ctx context.Context, tasks ...*entity.DbBacku
 			return err
 		}
 		if len(res) > 0 {
-			return errors.New(fmt.Sprintf("数据库备份任务已存在: %v", res))
+			return fmt.Errorf("数据库备份任务已存在: %v", res)
 		}
 
 		return d.BatchInsertWithDb(ctx, db, tasks)

server/internal/db/infrastructure/persistence/db_restore.go

@@ -4,12 +4,13 @@ import (
 	"context"
 	"errors"
 	"fmt"
-	"gorm.io/gorm"
 	"mayfly-go/internal/db/domain/entity"
 	"mayfly-go/internal/db/domain/repository"
 	"mayfly-go/pkg/gormx"
 	"mayfly-go/pkg/model"
 	"slices"
+
+	"gorm.io/gorm"
 )
 
 var _ repository.DbRestore = (*dbRestoreRepoImpl)(nil)
@@ -60,7 +61,7 @@ func (d *dbRestoreRepoImpl) AddTask(ctx context.Context, tasks ...*entity.DbRest
 			return err
 		}
 		if len(res) > 0 {
-			return errors.New(fmt.Sprintf("数据库备份任务已存在: %v", res))
+			return fmt.Errorf("数据库备份任务已存在: %v", res)
 		}
 
 		return d.BatchInsertWithDb(ctx, db, tasks)