refactor: 界面小优化

fix: 前端 DBMS->数据操作->新建查询，页面不显示查询结果

Dockerfile

@@ -32,7 +32,7 @@ FROM alpine:3.16
 RUN apk add --no-cache ca-certificates bash expat
 
 ENV TZ=Asia/Shanghai
-RUN ln -snf /usr/share/zoneinfo/\$TZ /etc/localtime && echo \$TZ > /etc/timezone
+RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
 
 WORKDIR /mayfly
 

mayfly_go_web/package.json

@@ -11,15 +11,15 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "asciinema-player": "^3.5.0",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
     "countup.js": "^2.7.0",
     "cropperjs": "^1.5.11",
     "echarts": "^5.4.0",
-    "element-plus": "^2.3.8",
+    "element-plus": "^2.3.12",
     "jsencrypt": "^3.3.1",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "monaco-editor": "^0.41.0",
+    "monaco-editor": "^0.43.0",
     "monaco-sql-languages": "^0.11.0",
     "monaco-themes": "^0.4.4",
     "nprogress": "^0.2.0",
@@ -31,8 +31,10 @@
     "vue": "^3.3.4",
     "vue-clipboard3": "^1.0.1",
     "vue-router": "^4.2.4",
-    "xterm": "^5.2.1",
+    "xterm": "^5.3.0",
-    "xterm-addon-fit": "^0.7.0"
+    "xterm-addon-fit": "^0.8.0",
+    "xterm-addon-search": "^0.13.0",
+    "xterm-addon-web-links": "^0.9.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.178",

mayfly_go_web/src/common/config.ts

@@ -11,7 +11,7 @@ const config = {
     baseWsUrl: `${(window as any).globalConfig.BaseWsUrl || `${location.protocol == 'https:' ? 'wss:' : 'ws:'}//${getBaseApiUrl()}`}/api`,
 
     // 系统版本
-    version: 'v1.5.1',
+    version: 'v1.5.2',
 };
 
 export default config;

mayfly_go_web/src/common/openApi.ts

@@ -5,12 +5,12 @@ export default {
     otpVerify: (param: any) => request.post('/auth/accounts/otp-verify', param),
     getPublicKey: () => request.get('/common/public-key'),
     getConfigValue: (params: any) => request.get('/sys/configs/value', params),
-    oauth2LoginConfig: () => request.get('/sys/configs/oauth2-login'),
+    oauth2LoginConfig: () => request.get('/auth/oauth2-config'),
     changePwd: (param: any) => request.post('/sys/accounts/change-pwd', param),
     captcha: () => request.get('/sys/captcha'),
     logout: () => request.post('/auth/accounts/logout'),
     getPermissions: () => request.get('/sys/accounts/permissions'),
     oauth2Callback: (params: any) => request.get('/auth/oauth2/callback', params),
-    getLdapEnabled: () => request.get("/auth/ldap/enabled"),
+    getLdapEnabled: () => request.get('/auth/ldap/enabled'),
     ldapLogin: (param: any) => request.post('/auth/ldap/login', param),
 };

mayfly_go_web/src/common/rsa.ts

@@ -25,7 +25,7 @@ export async function RsaEncrypt(value: any) {
     if (!value) {
         return '';
     }
-    if (encryptor != null) {
+    if (encryptor != null && sessionStorage.getItem('RsaPublicKey') != null) {
         return encryptor.encrypt(value);
     }
     encryptor = new JSEncrypt();

mayfly_go_web/src/common/utils/export.ts

@@ -6,6 +6,11 @@ export function exportCsv(filename: string, columns: string[], datas: []) {
         let dataValueArr: any = [];
         for (let column of columns) {
             let val: any = data[column];
+            if (val == null || val == undefined) {
+                dataValueArr.push('');
+                continue;
+            }
+
             if (typeof val == 'string' && val) {
                 // csv格式如果有逗号，整体用双引号括起来；如果里面还有双引号就替换成两个双引号，这样导出来的格式就不会有问题了
                 if (val.indexOf(',') != -1) {
@@ -16,9 +21,9 @@ export function exportCsv(filename: string, columns: string[], datas: []) {
                     // 再将逗号转义
                     val = `"${val}"`;
                 }
-                dataValueArr.push(val);
+                dataValueArr.push(val + '\t');
             } else {
-                dataValueArr.push(val);
+                dataValueArr.push(val + '\t');
             }
         }
         cvsData.push(dataValueArr);

mayfly_go_web/src/components/monaco/MonacoEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="monaco-editor" style="border: 1px solid #ccc">
+    <div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5)">
         <div class="monaco-editor-content" ref="monacoTextarea" :style="{ height: height }"></div>
         <el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage">
             <el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
@@ -9,9 +9,32 @@
 
 <script lang="ts" setup>
 import { ref, watch, toRefs, reactive, onMounted, onBeforeUnmount } from 'vue';
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
+// import * as monaco from 'monaco-editor';
-import * as monaco from 'monaco-editor';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+// 相关语言
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/css/css.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/java/java.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js';
+import 'monaco-editor/esm/vs/language/json/monaco.contribution';
+// 右键菜单
+import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js';
+import 'monaco-editor/esm/vs/editor/contrib/caretOperations/browser/caretOperations.js';
+import 'monaco-editor/esm/vs/editor/contrib/clipboard//browser/clipboard.js';
+import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
+import 'monaco-editor/esm/vs/editor/contrib/format//browser/formatActions.js';
+// 提示
+import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js';
+import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestInlineCompletions.js';
+
 import { editor, languages } from 'monaco-editor';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 // 主题仓库 https://github.com/brijeshb42/monaco-themes
 // 主题例子 https://editor.bitwiser.in/
@@ -25,6 +48,11 @@ import SolarizedLight from 'monaco-themes/themes/Solarized-light.json';
 import { language as shellLan } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
 import { ElOption, ElSelect } from 'element-plus';
 
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+
 const props = defineProps({
     modelValue: {
         type: String,
@@ -166,6 +194,15 @@ watch(
     }
 );
 
+// 监听 themeConfig editorTheme配置文件的变化
+watch(
+    () => themeConfig.value.editorTheme,
+    (val) => {
+        console.log('monaco editor theme change: ', val);
+        monaco?.editor?.setTheme(val);
+    }
+);
+
 const monacoTextarea: any = ref(null);
 
 let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
@@ -186,17 +223,13 @@ const initMonacoEditorIns = () => {
     // 初始化一些主题
     monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
     options.language = state.languageMode;
-    // 从localStorage中获取，通过store可能存在父子组件都使用store报错
+    options.theme = themeConfig.value.editorTheme;
-    options.theme = JSON.parse(localStorage.getItem('themeConfig') as string).editorTheme || 'vs';
     monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options as any));
 
     // 监听内容改变,双向绑定
     monacoEditorIns.onDidChangeModelContent(() => {
         emit('update:modelValue', monacoEditorIns.getModel()?.getValue());
     });
-
-    // 动态设置主题
-    // monaco.editor.setTheme('hc-black');
 };
 
 const changeLanguage = (value: any) => {

mayfly_go_web/src/components/pagetable/PageTable.vue

@@ -145,13 +145,7 @@
                                 width="600px"
                             >
                                 <template #default>
-                                    <el-input
+                                    <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
-                                        input-style="color: black;"
-                                        :autosize="{ minRows: 3, maxRows: 15 }"
-                                        disabled
-                                        v-model="formatVal"
-                                        type="textarea"
-                                    />
                                 </template>
                                 <template #reference>
                                     <el-link

mayfly_go_web/src/components/terminal/TerminalBody.vue

@@ -0,0 +1,286 @@
+<template>
+    <div id="terminal-body" :style="{ height, background: themeConfig.terminalBackground }">
+        <div ref="terminalRef" class="terminal" />
+
+        <TerminalSearch ref="terminalSearchRef" :search-addon="state.addon.search" @close="focus" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import 'xterm/css/xterm.css';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { SearchAddon } from 'xterm-addon-search';
+import { WebLinksAddon } from 'xterm-addon-web-links';
+
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { ref, nextTick, reactive, onMounted, onBeforeUnmount, watch } from 'vue';
+import TerminalSearch from './TerminalSearch.vue';
+import { debounce } from 'lodash';
+import { TerminalStatus } from './common';
+
+const props = defineProps({
+    /**
+     * 初始化执行命令
+     */
+    cmd: { type: String },
+    /**
+     * 连接url
+     */
+    socketUrl: {
+        type: String,
+    },
+    /**
+     * 高度
+     */
+    height: {
+        type: [String, Number],
+        default: '100%',
+    },
+});
+
+const emit = defineEmits(['statusChange']);
+
+const terminalRef: any = ref(null);
+const terminalSearchRef: any = ref(null);
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+
+// 终端实例
+let term: Terminal;
+let socket: WebSocket;
+let pingInterval: any;
+
+const state = reactive({
+    // 插件
+    addon: {
+        fit: null as any,
+        search: null as any,
+        weblinks: null as any,
+    },
+    status: TerminalStatus.NoConnected,
+});
+
+onMounted(() => {
+    nextTick(() => {
+        init();
+    });
+});
+
+watch(
+    () => state.status,
+    () => {
+        emit('statusChange', state.status);
+    }
+);
+
+onBeforeUnmount(() => {
+    close();
+});
+
+function init() {
+    if (term) {
+        console.log('重新连接...');
+        close();
+    }
+    term = new Terminal({
+        fontSize: themeConfig.value.terminalFontSize || 15,
+        fontWeight: themeConfig.value.terminalFontWeight || 'normal',
+        fontFamily: 'JetBrainsMono, monaco, Consolas, Lucida Console, monospace',
+        cursorBlink: true,
+        disableStdin: false,
+        allowProposedApi: true,
+        theme: {
+            foreground: themeConfig.value.terminalForeground || '#7e9192', //字体
+            background: themeConfig.value.terminalBackground || '#002833', //背景色
+            cursor: themeConfig.value.terminalCursor || '#268F81', //设置光标
+            // cursorAccent: "red",  // 光标停止颜色
+        } as any,
+    });
+    term.open(terminalRef.value);
+
+    // 注册自适应组件
+    const fitAddon = new FitAddon();
+    state.addon.fit = fitAddon;
+    term.loadAddon(fitAddon);
+    fitTerminal();
+
+    // 注册搜索组件
+    const searchAddon = new SearchAddon();
+    state.addon.search = searchAddon;
+    term.loadAddon(searchAddon);
+
+    // 注册 url link组件
+    const weblinks = new WebLinksAddon();
+    state.addon.weblinks = weblinks;
+    term.loadAddon(weblinks);
+
+    // 初始化websocket
+    initSocket();
+}
+
+/**
+ * 连接成功
+ */
+const onConnected = () => {
+    // 注册心跳
+    pingInterval = setInterval(sendPing, 15000);
+
+    // 注册 terminal 事件
+    term.onResize((event) => sendResize(event.cols, event.rows));
+    term.onData((event) => sendCmd(event));
+
+    // 注册自定义快捷键
+    term.attachCustomKeyEventHandler((event: KeyboardEvent) => {
+        // 注册搜索键 ctrl + f
+        if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.type === 'keydown') {
+            event.preventDefault();
+            terminalSearchRef.value.open();
+        }
+
+        return true;
+    });
+
+    state.status = TerminalStatus.Connected;
+
+    // resize
+    sendResize(term.cols, term.rows);
+    // 注册窗口大小监听器
+    window.addEventListener('resize', debounce(fitTerminal, 400));
+
+    focus();
+
+    // 如果有初始要执行的命令，则发送执行命令
+    if (props.cmd) {
+        sendCmd(props.cmd + ' \r');
+    }
+};
+
+// 自适应终端
+const fitTerminal = () => {
+    const dimensions = state.addon.fit && state.addon.fit.proposeDimensions();
+    if (!dimensions) {
+        return;
+    }
+    if (dimensions?.cols && dimensions?.rows) {
+        term.resize(dimensions.cols, dimensions.rows);
+    }
+};
+
+const focus = () => {
+    setTimeout(() => term.focus(), 400);
+};
+
+const clear = () => {
+    term.clear();
+    term.clearSelection();
+    term.focus();
+};
+
+function initSocket() {
+    if (props.socketUrl) {
+        socket = new WebSocket(props.socketUrl);
+    }
+
+    // 监听socket连接
+    socket.onopen = () => {
+        onConnected();
+    };
+
+    // 监听socket错误信息
+    socket.onerror = (e: Event) => {
+        term.writeln('\r\n\x1b[31m提示: 连接错误...');
+        state.status = TerminalStatus.Error;
+        console.log('连接错误', e);
+    };
+
+    socket.onclose = (e: CloseEvent) => {
+        console.log('terminal socket close...', e.reason);
+        // 关闭窗口大小监听器
+        window.removeEventListener('resize', debounce(fitTerminal, 100));
+        // 清除 ping
+        pingInterval && clearInterval(pingInterval);
+        state.status = TerminalStatus.Disconnected;
+    };
+
+    // 监听socket消息
+    socket.onmessage = getMessage;
+}
+
+function getMessage(msg: any) {
+    // msg.data是真正后端返回的数据
+    term.write(msg.data);
+}
+
+enum MsgType {
+    Resize = 1,
+    Data = 2,
+    Ping = 3,
+}
+
+const send = (msg: any) => {
+    state.status == TerminalStatus.Connected && socket.send(JSON.stringify(msg));
+};
+
+const sendResize = (cols: number, rows: number) => {
+    send({
+        type: MsgType.Resize,
+        Cols: cols,
+        Rows: rows,
+    });
+};
+
+const sendPing = () => {
+    send({
+        type: MsgType.Ping,
+        msg: 'ping',
+    });
+};
+
+function sendCmd(key: any) {
+    send({
+        type: MsgType.Data,
+        msg: key,
+    });
+}
+
+function closeSocket() {
+    // 关闭 websocket
+    socket && socket.readyState === 1 && socket.close();
+    // 清除 ping
+    pingInterval && clearInterval(pingInterval);
+}
+
+function close() {
+    console.log('in terminal body close');
+    closeSocket();
+    if (term) {
+        state.addon.search.dispose();
+        state.addon.fit.dispose();
+        state.addon.weblinks.dispose();
+        term.dispose();
+    }
+}
+
+const getStatus = (): TerminalStatus => {
+    return state.status;
+};
+
+defineExpose({ init, fitTerminal, focus, clear, close, getStatus });
+</script>
+<style lang="scss">
+#terminal-body {
+    background: #212529;
+    width: 100%;
+
+    .terminal {
+        width: 100%;
+        height: 100%;
+
+        .xterm .xterm-viewport {
+            overflow-y: hidden;
+        }
+    }
+}
+</style>

mayfly_go_web/src/components/terminal/TerminalDialog.vue

@@ -0,0 +1,309 @@
+<template>
+    <div>
+        <div class="terminal-dialog-container" v-for="openTerminal of terminals" :key="openTerminal.terminalId">
+            <el-dialog
+                title="终端"
+                v-model="openTerminal.visible"
+                top="32px"
+                class="terminal-dialog"
+                width="75%"
+                :close-on-click-modal="false"
+                :modal="true"
+                :show-close="false"
+                :fullscreen="openTerminal.fullscreen"
+            >
+                <template #header>
+                    <div class="terminal-title-wrapper">
+                        <!-- 左侧 -->
+                        <div class="title-left-fixed">
+                            <!-- title信息 -->
+                            <div>
+                                <slot name="headerTitle" :terminalInfo="openTerminal">
+                                    {{ openTerminal.headerTitle }}
+                                </slot>
+                            </div>
+                        </div>
+
+                        <!-- 右侧 -->
+                        <div class="title-right-fixed">
+                            <el-popconfirm @confirm="reConnect(openTerminal.terminalId)" title="确认重新连接?">
+                                <template #reference>
+                                    <div class="mr15 pointer">
+                                        <el-tag v-if="openTerminal.status == TerminalStatus.Connected" type="success" effect="light" round> 已连接 </el-tag>
+                                        <el-tag v-else type="danger" effect="light" round> 未连接 </el-tag>
+                                    </div>
+                                </template>
+                            </el-popconfirm>
+
+                            <el-popover placement="bottom" :width="200" trigger="hover">
+                                <template #reference>
+                                    <SvgIcon name="QuestionFilled" :size="20" class="pointer-icon mr10" />
+                                </template>
+                                <div>ctrl | command + f (搜索)</div>
+                                <div class="mt5">点击连接状态可重连</div>
+                            </el-popover>
+
+                            <SvgIcon
+                                name="ArrowDown"
+                                v-if="props.visibleMinimize"
+                                @click="minimize(openTerminal.terminalId)"
+                                :size="20"
+                                class="pointer-icon mr10"
+                                title="最小化"
+                            />
+
+                            <!-- <SvgIcon name="FullScreen" @click="handlerFullScreen(openTerminal)" :size="20" class="pointer-icon mr10" title="全屏|退出全屏" /> -->
+
+                            <SvgIcon name="Close" class="pointer-icon" @click="close(openTerminal.terminalId)" title="关闭" :size="20" />
+                        </div>
+                    </div>
+                </template>
+                <div class="terminal-wrapper" style="height: calc(100vh - 215px)">
+                    <TerminalBody
+                        @status-change="terminalStatusChange(openTerminal.terminalId, $event)"
+                        :ref="(el) => setTerminalRef(el, openTerminal.terminalId)"
+                        :cmd="openTerminal.cmd"
+                        :socket-url="openTerminal.socketUrl"
+                    />
+                </div>
+            </el-dialog>
+        </div>
+
+        <!-- 终端最小化 -->
+        <div class="terminal-minimize-container">
+            <el-card
+                v-for="minimizeTerminal of minimizeTerminals"
+                :key="minimizeTerminal.terminalId"
+                :class="`terminal-minimize-item pointer ${minimizeTerminal.styleClass}`"
+                size="small"
+                @click="maximize(minimizeTerminal.terminalId)"
+            >
+                <el-tooltip effect="customized" :content="minimizeTerminal.desc" placement="top">
+                    <span>
+                        {{ minimizeTerminal.title }}
+                    </span>
+                </el-tooltip>
+
+                <!-- 关闭按钮 -->
+                <SvgIcon name="CloseBold" @click.stop="closeMinimizeTerminal(minimizeTerminal.terminalId)" class="ml10 pointer-icon fr" :size="20" />
+            </el-card>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive } from 'vue';
+import TerminalBody from '@/components/terminal/TerminalBody.vue';
+import SvgIcon from '@/components/svgIcon/index.vue';
+import { TerminalStatus } from './common';
+
+const props = defineProps({
+    visibleMinimize: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['close', 'minimize']);
+
+const openTerminalRefs: any = {};
+
+/**
+terminal对象信息:
+
+visible: false,
+machineId: null as any,
+terminalId: null as any,
+machine: {} as any,
+fullscreen: false,
+ */
+
+const state = reactive({
+    terminals: {} as any, // key -> terminalId  value -> terminal
+    minimizeTerminals: {} as any, // key -> terminalId  value -> 简易terminal
+});
+
+const { terminals, minimizeTerminals } = toRefs(state);
+
+const setTerminalRef = (el: any, terminalId: any) => {
+    if (terminalId) {
+        openTerminalRefs[terminalId] = el;
+    }
+};
+
+function open(terminalInfo: any, cmd: string = '') {
+    let terminalId = terminalInfo.terminalId;
+    if (!terminalId) {
+        terminalId = Date.now();
+    }
+    state.terminals[terminalId] = {
+        ...terminalInfo,
+        terminalId,
+        visible: true,
+        cmd,
+        status: TerminalStatus.NoConnected,
+    };
+}
+
+const terminalStatusChange = (terminalId: string, status: TerminalStatus) => {
+    const terminal = state.terminals[terminalId];
+    if (terminal) {
+        terminal.status = status;
+    }
+
+    const minTerminal = state.minimizeTerminals[terminalId];
+    if (!minTerminal) {
+        return;
+    }
+    minTerminal.styleClass = getTerminalStatysStyleClass(terminalId, status);
+};
+
+const getTerminalStatysStyleClass = (terminalId: any, status: any = null) => {
+    if (status == null) {
+        status = openTerminalRefs[terminalId].getStatus();
+    }
+    if (status == TerminalStatus.Connected) {
+        return 'terminal-status-success';
+    }
+
+    if (status == TerminalStatus.NoConnected) {
+        return 'terminal-status-no-connect';
+    }
+
+    return 'terminal-status-error';
+};
+
+const reConnect = (terminalId: any) => {
+    openTerminalRefs[terminalId].init();
+};
+
+function close(terminalId: any) {
+    console.log('in terminal dialog close');
+    delete state.terminals[terminalId];
+
+    // 关闭终端，并删除终端ref
+    const terminalRef = openTerminalRefs[terminalId];
+    terminalRef && terminalRef.close();
+    delete openTerminalRefs[terminalId];
+
+    emit('close', terminalId);
+}
+
+function minimize(terminalId: number) {
+    console.log('in terminal dialog minimize: ', terminalId);
+
+    const terminal = state.terminals[terminalId];
+    if (!terminal) {
+        console.warn('不存在该终端信息: ', terminalId);
+        return;
+    }
+    terminal.visible = false;
+
+    const minTerminalInfo = {
+        terminalId: terminal.terminalId,
+        title: terminal.minTitle, // 截取terminalId最后两位区分多个terminal
+        desc: terminal.minDesc,
+        styleClass: getTerminalStatysStyleClass(terminalId),
+    };
+    state.minimizeTerminals[terminalId] = minTerminalInfo;
+
+    emit('minimize', minTerminalInfo);
+}
+
+function maximize(terminalId: any) {
+    console.log('in terminal dialog maximize: ', terminalId);
+    const minTerminal = state.minimizeTerminals[terminalId];
+    if (!minTerminal) {
+        console.log('no min terminal...');
+        return;
+    }
+    delete state.minimizeTerminals[terminalId];
+
+    // 显示终端信息
+    state.terminals[terminalId].visible = true;
+
+    const terminalRef = openTerminalRefs[terminalId];
+    // fit
+    setTimeout(() => {
+        terminalRef.fitTerminal();
+        terminalRef.focus();
+    }, 250);
+}
+
+const closeMinimizeTerminal = (terminalId: any) => {
+    delete state.minimizeTerminals[terminalId];
+    close(terminalId);
+};
+
+defineExpose({
+    open,
+    close,
+    minimize,
+    maximize,
+});
+</script>
+
+<style lang="scss">
+.terminal-dialog-container {
+    .el-dialog__header {
+        padding: 10px;
+    }
+
+    // .terminal-dialog {
+    //     height: calc(100vh - 200px) !important;
+    // }
+
+    .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
+        padding: 0px !important;
+    }
+
+    .terminal-title-wrapper {
+        display: flex;
+        justify-content: space-between;
+        font-size: 16px;
+
+        .title-right-fixed {
+            display: flex;
+            align-items: center;
+            font-size: 20px;
+            text-align: end;
+        }
+    }
+}
+
+.terminal-minimize-container {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+    z-index: 10;
+    display: flex;
+    flex-wrap: wrap-reverse;
+    justify-content: flex-end;
+
+    .terminal-minimize-item {
+        min-width: 120px;
+        // box-shadow: 0 3px 4px #dee2e6;
+        border-radius: 4px;
+        margin: 1px 1px;
+    }
+
+    .terminal-status-error {
+        box-shadow: 0 3px 4px var(--el-color-danger);
+        border-color: var(--el-color-danger);
+    }
+
+    .terminal-status-no-connect {
+        box-shadow: 0 3px 4px var(--el-color-warning);
+        border-color: var(--el-color-warning);
+    }
+
+    .terminal-status-success {
+        box-shadow: 0 3px 4px var(--el-color-success);
+        border-color: var(--el-color-success);
+    }
+
+    .el-card__body {
+        padding: 15px !important;
+    }
+}
+</style>

mayfly_go_web/src/components/terminal/TerminalSearch.vue

@@ -0,0 +1,149 @@
+<template>
+    <div id="search-card" v-show="search.visible" @keydown.esc="closeSearch">
+        <el-card title="搜索" size="small">
+            <!-- 搜索框 -->
+            <el-input
+                class="search-input"
+                ref="searchInputRef"
+                placeholder="请输入查找内容,回车搜索"
+                v-model="search.value"
+                @keyup.enter.native="searchKeywords(true)"
+                clearable
+            >
+            </el-input>
+            <!-- 选项 -->
+            <div class="search-options">
+                <el-row>
+                    <el-col :span="12">
+                        <el-checkbox class="usn" v-model="search.regex"> 正则匹配 </el-checkbox>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-checkbox class="usn" v-model="search.words"> 单词全匹配 </el-checkbox>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-checkbox class="usn" v-model="search.matchCase"> 区分大小写 </el-checkbox>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-checkbox class="usn" v-model="search.incremental"> 增量查找 </el-checkbox>
+                    </el-col>
+                </el-row>
+            </div>
+            <!-- 按钮 -->
+            <div class="search-buttons">
+                <el-button class="terminal-search-button search-button-prev" type="primary" size="small" @click="searchKeywords(false)"> 上一个 </el-button>
+                <el-button class="terminal-search-button search-button-next" type="primary" size="small" @click="searchKeywords(true)"> 下一个 </el-button>
+                <el-button class="terminal-search-button search-button-next" type="primary" size="small" @click="closeSearch"> 关闭 </el-button>
+            </div>
+        </el-card>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, toRefs, nextTick, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { SearchAddon, ISearchOptions } from 'xterm-addon-search';
+
+const props = defineProps({
+    searchAddon: {
+        type: [SearchAddon],
+        require: true,
+    },
+});
+
+const state = reactive({
+    search: {
+        visible: false,
+        value: '',
+        regex: false,
+        words: false,
+        matchCase: false,
+        incremental: false,
+    },
+});
+
+const { search } = toRefs(state);
+
+const emit = defineEmits(['close']);
+
+const searchInputRef: any = ref(null);
+
+function open() {
+    const visible = state.search.visible;
+    state.search.visible = !visible;
+    console.log(state.search.visible);
+    if (!visible) {
+        nextTick(() => {
+            searchInputRef.value.focus();
+        });
+    }
+}
+
+function closeSearch() {
+    state.search.visible = false;
+    state.search.value = '';
+    props.searchAddon?.clearDecorations();
+    emit('close');
+}
+
+function searchKeywords(direction: any) {
+    if (!state.search.value) {
+        return;
+    }
+    const option = {
+        regex: state.search.regex,
+        wholeWord: state.search.words,
+        caseSensitive: state.search.matchCase,
+        incremental: state.search.incremental,
+    };
+    let res;
+    if (direction) {
+        res = props.searchAddon?.findNext(state.search.value, getSearchOptions(option));
+    } else {
+        res = props.searchAddon?.findPrevious(state.search.value, getSearchOptions(option));
+    }
+    if (!res) {
+        ElMessage.info('未查询到匹配项');
+    }
+}
+
+const getSearchOptions = (searchOptions?: ISearchOptions): ISearchOptions => {
+    return {
+        ...searchOptions,
+        decorations: {
+            matchOverviewRuler: '#888888',
+            activeMatchColorOverviewRuler: '#ffff00',
+            matchBackground: '#888888',
+            activeMatchBackground: '#ffff00',
+        },
+    };
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss" scoped>
+#search-card {
+    position: absolute;
+    top: 60px;
+    right: 20px;
+    z-index: 1200;
+    width: 270px;
+
+    .search-input {
+        width: 240px;
+    }
+
+    .search-options {
+        margin: 12px 0;
+    }
+
+    .search-buttons {
+        margin-top: 5px;
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .terminal-search-button {
+        margin-left: 10px;
+    }
+}
+</style>

mayfly_go_web/src/components/terminal/common.ts

@@ -0,0 +1,6 @@
+export enum TerminalStatus {
+    Error = -1,
+    NoConnected = 0,
+    Connected = 1,
+    Disconnected = 2,
+}

mayfly_go_web/src/main.ts

@@ -9,6 +9,7 @@ import { registElSvgIcon } from '@/common/utils/svgIcons';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import { ElMessage } from 'element-plus';
 

mayfly_go_web/src/store/themeConfig.ts

@@ -24,13 +24,13 @@ export const useThemeConfig = defineStore('themeConfig', {
             // 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             topBar: '#ffffff',
             // 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-            menuBar: '#545c64',
+            menuBar: '#FFFFFF',
             // 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             columnsMenuBar: '#545c64',
             // 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             topBarColor: '#606266',
             // 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-            menuBarColor: '#eaeaea',
+            menuBarColor: '#606266',
             // 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             columnsMenuBarColor: '#e6e6e6',
             // 是否开启顶栏背景颜色渐变
@@ -81,6 +81,8 @@ export const useThemeConfig = defineStore('themeConfig', {
             isSortableTagsView: true,
             // 是否开启 Footer 底部版权信息
             isFooter: false,
+            // 是否暗模式
+            isDark: false,
             // 是否开启灰色模式
             isGrayscale: false,
             // 是否开启色弱模式

mayfly_go_web/src/theme/app.scss

@@ -7,6 +7,24 @@
     outline: none !important;
 }
 
+:root {
+	--color-white: #ffffff;
+	--bg-main-color: #f8f8f8;
+	--bg-color: #f5f5ff;
+    --bg-menuBarActiveColor: #0000000a;  // 菜单栏激活时的背景色
+	--border-color-light: #f1f2f3;
+	--el-color-primary-lighter: #ecf5ff;
+	--color-success-lighter: #f0f9eb;
+	--color-warning-lighter: #fdf6ec;
+	--color-danger-lighter: #fef0f0;
+	--color-dark-hover: #0000001a;
+	--color-menu-hover: rgba(0, 0, 0, 0.2);
+	--color-user-hover: rgba(0, 0, 0, 0.04);
+	--color-seting-main: #e9eef3;
+	--color-seting-aside: #d3dce6;
+	--color-seting-header: #b3c0d1;
+}
+
 html,
 body,
 #app {
@@ -18,7 +36,7 @@ body,
     font-weight: 450;
     -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: transparent;
-    background-color: #f8f8f8;
+    background-color: var(--bg-main-color);
     font-size: 14px;
     overflow: hidden;
     position: relative;
@@ -53,7 +71,7 @@ body,
         padding: 0 !important;
         overflow: hidden;
         width: 100%;
-        background-color: #f8f8f8;
+        background-color: var(--bg-main-color);
     }
 
     .el-scrollbar {
@@ -65,11 +83,11 @@ body,
         width: 100%;
         height: 100%;
         border-radius: 4px;
-        border: 1px solid #ebeef5;
+        border: 1px solid var(--el-border-color-light, #ebeef5);
     }
 
     .layout-el-aside-br-color {
-        border-right: 1px solid rgb(238, 238, 238);
+        border-right: 1px solid var(--el-border-color-light, #ebeef5);
     }
 
     .layout-aside-width-default {
@@ -116,7 +134,7 @@ body,
         display: flex;
         align-items: center;
         margin-bottom: 0 !important;
-        border-bottom: 1px solid rgb(230, 230, 230);
+        border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
     }
 
     .el-divider {
@@ -128,7 +146,7 @@ body,
 ------------------------------- */
 #nprogress {
     .bar {
-        background: var(--color-primary) !important;
+        background: var(--el-color-primary) !important;
         z-index: 9999999 !important;
     }
 }
@@ -195,23 +213,23 @@ body,
 /* 颜色值
 ------------------------------- */
 .color-primary {
-    color: var(--color-primary);
+    color: var(--el-color-primary);
 }
 
 .color-success {
-    color: var(--color-success);
+    color: var(--el-color-success);
 }
 
 .color-warning {
-    color: var(--color-warning);
+    color: var(--el-color-warning);
 }
 
 .color-danger {
-    color: var(--color-danger);
+    color: var(--el-color-danger);
 }
 
 .color-info {
-    color: var(--color-info);
+    color: var(--el-color-info);
 }
 
 /* 字体大小全局样式
@@ -262,17 +280,17 @@ body,
 ::-webkit-scrollbar {
     width: 4px;
     height: 8px;
-    background-color: #F5F5F5;
+    background-color: var(--el-border-color-light, #ebeef5);
 }
 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    background-color: #F5F5F5;
+    background-color: var(--el-border-color-light, #ebeef5);
 }
 
 ::-webkit-scrollbar-thumb {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-    background-color: #F5F5F5;
+    background-color: var(--el-border-color-light, #ebeef5);
 }
 
 .el-menu .fa {
@@ -317,11 +335,10 @@ body,
 
 .toolbar {
     width: 100%;
-    padding: 6px;
+    padding: 4px;
-    background-color: #ffffff;
     overflow: hidden;
-    line-height: 32px;
+    line-height: 24px;
-    border: 1px solid #e6ebf5;
+    border: 1px solid var(--el-border-color-light, #ebeef5);
 }
 
 .fl {
@@ -344,4 +361,16 @@ body,
 
 .f12 {
     font-size: 12px
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.pointer-icon {
+    cursor: pointer;
+    transition: color 0.3s;
+}
+.pointer-icon:hover {
+    color: var(--el-color-primary); /* 鼠标移动到图标时的颜色 */
 }

mayfly_go_web/src/theme/base.scss

@@ -1,2 +1 @@
 @import 'common/transition.scss';
-@import 'common/var.scss';

mayfly_go_web/src/theme/common/var.scss

@@ -1,129 +0,0 @@
-/**
-* scss 怎么动态创建变量
-* 本来想用 @function，@for 好像不可以动态创建
-* 2020.12.19 lyt 记录
-**/
-
-/* 定义初始颜色
-------------------------------- */
-$--color-primary: #409eff !default;
-$--color-whites: #ffffff !default;
-$--color-blacks: #000000 !default;
-$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
-$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
-$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
-$--color-primary-light-4: mix($--color-whites, $--color-primary, 40%) !default;
-$--color-primary-light-5: mix($--color-whites, $--color-primary, 50%) !default;
-$--color-primary-light-6: mix($--color-whites, $--color-primary, 60%) !default;
-$--color-primary-light-7: mix($--color-whites, $--color-primary, 70%) !default;
-$--color-primary-light-8: mix($--color-whites, $--color-primary, 80%) !default;
-$--color-primary-light-9: mix($--color-whites, $--color-primary, 90%) !default;
-$--color-success: #67c23a !default;
-$--color-success-light-1: mix($--color-whites, $--color-success, 10%) !default;
-$--color-success-light-2: mix($--color-whites, $--color-success, 20%) !default;
-$--color-success-light-3: mix($--color-whites, $--color-success, 30%) !default;
-$--color-success-light-4: mix($--color-whites, $--color-success, 40%) !default;
-$--color-success-light-5: mix($--color-whites, $--color-success, 50%) !default;
-$--color-success-light-6: mix($--color-whites, $--color-success, 60%) !default;
-$--color-success-light-7: mix($--color-whites, $--color-success, 70%) !default;
-$--color-success-light-8: mix($--color-whites, $--color-success, 80%) !default;
-$--color-success-light-9: mix($--color-whites, $--color-success, 90%) !default;
-$--color-info: #909399 !default;
-$--color-info-light-1: mix($--color-whites, $--color-info, 10%) !default;
-$--color-info-light-2: mix($--color-whites, $--color-info, 20%) !default;
-$--color-info-light-3: mix($--color-whites, $--color-info, 30%) !default;
-$--color-info-light-4: mix($--color-whites, $--color-info, 40%) !default;
-$--color-info-light-5: mix($--color-whites, $--color-info, 50%) !default;
-$--color-info-light-6: mix($--color-whites, $--color-info, 60%) !default;
-$--color-info-light-7: mix($--color-whites, $--color-info, 70%) !default;
-$--color-info-light-8: mix($--color-whites, $--color-info, 80%) !default;
-$--color-info-light-9: mix($--color-whites, $--color-info, 90%) !default;
-$--color-warning: #e6a23c !default;
-$--color-warning-light-1: mix($--color-whites, $--color-warning, 10%) !default;
-$--color-warning-light-2: mix($--color-whites, $--color-warning, 20%) !default;
-$--color-warning-light-3: mix($--color-whites, $--color-warning, 30%) !default;
-$--color-warning-light-4: mix($--color-whites, $--color-warning, 40%) !default;
-$--color-warning-light-5: mix($--color-whites, $--color-warning, 50%) !default;
-$--color-warning-light-6: mix($--color-whites, $--color-warning, 60%) !default;
-$--color-warning-light-7: mix($--color-whites, $--color-warning, 70%) !default;
-$--color-warning-light-8: mix($--color-whites, $--color-warning, 80%) !default;
-$--color-warning-light-9: mix($--color-whites, $--color-warning, 90%) !default;
-$--color-danger: #f56c6c !default;
-$--color-danger-light-1: mix($--color-whites, $--color-danger, 10%) !default;
-$--color-danger-light-2: mix($--color-whites, $--color-danger, 20%) !default;
-$--color-danger-light-3: mix($--color-whites, $--color-danger, 30%) !default;
-$--color-danger-light-4: mix($--color-whites, $--color-danger, 40%) !default;
-$--color-danger-light-5: mix($--color-whites, $--color-danger, 50%) !default;
-$--color-danger-light-6: mix($--color-whites, $--color-danger, 60%) !default;
-$--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
-$--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
-$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
-$--bg-topBar: #ffffff;
-$--bg-menuBar: #545c64;
-$--bg-columnsMenuBar: #545c64;
-$--bg-topBarColor: #606266;
-$--bg-menuBarColor: #eaeaea;
-$--bg-columnsMenuBarColor: #e6e6e6;
-
-/* 赋值给:root
-------------------------------- */
-:root {
-	--color-primary: #{$--color-primary};
-	--color-whites: #{$--color-whites};
-	--color-blacks: #{$--color-blacks};
-	--color-primary-light-1: #{$--color-primary-light-1};
-	--color-primary-light-2: #{$--color-primary-light-2};
-	--color-primary-light-3: #{$--color-primary-light-3};
-	--color-primary-light-4: #{$--color-primary-light-4};
-	--color-primary-light-5: #{$--color-primary-light-5};
-	--color-primary-light-6: #{$--color-primary-light-6};
-	--color-primary-light-7: #{$--color-primary-light-7};
-	--color-primary-light-8: #{$--color-primary-light-8};
-	--color-primary-light-9: #{$--color-primary-light-9};
-	--color-success: #{$--color-success};
-	--color-success-light-1: #{$--color-success-light-1};
-	--color-success-light-2: #{$--color-success-light-2};
-	--color-success-light-3: #{$--color-success-light-3};
-	--color-success-light-4: #{$--color-success-light-4};
-	--color-success-light-5: #{$--color-success-light-5};
-	--color-success-light-6: #{$--color-success-light-6};
-	--color-success-light-7: #{$--color-success-light-7};
-	--color-success-light-8: #{$--color-success-light-8};
-	--color-success-light-9: #{$--color-success-light-9};
-	--color-info: #{$--color-info};
-	--color-info-light-1: #{$--color-info-light-1};
-	--color-info-light-2: #{$--color-info-light-2};
-	--color-info-light-3: #{$--color-info-light-3};
-	--color-info-light-4: #{$--color-info-light-4};
-	--color-info-light-5: #{$--color-info-light-5};
-	--color-info-light-6: #{$--color-info-light-6};
-	--color-info-light-7: #{$--color-info-light-7};
-	--color-info-light-8: #{$--color-info-light-8};
-	--color-info-light-9: #{$--color-info-light-9};
-	--color-warning: #{$--color-warning};
-	--color-warning-light-1: #{$--color-warning-light-1};
-	--color-warning-light-2: #{$--color-warning-light-2};
-	--color-warning-light-3: #{$--color-warning-light-3};
-	--color-warning-light-4: #{$--color-warning-light-4};
-	--color-warning-light-5: #{$--color-warning-light-5};
-	--color-warning-light-6: #{$--color-warning-light-6};
-	--color-warning-light-7: #{$--color-warning-light-7};
-	--color-warning-light-8: #{$--color-warning-light-8};
-	--color-warning-light-9: #{$--color-warning-light-9};
-	--color-danger: #{$--color-danger};
-	--color-danger-light-1: #{$--color-danger-light-1};
-	--color-danger-light-2: #{$--color-danger-light-2};
-	--color-danger-light-3: #{$--color-danger-light-3};
-	--color-danger-light-4: #{$--color-danger-light-4};
-	--color-danger-light-5: #{$--color-danger-light-5};
-	--color-danger-light-6: #{$--color-danger-light-6};
-	--color-danger-light-7: #{$--color-danger-light-7};
-	--color-danger-light-8: #{$--color-danger-light-8};
-	--color-danger-light-9: #{$--color-danger-light-9};
-	--bg-topBar: #{$--bg-topBar};
-	--bg-menuBar: #{$--bg-menuBar};
-	--bg-columnsMenuBar: #{$--bg-columnsMenuBar};
-	--bg-topBarColor: #{$--bg-topBarColor};
-	--bg-menuBarColor: #{$--bg-menuBarColor};
-	--bg-columnsMenuBarColor: #{$--bg-columnsMenuBarColor};
-}

mayfly_go_web/src/theme/dark.scss

@@ -0,0 +1,27 @@
+html.dark {
+    // 变量(自定义时，只需修改这里的值)
+	--next-bg-main: #1f1f1f;
+	--next-color-white: #ffffff;
+	--next-color-disabled: #191919;
+	--next-color-bar: #dadada;
+	--next-color-primary: #303030;
+	--next-border-color: #424242;
+	--next-border-black: #333333;
+	--next-border-columns: #2a2a2a;
+	--next-color-seting: #505050;
+	--next-text-color-regular: #9b9da1;
+	--next-text-color-placeholder: #7a7a7a;
+	--next-color-hover: #3c3c3c;
+	--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
+
+    /* 自定义深色背景颜色 */
+    // root
+	--bg-main-color: var(--next-bg-main) !important;
+	--bg-topBar: var(--next-color-disabled) !important;
+	--bg-topBarColor: var(--next-color-bar) !important;
+	--bg-menuBar: var(--next-color-disabled) !important;
+	--bg-menuBarColor: var(--next-color-bar) !important;
+	--bg-menuBarActiveColor: var(--next-color-hover-rgba) !important;
+	--bg-columnsMenuBar: var(--next-color-disabled) !important;
+	--bg-columnsMenuBarColor: var(--next-color-bar) !important;
+  }

mayfly_go_web/src/theme/index.scss

@@ -4,4 +4,5 @@
 @import './element.scss';
 @import './media/media.scss';
 @import './waves.scss';
+@import './dark.scss';
 @import './iconSelector.scss';

mayfly_go_web/src/theme/loading.scss

@@ -15,7 +15,7 @@
 .loading-next .loading-next-box-warp .loading-next-box-item {
 	width: 33.333333%;
 	height: 33.333333%;
-	background: var(--color-primary);
+	background: var(--el-color-primary);
 	float: left;
 	animation: loading-next-animation 1.2s infinite ease;
 	border-radius: 1px;

mayfly_go_web/src/theme/media/scrollbar.scss

@@ -9,7 +9,7 @@
 		height: 3px !important;
 	}
 	::-webkit-scrollbar-track-piece {
-		background-color: #f8f8f8;
+		background-color: var(--bg-main-color);
 	}
 	// 滚动条的设置
 	::-webkit-scrollbar-thumb {
@@ -40,7 +40,7 @@
 		height: 7px;
 	}
 	::-webkit-scrollbar-track-piece {
-		background-color: #f8f8f8;
+		background-color: var(--bg-main-color);
 	}
 	// 滚动条的设置
 	::-webkit-scrollbar-thumb {
@@ -53,4 +53,4 @@
 	::-webkit-scrollbar-thumb:hover {
 		background-color: rgba(144, 147, 153, 0.5);
 	}
-}
+}

mayfly_go_web/src/theme/mixins/element-mixins.scss

@@ -1,34 +0,0 @@
-/* Button 按钮
-------------------------------- */
-@mixin Button($main, $c1, $c2) {
-	color: set-color($main);
-	background: set-color($c1);
-	border-color: set-color($c2);
-}
-
-/* Radio 单选框、Checkbox 多选框
-------------------------------- */
-@mixin RadioCheckbox($name) {
-	background-color: set-color($name);
-	border-color: set-color($name);
-}
-
-/* Tag 标签
-------------------------------- */
-@mixin Tag($main, $c1, $c2) {
-	color: set-color($main);
-	background-color: set-color($c1);
-	border-color: set-color($c2);
-}
-@mixin TagDark($main, $c1) {
-	color: set-color($main);
-	background-color: set-color($c1);
-}
-
-/* Alert 警告
-------------------------------- */
-@mixin Alert($main, $c1, $c2) {
-	color: set-color($main);
-	background: set-color($c1);
-	border: 1px solid set-color($c2);
-}

mayfly_go_web/src/theme/mixins/function.scss

@@ -1,5 +0,0 @@
-/* 颜色调用函数
-------------------------------- */
-@function set-color($key) {
-	@return var(--color-#{$key});
-}

mayfly_go_web/src/theme/mixins/index.scss

@@ -1,3 +1,15 @@
+/* 第三方图标字体间距/大小设置
+------------------------------- */
+@mixin generalIcon {
+	font-size: 14px !important;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 5px;
+	width: 24px;
+	text-align: center;
+	justify-content: center;
+}
+
 /* 文本不换行
 ------------------------------- */
 @mixin text-no-wrap() {
@@ -41,4 +53,4 @@
 	&::-webkit-scrollbar-thumb:hover {
 		background-color: #bbb;
 	}
-}
+}

mayfly_go_web/src/types/pinia.d.ts

@@ -1,5 +1,5 @@
 declare interface UserInfoState<T = any> {
-    userInfo: any
+    userInfo: any;
 }
 
 declare interface ThemeConfigState {
@@ -37,6 +37,7 @@ declare interface ThemeConfigState {
         isCacheTagsView: boolean;
         isSortableTagsView: boolean;
         isFooter: boolean;
+        isDark: boolean;
         isGrayscale: boolean;
         isInvert: boolean;
         isWartermark: boolean;
@@ -61,8 +62,8 @@ declare interface ThemeConfigState {
 
 // TagsView 路由列表
 declare interface TagsViewRoutesState<T = any> {
-	tagsViewRoutes: T[];
+    tagsViewRoutes: T[];
-	isTagsViewCurrenFull: Boolean;
+    isTagsViewCurrenFull: Boolean;
 }
 
 // 路由列表
@@ -74,4 +75,4 @@ declare interface RoutesListState {
 declare interface KeepAliveNamesState {
     keepAliveNames: string[];
     cachedViews: string[];
-}
+}

mayfly_go_web/src/views/home/Home.vue

@@ -7,8 +7,7 @@
                         <img :src="userInfo.photo" />
                         <div class="home-card-first-right ml15">
                             <div class="flex-margin">
-                                <div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}`
+                                <div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}` }}</div>
-                                }}</div>
                             </div>
                         </div>
                     </div>
@@ -31,7 +30,7 @@
 import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
 // import * as echarts from 'echarts';
 import { CountUp } from 'countup.js';
-import { formatAxis } from '@/common/utils/format.ts';
+import { formatAxis } from '@/common/utils/format';
 import { indexApi } from './api';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -65,9 +64,7 @@ const state = reactive({
     ],
 });
 
-const {
+const { topCardItemList } = toRefs(state);
-    topCardItemList,
-} = toRefs(state)
 
 // 当前时间提示语
 const currentTime = computed(() => {
@@ -179,8 +176,8 @@ onMounted(() => {
     }
 
     .home-card-first {
-        background: white;
+        background: var(--bg-main-color);
-        border: 1px solid #ebeef5;
+        border: 1px solid var(--el-border-color-light, #ebeef5);
         display: flex;
         align-items: center;
 
@@ -188,7 +185,7 @@ onMounted(() => {
             width: 60px;
             height: 60px;
             border-radius: 100%;
-            border: 2px solid var(--color-primary-light-5);
+            border: 2px solid var(--el-color-primary-light-5);
         }
 
         .home-card-first-right {
@@ -247,7 +244,8 @@ onMounted(() => {
             .home-dynamic-item-left {
                 text-align: right;
 
-                .home-dynamic-item-left-time1 {}
+                .home-dynamic-item-left-time1 {
+                }
 
                 .home-dynamic-item-left-time2 {
                     font-size: 13px;
@@ -262,7 +260,7 @@ onMounted(() => {
                 position: relative;
 
                 i {
-                    color: var(--color-primary);
+                    color: var(--el-color-primary);
                     font-size: 12px;
                     position: absolute;
                     top: 1px;
@@ -284,7 +282,7 @@ onMounted(() => {
                         border-radius: 100%;
                         padding: 3px 2px 2px;
                         text-align: center;
-                        color: var(--color-primary);
+                        color: var(--el-color-primary);
                     }
                 }
 

mayfly_go_web/src/views/layout/component/columnsAside.vue

@@ -2,11 +2,18 @@
     <div class="layout-columns-aside">
         <el-scrollbar>
             <ul>
-                <li v-for="(v, k) in state.columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" :ref="
+                <li
-                    (el) => {
+                    v-for="(v, k) in state.columnsAsideList"
-                        if (el) columnsAsideOffsetTopRefs[k] = el;
+                    :key="k"
-                    }
+                    @click="onColumnsAsideMenuClick(v, k)"
-                " :class="{ 'layout-columns-active': state.liIndex === k }" :title="v.meta.title">
+                    :ref="
+                        (el) => {
+                            if (el) columnsAsideOffsetTopRefs[k] = el;
+                        }
+                    "
+                    :class="{ 'layout-columns-active': state.liIndex === k }"
+                    :title="v.meta.title"
+                >
                     <div class="layout-columns-aside-li-box" v-if="!v.meta.link || (v.meta.link && v.meta.linkType == 1)">
                         <i :class="v.meta.icon"></i>
                         <div class="layout-columns-aside-li-box-title font12">
@@ -166,7 +173,7 @@ onBeforeRouteUpdate((to) => {
         }
 
         .columns-round {
-            background: var(--color-primary);
+            background: var(--el-color-primary);
             color: #ffffff;
             position: absolute;
             left: 50%;

mayfly_go_web/src/views/layout/lockScreen/index.vue

@@ -1,62 +1,62 @@
 <template>
-	<div v-show="state.isShowLockScreen">
+    <div v-show="state.isShowLockScreen">
-		<div class="layout-lock-screen-mask"></div>
+        <div class="layout-lock-screen-mask"></div>
-		<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
+        <div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
-		<div class="layout-lock-screen">
+        <div class="layout-lock-screen">
-			<div
+            <div
-				class="layout-lock-screen-date"
+                class="layout-lock-screen-date"
-				ref="layoutLockScreenDateRef"
+                ref="layoutLockScreenDateRef"
-				@mousedown="onDownPc"
+                @mousedown="onDownPc"
-				@mousemove="onMovePc"
+                @mousemove="onMovePc"
-				@mouseup="onEnd"
+                @mouseup="onEnd"
-				@touchstart.stop="onDownApp"
+                @touchstart.stop="onDownApp"
-				@touchmove.stop="onMoveApp"
+                @touchmove.stop="onMoveApp"
-				@touchend.stop="onEnd"
+                @touchend.stop="onEnd"
-			>
+            >
-				<div class="layout-lock-screen-date-box">
+                <div class="layout-lock-screen-date-box">
-					<div class="layout-lock-screen-date-box-time">
+                    <div class="layout-lock-screen-date-box-time">
-						{{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span>
+                        {{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span>
-					</div>
+                    </div>
-					<div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
+                    <div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
-				</div>
+                </div>
-				<div class="layout-lock-screen-date-top">
+                <div class="layout-lock-screen-date-top">
-					<SvgIcon name="ele-Top" />
+                    <SvgIcon name="ele-Top" />
-					<div class="layout-lock-screen-date-top-text">上滑解锁</div>
+                    <div class="layout-lock-screen-date-top-text">上滑解锁</div>
-				</div>
+                </div>
-			</div>
+            </div>
-			<transition name="el-zoom-in-center">
+            <transition name="el-zoom-in-center">
-				<div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
+                <div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
-					<div class="layout-lock-screen-login-box">
+                    <div class="layout-lock-screen-login-box">
-						<div class="layout-lock-screen-login-box-img">
+                        <div class="layout-lock-screen-login-box-img">
-							<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
+                            <img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
-						</div>
+                        </div>
-						<div class="layout-lock-screen-login-box-name">Administrator</div>
+                        <div class="layout-lock-screen-login-box-name">Administrator</div>
-						<div class="layout-lock-screen-login-box-value">
+                        <div class="layout-lock-screen-login-box-value">
-							<el-input
+                            <el-input
-								placeholder="请输入密码"
+                                placeholder="请输入密码"
-								ref="layoutLockScreenInputRef"
+                                ref="layoutLockScreenInputRef"
-								v-model="state.lockScreenPassword"
+                                v-model="state.lockScreenPassword"
-								@keyup.enter.native.stop="onLockScreenSubmit()"
+                                @keyup.enter.native.stop="onLockScreenSubmit()"
-							>
+                            >
-								<template #append>
+                                <template #append>
-									<el-button @click="onLockScreenSubmit">
+                                    <el-button @click="onLockScreenSubmit">
-										<el-icon class="el-input__icon">
+                                        <el-icon class="el-input__icon">
-											<ele-Right />
+                                            <ele-Right />
-										</el-icon>
+                                        </el-icon>
-									</el-button>
+                                    </el-button>
-								</template>
+                                </template>
-							</el-input>
+                            </el-input>
-						</div>
+                        </div>
-					</div>
+                    </div>
-					<div class="layout-lock-screen-login-icon">
+                    <div class="layout-lock-screen-login-icon">
-						<SvgIcon name="ele-Microphone" :size="20" />
+                        <SvgIcon name="ele-Microphone" :size="20" />
-						<SvgIcon name="ele-AlarmClock" :size="20" />
+                        <SvgIcon name="ele-AlarmClock" :size="20" />
-						<SvgIcon name="ele-SwitchButton" :size="20" />
+                        <SvgIcon name="ele-SwitchButton" :size="20" />
-					</div>
+                    </div>
-				</div>
+                </div>
-			</transition>
+            </transition>
-		</div>
+        </div>
-	</div>
+    </div>
 </template>
 
 <script setup lang="ts" name="layoutLockScreen">
@@ -67,286 +67,286 @@ import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
 
 // 定义变量内容
-const layoutLockScreenDateRef = ref<null>();
+const layoutLockScreenDateRef = ref<any>();
 const layoutLockScreenInputRef = ref();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const state = reactive({
-	transparency: 1,
+    transparency: 1,
-	downClientY: 0,
+    downClientY: 0,
-	moveDifference: 0,
+    moveDifference: 0,
-	isShowLoockLogin: false,
+    isShowLoockLogin: false,
-	isFlags: false,
+    isFlags: false,
-	querySelectorEl: '' as any,
+    querySelectorEl: '' as any,
-	time: {
+    time: {
-		hm: '',
+        hm: '',
-		s: '',
+        s: '',
-		mdq: '',
+        mdq: '',
-	},
+    },
-	setIntervalTime: 0,
+    setIntervalTime: 0,
-	isShowLockScreen: false,
+    isShowLockScreen: false,
-	isShowLockScreenIntervalTime: 0,
+    isShowLockScreenIntervalTime: 0,
-	lockScreenPassword: '',
+    lockScreenPassword: '',
 });
 
 // 鼠标按下 pc
 const onDownPc = (down: MouseEvent) => {
-	state.isFlags = true;
+    state.isFlags = true;
-	state.downClientY = down.clientY;
+    state.downClientY = down.clientY;
 };
 // 鼠标按下 app
 const onDownApp = (down: TouchEvent) => {
-	state.isFlags = true;
+    state.isFlags = true;
-	state.downClientY = down.touches[0].clientY;
+    state.downClientY = down.touches[0].clientY;
 };
 // 鼠标移动 pc
 const onMovePc = (move: MouseEvent) => {
-	state.moveDifference = move.clientY - state.downClientY;
+    state.moveDifference = move.clientY - state.downClientY;
-	onMove();
+    onMove();
 };
 // 鼠标移动 app
 const onMoveApp = (move: TouchEvent) => {
-	state.moveDifference = move.touches[0].clientY - state.downClientY;
+    state.moveDifference = move.touches[0].clientY - state.downClientY;
-	onMove();
+    onMove();
 };
 // 鼠标移动事件
 const onMove = () => {
-	if (state.isFlags) {
+    if (state.isFlags) {
-		const el = <HTMLElement>state.querySelectorEl;
+        const el = <HTMLElement>state.querySelectorEl;
-		const opacitys = (state.transparency -= 1 / 200);
+        const opacitys = (state.transparency -= 1 / 200);
-		if (state.moveDifference >= 0) return false;
+        if (state.moveDifference >= 0) return false;
-		el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
+        el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
-		if (state.moveDifference < -400) {
+        if (state.moveDifference < -400) {
-			el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
+            el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
-			state.moveDifference = -el.clientHeight;
+            state.moveDifference = -el.clientHeight;
-			setTimeout(() => {
+            setTimeout(() => {
-				el && el.parentNode?.removeChild(el);
+                el && el.parentNode?.removeChild(el);
-			}, 300);
+            }, 300);
-		}
+        }
-		if (state.moveDifference === -el.clientHeight) {
+        if (state.moveDifference === -el.clientHeight) {
-			state.isShowLoockLogin = true;
+            state.isShowLoockLogin = true;
-			layoutLockScreenInputRef.value.focus();
+            layoutLockScreenInputRef.value.focus();
-		}
+        }
-	}
+    }
 };
 // 鼠标松开
 const onEnd = () => {
-	state.isFlags = false;
+    state.isFlags = false;
-	state.transparency = 1;
+    state.transparency = 1;
-	if (state.moveDifference >= -400) {
+    if (state.moveDifference >= -400) {
-		(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
+        (<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
-	}
+    }
 };
 // 获取要拖拽的初始元素
 const initGetElement = () => {
-	nextTick(() => {
+    nextTick(() => {
-		state.querySelectorEl = layoutLockScreenDateRef.value;
+        state.querySelectorEl = layoutLockScreenDateRef.value;
-	});
+    });
 };
 // 时间初始化
 const initTime = () => {
-	state.time.hm = formatDate(new Date(), 'HH:MM');
+    state.time.hm = formatDate(new Date(), 'HH:MM');
-	state.time.s = formatDate(new Date(), 'SS');
+    state.time.s = formatDate(new Date(), 'SS');
-	state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
+    state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
 };
 // 时间初始化定时器
 const initSetTime = () => {
-	initTime();
+    initTime();
-	state.setIntervalTime = window.setInterval(() => {
+    state.setIntervalTime = window.setInterval(() => {
-		initTime();
+        initTime();
-	}, 1000);
+    }, 1000);
 };
 // 锁屏时间定时器
 const initLockScreen = () => {
-	if (themeConfig.value.isLockScreen) {
+    if (themeConfig.value.isLockScreen) {
-		state.isShowLockScreenIntervalTime = window.setInterval(() => {
+        state.isShowLockScreenIntervalTime = window.setInterval(() => {
-			if (themeConfig.value.lockScreenTime <= 1) {
+            if (themeConfig.value.lockScreenTime <= 1) {
-				state.isShowLockScreen = true;
+                state.isShowLockScreen = true;
-				setLocalThemeConfig();
+                setLocalThemeConfig();
-				return false;
+                return false;
-			}
+            }
-			themeConfig.value.lockScreenTime--;
+            themeConfig.value.lockScreenTime--;
-		}, 1000);
+        }, 1000);
-	} else {
+    } else {
-		clearInterval(state.isShowLockScreenIntervalTime);
+        clearInterval(state.isShowLockScreenIntervalTime);
-	}
+    }
 };
 // 存储布局配置
 const setLocalThemeConfig = () => {
-	themeConfig.value.isDrawer = false;
+    themeConfig.value.isDrawer = false;
-	setLocal('themeConfig', themeConfig.value);
+    setLocal('themeConfig', themeConfig.value);
 };
 // 密码输入点击事件
 const onLockScreenSubmit = () => {
-	themeConfig.value.isLockScreen = false;
+    themeConfig.value.isLockScreen = false;
-	themeConfig.value.lockScreenTime = 30;
+    themeConfig.value.lockScreenTime = 30;
-	setLocalThemeConfig();
+    setLocalThemeConfig();
 };
 // 页面加载时
 onMounted(() => {
-	initGetElement();
+    initGetElement();
-	initSetTime();
+    initSetTime();
-	initLockScreen();
+    initLockScreen();
 });
 // 页面卸载时
 onUnmounted(() => {
-	window.clearInterval(state.setIntervalTime);
+    window.clearInterval(state.setIntervalTime);
-	window.clearInterval(state.isShowLockScreenIntervalTime);
+    window.clearInterval(state.isShowLockScreenIntervalTime);
 });
 </script>
 
 <style scoped lang="scss">
 .layout-lock-screen-fixed {
-	position: fixed;
+    position: fixed;
-	top: 0;
+    top: 0;
-	left: 0;
+    left: 0;
-	width: 100%;
+    width: 100%;
-	height: 100%;
+    height: 100%;
 }
 .layout-lock-screen-filter {
-	filter: blur(1px);
+    filter: blur(1px);
 }
 .layout-lock-screen-mask {
-	background: var(--el-color-white);
+    background: var(--el-color-white);
-	@extend .layout-lock-screen-fixed;
+    @extend .layout-lock-screen-fixed;
-	z-index: 9999990;
+    z-index: 9999990;
 }
 .layout-lock-screen-img {
-	@extend .layout-lock-screen-fixed;
+    @extend .layout-lock-screen-fixed;
-	background-image: url('@/assets/image/bg-login.png');
+    background: url('@/assets/image/bg-login.png') no-repeat;
-	background-size: 100% 100%;
+    background-size: 100% 100%;
-	z-index: 9999991;
+    z-index: 9999991;
 }
 .layout-lock-screen {
-	@extend .layout-lock-screen-fixed;
+    @extend .layout-lock-screen-fixed;
-	z-index: 9999992;
+    z-index: 9999992;
-	&-date {
+    &-date {
-		position: absolute;
+        position: absolute;
-		left: 0;
+        left: 0;
-		top: 0;
+        top: 0;
-		width: 100%;
+        width: 100%;
-		height: 100%;
+        height: 100%;
-		color: var(--el-color-white);
+        color: var(--el-color-white);
-		z-index: 9999993;
+        z-index: 9999993;
-		user-select: none;
+        user-select: none;
-		&-box {
+        &-box {
-			position: absolute;
+            position: absolute;
-			left: 30px;
+            left: 30px;
-			bottom: 50px;
+            bottom: 50px;
-			&-time {
+            &-time {
-				font-size: 100px;
+                font-size: 100px;
-				color: var(--el-color-white);
+                color: var(--el-color-white);
-			}
+            }
-			&-info {
+            &-info {
-				font-size: 40px;
+                font-size: 40px;
-				color: var(--el-color-white);
+                color: var(--el-color-white);
-			}
+            }
-			&-minutes {
+            &-minutes {
-				font-size: 16px;
+                font-size: 16px;
-			}
+            }
-		}
+        }
-		&-top {
+        &-top {
-			width: 40px;
+            width: 40px;
-			height: 40px;
+            height: 40px;
-			line-height: 40px;
+            line-height: 40px;
-			border-radius: 100%;
+            border-radius: 100%;
-			border: 1px solid var(--el-border-color-light, #ebeef5);
+            border: 1px solid var(--el-border-color-light, #ebeef5);
-			background: rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.1);
-			color: var(--el-color-white);
+            color: var(--el-color-white);
-			opacity: 0.8;
+            opacity: 0.8;
-			position: absolute;
+            position: absolute;
-			right: 30px;
+            right: 30px;
-			bottom: 50px;
+            bottom: 50px;
-			text-align: center;
+            text-align: center;
-			overflow: hidden;
+            overflow: hidden;
-			transition: all 0.3s ease;
+            transition: all 0.3s ease;
-			i {
+            i {
-				transition: all 0.3s ease;
+                transition: all 0.3s ease;
-			}
+            }
-			&-text {
+            &-text {
-				opacity: 0;
+                opacity: 0;
-				position: absolute;
+                position: absolute;
-				top: 150%;
+                top: 150%;
-				font-size: 12px;
+                font-size: 12px;
-				color: var(--el-color-white);
+                color: var(--el-color-white);
-				left: 50%;
+                left: 50%;
-				line-height: 1.2;
+                line-height: 1.2;
-				transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%);
-				transition: all 0.3s ease;
+                transition: all 0.3s ease;
-				width: 35px;
+                width: 35px;
-			}
+            }
-			&:hover {
+            &:hover {
-				border: 1px solid rgba(255, 255, 255, 0.5);
+                border: 1px solid rgba(255, 255, 255, 0.5);
-				background: rgba(255, 255, 255, 0.2);
+                background: rgba(255, 255, 255, 0.2);
-				box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
+                box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
-				color: var(--el-color-white);
+                color: var(--el-color-white);
-				opacity: 1;
+                opacity: 1;
-				transition: all 0.3s ease;
+                transition: all 0.3s ease;
-				i {
+                i {
-					transform: translateY(-40px);
+                    transform: translateY(-40px);
-					transition: all 0.3s ease;
+                    transition: all 0.3s ease;
-				}
+                }
-				.layout-lock-screen-date-top-text {
+                .layout-lock-screen-date-top-text {
-					opacity: 1;
+                    opacity: 1;
-					top: 50%;
+                    top: 50%;
-					transition: all 0.3s ease;
+                    transition: all 0.3s ease;
-				}
+                }
-			}
+            }
-		}
+        }
-	}
+    }
-	&-login {
+    &-login {
-		position: relative;
+        position: relative;
-		z-index: 9999994;
+        z-index: 9999994;
-		width: 100%;
+        width: 100%;
-		height: 100%;
+        height: 100%;
-		left: 0;
+        left: 0;
-		top: 0;
+        top: 0;
-		display: flex;
+        display: flex;
-		flex-direction: column;
+        flex-direction: column;
-		justify-content: center;
+        justify-content: center;
-		color: var(--el-color-white);
+        color: var(--el-color-white);
-		&-box {
+        &-box {
-			text-align: center;
+            text-align: center;
-			margin: auto;
+            margin: auto;
-			&-img {
+            &-img {
-				width: 180px;
+                width: 180px;
-				height: 180px;
+                height: 180px;
-				margin: auto;
+                margin: auto;
-				img {
+                img {
-					width: 100%;
+                    width: 100%;
-					height: 100%;
+                    height: 100%;
-					border-radius: 100%;
+                    border-radius: 100%;
-				}
+                }
-			}
+            }
-			&-name {
+            &-name {
-				font-size: 26px;
+                font-size: 26px;
-				margin: 15px 0 30px;
+                margin: 15px 0 30px;
-			}
+            }
-		}
+        }
-		&-icon {
+        &-icon {
-			position: absolute;
+            position: absolute;
-			right: 30px;
+            right: 30px;
-			bottom: 30px;
+            bottom: 30px;
-			i {
+            i {
-				font-size: 20px;
+                font-size: 20px;
-				margin-left: 15px;
+                margin-left: 15px;
-				cursor: pointer;
+                cursor: pointer;
-				opacity: 0.8;
+                opacity: 0.8;
-				&:hover {
+                &:hover {
-					opacity: 1;
+                    opacity: 1;
-				}
+                }
-			}
+            }
-		}
+        }
-	}
+    }
 }
 :deep(.el-input-group__append) {
-	background: var(--el-color-white);
+    background: var(--el-color-white);
-	padding: 0px 15px;
+    padding: 0px 15px;
 }
 :deep(.el-input__inner) {
-	border-right-color: var(--el-border-color-extra-light);
+    border-right-color: var(--el-border-color-extra-light);
-	&:hover {
+    &:hover {
-		border-color: var(--el-border-color-extra-light);
+        border-color: var(--el-border-color-extra-light);
-	}
+    }
 }
-</style>
+</style>

mayfly_go_web/src/views/layout/logo/index.vue

@@ -3,7 +3,9 @@
         <img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
         <span>
             {{ `${themeConfig.globalTitle}` }}
-            <sub><span style="font-size: 10px;color:goldenrod">{{ ` ${config.version}` }}</span></sub>
+            <sub
+                ><span style="font-size: 10px; color: goldenrod">{{ ` ${config.version}` }}</span></sub
+            >
         </span>
     </div>
     <div class="layout-logo-size" v-else @click="onThemeConfigChange">
@@ -41,14 +43,14 @@ const onThemeConfigChange = () => {
     align-items: center;
     justify-content: center;
     box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
-    color: var(--color-primary);
+    color: var(--el-color-primary);
     font-size: 16px;
     cursor: pointer;
     animation: logoAnimation 0.3s ease-in-out;
 
     &:hover {
         span {
-            color: var(--color-primary-light-2);
+            color: var(--el-color-primary-light-2);
         }
     }
 

mayfly_go_web/src/views/layout/main/defaults.vue

@@ -32,7 +32,7 @@ export default {
         watch(
             () => route.path,
             () => {
-                proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0;
+                proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
             }
         );
         return {

mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue

@@ -20,7 +20,6 @@ import Logo from '@/views/layout/logo/index.vue';
 import Horizontal from '@/views/layout/navMenu/horizontal.vue';
 import mittBus from '@/common/utils/mitt';
 
-
 const { themeConfig } = storeToRefs(useThemeConfig());
 const { routesList } = storeToRefs(useRoutesList());
 const route = useRoute();
@@ -106,6 +105,6 @@ onUnmounted(() => {
     padding-right: 15px;
     background: var(--bg-topBar);
     overflow: hidden;
-    border-bottom: 1px solid #f1f2f3;
+    border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
 }
 </style>

mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue

@@ -1,47 +1,48 @@
 <template>
     <div class="layout-breadcrumb-seting">
-        <el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
+        <el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px" @close="onDrawerClose">
-            @close="onDrawerClose">
             <el-scrollbar class="layout-breadcrumb-seting-bar">
                 <!-- ssh终端主题 -->
                 <el-divider content-position="left">终端主题</el-divider>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.terminalForeground" size="small"
+                        <el-color-picker v-model="themeConfig.terminalForeground" size="small" @change="onColorPickerChange('terminalForeground')">
-                            @change="onColorPickerChange('terminalForeground')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">背景颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.terminalBackground" size="small"
+                        <el-color-picker v-model="themeConfig.terminalBackground" size="small" @change="onColorPickerChange('terminalBackground')">
-                            @change="onColorPickerChange('terminalBackground')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">cursor颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.terminalCursor" size="small"
+                        <el-color-picker v-model="themeConfig.terminalCursor" size="small" @change="onColorPickerChange('terminalCursor')"> </el-color-picker>
-                            @change="onColorPickerChange('terminalCursor')">
-                        </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体大小</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-input-number v-model="themeConfig.terminalFontSize" controls-position="right" :min="12"
+                        <el-input-number
-                            :max="24" @change="setLocalThemeConfig" size="small" style="width: 90px">
+                            v-model="themeConfig.terminalFontSize"
+                            controls-position="right"
+                            :min="12"
+                            :max="24"
+                            @change="setLocalThemeConfig"
+                            size="small"
+                            style="width: 90px"
+                        >
                         </el-input-number>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体粗细</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small"
+                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small" style="width: 90px">
-                            style="width: 90px">
                             <el-option label="normal" value="normal"> </el-option>
                             <el-option label="bold" value="bold"> </el-option>
                         </el-select>
@@ -52,8 +53,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">主题</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small"
+                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small" style="width: 130px">
-                            style="width: 130px">
                             <el-option label="vs" value="vs"> </el-option>
                             <el-option label="vs-dark" value="vs-dark"> </el-option>
                             <el-option label="SolarizedLight" value="SolarizedLight"> </el-option>
@@ -66,36 +66,31 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.primary" size="small"
+                        <el-color-picker v-model="themeConfig.primary" size="small" @change="onColorPickerChange('primary')"> </el-color-picker>
-                            @change="onColorPickerChange('primary')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">success</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.success" size="small"
+                        <el-color-picker v-model="themeConfig.success" size="small" @change="onColorPickerChange('success')"> </el-color-picker>
-                            @change="onColorPickerChange('success')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">info</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')">
+                        <el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')"> </el-color-picker>
-                        </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.warning" size="small"
+                        <el-color-picker v-model="themeConfig.warning" size="small" @change="onColorPickerChange('warning')"> </el-color-picker>
-                            @change="onColorPickerChange('warning')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')">
+                        <el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')"> </el-color-picker>
-                        </el-color-picker>
                     </div>
                 </div>
 
@@ -104,46 +99,37 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.topBar" size="small"
+                        <el-color-picker v-model="themeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
-                            @change="onBgColorPickerChange('topBar')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.menuBar" size="small"
+                        <el-color-picker v-model="themeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
-                            @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.columnsMenuBar" size="small"
+                        <el-color-picker v-model="themeConfig.columnsMenuBar" size="small" @change="onBgColorPickerChange('columnsMenuBar')"> </el-color-picker>
-                            @change="onBgColorPickerChange('columnsMenuBar')">
-                        </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.topBarColor" size="small"
+                        <el-color-picker v-model="themeConfig.topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
-                            @change="onBgColorPickerChange('topBarColor')">
-                        </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.menuBarColor" size="small"
+                        <el-color-picker v-model="themeConfig.menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
-                            @change="onBgColorPickerChange('menuBarColor')">
-                        </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small"
+                        <el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small" @change="onBgColorPickerChange('columnsMenuBarColor')">
-                            @change="onBgColorPickerChange('columnsMenuBarColor')">
                         </el-color-picker>
                     </div>
                 </div>
@@ -162,15 +148,13 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt14">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景渐变</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isColumnsMenuBarColorGradual"
+                        <el-switch v-model="themeConfig.isColumnsMenuBarColorGradual" @change="onColumnsMenuBarGradualChange"></el-switch>
-                            @change="onColumnsMenuBarGradualChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt14">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isMenuBarColorHighlight"
+                        <el-switch v-model="themeConfig.isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
-                            @change="onMenuBarHighlightChange"></el-switch>
                     </div>
                 </div>
 
@@ -194,12 +178,10 @@
                         <el-switch v-model="themeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15"
+                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
-                    :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'"
+                        <el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'" @change="onClassicSplitMenuChange">
-                            @change="onClassicSplitMenuChange">
                         </el-switch>
                     </div>
                 </div>
@@ -212,8 +194,15 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt11">
                     <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-input-number v-model="themeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
+                        <el-input-number
-                            @change="setLocalThemeConfig" size="small" style="width: 90px">
+                            v-model="themeConfig.lockScreenTime"
+                            controls-position="right"
+                            :min="0"
+                            :max="9999"
+                            @change="setLocalThemeConfig"
+                            size="small"
+                            style="width: 90px"
+                        >
                         </el-input-number>
                     </div>
                 </div>
@@ -226,12 +215,14 @@
                         <el-switch v-model="themeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15"
+                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
-                    :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启Breadcrumb</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isBreadcrumb" :disabled="themeConfig.layout === 'transverse'"
+                        <el-switch
-                            @change="onIsBreadcrumbChange"></el-switch>
+                            v-model="themeConfig.isBreadcrumb"
+                            :disabled="themeConfig.layout === 'transverse'"
+                            @change="onIsBreadcrumbChange"
+                        ></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -288,8 +279,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px"
+                        <el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
-                            @change="setLocalThemeConfig">
                             <el-option label="风格1" value="tags-style-one"></el-option>
                             <el-option label="风格2" value="tags-style-two"></el-option>
                             <el-option label="风格3" value="tags-style-three"></el-option>
@@ -299,8 +289,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px"
+                        <el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
-                            @change="setLocalThemeConfig">
                             <el-option label="slide-right" value="slide-right"></el-option>
                             <el-option label="slide-left" value="slide-left"></el-option>
                             <el-option label="opacitys" value="opacitys"></el-option>
@@ -310,8 +299,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small"
+                        <el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
-                            style="width: 90px" @change="setLocalThemeConfig">
                             <el-option label="圆角" value="columns-round"></el-option>
                             <el-option label="卡片" value="columns-card"></el-option>
                         </el-select>
@@ -323,16 +311,14 @@
                 <div class="layout-drawer-content-flex">
                     <!-- defaults 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
-                        <section class="el-container el-circular"
+                        <section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
                             <aside class="el-aside" style="width: 20px"></aside>
                             <section class="el-container is-vertical">
                                 <header class="el-header" style="height: 10px"></header>
                                 <main class="el-main"></main>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">默认</p>
                             </div>
@@ -340,8 +326,7 @@
                     </div>
                     <!-- classic 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('classic')">
-                        <section class="el-container is-vertical el-circular"
+                        <section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
                             <header class="el-header" style="height: 10px"></header>
                             <section class="el-container">
                                 <aside class="el-aside" style="width: 20px"></aside>
@@ -350,8 +335,7 @@
                                 </section>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">经典</p>
                             </div>
@@ -359,8 +343,7 @@
                     </div>
                     <!-- transverse 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
-                        <section class="el-container is-vertical el-circular"
+                        <section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
                             <header class="el-header" style="height: 10px"></header>
                             <section class="el-container">
                                 <section class="el-container is-vertical">
@@ -368,8 +351,7 @@
                                 </section>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">横向</p>
                             </div>
@@ -377,8 +359,7 @@
                     </div>
                     <!-- columns 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('columns')">
-                        <section class="el-container el-circular"
+                        <section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
                             <aside class="el-aside-dark" style="width: 10px"></aside>
                             <aside class="el-aside" style="width: 20px"></aside>
                             <section class="el-container is-vertical">
@@ -386,8 +367,7 @@
                                 <main class="el-main"></main>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">分栏</p>
                             </div>
@@ -395,10 +375,15 @@
                     </div>
                 </div>
                 <div class="copy-config">
-                    <el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false">
+                    <el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false"> </el-alert>
-                    </el-alert>
+                    <el-button
-                    <el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
+                        size="small"
-                        ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
+                        class="copy-config-btn"
+                        icon="el-icon-document-copy"
+                        type="primary"
+                        ref="copyConfigBtnRef"
+                        @click="onCopyConfigClick($event.target)"
+                        >一键复制配置
                     </el-button>
                 </div>
             </el-scrollbar>
@@ -412,8 +397,8 @@ import { ElMessage } from 'element-plus';
 import ClipboardJS from 'clipboard';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
-import { getLightColor } from '@/common/utils/theme.ts';
+import { getLightColor } from '@/common/utils/theme';
-import { setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
+import { setLocal, getLocal, removeLocal } from '@/common/utils/storage';
 import mittBus from '@/common/utils/mitt';
 
 const copyConfigBtnRef = ref();
@@ -428,7 +413,7 @@ const onColorPickerChange = (color: string) => {
 const setPropertyFun = (color: string, targetVal: any) => {
     document.documentElement.style.setProperty(color, targetVal);
     for (let i = 1; i <= 9; i++) {
-        document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10));
+        document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10) as any);
     }
 };
 // 2、菜单 / 顶栏
@@ -449,11 +434,7 @@ const onMenuBarGradualChange = () => {
 };
 // 2、菜单 / 顶栏 --> 分栏菜单背景渐变
 const onColumnsMenuBarGradualChange = () => {
-    setGraduaFun(
+    setGraduaFun('.layout-container .layout-columns-aside', themeConfig.value.isColumnsMenuBarColorGradual, themeConfig.value.columnsMenuBar);
-        '.layout-container .layout-columns-aside',
-        themeConfig.value.isColumnsMenuBarColorGradual,
-        themeConfig.value.columnsMenuBar
-    );
 };
 // 2、菜单 / 顶栏 --> 背景渐变函数
 const setGraduaFun = (el: string, bool: boolean, color: string) => {
@@ -522,17 +503,14 @@ const onSortableTagsViewChange = () => {
     mittBus.emit('openOrCloseSortable');
     setLocalThemeConfig();
 };
-// 4、界面显示 --> 灰色模式/色弱模式
+// 4、界面显示 --> 暗模式/灰色模式/色弱模式
 const onAddFilterChange = (attr: string) => {
     if (attr === 'grayscale') {
         if (themeConfig.value.isGrayscale) themeConfig.value.isInvert = false;
     } else {
         if (themeConfig.value.isInvert) themeConfig.value.isGrayscale = false;
     }
-    const cssAttr =
+    const cssAttr = attr === 'grayscale' ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})` : `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
-        attr === 'grayscale'
-            ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})`
-            : `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
     const appEle: any = document.querySelector('#app');
     appEle.setAttribute('style', `filter: ${cssAttr}`);
     setLocalThemeConfig();
@@ -549,49 +527,37 @@ const onSetLayout = (layout: string) => {
 };
 // 设置布局切换，重置主题样式
 const initSetLayoutChange = () => {
+    // themeConfig.value.menuBar = '#FFFFFF';
+    // themeConfig.value.menuBarColor = '#606266';
+    // themeConfig.value.topBar = '#ffffff';
+    // themeConfig.value.topBarColor = '#606266';
+
     if (themeConfig.value.layout === 'classic') {
         themeConfig.value.isShowLogo = true;
         themeConfig.value.isBreadcrumb = true;
         themeConfig.value.isCollapse = false;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBar = '#FFFFFF';
-        themeConfig.value.menuBarColor = '#606266';
-        themeConfig.value.topBar = '#ffffff';
-        themeConfig.value.topBarColor = '#606266';
-        initLayoutChangeFun();
     } else if (themeConfig.value.layout === 'transverse') {
         themeConfig.value.isShowLogo = true;
         themeConfig.value.isBreadcrumb = false;
         themeConfig.value.isCollapse = false;
-        themeConfig.value.isTagsview = false;
+        themeConfig.value.isTagsview = true;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBarColor = '#FFFFFF';
-        themeConfig.value.topBar = '#545c64';
-        themeConfig.value.topBarColor = '#FFFFFF';
-        initLayoutChangeFun();
     } else if (themeConfig.value.layout === 'columns') {
         themeConfig.value.isShowLogo = true;
         themeConfig.value.isBreadcrumb = true;
         themeConfig.value.isCollapse = false;
         themeConfig.value.isTagsview = true;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBar = '#FFFFFF';
-        themeConfig.value.menuBarColor = '#606266';
-        themeConfig.value.topBar = '#ffffff';
-        themeConfig.value.topBarColor = '#606266';
-        initLayoutChangeFun();
     } else {
         themeConfig.value.isShowLogo = false;
         themeConfig.value.isBreadcrumb = true;
         themeConfig.value.isCollapse = false;
         themeConfig.value.isTagsview = true;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBar = '#545c64';
-        themeConfig.value.menuBarColor = '#eaeaea';
-        themeConfig.value.topBar = '#FFFFFF';
-        themeConfig.value.topBarColor = '#606266';
-        initLayoutChangeFun();
     }
+
+    initLayoutChangeFun();
 };
 // 设置布局切换函数
 const initLayoutChangeFun = () => {
@@ -660,6 +626,7 @@ onMounted(() => {
             onMenuBarHighlightChange();
             themeConfig.value.isCollapse = false;
         });
+
         window.addEventListener('load', () => {
             // 刷新页面时，设置了值，直接取缓存中的值进行初始化
             setTimeout(() => {
@@ -691,7 +658,7 @@ onMounted(() => {
                 }
                 // // 语言国际化
                 // if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
-            }, 1100);
+            }, 100);
         });
     });
 });
@@ -701,7 +668,7 @@ onUnmounted(() => {
     mittBus.off('layoutMobileResize');
 });
 
-defineExpose({openDrawer})
+defineExpose({ openDrawer });
 </script>
 
 <style scoped lang="scss">
@@ -767,7 +734,7 @@ defineExpose({openDrawer})
 
             .drawer-layout-active {
                 border: 1px solid;
-                border-color: var(--color-primary);
+                border-color: var(--el-color-primary);
             }
 
             .layout-tips-warp,
@@ -778,7 +745,7 @@ defineExpose({openDrawer})
                 top: 50%;
                 transform: translate(-50%, -50%);
                 border: 1px solid;
-                border-color: var(--color-primary-light-4);
+                border-color: var(--el-color-primary-light-4);
                 border-radius: 100%;
                 padding: 4px;
 
@@ -788,7 +755,7 @@ defineExpose({openDrawer})
                     height: 30px;
                     z-index: 9;
                     border: 1px solid;
-                    border-color: var(--color-primary-light-4);
+                    border-color: var(--el-color-primary-light-4);
                     border-radius: 100%;
 
                     .layout-tips-txt {
@@ -799,7 +766,7 @@ defineExpose({openDrawer})
                         line-height: 1;
                         letter-spacing: 2px;
                         white-space: nowrap;
-                        color: var(--color-primary-light-4);
+                        color: var(--el-color-primary-light-4);
                         text-align: center;
                         transform: rotate(30deg);
                         left: -1px;
@@ -813,14 +780,14 @@ defineExpose({openDrawer})
 
             .layout-tips-warp-active {
                 border: 1px solid;
-                border-color: var(--color-primary);
+                border-color: var(--el-color-primary);
 
                 .layout-tips-box {
                     border: 1px solid;
-                    border-color: var(--color-primary);
+                    border-color: var(--el-color-primary);
 
                     .layout-tips-txt {
-                        color: var(--color-primary) !important;
+                        color: var(--el-color-primary) !important;
                         background-color: #e9eef3 !important;
                     }
                 }
@@ -830,20 +797,20 @@ defineExpose({openDrawer})
                 .el-circular {
                     transition: all 0.3s ease-in-out;
                     border: 1px solid;
-                    border-color: var(--color-primary);
+                    border-color: var(--el-color-primary);
                 }
 
                 .layout-tips-warp {
                     transition: all 0.3s ease-in-out;
-                    border-color: var(--color-primary);
+                    border-color: var(--el-color-primary);
 
                     .layout-tips-box {
                         transition: inherit;
-                        border-color: var(--color-primary);
+                        border-color: var(--el-color-primary);
 
                         .layout-tips-txt {
                             transition: inherit;
-                            color: var(--color-primary) !important;
+                            color: var(--el-color-primary) !important;
                             background-color: #e9eef3 !important;
                         }
                     }

mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue

@@ -1,6 +1,16 @@
 <template>
     <div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
-        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+        <div class="layout-navbars-breadcrumb-user-icon">
+            <el-switch
+                @change="switchDark(state.isDark)"
+                v-model="state.isDark"
+                active-action-icon="Moon"
+                inactive-action-icon="Sunny"
+                style="--el-switch-off-color: #c4c9c4; --el-switch-on-color: #2c2c2c"
+                class="dark-icon"
+            />
+        </div>
+        <!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
             <div class="layout-navbars-breadcrumb-user-icon">
                 <el-icon title="组件大小">
                     <plus />
@@ -13,7 +23,7 @@
                     <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
                 </el-dropdown-menu>
             </template>
-        </el-dropdown>
+        </el-dropdown> -->
         <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
             <el-icon title="菜单搜索">
                 <search />
@@ -65,7 +75,7 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUser">
-import { ref, computed, reactive, onMounted } from 'vue';
+import { ref, computed, reactive, onMounted, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import screenfull from 'screenfull';
@@ -82,6 +92,7 @@ import openApi from '@/common/openApi';
 const router = useRouter();
 const searchRef = ref();
 const state = reactive({
+    isDark: false,
     isScreenfull: false,
     isShowUserNewsPopover: false,
     disabledI18n: 'zh-cn',
@@ -152,6 +163,19 @@ const onHandleCommandClick = (path: string) => {
     }
 };
 
+const switchDark = (isDark: boolean) => {
+    themeConfig.value.isDark = isDark;
+    setLocal('themeConfig', themeConfig.value);
+    const body = document.documentElement as HTMLElement;
+    if (isDark) {
+        body.setAttribute('class', 'dark');
+        themeConfig.value.editorTheme = 'vs-dark';
+    } else {
+        body.setAttribute('class', '');
+        themeConfig.value.editorTheme = 'SolarizedLight';
+    }
+};
+
 // // 菜单搜索点击
 const onSearchClick = () => {
     searchRef.value.openSearch();
@@ -188,6 +212,10 @@ const initComponentSize = () => {
 // 页面加载时
 onMounted(() => {
     if (getLocal('themeConfig')) {
+        const isDark = themeConfig.value.isDark;
+        state.isDark = isDark;
+        switchDark(isDark);
+
         initComponentSize();
     }
 });

mayfly_go_web/src/views/layout/navBars/breadcrumb/userNews.vue

@@ -39,9 +39,7 @@ export default {
             state.newsList = [];
         };
         // 前往通知中心点击
-        const toMsgCenter = () => {
+        const toMsgCenter = () => {};
-            
-        };
         return {
             onAllReadClick,
             toMsgCenter,
@@ -62,7 +60,7 @@ export default {
         height: 35px;
         align-items: center;
         .head-box-btn {
-            color: var(--color-primary);
+            color: var(--el-color-primary);
             font-size: 13px;
             cursor: pointer;
             opacity: 0.8;
@@ -90,7 +88,7 @@ export default {
     }
     .foot-box {
         height: 35px;
-        color: var(--color-primary);
+        color: var(--el-color-primary);
         font-size: 13px;
         cursor: pointer;
         opacity: 0.8;

mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue

@@ -2,29 +2,43 @@
     <div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': themeConfig.layout === 'classic' }">
         <el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
             <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
-                <li v-for="(v, k) in state.tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
+                <li
-                    :class="{ 'is-active': isActive(v) }" @contextmenu.prevent="onContextmenu(v, $event)"
+                    v-for="(v, k) in state.tagsViewList"
-                    @click="onTagsClick(v, k)" :ref="
+                    :key="k"
+                    class="layout-navbars-tagsview-ul-li"
+                    :data-name="v.name"
+                    :class="{ 'is-active': isActive(v) }"
+                    @contextmenu.prevent="onContextmenu(v, $event)"
+                    @click="onTagsClick(v, k)"
+                    :ref="
                         (el) => {
                             if (el) tagsRefs[k] = el;
                         }
-                    ">
+                    "
-                    <SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14"
+                >
-                        v-if="isActive(v)" />
+                    <SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)" />
-                    <SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont"
+                    <SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
-                        v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
                     <span>{{ v.meta.title }}</span>
                     <template v-if="isActive(v)">
-                        <SvgIcon name="RefreshRight" class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
+                        <SvgIcon
-                            @click.stop="refreshCurrentTagsView($route.fullPath)" />
+                            name="RefreshRight"
-                        <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
+                            class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
+                            @click.stop="refreshCurrentTagsView($route.fullPath)"
+                        />
+                        <SvgIcon
+                            name="Close"
+                            class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
                             v-if="!v.meta.isAffix"
-                            @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
+                            @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
+                        />
                     </template>
 
-                    <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
+                    <SvgIcon
+                        name="Close"
+                        class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
                         v-if="!v.meta.isAffix"
-                        @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
+                        @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
+                    />
                 </li>
             </ul>
         </el-scrollbar>
@@ -106,8 +120,8 @@ const addTagsView = (path: string, to: any = null) => {
             return false;
         }
     }
-    
+
-    const tagView = { ...to }
+    const tagView = { ...to };
     // 防止Converting circular structure to JSON错误
     tagView.matched = null;
     tagView.redirectedFrom = null;
@@ -135,7 +149,7 @@ const closeCurrentTagsView = (path: string) => {
                     let next;
                     // 最后一个且高亮时
                     if (state.tagsViewList.length === k) {
-                        next = k !== arr.length ? arr[k] : arr[arr.length - 1]
+                        next = k !== arr.length ? arr[k] : arr[arr.length - 1];
                     } else {
                         next = arr[k];
                     }
@@ -366,8 +380,8 @@ onBeforeRouteUpdate((to) => {
 
 <style scoped lang="scss">
 .layout-navbars-tagsview {
-    background-color: var(--el-color-white);
+    background-color: var(--bg-main-color);
-    border-bottom: 1px solid var(--next-border-color-light);
+    border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
     position: relative;
     z-index: 4;
 

mayfly_go_web/src/views/login/index.vue

@@ -107,7 +107,7 @@ const oauth2Login = () => {
         display: flex;
         align-items: center;
         font-size: 20px;
-        color: var(--color-primary);
+        color: var(--el-color-primary);
         letter-spacing: 2px;
         width: 90%;
         transform: translateX(-50%);
@@ -121,7 +121,7 @@ const oauth2Login = () => {
         left: 50%;
         transform: translate(-50%, -50%) translate3d(0, 0, 0);
         background-color: rgba(255, 255, 255, 0.99);
-        box-shadow: 0 2px 12px 0 var(--color-primary-light-5);
+        box-shadow: 0 2px 12px 0 var(--el-color-primary-light-5);
         border-radius: 4px;
         transition: height 0.2s linear;
         height: 490px;

mayfly_go_web/src/views/ops/component/TagTree.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="instances-box">
+    <div class="tag-tree">
         <el-row type="flex" justify="space-between">
             <el-col :span="24" class="el-scrollbar flex-auto" style="overflow: auto">
                 <el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
@@ -92,7 +92,7 @@ onMounted(async () => {
 });
 
 const setHeight = () => {
-    state.height = window.innerHeight - 147 + 'px';
+    state.height = window.innerHeight - 157 + 'px';
 };
 
 watch(filterText, (val) => {
@@ -168,11 +168,13 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.instances-box {
+.tag-tree {
     overflow: 'auto';
     position: relative;
 
+    border: 1px solid var(--el-border-color-light, #ebeef5);
+
     .el-tree {
         display: inline-block;
         min-width: 100%;

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

@@ -1,102 +1,66 @@
 <template>
     <div>
-        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="38%">
+        <el-dialog
+            :title="title"
+            v-model="dialogVisible"
+            @open="open"
+            :before-close="cancel"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+            width="38%"
+        >
             <el-form :model="form" ref="dbForm" :rules="rules" label-width="auto">
-                <el-tabs v-model="tabActiveName">
+                <el-form-item prop="tagId" label="标签:" required>
-                    <el-tab-pane label="基础信息" name="basic">
+                    <tag-select v-model="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
-                        <el-form-item prop="tagId" label="标签:" required>
+                </el-form-item>
-                            <tag-select v-model="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
-                        </el-form-item>
 
-                        <el-form-item prop="name" label="别名:" required>
+                <el-form-item prop="instanceId" label="数据库实例:" required>
-                            <el-input v-model.trim="form.name" placeholder="请输入数据库别名" auto-complete="off"></el-input>
+                    <el-select
-                        </el-form-item>
+                        :disabled="form.id !== undefined"
-                        <el-form-item prop="type" label="类型:" required>
+                        remote
-                            <el-select style="width: 100%" v-model="form.type" placeholder="请选择数据库类型">
+                        :remote-method="getInstances"
-                                <el-option key="item.id" label="mysql" value="mysql"> </el-option>
+                        @change="getAllDatabase"
-                                <el-option key="item.id" label="postgres" value="postgres"> </el-option>
+                        v-model="form.instanceId"
-                            </el-select>
+                        placeholder="请输入实例名称搜索并选择实例"
-                        </el-form-item>
+                        filterable
-                        <el-form-item prop="host" label="host:" required>
+                        clearable
-                            <el-col :span="18">
+                        class="w100"
-                                <el-input :disabled="form.id !== undefined" v-model.trim="form.host" placeholder="请输入主机ip" auto-complete="off"></el-input>
+                    >
-                            </el-col>
+                        <el-option v-for="item in state.instances" :key="item.id" :label="`${item.name}`" :value="item.id">
-                            <el-col style="text-align: center" :span="1">:</el-col>
+                            {{ item.name }}
-                            <el-col :span="5">
+                            <el-divider direction="vertical" border-style="dashed" />
-                                <el-input type="number" v-model.number="form.port" placeholder="请输入端口"></el-input>
-                            </el-col>
-                        </el-form-item>
-                        <el-form-item prop="username" label="用户名:" required>
-                            <el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
-                        </el-form-item>
-                        <el-form-item prop="password" label="密码:">
-                            <el-input
-                                type="password"
-                                show-password
-                                v-model.trim="form.password"
-                                placeholder="请输入密码，修改操作可不填"
-                                autocomplete="new-password"
-                            >
-                                <template v-if="form.id && form.id != 0" #suffix>
-                                    <el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click" :content="pwd">
-                                        <template #reference>
-                                            <el-link @click="getDbPwd" :underline="false" type="primary" class="mr5">原密码 </el-link>
-                                        </template>
-                                    </el-popover>
-                                </template>
-                            </el-input>
-                        </el-form-item>
-                        <el-form-item prop="database" label="数据库名:" required>
-                            <el-col :span="19">
-                                <el-select
-                                    @change="changeDatabase"
-                                    v-model="databaseList"
-                                    multiple
-                                    clearable
-                                    collapse-tags
-                                    collapse-tags-tooltip
-                                    filterable
-                                    allow-create
-                                    placeholder="请确保数据库实例信息填写完整后获取库名"
-                                    style="width: 100%"
-                                >
-                                    <el-option v-for="db in allDatabases" :key="db" :label="db" :value="db" />
-                                </el-select>
-                            </el-col>
-                            <el-col style="text-align: center" :span="1">
-                                <el-divider direction="vertical" border-style="dashed" />
-                            </el-col>
-                            <el-col :span="4">
-                                <el-link @click="getAllDatabase" :underline="false" type="success">获取库名</el-link>
-                            </el-col>
-                        </el-form-item>
 
-                        <el-form-item prop="remark" label="备注:">
+                            {{ item.type }} / {{ item.host }}:{{ item.port }}
-                            <el-input v-model.trim="form.remark" auto-complete="off" type="textarea"></el-input>
+                            <el-divider direction="vertical" border-style="dashed" />
-                        </el-form-item>
+                            {{ item.username }}
-                    </el-tab-pane>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
 
-                    <el-tab-pane label="其他配置" name="other">
+                <el-form-item prop="name" label="别名:" required>
-                        <el-form-item prop="params" label="连接参数:">
+                    <el-input v-model.trim="form.name" placeholder="请输入数据库别名" auto-complete="off"></el-input>
-                            <el-input v-model.trim="form.params" placeholder="其他连接参数，形如: key1=value1&key2=value2">
+                </el-form-item>
-                                <template #suffix>
-                                    <el-link
-                                        target="_blank"
-                                        href="https://github.com/go-sql-driver/mysql#parameters"
-                                        :underline="false"
-                                        type="primary"
-                                        class="mr5"
-                                        >参数参考</el-link
-                                    >
-                                </template>
-                            </el-input>
-                        </el-form-item>
 
-                        <el-form-item prop="sshTunnelMachineId" label="SSH隧道:">
+                <el-form-item prop="database" label="数据库名:" required>
-                            <ssh-tunnel-select v-model="form.sshTunnelMachineId" />
+                    <el-select
-                        </el-form-item>
+                        @change="changeDatabase"
-                    </el-tab-pane>
+                        v-model="databaseList"
-                </el-tabs>
+                        multiple
+                        clearable
+                        collapse-tags
+                        collapse-tags-tooltip
+                        filterable
+                        allow-create
+                        placeholder="请确保数据库实例信息填写完整后获取库名"
+                        style="width: 100%"
+                    >
+                        <el-option v-for="db in allDatabases" :key="db" :label="db" :value="db" />
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item prop="remark" label="备注:">
+                    <el-input v-model.trim="form.remark" auto-complete="off" type="textarea"></el-input>
+                </el-form-item>
             </el-form>
 
             <template #footer>
@@ -113,10 +77,7 @@
 import { toRefs, reactive, watch, ref } from 'vue';
 import { dbApi } from './api';
 import { ElMessage } from 'element-plus';
-import { notBlank } from '@/common/assert';
-import { RsaEncrypt } from '@/common/rsa';
 import TagSelect from '../component/TagSelect.vue';
-import SshTunnelSelect from '../component/SshTunnelSelect.vue';
 
 const props = defineProps({
     visible: {
@@ -141,6 +102,15 @@ const rules = {
             trigger: ['change', 'blur'],
         },
     ],
+
+    instanceId: [
+        {
+            required: true,
+            message: '请选择数据库实例',
+            trigger: ['change', 'blur'],
+        },
+    ],
+
     name: [
         {
             required: true,
@@ -148,27 +118,6 @@ const rules = {
             trigger: ['change', 'blur'],
         },
     ],
-    type: [
-        {
-            required: true,
-            message: '请选择数据库类型',
-            trigger: ['change', 'blur'],
-        },
-    ],
-    host: [
-        {
-            required: true,
-            message: '请输入主机ip和port',
-            trigger: ['change', 'blur'],
-        },
-    ],
-    username: [
-        {
-            required: true,
-            message: '请输入用户名',
-            trigger: ['change', 'blur'],
-        },
-    ],
     database: [
         {
             required: true,
@@ -182,43 +131,34 @@ const dbForm: any = ref(null);
 
 const state = reactive({
     dialogVisible: false,
-    tabActiveName: 'basic',
     allDatabases: [] as any,
     databaseList: [] as any,
     form: {
         id: null,
         tagId: null as any,
         tagPath: null as any,
-        type: null,
         name: null,
-        host: '',
-        port: 3306,
-        username: null,
-        password: null,
-        params: null,
         database: '',
         remark: '',
-        sshTunnelMachineId: null as any,
+        instanceId: null as any,
     },
-    // 原密码
-    pwd: '',
     btnLoading: false,
+    instances: [] as any,
 });
 
-const { dialogVisible, tabActiveName, allDatabases, databaseList, form, pwd, btnLoading } = toRefs(state);
+const { dialogVisible, allDatabases, databaseList, form, btnLoading } = toRefs(state);
 
 watch(props, (newValue: any) => {
     state.dialogVisible = newValue.visible;
     if (!state.dialogVisible) {
         return;
     }
-    state.tabActiveName = 'basic';
     if (newValue.db) {
         state.form = { ...newValue.db };
         // 将数据库名使用空格切割，获取所有数据库列表
         state.databaseList = newValue.db.database.split(' ');
     } else {
-        state.form = { port: 3306 } as any;
+        state.form = {} as any;
         state.databaseList = [];
     }
 });
@@ -231,27 +171,34 @@ const changeDatabase = () => {
 };
 
 const getAllDatabase = async () => {
-    const reqForm = { ...state.form };
+    if (state.form.instanceId > 0) {
-    reqForm.password = await RsaEncrypt(reqForm.password);
+        state.allDatabases = await dbApi.getAllDatabase.request({ instanceId: state.form.instanceId });
-    state.allDatabases = await dbApi.getAllDatabase.request(reqForm);
+    }
-    ElMessage.success('获取成功, 请选择需要管理操作的数据库');
 };
 
-const getDbPwd = async () => {
+const getInstances = async (instanceName: string = '', id = 0) => {
-    state.pwd = await dbApi.getDbPwd.request({ id: state.form.id });
+    if (!id && !instanceName) {
+        state.instances = [];
+        return;
+    }
+    const data = await dbApi.instances.request({ id, name: instanceName });
+    if (data) {
+        state.instances = data.list;
+    }
+};
+
+const open = async () => {
+    if (state.form.instanceId) {
+        // 根据id获取，因为需要回显实例名称
+        getInstances('', state.form.instanceId);
+    }
+    await getAllDatabase();
 };
 
 const btnOk = async () => {
-    if (!state.form.id) {
-        notBlank(state.form.password, '新增操作，密码不可为空');
-    }
     dbForm.value.validate(async (valid: boolean) => {
         if (valid) {
             const reqForm = { ...state.form };
-            reqForm.password = await RsaEncrypt(reqForm.password);
-            if (!state.form.sshTunnelMachineId) {
-                reqForm.sshTunnelMachineId = -1;
-            }
             dbApi.saveDb.request(reqForm).then(() => {
                 ElMessage.success('保存成功');
                 emit('val-change', state.form);
@@ -272,6 +219,7 @@ const btnOk = async () => {
 const resetInputDb = () => {
     state.databaseList = [];
     state.allDatabases = [];
+    state.instances = [];
 };
 
 const cancel = () => {

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

@@ -14,11 +14,32 @@
             @pageChange="search()"
         >
             <template #tagPathSelect>
-                <el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" @clear="search" filterable clearable style="width: 200px">
+                <el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" filterable clearable style="width: 200px">
                     <el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
                 </el-select>
             </template>
 
+            <template #instanceSelect>
+                <el-select
+                    remote
+                    :remote-method="getInstances"
+                    v-model="query.instanceId"
+                    placeholder="输入并选择实例"
+                    filterable
+                    clearable
+                    style="width: 200px"
+                >
+                    <el-option v-for="item in state.instances" :key="item.id" :label="`${item.name}`" :value="item.id">
+                        {{ item.name }}
+                        <el-divider direction="vertical" border-style="dashed" />
+
+                        {{ item.type }} / {{ item.host }}:{{ item.port }}
+                        <el-divider direction="vertical" border-style="dashed" />
+                        {{ item.username }}
+                    </el-option>
+                </el-select>
+            </template>
+
             <template #queryRight>
                 <el-button v-auth="perms.saveDb" type="primary" icon="plus" @click="editDb(false)">添加</el-button>
                 <el-button v-auth="perms.delDb" :disabled="selectionData.length < 1" @click="deleteDb()" type="danger" icon="delete">删除</el-button>
@@ -59,104 +80,57 @@
 
             <template #more="{ data }">
                 <el-button @click="showInfo(data)" link>详情</el-button>
-
                 <el-button class="ml5" type="primary" @click="onShowSqlExec(data)" link>SQL执行记录</el-button>
             </template>
 
             <template #action="{ data }">
                 <el-button v-if="actionBtns[perms.saveDb]" @click="editDb(data)" type="primary" link>编辑</el-button>
+                <el-button v-if="data.type == 'mysql'" class="ml5" type="primary" @click="onDumpDbs(data)" link>导出</el-button>
             </template>
         </page-table>
 
         <el-dialog width="80%" :title="`${db} 表信息`" :before-close="closeTableInfo" v-model="tableInfoDialog.visible">
-            <el-row class="mb10">
+            <db-table-list :db-id="dbId" :db="db" :db-type="state.row.type" />
-                <el-popover v-model:visible="showDumpInfo" :width="470" placement="right" trigger="click">
+        </el-dialog>
-                    <template #reference>
+
-                        <el-button class="ml5" type="success" size="small">导出</el-button>
+        <el-dialog width="620" :title="`${db} 数据库导出`" v-model="exportDialog.visible">
-                    </template>
+            <el-row justify="space-between">
+                <el-col :span="9">
                     <el-form-item label="导出内容: ">
-                        <el-radio-group v-model="dumpInfo.type">
+                        <el-checkbox-group v-model="exportDialog.contents" :min="1">
-                            <el-radio :label="1" size="small">结构</el-radio>
+                            <el-checkbox label="结构" />
-                            <el-radio :label="2" size="small">数据</el-radio>
+                            <el-checkbox label="数据" />
-                            <el-radio :label="3" size="small">结构＋数据</el-radio>
+                        </el-checkbox-group>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="9">
+                    <el-form-item label="扩展名: ">
+                        <el-radio-group v-model="exportDialog.extName">
+                            <el-radio label="sql" />
+                            <el-radio label="gzip" />
                         </el-radio-group>
                     </el-form-item>
-
+                </el-col>
-                    <el-form-item label="导出表: ">
-                        <el-table @selection-change="handleDumpTableSelectionChange" max-height="300" size="small" :data="tableInfoDialog.infos">
-                            <el-table-column type="selection" width="45" />
-                            <el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip> </el-table-column>
-                            <el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip> </el-table-column>
-                        </el-table>
-                    </el-form-item>
-
-                    <div style="text-align: right">
-                        <el-button @click="showDumpInfo = false" size="small">取消</el-button>
-                        <el-button @click="dump(db)" type="success" size="small">确定</el-button>
-                    </div>
-                </el-popover>
-
-                <el-button type="primary" size="small" @click="openEditTable(false)">创建表</el-button>
             </el-row>
-            <el-table v-loading="tableInfoDialog.loading" border stripe :data="filterTableInfos" size="small" max-height="680">
+
-                <el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip>
+            <el-form-item>
-                    <template #header>
+                <el-transfer
-                        <el-input v-model="tableInfoDialog.tableNameSearch" size="small" placeholder="表名: 输入可过滤" clearable />
+                    v-model="exportDialog.value"
-                    </template>
+                    filterable
-                </el-table-column>
+                    filter-placeholder="按数据库名称筛选"
-                <el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip>
+                    :titles="['全部数据库', '导出数据库']"
-                    <template #header>
+                    :data="exportDialog.data"
-                        <el-input v-model="tableInfoDialog.tableCommentSearch" size="small" placeholder="备注: 输入可过滤" clearable />
+                    max-height="300"
-                    </template>
+                    size="small"
-                </el-table-column>
+                />
-                <el-table-column
+            </el-form-item>
-                    prop="tableRows"
+
-                    label="Rows"
+            <template #footer>
-                    min-width="70"
+                <div class="dialog-footer">
-                    sortable
+                    <el-button @click="exportDialog.visible = false">取消</el-button>
-                    :sort-method="(a: any, b: any) => parseInt(a.tableRows) - parseInt(b.tableRows)"
+                    <el-button @click="dumpDbs()" type="primary">确定</el-button>
-                ></el-table-column>
+                </div>
-                <el-table-column
+            </template>
-                    property="dataLength"
-                    label="数据大小"
-                    sortable
-                    :sort-method="(a: any, b: any) => parseInt(a.dataLength) - parseInt(b.dataLength)"
-                >
-                    <template #default="scope">
-                        {{ formatByteSize(scope.row.dataLength) }}
-                    </template>
-                </el-table-column>
-                <el-table-column
-                    property="indexLength"
-                    label="索引大小"
-                    sortable
-                    :sort-method="(a: any, b: any) => parseInt(a.indexLength) - parseInt(b.indexLength)"
-                >
-                    <template #default="scope">
-                        {{ formatByteSize(scope.row.indexLength) }}
-                    </template>
-                </el-table-column>
-                <el-table-column property="createTime" label="创建时间" min-width="150"> </el-table-column>
-                <el-table-column label="更多信息" min-width="140">
-                    <template #default="scope">
-                        <el-link @click.prevent="showColumns(scope.row)" type="primary">字段</el-link>
-                        <el-link class="ml5" @click.prevent="showTableIndex(scope.row)" type="success">索引</el-link>
-                        <el-link
-                            class="ml5"
-                            v-if="tableCreateDialog.enableEditTypes.indexOf(tableCreateDialog.type) > -1"
-                            @click.prevent="openEditTable(scope.row)"
-                            type="warning"
-                            >编辑表</el-link
-                        >
-                        <el-link class="ml5" @click.prevent="showCreateDdl(scope.row)" type="info">DDL</el-link>
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" min-width="80">
-                    <template #default="scope">
-                        <el-link @click.prevent="dropTable(scope.row)" type="danger">删除</el-link>
-                    </template>
-                </el-table-column>
-            </el-table>
         </el-dialog>
 
         <el-dialog
@@ -166,114 +140,37 @@
             :close-on-click-modal="false"
             v-model="sqlExecLogDialog.visible"
         >
-            <page-table
+            <db-sql-exec-log :db-id="sqlExecLogDialog.dbId" :dbs="sqlExecLogDialog.dbs" />
-                height="100%"
-                ref="sqlExecDialogPageTableRef"
-                :query="sqlExecLogDialog.queryConfig"
-                v-model:query-form="sqlExecLogDialog.query"
-                :data="sqlExecLogDialog.data"
-                :columns="sqlExecLogDialog.columns"
-                :total="sqlExecLogDialog.total"
-                v-model:page-size="sqlExecLogDialog.query.pageSize"
-                v-model:page-num="sqlExecLogDialog.query.pageNum"
-                @pageChange="searchSqlExecLog()"
-            >
-                <template #dbSelect>
-                    <el-select v-model="sqlExecLogDialog.query.db" placeholder="请选择数据库" style="width: 200px" filterable clearable>
-                        <el-option v-for="item in sqlExecLogDialog.dbs" :key="item" :label="`${item}`" :value="item"> </el-option>
-                    </el-select>
-                </template>
-
-                <template #action="{ data }">
-                    <el-link
-                        v-if="data.type == DbSqlExecTypeEnum.Update.value || data.type == DbSqlExecTypeEnum.Delete.value"
-                        type="primary"
-                        plain
-                        size="small"
-                        :underline="false"
-                        @click="onShowRollbackSql(data)"
-                    >
-                        还原SQL</el-link
-                    >
-                </template>
-            </page-table>
         </el-dialog>
 
-        <el-dialog width="55%" :title="`还原SQL`" v-model="rollbackSqlDialog.visible">
+        <el-dialog v-model="infoDialog.visible" :before-close="onBeforeCloseInfoDialog" :close-on-click-modal="false">
-            <el-input type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="rollbackSqlDialog.sql" size="small"> </el-input>
-        </el-dialog>
-
-        <el-dialog width="40%" :title="`${chooseTableName} 字段信息`" v-model="columnDialog.visible">
-            <el-table border stripe :data="columnDialog.columns" size="small">
-                <el-table-column prop="columnName" label="名称" show-overflow-tooltip> </el-table-column>
-                <el-table-column width="120" prop="columnType" label="类型" show-overflow-tooltip> </el-table-column>
-                <el-table-column width="80" prop="nullable" label="是否可为空" show-overflow-tooltip> </el-table-column>
-                <el-table-column prop="columnComment" label="备注" show-overflow-tooltip> </el-table-column>
-            </el-table>
-        </el-dialog>
-
-        <el-dialog width="40%" :title="`${chooseTableName} 索引信息`" v-model="indexDialog.visible">
-            <el-table border stripe :data="indexDialog.indexs" size="small">
-                <el-table-column prop="indexName" label="索引名" min-width="120" show-overflow-tooltip> </el-table-column>
-                <el-table-column prop="columnName" label="列名" min-width="120" show-overflow-tooltip> </el-table-column>
-                <el-table-column prop="seqInIndex" label="列序列号" show-overflow-tooltip> </el-table-column>
-                <el-table-column prop="indexType" label="类型"> </el-table-column>
-                <el-table-column prop="indexComment" label="备注" min-width="130" show-overflow-tooltip> </el-table-column>
-            </el-table>
-        </el-dialog>
-
-        <el-dialog width="55%" :title="`${chooseTableName} Create-DDL`" v-model="ddlDialog.visible">
-            <el-input disabled type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="ddlDialog.ddl" size="small"> </el-input>
-        </el-dialog>
-
-        <el-dialog v-model="infoDialog.visible">
             <el-descriptions title="详情" :column="3" border>
-                <el-descriptions-item :span="1.5" label="id">{{ infoDialog.data.id }}</el-descriptions-item>
+                <el-descriptions-item :span="3" label="标签路径">{{ infoDialog.data?.tagPath }}</el-descriptions-item>
-                <el-descriptions-item :span="1.5" label="名称">{{ infoDialog.data.name }}</el-descriptions-item>
+                <el-descriptions-item :span="2" label="名称">{{ infoDialog.data?.name }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="id">{{ infoDialog.data?.id }}</el-descriptions-item>
+                <el-descriptions-item :span="3" label="数据库">{{ infoDialog.data?.database }}</el-descriptions-item>
+                <el-descriptions-item :span="3" label="备注">{{ infoDialog.data?.remark }}</el-descriptions-item>
+                <el-descriptions-item :span="2" label="创建时间">{{ dateFormat(infoDialog.data?.createTime) }} </el-descriptions-item>
+                <el-descriptions-item :span="1" label="创建者">{{ infoDialog.data?.creator }}</el-descriptions-item>
+                <el-descriptions-item :span="2" label="更新时间">{{ dateFormat(infoDialog.data?.updateTime) }} </el-descriptions-item>
+                <el-descriptions-item :span="1" label="修改者">{{ infoDialog.data?.modifier }}</el-descriptions-item>
 
-                <el-descriptions-item :span="3" label="标签路径">{{ infoDialog.data.tagPath }}</el-descriptions-item>
+                <el-descriptions-item :span="3" label="数据库实例名称">{{ infoDialog.instance?.name }}</el-descriptions-item>
-
+                <el-descriptions-item :span="2" label="主机">{{ infoDialog.instance?.host }}</el-descriptions-item>
-                <el-descriptions-item :span="2" label="主机">{{ infoDialog.data.host }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="端口">{{ infoDialog.instance?.port }}</el-descriptions-item>
-                <el-descriptions-item :span="1" label="端口">{{ infoDialog.data.port }}</el-descriptions-item>
+                <el-descriptions-item :span="2" label="用户名">{{ infoDialog.instance?.username }}</el-descriptions-item>
-
+                <el-descriptions-item :span="1" label="类型">{{ infoDialog.instance?.type }}</el-descriptions-item>
-                <el-descriptions-item :span="2" label="用户名">{{ infoDialog.data.username }}</el-descriptions-item>
-                <el-descriptions-item :span="1" label="类型">{{ infoDialog.data.type }}</el-descriptions-item>
-
-                <el-descriptions-item :span="3" label="连接参数">{{ infoDialog.data.params }}</el-descriptions-item>
-                <el-descriptions-item :span="3" label="备注">{{ infoDialog.data.remark }}</el-descriptions-item>
-                <el-descriptions-item :span="3" label="数据库">{{ infoDialog.data.database }}</el-descriptions-item>
-
-                <el-descriptions-item :span="3" label="SSH隧道">{{ infoDialog.data.sshTunnelMachineId > 0 ? '是' : '否' }} </el-descriptions-item>
-
-                <el-descriptions-item :span="2" label="创建时间">{{ dateFormat(infoDialog.data.createTime) }} </el-descriptions-item>
-                <el-descriptions-item :span="1" label="创建者">{{ infoDialog.data.creator }}</el-descriptions-item>
-
-                <el-descriptions-item :span="2" label="更新时间">{{ dateFormat(infoDialog.data.updateTime) }} </el-descriptions-item>
-                <el-descriptions-item :span="1" label="修改者">{{ infoDialog.data.modifier }}</el-descriptions-item>
             </el-descriptions>
         </el-dialog>
 
         <db-edit @val-change="valChange" :title="dbEditDialog.title" v-model:visible="dbEditDialog.visible" v-model:db="dbEditDialog.data"></db-edit>
-        <create-table
-            :title="tableCreateDialog.title"
-            :active-name="tableCreateDialog.activeName"
-            :dbId="dbId"
-            :db="db"
-            :data="tableCreateDialog.data"
-            v-model:visible="tableCreateDialog.visible"
-            @submit-sql="onSubmitSql"
-        >
-        </create-table>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, toRefs, reactive, computed, onMounted, defineAsyncComponent } from 'vue';
+import { ref, toRefs, reactive, onMounted, defineAsyncComponent } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { formatByteSize } from '@/common/utils/format';
 import { dbApi } from './api';
-import { DbSqlExecTypeEnum } from './enums';
-import SqlExecBox from './component/SqlExecBox';
 import config from '@/common/config';
 import { getSession } from '@/common/utils/storage';
 import { isTrue } from '@/common/assert';
@@ -283,39 +180,39 @@ import TagInfo from '../component/TagInfo.vue';
 import PageTable from '@/components/pagetable/PageTable.vue';
 import { TableColumn, TableQuery } from '@/components/pagetable';
 import { hasPerms } from '@/components/auth/auth';
+import DbSqlExecLog from './DbSqlExecLog.vue';
 
 const DbEdit = defineAsyncComponent(() => import('./DbEdit.vue'));
-const CreateTable = defineAsyncComponent(() => import('./CreateTable.vue'));
+const DbTableList = defineAsyncComponent(() => import('./table/DbTableList.vue'));
 
 const perms = {
+    base: 'db',
     saveDb: 'db:save',
     delDb: 'db:del',
 };
 
-const queryConfig = [TableQuery.slot('tagPath', '标签', 'tagPathSelect')];
+const queryConfig = [TableQuery.slot('tagPath', '标签', 'tagPathSelect'), TableQuery.slot('instanceId', '实例', 'instanceSelect')];
 
 const columns = ref([
     TableColumn.new('tagPath', '标签路径').isSlot().setAddWidth(20),
     TableColumn.new('name', '名称'),
-    TableColumn.new('host', 'host:port').setFormatFunc((data: any, _prop: string) => `${data.host}:${data.port}`),
-    TableColumn.new('type', '类型'),
     TableColumn.new('database', '数据库').isSlot().setMinWidth(70),
-    TableColumn.new('username', '用户名'),
     TableColumn.new('remark', '备注'),
-    TableColumn.new('more', '更多').isSlot().setMinWidth(165).fixedRight(),
+    TableColumn.new('more', '更多').isSlot().setMinWidth(180).fixedRight(),
 ]);
 
 // 该用户拥有的的操作列按钮权限
-const actionBtns = hasPerms([perms.saveDb]);
+const actionBtns = hasPerms([perms.base, perms.saveDb]);
-const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(65).fixedRight().alignCenter();
+const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(150).fixedRight().alignCenter();
 
 const pageTableRef: any = ref(null);
 
 const state = reactive({
-    row: {},
+    row: {} as any,
     dbId: 0,
     db: '',
     tags: [],
+    instances: [] as any,
     /**
      * 选中的数据
      */
@@ -325,6 +222,7 @@ const state = reactive({
      */
     query: {
         tagPath: null,
+        instanceId: null,
         pageNum: 1,
         pageSize: 10,
     },
@@ -333,6 +231,10 @@ const state = reactive({
     infoDialog: {
         visible: false,
         data: null as any,
+        instance: null as any,
+        query: {
+            instanceId: 0,
+        },
     },
     showDumpInfo: false,
     dumpInfo: {
@@ -343,79 +245,29 @@ const state = reactive({
     },
     // sql执行记录弹框
     sqlExecLogDialog: {
-        queryConfig: [
-            TableQuery.slot('db', '数据库', 'dbSelect'),
-            TableQuery.text('table', '表名'),
-            TableQuery.select('type', '操作类型').setOptions(Object.values(DbSqlExecTypeEnum)),
-        ],
-        columns: [
-            TableColumn.new('db', '数据库'),
-            TableColumn.new('table', '表'),
-            TableColumn.new('type', '类型').typeTag(DbSqlExecTypeEnum).setAddWidth(10),
-            TableColumn.new('creator', '执行人'),
-            TableColumn.new('sql', 'SQL').canBeautify(),
-            TableColumn.new('oldValue', '原值').canBeautify(),
-            TableColumn.new('createTime', '执行时间').isTime(),
-            TableColumn.new('remark', '备注'),
-            TableColumn.new('action', '操作').isSlot().setMinWidth(100).fixedRight().alignCenter(),
-        ],
         title: '',
         visible: false,
-        data: [],
-        total: 0,
         dbs: [],
-        query: {
+        dbId: 0,
-            dbId: 0,
-            db: '',
-            table: '',
-            type: null,
-            pageNum: 1,
-            pageSize: 10,
-        },
-    },
-    rollbackSqlDialog: {
-        visible: false,
-        sql: '',
     },
     chooseTableName: '',
     tableInfoDialog: {
-        loading: false,
         visible: false,
-        infos: [],
-        tableNameSearch: '',
-        tableCommentSearch: '',
     },
-    columnDialog: {
+    exportDialog: {
         visible: false,
-        columns: [],
+        dbId: 0,
-    },
+        type: 3,
-    indexDialog: {
+        data: [] as any,
-        visible: false,
+        value: [],
-        indexs: [],
+        contents: [] as any,
-    },
+        extName: '',
-    ddlDialog: {
-        visible: false,
-        ddl: '',
     },
     dbEditDialog: {
         visible: false,
         data: null as any,
         title: '新增数据库',
     },
-    tableCreateDialog: {
-        title: '创建表',
-        visible: false,
-        activeName: '1',
-        type: '',
-        enableEditTypes: ['mysql'], // 支持"编辑表"的数据库类型
-        data: {
-            // 修改表时，传递修改数据
-            edit: false,
-            row: {},
-            indexs: [],
-            columns: [],
-        },
-    },
     filterDb: {
         param: '',
         cache: [],
@@ -423,28 +275,8 @@ const state = reactive({
     },
 });
 
-const {
+const { dbId, db, tags, selectionData, query, datas, total, infoDialog, sqlExecLogDialog, tableInfoDialog, exportDialog, dbEditDialog, filterDb } =
-    dbId,
+    toRefs(state);
-    db,
-    tags,
-    selectionData,
-    query,
-    datas,
-    total,
-    infoDialog,
-    showDumpInfo,
-    dumpInfo,
-    sqlExecLogDialog,
-    rollbackSqlDialog,
-    chooseTableName,
-    tableInfoDialog,
-    columnDialog,
-    indexDialog,
-    ddlDialog,
-    dbEditDialog,
-    tableCreateDialog,
-    filterDb,
-} = toRefs(state);
 
 onMounted(async () => {
     if (Object.keys(actionBtns).length > 0) {
@@ -453,26 +285,6 @@ onMounted(async () => {
     search();
 });
 
-const filterTableInfos = computed(() => {
-    const infos = state.tableInfoDialog.infos;
-    const tableNameSearch = state.tableInfoDialog.tableNameSearch;
-    const tableCommentSearch = state.tableInfoDialog.tableCommentSearch;
-    if (!tableNameSearch && !tableCommentSearch) {
-        return infos;
-    }
-    return infos.filter((data: any) => {
-        let tnMatch = true;
-        let tcMatch = true;
-        if (tableNameSearch) {
-            tnMatch = data.tableName.toLowerCase().includes(tableNameSearch.toLowerCase());
-        }
-        if (tableCommentSearch) {
-            tcMatch = data.tableComment.includes(tableCommentSearch);
-        }
-        return tnMatch && tcMatch;
-    });
-});
-
 const search = async () => {
     try {
         pageTableRef.value.loading(true);
@@ -489,15 +301,35 @@ const search = async () => {
     }
 };
 
-const showInfo = (info: any) => {
+const showInfo = async (info: any) => {
     state.infoDialog.data = info;
+    state.infoDialog.query.instanceId = info.instanceId;
+    const res = await dbApi.getInstance.request(state.infoDialog.query);
+    state.infoDialog.instance = res;
     state.infoDialog.visible = true;
 };
 
+const onBeforeCloseInfoDialog = () => {
+    state.infoDialog.visible = false;
+    state.infoDialog.data = null;
+    state.infoDialog.instance = null;
+};
+
 const getTags = async () => {
     state.tags = await dbApi.dbTags.request(null);
 };
 
+const getInstances = async (instanceName = '') => {
+    if (!instanceName) {
+        state.instances = [];
+        return;
+    }
+    const data = await dbApi.instances.request({ name: instanceName });
+    if (data) {
+        state.instances = data.list;
+    }
+};
+
 const editDb = async (data: any) => {
     if (!data) {
         state.dbEditDialog.data = null;
@@ -527,184 +359,69 @@ const deleteDb = async () => {
 };
 
 const onShowSqlExec = async (row: any) => {
-    state.sqlExecLogDialog.title = `${row.name}[${row.host}:${row.port}]`;
+    state.sqlExecLogDialog.title = `${row.name}`;
-    state.sqlExecLogDialog.query.dbId = row.id;
+    state.sqlExecLogDialog.dbId = row.id;
     state.sqlExecLogDialog.dbs = row.database.split(' ');
-    searchSqlExecLog();
     state.sqlExecLogDialog.visible = true;
 };
 
 const onBeforeCloseSqlExecDialog = () => {
     state.sqlExecLogDialog.visible = false;
-    state.sqlExecLogDialog.data = [];
     state.sqlExecLogDialog.dbs = [];
-    state.sqlExecLogDialog.total = 0;
+    state.sqlExecLogDialog.dbId = 0;
-    state.sqlExecLogDialog.query.dbId = 0;
-    state.sqlExecLogDialog.query.pageNum = 1;
-    state.sqlExecLogDialog.query.table = '';
-    state.sqlExecLogDialog.query.db = '';
-    state.sqlExecLogDialog.query.type = null;
 };
 
-const searchSqlExecLog = async () => {
+const onDumpDbs = async (row: any) => {
-    const res = await dbApi.getSqlExecs.request(state.sqlExecLogDialog.query);
+    const dbs = row.database.split(' ');
-    state.sqlExecLogDialog.data = res.list;
+    const data = [];
-    state.sqlExecLogDialog.total = res.total;
+    for (let name of dbs) {
-};
+        data.push({
-
+            key: name,
-/**
+            label: name,
- * 选择导出数据库表
+        });
- */
+    }
-const handleDumpTableSelectionChange = (vals: any) => {
+    state.exportDialog.value = [];
-    state.dumpInfo.tables = vals.map((x: any) => x.tableName);
+    state.exportDialog.data = data;
+    state.exportDialog.dbId = row.id;
+    state.exportDialog.contents = ['结构', '数据'];
+    state.exportDialog.extName = 'sql';
+    state.exportDialog.visible = true;
 };
 
 /**
  * 数据库信息导出
  */
-const dump = (db: string) => {
+const dumpDbs = () => {
-    isTrue(state.dumpInfo.tables.length > 0, '请选择要导出的表');
+    isTrue(state.exportDialog.value.length > 0, '请添加要导出的数据库');
     const a = document.createElement('a');
+    let type = 0;
+    for (let c of state.exportDialog.contents) {
+        if (c == '结构') {
+            type += 1;
+        } else if (c == '数据') {
+            type += 2;
+        }
+    }
     a.setAttribute(
         'href',
-        `${config.baseApiUrl}/dbs/${state.dbId}/dump?db=${db}&type=${state.dumpInfo.type}&tables=${state.dumpInfo.tables.join(',')}&token=${getSession(
+        `${config.baseApiUrl}/dbs/${state.exportDialog.dbId}/dump?db=${state.exportDialog.value.join(',')}&type=${type}&extName=${
-            'token'
+            state.exportDialog.extName
-        )}`
+        }&token=${getSession('token')}`
     );
     a.click();
-    state.showDumpInfo = false;
+    state.exportDialog.visible = false;
-};
-
-const onShowRollbackSql = async (sqlExecLog: any) => {
-    const columns = await dbApi.columnMetadata.request({ id: sqlExecLog.dbId, db: sqlExecLog.db, tableName: sqlExecLog.table });
-    const primaryKey = getPrimaryKey(columns);
-    const oldValue = JSON.parse(sqlExecLog.oldValue);
-
-    const rollbackSqls = [];
-    if (sqlExecLog.type == DbSqlExecTypeEnum['UPDATE'].value) {
-        for (let ov of oldValue) {
-            const setItems = [];
-            for (let key in ov) {
-                if (key == primaryKey) {
-                    continue;
-                }
-                setItems.push(`${key} = ${wrapValue(ov[key])}`);
-            }
-            rollbackSqls.push(`UPDATE ${sqlExecLog.table} SET ${setItems.join(', ')} WHERE ${primaryKey} = ${wrapValue(ov[primaryKey])};`);
-        }
-    } else if (sqlExecLog.type == DbSqlExecTypeEnum['DELETE'].value) {
-        const columnNames = columns.map((c: any) => c.columnName);
-        for (let ov of oldValue) {
-            const values = [];
-            for (let column of columnNames) {
-                values.push(wrapValue(ov[column]));
-            }
-            rollbackSqls.push(`INSERT INTO ${sqlExecLog.table} (${columnNames.join(', ')}) VALUES (${values.join(', ')});`);
-        }
-    }
-
-    state.rollbackSqlDialog.sql = rollbackSqls.join('\n');
-    state.rollbackSqlDialog.visible = true;
-};
-
-const getPrimaryKey = (columns: any) => {
-    const col = columns.find((c: any) => c.columnKey == 'PRI');
-    if (col) {
-        return col.columnName;
-    }
-    return columns[0].columnName;
-};
-
-/**
- * 包装值，如果值类型为number则直接返回，其他则需要使用''包装
- */
-const wrapValue = (val: any) => {
-    if (typeof val == 'number') {
-        return val;
-    }
-    return `'${val}'`;
 };
 
 const showTableInfo = async (row: any, db: string) => {
-    state.tableInfoDialog.loading = true;
+    state.dbId = row.id;
+    state.row = row;
+    state.db = db;
     state.tableInfoDialog.visible = true;
-    try {
-        state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: row.id, db });
-        state.tableCreateDialog.type = row.type;
-        state.dbId = row.id;
-        state.row = row;
-        state.db = db;
-    } catch (e) {
-        state.tableInfoDialog.visible = false;
-    } finally {
-        state.tableInfoDialog.loading = false;
-    }
-};
-
-const onSubmitSql = async (row: { tableName: string }) => {
-    await openEditTable(row);
-    state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.dbId, db: state.db });
 };
 
 const closeTableInfo = () => {
     state.showDumpInfo = false;
     state.tableInfoDialog.visible = false;
-    state.tableInfoDialog.infos = [];
-};
-
-const showColumns = async (row: any) => {
-    state.chooseTableName = row.tableName;
-    state.columnDialog.columns = await dbApi.columnMetadata.request({
-        id: state.dbId,
-        db: state.db,
-        tableName: row.tableName,
-    });
-
-    state.columnDialog.visible = true;
-};
-
-const showTableIndex = async (row: any) => {
-    state.chooseTableName = row.tableName;
-    state.indexDialog.indexs = await dbApi.tableIndex.request({
-        id: state.dbId,
-        db: state.db,
-        tableName: row.tableName,
-    });
-
-    state.indexDialog.visible = true;
-};
-
-const showCreateDdl = async (row: any) => {
-    state.chooseTableName = row.tableName;
-    const res = await dbApi.tableDdl.request({
-        id: state.dbId,
-        db: state.db,
-        tableName: row.tableName,
-    });
-    state.ddlDialog.ddl = res;
-    state.ddlDialog.visible = true;
-};
-
-/**
- * 删除表
- */
-const dropTable = async (row: any) => {
-    try {
-        const tableName = row.tableName;
-        await ElMessageBox.confirm(`确定删除'${tableName}'表?`, '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning',
-        });
-        SqlExecBox({
-            sql: `DROP TABLE ${tableName}`,
-            dbId: state.dbId,
-            db: state.db,
-            runSuccessCallback: async () => {
-                state.tableInfoDialog.infos = await dbApi.tableInfos.request({ id: state.dbId, db: state.db });
-            },
-        });
-    } catch (err) {}
 };
 
 // 点击查看时初始化数据
@@ -724,31 +441,5 @@ const filterSchema = () => {
         state.filterDb.list = state.filterDb.cache;
     }
 };
-
-// 打开编辑表
-const openEditTable = async (row: any) => {
-    state.tableCreateDialog.visible = true;
-    state.tableCreateDialog.activeName = '1';
-
-    if (row === false) {
-        state.tableCreateDialog.data = { edit: false, row: {}, indexs: [], columns: [] };
-        state.tableCreateDialog.title = '创建表';
-    }
-
-    if (row.tableName) {
-        state.tableCreateDialog.title = '修改表';
-        let indexs = await dbApi.tableIndex.request({
-            id: state.dbId,
-            db: state.db,
-            tableName: row.tableName,
-        });
-        let columns = await dbApi.columnMetadata.request({
-            id: state.dbId,
-            db: state.db,
-            tableName: row.tableName,
-        });
-        state.tableCreateDialog.data = { edit: true, row, indexs, columns };
-    }
-};
 </script>
 <style lang="scss"></style>

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

@@ -0,0 +1,168 @@
+<template>
+    <div class="db-sql-exec-log">
+        <page-table
+            height="100%"
+            ref="sqlExecDialogPageTableRef"
+            :query="queryConfig"
+            v-model:query-form="query"
+            :data="data"
+            :columns="columns"
+            :total="total"
+            v-model:page-size="query.pageSize"
+            v-model:page-num="query.pageNum"
+            @pageChange="searchSqlExecLog()"
+        >
+            <template #dbSelect>
+                <el-select v-model="query.db" placeholder="请选择数据库" style="width: 200px" filterable clearable>
+                    <el-option v-for="item in dbs" :key="item" :label="`${item}`" :value="item"> </el-option>
+                </el-select>
+            </template>
+
+            <template #action="{ data }">
+                <el-link
+                    v-if="data.type == DbSqlExecTypeEnum.Update.value || data.type == DbSqlExecTypeEnum.Delete.value"
+                    type="primary"
+                    plain
+                    size="small"
+                    :underline="false"
+                    @click="onShowRollbackSql(data)"
+                >
+                    还原SQL</el-link
+                >
+            </template>
+        </page-table>
+
+        <el-dialog width="55%" :title="`还原SQL`" v-model="rollbackSqlDialog.visible">
+            <el-input type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="rollbackSqlDialog.sql" size="small"> </el-input>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs,watch, reactive, computed, onMounted, defineAsyncComponent } from 'vue';
+import { dbApi } from './api';
+import { DbSqlExecTypeEnum } from './enums';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn, TableQuery } from '@/components/pagetable';
+
+const props = defineProps({
+    dbId: {
+        type: [Number],
+        required: true,
+    },
+    dbs: {
+        type: [Array<String>],
+        required: true,
+    },
+});
+
+const queryConfig = [
+    TableQuery.slot('db', '数据库', 'dbSelect'),
+    TableQuery.text('table', '表名'),
+    TableQuery.select('type', '操作类型').setOptions(Object.values(DbSqlExecTypeEnum)),
+];
+
+const columns = [
+    TableColumn.new('db', '数据库'),
+    TableColumn.new('table', '表'),
+    TableColumn.new('type', '类型').typeTag(DbSqlExecTypeEnum).setAddWidth(10),
+    TableColumn.new('creator', '执行人'),
+    TableColumn.new('sql', 'SQL').canBeautify(),
+    TableColumn.new('oldValue', '原值').canBeautify(),
+    TableColumn.new('createTime', '执行时间').isTime(),
+    TableColumn.new('remark', '备注'),
+    TableColumn.new('action', '操作').isSlot().setMinWidth(90).fixedRight().alignCenter(),
+];
+
+const state = reactive({
+    data: [],
+    total: 0,
+    dbs: [],
+    query: {
+        dbId: 0,
+        db: '',
+        table: '',
+        type: null,
+        pageNum: 1,
+        pageSize: 10,
+    },
+    rollbackSqlDialog: {
+        visible: false,
+        sql: '',
+    },
+    filterDb: {
+        param: '',
+        cache: [],
+        list: [],
+    },
+});
+
+const { data, query, total, rollbackSqlDialog } = toRefs(state);
+
+onMounted(async () => {
+    searchSqlExecLog();
+});
+
+watch(props, async (newValue: any) => {
+    await searchSqlExecLog();
+});
+
+
+const searchSqlExecLog = async () => {
+    state.query.dbId = props.dbId
+    const res = await dbApi.getSqlExecs.request(state.query);
+    state.data = res.list;
+    state.total = res.total;
+};
+
+const onShowRollbackSql = async (sqlExecLog: any) => {
+    const columns = await dbApi.columnMetadata.request({ id: sqlExecLog.dbId, db: sqlExecLog.db, tableName: sqlExecLog.table });
+    const primaryKey = getPrimaryKey(columns);
+    const oldValue = JSON.parse(sqlExecLog.oldValue);
+
+    const rollbackSqls = [];
+    if (sqlExecLog.type == DbSqlExecTypeEnum.Update.value) {
+        for (let ov of oldValue) {
+            const setItems = [];
+            for (let key in ov) {
+                if (key == primaryKey) {
+                    continue;
+                }
+                setItems.push(`${key} = ${wrapValue(ov[key])}`);
+            }
+            rollbackSqls.push(`UPDATE ${sqlExecLog.table} SET ${setItems.join(', ')} WHERE ${primaryKey} = ${wrapValue(ov[primaryKey])};`);
+        }
+    } else if (sqlExecLog.type == DbSqlExecTypeEnum.Delete.value) {
+        const columnNames = columns.map((c: any) => c.columnName);
+        for (let ov of oldValue) {
+            const values = [];
+            for (let column of columnNames) {
+                values.push(wrapValue(ov[column]));
+            }
+            rollbackSqls.push(`INSERT INTO ${sqlExecLog.table} (${columnNames.join(', ')}) VALUES (${values.join(', ')});`);
+        }
+    }
+
+    state.rollbackSqlDialog.sql = rollbackSqls.join('\n');
+    state.rollbackSqlDialog.visible = true;
+};
+
+const getPrimaryKey = (columns: any) => {
+    const col = columns.find((c: any) => c.columnKey == 'PRI');
+    if (col) {
+        return col.columnName;
+    }
+    return columns[0].columnName;
+};
+
+/**
+ * 包装值，如果值类型为number则直接返回，其他则需要使用''包装
+ */
+const wrapValue = (val: any) => {
+    if (typeof val == 'number') {
+        return val;
+    }
+    return `'${val}'`;
+};
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,215 @@
+<template>
+    <div>
+        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" :destroy-on-close="true" width="38%">
+            <el-form :model="form" ref="dbForm" :rules="rules" label-width="auto">
+                <el-tabs v-model="tabActiveName">
+                    <el-tab-pane label="基础信息" name="basic">
+                        <el-form-item prop="name" label="别名:" required>
+                            <el-input v-model.trim="form.name" placeholder="请输入数据库别名" auto-complete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="type" label="类型:" required>
+                            <el-select style="width: 100%" v-model="form.type" placeholder="请选择数据库类型">
+                                <el-option key="item.id" label="mysql" value="mysql"> </el-option>
+                                <el-option key="item.id" label="postgres" value="postgres"> </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item prop="host" label="host:" required>
+                            <el-col :span="18">
+                                <el-input :disabled="form.id !== undefined" v-model.trim="form.host" placeholder="请输入主机ip" auto-complete="off"></el-input>
+                            </el-col>
+                            <el-col style="text-align: center" :span="1">:</el-col>
+                            <el-col :span="5">
+                                <el-input type="number" v-model.number="form.port" placeholder="请输入端口"></el-input>
+                            </el-col>
+                        </el-form-item>
+                        <el-form-item prop="username" label="用户名:" required>
+                            <el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="password" label="密码:">
+                            <el-input type="password" show-password v-model.trim="form.password" placeholder="请输入密码" autocomplete="new-password">
+                                <template v-if="form.id && form.id != 0" #suffix>
+                                    <el-popover @hide="pwd = ''" placement="right" title="原密码" :width="200" trigger="click" :content="pwd">
+                                        <template #reference>
+                                            <el-link v-auth="'db:instance:save'" @click="getDbPwd" :underline="false" type="primary" class="mr5"
+                                                >原密码
+                                            </el-link>
+                                        </template>
+                                    </el-popover>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+
+                        <el-form-item prop="remark" label="备注:">
+                            <el-input v-model.trim="form.remark" auto-complete="off" type="textarea"></el-input>
+                        </el-form-item>
+                    </el-tab-pane>
+
+                    <el-tab-pane label="其他配置" name="other">
+                        <el-form-item prop="params" label="连接参数:">
+                            <el-input v-model.trim="form.params" placeholder="其他连接参数，形如: key1=value1&key2=value2">
+                                <template #suffix>
+                                    <el-link
+                                        target="_blank"
+                                        href="https://github.com/go-sql-driver/mysql#parameters"
+                                        :underline="false"
+                                        type="primary"
+                                        class="mr5"
+                                        >参数参考</el-link
+                                    >
+                                </template>
+                            </el-input>
+                        </el-form-item>
+
+                        <el-form-item prop="sshTunnelMachineId" label="SSH隧道:">
+                            <ssh-tunnel-select v-model="form.sshTunnelMachineId" />
+                        </el-form-item>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="cancel()">取 消</el-button>
+                    <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
+import { dbApi } from './api';
+import { ElMessage } from 'element-plus';
+import { notBlank } from '@/common/assert';
+import { RsaEncrypt } from '@/common/rsa';
+import SshTunnelSelect from '../component/SshTunnelSelect.vue';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+    },
+    data: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+});
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change']);
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入别名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    type: [
+        {
+            required: true,
+            message: '请选择数据库类型',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    host: [
+        {
+            required: true,
+            message: '请输入主机ip和port',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    username: [
+        {
+            required: true,
+            message: '请输入用户名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+};
+
+const dbForm: any = ref(null);
+
+const state = reactive({
+    dialogVisible: false,
+    tabActiveName: 'basic',
+    form: {
+        id: null,
+        type: null,
+        name: null,
+        host: '',
+        port: 3306,
+        username: null,
+        password: null,
+        params: null,
+        remark: '',
+        sshTunnelMachineId: null as any,
+    },
+    // 原密码
+    pwd: '',
+    // 原用户名
+    oldUserName: null,
+    btnLoading: false,
+});
+
+const { dialogVisible, tabActiveName, form, pwd, btnLoading } = toRefs(state);
+
+watch(props, (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (!state.dialogVisible) {
+        return;
+    }
+    state.tabActiveName = 'basic';
+    if (newValue.data) {
+        state.form = { ...newValue.data };
+        state.oldUserName = state.form.username;
+    } else {
+        state.form = { port: 3306 } as any;
+        state.oldUserName = null;
+    }
+});
+
+const getDbPwd = async () => {
+    state.pwd = await dbApi.getInstancePwd.request({ id: state.form.id });
+};
+
+const btnOk = async () => {
+    if (!state.form.id) {
+        notBlank(state.form.password, '新增操作，密码不可为空');
+    } else if (state.form.username != state.oldUserName) {
+        notBlank(state.form.password, '已修改用户名，请输入密码');
+    }
+
+    dbForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            const reqForm = { ...state.form };
+            reqForm.password = await RsaEncrypt(reqForm.password);
+            if (!state.form.sshTunnelMachineId) {
+                reqForm.sshTunnelMachineId = -1;
+            }
+            dbApi.saveInstance.request(reqForm).then(() => {
+                ElMessage.success('保存成功');
+                emit('val-change', state.form);
+                state.btnLoading = true;
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
+
+                cancel();
+            });
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,179 @@
+<template>
+    <div class="db-list">
+        <page-table
+            ref="pageTableRef"
+            :query="queryConfig"
+            v-model:query-form="query"
+            :show-selection="true"
+            v-model:selection-data="state.selectionData"
+            :data="datas"
+            :columns="columns"
+            :total="total"
+            v-model:page-size="query.pageSize"
+            v-model:page-num="query.pageNum"
+            @pageChange="search()"
+        >
+            <template #queryRight>
+                <el-button v-auth="perms.saveInstance" type="primary" icon="plus" @click="editInstance(false)">添加</el-button>
+                <el-button v-auth="perms.delInstance" :disabled="selectionData.length < 1" @click="deleteInstance()" type="danger" icon="delete"
+                    >删除</el-button
+                >
+            </template>
+
+            <template #more="{ data }">
+                <el-button @click="showInfo(data)" link>详情</el-button>
+            </template>
+
+            <template #action="{ data }">
+                <el-button v-if="actionBtns[perms.saveInstance]" @click="editInstance(data)" type="primary" link>编辑</el-button>
+            </template>
+        </page-table>
+
+        <el-dialog v-model="infoDialog.visible">
+            <el-descriptions title="详情" :column="3" border>
+                <el-descriptions-item :span="2" label="名称">{{ infoDialog.data.name }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="id">{{ infoDialog.data.id }}</el-descriptions-item>
+                <el-descriptions-item :span="2" label="主机">{{ infoDialog.data.host }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="端口">{{ infoDialog.data.port }}</el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="用户名">{{ infoDialog.data.username }}</el-descriptions-item>
+                <el-descriptions-item :span="1" label="类型">{{ infoDialog.data.type }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="连接参数">{{ infoDialog.data.params }}</el-descriptions-item>
+                <el-descriptions-item :span="3" label="备注">{{ infoDialog.data.remark }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="SSH隧道">{{ infoDialog.data.sshTunnelMachineId > 0 ? '是' : '否' }} </el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="创建时间">{{ dateFormat(infoDialog.data.createTime) }} </el-descriptions-item>
+                <el-descriptions-item :span="1" label="创建者">{{ infoDialog.data.creator }}</el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="更新时间">{{ dateFormat(infoDialog.data.updateTime) }} </el-descriptions-item>
+                <el-descriptions-item :span="1" label="修改者">{{ infoDialog.data.modifier }}</el-descriptions-item>
+            </el-descriptions>
+        </el-dialog>
+
+        <instance-edit
+            @val-change="valChange"
+            :title="instanceEditDialog.title"
+            v-model:visible="instanceEditDialog.visible"
+            v-model:data="instanceEditDialog.data"
+        ></instance-edit>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, reactive, onMounted, defineAsyncComponent } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { dbApi } from './api';
+import { dateFormat } from '@/common/utils/date';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn, TableQuery } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';
+
+const InstanceEdit = defineAsyncComponent(() => import('./InstanceEdit.vue'));
+
+const perms = {
+    saveInstance: 'db:instance:save',
+    delInstance: 'db:instance:del',
+};
+
+const queryConfig = [TableQuery.text('name', '名称')];
+
+const columns = ref([
+    TableColumn.new('name', '名称'),
+    TableColumn.new('host', 'host:port').setFormatFunc((data: any, _prop: string) => `${data.host}:${data.port}`),
+    TableColumn.new('type', '类型'),
+    TableColumn.new('username', '用户名'),
+    TableColumn.new('remark', '备注'),
+    TableColumn.new('more', '更多').isSlot().setMinWidth(50).fixedRight(),
+]);
+
+// 该用户拥有的的操作列按钮权限
+const actionBtns = hasPerms([perms.saveInstance]);
+const actionColumn = TableColumn.new('action', '操作').isSlot().setMinWidth(65).fixedRight().alignCenter();
+
+const pageTableRef: any = ref(null);
+
+const state = reactive({
+    row: {},
+    dbId: 0,
+    db: '',
+    /**
+     * 选中的数据
+     */
+    selectionData: [],
+    /**
+     * 查询条件
+     */
+    query: {
+        name: null,
+        pageNum: 1,
+        pageSize: 10,
+    },
+    datas: [],
+    total: 0,
+    infoDialog: {
+        visible: false,
+        data: null as any,
+    },
+    instanceEditDialog: {
+        visible: false,
+        data: null as any,
+        title: '新增数据库实例',
+    },
+});
+
+const { selectionData, query, datas, total, infoDialog, instanceEditDialog } = toRefs(state);
+
+onMounted(async () => {
+    if (Object.keys(actionBtns).length > 0) {
+        columns.value.push(actionColumn);
+    }
+    search();
+});
+
+const search = async () => {
+    try {
+        pageTableRef.value.loading(true);
+        let res: any = await dbApi.instances.request(state.query);
+        state.datas = res.list;
+        state.total = res.total;
+    } finally {
+        pageTableRef.value.loading(false);
+    }
+};
+
+const showInfo = (info: any) => {
+    state.infoDialog.data = info;
+    state.infoDialog.visible = true;
+};
+
+const editInstance = async (data: any) => {
+    if (!data) {
+        state.instanceEditDialog.data = null;
+        state.instanceEditDialog.title = '新增数据库实例';
+    } else {
+        state.instanceEditDialog.data = data;
+        state.instanceEditDialog.title = '修改数据库实例';
+    }
+    state.instanceEditDialog.visible = true;
+};
+
+const valChange = () => {
+    search();
+};
+
+const deleteInstance = async () => {
+    try {
+        await ElMessageBox.confirm(`确定删除数据库实例【${state.selectionData.map((x: any) => x.name).join(', ')}】?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await dbApi.deleteInstance.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
+        ElMessage.success('删除成功');
+        search();
+    } catch (err) {}
+};
+</script>
+<style lang="scss"></style>

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

@@ -1,13 +1,13 @@
 <template>
     <div>
-        <el-row>
+        <el-row class="mb5">
             <el-col :span="4">
-                <el-button type="primary" icon="plus" @click="addQueryTab({ id: nowDbInst.id, dbs: nowDbInst.databases }, state.db)" size="small"
+                <el-button type="primary" icon="plus" @click="addQueryTab({ id: nowDbInst.id, dbs: nowDbInst.databases.split(' ') }, state.db)" size="small"
                     >新建查询</el-button
                 >
             </el-col>
             <el-col :span="20" v-if="state.db">
-                <el-descriptions :column="4" size="small" border style="height: 10px">
+                <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">
@@ -23,7 +23,7 @@
             </el-col>
         </el-row>
         <el-row type="flex">
-            <el-col :span="4" style="border-left: 1px solid #eee; margin-top: 10px">
+            <el-col :span="4">
                 <tag-tree
                     ref="tagTreeRef"
                     @node-click="nodeClick"
@@ -44,8 +44,7 @@
                                 <template #default>
                                     <el-form class="instances-pop-form" label-width="55px" :size="'small'">
                                         <el-form-item label="类型:">{{ data.params.type }}</el-form-item>
-                                        <el-form-item label="链接:">{{ data.params.host }}:{{ data.params.port }}</el-form-item>
+                                        <el-form-item label="名称:">{{ data.params.name }}</el-form-item>
-                                        <el-form-item label="用户:">{{ data.params.username }}</el-form-item>
                                         <el-form-item v-if="data.params.remark" label="备注:">{{ data.params.remark }}</el-form-item>
                                     </el-form>
                                 </template>
@@ -65,7 +64,7 @@
                 </tag-tree>
             </el-col>
             <el-col :span="20">
-                <el-container id="data-exec" style="border-left: 1px solid #eee; margin-top: 10px">
+                <el-container id="data-exec" class="mt5 ml5">
                     <el-tabs @tab-remove="onRemoveTab" @tab-change="onTabChange" style="width: 100%" v-model="state.activeName">
                         <el-tab-pane closable v-for="dt in state.tabs.values()" :key="dt.key" :label="dt.key" :name="dt.key">
                             <table-data
@@ -99,11 +98,6 @@
 import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from 'vue';
 import { ElMessage } from 'element-plus';
 
-import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js';
-import { language as addSqlLanguage } from './lang/mysql.js';
-import * as monaco from 'monaco-editor';
-import { editor, languages, Position } from 'monaco-editor';
-
 import { DbInst, TabInfo, TabType } from './db';
 import { TagTreeNode } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
@@ -111,11 +105,6 @@ import { dbApi } from './api';
 
 const Query = defineAsyncComponent(() => import('./component/tab/Query.vue'));
 const TableData = defineAsyncComponent(() => import('./component/tab/TableData.vue'));
-
-const sqlCompletionKeywords = [...sqlLanguage.keywords, ...addSqlLanguage.keywords];
-const sqlCompletionOperators = [...sqlLanguage.operators, ...addSqlLanguage.operators];
-const sqlCompletionBuiltinFunctions = [...sqlLanguage.builtinFunctions, ...addSqlLanguage.builtinFunctions];
-const sqlCompletionBuiltinVariables = [...sqlLanguage.builtinVariables, ...addSqlLanguage.builtinVariables];
 /**
  * 树节点类型
  */
@@ -166,7 +155,7 @@ onMounted(() => {
  */
 const setHeight = () => {
     state.editorHeight = window.innerHeight - 518 + 'px';
-    state.dataTabsTableHeight = window.innerHeight - 219 - 36 + 'px';
+    state.dataTabsTableHeight = window.innerHeight - 256 + 'px';
     state.tagTreeHeight = window.innerHeight - 165 + 'px';
 };
 
@@ -218,6 +207,7 @@ const loadNode = async (node: any) => {
     // 点击数据库实例 -> 加载库列表
     if (nodeType === NodeType.DbInst) {
         const dbs = params.database.split(' ')?.sort();
+        console.log(dbs);
         return dbs.map((x: any) => {
             return new TagTreeNode(`${data.key}.${x}`, x, NodeType.Db).withParams({
                 tagPath: params.tagPath,
@@ -389,7 +379,6 @@ const addQueryTab = async (inst: any, db: string, sqlName: string = '') => {
         dbs: inst.dbs,
     };
     state.tabs.set(label, tab);
-    registerSqlCompletionItemProvider();
 };
 
 const onRemoveTab = (targetName: string) => {
@@ -444,308 +433,6 @@ const reloadTables = (nodeKey: string) => {
     state.reloadStatus = true;
     tagTreeRef.value.reloadNode(nodeKey);
 };
-
-const registerSqlCompletionItemProvider = () => {
-    // 参考 https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example
-    self.completionItemProvider =
-        self.completionItemProvider ||
-        monaco.languages.registerCompletionItemProvider('sql', {
-            triggerCharacters: ['.', ' '],
-            provideCompletionItems: async (model: editor.ITextModel, position: Position): Promise<languages.CompletionList | null | undefined> => {
-                let word = model.getWordUntilPosition(position);
-                const nowTab = state.tabs.get(state.activeName);
-                if (!nowTab) {
-                    return;
-                }
-                const { db, dbId } = nowTab;
-                const dbInst = DbInst.getInst(dbId);
-                const { lineNumber, column } = position;
-                const { startColumn, endColumn } = word;
-
-                // 当前行文本
-                let lineContent = model.getLineContent(lineNumber);
-                // 注释行不需要代码提示
-                if (lineContent.startsWith('--')) {
-                    return { suggestions: [] };
-                }
-
-                let range = {
-                    startLineNumber: lineNumber,
-                    endLineNumber: lineNumber,
-                    startColumn,
-                    endColumn,
-                };
-
-                //  光标前文本
-                const textBeforePointer = model.getValueInRange({
-                    startLineNumber: lineNumber,
-                    startColumn: 0,
-                    endLineNumber: lineNumber,
-                    endColumn: column,
-                });
-                const textBeforePointerMulti = model.getValueInRange({
-                    startLineNumber: 1,
-                    startColumn: 0,
-                    endLineNumber: lineNumber,
-                    endColumn: column,
-                });
-                // 光标后文本
-                const textAfterPointerMulti = model.getValueInRange({
-                    startLineNumber: lineNumber,
-                    startColumn: column,
-                    endLineNumber: model.getLineCount(),
-                    endColumn: model.getLineMaxColumn(model.getLineCount()),
-                });
-                // // const nextTokens = textAfterPointer.trim().split(/\s+/)
-                // // const nextToken = nextTokens[0].toLowerCase()
-                const tokens = textBeforePointer.trim().split(/\s+/);
-                let lastToken = tokens[tokens.length - 1].toLowerCase();
-                const secondToken = (tokens.length > 2 && tokens[tokens.length - 2].toLowerCase()) || '';
-
-                // const dbs = nowTab.params?.dbs?.split(' ') || [];
-                const dbs = (nowTab.params && nowTab.params.dbs && nowTab.params.dbs.split(' ')) || [];
-                // console.log("光标前文本：=>" + textBeforePointerMulti)
-                // console.log("最后输入的：=>" + lastToken)
-
-                let suggestions: languages.CompletionItem[] = [];
-                const tables = await dbInst.loadTables(db);
-
-                async function hintTableColumns(tableName: any, db: any) {
-                    let dbHits = await dbInst.loadDbHints(db);
-                    let columns = dbHits[tableName];
-                    let suggestions: languages.CompletionItem[] = [];
-                    columns?.forEach((a: string, index: any) => {
-                        // 字段数据格式  字段名 字段注释，  如： create_time  [datetime][创建时间]
-                        const nameAndComment = a.split('  ');
-                        const fieldName = nameAndComment[0];
-                        suggestions.push({
-                            label: {
-                                label: a,
-                                description: 'column',
-                            },
-                            kind: monaco.languages.CompletionItemKind.Property,
-                            detail: '', // 不显示detail, 否则选中时备注等会被遮挡
-                            insertText: fieldName, // create_time
-                            range,
-                            sortText: 100 + index + '', // 使用表字段声明顺序排序,排序需为字符串类型
-                        });
-                    });
-                    return suggestions;
-                }
-
-                if (lastToken.indexOf('.') > -1 || secondToken.indexOf('.') > -1) {
-                    // 如果是.触发代码提示，则进行【 库.表名联想 】 或 【 表别名.表字段联想 】
-                    let str = lastToken.substring(0, lastToken.lastIndexOf('.'));
-                    if (lastToken.trim().startsWith('.')) {
-                        str = secondToken;
-                    }
-                    // 如果字符串粘连起了如:'a.creator,a.',需要重新取出别名
-                    let aliasArr = lastToken.split(',');
-                    if (aliasArr.length > 1) {
-                        lastToken = aliasArr[aliasArr.length - 1];
-                        str = lastToken.substring(0, lastToken.lastIndexOf('.'));
-                        if (lastToken.trim().startsWith('.')) {
-                            str = secondToken;
-                        }
-                    }
-                    // 库.表名联想
-                    if (dbs && dbs.filter((a: any) => a === str)?.length > 0) {
-                        let tables = await dbInst.loadTables(str);
-                        let suggestions: languages.CompletionItem[] = [];
-                        for (let item of tables) {
-                            const { tableName, tableComment } = item;
-                            suggestions.push({
-                                label: {
-                                    label: tableName + (tableComment ? ' - ' + tableComment : ''),
-                                    description: 'table',
-                                },
-                                kind: monaco.languages.CompletionItemKind.File,
-                                insertText: tableName,
-                                range,
-                            });
-                        }
-                        return { suggestions };
-                    }
-
-                    let sql = textBeforePointerMulti.split(';')[textBeforePointerMulti.split(';').length - 1] + textAfterPointerMulti.split(';')[0];
-                    // 表别名.表字段联想
-                    let tableInfo = getTableByAlias(sql, db, str);
-                    if (tableInfo.tableName) {
-                        let tableName = tableInfo.tableName;
-                        let db = tableInfo.dbName;
-                        // 取出表名并提示
-                        let suggestions = await hintTableColumns(tableName, db);
-                        if (suggestions.length > 0) {
-                            return { suggestions };
-                        }
-                    }
-                    return { suggestions: [] };
-                } else {
-                    // 如果sql里含有表名，则提示表字段
-                    let mat = textBeforePointerMulti.match(/[from|update]\n*\s+\n*(\w+)\n*\s+\n*/i);
-                    if (mat && mat.length > 1) {
-                        let tableName = mat[1];
-                        // 取出表名并提示
-                        let addSuggestions = await hintTableColumns(tableName, db);
-                        if (addSuggestions.length > 0) {
-                            suggestions = suggestions.concat(addSuggestions);
-                        }
-                    }
-                }
-
-                // 表名联想
-                tables.forEach((tableMeta: any) => {
-                    const { tableName, tableComment } = tableMeta;
-                    suggestions.push({
-                        label: {
-                            label: tableName + ' - ' + tableComment,
-                            description: 'table',
-                        },
-                        kind: monaco.languages.CompletionItemKind.File,
-                        detail: tableComment,
-                        insertText: tableName + ' ',
-                        range,
-                    });
-                });
-
-                // mysql关键字
-                sqlCompletionKeywords.forEach((item: any) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'keyword',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Keyword,
-                        insertText: item,
-                        range,
-                    });
-                });
-
-                // 操作符
-                sqlCompletionOperators.forEach((item: any) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'opt',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Operator,
-                        insertText: item,
-                        range,
-                    });
-                });
-                
-                let replacedFunctions = [] as string[]; 
-
-                // 添加的函数
-                addSqlLanguage.replaceFunctions.forEach((item: any) => {
-                    replacedFunctions.push(item.label)
-                    suggestions.push({
-                        label: {
-                            label: item.label,
-                            description: item.description,
-                        },
-                        kind: monaco.languages.CompletionItemKind.Function,
-                        insertText: item.insertText,
-                        range,
-                    });
-                });
-              
-                // 内置函数
-                sqlCompletionBuiltinFunctions.forEach((item: any) => {
-                  replacedFunctions.indexOf(item) < 0 && suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'func',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Function,
-                        insertText: item,
-                        range,
-                    });
-                });
-                // 内置变量
-                sqlCompletionBuiltinVariables.forEach((item: string) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'var',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Variable,
-                        insertText: item,
-                        range,
-                    });
-                });
-
-                // 库名提示
-                if (dbs && dbs.length > 0) {
-                    dbs.forEach((a: any) => {
-                        suggestions.push({
-                            label: {
-                                label: a,
-                                description: 'schema',
-                            },
-                            kind: monaco.languages.CompletionItemKind.Folder,
-                            insertText: a,
-                            range,
-                        });
-                    });
-                }
-
-                // 默认提示
-                return {
-                    suggestions: suggestions,
-                };
-            },
-        });
-};
-
-/**
- * 根据别名获取sql里的表名
- * @param sql sql
- * @param db 默认数据库
- * @param alias 别名
- */
-const getTableByAlias = (sql: string, db: string, alias: string): { dbName: string; tableName: string } => {
-    // 表别名：表名
-    let result = {};
-    let defName = '';
-    let defResult = {};
-    // 正则匹配取出表名和表别名
-    // 测试sql
-    /*
-
-    `select * from database.Outvisit l
-left join patient p on l.patid=p.patientid
-join patstatic c on   l.patid=c.patid inner join patphone  ph  on l.patid=ph.patid
-where l.name='kevin' and exsits(select 1 from pharmacywestpas pw where p.outvisitid=l.outvisitid)
-unit all
-select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)/gi)
-     */
-    let match = sql.match(/(join|from)\n*\s+\n*(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)\n*/gi);
-    if (match && match.length > 0) {
-        match.forEach((a) => {
-            // 去掉前缀，取出
-            let t = a
-                .substring(5, a.length)
-                .replaceAll(/\s+/g, ' ')
-                .replaceAll(/\s+as\s+/gi, ' ')
-                .replaceAll(/\r\n/g, ' ')
-                .trim()
-                .split(/\s+/);
-            let withDb = t[0].split('.');
-            // 表名是 db名.表名
-            let tName = withDb.length > 1 ? withDb[1] : withDb[0];
-            let dbName = withDb.length > 1 ? withDb[0] : db || '';
-            if (t.length == 2) {
-                // 表别名：表名
-                result[t[1]] = { tableName: tName, dbName };
-            } else {
-                // 只有表名无别名 取第一个无别名的表为默认表
-                !defName && (defResult = { tableName: tName, dbName: db });
-            }
-        });
-    }
-    return result[alias] || defResult;
-};
 </script>
 
 <style lang="scss">
@@ -771,11 +458,6 @@ select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(
     text-align: center;
 }
 
-.el-tabs__header {
-    padding: 0 10px;
-    background-color: #fff;
-}
-
 #data-exec {
     min-height: calc(100vh - 155px);
 

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

@@ -1,64 +0,0 @@
-<template>
-    <div>
-        <el-dialog :title="`${title} 详情`" v-model="dialogVisible" :before-close="cancel" width="90%">
-            <el-table @cell-click="cellClick" :data="data.res">
-                <el-table-column :width="200" :prop="item" :label="item" v-for="item in data.colNames" :key="item"> </el-table-column>
-            </el-table>
-        </el-dialog>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { watch, toRefs, reactive } from 'vue';
-
-const props = defineProps({
-    visible: {
-        type: Boolean,
-    },
-    title: {
-        type: String,
-    },
-    data: {
-        type: Object,
-    },
-});
-
-//定义事件
-const emit = defineEmits(['update:visible']);
-
-const state = reactive({
-    dialogVisible: false,
-    data: {
-        res: [],
-        colNames: [],
-    },
-});
-
-const { dialogVisible, data } = toRefs(state);
-
-watch(props, async (newValue: any) => {
-    state.dialogVisible = newValue.visible;
-    state.data.res = newValue.data.res;
-    state.data.colNames = newValue.data.colNames;
-});
-
-const cellClick = (row: any, column: any, cell: any) => {
-    let isDiv = cell.children[0].tagName === 'DIV';
-    let text = cell.children[0].innerText;
-    let div = cell.children[0];
-    if (isDiv) {
-        let input = document.createElement('input');
-        input.setAttribute('value', text);
-        cell.replaceChildren(input);
-        input.focus();
-        input.addEventListener('blur', () => {
-            div.innerText = input.value;
-            cell.replaceChildren(div);
-        });
-    }
-};
-
-const cancel = () => {
-    emit('update:visible', false);
-};
-</script>

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

@@ -5,8 +5,6 @@ export const dbApi = {
     dbs: Api.newGet('/dbs'),
     dbTags: Api.newGet('/dbs/tags'),
     saveDb: Api.newPost('/dbs'),
-    getAllDatabase: Api.newPost('/dbs/databases'),
-    getDbPwd: Api.newGet('/dbs/{id}/pwd'),
     deleteDb: Api.newDelete('/dbs/{id}'),
     dumpDb: Api.newPost('/dbs/{id}/dump'),
     tableInfos: Api.newGet('/dbs/{id}/t-infos'),
@@ -26,4 +24,12 @@ export const dbApi = {
     deleteDbSql: Api.newDelete('/dbs/{id}/sql'),
     // 获取数据库sql执行记录
     getSqlExecs: Api.newGet('/dbs/{dbId}/sql-execs'),
+
+    // 获取权限列表
+    instances: Api.newGet('/instances'),
+    getInstance: Api.newGet("/instances/{instanceId}"),
+    getAllDatabase: Api.newGet('/instances/{instanceId}/databases'),
+    saveInstance: Api.newPost('/instances'),
+    getInstancePwd: Api.newGet('/instances/{id}/pwd'),
+    deleteInstance: Api.newDelete('/instances/{id}'),
 };

mayfly_go_web/src/views/ops/db/component/DbTable.vue

@@ -266,6 +266,7 @@ const cellClick = (row: any, column: any, cell: any) => {
 };
 
 const submitUpdateFields = () => {
+    const dbInst = DbInst.getInst(state.dbId)
     let currentUpdatedFields = state.updatedFields;
     if (currentUpdatedFields.length <= 0) {
         return;
@@ -274,12 +275,12 @@ const submitUpdateFields = () => {
     let res = '';
     let divs: HTMLElement[] = [];
     currentUpdatedFields.forEach(a => {
-        let sql = `UPDATE ${state.table} SET `;
+        let sql = `UPDATE ${dbInst.wrapName(state.table)} SET `;
         let primaryKey = a.primaryKey;
         let primaryKeyType = a.primaryKeyType;
         let primaryKeyName = a.primaryKeyName;
         a.fields.forEach(f => {
-            sql += ` ${f.fieldName} = ${DbInst.wrapColumnValue(f.fieldType, f.newValue)},`
+            sql += ` ${dbInst.wrapName(f.fieldName)} = ${DbInst.wrapColumnValue(f.fieldType, f.newValue)},`
             // 如果修改的字段是主键
             if (f.fieldName === primaryKeyName) {
                 primaryKey = f.oldValue
@@ -287,11 +288,11 @@ const submitUpdateFields = () => {
             divs.push(f.div)
         })
         sql = sql.substring(0, sql.length - 1)
-        sql += ` WHERE ${primaryKeyName} = ${DbInst.wrapColumnValue(primaryKeyType, primaryKey)} ;`
+        sql += ` WHERE ${dbInst.wrapName(primaryKeyName)} = ${DbInst.wrapColumnValue(primaryKeyType, primaryKey)} ;`
         res += sql;
     })
 
-    DbInst.getInst(state.dbId).promptExeSql(db, res, () => { }, () => {
+    dbInst.promptExeSql(db, res, () => { }, () => {
         currentUpdatedFields = [];
         divs.forEach(a => {
             a.classList.remove('update_field_active');

mayfly_go_web/src/views/ops/db/component/tab/Query.vue

@@ -97,19 +97,38 @@ import { isTrue, notBlank } from '@/common/assert';
 import { format as sqlFormatter } from 'sql-formatter';
 import config from '@/common/config';
 import { ElMessage, ElMessageBox } from 'element-plus';
+
+import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js';
+import { language as addSqlLanguage } from '../../lang/mysql.js';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
-import * as monaco from 'monaco-editor';
+// import * as monaco from 'monaco-editor';
-import { editor } from 'monaco-editor';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { editor, languages, Position } from 'monaco-editor';
+// 相关语言
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js';
+import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js';
+import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestInlineCompletions.js';
+// 右键菜单
+import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js';
+import 'monaco-editor/esm/vs/editor/contrib/caretOperations/browser/caretOperations.js';
+import 'monaco-editor/esm/vs/editor/contrib/clipboard//browser/clipboard.js';
+import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
+import 'monaco-editor/esm/vs/editor/contrib/format//browser/formatActions.js';
 
 // 主题仓库 https://github.com/brijeshb42/monaco-themes
 // 主题例子 https://editor.bitwiser.in/
 import SolarizedLight from 'monaco-themes/themes/Solarized-light.json';
 import DbTable from '../DbTable.vue';
-import { TabInfo } from '../../db';
+import { DbInst, TabInfo } from '../../db';
 import { exportCsv } from '@/common/utils/export';
 import { dateStrFormat } from '@/common/utils/date';
 import { dbApi } from '../../api';
 
+const sqlCompletionKeywords = [...sqlLanguage.keywords, ...addSqlLanguage.keywords];
+const sqlCompletionOperators = [...sqlLanguage.operators, ...addSqlLanguage.operators];
+const sqlCompletionBuiltinFunctions = [...sqlLanguage.builtinFunctions, ...addSqlLanguage.builtinFunctions];
+const sqlCompletionBuiltinVariables = [...sqlLanguage.builtinVariables, ...addSqlLanguage.builtinVariables];
+
 const emits = defineEmits(['saveSqlSuccess', 'deleteSqlSuccess']);
 
 const props = defineProps({
@@ -161,6 +180,15 @@ watch(
     }
 );
 
+// 监听 themeConfig editorTheme配置文件的变化
+watch(
+    () => themeConfig.value.editorTheme,
+    (val) => {
+        console.log('monaco editor theme change: ', val);
+        monaco?.editor?.setTheme(val);
+    }
+);
+
 onMounted(async () => {
     console.log('in query mounted');
     state.ti = props.data;
@@ -186,6 +214,8 @@ self.MonacoEnvironment = {
 };
 
 const initMonacoEditor = () => {
+    registerSqlCompletionItemProvider();
+
     let monacoTextarea = document.getElementById('MonacoTextarea-' + state.ti.key) as HTMLElement;
     // options参数参考 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#language
     // 初始化一些主题
@@ -265,9 +295,6 @@ const initMonacoEditor = () => {
         },
     });
 
-    // 动态设置主题
-    // monaco.editor.setTheme('hc-black');
-
     // 如果sql有值，则默认赋值
     if (state.sql) {
         monacoEditor.getModel()?.setValue(state.sql);
@@ -490,15 +517,15 @@ const replaceSelection = (str: string, selection: any) => {
 };
 
 const onLimit = () => {
-  let position = monacoEditor.getPosition() as monaco.Position;
+    let position = monacoEditor.getPosition() as monaco.Position;
-  let newText = " limit 10";
+    let newText = ' limit 10';
-  monacoEditor?.getModel().applyEdits([
+    monacoEditor?.getModel()?.applyEdits([
-    {
+        {
-      range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
-      text: newText
+            text: newText,
-    }
+        },
-  ]);
+    ]);
-}
+};
 
 /**
  * 导出当前页数据
@@ -563,6 +590,308 @@ const submitUpdateFields = () => {
 const cancelUpdateFields = () => {
     dbTableRef.value.cancelUpdateFields();
 };
+
+const registerSqlCompletionItemProvider = () => {
+    // 参考 https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example
+    self.completionItemProvider =
+        self.completionItemProvider ||
+        monaco.languages.registerCompletionItemProvider('sql', {
+            triggerCharacters: ['.', ' '],
+            provideCompletionItems: async (model: editor.ITextModel, position: Position): Promise<languages.CompletionList | null | undefined> => {
+                let word = model.getWordUntilPosition(position);
+                const nowTab = props.data;
+                if (!nowTab) {
+                    return;
+                }
+                const { db, dbId } = nowTab;
+                const dbInst = DbInst.getInst(dbId);
+                const { lineNumber, column } = position;
+                const { startColumn, endColumn } = word;
+
+                // 当前行文本
+                let lineContent = model.getLineContent(lineNumber);
+                // 注释行不需要代码提示
+                if (lineContent.startsWith('--')) {
+                    return { suggestions: [] };
+                }
+
+                let range = {
+                    startLineNumber: lineNumber,
+                    endLineNumber: lineNumber,
+                    startColumn,
+                    endColumn,
+                };
+
+                //  光标前文本
+                const textBeforePointer = model.getValueInRange({
+                    startLineNumber: lineNumber,
+                    startColumn: 0,
+                    endLineNumber: lineNumber,
+                    endColumn: column,
+                });
+                const textBeforePointerMulti = model.getValueInRange({
+                    startLineNumber: 1,
+                    startColumn: 0,
+                    endLineNumber: lineNumber,
+                    endColumn: column,
+                });
+                // 光标后文本
+                const textAfterPointerMulti = model.getValueInRange({
+                    startLineNumber: lineNumber,
+                    startColumn: column,
+                    endLineNumber: model.getLineCount(),
+                    endColumn: model.getLineMaxColumn(model.getLineCount()),
+                });
+                // // const nextTokens = textAfterPointer.trim().split(/\s+/)
+                // // const nextToken = nextTokens[0].toLowerCase()
+                const tokens = textBeforePointer.trim().split(/\s+/);
+                let lastToken = tokens[tokens.length - 1].toLowerCase();
+                const secondToken = (tokens.length > 2 && tokens[tokens.length - 2].toLowerCase()) || '';
+
+                const dbs = (nowTab.params && nowTab.params.dbs && nowTab.params.dbs) || [];
+                // console.log("光标前文本：=>" + textBeforePointerMulti)
+                // console.log("最后输入的：=>" + lastToken)
+
+                let suggestions: languages.CompletionItem[] = [];
+                const tables = await dbInst.loadTables(db);
+
+                async function hintTableColumns(tableName: any, db: any) {
+                    let dbHits = await dbInst.loadDbHints(db);
+                    let columns = dbHits[tableName];
+                    let suggestions: languages.CompletionItem[] = [];
+                    columns?.forEach((a: string, index: any) => {
+                        // 字段数据格式  字段名 字段注释，  如： create_time  [datetime][创建时间]
+                        const nameAndComment = a.split('  ');
+                        const fieldName = nameAndComment[0];
+                        suggestions.push({
+                            label: {
+                                label: a,
+                                description: 'column',
+                            },
+                            kind: monaco.languages.CompletionItemKind.Property,
+                            detail: '', // 不显示detail, 否则选中时备注等会被遮挡
+                            insertText: fieldName, // create_time
+                            range,
+                            sortText: 100 + index + '', // 使用表字段声明顺序排序,排序需为字符串类型
+                        });
+                    });
+                    return suggestions;
+                }
+
+                if (lastToken.indexOf('.') > -1 || secondToken.indexOf('.') > -1) {
+                    // 如果是.触发代码提示，则进行【 库.表名联想 】 或 【 表别名.表字段联想 】
+                    let str = lastToken.substring(0, lastToken.lastIndexOf('.'));
+                    if (lastToken.trim().startsWith('.')) {
+                        str = secondToken;
+                    }
+                    // 如果字符串粘连起了如:'a.creator,a.',需要重新取出别名
+                    let aliasArr = lastToken.split(',');
+                    if (aliasArr.length > 1) {
+                        lastToken = aliasArr[aliasArr.length - 1];
+                        str = lastToken.substring(0, lastToken.lastIndexOf('.'));
+                        if (lastToken.trim().startsWith('.')) {
+                            str = secondToken;
+                        }
+                    }
+                    // 库.表名联想
+                    if (dbs && dbs.filter((a: any) => a === str)?.length > 0) {
+                        let tables = await dbInst.loadTables(str);
+                        let suggestions: languages.CompletionItem[] = [];
+                        for (let item of tables) {
+                            const { tableName, tableComment } = item;
+                            suggestions.push({
+                                label: {
+                                    label: tableName + (tableComment ? ' - ' + tableComment : ''),
+                                    description: 'table',
+                                },
+                                kind: monaco.languages.CompletionItemKind.File,
+                                insertText: tableName,
+                                range,
+                            });
+                        }
+                        return { suggestions };
+                    }
+
+                    let sql = textBeforePointerMulti.split(';')[textBeforePointerMulti.split(';').length - 1] + textAfterPointerMulti.split(';')[0];
+                    // 表别名.表字段联想
+                    let tableInfo = getTableByAlias(sql, db, str);
+                    if (tableInfo.tableName) {
+                        let tableName = tableInfo.tableName;
+                        let db = tableInfo.dbName;
+                        // 取出表名并提示
+                        let suggestions = await hintTableColumns(tableName, db);
+                        if (suggestions.length > 0) {
+                            return { suggestions };
+                        }
+                    }
+                    return { suggestions: [] };
+                } else {
+                    // 如果sql里含有表名，则提示表字段
+                    let mat = textBeforePointerMulti.match(/[from|update]\n*\s+\n*(\w+)\n*\s+\n*/i);
+                    if (mat && mat.length > 1) {
+                        let tableName = mat[1];
+                        // 取出表名并提示
+                        let addSuggestions = await hintTableColumns(tableName, db);
+                        if (addSuggestions.length > 0) {
+                            suggestions = suggestions.concat(addSuggestions);
+                        }
+                    }
+                }
+
+                // 表名联想
+                tables.forEach((tableMeta: any) => {
+                    const { tableName, tableComment } = tableMeta;
+                    suggestions.push({
+                        label: {
+                            label: tableName + ' - ' + tableComment,
+                            description: 'table',
+                        },
+                        kind: monaco.languages.CompletionItemKind.File,
+                        detail: tableComment,
+                        insertText: tableName + ' ',
+                        range,
+                    });
+                });
+
+                // mysql关键字
+                sqlCompletionKeywords.forEach((item: any) => {
+                    suggestions.push({
+                        label: {
+                            label: item,
+                            description: 'keyword',
+                        },
+                        kind: monaco.languages.CompletionItemKind.Keyword,
+                        insertText: item,
+                        range,
+                    });
+                });
+
+                // 操作符
+                sqlCompletionOperators.forEach((item: any) => {
+                    suggestions.push({
+                        label: {
+                            label: item,
+                            description: 'opt',
+                        },
+                        kind: monaco.languages.CompletionItemKind.Operator,
+                        insertText: item,
+                        range,
+                    });
+                });
+
+                let replacedFunctions = [] as string[];
+
+                // 添加的函数
+                addSqlLanguage.replaceFunctions.forEach((item: any) => {
+                    replacedFunctions.push(item.label);
+                    suggestions.push({
+                        label: {
+                            label: item.label,
+                            description: item.description,
+                        },
+                        kind: monaco.languages.CompletionItemKind.Function,
+                        insertText: item.insertText,
+                        range,
+                    });
+                });
+
+                // 内置函数
+                sqlCompletionBuiltinFunctions.forEach((item: any) => {
+                    replacedFunctions.indexOf(item) < 0 &&
+                        suggestions.push({
+                            label: {
+                                label: item,
+                                description: 'func',
+                            },
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: item,
+                            range,
+                        });
+                });
+                // 内置变量
+                sqlCompletionBuiltinVariables.forEach((item: string) => {
+                    suggestions.push({
+                        label: {
+                            label: item,
+                            description: 'var',
+                        },
+                        kind: monaco.languages.CompletionItemKind.Variable,
+                        insertText: item,
+                        range,
+                    });
+                });
+
+                // 库名提示
+                if (dbs && dbs.length > 0) {
+                    dbs.forEach((a: any) => {
+                        suggestions.push({
+                            label: {
+                                label: a,
+                                description: 'schema',
+                            },
+                            kind: monaco.languages.CompletionItemKind.Folder,
+                            insertText: a,
+                            range,
+                        });
+                    });
+                }
+
+                // 默认提示
+                return {
+                    suggestions: suggestions,
+                };
+            },
+        });
+};
+
+/**
+ * 根据别名获取sql里的表名
+ * @param sql sql
+ * @param db 默认数据库
+ * @param alias 别名
+ */
+const getTableByAlias = (sql: string, db: string, alias: string): { dbName: string; tableName: string } => {
+    // 表别名：表名
+    let result = {};
+    let defName = '';
+    let defResult = {};
+    // 正则匹配取出表名和表别名
+    // 测试sql
+    /*
+
+    `select * from database.Outvisit l
+left join patient p on l.patid=p.patientid
+join patstatic c on   l.patid=c.patid inner join patphone  ph  on l.patid=ph.patid
+where l.name='kevin' and exsits(select 1 from pharmacywestpas pw where p.outvisitid=l.outvisitid)
+unit all
+select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)/gi)
+     */
+    let match = sql.match(/(join|from)\n*\s+\n*(\w*-?\w*\.?\w+)\s*(as)?\s*(\w*)\n*/gi);
+    if (match && match.length > 0) {
+        match.forEach((a) => {
+            // 去掉前缀，取出
+            let t = a
+                .substring(5, a.length)
+                .replaceAll(/\s+/g, ' ')
+                .replaceAll(/\s+as\s+/gi, ' ')
+                .replaceAll(/\r\n/g, ' ')
+                .trim()
+                .split(/\s+/);
+            let withDb = t[0].split('.');
+            // 表名是 db名.表名
+            let tName = withDb.length > 1 ? withDb[1] : withDb[0];
+            let dbName = withDb.length > 1 ? withDb[0] : db || '';
+            if (t.length == 2) {
+                // 表别名：表名
+                result[t[1]] = { tableName: tName, dbName };
+            } else {
+                // 只有表名无别名 取第一个无别名的表为默认表
+                !defName && (defResult = { tableName: tName, dbName: db });
+            }
+        });
+    }
+    return result[alias] || defResult;
+};
 </script>
 
 <style lang="scss">
@@ -579,7 +908,7 @@ const cancelUpdateFields = () => {
 .sqlEditor {
     font-size: 8pt;
     font-weight: 600;
-    border: 1px solid #ccc;
+    border: 1px solid var(--el-border-color-light, #ebeef5);
 }
 
 .update_field_active {

mayfly_go_web/src/views/ops/db/component/tab/TableData.vue

@@ -66,9 +66,9 @@
                     style="width: 100%"
                 >
                     <template #prepend>
-                        <el-popover trigger="click" :width="320" placement="right">
+                        <el-popover :visible="state.condPopVisible" trigger="click" :width="320" placement="right">
                             <template #reference>
-                                <el-link type="success" :underline="false">选择列</el-link>
+                                <el-link @click.stop="state.condPopVisible = !state.condPopVisible" type="success" :underline="false">选择列</el-link>
                             </template>
                             <el-table
                                 :data="columns"
@@ -138,7 +138,7 @@
                     </el-select>
                 </el-col>
                 <el-col :span="19">
-                    <el-input v-model="conditionDialog.value" :placeholder="conditionDialog.placeholder" />
+                    <el-input ref="conditionInputRef" v-model="conditionDialog.value" :placeholder="conditionDialog.placeholder" />
                 </el-col>
             </el-row>
             <template #footer>
@@ -179,7 +179,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch, reactive, toRefs, ref, Ref } from 'vue';
+import { onMounted, watch, reactive, toRefs, ref, Ref, onUnmounted } from 'vue';
 import { isTrue, notEmpty, notBlank } from '@/common/assert';
 import { ElMessage } from 'element-plus';
 
@@ -190,6 +190,7 @@ import DbTable from '../DbTable.vue';
 
 const emits = defineEmits(['genInsertSql']);
 const dataForm: any = ref(null);
+const conditionInputRef: any = ref();
 
 const props = defineProps({
     data: {
@@ -218,6 +219,7 @@ const state = reactive({
     pageSizes: [20, 40, 80, 100, 200, 300, 400],
     count: 0,
     selectionDatas: [] as any,
+    condPopVisible: false,
     conditionDialog: {
         title: '',
         placeholder: '',
@@ -259,8 +261,21 @@ onMounted(async () => {
     });
     state.columns = columns;
     await onRefresh();
+
+    // 点击除选择列按钮外，若存在条件弹窗，则关闭该弹窗
+    window.addEventListener('click', handlerWindowClick);
 });
 
+onUnmounted(() => {
+    window.removeEventListener('click', handlerWindowClick);
+});
+
+const handlerWindowClick = () => {
+    if (state.condPopVisible) {
+        state.condPopVisible = false;
+    }
+};
+
 const onRefresh = async () => {
     // 查询条件置空
     state.condition = '';
@@ -283,7 +298,7 @@ const selectData = async () => {
     const dbInst = state.ti.getNowDbInst();
     const { db } = state.ti;
     try {
-        const countRes = await dbInst.runSql(db, DbInst.getDefaultCountSql(state.table, state.condition));
+        const countRes = await dbInst.runSql(db, dbInst.getDefaultCountSql(state.table, state.condition));
         state.count = countRes.res[0].count;
         let sql = dbInst.getDefaultSelectSql(state.table, state.condition, state.orderBy, state.pageNum, state.pageSize);
         state.sql = sql;
@@ -328,6 +343,9 @@ const onConditionRowClick = (event: any) => {
     state.conditionDialog.placeholder = `${row.columnType}  ${row.columnComment}`;
     state.conditionDialog.columnRow = row;
     state.conditionDialog.visible = true;
+    setTimeout(() => {
+        conditionInputRef.value.focus();
+    }, 100);
 };
 
 // 确认条件
@@ -427,6 +445,7 @@ const closeAddDataDialog = () => {
 const addRow = async () => {
     dataForm.value.validate(async (valid: boolean) => {
         if (valid) {
+            const dbInst = state.ti.getNowDbInst();
             const data = state.addDataDialog.data;
             // key: 字段名，value: 字段名提示
             let obj: any = {};
@@ -435,12 +454,12 @@ const addRow = async () => {
                 if (!value) {
                     continue;
                 }
-                obj[`${item.columnName}`] = DbInst.wrapValueByType(value);
+                obj[`${dbInst.wrapName(item.columnName)}`] = DbInst.wrapValueByType(value);
             }
             let columnNames = Object.keys(obj).join(',');
             let values = Object.values(obj).join(',');
-            let sql = `INSERT INTO ${state.table} (${columnNames}) VALUES (${values});`;
+            let sql = `INSERT INTO ${dbInst.wrapName(state.table)} (${columnNames}) VALUES (${values});`;
-            state.ti.getNowDbInst().promptExeSql(state.ti.db, sql, null, () => {
+            dbInst.promptExeSql(state.ti.db, sql, null, () => {
                 closeAddDataDialog();
                 onRefresh();
             });

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

@@ -141,9 +141,19 @@ export class DbInst {
         });
     }
 
+    /**
+     * 获取count sql
+     * @param table 表名
+     * @param condition 条件
+     * @returns count sql
+     */
+    getDefaultCountSql = (table: string, condition?: string) => {
+        return `SELECT COUNT(*) count FROM ${this.wrapName(table)} ${condition ? 'WHERE ' + condition : ''} limit 1`;
+    };
+
     // 获取指定表的默认查询sql
     getDefaultSelectSql(table: string, condition: string, orderBy: string, pageNum: number, limit: number = DbInst.DefaultLimit) {
-        const baseSql = `SELECT * FROM ${table} ${condition ? 'WHERE ' + condition : ''} ${orderBy ? orderBy : ''}`;
+        const baseSql = `SELECT * FROM ${this.wrapName(table)} ${condition ? 'WHERE ' + condition : ''} ${orderBy ? orderBy : ''}`;
         if (this.type == 'mysql') {
             return `${baseSql} LIMIT ${(pageNum - 1) * limit}, ${limit};`;
         }
@@ -170,10 +180,10 @@ export class DbInst {
             let values = [];
             for (let column of columns) {
                 const colName = column.columnName;
-                colNames.push(colName);
+                colNames.push(this.wrapName(colName));
                 values.push(DbInst.wrapValueByType(data[colName]));
             }
-            sqls.push(`INSERT INTO ${table} (${colNames.join(', ')}) VALUES(${values.join(', ')})`);
+            sqls.push(`INSERT INTO ${this.wrapName(table)} (${colNames.join(', ')}) VALUES(${values.join(', ')})`);
         }
         return sqls.join(';\n') + ';';
     }
@@ -187,7 +197,7 @@ export class DbInst {
         const primaryKey = this.getDb(db).getColumn(table);
         const primaryKeyColumnName = primaryKey.columnName;
         const ids = datas.map((d: any) => `${DbInst.wrapColumnValue(primaryKey.columnType, d[primaryKeyColumnName])}`).join(',');
-        return `DELETE FROM ${table} WHERE ${primaryKeyColumnName} IN (${ids})`;
+        return `DELETE FROM ${this.wrapName(table)} WHERE ${this.wrapName(primaryKeyColumnName)} IN (${ids})`;
     }
 
     /*
@@ -203,6 +213,22 @@ export class DbInst {
         });
     };
 
+    /**
+     * 包裹数据库表名、字段名等，避免使用关键字为字段名或表名时报错
+     * @param table
+     * @param condition
+     * @returns
+     */
+    wrapName = (name: string) => {
+        if (this.type == 'mysql') {
+            return `\`${name}\``;
+        }
+        if (this.type == 'postgres') {
+            return `"${name}"`;
+        }
+        return name;
+    };
+
     /**
      * 获取或新建dbInst，如果缓存中不存在则新建，否则直接返回
      * @param inst 数据库实例，后端返回的列表接口中的信息
@@ -252,16 +278,6 @@ export class DbInst {
         dbInstCache.clear();
     }
 
-    /**
-     * 获取count sql
-     * @param table 表名
-     * @param condition 条件
-     * @returns count sql
-     */
-    static getDefaultCountSql = (table: string, condition?: string) => {
-        return `SELECT COUNT(*) count FROM ${table} ${condition ? 'WHERE ' + condition : ''}`;
-    };
-
     /**
      * 根据返回值包装值，若值为字符串类型则添加''
      * @param val 值

mayfly_go_web/src/views/ops/db/table/DbTableEdit.vue

@@ -136,7 +136,7 @@
 import { watch, toRefs, reactive, ref } from 'vue';
 import { TYPE_LIST, CHARACTER_SET_NAME_LIST, COLLATION_SUFFIX_LIST } from './service';
 import { ElMessage } from 'element-plus';
-import SqlExecBox from './component/SqlExecBox';
+import SqlExecBox from '../component/SqlExecBox';
 
 const props = defineProps({
     visible: {

mayfly_go_web/src/views/ops/db/table/DbTableList.vue

@@ -0,0 +1,357 @@
+<template>
+    <div class="db-table">
+        <el-row class="mb10">
+            <el-popover v-model:visible="showDumpInfo" :width="470" placement="right" trigger="click">
+                <template #reference>
+                    <el-button class="ml5" type="success" size="small">导出</el-button>
+                </template>
+                <el-form-item label="导出内容: ">
+                    <el-radio-group v-model="dumpInfo.type">
+                        <el-radio :label="1" size="small">结构</el-radio>
+                        <el-radio :label="2" size="small">数据</el-radio>
+                        <el-radio :label="3" size="small">结构＋数据</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="导出表: ">
+                    <el-table @selection-change="handleDumpTableSelectionChange" max-height="300" size="small" :data="tables">
+                        <el-table-column type="selection" width="45" />
+                        <el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip> </el-table-column>
+                        <el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip> </el-table-column>
+                    </el-table>
+                </el-form-item>
+
+                <div style="text-align: right">
+                    <el-button @click="showDumpInfo = false" size="small">取消</el-button>
+                    <el-button @click="dump(db)" type="success" size="small">确定</el-button>
+                </div>
+            </el-popover>
+
+            <el-button type="primary" size="small" @click="openEditTable(false)">创建表</el-button>
+        </el-row>
+
+        <el-table v-loading="loading" border stripe :data="filterTableInfos" size="small" height="65vh">
+            <el-table-column property="tableName" label="表名" min-width="150" show-overflow-tooltip>
+                <template #header>
+                    <el-input v-model="tableNameSearch" size="small" placeholder="表名: 输入可过滤" clearable />
+                </template>
+            </el-table-column>
+            <el-table-column property="tableComment" label="备注" min-width="150" show-overflow-tooltip>
+                <template #header>
+                    <el-input v-model="tableCommentSearch" size="small" placeholder="备注: 输入可过滤" clearable />
+                </template>
+            </el-table-column>
+            <el-table-column
+                prop="tableRows"
+                label="Rows"
+                min-width="70"
+                sortable
+                :sort-method="(a: any, b: any) => parseInt(a.tableRows) - parseInt(b.tableRows)"
+            ></el-table-column>
+            <el-table-column property="dataLength" label="数据大小" sortable :sort-method="(a: any, b: any) => parseInt(a.dataLength) - parseInt(b.dataLength)">
+                <template #default="scope">
+                    {{ formatByteSize(scope.row.dataLength) }}
+                </template>
+            </el-table-column>
+            <el-table-column
+                property="indexLength"
+                label="索引大小"
+                sortable
+                :sort-method="(a: any, b: any) => parseInt(a.indexLength) - parseInt(b.indexLength)"
+            >
+                <template #default="scope">
+                    {{ formatByteSize(scope.row.indexLength) }}
+                </template>
+            </el-table-column>
+            <el-table-column property="createTime" label="创建时间" min-width="150"> </el-table-column>
+            <el-table-column label="更多信息" min-width="140">
+                <template #default="scope">
+                    <el-link @click.prevent="showColumns(scope.row)" type="primary">字段</el-link>
+                    <el-link class="ml5" @click.prevent="showTableIndex(scope.row)" type="success">索引</el-link>
+                    <el-link class="ml5" v-if="tableCreateDialog.enableEditTypes.indexOf(dbType) > -1" @click.prevent="openEditTable(scope.row)" type="warning"
+                        >编辑表</el-link
+                    >
+                    <el-link class="ml5" @click.prevent="showCreateDdl(scope.row)" type="info">DDL</el-link>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" min-width="80">
+                <template #default="scope">
+                    <el-link @click.prevent="dropTable(scope.row)" type="danger">删除</el-link>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog width="40%" :title="`${chooseTableName} 字段信息`" v-model="columnDialog.visible">
+            <el-table border stripe :data="columnDialog.columns" size="small">
+                <el-table-column prop="columnName" label="名称" show-overflow-tooltip> </el-table-column>
+                <el-table-column width="120" prop="columnType" label="类型" show-overflow-tooltip> </el-table-column>
+                <el-table-column width="80" prop="nullable" label="是否可为空" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="columnComment" label="备注" show-overflow-tooltip> </el-table-column>
+            </el-table>
+        </el-dialog>
+
+        <el-dialog width="40%" :title="`${chooseTableName} 索引信息`" v-model="indexDialog.visible">
+            <el-table border stripe :data="indexDialog.indexs" size="small">
+                <el-table-column prop="indexName" label="索引名" min-width="120" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="columnName" label="列名" min-width="120" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="seqInIndex" label="列序列号" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="indexType" label="类型"> </el-table-column>
+                <el-table-column prop="indexComment" label="备注" min-width="130" show-overflow-tooltip> </el-table-column>
+            </el-table>
+        </el-dialog>
+
+        <el-dialog width="55%" :title="`${chooseTableName} Create-DDL`" v-model="ddlDialog.visible">
+            <el-input disabled type="textarea" :autosize="{ minRows: 15, maxRows: 30 }" v-model="ddlDialog.ddl" size="small"> </el-input>
+        </el-dialog>
+
+        <db-table-edit
+            :title="tableCreateDialog.title"
+            :active-name="tableCreateDialog.activeName"
+            :dbId="dbId"
+            :db="db"
+            :data="tableCreateDialog.data"
+            v-model:visible="tableCreateDialog.visible"
+            @submit-sql="onSubmitSql"
+        >
+        </db-table-edit>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, watch, computed, onMounted, defineAsyncComponent, nextTick } from 'vue';
+import { ElMessageBox } from 'element-plus';
+import { formatByteSize } from '@/common/utils/format';
+import { dbApi } from '../api';
+import SqlExecBox from '../component/SqlExecBox';
+import config from '@/common/config';
+import { getSession } from '@/common/utils/storage';
+import { isTrue } from '@/common/assert';
+
+const DbTableEdit = defineAsyncComponent(() => import('./DbTableEdit.vue'));
+
+const props = defineProps({
+    dbId: {
+        type: [Number],
+        required: true,
+    },
+    db: {
+        type: [String],
+        required: true,
+    },
+    dbType: {
+        type: [String],
+        required: true,
+    },
+});
+
+const state = reactive({
+    row: {},
+    loading: false,
+    tables: [],
+    tableNameSearch: '',
+    tableCommentSearch: '',
+    showDumpInfo: false,
+    dumpInfo: {
+        id: 0,
+        db: '',
+        type: 3,
+        tables: [],
+    },
+    chooseTableName: '',
+    columnDialog: {
+        visible: false,
+        columns: [],
+    },
+    indexDialog: {
+        visible: false,
+        indexs: [],
+    },
+    ddlDialog: {
+        visible: false,
+        ddl: '',
+    },
+    tableCreateDialog: {
+        title: '创建表',
+        visible: false,
+        activeName: '1',
+        type: '',
+        enableEditTypes: ['mysql'], // 支持"编辑表"的数据库类型
+        data: {
+            // 修改表时，传递修改数据
+            edit: false,
+            row: {},
+            indexs: [],
+            columns: [],
+        },
+    },
+    filterDb: {
+        param: '',
+        cache: [],
+        list: [],
+    },
+});
+
+const {
+    loading,
+    tables,
+    tableNameSearch,
+    tableCommentSearch,
+    showDumpInfo,
+    dumpInfo,
+    chooseTableName,
+    columnDialog,
+    indexDialog,
+    ddlDialog,
+    tableCreateDialog,
+} = toRefs(state);
+
+onMounted(async () => {
+    getTables();
+});
+
+watch(props, async (newValue: any) => {
+    await getTables();
+});
+
+const filterTableInfos = computed(() => {
+    const tables = state.tables;
+    const tableNameSearch = state.tableNameSearch;
+    const tableCommentSearch = state.tableCommentSearch;
+    if (!tableNameSearch && !tableCommentSearch) {
+        return tables;
+    }
+    return tables.filter((data: any) => {
+        let tnMatch = true;
+        let tcMatch = true;
+        if (tableNameSearch) {
+            tnMatch = data.tableName.toLowerCase().includes(tableNameSearch.toLowerCase());
+        }
+        if (tableCommentSearch) {
+            tcMatch = data.tableComment.includes(tableCommentSearch);
+        }
+        return tnMatch && tcMatch;
+    });
+});
+
+const getTables = async () => {
+    state.loading = true;
+    try {
+        state.tables = [];
+        state.tables = await dbApi.tableInfos.request({ id: props.dbId, db: props.db });
+    } catch (e) {
+    } finally {
+        state.loading = false;
+    }
+};
+
+/**
+ * 选择导出数据库表
+ */
+const handleDumpTableSelectionChange = (vals: any) => {
+    state.dumpInfo.tables = vals.map((x: any) => x.tableName);
+};
+
+/**
+ * 数据库信息导出
+ */
+const dump = (db: string) => {
+    isTrue(state.dumpInfo.tables.length > 0, '请选择要导出的表');
+    const a = document.createElement('a');
+    a.setAttribute(
+        'href',
+        `${config.baseApiUrl}/dbs/${props.dbId}/dump?db=${db}&type=${state.dumpInfo.type}&tables=${state.dumpInfo.tables.join(',')}&token=${getSession(
+            'token'
+        )}`
+    );
+    a.click();
+    state.showDumpInfo = false;
+};
+
+const showColumns = async (row: any) => {
+    state.chooseTableName = row.tableName;
+    state.columnDialog.columns = await dbApi.columnMetadata.request({
+        id: props.dbId,
+        db: props.db,
+        tableName: row.tableName,
+    });
+
+    state.columnDialog.visible = true;
+};
+
+const showTableIndex = async (row: any) => {
+    state.chooseTableName = row.tableName;
+    state.indexDialog.indexs = await dbApi.tableIndex.request({
+        id: props.dbId,
+        db: props.db,
+        tableName: row.tableName,
+    });
+
+    state.indexDialog.visible = true;
+};
+
+const showCreateDdl = async (row: any) => {
+    state.chooseTableName = row.tableName;
+    const res = await dbApi.tableDdl.request({
+        id: props.dbId,
+        db: props.db,
+        tableName: row.tableName,
+    });
+    state.ddlDialog.ddl = res;
+    state.ddlDialog.visible = true;
+};
+
+/**
+ * 删除表
+ */
+const dropTable = async (row: any) => {
+    try {
+        const tableName = row.tableName;
+        await ElMessageBox.confirm(`确定删除'${tableName}'表?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        SqlExecBox({
+            sql: `DROP TABLE ${tableName}`,
+            dbId: props.dbId as any,
+            db: props.db as any,
+            runSuccessCallback: async () => {
+                state.tables = await dbApi.tableInfos.request({ id: props.dbId, db: props.db });
+            },
+        });
+    } catch (err) {}
+};
+
+// 打开编辑表
+const openEditTable = async (row: any) => {
+    state.tableCreateDialog.visible = true;
+    state.tableCreateDialog.activeName = '1';
+
+    if (row === false) {
+        state.tableCreateDialog.data = { edit: false, row: {}, indexs: [], columns: [] };
+        state.tableCreateDialog.title = '创建表';
+    }
+
+    if (row.tableName) {
+        state.tableCreateDialog.title = '修改表';
+        let indexs = await dbApi.tableIndex.request({
+            id: props.dbId,
+            db: props.db,
+            tableName: row.tableName,
+        });
+        let columns = await dbApi.columnMetadata.request({
+            id: props.dbId,
+            db: props.db,
+            tableName: row.tableName,
+        });
+        state.tableCreateDialog.data = { edit: true, row, indexs, columns };
+    }
+};
+
+const onSubmitSql = async (row: { tableName: string }) => {
+    await openEditTable(row);
+    state.tableCreateDialog.visible = false;
+    state.tables = await dbApi.tableInfos.request({ id: props.dbId, db: props.db });
+};
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/machine/FileManage.vue

@@ -1,631 +0,0 @@
-<template>
-    <div class="file-manage">
-        <el-dialog :title="title" v-model="dialogVisible" :show-close="true" :before-close="handleClose" width="50%">
-            <div class="toolbar">
-                <div style="float: right">
-                    <el-button v-auth="'machine:file:add'" type="primary" @click="add" icon="plus" plain>添加 </el-button>
-                </div>
-            </div>
-            <el-table :data="fileTable" stripe style="width: 100%" v-loading="loading">
-                <el-table-column prop="name" label="名称" min-width="70px">
-                    <template #default="scope">
-                        <el-input v-model="scope.row.name" :disabled="scope.row.id != null" clearable> </el-input>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="name" label="类型" width="130px">
-                    <template #default="scope">
-                        <el-select :disabled="scope.row.id != null" v-model="scope.row.type" style="width: 100px" placeholder="请选择">
-                            <el-option v-for="item in FileTypeEnum as any" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="path" label="路径" min-width="150px" show-overflow-tooltip>
-                    <template #default="scope">
-                        <el-input v-model="scope.row.path" :disabled="scope.row.id != null" clearable> </el-input>
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" min-wdith="180px">
-                    <template #default="scope">
-                        <el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" icon="success-filled" plain></el-button>
-                        <el-button v-if="scope.row.id != null" @click="getConf(scope.row)" type="primary" icon="tickets" plain></el-button>
-                        <el-button v-auth="'machine:file:del'" type="danger" @click="deleteRow(scope.$index, scope.row)" icon="delete" plain></el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-row style="margin-top: 10px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: center"
-                    :total="total"
-                    layout="prev, pager, next, total, jumper"
-                    v-model:current-page="query.pageNum"
-                    :page-size="query.pageSize"
-                    @current-change="handlePageChange"
-                >
-                </el-pagination>
-            </el-row>
-        </el-dialog>
-
-        <el-dialog :title="tree.title" v-model="tree.visible" :close-on-click-modal="false" width="70%">
-            <el-progress v-if="uploadProgressShow" style="width: 90%; margin-left: 20px" :text-inside="true" :stroke-width="20" :percentage="progressNum" />
-            <div style="height: 55vh; overflow: auto">
-                <el-tree
-                    v-if="tree.visible"
-                    ref="fileTree"
-                    :highlight-current="true"
-                    :load="loadNode"
-                    :props="treeProps"
-                    lazy
-                    node-key="id"
-                    :expand-on-click-node="false"
-                >
-                    <template #default="{ node, data }">
-                        <span class="custom-tree-node">
-                            <el-dropdown size="small" @visible-change="getFilePath(data, $event)" trigger="contextmenu">
-                                <span class="el-dropdown-link">
-                                    <span v-if="data.type == 'd' && !node.expanded">
-                                        <SvgIcon :size="15" name="folder" />
-                                    </span>
-                                    <span v-if="data.type == 'd' && node.expanded">
-                                        <SvgIcon :size="15" name="folder-opened" />
-                                    </span>
-                                    <span v-if="data.type == '-'">
-                                        <SvgIcon :size="15" name="document" />
-                                    </span>
-
-                                    <span class="ml5" style="font-weight: bold">
-                                        {{ node.label }}
-                                    </span>
-                                </span>
-
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            @click="getFileContent(tree.folder.id, data.path)"
-                                            v-if="data.type == '-' && data.size < 1 * 1024 * 1024"
-                                        >
-                                            <el-link type="info" icon="view" :underline="false">查看</el-link>
-                                        </el-dropdown-item>
-
-                                        <span v-auth="'machine:file:write'">
-                                            <el-dropdown-item @click="showCreateFileDialog(node)" v-if="data.type == 'd'">
-                                                <el-link type="primary" icon="document" :underline="false" style="margin-left: 2px">新建</el-link>
-                                            </el-dropdown-item>
-                                        </span>
-
-                                        <span v-auth="'machine:file:upload'">
-                                            <el-dropdown-item v-if="data.type == 'd'">
-                                                <el-upload
-                                                    :before-upload="beforeUpload"
-                                                    :on-success="uploadSuccess"
-                                                    action=""
-                                                    :http-request="getUploadFile"
-                                                    :headers="{ token }"
-                                                    :show-file-list="false"
-                                                    name="file"
-                                                    style="display: inline-block; margin-left: 2px"
-                                                >
-                                                    <el-link icon="upload" :underline="false">上传</el-link>
-                                                </el-upload>
-                                            </el-dropdown-item>
-                                        </span>
-
-                                        <span v-auth="'machine:file:write'">
-                                            <el-dropdown-item @click="downloadFile(node, data)" v-if="data.type == '-'">
-                                                <el-link type="primary" icon="download" :underline="false" style="margin-left: 2px">下载</el-link>
-                                            </el-dropdown-item>
-                                        </span>
-
-                                        <span v-auth="'machine:file:rm'">
-                                            <el-dropdown-item @click="deleteFile(node, data)" v-if="!dontOperate(data)">
-                                                <el-link type="danger" icon="delete" :underline="false" style="margin-left: 2px">删除</el-link>
-                                            </el-dropdown-item>
-                                        </span>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
-                            <span style="display: inline-block" class="ml15">
-                                <span style="color: #67c23a; font-weight: bold" v-if="data.type == '-'"> [{{ formatFileSize(data.size) }}] </span>
-                                <span style="color: #67c23a; font-weight: bold" v-if="data.type == 'd' && data.dirSize"> [{{ data.dirSize }}] </span>
-                                <span style="color: #67c23a; font-weight: bold" v-if="data.type == 'd' && !data.dirSize">
-                                    [<el-button @click="getDirSize(data)" type="primary" link :loading="data.loadingDirSize">size</el-button>]
-                                </span>
-
-                                <el-popover placement="top-start" :title="`${data.path}-文件详情`" :width="520" trigger="click" @show="showFileStat(data)">
-                                    <template #reference>
-                                        <span style="color: #67c23a; font-weight: bold">
-                                            [<el-button @click="showFileStat(data)" type="primary" link :loading="data.loadingStat">stat</el-button>]
-                                        </span>
-                                    </template>
-                                    <el-input :input-style="{ color: 'black' }" disabled autosize v-model="data.stat" type="textarea" />
-                                </el-popover>
-                            </span>
-                        </span>
-                    </template>
-                </el-tree>
-            </div>
-        </el-dialog>
-
-        <el-dialog
-            :destroy-on-close="true"
-            title="新建文件"
-            v-model="createFileDialog.visible"
-            :before-close="closeCreateFileDialog"
-            :close-on-click-modal="false"
-            top="5vh"
-            width="400px"
-        >
-            <div>
-                <el-form-item prop="name" label="名称:">
-                    <el-input v-model.trim="createFileDialog.name" placeholder="请输入名称" auto-complete="off"></el-input>
-                </el-form-item>
-                <el-form-item prop="type" label="类型:">
-                    <el-radio-group v-model="createFileDialog.type">
-                        <el-radio label="d" size="small">文件夹</el-radio>
-                        <el-radio label="-" size="small">文件</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-            </div>
-
-            <template #footer>
-                <div>
-                    <el-button @click="closeCreateFileDialog">关闭</el-button>
-                    <el-button v-auth="'machine:file:write'" type="primary" @click="createFile">确定</el-button>
-                </div>
-            </template>
-        </el-dialog>
-
-        <el-dialog
-            :destroy-on-close="true"
-            :title="fileContent.dialogTitle"
-            v-model="fileContent.contentVisible"
-            :close-on-click-modal="false"
-            top="5vh"
-            width="70%"
-        >
-            <div>
-                <monaco-editor :can-change-mode="true" v-model="fileContent.content" :language="fileContent.type" />
-            </div>
-
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="fileContent.contentVisible = false">关 闭</el-button>
-                    <el-button v-auth="'machine:file:write'" type="primary" @click="updateContent">保 存</el-button>
-                </div>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, toRefs, reactive, watch } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { machineApi } from './api';
-
-import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
-import { getSession } from '@/common/utils/storage';
-import { FileTypeEnum } from './enums';
-import config from '@/common/config';
-import { isTrue } from '@/common/assert';
-
-const props = defineProps({
-    visible: { type: Boolean },
-    machineId: { type: Number },
-    title: { type: String },
-});
-
-const emit = defineEmits(['update:visible', 'cancel', 'update:machineId']);
-
-const treeProps = {
-    label: 'name',
-    children: 'zones',
-    isLeaf: 'leaf',
-};
-
-const addFile = machineApi.addConf;
-const delFile = machineApi.delConf;
-const updateFileContent = machineApi.updateFileContent;
-const files = machineApi.files;
-const fileTree: any = ref(null);
-const token = getSession('token');
-
-const folderType = 'd';
-const fileType = '-';
-
-const state = reactive({
-    dialogVisible: false,
-    query: {
-        id: 0,
-        pageNum: 1,
-        pageSize: 8,
-    },
-    loading: false,
-    form: {
-        id: null,
-        type: null,
-        name: '',
-        remark: '',
-    },
-    total: 0,
-    fileTable: [] as any,
-    btnLoading: false,
-    fileContent: {
-        fileId: 0,
-        content: '',
-        contentVisible: false,
-        dialogTitle: '',
-        path: '',
-        type: 'shell',
-    },
-    tree: {
-        title: '',
-        visible: false,
-        folder: { id: 0 },
-        node: {
-            childNodes: [],
-        },
-        resolve: {},
-    },
-    dataObj: {
-        name: '',
-        path: '',
-        type: '',
-    },
-    progressNum: 0,
-    uploadProgressShow: false,
-    createFileDialog: {
-        visible: false,
-        name: '',
-        type: folderType,
-        node: null as any,
-    },
-    file: null as any,
-});
-
-const { dialogVisible, loading, query, total, fileTable, fileContent, tree, progressNum, uploadProgressShow, createFileDialog } = toRefs(state);
-
-watch(props, async (newValue) => {
-    state.dialogVisible = newValue.visible;
-    if (newValue.machineId && newValue.visible) {
-        await getFiles();
-    }
-});
-
-const getFiles = async () => {
-    try {
-        state.loading = true;
-        state.query.id = props.machineId as any;
-        const res = await files.request(state.query);
-        state.fileTable = res.list || [];
-        state.total = res.total;
-    } finally {
-        state.loading = false;
-    }
-};
-
-const handlePageChange = (curPage: number) => {
-    state.query.pageNum = curPage;
-    getFiles();
-};
-
-const add = () => {
-    // 往数组头部添加元素
-    state.fileTable = [{}].concat(state.fileTable);
-};
-
-const addFiles = async (row: any) => {
-    row.machineId = props.machineId;
-    await addFile.request(row);
-    ElMessage.success('添加成功');
-    getFiles();
-};
-
-const deleteRow = (idx: any, row: any) => {
-    if (row.id) {
-        ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning',
-        }).then(() => {
-            // 删除配置文件
-            delFile
-                .request({
-                    machineId: props.machineId,
-                    id: row.id,
-                })
-                .then(() => {
-                    getFiles();
-                });
-        });
-    } else {
-        state.fileTable.splice(idx, 1);
-    }
-};
-
-const getConf = (row: any) => {
-    if (row.type == 1) {
-        state.tree.folder = row;
-        state.tree.title = row.name;
-        loadNode(state.tree.node, state.tree.resolve);
-        state.tree.visible = true;
-        return;
-    }
-    getFileContent(row.id, row.path);
-};
-
-const getFileContent = async (fileId: number, path: string) => {
-    const res = await machineApi.fileContent.request({
-        fileId,
-        path,
-        machineId: props.machineId,
-    });
-    state.fileContent.content = res;
-    state.fileContent.fileId = fileId;
-    state.fileContent.dialogTitle = path;
-    state.fileContent.path = path;
-    state.fileContent.type = getFileType(path);
-    state.fileContent.contentVisible = true;
-};
-
-const getFileType = (path: string) => {
-    if (path.endsWith('.sh')) {
-        return 'shell';
-    }
-    if (path.endsWith('js')) {
-        return 'javascript';
-    }
-    if (path.endsWith('json')) {
-        return 'json';
-    }
-    if (path.endsWith('Dockerfile')) {
-        return 'dockerfile';
-    }
-    if (path.endsWith('nginx.conf')) {
-        return 'shell';
-    }
-    if (path.endsWith('sql')) {
-        return 'sql';
-    }
-    if (path.endsWith('yaml') || path.endsWith('yml')) {
-        return 'yaml';
-    }
-    if (path.endsWith('xml') || path.endsWith('html')) {
-        return 'html';
-    }
-    return 'text';
-};
-
-const updateContent = async () => {
-    await updateFileContent.request({
-        content: state.fileContent.content,
-        id: state.fileContent.fileId,
-        path: state.fileContent.path,
-        machineId: props.machineId,
-    });
-    ElMessage.success('修改成功');
-    state.fileContent.contentVisible = false;
-    state.fileContent.content = '';
-};
-
-/**
- * 关闭取消按钮触发的事件
- */
-const handleClose = () => {
-    emit('update:visible', false);
-    emit('update:machineId', null);
-    emit('cancel');
-    state.fileTable = [];
-    state.tree.folder = { id: 0 };
-};
-
-/**
- * 加载文件树节点
- * @param {Object} node
- * @param {Object} resolve
- */
-const loadNode = async (node: any, resolve: any) => {
-    if (typeof resolve !== 'function') {
-        return;
-    }
-
-    const folder: any = state.tree.folder;
-    if (node.level === 0) {
-        state.tree.node = node;
-        state.tree.resolve = resolve;
-
-        // let folder: any = this.tree.folder
-        const path = folder ? folder.path : '/';
-        return resolve([
-            {
-                name: path,
-                type: folderType,
-                path: path,
-            },
-        ]);
-    }
-
-    let path;
-    const data = node.data;
-    // 只有在第一级节点时，name==path，即上述level==0时设置的
-    if (!data || data.name == data.path) {
-        path = folder.path;
-    } else {
-        path = data.path;
-    }
-
-    const res = await machineApi.lsFile.request({
-        fileId: folder.id,
-        machineId: props.machineId,
-        path,
-    });
-    for (const file of res) {
-        const type = file.type;
-        if (type == fileType) {
-            file.leaf = true;
-        }
-    }
-    return resolve(res);
-};
-
-const getDirSize = async (data: any) => {
-    try {
-        data.loadingDirSize = true;
-        const res = await machineApi.dirSize.request({
-            machineId: props.machineId,
-            fileId: state.tree.folder.id,
-            path: data.path,
-        });
-        data.dirSize = res;
-    } finally {
-        data.loadingDirSize = false;
-    }
-};
-
-const showFileStat = async (data: any) => {
-    try {
-        if (data.stat) {
-            return;
-        }
-        data.loadingStat = true;
-        const res = await machineApi.fileStat.request({
-            machineId: props.machineId,
-            fileId: state.tree.folder.id,
-            path: data.path,
-        });
-        data.stat = res;
-    } finally {
-        data.loadingStat = false;
-    }
-};
-
-const showCreateFileDialog = (node: any) => {
-    isTrue(node.expanded, '请先点击展开该节点后再创建');
-    state.createFileDialog.node = node;
-    state.createFileDialog.visible = true;
-};
-
-const createFile = async () => {
-    const node = state.createFileDialog.node;
-    const name = state.createFileDialog.name;
-    const type = state.createFileDialog.type;
-    const path = node.data.path + '/' + name;
-    await machineApi.createFile.request({
-        machineId: props.machineId,
-        id: state.tree.folder.id,
-        path,
-        type,
-    });
-    fileTree.value.append({ name: name, path: path, type: type, leaf: type === fileType, size: 0 }, node);
-    closeCreateFileDialog();
-};
-
-const closeCreateFileDialog = () => {
-    state.createFileDialog.visible = false;
-    state.createFileDialog.node = null;
-    state.createFileDialog.name = '';
-    state.createFileDialog.type = folderType;
-};
-
-const deleteFile = (node: any, data: any) => {
-    const file = data.path;
-    ElMessageBox.confirm(`此操作将删除 [${file}], 是否继续?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(() => {
-            machineApi.rmFile
-                .request({
-                    fileId: state.tree.folder.id,
-                    path: file,
-                    machineId: props.machineId,
-                })
-                .then(() => {
-                    ElMessage.success('删除成功');
-                    fileTree.value.remove(node);
-                });
-        })
-        .catch(() => {
-            // skip
-        });
-};
-
-const downloadFile = (node: any, data: any) => {
-    const a = document.createElement('a');
-    a.setAttribute('href', `${config.baseApiUrl}/machines/${props.machineId}/files/${state.tree.folder.id}/read?type=1&path=${data.path}&token=${token}`);
-    a.click();
-};
-
-const onUploadProgress = (progressEvent: any) => {
-    state.uploadProgressShow = true;
-    let complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
-    state.progressNum = complete;
-};
-
-const getUploadFile = (content: any) => {
-    const params = new FormData();
-    params.append('file', content.file);
-    params.append('path', state.dataObj.path);
-    params.append('machineId', props.machineId as any);
-    params.append('fileId', state.tree.folder.id as any);
-    params.append('token', token);
-    machineApi.uploadFile
-        .request(params, {
-            url: `${config.baseApiUrl}/machines/${props.machineId}/files/${state.tree.folder.id}/upload?token=${token}`,
-            headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryF1uyUD0tWdqmJqpl' },
-            onUploadProgress: onUploadProgress,
-            baseURL: '',
-            timeout: 60 * 60 * 1000,
-        })
-        .then(() => {
-            ElMessage.success('上传成功');
-            setTimeout(() => {
-                state.uploadProgressShow = false;
-            }, 3000);
-        })
-        .catch(() => {
-            state.uploadProgressShow = false;
-        });
-};
-
-const uploadSuccess = (res: any) => {
-    if (res.code !== 200) {
-        ElMessage.error(res.msg);
-    }
-};
-
-const beforeUpload = (file: File) => {
-    state.file = file;
-};
-const getFilePath = (data: object, visible: boolean) => {
-    if (visible) {
-        state.dataObj = data as any;
-    }
-};
-const dontOperate = (data: any) => {
-    const path = data.path;
-    const ls = ['/', '//', '/usr', '/usr/', '/usr/bin', '/opt', '/run', '/etc', '/proc', '/var', '/mnt', '/boot', '/dev', '/home', '/media', '/root'];
-    return ls.indexOf(path) != -1;
-};
-
-/**
- * 格式化文件大小
- * @param {*} value
- */
-const formatFileSize = (size: any) => {
-    const value = Number(size);
-    if (size && !isNaN(value)) {
-        const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
-        let index = 0;
-        let k = value;
-        if (value >= 1024) {
-            while (k > 1024) {
-                k = k / 1024;
-                index++;
-            }
-        }
-        return `${k.toFixed(2)}${units[index]}`;
-    }
-    return '-';
-};
-</script>
-<style lang="scss"></style>

mayfly_go_web/src/views/ops/machine/MachineList.vue

@@ -54,7 +54,10 @@
 
             <template #action="{ data }">
                 <span v-auth="'machine:terminal'">
-                    <el-button :disabled="data.status == -1" type="primary" @click="showTerminal(data)" link>终端</el-button>
+                    <el-tooltip effect="customized" content="按住ctrl则为新标签打开" placement="top">
+                        <el-button :disabled="data.status == -1" type="primary" @click="showTerminal(data, $event)" link>终端</el-button>
+                    </el-tooltip>
+
                     <el-divider direction="vertical" border-style="dashed" />
                 </span>
 
@@ -126,6 +129,16 @@
             </el-descriptions>
         </el-dialog>
 
+        <terminal-dialog ref="terminalDialogRef" :visibleMinimize="true">
+            <template #headerTitle="{ terminalInfo }">
+                {{ `${(terminalInfo.terminalId + '').slice(-2)}` }}
+                <el-divider direction="vertical" />
+                {{ `${terminalInfo.meta.username}@${terminalInfo.meta.ip}:${terminalInfo.meta.port}` }}
+                <el-divider direction="vertical" />
+                {{ terminalInfo.meta.name }}
+            </template>
+        </terminal-dialog>
+
         <machine-edit
             :title="machineEditDialog.title"
             v-model:visible="machineEditDialog.visible"
@@ -137,7 +150,7 @@
 
         <script-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible" v-model:machineId="serviceDialog.machineId" />
 
-        <file-manage :title="fileDialog.title" v-model:visible="fileDialog.visible" v-model:machineId="fileDialog.machineId" />
+        <file-conf-list :title="fileDialog.title" v-model:visible="fileDialog.visible" v-model:machineId="fileDialog.machineId" />
 
         <machine-stats v-model:visible="machineStatsDialog.visible" :machineId="machineStatsDialog.machineId" :title="machineStatsDialog.title"></machine-stats>
 
@@ -146,10 +159,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRefs, reactive, onMounted, defineAsyncComponent } from 'vue';
+import { ref, toRefs, reactive, onMounted, defineAsyncComponent, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { machineApi } from './api';
+import { machineApi, getMachineTerminalSocketUrl } from './api';
 import { dateFormat } from '@/common/utils/date';
 import TagInfo from '../component/TagInfo.vue';
 import PageTable from '@/components/pagetable/PageTable.vue';
@@ -157,15 +170,17 @@ import { TableColumn, TableQuery } from '@/components/pagetable';
 import { hasPerms } from '@/components/auth/auth';
 
 // 组件
+const TerminalDialog = defineAsyncComponent(() => import('@/components/terminal/TerminalDialog.vue'));
 const MachineEdit = defineAsyncComponent(() => import('./MachineEdit.vue'));
 const ScriptManage = defineAsyncComponent(() => import('./ScriptManage.vue'));
-const FileManage = defineAsyncComponent(() => import('./FileManage.vue'));
+const FileConfList = defineAsyncComponent(() => import('./file/FileConfList.vue'));
 const MachineStats = defineAsyncComponent(() => import('./MachineStats.vue'));
 const MachineRec = defineAsyncComponent(() => import('./MachineRec.vue'));
 const ProcessList = defineAsyncComponent(() => import('./ProcessList.vue'));
 
 const router = useRouter();
 const pageTableRef: any = ref(null);
+const terminalDialogRef: any = ref(null);
 
 const perms = {
     addMachine: 'machine:add',
@@ -180,12 +195,13 @@ const queryConfig = [TableQuery.slot('tagPath', '标签', 'tagPathSelect'), Tabl
 const columns = ref([
     TableColumn.new('tagPath', '标签路径').isSlot().setAddWidth(20),
     TableColumn.new('name', '名称'),
-    TableColumn.new('ipPort', 'ip:port').isSlot().setAddWidth(35),
+    TableColumn.new('ipPort', 'ip:port').isSlot().setAddWidth(45),
     TableColumn.new('username', '用户名'),
     TableColumn.new('status', '状态').isSlot().setMinWidth(85),
     TableColumn.new('remark', '备注'),
     TableColumn.new('action', '操作').isSlot().setMinWidth(238).fixedRight().alignCenter(),
 ]);
+
 // 该用户拥有的的操作列按钮权限，使用v-if进行判断，v-auth对el-dropdown-item无效
 const actionBtns = hasPerms([perms.updateMachine, perms.closeCli]);
 
@@ -275,15 +291,28 @@ const handleCommand = (commond: any) => {
     }
 };
 
-const showTerminal = (row: any) => {
+const showTerminal = (row: any, event: PointerEvent) => {
-    const { href } = router.resolve({
+    // 按住ctrl点击，则新建标签页打开, metaKey对应mac command键
-        path: `/machine/terminal`,
+    if (event.ctrlKey || event.metaKey) {
-        query: {
+        const { href } = router.resolve({
-            id: row.id,
+            path: `/machine/terminal`,
-            name: row.name,
+            query: {
-        },
+                id: row.id,
+                name: row.name,
+            },
+        });
+        window.open(href, '_blank');
+        return;
+    }
+
+    const terminalId = Date.now();
+    terminalDialogRef.value.open({
+        terminalId,
+        socketUrl: getMachineTerminalSocketUrl(row.id),
+        minTitle: `${row.name} [${(terminalId + '').slice(-2)}]`, // 截取terminalId最后两位区分多个terminal
+        minDesc: `${row.username}@${row.ip}:${row.port} (${row.name})`,
+        meta: row,
     });
-    window.open(href, '_blank');
 };
 
 const closeCli = async (row: any) => {

mayfly_go_web/src/views/ops/machine/MachineRec.vue

@@ -1,6 +1,14 @@
 <template>
     <div id="terminalRecDialog">
-        <el-dialog :title="title" v-model="dialogVisible" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true" width="70%">
+        <el-dialog
+            :title="title"
+            v-if="dialogVisible"
+            v-model="dialogVisible"
+            :before-close="handleClose"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+            width="70%"
+        >
             <div class="toolbar">
                 <el-select @change="getUsers" v-model="operateDate" placeholder="操作日期" filterable>
                     <el-option v-for="item in operateDates" :key="item" :label="item" :value="item"> </el-option>

mayfly_go_web/src/views/ops/machine/ProcessList.vue

@@ -85,7 +85,7 @@
 
                 <el-table-column label="操作">
                     <template #default="scope">
-                        <el-popconfirm title="确定终止该进程?" @confirm="confirmKillProcess(scope.row.pid)">
+                        <el-popconfirm title="确定终止该进程?" @confirm="confirmKillProcess(scope.row.pid)" width="160">
                             <template #reference>
                                 <el-button v-auth="'machine:killprocess'" type="danger" icon="delete" size="small" plain>终止</el-button>
                             </template>

mayfly_go_web/src/views/ops/machine/ScriptEdit.vue

@@ -9,16 +9,16 @@
             :destroy-on-close="true"
             width="900px"
         >
-            <el-form :model="form" ref="scriptForm" label-width="auto">
+            <el-form :model="form" :rules="rules" ref="scriptForm" label-width="auto">
-                <el-form-item prop="method" label="名称">
+                <el-form-item prop="name" label="名称" required>
                     <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                 </el-form-item>
 
-                <el-form-item prop="description" label="描述">
+                <el-form-item prop="description" label="描述" required>
                     <el-input v-model="form.description" placeholder="请输入描述"></el-input>
                 </el-form-item>
 
-                <el-form-item prop="type" label="类型">
+                <el-form-item prop="type" label="类型" required>
                     <el-select v-model="form.type" default-first-option style="width: 100%" placeholder="请选择类型">
                         <el-option v-for="item in ScriptResultEnum" :key="item.value" :label="item.label" :value="item.value"></el-option>
                     </el-select>
@@ -59,7 +59,11 @@
                     </el-row>
                 </el-form-item>
 
-                <monaco-editor v-model="form.script" language="shell" height="300px" />
+                <el-form-item required prop="script" class="100w">
+                    <div style="width: 100%">
+                        <monaco-editor v-model="form.script" language="shell" height="300px" />
+                    </div>
+                </el-form-item>
             </el-form>
 
             <template #footer>
@@ -100,6 +104,37 @@ const props = defineProps({
 
 const emit = defineEmits(['update:visible', 'cancel', 'submitSuccess']);
 
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入名称',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    description: [
+        {
+            required: true,
+            message: '请输入描述',
+            trigger: ['blur', 'change'],
+        },
+    ],
+    type: [
+        {
+            required: true,
+            message: '请选择类型',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    script: [
+        {
+            required: true,
+            message: '请输入脚本',
+            trigger: ['blur', 'change'],
+        },
+    ],
+};
+
 const { isCommon, machineId } = toRefs(props);
 const scriptForm: any = ref(null);
 
@@ -147,12 +182,8 @@ const onDeleteParam = (idx: number) => {
 
 const btnOk = () => {
     state.form.machineId = isCommon.value ? 9999999 : (machineId?.value as any);
-    console.log('machineid:', machineId);
     scriptForm.value.validate((valid: any) => {
         if (valid) {
-            notEmpty(state.form.name, '名称不能为空');
-            notEmpty(state.form.description, '描述不能为空');
-            notEmpty(state.form.script, '内容不能为空');
             if (state.params) {
                 state.form.params = JSON.stringify(state.params);
             }

mayfly_go_web/src/views/ops/machine/ScriptManage.vue

@@ -89,8 +89,10 @@
             :close-on-click-modal="false"
             :modal="false"
             @close="closeTermnial"
+            draggable
+            append-to-body
         >
-            <ssh-terminal ref="terminal" :cmd="terminalDialog.cmd" :machineId="terminalDialog.machineId" height="560px" />
+            <TerminalBody ref="terminal" :cmd="terminalDialog.cmd" :socket-url="getMachineTerminalSocketUrl(terminalDialog.machineId)" height="560px" />
         </el-dialog>
 
         <script-edit
@@ -107,8 +109,8 @@
 <script lang="ts" setup>
 import { ref, toRefs, reactive, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import SshTerminal from './SshTerminal.vue';
+import TerminalBody from '@/components/terminal/TerminalBody.vue';
-import { machineApi } from './api';
+import { getMachineTerminalSocketUrl, machineApi } from './api';
 import { ScriptResultEnum, ScriptTypeEnum } from './enums';
 import ScriptEdit from './ScriptEdit.vue';
 import PageTable from '@/components/pagetable/PageTable.vue';
@@ -313,4 +315,4 @@ const handleClose = () => {
     state.scriptParamsDialog.paramsFormItem = [];
 };
 </script>
-<style lang="sass"></style>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/machine/SshTerminal.vue

@@ -1,179 +0,0 @@
-<template>
-    <div :style="{ height: props.height }" id="xterm" class="xterm" />
-</template>
-
-<script lang="ts" setup>
-import 'xterm/css/xterm.css';
-import { Terminal } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
-import { getSession } from '@/common/utils/storage';
-import config from '@/common/config';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '@/store/themeConfig';
-import { nextTick, reactive, onMounted, onBeforeUnmount } from 'vue';
-
-const props = defineProps({
-    machineId: { type: Number },
-    cmd: { type: String },
-    height: { type: [String, Number] },
-});
-
-const { themeConfig } = storeToRefs(useThemeConfig());
-const state = reactive({
-    cmd: '',
-    term: null as any,
-    socket: null as any,
-});
-
-const resize = 1;
-const data = 2;
-const ping = 3;
-
-onMounted(() => {
-    state.cmd = props.cmd as any;
-
-    nextTick(() => {
-        initXterm();
-        initSocket();
-    });
-});
-
-onBeforeUnmount(() => {
-    closeAll();
-});
-
-function initXterm() {
-    const term: any = new Terminal({
-        fontSize: themeConfig.value.terminalFontSize || 15,
-        fontWeight: themeConfig.value.terminalFontWeight || 'normal',
-        fontFamily: 'JetBrainsMono, monaco, Consolas, Lucida Console, monospace',
-        cursorBlink: true,
-        disableStdin: false,
-        theme: {
-            foreground: themeConfig.value.terminalForeground || '#7e9192', //字体
-            background: themeConfig.value.terminalBackground || '#002833', //背景色
-            cursor: themeConfig.value.terminalCursor || '#268F81', //设置光标
-            // cursorAccent: "red",  // 光标停止颜色
-        } as any,
-    });
-    const fitAddon = new FitAddon();
-    term.loadAddon(fitAddon);
-    term.open(document.getElementById('xterm'));
-    fitAddon.fit();
-    term.focus();
-    state.term = term;
-
-    // 监听窗口resize
-    window.addEventListener('resize', () => {
-        try {
-            // 窗口大小改变时，触发xterm的resize方法使自适应
-            fitAddon.fit();
-            if (state.term) {
-                state.term.focus();
-                send({
-                    type: resize,
-                    Cols: parseInt(state.term.cols),
-                    Rows: parseInt(state.term.rows),
-                });
-            }
-        } catch (e) {
-            console.log(e);
-        }
-    });
-
-    // / **
-    //     *添加事件监听器，用于按下键时的事件。事件值包含
-    //     *将在data事件以及DOM事件中发送的字符串
-    //     *触发了它。
-    //     * @返回一个IDisposable停止监听。
-    //  * /
-    //   / ** 更新：xterm 4.x（新增）
-    //  *为数据事件触发时添加事件侦听器。发生这种情况
-    //  *用户输入或粘贴到终端时的示例。事件值
-    //  *是`string`结果的结果，在典型的设置中，应该通过
-    //  *到支持pty。
-    //  * @返回一个IDisposable停止监听。
-    //  * /
-    // 支持输入与粘贴方法
-    term.onData((key: any) => {
-        sendCmd(key);
-    });
-}
-
-let pingInterval: any;
-function initSocket() {
-    state.socket = new WebSocket(
-        `${config.baseWsUrl}/machines/${props.machineId}/terminal?token=${getSession('token')}&cols=${state.term.cols}&rows=${state.term.rows}`
-    );
-
-    // 监听socket连接
-    state.socket.onopen = () => {
-        // 如果有初始要执行的命令，则发送执行命令
-        if (state.cmd) {
-            sendCmd(state.cmd + ' \r');
-        }
-        // 开启心跳
-        pingInterval = setInterval(() => {
-            send({ type: ping, msg: 'ping' });
-        }, 8000);
-    };
-
-    // 监听socket错误信息
-    state.socket.onerror = (e: any) => {
-        console.log('连接错误', e);
-    };
-
-    state.socket.onclose = () => {
-        if (state.term) {
-            state.term.writeln('\r\n\x1b[31m提示: 连接已关闭...');
-        }
-        if (pingInterval) {
-            clearInterval(pingInterval);
-        }
-    };
-
-    // 发送socket消息
-    state.socket.onsend = send;
-
-    // 监听socket消息
-    state.socket.onmessage = getMessage;
-}
-
-function getMessage(msg: any) {
-    // msg.data是真正后端返回的数据
-    state.term.write(msg.data);
-}
-
-function send(msg: any) {
-    state.socket.send(JSON.stringify(msg));
-}
-
-function sendCmd(key: any) {
-    send({
-        type: data,
-        msg: key,
-    });
-}
-
-function close() {
-    if (state.socket) {
-        state.socket.close();
-        console.log('socket关闭');
-    }
-}
-
-function closeAll() {
-    close();
-    if (state.term) {
-        state.term.dispose();
-        state.term = null;
-    }
-}
-</script>
-<style lang="scss">
-#xterm {
-    .xterm-viewport {
-        overflow-y: hidden;
-    }
-}
-</style>

mayfly_go_web/src/views/ops/machine/SshTerminalPage.vue

@@ -1,25 +1,18 @@
 <template>
-    <div>
+    <div class="terminal-wrapper">
-        <ssh-terminal ref="terminal" :machineId="machineId" :height="height + 'px'" />
+        <TerminalBody :socket-url="getMachineTerminalSocketUrl(route.query.id)" />
     </div>
 </template>
 
 <script lang="ts" setup>
-import SshTerminal from './SshTerminal.vue';
-import { reactive, toRefs, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import TerminalBody from '@/components/terminal/TerminalBody.vue';
+import { getMachineTerminalSocketUrl } from './api';
 
 const route = useRoute();
-const state = reactive({
-    machineId: 0,
-    height: 0,
-});
-
-const { machineId, height } = toRefs(state);
-
-onMounted(() => {
-    state.height = window.innerHeight + 5;
-    state.machineId = Number.parseInt(route.query.id as string);
-});
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.terminal-wrapper {
+    height: calc(100vh);
+}
+</style>

mayfly_go_web/src/views/ops/machine/api.ts

@@ -1,4 +1,6 @@
 import Api from '@/common/Api';
+import config from '@/common/config';
+import { getSession } from '@/common/utils/storage';
 
 export const machineApi = {
     // 获取权限列表
@@ -27,7 +29,10 @@ export const machineApi = {
     lsFile: Api.newGet('/machines/{machineId}/files/{fileId}/read-dir'),
     dirSize: Api.newGet('/machines/{machineId}/files/{fileId}/dir-size'),
     fileStat: Api.newGet('/machines/{machineId}/files/{fileId}/file-stat'),
-    rmFile: Api.newDelete('/machines/{machineId}/files/{fileId}/remove'),
+    rmFile: Api.newPost('/machines/{machineId}/files/{fileId}/remove'),
+    cpFile: Api.newPost('/machines/{machineId}/files/{fileId}/cp'),
+    renameFile: Api.newPost('/machines/{machineId}/files/{fileId}/rename'),
+    mvFile: Api.newPost('/machines/{machineId}/files/{fileId}/mv'),
     uploadFile: Api.newPost('/machines/{machineId}/files/{fileId}/upload?token={token}'),
     fileContent: Api.newGet('/machines/{machineId}/files/{fileId}/read'),
     createFile: Api.newPost('/machines/{machineId}/files/{id}/create-file'),
@@ -56,3 +61,7 @@ export const cronJobApi = {
     delete: Api.newDelete('/machine-cronjobs/{id}'),
     execList: Api.newGet('/machine-cronjobs/execs'),
 };
+
+export function getMachineTerminalSocketUrl(machineId: any) {
+    return `${config.baseWsUrl}/machines/${machineId}/terminal?token=${getSession('token')}`;
+}

mayfly_go_web/src/views/ops/machine/file/FileConfList.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="file-manage">
+        <el-dialog v-if="dialogVisible" :title="title" v-model="dialogVisible" :show-close="true" :before-close="handleClose" width="50%">
+            <el-table :data="fileTable" stripe style="width: 100%" v-loading="loading">
+                <el-table-column prop="name" label="名称" min-width="100px">
+                    <template #header>
+                        <el-button class="ml0" type="primary" circle size="small" icon="Plus" @click="add()"> </el-button>
+                        <span class="ml10">名称</span>
+                    </template>
+                    <template #default="scope">
+                        <el-input v-model="scope.row.name" :disabled="scope.row.id != null" clearable> </el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="类型" width="130px">
+                    <template #default="scope">
+                        <el-select :disabled="scope.row.id != null" v-model="scope.row.type" style="width: 100px" placeholder="请选择">
+                            <el-option v-for="item in FileTypeEnum as any" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="path" label="路径" min-width="150px" show-overflow-tooltip>
+                    <template #default="scope">
+                        <el-input v-model="scope.row.path" :disabled="scope.row.id != null" clearable> </el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" min-wdith="120px">
+                    <template #default="scope">
+                        <el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" icon="success-filled" plain></el-button>
+                        <el-button v-if="scope.row.id != null" @click="getConf(scope.row)" type="primary" icon="tickets" plain></el-button>
+                        <el-button v-auth="'machine:file:del'" type="danger" @click="deleteRow(scope.$index, scope.row)" icon="delete" plain></el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-row style="margin-top: 10px" type="flex" justify="end">
+                <el-pagination
+                    style="text-align: center"
+                    :total="total"
+                    layout="prev, pager, next, total, jumper"
+                    v-model:current-page="query.pageNum"
+                    :page-size="query.pageSize"
+                    @current-change="handlePageChange"
+                >
+                </el-pagination>
+            </el-row>
+
+            <el-dialog destroy-on-close :title="fileDialog.title" v-model="fileDialog.visible" :close-on-click-modal="false" width="70%">
+                <machine-file :title="fileDialog.title" :machine-id="machineId" :file-id="fileDialog.fileId" :path="fileDialog.path" />
+            </el-dialog>
+
+            <machine-file-content
+                :title="fileContent.title"
+                v-model:visible="fileContent.contentVisible"
+                :machine-id="machineId"
+                :file-id="fileContent.fileId"
+                :path="fileContent.path"
+            />
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { machineApi } from '../api';
+import { FileTypeEnum } from '../enums';
+import MachineFile from './MachineFile.vue';
+import MachineFileContent from './MachineFileContent.vue';
+
+const props = defineProps({
+    visible: { type: Boolean },
+    machineId: { type: Number },
+    title: { type: String },
+});
+
+const emit = defineEmits(['update:visible', 'cancel', 'update:machineId']);
+
+const addFile = machineApi.addConf;
+const delFile = machineApi.delConf;
+const files = machineApi.files;
+
+const state = reactive({
+    dialogVisible: false,
+    query: {
+        id: 0,
+        pageNum: 1,
+        pageSize: 8,
+    },
+    loading: false,
+    form: {
+        id: null,
+        type: null,
+        name: '',
+        remark: '',
+    },
+    total: 0,
+    fileTable: [] as any,
+    fileDialog: {
+        visible: false,
+        title: '',
+        fileId: 0,
+        path: '',
+    },
+    fileContent: {
+        title: '',
+        fileId: 0,
+        contentVisible: false,
+        path: '',
+    },
+});
+
+const { dialogVisible, loading, query, total, fileTable, fileDialog, fileContent } = toRefs(state);
+
+watch(props, async (newValue) => {
+    state.dialogVisible = newValue.visible;
+    if (newValue.machineId && newValue.visible) {
+        await getFiles();
+    }
+});
+
+const getFiles = async () => {
+    try {
+        state.loading = true;
+        state.query.id = props.machineId as any;
+        const res = await files.request(state.query);
+        state.fileTable = res.list || [];
+        state.total = res.total;
+    } finally {
+        state.loading = false;
+    }
+};
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    getFiles();
+};
+
+const add = () => {
+    // 往数组头部添加元素
+    state.fileTable = [{}].concat(state.fileTable);
+};
+
+const addFiles = async (row: any) => {
+    row.machineId = props.machineId;
+    await addFile.request(row);
+    ElMessage.success('添加成功');
+    getFiles();
+};
+
+const deleteRow = (idx: any, row: any) => {
+    if (row.id) {
+        ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }).then(() => {
+            // 删除配置文件
+            delFile
+                .request({
+                    machineId: props.machineId,
+                    id: row.id,
+                })
+                .then(() => {
+                    getFiles();
+                });
+        });
+    } else {
+        state.fileTable.splice(idx, 1);
+    }
+};
+
+const getConf = async (row: any) => {
+    if (row.type == 1) {
+        state.fileDialog.fileId = row.id;
+        state.fileDialog.title = row.name;
+        state.fileDialog.path = row.path;
+        state.fileDialog.title = `${props.title} => ${row.path}`;
+        state.fileDialog.visible = true;
+        return;
+    }
+
+    showFileContent(row.id, row.path);
+};
+
+const showFileContent = async (fileId: number, path: string) => {
+    state.fileContent.fileId = fileId;
+    state.fileContent.path = path;
+    state.fileContent.title = `${props.title} => ${path}`;
+    state.fileContent.contentVisible = true;
+};
+
+/**
+ * 关闭取消按钮触发的事件
+ */
+const handleClose = () => {
+    emit('update:visible', false);
+    emit('update:machineId', null);
+    emit('cancel');
+    state.fileTable = [];
+};
+</script>
+<style lang="scss">
+.machine-file-upload-exec {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    text-decoration: none;
+}
+.inline-block {
+    display: inline-block;
+    margin-right: 10px;
+}
+.margin-change {
+    display: inline-block;
+    margin-left: 10px;
+}
+</style>

mayfly_go_web/src/views/ops/machine/file/MachineFile.vue

@@ -0,0 +1,748 @@
+<template>
+    <div class="machine-file">
+        <div>
+            <el-progress v-if="uploadProgressShow" style="width: 90%; margin-left: 20px" :text-inside="true" :stroke-width="20" :percentage="progressNum" />
+
+            <el-row class="mb10">
+                <el-breadcrumb separator-icon="ArrowRight">
+                    <el-breadcrumb-item v-for="path in filePathNav">
+                        <el-link @click="setFiles(path.path)" style="font-weight: bold">{{ path.name }}</el-link>
+                    </el-breadcrumb-item>
+                </el-breadcrumb>
+            </el-row>
+
+            <el-table
+                ref="fileTableRef"
+                @cell-dblclick="cellDbclick"
+                @selection-change="handleSelectionChange"
+                height="65vh"
+                :data="filterFiles"
+                highlight-current-row
+                v-loading="loading"
+            >
+                <el-table-column type="selection" width="30" />
+
+                <el-table-column prop="name" label="名称">
+                    <template #header>
+                        <div class="machine-file-table-header">
+                            <div>
+                                <el-button :disabled="nowPath == basePath" type="primary" circle size="small" icon="Back" @click="back()"> </el-button>
+                                <el-button class="ml5" type="primary" circle size="small" icon="Refresh" @click="refresh()"> </el-button>
+
+                                <!-- 文件&文件夹上传 -->
+                                <el-dropdown class="machine-file-upload-exec" trigger="click" size="small">
+                                    <span>
+                                        <el-button
+                                            v-auth="'machine:file:upload'"
+                                            class="ml5"
+                                            type="primary"
+                                            circle
+                                            size="small"
+                                            icon="Upload"
+                                            title="上传"
+                                        ></el-button>
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item>
+                                                <el-upload
+                                                    :before-upload="beforeUpload"
+                                                    :on-success="uploadSuccess"
+                                                    action=""
+                                                    :http-request="getUploadFile"
+                                                    :headers="{ token }"
+                                                    :show-file-list="false"
+                                                    name="file"
+                                                    class="machine-file-upload-exec"
+                                                >
+                                                    <el-link>文件</el-link>
+                                                </el-upload>
+                                            </el-dropdown-item>
+
+                                            <el-dropdown-item>
+                                                <div>
+                                                    <el-link @click="addFinderToList">文件夹</el-link>
+                                                    <input
+                                                        type="file"
+                                                        id="folderUploadInput"
+                                                        ref="folderUploadRef"
+                                                        webkitdirectory
+                                                        directory
+                                                        @change="getFolder"
+                                                        style="display: none"
+                                                    />
+                                                </div>
+                                            </el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+
+                                <el-button
+                                    :disabled="state.selectionFiles.length == 0"
+                                    v-auth="'machine:file:rm'"
+                                    @click="copyFile(state.selectionFiles)"
+                                    class="ml5"
+                                    type="primary"
+                                    circle
+                                    size="small"
+                                    icon="CopyDocument"
+                                    title="复制"
+                                >
+                                </el-button>
+
+                                <el-button
+                                    :disabled="state.selectionFiles.length == 0"
+                                    v-auth="'machine:file:rm'"
+                                    @click="mvFile(state.selectionFiles)"
+                                    class="ml5"
+                                    type="primary"
+                                    circle
+                                    size="small"
+                                    icon="Rank"
+                                    title="移动"
+                                >
+                                </el-button>
+
+                                <el-button
+                                    v-auth="'machine:file:write'"
+                                    @click="showCreateFileDialog()"
+                                    class="ml5"
+                                    type="primary"
+                                    circle
+                                    size="small"
+                                    icon="FolderAdd"
+                                    title="新建"
+                                >
+                                </el-button>
+
+                                <el-button
+                                    :disabled="state.selectionFiles.length == 0"
+                                    v-auth="'machine:file:rm'"
+                                    @click="deleteFile(state.selectionFiles)"
+                                    class="ml5"
+                                    type="danger"
+                                    circle
+                                    size="small"
+                                    icon="delete"
+                                    title="删除"
+                                >
+                                </el-button>
+
+                                <el-button-group v-if="state.copyOrMvFile.paths.length > 0" size="small" class="ml5">
+                                    <el-tooltip effect="customized" raw-content placement="top">
+                                        <template #content>
+                                            <div v-for="path in state.copyOrMvFile.paths">{{ path }}</div>
+                                        </template>
+
+                                        <el-button @click="pasteFile" type="primary"
+                                            >{{ isCpFile() ? '复制' : '移动' }}粘贴{{ state.copyOrMvFile.paths.length }}</el-button
+                                        >
+                                    </el-tooltip>
+
+                                    <el-button icon="CloseBold" @click="cancelCopy" />
+                                </el-button-group>
+                            </div>
+
+                            <div style="width: 150px">
+                                <el-input v-model="fileNameFilter" size="small" placeholder="名称: 输入可过滤" clearable />
+                            </div>
+                        </div>
+                    </template>
+
+                    <template #default="scope">
+                        <span v-if="scope.row.isFolder">
+                            <SvgIcon :size="15" name="folder" color="#007AFF" />
+                        </span>
+                        <span v-else>
+                            <SvgIcon :size="15" name="document" />
+                        </span>
+
+                        <span class="ml5" style="display: inline-block; width: 300px">
+                            <div v-if="scope.row.nameEdit">
+                                <el-input
+                                    @keyup.enter="fileRename(scope.row)"
+                                    :ref="(el: any) => el?.focus()"
+                                    @blur="filenameBlur(scope.row)"
+                                    v-model="scope.row.name"
+                                />
+                            </div>
+                            <el-link v-else @click="getFile(scope.row)" style="font-weight: bold" :underline="false">{{ scope.row.name }}</el-link>
+                        </span>
+                    </template>
+                </el-table-column>
+
+                <el-table-column prop="size" label="大小" width="100" sortable>
+                    <template #default="scope">
+                        <span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == '-'"> {{ formatFileSize(scope.row.size) }} </span>
+                        <span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == 'd' && scope.row.dirSize"> {{ scope.row.dirSize }} </span>
+                        <span style="color: #67c23a; font-weight: bold" v-if="scope.row.type == 'd' && !scope.row.dirSize">
+                            <el-button @click="getDirSize(scope.row)" type="primary" link :loading="scope.row.loadingDirSize">计算</el-button>
+                        </span>
+                    </template>
+                </el-table-column>
+
+                <el-table-column prop="mode" label="属性" width="110"> </el-table-column>
+                <el-table-column prop="modTime" label="修改时间" width="165" sortable> </el-table-column>
+
+                <el-table-column width="100">
+                    <template #header>
+                        <el-popover placement="top" :width="270" trigger="hover">
+                            <template #reference>
+                                <SvgIcon name="QuestionFilled" :size="18" class="pointer-icon mr10" />
+                            </template>
+                            <div>rename: 双击文件名单元格修改后回车</div>
+                        </el-popover>
+                        操作
+                    </template>
+                    <template #default="scope">
+                        <el-link
+                            @click="downloadFile(scope.row)"
+                            v-if="scope.row.type == '-'"
+                            v-auth="'machine:file:write'"
+                            type="primary"
+                            icon="download"
+                            :underline="false"
+                        ></el-link>
+
+                        <el-link
+                            @click="deleteFile([scope.row])"
+                            v-if="!dontOperate(scope.row)"
+                            v-auth="'machine:file:rm'"
+                            type="danger"
+                            icon="delete"
+                            :underline="false"
+                            class="ml10"
+                        ></el-link>
+
+                        <el-popover placement="top-start" :title="`${scope.row.path}-文件详情`" :width="520" trigger="click" @show="showFileStat(scope.row)">
+                            <template #reference>
+                                <span style="color: #67c23a; font-weight: bold">
+                                    <el-link
+                                        @click="showFileStat(scope.row)"
+                                        icon="InfoFilled"
+                                        :underline="false"
+                                        link
+                                        class="ml10"
+                                        :loading="scope.row.loadingStat"
+                                    ></el-link>
+                                </span>
+                            </template>
+                            <el-input disabled autosize v-model="scope.row.stat" type="textarea" />
+                        </el-popover>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <el-dialog
+            :destroy-on-close="true"
+            title="新建文件"
+            v-model="createFileDialog.visible"
+            :before-close="closeCreateFileDialog"
+            :close-on-click-modal="false"
+            top="5vh"
+            width="400px"
+        >
+            <div>
+                <el-form-item prop="name" label="名称:">
+                    <el-input v-model.trim="createFileDialog.name" placeholder="请输入名称" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item prop="type" label="类型:">
+                    <el-radio-group v-model="createFileDialog.type">
+                        <el-radio label="d">文件夹</el-radio>
+                        <el-radio label="-">文件</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+            </div>
+
+            <template #footer>
+                <div>
+                    <el-button @click="closeCreateFileDialog">关闭</el-button>
+                    <el-button v-auth="'machine:file:write'" type="primary" @click="createFile">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <machine-file-content v-model:visible="fileContent.contentVisible" :machine-id="machineId" :file-id="fileId" :path="fileContent.path" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, reactive, onMounted, computed } from 'vue';
+import { ElMessage, ElMessageBox, ElInput } from 'element-plus';
+import { machineApi } from '../api';
+
+import { getSession } from '@/common/utils/storage';
+import config from '@/common/config';
+import { isTrue } from '@/common/assert';
+import MachineFileContent from './MachineFileContent.vue';
+import { notBlank } from '@/common/assert';
+
+const props = defineProps({
+    machineId: { type: Number },
+    fileId: { type: Number, default: 0 },
+    path: { type: String, default: '' },
+    isFolder: { type: Boolean, default: true },
+});
+
+const token = getSession('token');
+const folderUploadRef: any = ref();
+
+const folderType = 'd';
+const fileType = '-';
+// 路径分隔符
+const pathSep = '/';
+
+const state = reactive({
+    basePath: '', // 基础路径
+    nowPath: '', // 当前路径
+    loading: true,
+    progressNum: 0,
+    uploadProgressShow: false,
+    fileNameFilter: '',
+    files: [] as any,
+    selectionFiles: [] as any,
+    copyOrMvFile: {
+        paths: [] as any,
+        type: 'cp',
+        fromPath: '',
+    },
+    renameFile: {
+        oldname: '',
+    },
+    fileContent: {
+        content: '',
+        contentVisible: false,
+        dialogTitle: '',
+        path: '',
+        type: 'shell',
+    },
+    createFileDialog: {
+        visible: false,
+        name: '',
+        type: folderType,
+        data: null as any,
+    },
+    file: null as any,
+});
+
+const { basePath, nowPath, loading, fileNameFilter, progressNum, uploadProgressShow, fileContent, createFileDialog } = toRefs(state);
+
+onMounted(() => {
+    state.basePath = props.path;
+    setFiles(props.path);
+});
+
+const filterFiles = computed(() =>
+    state.files.filter((data: any) => !state.fileNameFilter || data.name.toLowerCase().includes(state.fileNameFilter.toLowerCase()))
+);
+
+const filePathNav = computed(() => {
+    let basePath = state.basePath;
+    const pathNavs = [
+        {
+            path: basePath,
+            name: basePath,
+        },
+    ];
+    if (basePath == state.nowPath) {
+        return pathNavs;
+    }
+
+    const paths = state.nowPath.split(pathSep).splice(1);
+    let nowPath = '';
+    for (let path of paths) {
+        if (!nowPath) {
+            nowPath = pathSep + path;
+        } else {
+            nowPath = nowPath + pathSep + path;
+        }
+        // 最多只能点击到basePath
+        if (nowPath.length <= basePath.length) {
+            continue;
+        }
+
+        pathNavs.push({
+            name: path,
+            path: nowPath,
+        });
+    }
+
+    return pathNavs;
+});
+
+const handleSelectionChange = (val: any) => {
+    state.selectionFiles = val;
+};
+
+const isCpFile = () => {
+    return state.copyOrMvFile.type == 'cp';
+};
+
+const copyFile = (files: any[]) => {
+    setCopyOrMvFile(files);
+};
+
+const mvFile = (files: any[]) => {
+    setCopyOrMvFile(files, 'mv');
+};
+
+const setCopyOrMvFile = (files: any[], type = 'cp') => {
+    for (let file of files) {
+        const path = file.path;
+        if (!state.copyOrMvFile.paths.includes(path)) {
+            state.copyOrMvFile.paths.push(path);
+        }
+    }
+    state.copyOrMvFile.type = type;
+    state.copyOrMvFile.fromPath = state.nowPath;
+};
+
+const pasteFile = async () => {
+    const cmFile = state.copyOrMvFile;
+    isTrue(state.nowPath != cmFile.fromPath, '同目录下不能粘贴');
+    const api = isCpFile() ? machineApi.cpFile : machineApi.mvFile;
+    try {
+        state.loading = true;
+        await api.request({
+            machineId: props.machineId,
+            fileId: props.fileId,
+            path: cmFile.paths,
+            toPath: state.nowPath,
+        });
+        ElMessage.success('粘贴成功');
+        state.copyOrMvFile.paths = [];
+        refresh();
+    } finally {
+        state.loading = false;
+    }
+};
+
+const cancelCopy = () => {
+    state.copyOrMvFile.paths = [];
+};
+
+const cellDbclick = (row: any, column: any) => {
+    // 双击名称列可修改名称
+    if (column.property == 'name') {
+        state.renameFile.oldname = row.name;
+        row.nameEdit = true;
+    }
+};
+
+const filenameBlur = (row: any) => {
+    const oldname = state.renameFile.oldname;
+    // 如果存在旧名称，则说明未回车修改文件名，则还原旧文件名
+    if (oldname) {
+        row.name = oldname;
+        state.renameFile.oldname = '';
+    }
+    row.nameEdit = false;
+};
+
+const fileRename = async (row: any) => {
+    if (row.name == state.renameFile.oldname) {
+        row.nameEdit = false;
+        return;
+    }
+    notBlank(row.name, '新名称不能为空');
+    try {
+        await machineApi.renameFile.request({
+            machineId: props.machineId,
+            fileId: props.fileId,
+            oldname: state.nowPath + pathSep + state.renameFile.oldname,
+            newname: state.nowPath + pathSep + row.name,
+        });
+        ElMessage.success('重命名成功');
+        // 修改路径上的文件名
+        row.path = state.nowPath + pathSep + row.name;
+        state.renameFile.oldname = '';
+    } catch (e) {
+        row.name = state.renameFile.oldname;
+    }
+    row.nameEdit = false;
+};
+
+const showFileContent = async (path: string) => {
+    state.fileContent.dialogTitle = path;
+    state.fileContent.path = path;
+    state.fileContent.contentVisible = true;
+};
+
+const getFile = async (row: any) => {
+    if (row.type == folderType) {
+        await setFiles(row.path);
+    } else {
+        isTrue(row.size < 1 * 1024 * 1024, '文件太大, 请下载使用');
+        await showFileContent(row.path);
+    }
+};
+
+const setFiles = async (path: string) => {
+    try {
+        if (!path) {
+            path = pathSep;
+        }
+        state.fileNameFilter = '';
+        state.loading = true;
+        state.files = await lsFile(path);
+        state.nowPath = path;
+    } finally {
+        state.loading = false;
+    }
+};
+
+const lsFile = async (path: string) => {
+    const res = await machineApi.lsFile.request({
+        fileId: props.fileId,
+        machineId: props.machineId,
+        path,
+    });
+    for (const file of res) {
+        const type = file.type;
+        if (type == folderType) {
+            file.isFolder = true;
+        } else {
+            file.isFolder = false;
+        }
+    }
+    return res;
+};
+
+const back = () => {
+    setFiles(getParentPath(state.nowPath));
+};
+
+const refresh = async () => {
+    setFiles(state.nowPath);
+};
+
+const getDirSize = async (data: any) => {
+    try {
+        data.loadingDirSize = true;
+        const res = await machineApi.dirSize.request({
+            machineId: props.machineId,
+            fileId: props.fileId,
+            path: data.path,
+        });
+        data.dirSize = res;
+    } finally {
+        data.loadingDirSize = false;
+    }
+};
+
+const showFileStat = async (data: any) => {
+    try {
+        if (data.stat) {
+            return;
+        }
+        data.loadingStat = true;
+        const res = await machineApi.fileStat.request({
+            machineId: props.machineId,
+            fileId: props.fileId,
+            path: data.path,
+        });
+        data.stat = res;
+    } finally {
+        data.loadingStat = false;
+    }
+};
+
+const showCreateFileDialog = () => {
+    state.createFileDialog.data = {};
+    state.createFileDialog.visible = true;
+};
+
+const createFile = async () => {
+    const name = state.createFileDialog.name;
+    const type = state.createFileDialog.type;
+    const path = state.nowPath + pathSep + name;
+    await machineApi.createFile.request({
+        machineId: props.machineId,
+        id: props.fileId,
+        path,
+        type,
+    });
+
+    closeCreateFileDialog();
+    refresh();
+};
+
+const closeCreateFileDialog = () => {
+    state.createFileDialog.visible = false;
+    state.createFileDialog.data = null;
+    state.createFileDialog.name = '';
+    state.createFileDialog.type = folderType;
+};
+
+function getParentPath(filePath: string) {
+    const segments = filePath.split(pathSep);
+    segments.pop(); // 移除最后一个路径段
+    return segments.join(pathSep);
+}
+
+const deleteFile = async (files: any) => {
+    try {
+        await ElMessageBox.confirm(`此操作将删除 ${files.map((x: any) => `[${x.path}]`).join('\n')}, 是否继续?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        state.loading = true;
+        await machineApi.rmFile.request({
+            fileId: props.fileId,
+            path: files.map((x: any) => x.path),
+            machineId: props.machineId,
+        });
+        ElMessage.success('删除成功');
+        refresh();
+    } catch (e) {
+    } finally {
+        state.loading = false;
+    }
+};
+
+const downloadFile = (data: any) => {
+    const a = document.createElement('a');
+    a.setAttribute('href', `${config.baseApiUrl}/machines/${props.machineId}/files/${props.fileId}/read?type=1&path=${data.path}&token=${token}`);
+    a.click();
+};
+
+function addFinderToList() {
+    folderUploadRef.value.click();
+}
+
+function getFolder(e: any) {
+    //e.target.files为文件夹里面的文件
+    // 把文件夹数据放到formData里面，下面的files和paths字段根据接口来定
+    var form = new FormData();
+    form.append('basePath', state.nowPath);
+    for (let file of e.target.files) {
+        form.append('files', file);
+        form.append('paths', file.webkitRelativePath);
+    }
+    try {
+        // 上传操作
+        machineApi.uploadFile
+            .request(form, {
+                url: `${config.baseApiUrl}/machines/${props.machineId}/files/${props.fileId}/upload-folder?token=${token}`,
+                headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryF1uyUD0tWdqmJqpl' },
+                onUploadProgress: onUploadProgress,
+                baseURL: '',
+                timeout: 3 * 60 * 60 * 1000,
+            })
+            .then(() => {
+                ElMessage.success('上传成功');
+                setTimeout(() => {
+                    refresh();
+                    state.uploadProgressShow = false;
+                }, 3000);
+            })
+            .catch(() => {
+                state.uploadProgressShow = false;
+            });
+    } finally {
+        //无论上传成功与否，都把已选择的文件夹清空，否则选择同一文件夹没有反应
+        const folderEle: any = document.getElementById('folderUploadInput');
+        if (folderEle) {
+            folderEle.value = '';
+        }
+    }
+}
+
+const onUploadProgress = (progressEvent: any) => {
+    state.uploadProgressShow = true;
+    let complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+    state.progressNum = complete;
+};
+
+const getUploadFile = (content: any) => {
+    const params = new FormData();
+    const path = state.nowPath;
+    params.append('file', content.file);
+    params.append('path', path);
+    params.append('machineId', props.machineId as any);
+    params.append('fileId', props.fileId as any);
+    params.append('token', token);
+    machineApi.uploadFile
+        .request(params, {
+            url: `${config.baseApiUrl}/machines/${props.machineId}/files/${props.fileId}/upload?token=${token}`,
+            headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryF1uyUD0tWdqmJqpl' },
+            onUploadProgress: onUploadProgress,
+            baseURL: '',
+            timeout: 3 * 60 * 60 * 1000,
+        })
+        .then(() => {
+            ElMessage.success('上传成功');
+            setTimeout(() => {
+                refresh();
+                state.uploadProgressShow = false;
+            }, 3000);
+        })
+        .catch(() => {
+            state.uploadProgressShow = false;
+        });
+};
+
+const uploadSuccess = (res: any) => {
+    if (res.code !== 200) {
+        ElMessage.error(res.msg);
+    }
+};
+
+const beforeUpload = (file: File) => {
+    state.file = file;
+};
+
+const dontOperate = (data: any) => {
+    const path = data.path;
+    const ls = ['/', '//', '/usr', '/usr/', '/usr/bin', '/opt', '/run', '/etc', '/proc', '/var', '/mnt', '/boot', '/dev', '/home', '/media', '/root'];
+    return ls.indexOf(path) != -1;
+};
+
+/**
+ * 格式化文件大小
+ * @param {*} value
+ */
+const formatFileSize = (size: any) => {
+    const value = Number(size);
+    if (size && !isNaN(value)) {
+        const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
+        let index = 0;
+        let k = value;
+        if (value >= 1024) {
+            while (k > 1024) {
+                k = k / 1024;
+                index++;
+            }
+        }
+        return `${k.toFixed(2)}${units[index]}`;
+    }
+    return '-';
+};
+
+defineExpose({ showFileContent });
+</script>
+<style lang="scss">
+.machine-file-upload-exec {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    text-decoration: none;
+}
+.machine-file-table-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    .title-right-fixed {
+        display: flex;
+        align-items: center;
+        font-size: 20px;
+        text-align: end;
+    }
+}
+</style>

mayfly_go_web/src/views/ops/machine/file/MachineFileContent.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="machine-file-content">
+        <el-dialog
+            destroy-on-close
+            :before-close="handleClose"
+            :title="title || path"
+            v-model="dialogVisible"
+            :close-on-click-modal="false"
+            top="5vh"
+            width="65%"
+        >
+            <div>
+                <monaco-editor :can-change-mode="true" v-model="content" :language="fileType" />
+            </div>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="handleClose">关 闭</el-button>
+                    <el-button v-auth="'machine:file:write'" type="primary" @click="updateContent">保 存</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { machineApi } from '../api';
+
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    title: { type: String, default: '' },
+    machineId: { type: Number },
+    fileId: { type: Number, default: 0 },
+    path: { type: String, default: '' },
+});
+
+const emit = defineEmits(['update:visible', 'cancel', 'update:machineId']);
+
+const updateFileContent = machineApi.updateFileContent;
+
+const state = reactive({
+    dialogVisible: false,
+    content: '',
+    fileType: '',
+});
+
+const { dialogVisible, content, fileType } = toRefs(state);
+
+watch(props, async (newValue) => {
+    if (newValue.visible) {
+        await getFileContent();
+    }
+    state.dialogVisible = newValue.visible;
+});
+
+const getFileContent = async () => {
+    const path = props.path;
+    const res = await machineApi.fileContent.request({
+        fileId: props.fileId,
+        path,
+        machineId: props.machineId,
+    });
+    state.fileType = getFileType(path);
+    state.content = res;
+};
+
+const handleClose = () => {
+    state.dialogVisible = false;
+    emit('update:visible', false);
+};
+
+const updateContent = async () => {
+    await updateFileContent.request({
+        content: state.content,
+        id: props.fileId,
+        path: props.path,
+        machineId: props.machineId,
+    });
+    ElMessage.success('修改成功');
+    handleClose();
+    state.content = '';
+};
+
+const getFileType = (path: string) => {
+    if (path.endsWith('.sh')) {
+        return 'shell';
+    }
+    if (path.endsWith('js')) {
+        return 'javascript';
+    }
+    if (path.endsWith('json')) {
+        return 'json';
+    }
+    if (path.endsWith('Dockerfile')) {
+        return 'dockerfile';
+    }
+    if (path.endsWith('nginx.conf')) {
+        return 'shell';
+    }
+    if (path.endsWith('sql')) {
+        return 'sql';
+    }
+    if (path.endsWith('yaml') || path.endsWith('yml')) {
+        return 'yaml';
+    }
+    if (path.endsWith('xml') || path.endsWith('html')) {
+        return 'html';
+    }
+    return 'text';
+};
+</script>
+<style lang="scss"></style>

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

@@ -35,31 +35,31 @@
             </el-col>
 
             <el-col :span="20">
-                <div id="mongo-tab" style="border: 1px solid #eee; margin-top: 1px">
+                <div id="mongo-tab" class="ml5" style="border: 1px solid var(--el-border-color-light, #ebeef5); margin-top: 1px">
                     <el-row v-if="nowColl">
                         <el-descriptions :column="10" size="small" border>
                             <!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
 
                             <el-descriptions-item label="ns" label-align="right">
-                                {{ nowColl.stats.ns }}
+                                {{ nowColl.stats?.ns }}
                             </el-descriptions-item>
                             <el-descriptions-item label="count" label-align="right">
-                                {{ nowColl.stats.count }}
+                                {{ nowColl.stats?.count }}
                             </el-descriptions-item>
                             <el-descriptions-item label="avgObjSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.avgObjSize) }}
+                                {{ formatByteSize(nowColl.stats?.avgObjSize) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="size" label-align="right">
-                                {{ formatByteSize(nowColl.stats.size) }}
+                                {{ formatByteSize(nowColl.stats?.size) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="totalSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.totalSize) }}
+                                {{ formatByteSize(nowColl.stats?.totalSize) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="storageSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.storageSize) }}
+                                {{ formatByteSize(nowColl.stats?.storageSize) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="freeStorageSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.freeStorageSize) }}
+                                {{ formatByteSize(nowColl.stats?.freeStorageSize) }}
                             </el-descriptions-item>
                         </el-descriptions>
                     </el-row>

mayfly_go_web/src/views/ops/redis/DataOperation.vue

@@ -3,7 +3,7 @@
         <el-row>
             <el-col :span="4">
                 <el-row type="flex" justify="space-between">
-                    <el-col :span="24" class="el-scrollbar flex-auto">
+                    <el-col :span="24" class="flex-auto">
                         <tag-tree @node-click="nodeClick" :load="loadNode">
                             <template #prefix="{ data }">
                                 <span v-if="data.type == NodeType.Redis">
@@ -29,8 +29,8 @@
                 </el-row>
             </el-col>
 
-            <el-col v-loading="state.loadingKeyTree" :span="7" class="el-scrollbar flex-auto" style="overflow: auto">
+            <el-col v-loading="state.loadingKeyTree" :span="7">
-                <div>
+                <div class="key-list-vtree">
                     <el-row>
                         <el-col :span="2">
                             <el-input v-model="state.keySeparator" placeholder="分割符" size="small" class="ml5" />
@@ -52,7 +52,7 @@
                     </el-row>
 
                     <el-row class="mb5 mt5">
-                        <el-col :span="20">
+                        <el-col :span="19">
                             <el-button class="ml5" :disabled="!scanParam.id || !scanParam.db" @click="scan(true)" type="success" icon="more" size="small" plain
                                 >加载更多</el-button
                             >
@@ -79,13 +79,19 @@
                                 >flush</el-button
                             >
                         </el-col>
-                        <el-col :span="4">
+                        <el-col :span="5">
-                            <span style="display: inline-block" class="mt5">keys: {{ state.dbsize }}</span>
+                            <span style="display: inline-block" class="mt5">keys:{{ state.dbsize }}</span>
                         </el-col>
                     </el-row>
 
                     <el-tree
-                        :style="{ maxHeight: state.keyTreeHeight, height: state.keyTreeHeight, overflow: 'auto', border: '1px solid #e1f3d8' }"
+                        :style="{
+                            maxHeight: state.keyTreeHeight,
+                            height: state.keyTreeHeight,
+                            overflow: 'auto',
+                            border: '1px solid var(--el-border-color-light, #ebeef5)',
+                            marginLeft: '5px',
+                        }"
                         ref="keyTreeRef"
                         :highlight-current="true"
                         :data="keyTreeData"
@@ -97,43 +103,40 @@
                         @node-click="handleKeyTreeNodeClick"
                         @node-expand="keyTreeNodeExpand"
                         @node-collapse="keyTreeNodeCollapse"
+                        @node-contextmenu="rightClickNode"
                     >
                         <template #default="{ node, data }">
-                            <span class="custom-tree-node key-list-custom-node">
+                            <span class="el-dropdown-link key-list-custom-node" :title="node.label">
-                                <el-dropdown size="small" trigger="contextmenu">
+                                <span v-if="data.type == 1">
-                                    <span class="el-dropdown-link">
+                                    <SvgIcon :size="15" :name="node.expanded ? 'folder-opened' : 'folder'" />
-                                        <span v-if="data.type == 1 && !node.expanded">
+                                </span>
-                                            <SvgIcon :size="15" name="folder" />
+                                <span :class="'ml5 ' + (data.type == 1 ? 'folder-label' : 'key-label')">
-                                        </span>
+                                    {{ node.label }}
-                                        <span v-if="data.type == 1 && node.expanded">
+                                </span>
-                                            <SvgIcon :size="15" name="folder-opened" />
-                                        </span>
-                                        <span v-if="data.type == 1" class="ml5" style="font-weight: bold">
-                                            {{ node.label }}
-                                        </span>
-                                        <span v-if="data.type == 2" class="ml5" style="color: #67c23a">
-                                            {{ node.label }}
-                                        </span>
 
-                                        <span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
+                                <span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
-                                    </span>
-
-                                    <template #dropdown v-if="data.type == 2">
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item @click="showKeyDetail(data.key, true)">
-                                                <el-link type="primary" icon="plus" :underline="false" style="margin-left: 2px">新tab打开</el-link>
-                                            </el-dropdown-item>
-                                            <span v-auth="'redis:data:del'">
-                                                <el-dropdown-item @click="delKey(data.key)">
-                                                    <el-link type="danger" icon="delete" :underline="false" style="margin-left: 2px">删除</el-link>
-                                                </el-dropdown-item>
-                                            </span>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
                             </span>
                         </template>
                     </el-tree>
+
+                    <!-- right context menu -->
+                    <div ref="rightMenuRef" class="key-list-right-menu">
+                        <!-- folder right menu -->
+                        <div v-if="!state.rightClickNode?.isLeaf"></div>
+                        <!-- key right menu -->
+                        <div v-else>
+                            <el-row>
+                                <el-link @click="showKeyDetail(state.rightClickNode.key, true)" type="primary" icon="plus" :underline="false"
+                                    >新tab打开</el-link
+                                >
+                            </el-row>
+                            <el-row class="mt5">
+                                <el-link @click="delKey(state.rightClickNode.key)" v-auth="'redis:data:del'" type="danger" icon="delete" :underline="false"
+                                    >删除</el-link
+                                >
+                            </el-row>
+                        </div>
+                    </div>
                 </div>
             </el-col>
 
@@ -204,6 +207,7 @@ const treeProps = {
 const defaultCount = 250;
 
 const keyTreeRef: any = ref(null);
+const rightMenuRef: any = ref(null);
 
 const state = reactive({
     tags: [],
@@ -217,6 +221,7 @@ const state = reactive({
     keyTreeExpanded: new Set(),
     activeName: '',
     dataTabs: {} as any,
+    rightClickNode: {} as any,
     scanParam: {
         id: null as any,
         mode: '',
@@ -245,7 +250,7 @@ onMounted(async () => {
 });
 
 const setHeight = () => {
-    state.keyTreeHeight = window.innerHeight - 177 + 'px';
+    state.keyTreeHeight = window.innerHeight - 174 + 'px';
 };
 
 /**
@@ -407,6 +412,7 @@ const expandAllKeyNode = (nodes: any) => {
 };
 
 const handleKeyTreeNodeClick = async (data: any) => {
+    hideAllMenus();
     // 目录则不做处理
     if (data.type == 1) {
         return;
@@ -478,6 +484,43 @@ const keyTreeNodeCollapse = (data: any, node: any, component: any) => {
     state.keyTreeExpanded.delete(data.key);
 };
 
+const rightClickNode = (event: any, data: any, node: any) => {
+    hideAllMenus();
+
+    keyTreeRef.value.setCurrentKey(node.key);
+    state.rightClickNode = node;
+
+    // nextTick for dom render
+    nextTick(() => {
+        let top = event.clientY;
+        const menu = rightMenuRef.value;
+        menu.style.display = 'block';
+
+        // position in bottom
+        if (document.body.clientHeight - top < menu.clientHeight) {
+            top -= menu.clientHeight;
+        }
+
+        menu.style.left = `${event.clientX}px`;
+        menu.style.top = `${top}px`;
+
+        document.addEventListener('click', hideAllMenus, { once: true });
+    });
+};
+
+const hideAllMenus = () => {
+    let menus: any = document.querySelectorAll('.key-list-right-menu');
+
+    if (menus.length === 0) {
+        return;
+    }
+
+    state.rightClickNode = null;
+    for (const menu of menus) {
+        menu.style.display = 'none';
+    }
+};
+
 const searchKey = async () => {
     state.scanParam.cursor = {};
     await scan(false);
@@ -596,6 +639,14 @@ const delKey = (key: string) => {
     height: calc(100vh - 250px);
 }
 
+.key-list-vtree .folder-label {
+    font-weight: bold;
+}
+
+.key-list-vtree .key-label {
+    color: #67c23a;
+}
+
 .key-list-vtree .key-list-custom-node {
     width: 100%;
     overflow: hidden;
@@ -604,4 +655,21 @@ const delKey = (key: string) => {
     height: 22px;
     line-height: 22px;
 }
+
+/* right menu style start */
+.key-list-right-menu {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 5px;
+    z-index: 99999;
+    overflow: hidden;
+    border-radius: 3px;
+    border: 2px solid lightgrey;
+    background: #fafafa;
+}
+.dark-mode .key-list-right-menu {
+    background: #263238;
+}
 </style>

mayfly_go_web/src/views/ops/redis/FormatViewer.vue

@@ -93,7 +93,7 @@ defineExpose({ getContent });
 
 /*outline same with text viewer's .el-textarea__inner*/
 .format-viewer-container .text-formated-container {
-    border: 1px solid #dcdfe6;
+    border: 1px solid var(--el-border-color-light, #ebeef5);
     padding: 5px 10px;
     border-radius: 4px;
     clear: both;

mayfly_go_web/src/views/ops/redis/RedisList.vue

@@ -271,7 +271,6 @@ const onShowClusterInfo = async (redis: any) => {
 const search = async () => {
     try {
         pageTableRef.value.loading(true);
-        console.log(state.query);
         const res = await redisApi.redisList.request(state.query);
         state.redisTable = res.list;
         state.total = res.total;

mayfly_go_web/src/views/personal/index.vue

@@ -294,7 +294,7 @@ const getMsgTypeDesc = (type: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '../../theme/mixins/mixins.scss';
+@import '../../theme/mixins/index.scss';
 
 .personal {
     .personal-user {
@@ -359,7 +359,7 @@ const getMsgTypeDesc = (type: number) => {
             font-size: 13px;
 
             &:hover {
-                color: var(--color-primary);
+                color: var(--el-color-primary);
                 cursor: pointer;
             }
         }
@@ -383,7 +383,7 @@ const getMsgTypeDesc = (type: number) => {
                     }
 
                     & a:hover {
-                        color: var(--color-primary);
+                        color: var(--el-color-primary);
                         cursor: pointer;
                     }
                 }
@@ -447,7 +447,7 @@ const getMsgTypeDesc = (type: number) => {
                 left: 0;
                 top: 50%;
                 transform: translateY(-50%);
-                background: var(--color-primary);
+                background: var(--el-color-primary);
             }
         }
 

mayfly_go_web/vite.config.ts

@@ -68,11 +68,11 @@ const viteConfig: UserConfig = {
                             if (atRule.name === 'charset') {
                                 atRule.remove();
                             }
-                        }
+                        },
-                    }
+                    },
-                }
+                },
-            ]
+            ],
-        }
+        },
     },
 };
 

mayfly_go_web/yarn.lock

@@ -601,10 +601,10 @@ asynckit@^0.4.0:
   resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-axios@^1.4.0:
+axios@^1.5.0:
-  version "1.4.0"
+  version "1.5.0"
-  resolved "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
-  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"
@@ -804,10 +804,10 @@ echarts@^5.4.0:
     tslib "2.3.0"
     zrender "5.4.0"
 
-element-plus@^2.3.8:
+element-plus@^2.3.12:
-  version "2.3.8"
+  version "2.3.12"
-  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.8.tgz#46032abe1a712abfb65932f146ee19281312a9cf"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.12.tgz#d3c91d0c701b2b3e67d06a351cb0c42dcc46460e"
-  integrity sha512-yHQR0/tG2LvPkpGUt7Te/hPmP2XW/BytBNUbx+EFO54VnGCOE3upmQcVffNp1PLgwg9sthYDXontUWpnpmLPJw==
+  integrity sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.0.6"
@@ -1414,10 +1414,10 @@ mitt@^3.0.1:
   resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
-monaco-editor@^0.41.0:
+monaco-editor@^0.43.0:
-  version "0.41.0"
+  version "0.43.0"
-  resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.41.0.tgz#2ba31e5af7e3ae93ac5d7467ec2772ef9b3d967f"
+  resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.43.0.tgz#cb02a8d23d1249ad00b7cffe8bbecc2ac09d4baf"
-  integrity sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA==
+  integrity sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q==
 
 monaco-sql-languages@^0.11.0:
   version "0.11.0"
@@ -1944,15 +1944,25 @@ wrappy@1:
   resolved "https://registry.nlark.com/wrappy/download/wrappy-1.0.2.tgz?cache=0&sync_timestamp=1619133505879&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwrappy%2Fdownload%2Fwrappy-1.0.2.tgz"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-xterm-addon-fit@^0.7.0:
+xterm-addon-fit@^0.8.0:
-  version "0.7.0"
+  version "0.8.0"
-  resolved "https://registry.npmmirror.com/xterm-addon-fit/-/xterm-addon-fit-0.7.0.tgz#b8ade6d96e63b47443862088f6670b49fb752c6a"
+  resolved "https://registry.npmmirror.com/xterm-addon-fit/-/xterm-addon-fit-0.8.0.tgz#48ca99015385141918f955ca7819e85f3691d35f"
-  integrity sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==
+  integrity sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==
 
-xterm@^5.2.1:
+xterm-addon-search@^0.13.0:
-  version "5.2.1"
+  version "0.13.0"
-  resolved "https://registry.npmmirror.com/xterm/-/xterm-5.2.1.tgz#b3fea7bdb55b9be1d4b31f4cd1091f26ac42afb8"
+  resolved "https://registry.npmmirror.com/xterm-addon-search/-/xterm-addon-search-0.13.0.tgz#21286f4db48aa949fbefce34bb8bc0c9d3cec627"
-  integrity sha512-cs5Y1fFevgcdoh2hJROMVIWwoBHD80P1fIP79gopLHJIE4kTzzblanoivxTiQ4+92YM9IxS36H1q0MxIJXQBcA==
+  integrity sha512-sDUwG4CnqxUjSEFh676DlS3gsh3XYCzAvBPSvJ5OPgF3MRL3iHLPfsb06doRicLC2xXNpeG2cWk8x1qpESWJMA==
+
+xterm-addon-web-links@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.npmmirror.com/xterm-addon-web-links/-/xterm-addon-web-links-0.9.0.tgz#c65b18588d1f613e703eb6feb7f129e7ff1c63e7"
+  integrity sha512-LIzi4jBbPlrKMZF3ihoyqayWyTXAwGfu4yprz1aK2p71e9UKXN6RRzVONR0L+Zd+Ik5tPVI9bwp9e8fDTQh49Q==
+
+xterm@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmmirror.com/xterm/-/xterm-5.3.0.tgz#867daf9cc826f3d45b5377320aabd996cb0fce46"
+  integrity sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==
 
 yallist@^4.0.0:
   version "4.0.0"

server/config.yml.example

@@ -1,7 +1,7 @@
 server:
   # debug release test
   model: release
-  port: 8888
+  port: 18888
   cors: true
   tls:
     enable: false
@@ -33,8 +33,12 @@ mysql:
 #   password: 111049
 #   db: 0
 log:
-   # 日志等级, trace, debug, info, warn, error, fatal
+   # 日志等级, debug, info, warn, error
   level: info
+  # 日志格式类型, text/json
+  type: text
+  # 是否记录方法调用栈信息
+  add-source: false
   # file:
   #   path: ./
   #   name: mayfly-go.log

server/go.mod

@@ -21,11 +21,10 @@ require (
 	github.com/pquerna/otp v1.4.0
 	github.com/redis/go-redis/v9 v9.1.0
 	github.com/robfig/cron/v3 v3.0.1 // 定时任务
-	github.com/sirupsen/logrus v1.9.3
 	github.com/xwb1989/sqlparser v0.0.0-20180606152119-120387863bf2
 	go.mongodb.org/mongo-driver v1.12.1 // mongo
-	golang.org/x/crypto v0.12.0 // ssh
+	golang.org/x/crypto v0.13.0 // ssh
-	golang.org/x/oauth2 v0.11.0
+	golang.org/x/oauth2 v0.12.0
 	gopkg.in/yaml.v3 v3.0.1
 	// gorm
 	gorm.io/driver/mysql v1.5.1
@@ -67,10 +66,10 @@ require (
 	github.com/youmark/pkcs8 v0.0.0-20181117223130-1be2e3e5546d // indirect
 	golang.org/x/arch v0.3.0 // indirect
 	golang.org/x/image v0.0.0-20220302094943-723b81ca9867 // indirect
-	golang.org/x/net v0.14.0 // indirect
+	golang.org/x/net v0.15.0 // indirect
 	golang.org/x/sync v0.1.0 // indirect
-	golang.org/x/sys v0.11.0 // indirect
+	golang.org/x/sys v0.12.0 // indirect
-	golang.org/x/text v0.12.0 // indirect
+	golang.org/x/text v0.13.0 // indirect
 	google.golang.org/appengine v1.6.7 // indirect
 	google.golang.org/protobuf v1.31.0 // indirect
 	gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c // indirect

server/internal/auth/api/account_login.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"mayfly-go/internal/auth/api/form"
+	"mayfly-go/internal/auth/config"
 	"mayfly-go/internal/common/utils"
 	msgapp "mayfly-go/internal/msg/application"
 	sysapp "mayfly-go/internal/sys/application"
@@ -15,6 +16,8 @@ import (
 	"mayfly-go/pkg/otp"
 	"mayfly-go/pkg/req"
 	"mayfly-go/pkg/utils/cryptox"
+	"mayfly-go/pkg/utils/jsonx"
+	"mayfly-go/pkg/ws"
 	"strconv"
 	"time"
 )
@@ -22,7 +25,6 @@ import (
 type AccountLogin struct {
 	AccountApp sysapp.Account
 	MsgApp     msgapp.Msg
-	ConfigApp  sysapp.Config
 }
 
 /**   用户账号密码登录   **/
@@ -31,7 +33,7 @@ type AccountLogin struct {
 func (a *AccountLogin) Login(rc *req.Ctx) {
 	loginForm := ginx.BindJsonAndValid(rc.GinCtx, new(form.LoginForm))
 
-	accountLoginSecurity := a.ConfigApp.GetConfig(sysentity.ConfigKeyAccountLoginSecurity).ToAccountLoginSecurity()
+	accountLoginSecurity := config.GetAccountLoginSecurity()
 	// 判断是否有开启登录验证码校验
 	if accountLoginSecurity.UseCaptcha {
 		// 校验验证码
@@ -41,7 +43,7 @@ func (a *AccountLogin) Login(rc *req.Ctx) {
 	username := loginForm.Username
 
 	clientIp := getIpAndRegion(rc)
-	rc.ReqParam = fmt.Sprintf("username: %s | ip: %s", username, clientIp)
+	rc.ReqParam = jsonx.Kvs("username", username, "ip", clientIp)
 
 	originPwd, err := cryptox.DefaultRsaDecrypt(loginForm.Password, true)
 	biz.ErrIsNilAppendErr(err, "解密密码错误: %s")
@@ -117,4 +119,5 @@ func (a *AccountLogin) OtpVerify(rc *req.Ctx) {
 
 func (a *AccountLogin) Logout(rc *req.Ctx) {
 	req.GetPermissionCodeRegistery().Remove(rc.LoginAccount.Id)
+	ws.CloseClient(rc.LoginAccount.Id)
 }

server/internal/auth/api/common.go

@@ -2,6 +2,7 @@ package api
 
 import (
 	"fmt"
+	"mayfly-go/internal/auth/config"
 	msgapp "mayfly-go/internal/msg/application"
 	msgentity "mayfly-go/internal/msg/domain/entity"
 	sysapp "mayfly-go/internal/sys/application"
@@ -24,7 +25,7 @@ const (
 )
 
 // 最后的登录校验（共用）。校验通过返回登录成功响应结果map
-func LastLoginCheck(account *sysentity.Account, accountLoginSecurity *sysentity.AccountLoginSecurity, loginIp string) map[string]any {
+func LastLoginCheck(account *sysentity.Account, accountLoginSecurity *config.AccountLoginSecurity, loginIp string) map[string]any {
 	biz.IsTrue(account.IsEnable(), "该账号不可用")
 	username := account.Username
 

server/internal/auth/api/ldap_login.go

@@ -3,10 +3,8 @@ package api
 import (
 	"crypto/tls"
 	"fmt"
-	"github.com/go-ldap/ldap/v3"
-	"github.com/pkg/errors"
-	"gorm.io/gorm"
 	"mayfly-go/internal/auth/api/form"
+	"mayfly-go/internal/auth/config"
 	msgapp "mayfly-go/internal/msg/application"
 	sysapp "mayfly-go/internal/sys/application"
 	sysentity "mayfly-go/internal/sys/domain/entity"
@@ -16,20 +14,24 @@ import (
 	"mayfly-go/pkg/ginx"
 	"mayfly-go/pkg/req"
 	"mayfly-go/pkg/utils/cryptox"
+	"mayfly-go/pkg/utils/jsonx"
 	"strconv"
 	"strings"
 	"time"
+
+	"github.com/go-ldap/ldap/v3"
+	"github.com/pkg/errors"
+	"gorm.io/gorm"
 )
 
 type LdapLogin struct {
 	AccountApp sysapp.Account
 	MsgApp     msgapp.Msg
-	ConfigApp  sysapp.Config
 }
 
 // @router /auth/ldap/enabled [get]
 func (a *LdapLogin) GetLdapEnabled(rc *req.Ctx) {
-	ldapLoginConfig := a.ConfigApp.GetConfig(sysentity.ConfigKeyLdapLogin).ToLdapLogin()
+	ldapLoginConfig := config.GetLdapLogin()
 	rc.ResData = ldapLoginConfig.Enable
 }
 
@@ -37,7 +39,7 @@ func (a *LdapLogin) GetLdapEnabled(rc *req.Ctx) {
 func (a *LdapLogin) Login(rc *req.Ctx) {
 	loginForm := ginx.BindJsonAndValid(rc.GinCtx, new(form.LoginForm))
 
-	accountLoginSecurity := a.ConfigApp.GetConfig(sysentity.ConfigKeyAccountLoginSecurity).ToAccountLoginSecurity()
+	accountLoginSecurity := config.GetAccountLoginSecurity()
 	// 判断是否有开启登录验证码校验
 	if accountLoginSecurity.UseCaptcha {
 		// 校验验证码
@@ -47,7 +49,7 @@ func (a *LdapLogin) Login(rc *req.Ctx) {
 	username := loginForm.Username
 
 	clientIp := getIpAndRegion(rc)
-	rc.ReqParam = fmt.Sprintf("username: %s | ip: %s", username, clientIp)
+	rc.ReqParam = jsonx.Kvs("username", username, "ip", clientIp)
 
 	originPwd, err := cryptox.DefaultRsaDecrypt(loginForm.Password, true)
 	biz.ErrIsNilAppendErr(err, "解密密码错误: %s")
@@ -115,7 +117,7 @@ type UserInfo struct {
 
 // Authenticate 通过 LDAP 验证用户名密码
 func Authenticate(username, password string) (*UserInfo, error) {
-	ldapConf := sysapp.GetConfigApp().GetConfig(sysentity.ConfigKeyLdapLogin).ToLdapLogin()
+	ldapConf := config.GetLdapLogin()
 	if !ldapConf.Enable {
 		return nil, errors.Errorf("未启用 LDAP 登录")
 	}
@@ -163,7 +165,7 @@ func Authenticate(username, password string) (*UserInfo, error) {
 }
 
 // Connect 创建 LDAP 连接
-func Connect(ldapConf *sysentity.ConfigLdapLogin) (*ldap.Conn, error) {
+func Connect(ldapConf *config.LdapLogin) (*ldap.Conn, error) {
 	conn, err := dial(ldapConf)
 	if err != nil {
 		return nil, err
@@ -178,7 +180,7 @@ func Connect(ldapConf *sysentity.ConfigLdapLogin) (*ldap.Conn, error) {
 	return conn, nil
 }
 
-func dial(ldapConf *sysentity.ConfigLdapLogin) (*ldap.Conn, error) {
+func dial(ldapConf *config.LdapLogin) (*ldap.Conn, error) {
 	addr := fmt.Sprintf("%s:%s", ldapConf.Host, ldapConf.Port)
 	tlsConfig := &tls.Config{
 		ServerName:         ldapConf.Host,

server/internal/auth/api/oauth2_login.go

@@ -5,6 +5,7 @@ import (
 	"io"
 	"mayfly-go/internal/auth/api/vo"
 	"mayfly-go/internal/auth/application"
+	"mayfly-go/internal/auth/config"
 	"mayfly-go/internal/auth/domain/entity"
 	msgapp "mayfly-go/internal/msg/application"
 	sysapp "mayfly-go/internal/sys/application"
@@ -25,7 +26,6 @@ import (
 
 type Oauth2Login struct {
 	Oauth2App  application.Oauth2
-	ConfigApp  sysapp.Config
 	AccountApp sysapp.Account
 	MsgApp     msgapp.Msg
 }
@@ -98,7 +98,7 @@ func (a *Oauth2Login) OAuth2Callback(rc *req.Ctx) {
 		account.Id = accountId
 		err = a.AccountApp.GetAccount(account, "username")
 		biz.ErrIsNilAppendErr(err, "该账号不存在")
-		rc.ReqParam = fmt.Sprintf("oauth2 bind username: %s", account.Username)
+		rc.ReqParam = jsonx.Kvs("username", account.Username, "type", "bind")
 
 		err = a.Oauth2App.GetOAuthAccount(&entity.Oauth2Account{
 			AccountId: accountId,
@@ -129,7 +129,7 @@ func (a *Oauth2Login) OAuth2Callback(rc *req.Ctx) {
 }
 
 // 指定登录操作
-func (a *Oauth2Login) doLoginAction(rc *req.Ctx, userId string, oauth *sysentity.ConfigOauth2Login) {
+func (a *Oauth2Login) doLoginAction(rc *req.Ctx, userId string, oauth *config.Oauth2Login) {
 	// 查询用户是否存在
 	oauthAccount := &entity.Oauth2Account{Identity: userId}
 	err := a.Oauth2App.GetOAuthAccount(oauthAccount, "account_id", "identity")
@@ -173,16 +173,16 @@ func (a *Oauth2Login) doLoginAction(rc *req.Ctx, userId string, oauth *sysentity
 	biz.ErrIsNilAppendErr(err, "获取用户信息失败: %s")
 
 	clientIp := getIpAndRegion(rc)
-	rc.ReqParam = fmt.Sprintf("oauth2 login username: %s | ip: %s", account.Username, clientIp)
+	rc.ReqParam = jsonx.Kvs("username", account.Username, "ip", clientIp, "type", "login")
 
-	res := LastLoginCheck(account, a.ConfigApp.GetConfig(sysentity.ConfigKeyAccountLoginSecurity).ToAccountLoginSecurity(), clientIp)
+	res := LastLoginCheck(account, config.GetAccountLoginSecurity(), clientIp)
 	res["action"] = "oauthLogin"
 	res["isFirstOauth2Login"] = isFirst
 	rc.ResData = res
 }
 
-func (a *Oauth2Login) getOAuthClient() (*oauth2.Config, *sysentity.ConfigOauth2Login) {
+func (a *Oauth2Login) getOAuthClient() (*oauth2.Config, *config.Oauth2Login) {
-	oath2LoginConfig := a.ConfigApp.GetConfig(sysentity.ConfigKeyOauth2Login).ToOauth2Login()
+	oath2LoginConfig := config.GetOauth2Login()
 	biz.IsTrue(oath2LoginConfig.Enable, "请先配置oauth2或启用oauth2登录")
 	biz.IsTrue(oath2LoginConfig.ClientId != "", "oauth2 clientId不能为空")
 
@@ -201,7 +201,7 @@ func (a *Oauth2Login) getOAuthClient() (*oauth2.Config, *sysentity.ConfigOauth2L
 
 func (a *Oauth2Login) Oauth2Status(ctx *req.Ctx) {
 	res := &vo.Oauth2Status{}
-	oauth2LoginConfig := a.ConfigApp.GetConfig(sysentity.ConfigKeyOauth2Login).ToOauth2Login()
+	oauth2LoginConfig := config.GetOauth2Login()
 	res.Enable = oauth2LoginConfig.Enable
 	if res.Enable {
 		err := a.Oauth2App.GetOAuthAccount(&entity.Oauth2Account{
@@ -216,3 +216,12 @@ func (a *Oauth2Login) Oauth2Status(ctx *req.Ctx) {
 func (a *Oauth2Login) Oauth2Unbind(rc *req.Ctx) {
 	a.Oauth2App.Unbind(rc.LoginAccount.Id)
 }
+
+// 获取oauth2登录配置信息，因为有些字段是敏感字段，故单独使用接口获取
+func (c *Oauth2Login) Oauth2Config(rc *req.Ctx) {
+	oauth2LoginConfig := config.GetOauth2Login()
+	rc.ResData = map[string]any{
+		"enable": oauth2LoginConfig.Enable,
+		"name":   oauth2LoginConfig.Name,
+	}
+}

server/internal/auth/config/config.go

@@ -0,0 +1,105 @@
+package config
+
+import (
+	sysapp "mayfly-go/internal/sys/application"
+	"mayfly-go/pkg/utils/stringx"
+)
+
+const (
+	ConfigKeyAccountLoginSecurity string = "AccountLoginSecurity" // 账号登录安全配置
+	ConfigKeyOauth2Login          string = "Oauth2Login"          // oauth2认证登录配置
+	ConfigKeyLdapLogin            string = "LdapLogin"            // ldap登录配置
+)
+
+type AccountLoginSecurity struct {
+	UseCaptcha     bool   // 是否使用登录验证码
+	UseOtp         bool   // 是否双因素校验
+	OtpIssuer      string // otp发行人
+	LoginFailCount int    // 允许失败次数
+	LoginFailMin   int    // 登录失败指定次数后禁止的分钟数
+}
+
+// 获取账号登录安全相关配置
+func GetAccountLoginSecurity() *AccountLoginSecurity {
+	c := sysapp.GetConfigApp().GetConfig(ConfigKeyAccountLoginSecurity)
+	jm := c.GetJsonMap()
+	als := new(AccountLoginSecurity)
+	als.UseCaptcha = c.ConvBool(jm["useCaptcha"], true)
+	als.UseOtp = c.ConvBool(jm["useOtp"], false)
+	als.LoginFailCount = c.ConvInt(jm["loginFailCount"], 5)
+	als.LoginFailMin = c.ConvInt(jm["loginFailMin"], 10)
+	otpIssuer := jm["otpIssuer"]
+	if otpIssuer == "" {
+		otpIssuer = "mayfly-go"
+	}
+	als.OtpIssuer = otpIssuer
+	return als
+}
+
+type Oauth2Login struct {
+	Enable           bool // 是否启用
+	Name             string
+	ClientId         string `json:"clientId"`
+	ClientSecret     string `json:"clientSecret"`
+	AuthorizationURL string `json:"authorizationURL"`
+	AccessTokenURL   string `json:"accessTokenURL"`
+	RedirectURL      string `json:"redirectURL"`
+	Scopes           string `json:"scopes"`
+	ResourceURL      string `json:"resourceURL"`
+	UserIdentifier   string `json:"userIdentifier"`
+	AutoRegister     bool   `json:"autoRegister"` // 是否自动注册
+}
+
+// 获取Oauth2登录相关配置
+func GetOauth2Login() *Oauth2Login {
+	c := sysapp.GetConfigApp().GetConfig(ConfigKeyOauth2Login)
+	jm := c.GetJsonMap()
+	ol := new(Oauth2Login)
+	ol.Enable = c.ConvBool(jm["enable"], false)
+	ol.Name = jm["name"]
+	ol.ClientId = jm["clientId"]
+	ol.ClientSecret = jm["clientSecret"]
+	ol.AuthorizationURL = jm["authorizationURL"]
+	ol.AccessTokenURL = jm["accessTokenURL"]
+	ol.RedirectURL = jm["redirectURL"]
+	ol.Scopes = stringx.Trim(jm["scopes"])
+	ol.ResourceURL = jm["resourceURL"]
+	ol.UserIdentifier = jm["userIdentifier"]
+	ol.AutoRegister = c.ConvBool(jm["autoRegister"], true)
+	return ol
+}
+
+type LdapLogin struct {
+	Enable           bool // 是否启用
+	Host             string
+	Port             string `json:"port"`
+	SkipTLSVerify    bool   `json:"skipTLSVerify"`    // 客户端是否跳过 TLS 证书验证
+	SecurityProtocol string `json:"securityProtocol"` // 安全协议（为Null不使用安全协议），如: StartTLS, LDAPS
+	BindDN           string `json:"bindDn"`           // LDAP 服务的管理员账号，如: "cn=admin,dc=example,dc=com"
+	BindPwd          string `json:"bindPwd"`          // LDAP 服务的管理员密码
+	BaseDN           string `json:"baseDN"`           // 用户所在的 base DN, 如: "ou=users,dc=example,dc=com"
+	UserFilter       string `json:"userFilter"`       // 过滤用户的方式, 如: "(uid=%s)"
+	UidMap           string `json:"UidMap"`           // 用户id和 LDAP 字段名之间的映射关系
+	UdnMap           string `json:"UdnMap"`           // 用户姓名(dispalyName)和 LDAP 字段名之间的映射关系
+	EmailMap         string `json:"emailMap"`         // 用户email和 LDAP 字段名之间的映射关系
+}
+
+// 获取LdapLogin相关配置
+func GetLdapLogin() *LdapLogin {
+	c := sysapp.GetConfigApp().GetConfig(ConfigKeyLdapLogin)
+	jm := c.GetJsonMap()
+	ll := new(LdapLogin)
+	ll.Enable = c.ConvBool(jm["enable"], false)
+	ll.Host = jm["host"]
+	ll.Port = jm["port"]
+	ll.SkipTLSVerify = c.ConvBool(jm["skipTLSVerify"], true)
+	ll.SecurityProtocol = jm["securityProtocol"]
+	ll.BindDN = stringx.Trim(jm["bindDN"])
+	ll.BindPwd = stringx.Trim(jm["bindPwd"])
+	ll.BaseDN = stringx.Trim(jm["baseDN"])
+	ll.UserFilter = stringx.Trim(jm["userFilter"])
+	ll.UidMap = stringx.Trim(jm["uidMap"])
+	ll.UdnMap = stringx.Trim(jm["udnMap"])
+	ll.EmailMap = stringx.Trim(jm["emailMap"])
+	return ll
+}

server/internal/auth/router/router.go

@@ -12,20 +12,17 @@ import (
 
 func Init(router *gin.RouterGroup) {
 	accountLogin := &api.AccountLogin{
-		ConfigApp:  sysapp.GetConfigApp(),
 		AccountApp: sysapp.GetAccountApp(),
 		MsgApp:     msgapp.GetMsgApp(),
 	}
 
 	ldapLogin := &api.LdapLogin{
-		ConfigApp:  sysapp.GetConfigApp(),
 		AccountApp: sysapp.GetAccountApp(),
 		MsgApp:     msgapp.GetMsgApp(),
 	}
 
 	oauth2Login := &api.Oauth2Login{
 		Oauth2App:  application.GetAuthApp(),
-		ConfigApp:  sysapp.GetConfigApp(),
 		AccountApp: sysapp.GetAccountApp(),
 		MsgApp:     msgapp.GetMsgApp(),
 	}
@@ -45,6 +42,8 @@ func Init(router *gin.RouterGroup) {
 
 		/*--------oauth2登录相关----------*/
 
+		req.NewGet("/oauth2-config", oauth2Login.Oauth2Config).DontNeedToken(),
+
 		// oauth2登录
 		req.NewGet("/oauth2/login", oauth2Login.OAuth2Login).DontNeedToken(),
 

server/internal/common/utils/pwd.go

@@ -32,7 +32,7 @@ func PwdAesEncrypt(password string) string {
 		return ""
 	}
 	aes := config.Conf.Aes
-	if aes == nil {
+	if aes.Key == "" {
 		return password
 	}
 	encryptPwd, err := aes.EncryptBase64([]byte(password))
@@ -46,7 +46,7 @@ func PwdAesDecrypt(encryptPwd string) string {
 		return ""
 	}
 	aes := config.Conf.Aes
-	if aes == nil {
+	if aes.Key == "" {
 		return encryptPwd
 	}
 	decryptPwd, err := aes.DecryptBase64(encryptPwd)

server/internal/db/api/db.go

@@ -14,9 +14,7 @@ import (
 	"mayfly-go/pkg/gormx"
 	"mayfly-go/pkg/model"
 	"mayfly-go/pkg/req"
-	"mayfly-go/pkg/utils/cryptox"
 	"mayfly-go/pkg/utils/stringx"
-	"mayfly-go/pkg/utils/structx"
 	"mayfly-go/pkg/ws"
 	"strconv"
 	"strings"
@@ -27,14 +25,13 @@ import (
 )
 
 type Db struct {
+	InstanceApp  application.Instance
 	DbApp        application.Db
 	DbSqlExecApp application.DbSqlExec
 	MsgApp       msgapp.Msg
 	TagApp       tagapp.TagTree
 }
 
-const DEFAULT_ROW_SIZE = 5000
-
 // @router /api/dbs [get]
 func (d *Db) Dbs(rc *req.Ctx) {
 	queryCond, page := ginx.BindQueryAndPage[*entity.DbQuery](rc.GinCtx, new(entity.DbQuery))
@@ -58,48 +55,12 @@ func (d *Db) Save(rc *req.Ctx) {
 	form := &form.DbForm{}
 	db := ginx.BindJsonAndCopyTo[*entity.Db](rc.GinCtx, form, new(entity.Db))
 
-	// 密码解密，并使用解密后的赋值
-	originPwd, err := cryptox.DefaultRsaDecrypt(form.Password, true)
-	biz.ErrIsNilAppendErr(err, "解密密码错误: %s")
-	db.Password = originPwd
-
-	// 密码脱敏记录日志
-	form.Password = "****"
 	rc.ReqParam = form
 
 	db.SetBaseInfo(rc.LoginAccount)
 	d.DbApp.Save(db)
 }
 
-// 获取数据库实例密码，由于数据库是加密存储，故提供该接口展示原文密码
-func (d *Db) GetDbPwd(rc *req.Ctx) {
-	dbId := GetDbId(rc.GinCtx)
-	dbEntity := d.DbApp.GetById(dbId, "Password")
-	dbEntity.PwdDecrypt()
-	rc.ResData = dbEntity.Password
-}
-
-// 获取数据库实例的所有数据库名
-func (d *Db) GetDatabaseNames(rc *req.Ctx) {
-	form := &form.DbForm{}
-	ginx.BindJsonAndValid(rc.GinCtx, form)
-
-	db := new(entity.Db)
-	structx.Copy(db, form)
-
-	// 密码解密，并使用解密后的赋值
-	originPwd, err := cryptox.DefaultRsaDecrypt(form.Password, true)
-	biz.ErrIsNilAppendErr(err, "解密密码错误: %s")
-	db.Password = originPwd
-
-	// 如果id不为空，并且密码为空则从数据库查询
-	if form.Id != 0 && db.Password == "" {
-		db = d.DbApp.GetById(form.Id)
-		db.PwdDecrypt()
-	}
-	rc.ResData = d.DbApp.GetDatabases(db)
-}
-
 func (d *Db) DeleteDb(rc *req.Ctx) {
 	idsStr := ginx.PathParam(rc.GinCtx, "dbId")
 	rc.ReqParam = idsStr
@@ -115,20 +76,26 @@ func (d *Db) DeleteDb(rc *req.Ctx) {
 	}
 }
 
+func (d *Db) getDbConnection(g *gin.Context) *application.DbConnection {
+	dbName := g.Query("db")
+	biz.NotEmpty(dbName, "db不能为空")
+	return d.DbApp.GetDbConnection(getDbId(g), dbName)
+}
+
 func (d *Db) TableInfos(rc *req.Ctx) {
-	rc.ResData = d.DbApp.GetDbInstance(GetIdAndDb(rc.GinCtx)).GetMeta().GetTableInfos()
+	rc.ResData = d.getDbConnection(rc.GinCtx).GetMeta().GetTableInfos()
 }
 
 func (d *Db) TableIndex(rc *req.Ctx) {
 	tn := rc.GinCtx.Query("tableName")
 	biz.NotEmpty(tn, "tableName不能为空")
-	rc.ResData = d.DbApp.GetDbInstance(GetIdAndDb(rc.GinCtx)).GetMeta().GetTableIndex(tn)
+	rc.ResData = d.getDbConnection(rc.GinCtx).GetMeta().GetTableIndex(tn)
 }
 
 func (d *Db) GetCreateTableDdl(rc *req.Ctx) {
 	tn := rc.GinCtx.Query("tableName")
 	biz.NotEmpty(tn, "tableName不能为空")
-	rc.ResData = d.DbApp.GetDbInstance(GetIdAndDb(rc.GinCtx)).GetMeta().GetCreateTableDdl(tn)
+	rc.ResData = d.getDbConnection(rc.GinCtx).GetMeta().GetCreateTableDdl(tn)
 }
 
 func (d *Db) ExecSql(rc *req.Ctx) {
@@ -136,22 +103,21 @@ func (d *Db) ExecSql(rc *req.Ctx) {
 	form := &form.DbSqlExecForm{}
 	ginx.BindJsonAndValid(g, form)
 
-	id := GetDbId(g)
+	dbId := getDbId(g)
-	db := form.Db
+	dbConn := d.DbApp.GetDbConnection(dbId, form.Db)
-	dbInstance := d.DbApp.GetDbInstance(id, db)
+	biz.ErrIsNilAppendErr(d.TagApp.CanAccess(rc.LoginAccount.Id, dbConn.Info.TagPath), "%s")
-	biz.ErrIsNilAppendErr(d.TagApp.CanAccess(rc.LoginAccount.Id, dbInstance.Info.TagPath), "%s")
 
-	rc.ReqParam = fmt.Sprintf("%s\n-> %s", dbInstance.Info.GetLogDesc(), form.Sql)
+	rc.ReqParam = fmt.Sprintf("%s\n-> %s", dbConn.Info.GetLogDesc(), form.Sql)
 	biz.NotEmpty(form.Sql, "sql不能为空")
 
 	// 去除前后空格及换行符
 	sql := stringx.TrimSpaceAndBr(form.Sql)
 
 	execReq := &application.DbSqlExecReq{
-		DbId:         id,
+		DbId:         dbId,
-		Db:           db,
+		Db:           form.Db,
 		Remark:       form.Remark,
-		DbInstance:   dbInstance,
+		DbConn:       dbConn,
 		LoginAccount: rc.LoginAccount,
 	}
 
@@ -192,11 +158,12 @@ func (d *Db) ExecSqlFile(rc *req.Ctx) {
 
 	file, _ := fileheader.Open()
 	filename := fileheader.Filename
-	dbId, db := GetIdAndDb(g)
+	dbId := getDbId(g)
+	dbName := getDbName(g)
 
-	dbInstance := d.DbApp.GetDbInstance(dbId, db)
+	dbConn := d.getDbConnection(rc.GinCtx)
-	biz.ErrIsNilAppendErr(d.TagApp.CanAccess(rc.LoginAccount.Id, dbInstance.Info.TagPath), "%s")
+	biz.ErrIsNilAppendErr(d.TagApp.CanAccess(rc.LoginAccount.Id, dbConn.Info.TagPath), "%s")
-	rc.ReqParam = fmt.Sprintf("%s -> filename: %s", dbInstance.Info.GetLogDesc(), filename)
+	rc.ReqParam = fmt.Sprintf("%s -> filename: %s", dbConn.Info.GetLogDesc(), filename)
 
 	logExecRecord := true
 	// 如果执行sql文件大于该值则不记录sql执行记录
@@ -207,18 +174,24 @@ func (d *Db) ExecSqlFile(rc *req.Ctx) {
 	go func() {
 		defer func() {
 			if err := recover(); err != nil {
+				var errInfo string
 				switch t := err.(type) {
+				case biz.BizError:
+					errInfo = t.Error()
 				case *biz.BizError:
-					d.MsgApp.CreateAndSend(rc.LoginAccount, ws.ErrMsg("sql脚本执行失败", fmt.Sprintf("[%s]%s执行失败: [%s]", filename, dbInstance.Info.GetLogDesc(), t.Error())))
+					errInfo = t.Error()
+				}
+				if len(errInfo) > 0 {
+					d.MsgApp.CreateAndSend(rc.LoginAccount, ws.ErrSysMsg("sql脚本执行失败", fmt.Sprintf("[%s]%s执行失败: [%s]", filename, dbConn.Info.GetLogDesc(), errInfo)))
 				}
 			}
 		}()
 
 		execReq := &application.DbSqlExecReq{
 			DbId:         dbId,
-			Db:           db,
+			Db:           dbName,
 			Remark:       fileheader.Filename,
-			DbInstance:   dbInstance,
+			DbConn:       dbConn,
 			LoginAccount: rc.LoginAccount,
 		}
 
@@ -228,59 +201,122 @@ func (d *Db) ExecSqlFile(rc *req.Ctx) {
 			if err == io.EOF {
 				break
 			}
+			if err != nil {
+				d.MsgApp.CreateAndSend(rc.LoginAccount, ws.ErrSysMsg("sql脚本执行失败", fmt.Sprintf("[%s][%s] 解析SQL失败: [%s]", filename, dbConn.Info.GetLogDesc(), err.Error())))
+				return
+			}
 			sql := sqlparser.String(stmt)
 			execReq.Sql = sql
 			// 需要记录执行记录
 			if logExecRecord {
 				_, err = d.DbSqlExecApp.Exec(execReq)
 			} else {
-				_, err = dbInstance.Exec(sql)
+				_, err = dbConn.Exec(sql)
 			}
 
 			if err != nil {
-				d.MsgApp.CreateAndSend(rc.LoginAccount, ws.ErrMsg("sql脚本执行失败", fmt.Sprintf("[%s][%s] -> sql=[%s] 执行失败: [%s]", filename, dbInstance.Info.GetLogDesc(), sql, err.Error())))
+				d.MsgApp.CreateAndSend(rc.LoginAccount, ws.ErrSysMsg("sql脚本执行失败", fmt.Sprintf("[%s][%s] -> sql=[%s] 执行失败: [%s]", filename, dbConn.Info.GetLogDesc(), sql, err.Error())))
 				return
 			}
 		}
-		d.MsgApp.CreateAndSend(rc.LoginAccount, ws.SuccessMsg("sql脚本执行成功", fmt.Sprintf("[%s]执行完成 -> %s", filename, dbInstance.Info.GetLogDesc())))
+		d.MsgApp.CreateAndSend(rc.LoginAccount, ws.SuccessSysMsg("sql脚本执行成功", fmt.Sprintf("[%s]执行完成 -> %s", filename, dbConn.Info.GetLogDesc())))
 	}()
 }
 
 // 数据库dump
 func (d *Db) DumpSql(rc *req.Ctx) {
 	g := rc.GinCtx
-	dbId, db := GetIdAndDb(g)
+	dbId := getDbId(g)
+	dbNamesStr := g.Query("db")
 	dumpType := g.Query("type")
 	tablesStr := g.Query("tables")
-	biz.NotEmpty(tablesStr, "请选择要导出的表")
+	extName := g.Query("extName")
-	tables := strings.Split(tablesStr, ",")
+	switch extName {
+	case ".gz", ".gzip", "gz", "gzip":
+		extName = ".gz"
+	default:
+		extName = ""
+	}
 
 	// 是否需要导出表结构
 	needStruct := dumpType == "1" || dumpType == "3"
 	// 是否需要导出数据
 	needData := dumpType == "2" || dumpType == "3"
 
-	dbInstance := d.DbApp.GetDbInstance(dbId, db)
+	db := d.DbApp.GetById(dbId)
-	biz.ErrIsNilAppendErr(d.TagApp.CanAccess(rc.LoginAccount.Id, dbInstance.Info.TagPath), "%s")
+	biz.ErrIsNilAppendErr(d.TagApp.CanAccess(rc.LoginAccount.Id, db.TagPath), "%s")
 
 	now := time.Now()
-	filename := fmt.Sprintf("%s.%s.sql", db, now.Format("200601021504"))
+	filename := fmt.Sprintf("%s.%s.sql%s", db.Name, now.Format("20060102150405"), extName)
 	g.Header("Content-Type", "application/octet-stream")
 	g.Header("Content-Disposition", "attachment; filename="+filename)
+	if extName != ".gz" {
+		g.Header("Content-Encoding", "gzip")
+	}
 
-	writer := g.Writer
+	var dbNames, tables []string
+	if len(dbNamesStr) > 0 {
+		dbNames = strings.Split(dbNamesStr, ",")
+	}
+	if len(dbNames) == 1 && len(tablesStr) > 0 {
+		tables = strings.Split(tablesStr, ",")
+	}
+	writer := newGzipWriter(g.Writer)
+	defer func() {
+		var msg string
+		if err := recover(); err != nil {
+			switch t := err.(type) {
+			case biz.BizError:
+				msg = t.Error()
+			case *biz.BizError:
+				msg = t.Error()
+			}
+		}
+		if len(msg) > 0 {
+			msg = "数据库导出失败: " + msg
+			writer.WriteString(msg)
+			d.MsgApp.CreateAndSend(rc.LoginAccount, ws.ErrSysMsg("数据库导出失败", msg))
+		}
+		writer.Close()
+	}()
+	for _, dbName := range dbNames {
+		d.dumpDb(writer, dbId, dbName, tables, needStruct, needData, len(dbNames) > 1)
+	}
+
+	rc.ReqParam = fmt.Sprintf("DB[id=%d, tag=%s, name=%s, databases=%s, tables=%s, dumpType=%s]", db.Id, db.TagPath, db.Name, dbNamesStr, tablesStr, dumpType)
+}
+
+func (d *Db) dumpDb(writer *gzipWriter, dbId uint64, dbName string, tables []string, needStruct bool, needData bool, switchDb bool) {
+	dbConn := d.DbApp.GetDbConnection(dbId, dbName)
 	writer.WriteString("-- ----------------------------")
 	writer.WriteString("\n-- 导出平台: mayfly-go")
-	writer.WriteString(fmt.Sprintf("\n-- 导出时间: %s ", now.Format("2006-01-02 15:04:05")))
+	writer.WriteString(fmt.Sprintf("\n-- 导出时间: %s ", time.Now().Format("2006-01-02 15:04:05")))
-	writer.WriteString(fmt.Sprintf("\n-- 导出数据库: %s ", db))
+	writer.WriteString(fmt.Sprintf("\n-- 导出数据库: %s ", dbName))
 	writer.WriteString("\n-- ----------------------------\n")
+	writer.TryFlush()
+
+	if switchDb {
+		switch dbConn.Info.Type {
+		case entity.DbTypeMysql:
+			writer.WriteString(fmt.Sprintf("use `%s`;\n", dbName))
+		default:
+			biz.IsTrue(false, "数据库类型必须为 %s", entity.DbTypeMysql)
+		}
+	}
+	dbMeta := dbConn.GetMeta()
+	if len(tables) == 0 {
+		ti := dbMeta.GetTableInfos()
+		tables = make([]string, len(ti))
+		for i, table := range ti {
+			tables[i] = table.TableName
+		}
+	}
 
-	dbmeta := d.DbApp.GetDbInstance(GetIdAndDb(rc.GinCtx)).GetMeta()
 	for _, table := range tables {
 		if needStruct {
 			writer.WriteString(fmt.Sprintf("\n-- ----------------------------\n-- 表结构: %s \n-- ----------------------------\n", table))
 			writer.WriteString(fmt.Sprintf("DROP TABLE IF EXISTS `%s`;\n", table))
-			writer.WriteString(dbmeta.GetCreateTableDdl(table) + ";\n")
+			writer.WriteString(dbMeta.GetCreateTableDdl(table) + ";\n")
 		}
 
 		if !needData {
@@ -290,46 +326,35 @@ func (d *Db) DumpSql(rc *req.Ctx) {
 		writer.WriteString(fmt.Sprintf("\n-- ----------------------------\n-- 表记录: %s \n-- ----------------------------\n", table))
 		writer.WriteString("BEGIN;\n")
 
-		pageNum := 1
+		insertSql := "INSERT INTO `%s` VALUES (%s);\n"
-		for {
+
-			columns, result, _ := dbmeta.GetTableRecord(table, pageNum, DEFAULT_ROW_SIZE)
+		dbMeta.WalkTableRecord(table, func(record map[string]any, columns []string) {
-			resultLen := len(result)
+			var values []string
-			if resultLen == 0 {
+			for _, column := range columns {
-				break
+				value := record[column]
-			}
+				if value == nil {
-			insertSql := "INSERT INTO `%s` VALUES (%s);\n"
+					values = append(values, "NULL")
-			for _, res := range result {
+					continue
-				var values []string
+				}
-				for _, column := range columns {
+				strValue, ok := value.(string)
-					value := res[column]
+				if ok {
-					if value == nil {
+					values = append(values, fmt.Sprintf("%#v", strValue))
-						values = append(values, "NULL")
+				} else {
-						continue
+					values = append(values, stringx.AnyToStr(value))
-					}
-					strValue, ok := value.(string)
-					if ok {
-						values = append(values, fmt.Sprintf("%#v", strValue))
-					} else {
-						values = append(values, stringx.AnyToStr(value))
-					}
 				}
-				writer.WriteString(fmt.Sprintf(insertSql, table, strings.Join(values, ", ")))
 			}
-			if resultLen < DEFAULT_ROW_SIZE {
+			writer.WriteString(fmt.Sprintf(insertSql, table, strings.Join(values, ", ")))
-				break
+			writer.TryFlush()
-			}
+		})
-			pageNum++
-		}
 
 		writer.WriteString("COMMIT;\n")
+		writer.TryFlush()
 	}
-
-	rc.ReqParam = fmt.Sprintf("%s, tables: %s, dumpType: %s", dbInstance.Info.GetLogDesc(), tablesStr, dumpType)
 }
 
 // @router /api/db/:dbId/t-metadata [get]
 func (d *Db) TableMA(rc *req.Ctx) {
-	dbi := d.DbApp.GetDbInstance(GetIdAndDb(rc.GinCtx))
+	dbi := d.getDbConnection(rc.GinCtx)
 	rc.ResData = dbi.GetMeta().GetTables()
 }
 
@@ -339,13 +364,13 @@ func (d *Db) ColumnMA(rc *req.Ctx) {
 	tn := g.Query("tableName")
 	biz.NotEmpty(tn, "tableName不能为空")
 
-	dbi := d.DbApp.GetDbInstance(GetIdAndDb(rc.GinCtx))
+	dbi := d.getDbConnection(rc.GinCtx)
 	rc.ResData = dbi.GetMeta().GetColumns(tn)
 }
 
 // @router /api/db/:dbId/hint-tables [get]
 func (d *Db) HintTables(rc *req.Ctx) {
-	dbi := d.DbApp.GetDbInstance(GetIdAndDb(rc.GinCtx))
+	dbi := d.getDbConnection(rc.GinCtx)
 
 	dm := dbi.GetMeta()
 	// 获取所有表
@@ -391,7 +416,7 @@ func (d *Db) SaveSql(rc *req.Ctx) {
 	ginx.BindJsonAndValid(g, dbSqlForm)
 	rc.ReqParam = dbSqlForm
 
-	dbId := GetDbId(g)
+	dbId := getDbId(g)
 	// 判断dbId是否存在
 	err := gormx.GetById(new(entity.Db), dbId)
 	biz.ErrIsNil(err, "该数据库信息不存在")
@@ -413,9 +438,10 @@ func (d *Db) SaveSql(rc *req.Ctx) {
 
 // 获取所有保存的sql names
 func (d *Db) GetSqlNames(rc *req.Ctx) {
-	id, db := GetIdAndDb(rc.GinCtx)
+	dbId := getDbId(rc.GinCtx)
+	dbName := getDbName(rc.GinCtx)
 	// 获取用于是否有该dbsql的保存记录，有则更改，否则新增
-	dbSql := &entity.DbSql{Type: 1, DbId: id, Db: db}
+	dbSql := &entity.DbSql{Type: 1, DbId: dbId, Db: dbName}
 	dbSql.CreatorId = rc.LoginAccount.Id
 	var sqls []entity.DbSql
 	gormx.ListBy(dbSql, &sqls, "id", "name")
@@ -425,7 +451,7 @@ func (d *Db) GetSqlNames(rc *req.Ctx) {
 
 // 删除保存的sql
 func (d *Db) DeleteSql(rc *req.Ctx) {
-	dbSql := &entity.DbSql{Type: 1, DbId: GetDbId(rc.GinCtx)}
+	dbSql := &entity.DbSql{Type: 1, DbId: getDbId(rc.GinCtx)}
 	dbSql.CreatorId = rc.LoginAccount.Id
 	dbSql.Name = rc.GinCtx.Query("name")
 	dbSql.Db = rc.GinCtx.Query("db")
@@ -436,9 +462,10 @@ func (d *Db) DeleteSql(rc *req.Ctx) {
 
 // @router /api/db/:dbId/sql [get]
 func (d *Db) GetSql(rc *req.Ctx) {
-	id, db := GetIdAndDb(rc.GinCtx)
+	dbId := getDbId(rc.GinCtx)
+	dbName := getDbName(rc.GinCtx)
 	// 根据创建者id， 数据库id，以及sql模板名称查询保存的sql信息
-	dbSql := &entity.DbSql{Type: 1, DbId: id, Db: db}
+	dbSql := &entity.DbSql{Type: 1, DbId: dbId, Db: dbName}
 	dbSql.CreatorId = rc.LoginAccount.Id
 	dbSql.Name = rc.GinCtx.Query("name")
 
@@ -449,14 +476,14 @@ func (d *Db) GetSql(rc *req.Ctx) {
 	rc.ResData = dbSql
 }
 
-func GetDbId(g *gin.Context) uint64 {
+func getDbId(g *gin.Context) uint64 {
 	dbId, _ := strconv.Atoi(g.Param("dbId"))
 	biz.IsTrue(dbId > 0, "dbId错误")
 	return uint64(dbId)
 }
 
-func GetIdAndDb(g *gin.Context) (uint64, string) {
+func getDbName(g *gin.Context) string {
 	db := g.Query("db")
 	biz.NotEmpty(db, "db不能为空")
-	return GetDbId(g), db
+	return db
 }

server/internal/db/api/form/db.go

@@ -1,19 +1,13 @@
 package form
 
 type DbForm struct {
-	Id                 uint64 `json:"id"`
+	Id         uint64 `json:"id"`
-	Name               string `binding:"required" json:"name"`
+	Name       string `binding:"required" json:"name"`
-	Type               string `binding:"required" json:"type"` // 类型，mysql oracle等
+	Database   string `json:"database"`
-	Host               string `binding:"required" json:"host"`
+	Remark     string `json:"remark"`
-	Port               int    `binding:"required" json:"port"`
+	TagId      uint64 `binding:"required" json:"tagId"`
-	Username           string `binding:"required" json:"username"`
+	TagPath    string `binding:"required" json:"tagPath"`
-	Password           string `json:"password"`
+	InstanceId uint64 `binding:"required" json:"instanceId"`
-	Params             string `json:"params"`
-	Database           string `json:"database"`
-	Remark             string `json:"remark"`
-	TagId              uint64 `binding:"required" json:"tagId"`
-	TagPath            string `binding:"required" json:"tagPath"`
-	SshTunnelMachineId int    `json:"sshTunnelMachineId"`
 }
 
 type DbSqlSaveForm struct {

server/internal/db/api/form/instance.go

@@ -0,0 +1,14 @@
+package form
+
+type InstanceForm struct {
+	Id                 uint64 `json:"id"`
+	Name               string `binding:"required" json:"name"`
+	Type               string `binding:"required" json:"type"` // 类型，mysql oracle等
+	Host               string `binding:"required" json:"host"`
+	Port               int    `binding:"required" json:"port"`
+	Username           string `binding:"required" json:"username"`
+	Password           string `json:"password"`
+	Params             string `json:"params"`
+	Remark             string `json:"remark"`
+	SshTunnelMachineId int    `json:"sshTunnelMachineId"`
+}

server/internal/db/api/gzip_writer.go

@@ -0,0 +1,38 @@
+package api
+
+import (
+	"compress/gzip"
+	"io"
+	"mayfly-go/pkg/biz"
+)
+
+type gzipWriter struct {
+	tryFlushCount int
+	writer        *gzip.Writer
+	aborted       bool
+}
+
+func newGzipWriter(writer io.Writer) *gzipWriter {
+	return &gzipWriter{writer: gzip.NewWriter(writer)}
+}
+
+func (g *gzipWriter) WriteString(data string) {
+	if g.aborted {
+		return
+	}
+	if _, err := g.writer.Write([]byte(data)); err != nil {
+		g.aborted = true
+		biz.IsTrue(false, "数据库导出失败：%s", err)
+	}
+}
+
+func (g *gzipWriter) Close() {
+	g.writer.Close()
+}
+
+func (g *gzipWriter) TryFlush() {
+	if g.tryFlushCount%1000 == 0 {
+		g.writer.Flush()
+	}
+	g.tryFlushCount += 1
+}

server/internal/db/api/instance.go

@@ -0,0 +1,102 @@
+package api
+
+import (
+	"mayfly-go/internal/db/api/form"
+	"mayfly-go/internal/db/api/vo"
+	"mayfly-go/internal/db/application"
+	"mayfly-go/internal/db/domain/entity"
+	"mayfly-go/pkg/biz"
+	"mayfly-go/pkg/ginx"
+	"mayfly-go/pkg/req"
+	"mayfly-go/pkg/utils/cryptox"
+	"strconv"
+	"strings"
+
+	"github.com/gin-gonic/gin"
+)
+
+type Instance struct {
+	InstanceApp application.Instance
+	DbApp       application.Db
+}
+
+// Instances 获取数据库实例信息
+// @router /api/instances [get]
+func (d *Instance) Instances(rc *req.Ctx) {
+	queryCond, page := ginx.BindQueryAndPage[*entity.InstanceQuery](rc.GinCtx, new(entity.InstanceQuery))
+	rc.ResData = d.InstanceApp.GetPageList(queryCond, page, new([]vo.SelectDataInstanceVO))
+}
+
+// SaveInstance 保存数据库实例信息
+// @router /api/instances [post]
+func (d *Instance) SaveInstance(rc *req.Ctx) {
+	form := &form.InstanceForm{}
+	instance := ginx.BindJsonAndCopyTo[*entity.Instance](rc.GinCtx, form, new(entity.Instance))
+
+	// 密码解密，并使用解密后的赋值
+	originPwd, err := cryptox.DefaultRsaDecrypt(form.Password, true)
+	biz.ErrIsNilAppendErr(err, "解密密码错误: %s")
+	instance.Password = originPwd
+
+	// 密码脱敏记录日志
+	form.Password = "****"
+	rc.ReqParam = form
+
+	instance.SetBaseInfo(rc.LoginAccount)
+	d.InstanceApp.Save(instance)
+}
+
+// GetInstance 获取数据库实例密码，由于数据库是加密存储，故提供该接口展示原文密码
+// @router /api/instances/:instance [GET]
+func (d *Instance) GetInstance(rc *req.Ctx) {
+	dbId := getInstanceId(rc.GinCtx)
+	dbEntity := d.InstanceApp.GetById(dbId)
+	biz.IsTrue(dbEntity != nil, "获取数据库实例错误")
+	dbEntity.Password = ""
+	rc.ResData = dbEntity
+}
+
+// GetInstancePwd 获取数据库实例密码，由于数据库是加密存储，故提供该接口展示原文密码
+// @router /api/instances/:instance/pwd [GET]
+func (d *Instance) GetInstancePwd(rc *req.Ctx) {
+	instanceId := getInstanceId(rc.GinCtx)
+	instanceEntity := d.InstanceApp.GetById(instanceId, "Password")
+	biz.IsTrue(instanceEntity != nil, "获取数据库实例错误")
+	instanceEntity.PwdDecrypt()
+	rc.ResData = instanceEntity.Password
+}
+
+// DeleteInstance 删除数据库实例信息
+// @router /api/instances/:instance [DELETE]
+func (d *Instance) DeleteInstance(rc *req.Ctx) {
+	idsStr := ginx.PathParam(rc.GinCtx, "instanceId")
+	rc.ReqParam = idsStr
+	ids := strings.Split(idsStr, ",")
+
+	for _, v := range ids {
+		value, err := strconv.Atoi(v)
+		biz.ErrIsNilAppendErr(err, "string类型转换为int异常: %s")
+		instanceId := uint64(value)
+		if d.DbApp.Count(&entity.DbQuery{InstanceId: instanceId}) != 0 {
+			instance := d.InstanceApp.GetById(instanceId, "name")
+			biz.NotNil(instance, "获取数据库实例错误，数据库实例ID为：%d", instance.Id)
+			biz.IsTrue(false, "不能删除数据库实例【%s】，请先删除其关联的数据库资源。", instance.Name)
+		}
+		d.InstanceApp.Delete(instanceId)
+	}
+}
+
+// 获取数据库实例的所有数据库名
+func (d *Instance) GetDatabaseNames(rc *req.Ctx) {
+	instanceId := getInstanceId(rc.GinCtx)
+	instance := d.InstanceApp.GetById(instanceId, "Password")
+	biz.IsTrue(instance != nil, "获取数据库实例错误")
+	instance.PwdDecrypt()
+	rc.ResData = d.InstanceApp.GetDatabases(instance)
+}
+
+func getInstanceId(g *gin.Context) uint64 {
+	instanceId, _ := strconv.Atoi(g.Param("instanceId"))
+	biz.IsTrue(instanceId > 0, "instanceId 错误")
+	return uint64(instanceId)
+}

server/internal/db/api/vo/db.go

@@ -4,24 +4,21 @@ import "time"
 
 type SelectDataDbVO struct {
 	//models.BaseModel
-	Id         *int64     `json:"id"`
+	Id       *int64  `json:"id"`
-	Name       *string    `json:"name"`
+	Name     *string `json:"name"`
-	Host       *string    `json:"host"`
+	Database *string `json:"database"`
-	Port       *int       `json:"port"`
+	Remark   *string `json:"remark"`
-	Type       *string    `json:"type"`
+	TagId    *int64  `json:"tagId"`
-	Params     *string    `json:"params"`
+	TagPath  *string `json:"tagPath"`
-	Database   *string    `json:"database"`
+
-	Username   *string    `json:"username"`
+	InstanceId   *int64  `json:"instanceId"`
-	Remark     *string    `json:"remark"`
+	InstanceName *string `json:"instanceName"`
-	TagId      *int64     `json:"tagId"`
+	InstanceType *string `json:"type"`
-	TagPath    *string    `json:"tagPath"`
+
 	CreateTime *time.Time `json:"createTime"`
 	Creator    *string    `json:"creator"`
 	CreatorId  *int64     `json:"creatorId"`
-
 	UpdateTime *time.Time `json:"updateTime"`
 	Modifier   *string    `json:"modifier"`
 	ModifierId *int64     `json:"modifierId"`
-
-	SshTunnelMachineId int `json:"sshTunnelMachineId"`
 }

server/internal/db/api/vo/instance.go

@@ -0,0 +1,24 @@
+package vo
+
+import "time"
+
+type SelectDataInstanceVO struct {
+	//models.BaseModel
+	Id         *int64     `json:"id"`
+	Name       *string    `json:"name"`
+	Host       *string    `json:"host"`
+	Port       *int       `json:"port"`
+	Type       *string    `json:"type"`
+	Params     *string    `json:"params"`
+	Username   *string    `json:"username"`
+	Remark     *string    `json:"remark"`
+	CreateTime *time.Time `json:"createTime"`
+	Creator    *string    `json:"creator"`
+	CreatorId  *int64     `json:"creatorId"`
+
+	UpdateTime *time.Time `json:"updateTime"`
+	Modifier   *string    `json:"modifier"`
+	ModifierId *int64     `json:"modifierId"`
+
+	SshTunnelMachineId int `json:"sshTunnelMachineId"`
+}

server/internal/db/application/application.go

@@ -5,10 +5,15 @@ import (
 )
 
 var (
-	dbApp        Db        = newDbApp(persistence.GetDbRepo(), persistence.GetDbSqlRepo())
+	instanceApp  Instance  = newInstanceApp(persistence.GetInstanceRepo())
+	dbApp        Db        = newDbApp(persistence.GetDbRepo(), persistence.GetDbSqlRepo(), instanceApp)
 	dbSqlExecApp DbSqlExec = newDbSqlExecApp(persistence.GetDbSqlExecRepo())
 )
 
+func GetInstanceApp() Instance {
+	return instanceApp
+}
+
 func GetDbApp() Db {
 	return dbApp
 }

server/internal/db/application/db.go

@@ -9,10 +9,9 @@ import (
 	"mayfly-go/internal/machine/infrastructure/machine"
 	"mayfly-go/pkg/biz"
 	"mayfly-go/pkg/cache"
-	"mayfly-go/pkg/global"
+	"mayfly-go/pkg/logx"
 	"mayfly-go/pkg/model"
 	"mayfly-go/pkg/utils/collx"
-	"mayfly-go/pkg/utils/structx"
 	"reflect"
 	"strconv"
 	"strings"
@@ -40,22 +39,21 @@ type Db interface {
 	// 获取数据库连接实例
 	// @param id 数据库实例id
 	// @param db 数据库
-	GetDbInstance(id uint64, db string) *DbInstance
+	GetDbConnection(dbId uint64, dbName string) *DbConnection
-
-	// 获取数据库实例的所有数据库列表
-	GetDatabases(entity *entity.Db) []string
 }
 
-func newDbApp(dbRepo repository.Db, dbSqlRepo repository.DbSql) Db {
+func newDbApp(dbRepo repository.Db, dbSqlRepo repository.DbSql, dbInstanceApp Instance) Db {
 	return &dbAppImpl{
-		dbRepo:    dbRepo,
+		dbRepo:        dbRepo,
-		dbSqlRepo: dbSqlRepo,
+		dbSqlRepo:     dbSqlRepo,
+		dbInstanceApp: dbInstanceApp,
 	}
 }
 
 type dbAppImpl struct {
-	dbRepo    repository.Db
+	dbRepo        repository.Db
-	dbSqlRepo repository.DbSql
+	dbSqlRepo     repository.DbSql
+	dbInstanceApp Instance
 }
 
 // 分页获取数据库信息列表
@@ -78,32 +76,19 @@ func (d *dbAppImpl) GetById(id uint64, cols ...string) *entity.Db {
 }
 
 func (d *dbAppImpl) Save(dbEntity *entity.Db) {
-	// 默认tcp连接
-	dbEntity.Network = dbEntity.GetNetwork()
-
-	// 测试连接
-	if dbEntity.Password != "" {
-		TestConnection(dbEntity)
-	}
-
 	// 查找是否存在该库
-	oldDb := &entity.Db{Host: dbEntity.Host, Port: dbEntity.Port, Username: dbEntity.Username}
+	oldDb := &entity.Db{Name: dbEntity.Name}
-	if dbEntity.SshTunnelMachineId > 0 {
-		oldDb.SshTunnelMachineId = dbEntity.SshTunnelMachineId
-	}
 	err := d.GetDbBy(oldDb)
 
 	if dbEntity.Id == 0 {
-		biz.NotEmpty(dbEntity.Password, "密码不能为空")
+		biz.IsTrue(err != nil, "该数据库资源已存在")
-		biz.IsTrue(err != nil, "该数据库实例已存在")
-		dbEntity.PwdEncrypt()
 		d.dbRepo.Insert(dbEntity)
 		return
 	}
 
 	// 如果存在该库，则校验修改的库是否为该库
 	if err == nil {
-		biz.IsTrue(oldDb.Id == dbEntity.Id, "该数据库实例已存在")
+		biz.IsTrue(oldDb.Id == dbEntity.Id, "该数据库资源已存在")
 	}
 
 	dbId := dbEntity.Id
@@ -129,7 +114,6 @@ func (d *dbAppImpl) Save(dbEntity *entity.Db) {
 		d.dbSqlRepo.DeleteBy(&entity.DbSql{DbId: dbId, Db: v.(string)})
 	}
 
-	dbEntity.PwdEncrypt()
 	d.dbRepo.Update(dbEntity)
 }
 
@@ -145,75 +129,50 @@ func (d *dbAppImpl) Delete(id uint64) {
 	d.dbSqlRepo.DeleteBy(&entity.DbSql{DbId: id})
 }
 
-func (d *dbAppImpl) GetDatabases(ed *entity.Db) []string {
-	ed.Network = ed.GetNetwork()
-	databases := make([]string, 0)
-	var dbConn *sql.DB
-	var metaDb string
-	var getDatabasesSql string
-	if ed.Type == entity.DbTypeMysql {
-		metaDb = "information_schema"
-		getDatabasesSql = "SELECT SCHEMA_NAME AS dbname FROM SCHEMATA"
-	} else {
-		metaDb = "postgres"
-		getDatabasesSql = "SELECT datname AS dbname FROM pg_database"
-	}
-
-	dbConn, err := GetDbConn(ed, metaDb)
-	biz.ErrIsNilAppendErr(err, "数据库连接失败: %s")
-	defer dbConn.Close()
-
-	_, res, err := SelectDataByDb(dbConn, getDatabasesSql)
-	biz.ErrIsNilAppendErr(err, "获取数据库列表失败")
-	for _, re := range res {
-		databases = append(databases, re["dbname"].(string))
-	}
-	return databases
-}
-
 var mutex sync.Mutex
 
-func (da *dbAppImpl) GetDbInstance(id uint64, db string) *DbInstance {
+func (d *dbAppImpl) GetDbConnection(dbId uint64, dbName string) *DbConnection {
-	cacheKey := GetDbCacheKey(id, db)
+	cacheKey := GetDbCacheKey(dbId, dbName)
 
 	// Id不为0，则为需要缓存
-	needCache := id != 0
+	needCache := dbId != 0
 	if needCache {
 		load, ok := dbCache.Get(cacheKey)
 		if ok {
-			return load.(*DbInstance)
+			return load.(*DbConnection)
 		}
 	}
 	mutex.Lock()
 	defer mutex.Unlock()
 
-	d := da.GetById(id)
+	db := d.GetById(dbId)
-	biz.NotNil(d, "数据库信息不存在")
+	biz.NotNil(db, "数据库信息不存在")
-	biz.IsTrue(strings.Contains(d.Database, db), "未配置该库的操作权限")
+	biz.IsTrue(strings.Contains(" "+db.Database+" ", " "+dbName+" "), "未配置数据库【%s】的操作权限", dbName)
+
+	instance := d.dbInstanceApp.GetById(db.InstanceId)
 	// 密码解密
-	d.PwdDecrypt()
+	instance.PwdDecrypt()
 
-	dbInfo := new(DbInfo)
+	dbInfo := NewDbInfo(db, instance)
-	structx.Copy(dbInfo, d)
+	dbInfo.Database = dbName
-	dbInfo.Database = db
+	dbi := &DbConnection{Id: cacheKey, Info: dbInfo}
-	dbi := &DbInstance{Id: cacheKey, Info: dbInfo}
 
-	DB, err := GetDbConn(d, db)
+	conn, err := getInstanceConn(instance, dbName)
 	if err != nil {
 		dbi.Close()
-		global.Log.Errorf("连接db失败: %s:%d/%s", d.Host, d.Port, db)
+		logx.Errorf("连接db失败: %s:%d/%s", dbInfo.Host, dbInfo.Port, dbName)
 		panic(biz.NewBizErr(fmt.Sprintf("数据库连接失败: %s", err.Error())))
 	}
 
 	// 最大连接周期，超过时间的连接就close
-	// DB.SetConnMaxLifetime(100 * time.Second)
+	// conn.SetConnMaxLifetime(100 * time.Second)
 	// 设置最大连接数
-	DB.SetMaxOpenConns(5)
+	conn.SetMaxOpenConns(5)
 	// 设置闲置连接数
-	DB.SetMaxIdleConns(1)
+	conn.SetMaxIdleConns(1)
 
-	dbi.db = DB
+	dbi.db = conn
-	global.Log.Infof("连接db: %s:%d/%s", d.Host, d.Port, db)
+	logx.Infof("连接db: %s:%d/%s", dbInfo.Host, dbInfo.Port, dbName)
 	if needCache {
 		dbCache.Put(cacheKey, dbi)
 	}
@@ -235,13 +194,26 @@ type DbInfo struct {
 	SshTunnelMachineId int
 }
 
+func NewDbInfo(db *entity.Db, instance *entity.Instance) *DbInfo {
+	return &DbInfo{
+		Id:                 db.Id,
+		Name:               db.Name,
+		Type:               instance.Type,
+		Host:               instance.Host,
+		Port:               instance.Port,
+		Username:           instance.Username,
+		TagPath:            db.TagPath,
+		SshTunnelMachineId: instance.SshTunnelMachineId,
+	}
+}
+
 // 获取记录日志的描述
 func (d *DbInfo) GetLogDesc() string {
 	return fmt.Sprintf("DB[id=%d, tag=%s, name=%s, ip=%s:%d, database=%s]", d.Id, d.TagPath, d.Name, d.Host, d.Port, d.Database)
 }
 
-// db实例
+// db实例连接信息
-type DbInstance struct {
+type DbConnection struct {
 	Id   string
 	Info *DbInfo
 
@@ -250,18 +222,23 @@ type DbInstance struct {
 
 // 执行查询语句
 // 依次返回 列名数组，结果map，错误
-func (d *DbInstance) SelectData(execSql string) ([]string, []map[string]any, error) {
+func (d *DbConnection) SelectData(execSql string) ([]string, []map[string]any, error) {
-	return SelectDataByDb(d.db, execSql)
+	return selectDataByDb(d.db, execSql)
 }
 
 // 将查询结果映射至struct，可具体参考sqlx库
-func (d *DbInstance) SelectData2Struct(execSql string, dest any) error {
+func (d *DbConnection) SelectData2Struct(execSql string, dest any) error {
-	return Select2StructByDb(d.db, execSql, dest)
+	return select2StructByDb(d.db, execSql, dest)
+}
+
+// WalkTableRecord 遍历表记录
+func (d *DbConnection) WalkTableRecord(selectSql string, walk func(record map[string]any, columns []string)) error {
+	return walkTableRecord(d.db, selectSql, walk)
 }
 
 // 执行 update, insert, delete，建表等sql
 // 返回影响条数和错误
-func (d *DbInstance) Exec(sql string) (int64, error) {
+func (d *DbConnection) Exec(sql string) (int64, error) {
 	res, err := d.db.Exec(sql)
 	if err != nil {
 		return 0, err
@@ -270,22 +247,22 @@ func (d *DbInstance) Exec(sql string) (int64, error) {
 }
 
 // 获取数据库元信息实现接口
-func (di *DbInstance) GetMeta() DbMetadata {
+func (d *DbConnection) GetMeta() DbMetadata {
-	dbType := di.Info.Type
+	dbType := d.Info.Type
 	if dbType == entity.DbTypeMysql {
-		return &MysqlMetadata{di: di}
+		return &MysqlMetadata{di: d}
 	}
 	if dbType == entity.DbTypePostgres {
-		return &PgsqlMetadata{di: di}
+		return &PgsqlMetadata{di: d}
 	}
 	return nil
 }
 
 // 关闭连接
-func (d *DbInstance) Close() {
+func (d *DbConnection) Close() {
 	if d.db != nil {
 		if err := d.db.Close(); err != nil {
-			global.Log.Errorf("关闭数据库实例[%s]连接失败: %s", d.Id, err.Error())
+			logx.Errorf("关闭数据库实例[%s]连接失败: %s", d.Id, err.Error())
 		}
 		d.db = nil
 	}
@@ -297,8 +274,8 @@ func (d *DbInstance) Close() {
 var dbCache = cache.NewTimedCache(consts.DbConnExpireTime, 5*time.Second).
 	WithUpdateAccessTime(true).
 	OnEvicted(func(key any, value any) {
-		global.Log.Info(fmt.Sprintf("删除db连接缓存 id = %s", key))
+		logx.Info(fmt.Sprintf("删除db连接缓存 id = %s", key))
-		value.(*DbInstance).Close()
+		value.(*DbConnection).Close()
 	})
 
 func init() {
@@ -306,7 +283,7 @@ func init() {
 		// 遍历所有db连接实例，若存在db实例使用该ssh隧道机器，则返回true，表示还在使用中...
 		items := dbCache.Items()
 		for _, v := range items {
-			if v.Value.(*DbInstance).Info.SshTunnelMachineId == machineId {
+			if v.Value.(*DbConnection).Info.SshTunnelMachineId == machineId {
 				return true
 			}
 		}
@@ -318,47 +295,28 @@ func GetDbCacheKey(dbId uint64, db string) string {
 	return fmt.Sprintf("%d:%s", dbId, db)
 }
 
-func GetDbInstanceByCache(id string) *DbInstance {
+func selectDataByDb(db *sql.DB, selectSql string) ([]string, []map[string]any, error) {
-	if load, ok := dbCache.Get(id); ok {
+	// 列名用于前端表头名称按照数据库与查询字段顺序显示
-		return load.(*DbInstance)
+	var colNames []string
-	}
+	result := make([]map[string]any, 0, 16)
-	return nil
+	err := walkTableRecord(db, selectSql, func(record map[string]any, columns []string) {
-}
+		result = append(result, record)
-
+		if colNames == nil {
-func TestConnection(d *entity.Db) {
+			colNames = make([]string, len(columns))
-	// 验证第一个库是否可以连接即可
+			copy(colNames, columns)
-	DB, err := GetDbConn(d, strings.Split(d.Database, " ")[0])
+		}
-	biz.ErrIsNilAppendErr(err, "数据库连接失败: %s")
+	})
-	defer DB.Close()
-}
-
-// 获取数据库连接
-func GetDbConn(d *entity.Db, db string) (*sql.DB, error) {
-	var DB *sql.DB
-	var err error
-	if d.Type == entity.DbTypeMysql {
-		DB, err = getMysqlDB(d, db)
-	} else if d.Type == entity.DbTypePostgres {
-		DB, err = getPgsqlDB(d, db)
-	}
-
-	if err != nil {
-		return nil, err
-	}
-	err = DB.Ping()
-	if err != nil {
-		DB.Close()
-		return nil, err
-	}
-
-	return DB, nil
-}
-
-func SelectDataByDb(db *sql.DB, selectSql string) ([]string, []map[string]any, error) {
-	rows, err := db.Query(selectSql)
 	if err != nil {
 		return nil, nil, err
 	}
+	return colNames, result, nil
+}
+
+func walkTableRecord(db *sql.DB, selectSql string, walk func(record map[string]any, columns []string)) error {
+	rows, err := db.Query(selectSql)
+	if err != nil {
+		return err
+	}
 	// rows对象一定要close掉，如果出错，不关掉则会很迅速的达到设置最大连接数，
 	// 后面的链接过来直接报错或拒绝，实际上也没有起效果
 	defer func() {
@@ -366,44 +324,39 @@ func SelectDataByDb(db *sql.DB, selectSql string) ([]string, []map[string]any, e
 			rows.Close()
 		}
 	}()
-	colTypes, _ := rows.ColumnTypes()
+
+	colTypes, err := rows.ColumnTypes()
+	if err != nil {
+		return err
+	}
+	lenCols := len(colTypes)
+	// 列名用于前端表头名称按照数据库与查询字段顺序显示
+	colNames := make([]string, lenCols)
 	// 这里表示一行填充数据
-	scans := make([]any, len(colTypes))
+	scans := make([]any, lenCols)
 	// 这里表示一行所有列的值，用[]byte表示
-	vals := make([][]byte, len(colTypes))
+	values := make([][]byte, lenCols)
-	// 这里scans引用vals，把数据填充到[]byte里
+	for k, colType := range colTypes {
-	for k := range vals {
+		colNames[k] = colType.Name()
-		scans[k] = &vals[k]
+		// 这里scans引用values，把数据填充到[]byte里
+		scans[k] = &values[k]
 	}
 
-	result := make([]map[string]any, 0)
-	// 列名用于前端表头名称按照数据库与查询字段顺序显示
-	colNames := make([]string, 0)
-	// 是否第一次遍历，列名数组只需第一次遍历时加入
-	isFirst := true
 	for rows.Next() {
 		// 不Scan也会导致等待，该链接实际处于未工作的状态，然后也会导致连接数迅速达到最大
-		err := rows.Scan(scans...)
+		if err := rows.Scan(scans...); err != nil {
-		if err != nil {
+			return err
-			return nil, nil, err
 		}
 		// 每行数据
-		rowData := make(map[string]any)
+		rowData := make(map[string]any, lenCols)
-		// 把vals中的数据复制到row中
+		// 把values中的数据复制到row中
-		for i, v := range vals {
+		for i, v := range values {
-			colType := colTypes[i]
+			rowData[colTypes[i].Name()] = valueConvert(v, colTypes[i])
-			colName := colType.Name()
-			// 如果是第一行，则将列名加入到列信息中，由于map是无序的，所有需要返回列名的有序数组
-			if isFirst {
-				colNames = append(colNames, colName)
-			}
-			rowData[colName] = valueConvert(v, colType)
 		}
-		// 放入结果集
+		walk(rowData, colNames)
-		result = append(result, rowData)
-		isFirst = false
 	}
-	return colNames, result, nil
+
+	return nil
 }
 
 // 将查询的值转为对应列类型的实际值，不全部转为字符串
@@ -456,7 +409,7 @@ func valueConvert(data []byte, colType *sql.ColumnType) any {
 }
 
 // 查询数据结果映射至struct。可参考sqlx库
-func Select2StructByDb(db *sql.DB, selectSql string, dest any) error {
+func select2StructByDb(db *sql.DB, selectSql string, dest any) error {
 	rows, err := db.Query(selectSql)
 	if err != nil {
 		return err

server/internal/db/application/db_sql_exec.go

@@ -3,10 +3,9 @@ package application
 import (
 	"encoding/json"
 	"fmt"
+	"mayfly-go/internal/db/config"
 	"mayfly-go/internal/db/domain/entity"
 	"mayfly-go/internal/db/domain/repository"
-	sysapp "mayfly-go/internal/sys/application"
-	sysentity "mayfly-go/internal/sys/domain/entity"
 	"mayfly-go/pkg/biz"
 	"mayfly-go/pkg/model"
 	"strconv"
@@ -21,7 +20,7 @@ type DbSqlExecReq struct {
 	Sql          string
 	Remark       string
 	LoginAccount *model.LoginAccount
-	DbInstance   *DbInstance
+	DbConn       *DbConnection
 }
 
 type DbSqlExecRes struct {
@@ -85,12 +84,12 @@ func (d *dbSqlExecAppImpl) Exec(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error)
 	stmt, err := sqlparser.Parse(sql)
 	if err != nil {
 		// 就算解析失败也执行sql，让数据库来判断错误。如果是查询sql则简单判断是否有limit分页参数信息（兼容pgsql）
-		// global.Log.Warnf("sqlparse解析sql[%s]失败: %s", sql, err.Error())
+		// logx.Warnf("sqlparse解析sql[%s]失败: %s", sql, err.Error())
 		lowerSql := strings.ToLower(execSqlReq.Sql)
 		isSelect := strings.HasPrefix(lowerSql, "select")
 		if isSelect {
 			// 如果配置为0，则不校验分页参数
-			maxCount := sysapp.GetConfigApp().GetConfig(sysentity.ConfigKeyDbQueryMaxCount).IntValue(200)
+			maxCount := config.GetDbQueryMaxCount()
 			if maxCount != 0 {
 				biz.IsTrue(strings.Contains(lowerSql, "limit"), "请完善分页信息后执行")
 			}
@@ -99,7 +98,7 @@ func (d *dbSqlExecAppImpl) Exec(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error)
 		if isSelect || strings.HasPrefix(lowerSql, "show") {
 			execRes, execErr = doRead(execSqlReq)
 		} else {
-			execRes, execErr = doExec(execSqlReq.Sql, execSqlReq.DbInstance)
+			execRes, execErr = doExec(execSqlReq.Sql, execSqlReq.DbConn)
 		}
 		if execErr != nil {
 			return nil, execErr
@@ -125,7 +124,7 @@ func (d *dbSqlExecAppImpl) Exec(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error)
 	case *sqlparser.Insert:
 		execRes, err = doInsert(stmt, execSqlReq, dbSqlExecRecord)
 	default:
-		execRes, err = doExec(execSqlReq.Sql, execSqlReq.DbInstance)
+		execRes, err = doExec(execSqlReq.Sql, execSqlReq.DbConn)
 	}
 	if err != nil {
 		return nil, err
@@ -140,7 +139,7 @@ func (d *dbSqlExecAppImpl) saveSqlExecLog(isQuery bool, dbSqlExecRecord *entity.
 		d.dbSqlExecRepo.Insert(dbSqlExecRecord)
 		return
 	}
-	if sysapp.GetConfigApp().GetConfig(sysentity.ConfigKeyDbSaveQuerySQL).BoolValue(false) {
+	if config.GetDbSaveQuerySql() {
 		dbSqlExecRecord.Table = "-"
 		dbSqlExecRecord.OldValue = "-"
 		dbSqlExecRecord.Type = entity.DbSqlExecTypeQuery
@@ -161,7 +160,7 @@ func doSelect(selectStmt *sqlparser.Select, execSqlReq *DbSqlExecReq) (*DbSqlExe
 	if selectExprsStr == "*" || strings.Contains(selectExprsStr, ".*") ||
 		len(strings.Split(selectExprsStr, ",")) > 1 {
 		// 如果配置为0，则不校验分页参数
-		maxCount := sysapp.GetConfigApp().GetConfig(sysentity.ConfigKeyDbQueryMaxCount).IntValue(200)
+		maxCount := config.GetDbQueryMaxCount()
 		if maxCount != 0 {
 			limit := selectStmt.Limit
 			biz.NotNil(limit, "请完善分页信息后执行")
@@ -175,9 +174,9 @@ func doSelect(selectStmt *sqlparser.Select, execSqlReq *DbSqlExecReq) (*DbSqlExe
 }
 
 func doRead(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error) {
-	dbInstance := execSqlReq.DbInstance
+	dbConn := execSqlReq.DbConn
 	sql := execSqlReq.Sql
-	colNames, res, err := dbInstance.SelectData(sql)
+	colNames, res, err := dbConn.SelectData(sql)
 	if err != nil {
 		return nil, err
 	}
@@ -188,7 +187,7 @@ func doRead(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error) {
 }
 
 func doUpdate(update *sqlparser.Update, execSqlReq *DbSqlExecReq, dbSqlExec *entity.DbSqlExec) (*DbSqlExecRes, error) {
-	dbInstance := execSqlReq.DbInstance
+	dbConn := execSqlReq.DbConn
 
 	tableStr := sqlparser.String(update.TableExprs)
 	// 可能使用别名，故空格切割
@@ -203,12 +202,12 @@ func doUpdate(update *sqlparser.Update, execSqlReq *DbSqlExecReq, dbSqlExec *ent
 	}
 
 	// 获取表主键列名,排除使用别名
-	primaryKey := dbInstance.GetMeta().GetPrimaryKey(tableName)
+	primaryKey := dbConn.GetMeta().GetPrimaryKey(tableName)
 
 	updateColumnsAndPrimaryKey := strings.Join(updateColumns, ",") + "," + primaryKey
 	// 查询要更新字段数据的旧值，以及主键值
 	selectSql := fmt.Sprintf("SELECT %s FROM %s %s LIMIT 200", updateColumnsAndPrimaryKey, tableStr, where)
-	_, res, err := dbInstance.SelectData(selectSql)
+	_, res, err := dbConn.SelectData(selectSql)
 	if err == nil {
 		bytes, _ := json.Marshal(res)
 		dbSqlExec.OldValue = string(bytes)
@@ -219,11 +218,11 @@ func doUpdate(update *sqlparser.Update, execSqlReq *DbSqlExecReq, dbSqlExec *ent
 	dbSqlExec.Table = tableName
 	dbSqlExec.Type = entity.DbSqlExecTypeUpdate
 
-	return doExec(execSqlReq.Sql, dbInstance)
+	return doExec(execSqlReq.Sql, dbConn)
 }
 
 func doDelete(delete *sqlparser.Delete, execSqlReq *DbSqlExecReq, dbSqlExec *entity.DbSqlExec) (*DbSqlExecRes, error) {
-	dbInstance := execSqlReq.DbInstance
+	dbConn := execSqlReq.DbConn
 
 	tableStr := sqlparser.String(delete.TableExprs)
 	// 可能使用别名，故空格切割
@@ -233,14 +232,14 @@ func doDelete(delete *sqlparser.Delete, execSqlReq *DbSqlExecReq, dbSqlExec *ent
 
 	// 查询删除数据
 	selectSql := fmt.Sprintf("SELECT * FROM %s %s LIMIT 200", tableStr, where)
-	_, res, _ := dbInstance.SelectData(selectSql)
+	_, res, _ := dbConn.SelectData(selectSql)
 
 	bytes, _ := json.Marshal(res)
 	dbSqlExec.OldValue = string(bytes)
 	dbSqlExec.Table = table
 	dbSqlExec.Type = entity.DbSqlExecTypeDelete
 
-	return doExec(execSqlReq.Sql, dbInstance)
+	return doExec(execSqlReq.Sql, dbConn)
 }
 
 func doInsert(insert *sqlparser.Insert, execSqlReq *DbSqlExecReq, dbSqlExec *entity.DbSqlExec) (*DbSqlExecRes, error) {
@@ -250,11 +249,11 @@ func doInsert(insert *sqlparser.Insert, execSqlReq *DbSqlExecReq, dbSqlExec *ent
 	dbSqlExec.Table = table
 	dbSqlExec.Type = entity.DbSqlExecTypeInsert
 
-	return doExec(execSqlReq.Sql, execSqlReq.DbInstance)
+	return doExec(execSqlReq.Sql, execSqlReq.DbConn)
 }
 
-func doExec(sql string, dbInstance *DbInstance) (*DbSqlExecRes, error) {
+func doExec(sql string, dbConn *DbConnection) (*DbSqlExecRes, error) {
-	rowsAffected, err := dbInstance.Exec(sql)
+	rowsAffected, err := dbConn.Exec(sql)
 	execRes := "success"
 	if err != nil {
 		execRes = err.Error()

server/internal/db/application/instance.go

@@ -0,0 +1,150 @@
+package application
+
+import (
+	"database/sql"
+	"mayfly-go/internal/db/domain/entity"
+	"mayfly-go/internal/db/domain/repository"
+	"mayfly-go/pkg/biz"
+	"mayfly-go/pkg/model"
+)
+
+type Instance interface {
+	// GetPageList 分页获取数据库实例
+	GetPageList(condition *entity.InstanceQuery, pageParam *model.PageParam, toEntity any, orderBy ...string) *model.PageResult[any]
+
+	Count(condition *entity.InstanceQuery) int64
+
+	// GetInstanceBy 根据条件获取数据库实例
+	GetInstanceBy(condition *entity.Instance, cols ...string) error
+
+	// GetById 根据id获取数据库实例
+	GetById(id uint64, cols ...string) *entity.Instance
+
+	Save(instanceEntity *entity.Instance)
+
+	// Delete 删除数据库信息
+	Delete(id uint64)
+
+	// GetDatabases 获取数据库实例的所有数据库列表
+	GetDatabases(entity *entity.Instance) []string
+}
+
+func newInstanceApp(InstanceRepo repository.Instance) Instance {
+	return &instanceAppImpl{
+		instanceRepo: InstanceRepo,
+	}
+}
+
+type instanceAppImpl struct {
+	instanceRepo repository.Instance
+}
+
+// GetPageList 分页获取数据库实例
+func (app *instanceAppImpl) GetPageList(condition *entity.InstanceQuery, pageParam *model.PageParam, toEntity any, orderBy ...string) *model.PageResult[any] {
+	return app.instanceRepo.GetInstanceList(condition, pageParam, toEntity, orderBy...)
+}
+
+func (app *instanceAppImpl) Count(condition *entity.InstanceQuery) int64 {
+	return app.instanceRepo.Count(condition)
+}
+
+// GetInstanceBy 根据条件获取数据库实例
+func (app *instanceAppImpl) GetInstanceBy(condition *entity.Instance, cols ...string) error {
+	return app.instanceRepo.GetInstance(condition, cols...)
+}
+
+// GetById 根据id获取数据库实例
+func (app *instanceAppImpl) GetById(id uint64, cols ...string) *entity.Instance {
+	return app.instanceRepo.GetById(id, cols...)
+}
+
+func (app *instanceAppImpl) Save(instanceEntity *entity.Instance) {
+	// 默认tcp连接
+	instanceEntity.Network = instanceEntity.GetNetwork()
+
+	// 测试连接
+	if instanceEntity.Password != "" {
+		testConnection(instanceEntity)
+	}
+
+	// 查找是否存在该库
+	oldInstance := &entity.Instance{Host: instanceEntity.Host, Port: instanceEntity.Port, Username: instanceEntity.Username}
+	if instanceEntity.SshTunnelMachineId > 0 {
+		oldInstance.SshTunnelMachineId = instanceEntity.SshTunnelMachineId
+	}
+
+	err := app.GetInstanceBy(oldInstance)
+	if instanceEntity.Id == 0 {
+		biz.NotEmpty(instanceEntity.Password, "密码不能为空")
+		biz.IsTrue(err != nil, "该数据库实例已存在")
+		instanceEntity.PwdEncrypt()
+		app.instanceRepo.Insert(instanceEntity)
+	} else {
+		// 如果存在该库，则校验修改的库是否为该库
+		if err == nil {
+			biz.IsTrue(oldInstance.Id == instanceEntity.Id, "该数据库实例已存在")
+		}
+		instanceEntity.PwdEncrypt()
+		app.instanceRepo.Update(instanceEntity)
+	}
+}
+
+func (app *instanceAppImpl) Delete(id uint64) {
+	app.instanceRepo.Delete(id)
+}
+
+// getInstanceConn 获取数据库连接数据库实例
+func getInstanceConn(instance *entity.Instance, db string) (*sql.DB, error) {
+	var conn *sql.DB
+	var err error
+	if instance.Type == entity.DbTypeMysql {
+		conn, err = getMysqlDB(instance, db)
+	} else if instance.Type == entity.DbTypePostgres {
+		conn, err = getPgsqlDB(instance, db)
+	}
+
+	if err != nil {
+		return nil, err
+	}
+	err = conn.Ping()
+	if err != nil {
+		conn.Close()
+		return nil, err
+	}
+
+	return conn, nil
+}
+
+func testConnection(d *entity.Instance) {
+	// 不指定数据库名称
+	conn, err := getInstanceConn(d, "")
+	biz.ErrIsNilAppendErr(err, "数据库连接失败: %s")
+	defer conn.Close()
+}
+
+func (app *instanceAppImpl) GetDatabases(ed *entity.Instance) []string {
+	ed.Network = ed.GetNetwork()
+	databases := make([]string, 0)
+	var dbConn *sql.DB
+	var metaDb string
+	var getDatabasesSql string
+	if ed.Type == entity.DbTypeMysql {
+		metaDb = "information_schema"
+		getDatabasesSql = "SELECT SCHEMA_NAME AS dbname FROM SCHEMATA"
+	} else {
+		metaDb = "postgres"
+		getDatabasesSql = "SELECT datname AS dbname FROM pg_database"
+	}
+
+	dbConn, err := getInstanceConn(ed, metaDb)
+	biz.ErrIsNilAppendErr(err, "数据库连接失败: %s")
+	defer dbConn.Close()
+
+	_, res, err := selectDataByDb(dbConn, getDatabasesSql)
+	biz.ErrIsNilAppendErr(err, "获取数据库列表失败")
+	for _, re := range res {
+		databases = append(databases, re["dbname"].(string))
+	}
+
+	return databases
+}

server/internal/db/application/meta.go

@@ -64,6 +64,9 @@ type DbMetadata interface {
 	// 获取指定表的数据-分页查询
 	// @return columns: 列字段名；result: 结果集；error: 错误
 	GetTableRecord(tableName string, pageNum, pageSize int) ([]string, []map[string]any, error)
+
+	// WalkTableRecord 遍历指定表的数据
+	WalkTableRecord(tableName string, walk func(record map[string]any, columns []string)) error
 }
 
 // ------------------------- 元数据sql操作 -------------------------

server/internal/db/application/mysql_meta.go

@@ -13,7 +13,7 @@ import (
 	"github.com/go-sql-driver/mysql"
 )
 
-func getMysqlDB(d *entity.Db, db string) (*sql.DB, error) {
+func getMysqlDB(d *entity.Instance, db string) (*sql.DB, error) {
 	// SSH Conect
 	if d.SshTunnelMachineId > 0 {
 		sshTunnelMachine := machineapp.GetMachineApp().GetSshTunnelMachine(d.SshTunnelMachineId)
@@ -39,7 +39,7 @@ const (
 )
 
 type MysqlMetadata struct {
-	di *DbInstance
+	di *DbConnection
 }
 
 // 获取表基础元信息, 如表名等
@@ -152,10 +152,15 @@ func (mm *MysqlMetadata) GetTableIndex(tableName string) []Index {
 
 // 获取建表ddl
 func (mm *MysqlMetadata) GetCreateTableDdl(tableName string) string {
-	_, res, _ := mm.di.SelectData(fmt.Sprintf("show create table %s ", tableName))
+	_, res, err := mm.di.SelectData(fmt.Sprintf("show create table `%s` ", tableName))
+	biz.ErrIsNilAppendErr(err, "获取表结构失败: %s")
 	return res[0]["Create Table"].(string)
 }
 
 func (mm *MysqlMetadata) GetTableRecord(tableName string, pageNum, pageSize int) ([]string, []map[string]any, error) {
 	return mm.di.SelectData(fmt.Sprintf("SELECT * FROM %s LIMIT %d, %d", tableName, (pageNum-1)*pageSize, pageSize))
 }
+
+func (mm *MysqlMetadata) WalkTableRecord(tableName string, walk func(record map[string]any, columns []string)) error {
+	return mm.di.WalkTableRecord(fmt.Sprintf("SELECT * FROM %s", tableName), walk)
+}

server/internal/db/application/pgsql_meta.go

@@ -16,7 +16,7 @@ import (
 	"github.com/lib/pq"
 )
 
-func getPgsqlDB(d *entity.Db, db string) (*sql.DB, error) {
+func getPgsqlDB(d *entity.Instance, db string) (*sql.DB, error) {
 	driverName := d.Type
 	// SSH Conect
 	if d.SshTunnelMachineId > 0 {
@@ -28,7 +28,11 @@ func getPgsqlDB(d *entity.Db, db string) (*sql.DB, error) {
 		sql.Drivers()
 	}
 
-	dsn := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable", d.Host, d.Port, d.Username, d.Password, db)
+	var dbParam string
+	if db != "" {
+		dbParam = "dbname=" + db
+	}
+	dsn := fmt.Sprintf("host=%s port=%d user=%s password=%s %s sslmode=disable", d.Host, d.Port, d.Username, d.Password, dbParam)
 	if d.Params != "" {
 		dsn = fmt.Sprintf("%s %s", dsn, strings.Join(strings.Split(d.Params, "&"), " "))
 	}
@@ -67,7 +71,7 @@ const (
 )
 
 type PgsqlMetadata struct {
-	di *DbInstance
+	di *DbConnection
 }
 
 // 获取表基础元信息, 如表名等
@@ -179,3 +183,7 @@ func (pm *PgsqlMetadata) GetCreateTableDdl(tableName string) string {
 func (pm *PgsqlMetadata) GetTableRecord(tableName string, pageNum, pageSize int) ([]string, []map[string]any, error) {
 	return pm.di.SelectData(fmt.Sprintf("SELECT * FROM %s OFFSET %d LIMIT %d", tableName, (pageNum-1)*pageSize, pageSize))
 }
+
+func (pm *PgsqlMetadata) WalkTableRecord(tableName string, walk func(record map[string]any, columns []string)) error {
+	return pm.di.WalkTableRecord(fmt.Sprintf("SELECT * FROM %s", tableName), walk)
+}

server/internal/db/config/config.go

@@ -0,0 +1,18 @@
+package config
+
+import sysapp "mayfly-go/internal/sys/application"
+
+const (
+	ConfigKeyDbSaveQuerySQL  string = "DbSaveQuerySQL"  // 数据库是否记录查询相关sql
+	ConfigKeyDbQueryMaxCount string = "DbQueryMaxCount" // 数据库查询的最大数量
+)
+
+// 获取数据库最大查询数量配置
+func GetDbQueryMaxCount() int {
+	return sysapp.GetConfigApp().GetConfig(ConfigKeyDbQueryMaxCount).IntValue(200)
+}
+
+// 获取数据库是否记录查询相关sql配置
+func GetDbSaveQuerySql() bool {
+	return sysapp.GetConfigApp().GetConfig(ConfigKeyDbSaveQuerySQL).BoolValue(false)
+}

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

@@ -1,53 +1,16 @@
 package entity
 
 import (
-	"fmt"
-	"mayfly-go/internal/common/utils"
 	"mayfly-go/pkg/model"
 )
 
 type Db struct {
 	model.Model
 
-	Name               string `orm:"column(name)" json:"name"`
+	Name       string `orm:"column(name)" json:"name"`
-	Type               string `orm:"column(type)" json:"type"` // 类型，mysql oracle等
+	Database   string `orm:"column(database)" json:"database"`
-	Host               string `orm:"column(host)" json:"host"`
+	Remark     string `json:"remark"`
-	Port               int    `orm:"column(port)" json:"port"`
+	TagId      uint64
-	Network            string `orm:"column(network)" json:"network"`
+	TagPath    string
-	Username           string `orm:"column(username)" json:"username"`
+	InstanceId uint64
-	Password           string `orm:"column(password)" json:"-"`
-	Database           string `orm:"column(database)" json:"database"`
-	Params             string `json:"params"`
-	Remark             string `json:"remark"`
-	TagId              uint64
-	TagPath            string
-	SshTunnelMachineId int `orm:"column(ssh_tunnel_machine_id)" json:"sshTunnelMachineId"` // ssh隧道机器id
 }
-
-// 获取数据库连接网络, 若没有使用ssh隧道，则直接返回。否则返回拼接的网络需要注册至指定dial
-func (d *Db) GetNetwork() string {
-	network := d.Network
-	if d.SshTunnelMachineId <= 0 {
-		if network == "" {
-			return "tcp"
-		} else {
-			return network
-		}
-	}
-	return fmt.Sprintf("%s+ssh:%d", d.Type, d.SshTunnelMachineId)
-}
-
-func (d *Db) PwdEncrypt() {
-	// 密码替换为加密后的密码
-	d.Password = utils.PwdAesEncrypt(d.Password)
-}
-
-func (d *Db) PwdDecrypt() {
-	// 密码替换为解密后的密码
-	d.Password = utils.PwdAesDecrypt(d.Password)
-}
-
-const (
-	DbTypeMysql    = "mysql"
-	DbTypePostgres = "postgres"
-)

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

@@ -0,0 +1,54 @@
+package entity
+
+import (
+	"fmt"
+	"mayfly-go/internal/common/utils"
+	"mayfly-go/pkg/model"
+)
+
+type Instance struct {
+	model.Model
+
+	Name               string `orm:"column(name)" json:"name"`
+	Type               string `orm:"column(type)" json:"type"` // 类型，mysql oracle等
+	Host               string `orm:"column(host)" json:"host"`
+	Port               int    `orm:"column(port)" json:"port"`
+	Network            string `orm:"column(network)" json:"network"`
+	Username           string `orm:"column(username)" json:"username"`
+	Password           string `orm:"column(password)" json:"-"`
+	Params             string `orm:"column(params)" json:"params"`
+	Remark             string `orm:"column(remark)" json:"remark"`
+	SshTunnelMachineId int    `orm:"column(ssh_tunnel_machine_id)" json:"sshTunnelMachineId"` // ssh隧道机器id
+}
+
+func (d *Instance) TableName() string {
+	return "t_db_instance"
+}
+
+// 获取数据库连接网络, 若没有使用ssh隧道，则直接返回。否则返回拼接的网络需要注册至指定dial
+func (d *Instance) GetNetwork() string {
+	network := d.Network
+	if d.SshTunnelMachineId <= 0 {
+		if network == "" {
+			return "tcp"
+		} else {
+			return network
+		}
+	}
+	return fmt.Sprintf("%s+ssh:%d", d.Type, d.SshTunnelMachineId)
+}
+
+func (d *Instance) PwdEncrypt() {
+	// 密码替换为加密后的密码
+	d.Password = utils.PwdAesEncrypt(d.Password)
+}
+
+func (d *Instance) PwdDecrypt() {
+	// 密码替换为解密后的密码
+	d.Password = utils.PwdAesDecrypt(d.Password)
+}
+
+const (
+	DbTypeMysql    = "mysql"
+	DbTypePostgres = "postgres"
+)

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

@@ -2,23 +2,25 @@ package entity
 
 import "mayfly-go/pkg/model"
 
+// 数据库实例查询
+type InstanceQuery struct {
+	Id   uint64 `json:"id" form:"id"`
+	Name string `json:"name" form:"name"`
+	Host string `json:"host" form:"host"`
+}
+
 // 数据库查询实体，不与数据库表字段一一对应
 type DbQuery struct {
 	model.Model
 
 	Name     string `orm:"column(name)" json:"name"`
-	Type     string `orm:"column(type)" json:"type"` // 类型，mysql oracle等
-	Host     string `orm:"column(host)" json:"host"`
-	Port     int    `orm:"column(port)" json:"port"`
-	Network  string `orm:"column(network)" json:"network"`
-	Username string `orm:"column(username)" json:"username"`
-	Password string `orm:"column(password)" json:"-"`
 	Database string `orm:"column(database)" json:"database"`
-	Params   string `json:"params"`
 	Remark   string `json:"remark"`
 
-	TagIds  []uint64
+	TagIds  []uint64 `orm:"column(tag_id)"`
-	TagPath string `form:"tagPath"`
+	TagPath string   `form:"tagPath"`
+
+	InstanceId uint64 `form:"instanceId"`
 }
 
 type DbSqlExecQuery struct {

server/internal/db/domain/repository/db.go

@@ -6,12 +6,12 @@ import (
 )
 
 type Db interface {
-	// 分页获取机器信息列表
+	// 分页获取数据信息列表
 	GetDbList(condition *entity.DbQuery, pageParam *model.PageParam, toEntity any, orderBy ...string) *model.PageResult[any]
 
 	Count(condition *entity.DbQuery) int64
 
-	// 根据条件获取账号信息
+	// 根据条件获取数据库信息
 	GetDb(condition *entity.Db, cols ...string) error
 
 	// 根据id获取