refactor: DB-数据操作优化

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

@@ -16,12 +16,18 @@
                 <el-descriptions :column="4" size="small" border style="height: 10px" class="ml5">
                     <el-descriptions-item label-align="right" label="tag">{{ nowDbInst.tagPath }}</el-descriptions-item>
 
-                    <el-descriptions-item label="实例" label-align="right">
+                    <el-descriptions-item label-align="right">
+                        <template #label>
+                            <div>
+                                <SvgIcon :name="DbInst.getIconName(nowDbInst.type)" :size="18" />
+                                实例
+                            </div>
+                        </template>
                         {{ nowDbInst.id }}
                         <el-divider direction="vertical" border-style="dashed" />
-                        {{ nowDbInst.type }}
-                        <el-divider direction="vertical" border-style="dashed" />
                         {{ nowDbInst.name }}
+                        <el-divider direction="vertical" border-style="dashed" />
+                        {{ nowDbInst.host }}
                     </el-descriptions-item>
 
                     <el-descriptions-item label="库名" label-align="right">{{ state.db }}</el-descriptions-item>
@@ -36,10 +42,7 @@
                         <span v-if="data.type.value == SqlExecNodeType.DbInst">
                             <el-popover :show-after="500" placement="right-start" title="数据库实例信息" trigger="hover" :width="250">
                                 <template #reference>
-                                    <SvgIcon v-if="data.params.type === 'mysql'" name="iconfont icon-op-mysql" :size="18" />
+                                    <SvgIcon :name="DbInst.getIconName(data.params.type)" :size="18" />
-                                    <SvgIcon v-if="data.params.type === 'postgres'" name="iconfont icon-op-postgres" :size="18" />
-
-                                    <SvgIcon name="InfoFilled" v-else />
                                 </template>
                                 <template #default>
                                     <el-descriptions :column="1" size="small">
@@ -80,29 +83,37 @@
 
             <el-col :span="20">
                 <el-container id="data-exec" class="mt5 ml5">
-                    <el-tabs type="card" @tab-remove="onRemoveTab" @tab-change="onTabChange" style="width: 100%" v-model="state.activeName">
+                    <el-tabs
+                        v-if="state.tabs.size > 0"
+                        type="card"
+                        @tab-remove="onRemoveTab"
+                        @tab-change="onTabChange"
+                        style="width: 100%"
+                        v-model="state.activeName"
+                    >
                         <el-tab-pane closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
-                            <!-- <template #label>
+                            <template #label>
-                                <el-popover :show-after="500" placement="right-start" title="数据库实例信息" trigger="hover" :width="250">
+                                <el-popover :show-after="1000" placement="bottom-start" trigger="hover" :width="250">
                                     <template #reference> {{ dt.label }} </template>
                                     <template #default>
                                         <el-descriptions :column="1" size="small">
+                                            <el-descriptions-item label="tagPath">
+                                                {{ dt.params.tagPath }}
+                                            </el-descriptions-item>
                                             <el-descriptions-item label="名称">
                                                 {{ dt.params.name }}
                                             </el-descriptions-item>
                                             <el-descriptions-item label="host">
-                                                {{ `${dt.params.host}:${dt.params.port}` }}
+                                                <SvgIcon :name="DbInst.getIconName(dt.params.type)" :size="18" />
+                                                {{ dt.params.host }}
                                             </el-descriptions-item>
-                                            <el-descriptions-item label="user">
+                                            <el-descriptions-item label="库名">
-                                                {{ dt.params.username }}
+                                                {{ dt.params.dbName }}
-                                            </el-descriptions-item>
-                                            <el-descriptions-item label="备注">
-                                                {{ dt.params.remark }}
                                             </el-descriptions-item>
                                         </el-descriptions>
                                     </template>
                                 </el-popover>
-                            </template> -->
+                            </template>
 
                             <db-table-data-op
                                 v-if="dt.type === TabType.TableData"
@@ -147,6 +158,7 @@ import { TagTreeNode, NodeType } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
 import { dbApi } from './api';
 import { dispposeCompletionItemProvider } from '../../../components/monaco/completionItemProvider';
+import SvgIcon from '@/components/svgIcon/index.vue';
 
 const DbSqlEditor = defineAsyncComponent(() => import('./component/sqleditor/DbSqlEditor.vue'));
 const DbTableDataOp = defineAsyncComponent(() => import('./component/table/DbTableDataOp.vue'));
@@ -195,7 +207,10 @@ class ContextmenuClickId {
 // node节点点击时，触发改变db事件
 const nodeClickChangeDb = (nodeData: TagTreeNode) => {
     const params = nodeData.params;
-    changeDb({ id: params.id, name: params.name, type: params.type, tagPath: params.tagPath, databases: params.database }, params.db);
+    changeDb(
+        { id: params.id, host: `${params.host}:${params.port}`, name: params.name, type: params.type, tagPath: params.tagPath, databases: params.database },
+        params.db
+    );
 };
 
 // tagpath 节点类型
@@ -221,6 +236,7 @@ const NodeTypeDbInst = new NodeType(SqlExecNodeType.DbInst)
                     id: params.id,
                     name: params.name,
                     type: params.type,
+                    host: `${params.host}:${params.port}`,
                     dbs: dbs,
                     db: x,
                 })
@@ -372,9 +388,9 @@ onBeforeUnmount(() => {
  * 设置editor高度和数据表高度
  */
 const setHeight = () => {
-    state.editorHeight = window.innerHeight - 518 + 'px';
+    state.editorHeight = window.innerHeight - 500 + 'px';
-    state.dataTabsTableHeight = window.innerHeight - 262 + 'px';
+    state.dataTabsTableHeight = window.innerHeight - 250 + 'px';
-    state.tablesOpHeight = window.innerHeight - 240 + 'px';
+    state.tablesOpHeight = window.innerHeight - 220 + 'px';
     state.tagTreeHeight = window.innerHeight - 165 + 'px';
 };
 
@@ -420,7 +436,7 @@ const onCurrentContextmenuClick = (clickData: any) => {
     }
 };
 
-// 选择数据库
+// 选择数据库,改变当前正在操作的数据库信息
 const changeDb = (db: any, dbName: string) => {
     state.nowDbInst = DbInst.getOrNewInst(db);
     state.db = dbName;
@@ -428,7 +444,6 @@ const changeDb = (db: any, dbName: string) => {
 
 // 加载选中的表数据，即新增表数据操作tab
 const loadTableData = async (db: any, dbName: string, tableName: string) => {
-    changeDb(db, dbName);
     if (tableName == '') {
         return;
     }
@@ -448,6 +463,7 @@ const loadTableData = async (db: any, dbName: string, tableName: string) => {
     tab.db = dbName;
     tab.type = TabType.TableData;
     tab.params = {
+        ...getNowDbInfo(),
         table: tableName,
     };
     state.tabs.set(key, tab);
@@ -459,7 +475,6 @@ const addQueryTab = async (db: any, dbName: string, sqlName: string = '') => {
         ElMessage.warning('请选择数据库实例及对应的schema');
         return;
     }
-    changeDb(db, dbName);
 
     const dbId = db.id;
     let label;
@@ -491,6 +506,7 @@ const addQueryTab = async (db: any, dbName: string, sqlName: string = '') => {
     tab.db = dbName;
     tab.type = TabType.Query;
     tab.params = {
+        ...getNowDbInfo(),
         sqlName: sqlName,
         dbs: db.dbs,
     };
@@ -510,7 +526,6 @@ const addTablesOpTab = async (db: any) => {
         ElMessage.warning('请选择数据库实例及对应的schema');
         return;
     }
-    changeDb(db, dbName);
 
     const dbId = db.id;
     let key = `表操作:${dbId}:${dbName}.tablesOp`;
@@ -528,6 +543,7 @@ const addTablesOpTab = async (db: any) => {
     tab.db = dbName;
     tab.type = TabType.TablesOp;
     tab.params = {
+        ...getNowDbInfo(),
         id: db.id,
         db: dbName,
         type: db.type,
@@ -589,6 +605,21 @@ const reloadTables = (nodeKey: string) => {
     state.reloadStatus = true;
     tagTreeRef.value.reloadNode(nodeKey);
 };
+
+/**
+ * 获取当前操作的数据库信息
+ */
+const getNowDbInfo = () => {
+    const di = state.nowDbInst;
+    return {
+        tagPath: di.tagPath,
+        id: di.id,
+        name: di.name,
+        type: di.type,
+        host: di.host,
+        dbName: state.db,
+    };
+};
 </script>
 
 <style lang="scss">
@@ -601,13 +632,22 @@ const reloadTables = (nodeKey: string) => {
     #data-exec {
         min-height: calc(100vh - 155px);
 
+        .el-tabs {
+            --el-tabs-header-height: 30px;
+        }
+
         .el-tabs__header {
-            margin: 0 0 10px;
+            margin: 0 0 5px;
 
             .el-tabs__item {
                 padding: 0 10px;
             }
         }
+
+        .el-tabs__nav-next,
+        .el-tabs__nav-prev {
+            line-height: 30px;
+        }
     }
 
     .update_field_active {

mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue

@@ -140,8 +140,8 @@ let monacoEditor: editor.IStandaloneCodeEditor;
 const state = reactive({
     token,
     table: '', // 当前单表操作sql的表信息
-    sqlName: '',
+    sql: '', // 当前编辑器的sql内容s
-    sql: '', // 当前编辑器的sql内容
+    sqlName: '' as any, // sql模板名称
     loading: false, // 是否在加载数据
     execRes: {
         data: [],
@@ -149,7 +149,7 @@ const state = reactive({
     },
     selectionDatas: [] as any,
     editorHeight: '500',
-    tableDataHeight: 250 as any,
+    tableDataHeight: 240 as any,
     hasUpdatedFileds: false,
 });
 
@@ -170,8 +170,9 @@ onMounted(async () => {
     console.log('in query mounted');
     state.editorHeight = props.editorHeight;
 
+    state.sqlName = props.sqlName;
     if (props.sqlName) {
-        const res = await dbApi.getSql.request({ id: props.dbId, type: 1, name: state.sqlName, db: props.dbName });
+        const res = await dbApi.getSql.request({ id: props.dbId, type: 1, db: props.dbName, name: props.sqlName });
         state.sql = res.sql;
     }
     nextTick(() => {
@@ -255,6 +256,9 @@ const onDragSetHeight = () => {
 };
 
 const getKey = () => {
+    if (props.sqlName) {
+        return `${props.dbId}:${props.dbName}.${props.sqlName}`;
+    }
     return props.dbId + ':' + props.dbName;
 };
 
@@ -359,8 +363,7 @@ const saveSql = async () => {
     notBlank(sql, 'sql内容不能为空');
 
     let sqlName = state.sqlName;
-    const newSql = !sqlName;
+    if (!sqlName) {
-    if (newSql) {
         try {
             const input = await ElMessageBox.prompt('请输入SQL脚本名', 'SQL名', {
                 confirmButtonText: '确定',
@@ -382,7 +385,7 @@ const saveSql = async () => {
 };
 
 const deleteSql = async () => {
-    const sqlName = state.sqlName;
+    const sqlName = props.sqlName;
     notBlank(sqlName, '该sql内容未保存');
     const dbId = props.dbId;
     const db = props.dbName;

mayfly_go_web/src/views/ops/db/db.ts

@@ -28,6 +28,11 @@ export class DbInst {
      */
     id: number;
 
+    /**
+     * ip:port
+     */
+    host: string;
+
     /**
      * 实例名
      */
@@ -304,6 +309,7 @@ export class DbInst {
         dbInst = new DbInst();
         dbInst.tagPath = inst.tagPath;
         dbInst.id = inst.id;
+        dbInst.host = inst.host;
         dbInst.name = inst.name;
         dbInst.type = inst.type;
         dbInst.databases = inst.databases;
@@ -407,6 +413,31 @@ export class DbInst {
         const flexWidth: number = contentWidth > columnWidth ? contentWidth : columnWidth;
         return flexWidth > 500 ? 500 : flexWidth;
     };
+
+    /**
+     * 根据数据库类型获取对应的图标名
+     * @param dbType 数据库类型
+     * @returns
+     */
+    static getIconName = (dbType: string) => {
+        if (dbType == 'mysql') {
+            return 'iconfont icon-op-mysql';
+        }
+        if (dbType == 'postgres') {
+            return 'iconfont icon-op-postgres';
+        }
+        return 'InfoFilled';
+    };
+
+    static getIcon = (dbType: string) => {
+        if (dbType == 'mysql') {
+            return 'iconfont icon-op-mysql';
+        }
+        if (dbType == 'postgres') {
+            return 'iconfont icon-op-postgres';
+        }
+        return 'InfoFilled';
+    };
 }
 
 /**

server/go.mod

@@ -13,7 +13,7 @@ require (
 	github.com/go-playground/validator/v10 v10.14.0
 	github.com/go-sql-driver/mysql v1.7.1
 	github.com/golang-jwt/jwt/v5 v5.1.0
-	github.com/gorilla/websocket v1.5.0
+	github.com/gorilla/websocket v1.5.1
 	github.com/kanzihuang/vitess/go/vt/sqlparser v0.0.0-20231018071450-ac8d9f0167e9
 	github.com/lib/pq v1.10.9
 	github.com/lionsoul2014/ip2region/binding/golang v0.0.0-20230712084735-068dc2aee82d

server/internal/db/api/db.go

@@ -113,15 +113,14 @@ func (d *Db) ExecSql(rc *req.Ctx) {
 
 	for _, s := range sqls {
 		s = stringx.TrimSpaceAndBr(s)
-		// 多条执行，如果有查询语句，则跳过
+		// 多条执行，暂不支持查询语句
-		if isMulti && strings.HasPrefix(strings.ToLower(s), "select") {
+		if isMulti {
-			continue
+			biz.IsTrue(!strings.HasPrefix(strings.ToLower(s), "select"), "多条语句执行暂不不支持select语句")
 		}
+
 		execReq.Sql = s
 		execRes, err := d.DbSqlExecApp.Exec(execReq)
-		if err != nil {
+		biz.ErrIsNilAppendErr(err, fmt.Sprintf("[%s] -> 执行失败: ", s)+"%s")
-			biz.ErrIsNilAppendErr(err, fmt.Sprintf("[%s] -> 执行失败: ", s)+"%s")
-		}
 
 		if execResAll == nil {
 			execResAll = execRes

server/pkg/logx/logx.go

@@ -44,6 +44,10 @@ func Debug(msg string, args ...any) {
 	Log(context.Background(), slog.LevelDebug, msg, args...)
 }
 
+func DebugContext(ctx context.Context, msg string, args ...any) {
+	Log(ctx, slog.LevelDebug, msg, args...)
+}
+
 func Debugf(format string, args ...any) {
 	Log(context.Background(), slog.LevelDebug, fmt.Sprintf(format, args...))
 }
@@ -77,6 +81,10 @@ func Warn(msg string, args ...any) {
 	Log(context.Background(), slog.LevelWarn, msg, args...)
 }
 
+func WarnContext(ctx context.Context, msg string, args ...any) {
+	Log(ctx, slog.LevelWarn, msg, args...)
+}
+
 func Warnf(format string, args ...any) {
 	Log(context.Background(), slog.LevelWarn, fmt.Sprintf(format, args...))
 }
@@ -89,6 +97,10 @@ func Error(msg string, args ...any) {
 	Log(context.Background(), slog.LevelError, msg, args...)
 }
 
+func ErrorContext(ctx context.Context, msg string, args ...any) {
+	Log(ctx, slog.LevelError, msg, args...)
+}
+
 func Errorf(format string, args ...any) {
 	Log(context.Background(), slog.LevelError, fmt.Sprintf(format, args...))
 }