refactor: 界面小优化

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

.gitignore

@@ -17,4 +17,10 @@
 */node_modules/
 **/vendor/
 .idea
+.vscode
 out
+
+server/docs/docker-compose
+server/config.yml
+server/ip2region.xdb
+mayfly-go.log

Dockerfile

@@ -0,0 +1,41 @@
+# 构建前端资源
+FROM node:18-alpine3.16 as fe-builder
+
+WORKDIR /mayfly
+
+COPY mayfly_go_web .
+
+RUN yarn
+
+RUN yarn build
+
+# 构建后端资源
+FROM golang:1.21.0 as be-builder
+
+ENV GOPROXY https://goproxy.cn
+WORKDIR /mayfly
+
+# Copy the go source for building server
+COPY server .
+
+RUN go mod download
+
+COPY --from=fe-builder /mayfly/dist /mayfly/static/static
+
+# Build
+RUN GO111MODULE=on CGO_ENABLED=0 GOOS=linux \
+    go build -a \
+    -o mayfly-go main.go
+
+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
+
+WORKDIR /mayfly
+
+COPY --from=be-builder /mayfly/mayfly-go /usr/local/bin/mayfly-go
+
+CMD ["mayfly-go"]

Makefile

@@ -0,0 +1,3 @@
+
+docker:
+	docker build . -t mayfly-go

README.md

@@ -20,67 +20,84 @@
   </a>
 </p>
 
-
 ### 介绍
-web版 **linux(终端[终端回放] 文件 脚本 进程)、数据库（mysql postgres）、redis(单机 哨兵 集群)、mongo统一管理操作平台**
 
+web 版 **linux(终端[终端回放] 文件 脚本 进程)、数据库（mysql postgres）、redis(单机 哨兵 集群)、mongo 统一管理操作平台**
 
 ### 开发语言与主要框架
+
 - 前端：typescript、vue3、element-plus
 - 后端：golang、gin、gorm
 
-
 ### 交流及问题反馈加 QQ 群
+
 <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=IdJSHW0jTMhmWFHBUS9a83wxtrxDDhFj&jump_from=webapi">119699946</a>
 
-
 ### 系统相关资料
+
 - 项目文档: https://www.yuque.com/may-fly/mayfly-go
 - 系统操作视频: https://space.bilibili.com/484091081/channel/collectiondetail?sid=392854
 
+### 演示环境
+
+http://go.mayfly.run
+账号/密码：test/test123.
 
 ### 系统核心功能截图
 
 ##### 记录操作记录
+
 ![记录操作记录](https://objs.gitee.io/mayfly-go-docs/home/log.jpg "屏幕截图.png")
 
 #### 机器操作
+
 ##### 状态查看
+
 ![状态查看](https://objs.gitee.io/mayfly-go-docs/home/machine-status.jpg "屏幕截图.png")
 
-##### ssh终端
+##### ssh 终端
+
 ![ssh终端](https://objs.gitee.io/mayfly-go-docs/home/machine-ssh.jpg "屏幕截图.png")
 
 ##### 文件操作
+
 ![文件操作](https://objs.gitee.io/mayfly-go-docs/home/file-dir.jpg "屏幕截图.png")
 ![文件操作](https://objs.gitee.io/mayfly-go-docs/home/file-content-update.jpg "屏幕截图.png")
 
-
 #### 数据库操作
-##### sql编辑器
+
+##### sql 编辑器
+
 ![sql编辑器](https://objs.gitee.io/mayfly-go-docs/home/dbms-sql-editor.jpg "屏幕截图.png")
 
 ##### 在线增删改查数据
+
 ![选表查数据](https://objs.gitee.io/mayfly-go-docs/home/dbms-show-table-data.jpg "屏幕截图.png")
 
+#### Redis 操作
 
-#### Redis操作
 ![数据](https://objs.gitee.io/mayfly-go-docs/home/redis-data-list.jpg "屏幕截图.png")
 
+#### Mongo 操作
 
-#### Mongo操作
 ![数据](https://objs.gitee.io/mayfly-go-docs/home/mongo-op.jpg "屏幕截图.png")
 
-
 ##### 系统管理
+
 ##### 账号管理
+
 ![账号管理](https://images.gitee.com/uploads/images/2021/0607/173919_a8d7dc18_1240250.png "屏幕截图.png")
 
 ##### 角色管理
+
 ![角色管理](https://images.gitee.com/uploads/images/2021/0607/174028_3654fb28_1240250.png "屏幕截图.png")
 
 ##### 资源管理
+
 ![资源管理](https://images.gitee.com/uploads/images/2021/0607/174436_e9e1535c_1240250.png "屏幕截图.png")
 
+**其他更多功能&操作指南可查看在线文档**: https://www.yuque.com/may-fly/mayfly-go
 
-**其他更多功能&操作指南可查看在线文档**:  https://www.yuque.com/may-fly/mayfly-go
+#### 💌 支持作者
+
+如果觉得项目不错，或者已经在使用了，希望你可以去 <a target="_blank" href="https://github.com/may-fly/mayfly-go">Github</a> 或者 <a target="_blank" href="https://gitee.com/objs/mayfly-go">Gitee</a> 帮我点个 ⭐ Star，这将是对我极大的鼓励与支持。

build_release.sh

@@ -74,8 +74,8 @@ function build() {
     # fi
 
     if [ "${copyDocScript}" == "1" ] ; then
-        echo_green "拷贝脚本等资源文件[config.yml、mayfly-go.sql、readme.txt、startup.sh、shutdown.sh]"
+        echo_green "拷贝脚本等资源文件[config.yml.example、mayfly-go.sql、readme.txt、startup.sh、shutdown.sh]"
-        cp ${server_folder}/config.yml ${toFolder}
+        cp ${server_folder}/config.yml.example ${toFolder}
         cp ${server_folder}/mayfly-go.sql ${toFolder}
         cp ${server_folder}/readme.txt ${toFolder}
         cp ${server_folder}/startup.sh ${toFolder}
@@ -104,9 +104,8 @@ function buildMac() {
 function buildDocker() {
     echo_yellow "-------------------构建docker镜像开始-------------------"
     imageVersion=$1
-    cd ${server_folder}
     imageName="mayflygo/mayfly-go:${imageVersion}"
-    docker build -t "${imageName}" .
+    docker build --platform linux/amd64 -t "${imageName}" .
     echo_green "docker镜像构建完成->[${imageName}]"
     echo_yellow "-------------------构建docker镜像结束-------------------"
 }
@@ -114,7 +113,6 @@ function buildDocker() {
 function buildxDocker() {
     echo_yellow "-------------------docker buildx构建镜像开始-------------------"
     imageVersion=$1
-    cd ${server_folder}
     imageName="ccr.ccs.tencentyun.com/mayfly/mayfly-go:${imageVersion}"
     docker buildx build --push --platform linux/amd64,linux/arm64 -t "${imageName}" .
     echo_green "docker多版本镜像构建完成->[${imageName}]"
@@ -147,6 +145,11 @@ function runBuild() {
         # 进入目标路径,并赋值全路径
         cd ${toPath}
         toPath=`pwd`
+
+        # read -p "是否构建前端[0|其他->否 1->是 2->构建并拷贝至server/static/static]: " runBuildWeb
+        runBuildWeb="2"
+        # 编译web前端
+        buildWeb ${runBuildWeb}
     fi
 
     if [[ "${buildType}" == "5" ]] || [[ "${buildType}" == "6" ]] ; then
@@ -157,12 +160,6 @@ function runBuild() {
         fi
     fi
 
-
-    # read -p "是否构建前端[0|其他->否 1->是 2->构建并拷贝至server/static/static]: " runBuildWeb
-    runBuildWeb="2"
-    # 编译web前端
-    buildWeb ${runBuildWeb}
-
     case ${buildType} in
          "1")
             buildLinuxAmd64 ${toPath} ${copyDocScript}
@@ -190,11 +187,13 @@ function runBuild() {
         ;;
     esac
 
-    echo_green "删除['${server_folder}/static/static']下静态资源文件."
+    if [[ "${buildType}" != "5" ]] && [[ "${buildType}" != "6" ]] ; then
-    # 删除静态资源文件，保留一个favicon.ico，否则后端启动会报错
+        echo_green "删除['${server_folder}/static/static']下静态资源文件."
-    rm -rf ${server_folder}/static/static/assets
+        # 删除静态资源文件，保留一个favicon.ico，否则后端启动会报错
-    rm -rf ${server_folder}/static/static/config.js
+        rm -rf ${server_folder}/static/static/assets
-    rm -rf ${server_folder}/static/static/index.html
+        rm -rf ${server_folder}/static/static/config.js
+        rm -rf ${server_folder}/static/static/index.html
+    fi
 }
 
-runBuild
+runBuild

docker-compose.yaml

@@ -2,19 +2,15 @@ version: "3.9"
 
 services:
   mysql:
-    image: "mysql:5.7"
+    image: "mysql:8"
     container_name: mayfly-go-mysql
     environment:
       MYSQL_ROOT_PASSWORD: 111049
       MYSQL_DATABASE: mayfly-go
       TZ: Asia/Shanghai
     volumes:
-      - ./docs/docker-compose/mysql/data/mydir:/mydir
+      - ./server/docs/docker-compose/mysql/data/mydir:/mydir
-      - ./docs/docker-compose/mysql/data/datadir:/var/lib/mysql
+      - ./server/docs/docker-compose/mysql/data/datadir:/var/lib/mysql
-      # 在宿主机编写 /apps/mysql/conf/my.cnf
-      - ./docs/docker-compose/mysql/my.cnf:/etc/my.cnf
-      # 数据库还原目录 可将需要还原的sql文件放在这里
-      - ./docs/docker-compose/mysql/init:/docker-entrypoint-initdb.d
     restart: always
 
   server:
@@ -28,6 +24,8 @@ services:
     environment:
       TZ: Asia/Shanghai
       WAIT_HOSTS: mysql:3306
+    volumes:
+      - ./server/config.yml.example:/mayfly/config.yml
     depends_on:
       - mysql
     restart: always

mayfly_go_web/package.json

@@ -11,19 +11,19 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "asciinema-player": "^3.5.0",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
-    "countup.js": "^2.0.7",
+    "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.40.0",
+    "monaco-editor": "^0.43.0",
     "monaco-sql-languages": "^0.11.0",
     "monaco-themes": "^0.4.4",
     "nprogress": "^0.2.0",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.6",
     "qrcode.vue": "^3.4.0",
     "screenfull": "^6.0.2",
     "sortablejs": "^1.13.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",
@@ -50,7 +52,7 @@
     "sass": "^1.62.0",
     "sass-loader": "^13.2.0",
     "typescript": "^5.0.2",
-    "vite": "^4.4.2",
+    "vite": "^4.4.9",
     "vue-eslint-parser": "^9.1.1"
   },
   "browserslist": [

mayfly_go_web/public/config.js

@@ -1,24 +1,25 @@
 window.globalConfig = {
     // 默认为空，以访问根目录为api请求地址。若前后端分离部署可单独配置该后端api请求地址
-    "BaseApiUrl": "",
+    BaseApiUrl: '',
-    "BaseWsUrl": ""
+    BaseWsUrl: '',
-}
+};
 
 // index.html添加百秒级时间戳，防止被浏览器缓存
-!function () {
+// !(function () {
-    let t = "t=" + new Date().getTime().toString().substring(0, 8)
+//     let t = 't=' + new Date().getTime().toString().substring(0, 8);
-    let search = location.search;
+//     let search = location.search;
-    let m = search && search.match(/t=\d*/g)
+//     let m = search && search.match(/t=\d*/g);
 
-    if (m[0]) {
+//     console.log(location);
-        if (m[0] !== t) {
+//     if (m[0]) {
-            location.search = search.replace(m[0], t)
+//         if (m[0] !== t) {
-        }
+//             location.search = search.replace(m[0], t);
-    } else {
+//         }
-        if (search.indexOf('?') > -1) {
+//     } else {
-            location.search = search + '&' + t
+//         if (search.indexOf('?') > -1) {
-        } else {
+//             location.search = search + '&' + t;
-            location.search = t
+//         } else {
-        }
+//             location.search = t;
-    }
+//         }
-}()
+//     }
+// })();

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.0',
+    version: 'v1.5.2',
 };
 
 export default config;

mayfly_go_web/src/common/enums.ts

@@ -1,7 +0,0 @@
-export enum ResultEnum {
-    SUCCESS = 200,
-    ERROR = 400,
-    PARAM_ERROR = 405,
-    SERVER_ERROR = 500,
-    NO_PERMISSION = 501,
-}

mayfly_go_web/src/common/openApi.ts

@@ -1,12 +1,16 @@
 import request from './request';
 
 export default {
-    login: (param: any) => request.post('/sys/accounts/login', param),
+    login: (param: any) => request.post('/auth/accounts/login', param),
-    otpVerify: (param: any) => request.post('/sys/accounts/otp-verify', param),
+    otpVerify: (param: any) => request.post('/auth/accounts/otp-verify', param),
-    changePwd: (param: any) => request.post('/sys/accounts/change-pwd', param),
     getPublicKey: () => request.get('/common/public-key'),
     getConfigValue: (params: any) => request.get('/sys/configs/value', params),
+    oauth2LoginConfig: () => request.get('/auth/oauth2-config'),
+    changePwd: (param: any) => request.post('/sys/accounts/change-pwd', param),
     captcha: () => request.get('/sys/captcha'),
-    logout: () => request.post('/sys/accounts/logout/{token}'),
+    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'),
+    ldapLogin: (param: any) => request.post('/auth/ldap/login', param),
 };

mayfly_go_web/src/common/pattern.ts

@@ -0,0 +1,4 @@
+export const AccountUsernamePattern = {
+    pattern: /^[a-zA-Z0-9_]{5,20}$/g,
+    message: '只允许输入5-20位大小写字母、数字、下划线',
+};

mayfly_go_web/src/common/request.ts

@@ -1,6 +1,5 @@
 import router from '../router';
 import Axios from 'axios';
-import { ResultEnum } from './enums';
 import config from './config';
 import { getSession } from './utils/storage';
 import { templateResolve } from './utils/string';
@@ -21,6 +20,14 @@ export interface Result {
     data?: any;
 }
 
+enum ResultEnum {
+    SUCCESS = 200,
+    ERROR = 400,
+    PARAM_ERROR = 405,
+    SERVER_ERROR = 500,
+    NO_PERMISSION = 501,
+}
+
 const baseUrl: string = config.baseApiUrl;
 const baseWsUrl: string = config.baseWsUrl;
 
@@ -60,34 +67,46 @@ service.interceptors.response.use(
     (response) => {
         // 获取请求返回结果
         const data: Result = response.data;
+        if (data.code === ResultEnum.SUCCESS) {
+            return data.data;
+        }
         // 如果提示没有权限，则移除token，使其重新登录
         if (data.code === ResultEnum.NO_PERMISSION) {
             router.push({
                 path: '/401',
             });
         }
-        if (data.code === ResultEnum.SUCCESS) {
+        return Promise.reject(data);
-            return data.data;
-        } else {
-            return Promise.reject(data);
-        }
     },
     (e: any) => {
+        const rejectPromise = Promise.reject(e);
+
+        const statusCode = e.response?.status;
+        if (statusCode == 500) {
+            notifyErrorMsg('服务器未知异常');
+            return rejectPromise;
+        }
+
+        if (statusCode == 404) {
+            notifyErrorMsg('请求接口未找到');
+            return rejectPromise;
+        }
+
         if (e.message) {
             // 对响应错误做点什么
             if (e.message.indexOf('timeout') != -1) {
-                notifyErrorMsg('网络超时');
+                notifyErrorMsg('网络请求超时');
-            } else if (e.message == 'Network Error') {
+                return rejectPromise;
+            }
+
+            if (e.message == 'Network Error') {
                 notifyErrorMsg('网络连接错误');
-            } else if (e.message.indexOf('404')) {
+                return rejectPromise;
-                notifyErrorMsg('请求接口找不到');
-            } else {
-                if (e.response.data) ElMessage.error(e.response.statusText);
-                else notifyErrorMsg('接口路径找不到');
             }
         }
 
-        return Promise.reject(e);
+        notifyErrorMsg('网络请求错误');
+        return rejectPromise;
     }
 );
 

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/sysconfig.ts

@@ -67,3 +67,14 @@ function convertBool(value: string, defaultValue: boolean) {
     }
     return value == '1' || value == 'true';
 }
+
+/**
+ * 获取LDAP登录配置
+ *
+ * @returns
+ */
+export async function getLdapEnabled(): Promise<any> {
+    const value = await openApi.getLdapEnabled();
+    return convertBool(value, false);
+}
+

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);
@@ -28,7 +33,7 @@ export function exportCsv(filename: string, columns: string[], datas: []) {
     let link = document.createElement('a');
     let exportContent = '\uFEFF';
     let blob = new Blob([exportContent + csvString], {
-        type: 'text/plain;charset=utrf-8',
+        type: 'text/plain;charset=utf-8',
     });
     link.id = 'download-csv';
     link.setAttribute('href', URL.createObjectURL(blob));

mayfly_go_web/src/components/enumtag/EnumTag.vue

@@ -12,13 +12,15 @@ const props = defineProps({
         required: true,
     },
     value: {
-        type: Object,
+        type: [Object, String, Number],
         required: true,
     },
 });
 
+const defaultType = 'primary';
+
 const state = reactive({
-    type: 'primary',
+    type: defaultType,
     color: '',
     enumLabel: '',
 });
@@ -50,6 +52,8 @@ const convert = (value: any) => {
     if (enumValue.tag) {
         state.color = enumValue.tag.color;
         state.type = enumValue.tag.type;
+    } else {
+        state.type = defaultType;
     }
 };
 </script>

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

@@ -102,7 +102,7 @@
 
             <el-table
                 v-bind="$attrs"
-                max-height="700"
+                :max-height="tableMaxHeight"
                 @selection-change="handleSelectionChange"
                 :data="props.data"
                 highlight-current-row
@@ -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
@@ -264,6 +258,7 @@ const state = reactive({
     // 输入框宽度
     inputWidth: "200px" as any,
     formatVal: '', // 格式化后的值
+    tableMaxHeight: window.innerHeight - 240 + 'px',
 })
 
 const {
@@ -274,6 +269,7 @@ const {
     loadingData,
     inputWidth,
     formatVal,
+    tableMaxHeight,
 } = toRefs(state)
 
 watch(() => props.queryForm, (newValue: any) => {
@@ -304,7 +300,7 @@ onMounted(() => {
     state.pageNum = props.pageNum;
     state.pageSize = pageSize;
     state.queryForm = props.queryForm;
-    state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4];
+    state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4, pageSize * 5];
 
     // 如果没传输入框宽度，则根据组件size设置默认宽度
     if (!props.inputWidth) {
@@ -312,8 +308,16 @@ onMounted(() => {
     } else {
         state.inputWidth = props.inputWidth;
     }
+
+    window.addEventListener('resize', () => {
+        calcuTableHeight();
+    });
 })
 
+const calcuTableHeight = () => {
+    state.tableMaxHeight = window.innerHeight - 240 + 'px';
+}
+
 const formatText = (data: any)=> {
     state.formatVal = '';
     try {
@@ -360,6 +364,7 @@ const reset = () => {
     for (let qi of props.query) {
         state.queryForm[qi.prop] = null;
     }
+
     changePageNum(1);
     emit('update:queryForm', state.queryForm);
     execQuery();

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/router/index.ts

@@ -18,7 +18,7 @@ import { useKeepALiveNames } from '@/store/keepAliveNames';
  * @method import.meta.glob
  * @link 参考：https://cn.vitejs.dev/guide/features.html#json
  */
-const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
+const viewsModules: any = import.meta.glob(['../views/**/*.{vue,tsx}', '!../views/layout/**/*.{vue,tsx}']);
 const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...viewsModules });
 
 // 添加静态路由
@@ -257,7 +257,7 @@ router.beforeEach(async (to, from, next) => {
     }
 
     const token = getSession('token');
-    if (to.path === '/login' && !token) {
+    if ((to.path === '/login' || to.path == '/oauth2/callback') && !token) {
         next();
         NProgress.done();
         return;

mayfly_go_web/src/router/route.ts

@@ -143,6 +143,14 @@ export const staticRoutes: Array<RouteRecordRaw> = [
             title: '没有权限',
         },
     },
+    {
+        path: '/oauth2/callback',
+        name: 'oauth2Callback',
+        component: () => import('@/views/oauth/Oauth2Callback.vue'),
+        meta: {
+            title: 'oauth2回调',
+        },
+    },
     {
         path: '/machine/terminal',
         name: 'machineTerminal',

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 />
@@ -25,8 +35,7 @@
             </el-icon>
         </div>
         <div class="layout-navbars-breadcrumb-user-icon">
-            <el-popover placement="bottom" trigger="click" :visible="state.isShowUserNewsPopover" :width="300"
+            <el-popover placement="bottom" trigger="click" :visible="state.isShowUserNewsPopover" :width="300" popper-class="el-popover-pupop-user-news">
-                popper-class="el-popover-pupop-user-news">
                 <template #reference>
                     <el-badge :is-dot="false" @click="state.isShowUserNewsPopover = !state.isShowUserNewsPopover">
                         <el-icon title="消息">
@@ -66,22 +75,24 @@
 </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';
-import { resetRoute } from '@/router/index.ts';
+import { resetRoute } from '@/router/index';
 import { storeToRefs } from 'pinia';
 import { useUserInfo } from '@/store/userInfo';
 import { useThemeConfig } from '@/store/themeConfig';
-import { clearSession, setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
+import { clearSession, setLocal, getLocal, removeLocal } from '@/common/utils/storage';
 import UserNews from '@/views/layout/navBars/breadcrumb/userNews.vue';
 import SearchMenu from '@/views/layout/navBars/breadcrumb/search.vue';
 import mittBus from '@/common/utils/mitt';
+import openApi from '@/common/openApi';
 
 const router = useRouter();
 const searchRef = ref();
 const state = reactive({
+    isDark: false,
     isScreenfull: false,
     isShowUserNewsPopover: false,
     disabledI18n: 'zh-cn',
@@ -122,8 +133,9 @@ const onHandleCommandClick = (path: string) => {
             showCancelButton: true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
-            beforeClose: (action, instance, done) => {
+            beforeClose: async (action, instance, done) => {
                 if (action === 'confirm') {
+                    await openApi.logout();
                     instance.confirmButtonLoading = true;
                     instance.confirmButtonText = '退出中';
                     setTimeout(() => {
@@ -145,12 +157,25 @@ const onHandleCommandClick = (path: string) => {
                     ElMessage.success('安全退出成功！');
                 }, 300);
             })
-            .catch(() => { });
+            .catch(() => {});
     } else {
         router.push(path);
     }
 };
 
+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();
@@ -187,6 +212,10 @@ const initComponentSize = () => {
 // 页面加载时
 onMounted(() => {
     if (getLocal('themeConfig')) {
+        const isDark = themeConfig.value.isDark;
+        state.isDark = isDark;
+        switchDark(isDark);
+
         initComponentSize();
     }
 });
@@ -244,4 +273,5 @@ onMounted(() => {
     ::v-deep(.el-badge__content.is-fixed) {
         top: 12px;
     }
-}</style>
+}
+</style>

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/component/AccountLogin.vue

@@ -37,6 +37,9 @@
                     </el-col>
                 </el-row>
             </el-form-item>
+            <el-form-item v-if="ldapEnabled" prop="ldapLogin">
+                <el-checkbox v-model="loginForm.ldapLogin" label="LDAP 登录" size="small" />
+            </el-form-item>
             <span v-if="showLoginFailTips" style="color: #f56c6c; font-size: 12px">
                 提示：登录失败超过{{ accountLoginSecurity.loginFailCount }}次后将被限制{{ accountLoginSecurity.loginFailMin }}分钟内不可再次登录
             </span>
@@ -104,6 +107,23 @@
                 </div>
             </template>
         </el-dialog>
+
+        <el-dialog title="修改基本信息" v-model="baseInfoDialog.visible" :close-on-click-modal="false" width="450px" :destroy-on-close="true">
+            <el-form :model="baseInfoDialog.form" :rules="baseInfoDialog.rules" ref="baseInfoFormRef" label-width="auto">
+                <el-form-item prop="username" label="用户名" required>
+                    <el-input v-model.trim="baseInfoDialog.form.username"></el-input>
+                </el-form-item>
+                <el-form-item prop="name" label="姓名" required>
+                    <el-input v-model.trim="baseInfoDialog.form.name"></el-input>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="updateUserInfo()" type="primary" :loading="loading.updateUserConfirm">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
@@ -112,14 +132,16 @@ import { nextTick, onMounted, ref, toRefs, reactive, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { initRouter } from '@/router/index';
-import { setSession, setUserInfo2Session, setUseWatermark2Session } from '@/common/utils/storage';
+import { getSession, setSession, setUserInfo2Session, setUseWatermark2Session } from '@/common/utils/storage';
 import { formatAxis } from '@/common/utils/format';
 import openApi from '@/common/openApi';
 import { RsaEncrypt } from '@/common/rsa';
-import { getAccountLoginSecurity, useWartermark } from '@/common/sysconfig';
+import { getAccountLoginSecurity, getLdapEnabled, useWartermark } from '@/common/sysconfig';
 import { letterAvatar } from '@/common/utils/string';
 import { useUserInfo } from '@/store/userInfo';
 import QrcodeVue from 'qrcode.vue';
+import { personApi } from '@/views/personal/api';
+import { AccountUsernamePattern } from '@/common/pattern';
 
 const rules = {
     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
@@ -133,6 +155,7 @@ const loginFormRef: any = ref(null);
 const changePwdFormRef: any = ref(null);
 const otpFormRef: any = ref(null);
 const otpCodeInputRef: any = ref(null);
+const baseInfoFormRef: any = ref(null);
 
 const state = reactive({
     accountLoginSecurity: {
@@ -148,7 +171,9 @@ const state = reactive({
         password: '',
         captcha: '',
         cid: '',
+        ldapLogin: false,
     },
+    loginRes: {} as any,
     changePwdDialog: {
         visible: false,
         form: {
@@ -178,14 +203,34 @@ const state = reactive({
             code: [{ required: true, message: '请输入OTP授权码', trigger: 'blur' }],
         },
     },
+    baseInfoDialog: {
+        visible: false,
+        form: {
+            username: '',
+            name: '',
+        },
+        rules: {
+            username: [
+                { required: true, message: '请输入用户名', trigger: 'blur' },
+                {
+                    pattern: AccountUsernamePattern.pattern,
+                    message: AccountUsernamePattern.message,
+                    trigger: ['blur'],
+                },
+            ],
+            name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        },
+    },
     loading: {
         signIn: false,
         changePwd: false,
         otpConfirm: false,
+        updateUserConfirm: false,
     },
+    ldapEnabled: false,
 });
 
-const { accountLoginSecurity, showLoginFailTips, captchaImage, loginForm, changePwdDialog, otpDialog, loading } = toRefs(state);
+const { accountLoginSecurity, showLoginFailTips, captchaImage, loginForm, changePwdDialog, otpDialog, baseInfoDialog, loading, ldapEnabled } = toRefs(state);
 
 onMounted(async () => {
     nextTick(async () => {
@@ -194,6 +239,10 @@ onMounted(async () => {
             state.accountLoginSecurity = res;
         }
         getCaptcha();
+
+        const ldap = await getLdapEnabled();
+        state.ldapEnabled = ldap;
+        state.loginForm.ldapLogin = ldap;
     });
     // 移除公钥, 方便后续重新获取
     sessionStorage.removeItem('RsaPublicKey');
@@ -248,7 +297,11 @@ const onSignIn = async () => {
     try {
         const loginReq = { ...state.loginForm };
         loginReq.password = await RsaEncrypt(originPwd);
-        loginRes = await openApi.login(loginReq);
+        if (state.loginForm.ldapLogin) {
+            loginRes = await openApi.ldapLogin(loginReq);
+        } else {
+            loginRes = await openApi.login(loginReq);
+        }
     } catch (e: any) {
         state.loading.signIn = false;
         state.loginForm.captcha = '';
@@ -265,14 +318,37 @@ const onSignIn = async () => {
         return;
     }
     state.showLoginFailTips = false;
+    loginResDeal(loginRes);
+};
+
+const updateUserInfo = async () => {
+    baseInfoFormRef.value.validate(async (valid: boolean) => {
+        if (!valid) {
+            return false;
+        }
+        try {
+            state.loading.updateUserConfirm = true;
+            const form = state.baseInfoDialog.form;
+            await personApi.updateAccount.request(state.baseInfoDialog.form);
+            state.baseInfoDialog.visible = false;
+            useUserInfo().userInfo.username = form.username;
+            useUserInfo().userInfo.name = form.name;
+            await toIndex();
+        } finally {
+            state.loading.updateUserConfirm = false;
+        }
+    });
+};
+
+const loginResDeal = (loginRes: any) => {
+    state.loginRes = loginRes;
     // 用户信息
     const userInfos = {
         name: loginRes.name,
-        username: state.loginForm.username,
+        username: loginRes.username,
         // 头像
-        photo: letterAvatar(state.loginForm.username),
+        photo: letterAvatar(loginRes.username),
         time: new Date().getTime(),
-        // permissions: loginRes.permissions,
         lastLoginTime: loginRes.lastLoginTime,
         lastLoginIp: loginRes.lastLoginIp,
     };
@@ -299,10 +375,24 @@ const onSignIn = async () => {
 
 // 登录成功后的跳转
 const signInSuccess = async (accessToken: string = '') => {
+    if (!accessToken) {
+        accessToken = getSession('token');
+    }
     // 存储 token 到浏览器缓存
     setSession('token', accessToken);
     // 初始化路由
     await initRouter();
+
+    // 判断是否为第一次oauth2登录，是的话需要用户填写姓名和用户名
+    if (state.loginRes.isFirstOauth2Login) {
+        state.baseInfoDialog.form.username = state.loginRes.username;
+        state.baseInfoDialog.visible = true;
+    } else {
+        await toIndex();
+    }
+};
+
+const toIndex = async () => {
     // 初始化登录成功时间问候语
     let currentTimeInfo = currentTime.value;
     // 登录成功，跳到转首页
@@ -349,6 +439,10 @@ const cancelChangePwd = () => {
     state.changePwdDialog.form.username = '';
     getCaptcha();
 };
+
+defineExpose({
+    loginResDeal,
+});
 </script>
 
 <style scoped lang="scss">

mayfly_go_web/src/views/login/index.vue

@@ -9,7 +9,7 @@
                 <el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
                     <el-tab-pane label="账号密码登录" name="account" :disabled="tabsActiveName === 'account'">
                         <transition name="el-zoom-in-center">
-                            <Account v-show="isTabPaneShow" />
+                            <Account v-show="isTabPaneShow" ref="loginForm" />
                         </transition>
                     </el-tab-pane>
                     <!-- <el-tab-pane label="手机号登录" name="mobile" :disabled="tabsActiveName === 'mobile'">
@@ -18,10 +18,16 @@
                         </transition>
                     </el-tab-pane> -->
                 </el-tabs>
-                <!-- <div class="mt10">
+                <div class="mt20" v-show="oauth2LoginConfig.enable">
-                    <el-button type="text" size="small">第三方登录</el-button>
+                    <el-button link size="small">第三方登录: </el-button>
-                    <el-button type="text" size="small">友情链接</el-button>
+                    <el-tooltip :content="oauth2LoginConfig.name" placement="top-start">
-                </div> -->
+                        <el-button link size="small" type="primary" @click="oauth2Login">
+                            <el-icon :size="18">
+                                <Link />
+                            </el-icon>
+                        </el-button>
+                    </el-tooltip>
+                </div>
             </div>
         </div>
         <!-- <div class="login-copyright">
@@ -32,23 +38,58 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, reactive } from 'vue';
+import { toRefs, reactive, onMounted, h, ref } from 'vue';
 import Account from '@/views/login/component/AccountLogin.vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
+import openApi from '@/common/openApi';
+import config from '@/common/config';
 
 const { themeConfig } = storeToRefs(useThemeConfig());
 const state = reactive({
     tabsActiveName: 'account',
     isTabPaneShow: true,
+    oauth2LoginConfig: {
+        name: 'OAuth2登录',
+        enable: false,
+    },
 });
 
-const { isTabPaneShow, tabsActiveName } = toRefs(state);
+const loginForm = ref<{ loginResDeal: (data: any) => void } | null>(null);
+
+const { isTabPaneShow, tabsActiveName, oauth2LoginConfig: oauth2LoginConfig } = toRefs(state);
 
 // 切换密码、手机登录
 const onTabsClick = () => {
     state.isTabPaneShow = !state.isTabPaneShow;
 };
+
+onMounted(async () => {
+    state.oauth2LoginConfig = await openApi.oauth2LoginConfig();
+});
+
+const oauth2Login = () => {
+    const width = 700;
+    const height = 500;
+    var iTop = (window.screen.height - 30 - height) / 2; //获得窗口的垂直位置;
+    var iLeft = (window.screen.width - 10 - width) / 2; //获得窗口的水平位置;
+    // 小窗口打开oauth2鉴权
+    let oauthWindow = window.open(config.baseApiUrl + '/auth/oauth2/login', 'oauth2', `height=${height},width=${width},top=${iTop},left=${iLeft},location=no`);
+    if (oauthWindow) {
+        const handler = (e: any) => {
+            if (e.data.action === 'oauthLogin') {
+                window.removeEventListener('message', handler);
+                loginForm.value!.loginResDeal(e.data);
+            }
+        };
+        window.addEventListener('message', handler);
+        setInterval(() => {
+            if (oauthWindow!.closed) {
+                window.removeEventListener('message', handler);
+            }
+        }, 1000);
+    }
+};
 </script>
 
 <style scoped lang="scss">
@@ -66,7 +107,7 @@ const onTabsClick = () => {
         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%);
@@ -80,10 +121,10 @@ const onTabsClick = () => {
         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: 480px;
+        height: 490px;
         overflow: hidden;
         z-index: 1;
 

mayfly_go_web/src/views/oauth/Oauth2Callback.vue

@@ -0,0 +1,39 @@
+<template>
+    <div></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import openApi from '@/common/openApi';
+
+const route = useRoute();
+
+onMounted(async () => {
+    try {
+        const queryParam = route.query;
+        // 使用hash路由，回调code可能会被设置到search
+        // 如 localhost:8888/?code=xxxx/oauth2/callback，导致route.query获取不到值
+        if (location.search) {
+            const searchParams = location.search.split('?')[1];
+            if (searchParams) {
+                for (let searchParam of searchParams.split('&')) {
+                    const searchParamSplit = searchParam.split('=');
+                    queryParam[searchParamSplit[0]] = searchParamSplit[1];
+                }
+            }
+        }
+
+        const res: any = await openApi.oauth2Callback(queryParam);
+        ElMessage.success('授权认证成功');
+        top?.opener.postMessage(res);
+        window.close();
+    } catch (e: any) {
+        setTimeout(() => {
+            window.close();
+        }, 1500);
+    }
+});
+</script>
+<style lang="scss"></style>

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" />
@@ -84,12 +84,17 @@ const { filterText } = toRefs(state);
 
 onMounted(async () => {
     if (!props.height) {
-        state.height = window.innerHeight - 147 + 'px';
+        setHeight();
+        window.onresize = () => setHeight();
     } else {
         state.height = props.height;
     }
 });
 
+const setHeight = () => {
+    state.height = window.innerHeight - 157 + 'px';
+};
+
 watch(filterText, (val) => {
     treeRef.value?.filter(val);
 });
@@ -163,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,10 +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 * 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';
@@ -110,7 +105,6 @@ import { dbApi } from './api';
 
 const Query = defineAsyncComponent(() => import('./component/tab/Query.vue'));
 const TableData = defineAsyncComponent(() => import('./component/tab/TableData.vue'));
-
 /**
  * 树节点类型
  */
@@ -161,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';
 };
 
@@ -213,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,
@@ -384,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) => {
@@ -439,290 +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关键字
-                sqlLanguage.keywords.forEach((item: any) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'keyword',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Keyword,
-                        insertText: item,
-                        range,
-                    });
-                });
-                // 操作符
-                sqlLanguage.operators.forEach((item: any) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'opt',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Operator,
-                        insertText: item,
-                        range,
-                    });
-                });
-                // 内置函数
-                sqlLanguage.builtinFunctions.forEach((item: any) => {
-                    suggestions.push({
-                        label: {
-                            label: item,
-                            description: 'func',
-                        },
-                        kind: monaco.languages.CompletionItemKind.Function,
-                        insertText: item,
-                        range,
-                    });
-                });
-                // 内置变量
-                sqlLanguage.builtinVariables.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">
@@ -748,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

@@ -31,6 +31,10 @@
                             <el-link type="success" :underline="false" icon="Document"></el-link>
                         </el-tooltip>
                     </el-upload>
+                    <el-divider direction="vertical" border-style="dashed" />
+                    <el-tooltip class="box-item" effect="dark" content="limit" placement="top">
+                        <el-link @click="onLimit()" type="success" :underline="false" icon="Operation"> </el-link>
+                    </el-tooltip>
                 </div>
 
                 <div style="float: right" class="fl">
@@ -93,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({
@@ -157,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;
@@ -182,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
     // 初始化一些主题
@@ -261,9 +295,6 @@ const initMonacoEditor = () => {
         },
     });
 
-    // 动态设置主题
-    // monaco.editor.setTheme('hc-black');
-
     // 如果sql有值，则默认赋值
     if (state.sql) {
         monacoEditor.getModel()?.setValue(state.sql);
@@ -485,6 +516,17 @@ const replaceSelection = (str: string, selection: any) => {
     });
 };
 
+const onLimit = () => {
+    let position = monacoEditor.getPosition() as monaco.Position;
+    let newText = ' limit 10';
+    monacoEditor?.getModel()?.applyEdits([
+        {
+            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+            text: newText,
+        },
+    ]);
+};
+
 /**
  * 导出当前页数据
  */
@@ -548,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">
@@ -564,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"
@@ -113,10 +113,12 @@
             <el-pagination
                 small
                 :total="count"
+                @size-change="handleSizeChange"
                 @current-change="pageChange()"
-                layout="prev, pager, next, total, jumper"
+                layout="prev, pager, next, total, sizes, jumper"
                 v-model:current-page="pageNum"
-                :page-size="DbInst.DefaultLimit"
+                v-model:page-size="pageSize"
+                :page-sizes="pageSizes"
             ></el-pagination>
         </el-row>
         <div style="font-size: 12px; padding: 0 10px; color: #606266">
@@ -136,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>
@@ -177,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';
 
@@ -188,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: {
@@ -212,8 +215,11 @@ const state = reactive({
     loading: false, // 是否在加载数据
     columns: [] as any,
     pageNum: 1,
+    pageSize: DbInst.DefaultLimit,
+    pageSizes: [20, 40, 80, 100, 200, 300, 400],
     count: 0,
     selectionDatas: [] as any,
+    condPopVisible: false,
     conditionDialog: {
         title: '',
         placeholder: '',
@@ -233,7 +239,7 @@ const state = reactive({
     hasUpdatedFileds: false,
 });
 
-const { datas, condition, loading, columns, pageNum, count, hasUpdatedFileds, conditionDialog, addDataDialog } = toRefs(state);
+const { datas, condition, loading, columns, pageNum, pageSize, pageSizes, count, hasUpdatedFileds, conditionDialog, addDataDialog } = toRefs(state);
 
 watch(
     () => props.tableHeight,
@@ -255,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 = '';
@@ -279,9 +298,9 @@ 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);
+        let sql = dbInst.getDefaultSelectSql(state.table, state.condition, state.orderBy, state.pageNum, state.pageSize);
         state.sql = sql;
         if (state.count > 0) {
             const colAndData: any = await dbInst.runSql(db, sql);
@@ -294,6 +313,12 @@ const selectData = async () => {
     }
 };
 
+const handleSizeChange = async (size: any) => {
+    state.pageNum = 1;
+    state.pageSize = size;
+    await selectData();
+};
+
 /**
  * 导出当前页数据
  */
@@ -318,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);
 };
 
 // 确认条件
@@ -417,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 = {};
@@ -425,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/lang/mysql.js

@@ -0,0 +1,63 @@
+// src/basic-languages/mysql/mysql.ts
+var language = {
+  keywords: [
+    "GROUP BY",
+    "ORDER BY",
+    "LEFT JOIN",
+    "RIGHT JOIN",
+    "INNER JOIN",
+    "SELECT * FROM",
+  ],
+  operators: [
+  ],
+  builtinFunctions: [
+  ],
+  builtinVariables: [],
+  replaceFunctions:[ // 自定义修改函数提示
+      
+    /**  字符串相关函数  */
+    { label: 'CONCAT',     insertText:'CONCAT(str1,str2,...)',         description: '多字符串合并' },
+    { label: 'ASCII',      insertText:'ASCII(char)',                   description: '返回字符的ASCII值' },
+    { label: 'BIT_LENGTH', insertText:'BIT_LENGTH(str1)',              description: '多字符串合并' },
+    { label: 'INSTR',      insertText:'INSTR(str,substr)',             description: '返回字符串substr所在str位置' },
+    { label: 'LEFT',       insertText:'LEFT(str,len)',                 description: '返回字符串str的左端len个字符' },
+    { label: 'RIGHT',      insertText:'RIGHT(str,len)',                description: '返回字符串str的右端len个字符' },
+    { label: 'MID',        insertText:'MID(str,pos,len)',              description: '返回字符串str的位置pos起len个字符' },
+    { label: 'SUBSTRING',  insertText:'SUBSTRING(exp, start, length)', description: '截取字符串' },
+    { label: 'REPLACE',    insertText:'REPLACE(str,from_str,to_str)',  description: '替换字符串' },
+    { label: 'REPEAT',     insertText:'REPEAT(str,count)',             description: '重复字符串count遍' },
+    { label: 'UPPER',      insertText:'UPPER(str)',                    description: '返回大写的字符串' },
+    { label: 'LOWER',      insertText:'LOWER(str)',                    description: '返回小写的字符串' },
+    { label: 'TRIM',       insertText:'TRIM(str)',                     description: '去除字符串首尾空格' },
+    /**  数学相关函数  */
+    { label: 'ABS',                insertText:'ABS(n)',         description: '返回n的绝对值' },
+    { label: 'FLOOR',              insertText:'FLOOR(n)',       description: '返回不大于n的最大整数' },
+    { label: 'CEILING',            insertText:'CEILING(n)',     description: '返回不小于n的最小整数值' },
+    { label: 'ROUND',              insertText:'ROUND(n,d)',     description: '返回n的四舍五入值,保留d(默认0)位小数' },
+    { label: 'RAND',               insertText:'RAND()',         description: '返回在范围0到1.0内的随机浮点值' },
+    
+    /** 日期函数 */  
+    { label: 'DATE',              insertText:'DATE(\'date\')',                      description: '返回指定表达式的日期部分' },
+    { label: 'WEEK',              insertText:'WEEK(\'date\')',                      description: '返回指定日期是一年中的第几周' },
+    { label: 'MONTH',             insertText:'MONTH(\'date\')',                     description: '返回指定日期的月份' },
+    { label: 'QUARTER',           insertText:'QUARTER(\'date\')',                   description: '返回指定日期是一年的第几个季度' },
+    { label: 'YEAR',              insertText:'YEAR(\'date\')',                      description: '返回指定日期的年份' },
+    { label: 'DATE_ADD',          insertText:'DATE_ADD(\'date\', interval 1 day)',  description: '日期函数加减运算' },
+    { label: 'DATE_SUB',          insertText:'DATE_SUB(\'date\', interval 1 day)',  description: '日期函数加减运算' },
+    { label: 'DATE_FORMAT',       insertText:'DATE_FORMAT(\'date\', \'%Y-%m-%d %h:%i:%s\')',       description: '' }, 
+    { label: 'CURDATE',           insertText:'CURDATE()',                      description: '返回当前日期' },
+    { label: 'CURTIME',           insertText:'CURTIME()',                      description: '返回当前时间' },
+    { label: 'NOW',               insertText:'NOW()',                          description: '返回当前日期时间' },
+    { label: 'DATEDIFF',          insertText:'DATEDIFF(expr1,expr2)',          description: '返回结束日expr1和起始日expr2之间的天数' },
+    { label: 'UNIX_TIMESTAMP',    insertText:'UNIX_TIMESTAMP()',               description: '返回指定时间(默认当前)unix时间戳' },
+    { label: 'FROM_UNIXTIME',     insertText:'FROM_UNIXTIME(timestamp)',       description: '把时间戳格式为年月日时分秒' },
+      
+    /**  逻辑函数 */  
+    { label: 'IFNULL',            insertText:'IFNULL(expression, alt_value)',  description: '表达式为空取第二个参数值,否则取表达式值' },
+    { label: 'IF',                insertText:'IF(expr1, expr2, expr3)',          description: 'expr1为true则取expr2，否则取expr3' },
+    { label: 'CASE',              insertText:'(CASE \n WHEN expr1 THEN expr2 \n ELSE expr3) col',       description: 'CASE WHEN THEN ELSE' },
+  ]
+};
+export {
+  language
+};

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/cronjob/CronJobEdit.vue

@@ -15,7 +15,7 @@
                 </el-form-item>
 
                 <el-form-item prop="cron" label="cron表达式">
-                    <el-input v-model="form.cron" placeholder="请输入cron表达式"></el-input>
+                    <el-input v-model="form.cron" placeholder="只支持5位表达式,不支持秒级.如 0/2 * * * * 表示每两分钟执行"></el-input>
                 </el-form-item>
 
                 <el-form-item prop="status" label="状态">
@@ -154,7 +154,7 @@ watch(props, async (newValue: any) => {
         state.form = { ...newValue.data };
         state.form.machineIds = await cronJobApi.relateMachineIds.request({ cronJobId: state.form.id });
     } else {
-        state.form = {} as any;
+        state.form = { script: '', status: 1 } as any;
         state.chooseMachines = [];
     }
 });

mayfly_go_web/src/views/ops/machine/cronjob/CronJobExecList.vue

@@ -56,7 +56,7 @@ const props = defineProps({
 const emit = defineEmits(['update:visible', 'update:data', 'cancel']);
 
 const queryConfig = [
-    TableQuery.slot('machineSelect', '机器', 'machineSelect'),
+    TableQuery.slot('machineId', '机器', 'machineSelect'),
     TableQuery.select('status', '状态').setOptions(Object.values(CronJobExecStatusEnum)),
 ];
 
@@ -64,7 +64,7 @@ const columns = ref([
     TableColumn.new('machineIp', '机器IP').setMinWidth(120),
     TableColumn.new('machineName', '机器名称').setMinWidth(100),
     TableColumn.new('status', '状态').typeTag(CronJobExecStatusEnum).setMinWidth(70),
-    TableColumn.new('res', '执行结果').setMinWidth(250),
+    TableColumn.new('res', '执行结果').setMinWidth(250).canBeautify(),
     TableColumn.new('execTime', '执行时间').isTime().setMinWidth(150),
 ]);
 

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,55 +35,81 @@
             </el-col>
 
             <el-col :span="20">
-                <el-container 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-tabs @tab-remove="removeDataTab" style="width: 100%; margin-left: 5px" v-model="state.activeName">
+                    <el-row v-if="nowColl">
-                        <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
+                        <el-descriptions :column="10" size="small" border>
-                            <el-row>
+                            <!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
-                                <el-col :span="2">
-                                    <div>
-                                        <el-link @click="findCommand(state.activeName)" icon="refresh" :underline="false" class=""> </el-link>
-                                        <el-link @click="onEditDoc(null)" class="ml5" type="primary" icon="plus" :underline="false"> </el-link>
-                                    </div>
-                                </el-col>
-                                <el-col :span="22">
-                                    <el-input
-                                        ref="findParamInputRef"
-                                        v-model="dt.findParamStr"
-                                        placeholder="点击输入相应查询条件"
-                                        @focus="showFindDialog(dt.key)"
-                                    >
-                                        <template #prepend>查询参数</template>
-                                    </el-input>
-                                </el-col>
-                            </el-row>
-                            <el-row :style="`height: ${dataHeight}; overflow: auto;`">
-                                <el-col :span="6" v-for="item in dt.datas" :key="item">
-                                    <el-card :body-style="{ padding: '0px', position: 'relative' }">
-                                        <el-input type="textarea" v-model="item.value" :rows="10" />
-                                        <div style="padding: 3px; float: right" class="mr5 mongo-doc-btns">
-                                            <div>
-                                                <el-link @click="onEditDoc(item)" :underline="false" type="success" icon="MagicStick"></el-link>
 
-                                                <!-- <el-divider direction="vertical" border-style="dashed" /> -->
+                            <el-descriptions-item label="ns" label-align="right">
+                                {{ nowColl.stats?.ns }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="count" label-align="right">
+                                {{ nowColl.stats?.count }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="avgObjSize" label-align="right">
+                                {{ formatByteSize(nowColl.stats?.avgObjSize) }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="size" label-align="right">
+                                {{ formatByteSize(nowColl.stats?.size) }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="totalSize" label-align="right">
+                                {{ formatByteSize(nowColl.stats?.totalSize) }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="storageSize" label-align="right">
+                                {{ formatByteSize(nowColl.stats?.storageSize) }}
+                            </el-descriptions-item>
+                            <el-descriptions-item label="freeStorageSize" label-align="right">
+                                {{ formatByteSize(nowColl.stats?.freeStorageSize) }}
+                            </el-descriptions-item>
+                        </el-descriptions>
+                    </el-row>
 
-                                                <!-- <el-link @click="onSaveDoc(item.value)" :underline="false"
+                    <el-row type="flex">
-                                                    type="warning" icon="DocumentChecked"></el-link> -->
+                        <el-tabs @tab-remove="removeDataTab" style="width: 100%; margin-left: 5px" v-model="state.activeName">
-
+                            <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
-                                                <el-divider direction="vertical" border-style="dashed" />
+                                <el-row>
-
+                                    <el-col :span="2">
-                                                <el-popconfirm @confirm="onDeleteDoc(item.value)" title="确定删除该文档?">
+                                        <div class="mt5">
-                                                    <template #reference>
+                                            <el-link @click="findCommand(state.activeName)" icon="refresh" :underline="false" class=""> </el-link>
-                                                        <el-link :underline="false" type="danger" icon="DocumentDelete"> </el-link>
+                                            <el-divider direction="vertical" border-style="dashed" />
-                                                    </template>
+                                            <el-link v-auth="perms.saveData" @click="onEditDoc(null)" type="primary" icon="plus" :underline="false"> </el-link>
-                                                </el-popconfirm>
-                                            </div>
                                         </div>
-                                    </el-card>
+                                    </el-col>
-                                </el-col>
+                                    <el-col :span="22">
-                            </el-row>
+                                        <el-input
-                        </el-tab-pane>
+                                            ref="findParamInputRef"
-                    </el-tabs>
+                                            v-model="dt.findParamStr"
-                </el-container>
+                                            placeholder="点击输入相应查询条件"
+                                            @focus="showFindDialog(dt.key)"
+                                        >
+                                            <template #prepend>查询参数</template>
+                                        </el-input>
+                                    </el-col>
+                                </el-row>
+                                <el-row :style="`height: ${dataHeight}; overflow: auto;`">
+                                    <el-col :span="6" v-for="item in dt.datas" :key="item">
+                                        <el-card :body-style="{ padding: '0px', position: 'relative' }">
+                                            <el-input type="textarea" v-model="item.value" :rows="10" />
+                                            <div style="padding: 3px; float: right" class="mr5 mongo-doc-btns">
+                                                <div>
+                                                    <el-link @click="onEditDoc(item)" :underline="false" type="success" icon="MagicStick"></el-link>
+
+                                                    <el-divider direction="vertical" border-style="dashed" />
+
+                                                    <el-popconfirm @confirm="onDeleteDoc(item.value)" title="确定删除该文档?" width="160">
+                                                        <template #reference>
+                                                            <el-link v-auth="perms.delData" :underline="false" type="danger" icon="DocumentDelete"> </el-link>
+                                                        </template>
+                                                    </el-popconfirm>
+                                                </div>
+                                            </div>
+                                        </el-card>
+                                    </el-col>
+                                </el-row>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </el-row>
+                </div>
             </el-col>
         </el-row>
 
@@ -120,7 +146,7 @@
             <template #footer>
                 <div>
                     <el-button @click="docEditDialog.visible = false">取 消</el-button>
-                    <el-button @click="onSaveDoc" type="primary">确 定</el-button>
+                    <el-button v-auth="perms.saveData" @click="onSaveDoc" type="primary">确 定</el-button>
                 </div>
             </template>
         </el-dialog>
@@ -131,7 +157,7 @@
 
 <script lang="ts" setup>
 import { mongoApi } from './api';
-import { defineAsyncComponent, reactive, ref, toRefs } from 'vue';
+import { computed, defineAsyncComponent, reactive, ref, toRefs } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import { isTrue, notBlank } from '@/common/assert';
@@ -141,6 +167,11 @@ import { formatByteSize } from '@/common/utils/format';
 
 const MonacoEditor = defineAsyncComponent(() => import('@/components/monaco/MonacoEditor.vue'));
 
+const perms = {
+    saveData: 'mongo:data:save',
+    delData: 'mongo:data:del',
+};
+
 /**
  * 树节点类型
  */
@@ -154,7 +185,7 @@ class NodeType {
 const findParamInputRef: any = ref(null);
 const state = reactive({
     tags: [],
-    dataHeight: `${window.innerHeight - 194}px`,
+    dataHeight: `${window.innerHeight - 194 - 35}px`,
     mongoList: [] as any,
     activeName: '', // 当前操作的tab
     dataTabs: {} as any, // 数据tabs
@@ -185,6 +216,10 @@ const state = reactive({
 
 const { dataHeight, findDialog, docEditDialog } = toRefs(state);
 
+const nowColl = computed(() => {
+    return getNowDataTab();
+});
+
 /**
  * instmap;  tagPaht -> mongo info[]
  */
@@ -279,15 +314,15 @@ const getCollections = async (id: any, database: string) => {
     });
 };
 
-const nodeClick = (data: any) => {
+const nodeClick = async (data: any) => {
     // 点击集合
     if (data.type === NodeType.Coll) {
         const { id, database, collection } = data.params;
-        changeCollection(id, database, collection);
+        await changeCollection(id, database, collection);
     }
 };
 
-const changeCollection = (id: any, schema: string, collection: string) => {
+const changeCollection = async (id: any, schema: string, collection: string) => {
     const label = `${id}:\`${schema}\`.${collection}`;
     let dataTab = state.dataTabs[label];
     if (!dataTab) {
@@ -345,6 +380,7 @@ const findCommand = async (key: string) => {
         ElMessage.error('filter或sort字段json字符串值错误。注意: json key需双引号');
         return;
     }
+
     const datas = await mongoApi.findCommand.request({
         id: dataTab.mongoId,
         database: dataTab.database,
@@ -355,6 +391,17 @@ const findCommand = async (key: string) => {
         skip: findParma.skip || 0,
     });
     state.dataTabs[key].datas = wrapDatas(datas);
+
+    // 获取coll stats
+    state.dataTabs[key].stats = await mongoApi.runCommand.request({
+        id: dataTab.mongoId,
+        database: dataTab.database,
+        command: [
+            {
+                collStats: dataTab.collection,
+            },
+        ],
+    });
 };
 
 /**

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

@@ -0,0 +1,352 @@
+<template>
+    <div>
+        <el-dialog width="800px" title="数据库列表" :before-close="close" v-model="databaseDialog.visible">
+            <div class="mb5">
+                <el-button @click="showCreateDbDialog" type="primary" icon="plus" size="small">新建</el-button>
+            </div>
+            <el-table :data="databaseDialog.data" :max-height="500">
+                <el-table-column min-width="130" property="Name" label="库名" />
+                <el-table-column min-width="90" property="SizeOnDisk" label="size">
+                    <template #default="scope">
+                        {{ formatByteSize(scope.row.SizeOnDisk) }}
+                    </template>
+                </el-table-column>
+                <el-table-column min-width="80" property="Empty" label="是否为空" />
+
+                <el-table-column min-width="150" label="操作">
+                    <template #default="scope">
+                        <el-link type="success" @click="showDatabaseStats(scope.row.Name)" plain size="small" :underline="false">stats</el-link>
+                        <el-divider direction="vertical" border-style="dashed" />
+                        <el-link type="primary" @click="showCollections(scope.row.Name)" plain size="small" :underline="false">集合</el-link>
+                        <el-divider direction="vertical" border-style="dashed" />
+                        <el-popconfirm @confirm="onDeleteDb(scope.row.Name)" title="确定删除该库?">
+                            <template #reference>
+                                <el-link type="danger" plain size="small" :underline="false">删除</el-link>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <el-dialog width="700px" :title="databaseDialog.statsDialog.title" v-model="databaseDialog.statsDialog.visible">
+                <el-descriptions title="库状态信息" :column="3" border>
+                    <el-descriptions-item label="db" label-align="right" align="center">
+                        {{ databaseDialog.statsDialog.data.db }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="collections" label-align="right" align="center">
+                        {{ databaseDialog.statsDialog.data.collections }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="objects" label-align="right" align="center">
+                        {{ databaseDialog.statsDialog.data.objects }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="indexes" label-align="right" align="center">
+                        {{ databaseDialog.statsDialog.data.indexes }}
+                    </el-descriptions-item>
+
+                    <el-descriptions-item label="avgObjSize" label-align="right" align="center">
+                        {{ formatByteSize(databaseDialog.statsDialog.data.avgObjSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="dataSize" label-align="right" align="center">
+                        {{ formatByteSize(databaseDialog.statsDialog.data.dataSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="totalSize" label-align="right" align="center">
+                        {{ formatByteSize(databaseDialog.statsDialog.data.totalSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="storageSize" label-align="right" align="center">
+                        {{ formatByteSize(databaseDialog.statsDialog.data.storageSize) }}
+                    </el-descriptions-item>
+
+                    <el-descriptions-item label="fsTotalSize" label-align="right" align="center">
+                        {{ formatByteSize(databaseDialog.statsDialog.data.fsTotalSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="fsUsedSize" label-align="right" align="center">
+                        {{ formatByteSize(databaseDialog.statsDialog.data.fsUsedSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="indexSize" label-align="right" align="center">
+                        {{ formatByteSize(databaseDialog.statsDialog.data.indexSize) }}
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-dialog>
+        </el-dialog>
+
+        <el-dialog width="600px" :title="collectionsDialog.title" v-model="collectionsDialog.visible">
+            <div class="mb5">
+                <el-button @click="showCreateCollectionDialog" type="primary" icon="plus" size="small">新建</el-button>
+            </div>
+            <el-table stripe :data="collectionsDialog.data" :max-height="500">
+                <el-table-column prop="name" label="名称" show-overflow-tooltip> </el-table-column>
+                <el-table-column min-width="80" label="操作">
+                    <template #default="scope">
+                        <el-link type="success" @click="showCollectionStats(scope.row.name)" plain size="small" :underline="false">stats</el-link>
+                        <el-divider direction="vertical" border-style="dashed" />
+                        <el-popconfirm @confirm="onDeleteCollection(scope.row.name)" width="160" title="确定删除该集合?">
+                            <template #reference>
+                                <el-link type="danger" plain size="small" :underline="false">删除</el-link>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <el-dialog width="700px" :title="collectionsDialog.statsDialog.title" v-model="collectionsDialog.statsDialog.visible">
+                <el-descriptions title="集合状态信息" :column="3" border>
+                    <el-descriptions-item label="ns" label-align="right" :span="2" align="center">
+                        {{ collectionsDialog.statsDialog.data.ns }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="count" label-align="right" align="center">
+                        {{ collectionsDialog.statsDialog.data.count }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="avgObjSize" label-align="right" align="center">
+                        {{ formatByteSize(collectionsDialog.statsDialog.data.avgObjSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="nindexes" label-align="right" align="center">
+                        {{ collectionsDialog.statsDialog.data.nindexes }}
+                    </el-descriptions-item>
+
+                    <el-descriptions-item label="size" label-align="right" align="center">
+                        {{ formatByteSize(collectionsDialog.statsDialog.data.size) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="totalSize" label-align="right" align="center">
+                        {{ formatByteSize(collectionsDialog.statsDialog.data.totalSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="storageSize" label-align="right" align="center">
+                        {{ formatByteSize(collectionsDialog.statsDialog.data.storageSize) }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="freeStorageSize" label-align="right" align="center">
+                        {{ formatByteSize(collectionsDialog.statsDialog.data.freeStorageSize) }}
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-dialog>
+        </el-dialog>
+
+        <el-dialog width="400px" title="新建库&集合" v-model="createDbDialog.visible" :destroy-on-close="true">
+            <el-form :model="createDbDialog.form" label-width="auto">
+                <el-form-item prop="dbName" label="库名" required>
+                    <el-input v-model="createDbDialog.form.dbName" clearable></el-input>
+                </el-form-item>
+                <el-form-item prop="collectionName" label="集合名" required>
+                    <el-input v-model="createDbDialog.form.collectionName" clearable></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div>
+                    <el-button @click="createDbDialog.visible = false">取 消</el-button>
+                    <el-button @click="onCreateDb" type="primary">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <el-dialog width="400px" title="新建集合" v-model="createCollectionDialog.visible" :destroy-on-close="true">
+            <el-form :model="createCollectionDialog.form" label-width="auto">
+                <el-form-item prop="name" label="集合名" required>
+                    <el-input v-model="createCollectionDialog.form.name" clearable></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div>
+                    <el-button @click="createCollectionDialog.visible = false">取 消</el-button>
+                    <el-button @click="onCreateCollection" type="primary">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { mongoApi } from './api';
+import { watch, toRefs, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { formatByteSize } from '@/common/utils/format';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+    },
+    id: {
+        type: [Number],
+        required: true,
+    },
+});
+
+//定义事件
+const emit = defineEmits(['update:visible']);
+
+const state = reactive({
+    databaseDialog: {
+        visible: false,
+        data: [],
+        statsDialog: {
+            visible: false,
+            data: {} as any,
+            title: '',
+        },
+    },
+    collectionsDialog: {
+        database: '',
+        visible: false,
+        data: [],
+        title: '',
+        statsDialog: {
+            visible: false,
+            data: {} as any,
+            title: '',
+        },
+    },
+    createCollectionDialog: {
+        visible: false,
+        form: {
+            name: '',
+        },
+    },
+    createDbDialog: {
+        visible: false,
+        form: {
+            dbName: '',
+            collectionName: '',
+        },
+    },
+});
+
+const { databaseDialog, collectionsDialog, createCollectionDialog, createDbDialog } = toRefs(state);
+
+watch(props, async (newValue: any) => {
+    if (!newValue.visible) {
+        state.databaseDialog.visible = false;
+        return;
+    }
+
+    showDatabases();
+});
+
+const close = () => {
+    emit('update:visible', false);
+};
+
+const showDatabases = async () => {
+    state.databaseDialog.data = (await mongoApi.databases.request({ id: props.id })).Databases;
+    state.databaseDialog.visible = true;
+};
+
+const showDatabaseStats = async (dbName: string) => {
+    state.databaseDialog.statsDialog.data = await mongoApi.runCommand.request({
+        id: props.id,
+        database: dbName,
+        command: [
+            {
+                dbStats: 1,
+            },
+        ],
+    });
+    state.databaseDialog.statsDialog.title = `'${dbName}' stats`;
+    state.databaseDialog.statsDialog.visible = true;
+};
+
+const showCollections = async (database: string) => {
+    state.collectionsDialog.database = database;
+    state.collectionsDialog.data = [];
+    setCollections(database);
+    state.collectionsDialog.title = `'${database}' 集合`;
+    state.collectionsDialog.visible = true;
+};
+
+const setCollections = async (database: string) => {
+    const res = await mongoApi.collections.request({ id: props.id, database });
+    const collections = [] as any;
+    for (let r of res) {
+        collections.push({ name: r });
+    }
+    state.collectionsDialog.data = collections;
+};
+
+/**
+ * 显示集合状态
+ */
+const showCollectionStats = async (collection: string) => {
+    state.collectionsDialog.statsDialog.data = await mongoApi.runCommand.request({
+        id: props.id,
+        database: state.collectionsDialog.database,
+        command: [
+            {
+                collStats: collection,
+            },
+        ],
+    });
+    state.collectionsDialog.statsDialog.title = `'${collection}' stats`;
+    state.collectionsDialog.statsDialog.visible = true;
+};
+
+/**
+ * 删除集合
+ */
+const onDeleteCollection = async (collection: string) => {
+    await mongoApi.runCommand.request({
+        id: props.id,
+        database: state.collectionsDialog.database,
+        command: [
+            {
+                drop: collection,
+            },
+        ],
+    });
+    ElMessage.success('集合删除成功');
+    setCollections(state.collectionsDialog.database);
+};
+
+const showCreateCollectionDialog = () => {
+    state.createCollectionDialog.visible = true;
+};
+
+const onCreateCollection = async () => {
+    const form = state.createCollectionDialog.form;
+    await mongoApi.runCommand.request({
+        id: props.id,
+        database: state.collectionsDialog.database,
+        command: [
+            {
+                create: form.name,
+            },
+        ],
+    });
+    ElMessage.success('集合创建成功');
+    state.createCollectionDialog.visible = false;
+    state.createCollectionDialog.form = {} as any;
+    setCollections(state.collectionsDialog.database);
+};
+
+const showCreateDbDialog = () => {
+    state.createDbDialog.visible = true;
+};
+
+const onCreateDb = async () => {
+    const form = state.createDbDialog.form;
+    await mongoApi.runCommand.request({
+        id: props.id,
+        database: form.dbName,
+        command: [
+            {
+                create: form.collectionName,
+            },
+        ],
+    });
+    ElMessage.success('数据库与集合创建成功');
+    state.createDbDialog.visible = false;
+    state.createDbDialog.form = {} as any;
+    showDatabases();
+};
+
+const onDeleteDb = async (db: string) => {
+    await mongoApi.runCommand.request({
+        id: props.id,
+        database: db,
+        command: [
+            {
+                dropDatabase: 1,
+            },
+        ],
+    });
+    ElMessage.success('库删除成功');
+    showDatabases();
+};
+</script>
+
+<style></style>

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

@@ -34,136 +34,15 @@
             <template #action="{ data }">
                 <el-button @click="showDatabases(data.id)" link>数据库</el-button>
 
-                <el-button type="primary" @click="editMongo(data)" link>编辑</el-button>
+                <el-button @click="showUsers(data.id)" link type="success">cmd</el-button>
+
+                <el-button @click="editMongo(data)" link type="primary">编辑</el-button>
             </template>
         </page-table>
 
-        <el-dialog width="800px" :title="databaseDialog.title" v-model="databaseDialog.visible">
+        <mongo-dbs v-model:visible="dbsVisible" :id="state.dbOps.dbId"></mongo-dbs>
-            <el-table :data="databaseDialog.data" size="small">
-                <el-table-column min-width="130" property="Name" label="库名" />
-                <el-table-column min-width="90" property="SizeOnDisk" label="size">
-                    <template #default="scope">
-                        {{ formatByteSize(scope.row.SizeOnDisk) }}
-                    </template>
-                </el-table-column>
-                <el-table-column min-width="80" property="Empty" label="是否为空" />
 
-                <el-table-column min-width="150" label="操作">
+        <mongo-run-command v-model:visible="usersVisible" :id="state.dbOps.dbId" />
-                    <template #default="scope">
-                        <el-link type="success" @click="showDatabaseStats(scope.row.Name)" plain size="small" :underline="false">stats</el-link>
-                        <el-divider direction="vertical" border-style="dashed" />
-                        <el-link type="primary" @click="showCollections(scope.row.Name)" plain size="small" :underline="false">集合</el-link>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <el-dialog width="700px" :title="databaseDialog.statsDialog.title" v-model="databaseDialog.statsDialog.visible">
-                <el-descriptions title="库状态信息" :column="3" border size="small">
-                    <el-descriptions-item label="db" label-align="right" align="center">
-                        {{ databaseDialog.statsDialog.data.db }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="collections" label-align="right" align="center">
-                        {{ databaseDialog.statsDialog.data.collections }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="objects" label-align="right" align="center">
-                        {{ databaseDialog.statsDialog.data.objects }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="indexes" label-align="right" align="center">
-                        {{ databaseDialog.statsDialog.data.indexes }}
-                    </el-descriptions-item>
-
-                    <el-descriptions-item label="avgObjSize" label-align="right" align="center">
-                        {{ formatByteSize(databaseDialog.statsDialog.data.avgObjSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="dataSize" label-align="right" align="center">
-                        {{ formatByteSize(databaseDialog.statsDialog.data.dataSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="totalSize" label-align="right" align="center">
-                        {{ formatByteSize(databaseDialog.statsDialog.data.totalSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="storageSize" label-align="right" align="center">
-                        {{ formatByteSize(databaseDialog.statsDialog.data.storageSize) }}
-                    </el-descriptions-item>
-
-                    <el-descriptions-item label="fsTotalSize" label-align="right" align="center">
-                        {{ formatByteSize(databaseDialog.statsDialog.data.fsTotalSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="fsUsedSize" label-align="right" align="center">
-                        {{ formatByteSize(databaseDialog.statsDialog.data.fsUsedSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="indexSize" label-align="right" align="center">
-                        {{ formatByteSize(databaseDialog.statsDialog.data.indexSize) }}
-                    </el-descriptions-item>
-                </el-descriptions>
-            </el-dialog>
-        </el-dialog>
-
-        <el-dialog width="600px" :title="collectionsDialog.title" v-model="collectionsDialog.visible">
-            <div>
-                <el-button @click="showCreateCollectionDialog" type="primary" icon="plus" size="small">新建</el-button>
-            </div>
-            <el-table border stripe :data="collectionsDialog.data" size="small">
-                <el-table-column prop="name" label="名称" show-overflow-tooltip> </el-table-column>
-                <el-table-column min-width="80" label="操作">
-                    <template #default="scope">
-                        <el-link type="success" @click="showCollectionStats(scope.row.name)" plain size="small" :underline="false">stats</el-link>
-                        <el-divider direction="vertical" border-style="dashed" />
-                        <el-popconfirm @confirm="onDeleteCollection(scope.row.name)" title="确定删除该集合?">
-                            <template #reference>
-                                <el-link type="danger" plain size="small" :underline="false">删除</el-link>
-                            </template>
-                        </el-popconfirm>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <el-dialog width="700px" :title="collectionsDialog.statsDialog.title" v-model="collectionsDialog.statsDialog.visible">
-                <el-descriptions title="集合状态信息" :column="3" border size="small">
-                    <el-descriptions-item label="ns" label-align="right" :span="2" align="center">
-                        {{ collectionsDialog.statsDialog.data.ns }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="count" label-align="right" align="center">
-                        {{ collectionsDialog.statsDialog.data.count }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="avgObjSize" label-align="right" align="center">
-                        {{ formatByteSize(collectionsDialog.statsDialog.data.avgObjSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="nindexes" label-align="right" align="center">
-                        {{ collectionsDialog.statsDialog.data.nindexes }}
-                    </el-descriptions-item>
-
-                    <el-descriptions-item label="size" label-align="right" align="center">
-                        {{ formatByteSize(collectionsDialog.statsDialog.data.size) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="totalSize" label-align="right" align="center">
-                        {{ formatByteSize(collectionsDialog.statsDialog.data.totalSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="storageSize" label-align="right" align="center">
-                        {{ formatByteSize(collectionsDialog.statsDialog.data.storageSize) }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="freeStorageSize" label-align="right" align="center">
-                        {{ formatByteSize(collectionsDialog.statsDialog.data.freeStorageSize) }}
-                    </el-descriptions-item>
-                </el-descriptions>
-            </el-dialog>
-        </el-dialog>
-
-        <el-dialog width="400px" title="新建集合" v-model="createCollectionDialog.visible" :destroy-on-close="true">
-            <el-form :model="createCollectionDialog.form" label-width="auto">
-                <el-form-item prop="name" label="集合名" required>
-                    <el-input v-model="createCollectionDialog.form.name" clearable></el-input>
-                </el-form-item>
-                <!-- <el-form-item label="描述:">
-                    <el-input v-model="showEnvDialog.envForm.remark" auto-complete="off"></el-input>
-                </el-form-item> -->
-            </el-form>
-            <template #footer>
-                <div>
-                    <el-button @click="createCollectionDialog.visible = false">取 消</el-button>
-                    <el-button @click="onCreateCollection" type="primary">确 定</el-button>
-                </div>
-            </template>
-        </el-dialog>
 
         <mongo-edit
             @val-change="valChange"
@@ -176,14 +55,16 @@
 
 <script lang="ts" setup>
 import { mongoApi } from './api';
-import { ref, toRefs, reactive, onMounted } from 'vue';
+import { defineAsyncComponent, ref, toRefs, reactive, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import MongoEdit from './MongoEdit.vue';
-import { formatByteSize } from '@/common/utils/format';
 import TagInfo from '../component/TagInfo.vue';
 import PageTable from '@/components/pagetable/PageTable.vue';
 import { TableColumn, TableQuery } from '@/components/pagetable';
 
+const MongoEdit = defineAsyncComponent(() => import('./MongoEdit.vue'));
+const MongoDbs = defineAsyncComponent(() => import('./MongoDbs.vue'));
+const MongoRunCommand = defineAsyncComponent(() => import('./MongoRunCommand.vue'));
+
 const pageTableRef: any = ref(null);
 
 const queryConfig = [TableQuery.slot('tagPath', '标签', 'tagPathSelect')];
@@ -193,7 +74,7 @@ const columns = ref([
     TableColumn.new('uri', '连接uri'),
     TableColumn.new('createTime', '创建时间').isTime(),
     TableColumn.new('creator', '创建人'),
-    TableColumn.new('action', '操作').isSlot().setMinWidth(100).fixedRight().alignCenter(),
+    TableColumn.new('action', '操作').isSlot().setMinWidth(145).fixedRight().alignCenter(),
 ]);
 
 const state = reactive({
@@ -215,126 +96,24 @@ const state = reactive({
         data: null as any,
         title: '新增mongo',
     },
-    databaseDialog: {
+    dbsVisible: false,
-        visible: false,
+    usersVisible: false,
-        data: [],
-        title: '',
-        statsDialog: {
-            visible: false,
-            data: {} as any,
-            title: '',
-        },
-    },
-    collectionsDialog: {
-        database: '',
-        visible: false,
-        data: [],
-        title: '',
-        statsDialog: {
-            visible: false,
-            data: {} as any,
-            title: '',
-        },
-    },
-    createCollectionDialog: {
-        visible: false,
-        form: {
-            name: '',
-        },
-    },
 });
 
-const { tags, list, total, selectionData, query, mongoEditDialog, databaseDialog, collectionsDialog, createCollectionDialog } = toRefs(state);
+const { tags, list, total, selectionData, query, mongoEditDialog, dbsVisible, usersVisible } = toRefs(state);
 
 onMounted(async () => {
     search();
 });
 
 const showDatabases = async (id: number) => {
-    // state.query.tagPath = row.tagPath
     state.dbOps.dbId = id;
-
+    state.dbsVisible = true;
-    state.databaseDialog.data = (await mongoApi.databases.request({ id })).Databases;
-    state.databaseDialog.title = `数据库列表`;
-    state.databaseDialog.visible = true;
 };
 
-const showDatabaseStats = async (dbName: string) => {
+const showUsers = async (id: number) => {
-    state.databaseDialog.statsDialog.data = await mongoApi.runCommand.request({
+    state.dbOps.dbId = id;
-        id: state.dbOps.dbId,
+    state.usersVisible = true;
-        database: dbName,
-        command: {
-            dbStats: 1,
-        },
-    });
-    state.databaseDialog.statsDialog.title = `'${dbName}' stats`;
-    state.databaseDialog.statsDialog.visible = true;
-};
-
-const showCollections = async (database: string) => {
-    state.collectionsDialog.database = database;
-    state.collectionsDialog.data = [];
-    setCollections(database);
-    state.collectionsDialog.title = `'${database}' 集合`;
-    state.collectionsDialog.visible = true;
-};
-
-const setCollections = async (database: string) => {
-    const res = await mongoApi.collections.request({ id: state.dbOps.dbId, database });
-    const collections = [] as any;
-    for (let r of res) {
-        collections.push({ name: r });
-    }
-    state.collectionsDialog.data = collections;
-};
-
-/**
- * 显示集合状态
- */
-const showCollectionStats = async (collection: string) => {
-    state.collectionsDialog.statsDialog.data = await mongoApi.runCommand.request({
-        id: state.dbOps.dbId,
-        database: state.collectionsDialog.database,
-        command: {
-            collStats: collection,
-        },
-    });
-    state.collectionsDialog.statsDialog.title = `'${collection}' stats`;
-    state.collectionsDialog.statsDialog.visible = true;
-};
-
-/**
- * 删除集合
- */
-const onDeleteCollection = async (collection: string) => {
-    await mongoApi.runCommand.request({
-        id: state.dbOps.dbId,
-        database: state.collectionsDialog.database,
-        command: {
-            drop: collection,
-        },
-    });
-    ElMessage.success('集合删除成功');
-    setCollections(state.collectionsDialog.database);
-};
-
-const showCreateCollectionDialog = () => {
-    state.createCollectionDialog.visible = true;
-};
-
-const onCreateCollection = async () => {
-    const form = state.createCollectionDialog.form;
-    await mongoApi.runCommand.request({
-        id: state.dbOps.dbId,
-        database: state.collectionsDialog.database,
-        command: {
-            create: form.name,
-        },
-    });
-    ElMessage.success('集合创建成功');
-    state.createCollectionDialog.visible = false;
-    state.createCollectionDialog.form = {} as any;
-    setCollections(state.collectionsDialog.database);
 };
 
 const deleteMongo = async () => {

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

@@ -0,0 +1,196 @@
+<template>
+    <div>
+        <el-dialog width="700px" title="runCommand" v-model="runCmdDialog.visible" :before-close="close" :destroy-on-close="true">
+            <el-form label-width="auto">
+                <el-row class="mb10">
+                    <el-col :span="12">
+                        <el-form-item label="模板">
+                            <el-select class="w100" @change="changeCmd" filterable v-model="runCmdDialog.cmdName" placeholder="选择命令模板">
+                                <el-option v-for="item in mongoCmds" :key="item.name" :label="`${item.name} | ${item.description}`" :value="item.name" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="库">
+                            <el-select v-model="runCmdDialog.db" filterable placeholder="选择库">
+                                <el-option v-for="item in dbs" :key="item.Name" :label="item.Name" :value="item.Name" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-form-item class="ml10">
+                            <el-button @click="onRunCommand" type="primary">Run</el-button>
+                            <el-tooltip effect="dark" placement="top">
+                                <template #content> 更多命令查看-> https://www.mongodb.com/docs/manual/reference/command/ </template>
+                                <span class="ml10">
+                                    <el-icon><InfoFilled /></el-icon>
+                                </span>
+                            </el-tooltip>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-form-item label="cmd">
+                    <monaco-editor style="width: 100%" height="235px" v-model="runCmdDialog.cmd" language="json" />
+                </el-form-item>
+
+                <el-form-item label="res">
+                    <monaco-editor style="width: 100%" height="235px" v-model="runCmdDialog.cmdRes" language="json" />
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { mongoApi } from './api';
+import { watch, defineAsyncComponent, toRefs, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const MonacoEditor = defineAsyncComponent(() => import('@/components/monaco/MonacoEditor.vue'));
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+    },
+    id: {
+        type: [Number],
+        required: true,
+    },
+});
+
+//定义事件
+const emit = defineEmits(['update:visible']);
+
+const mongoCmds = {
+    usersInfo: {
+        name: 'usersInfo',
+        description: '获取用户信息',
+        cmd: {
+            usersInfo: 1,
+            showCredentials: false,
+            showCustomData: false,
+            showPrivileges: false,
+            showAuthenticationRestrictions: false,
+            filter: {},
+        },
+    },
+    createUser: {
+        name: 'createUser',
+        description: '创建新用户',
+        cmd: {
+            createUser: '<username>',
+            pwd: '<cleartext password>',
+            roles: [
+                {
+                    role: '<role>',
+                    db: '<database>',
+                },
+            ],
+        },
+    },
+    grantRolesToUser: {
+        name: 'grantRolesToUser',
+        description: '授予对用户的额外角色',
+        cmd: {
+            grantRolesToUser: '<user>',
+            roles: [''],
+        },
+    },
+    dropUser: {
+        name: 'dropUser',
+        description: '删除用户',
+        cmd: {
+            dropUser: '<user>',
+        },
+    },
+    roleInfo: {
+        name: 'roleInfo',
+        description: '获取角色信息',
+        cmd: {
+            rolesInfo: 1,
+            showAuthenticationRestrictions: false,
+            showBuiltinRoles: true,
+            showPrivileges: false,
+        },
+    },
+    createRole: {
+        name: 'createRole',
+        description: '创建角色',
+        cmd: {
+            createRole: '<new role>',
+            privileges: [{ resource: {}, actions: ['<action>'] }],
+            roles: [{ role: '<role>', db: '<database>' }],
+            authenticationRestrictions: [
+                {
+                    clientSource: ['<IP> | <CIDR range>'],
+                    serverAddress: ['<IP> |<CIDR range>'],
+                },
+            ],
+            writeConcern: '<write concern document>',
+            comment: '<any>',
+        },
+    },
+};
+
+const state = reactive({
+    dbs: [] as any,
+    selectDbDisabled: false,
+    runCmdDialog: {
+        visible: false,
+        cmdName: '',
+        db: '',
+        cmd: '',
+        cmdRes: '',
+    },
+});
+
+const { dbs, runCmdDialog } = toRefs(state);
+
+watch(props, async (newValue: any) => {
+    if (!newValue.visible) {
+        state.runCmdDialog.visible = false;
+        return;
+    }
+    state.runCmdDialog.visible = newValue.visible;
+    state.dbs = (await mongoApi.databases.request({ id: props.id })).Databases;
+});
+
+const close = () => {
+    emit('update:visible', false);
+    state.runCmdDialog.cmd = '';
+    state.runCmdDialog.cmdRes = '';
+    state.runCmdDialog.cmdName = '';
+    state.runCmdDialog.db = '';
+    state.dbs = [];
+};
+
+const changeCmd = (val: any) => {
+    const mongoCmd = mongoCmds[val];
+    state.runCmdDialog.cmd = JSON.stringify(mongoCmd.cmd, null, 4);
+    state.runCmdDialog.db = state?.dbs[0]?.Name;
+    state.runCmdDialog.cmdRes = '';
+};
+
+const onRunCommand = async () => {
+    const orderCmds = [] as any;
+    const cmdObj = JSON.parse(state.runCmdDialog.cmd);
+
+    for (let item of Object.keys(cmdObj)) {
+        let obj = {};
+        obj[item] = cmdObj[item];
+        orderCmds.push(obj);
+    }
+
+    state.runCmdDialog.cmdRes = '';
+    const res = await mongoApi.runCommand.request({
+        id: props.id,
+        database: state.runCmdDialog.db,
+        command: orderCmds,
+    });
+    state.runCmdDialog.cmdRes = JSON.stringify(res, null, 4);
+    ElMessage.success('执行成功');
+};
+</script>
+
+<style></style>

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,74 +29,137 @@
                 </el-row>
             </el-col>
 
-            <el-col :span="20" style="border-left: 1px solid var(--el-card-border-color)">
+            <el-col v-loading="state.loadingKeyTree" :span="7">
-                <div class="mt10 ml5">
+                <div class="key-list-vtree">
-                    <el-col>
+                    <el-row>
-                        <el-form class="search-form" label-position="right" :inline="true" label-width="auto">
+                        <el-col :span="2">
-                            <el-form-item label="key" label-width="auto">
+                            <el-input v-model="state.keySeparator" placeholder="分割符" size="small" class="ml5" />
-                                <el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match" @clear="clear()" clearable></el-input>
+                        </el-col>
-                            </el-form-item>
+                        <el-col :span="18">
-                            <el-form-item label="count" label-width="auto">
+                            <el-input @clear="clear" v-model="scanParam.match" placeholder="match 支持*模糊key" clearable size="small" class="ml10" />
-                                <el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count"> </el-input>
+                        </el-col>
-                            </el-form-item>
+                        <el-col :span="4">
-                            <el-form-item>
+                            <el-button
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="searchKey()" type="success" icon="search" plain></el-button>
+                                class="ml15"
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="scan()" icon="bottom" plain>scan</el-button>
+                                :disabled="!scanParam.id || !scanParam.db"
-                                <el-button
+                                @click="searchKey()"
-                                    :disabled="!scanParam.id || !scanParam.db"
+                                type="success"
-                                    @click="showNewKeyDialog"
+                                icon="search"
-                                    type="primary"
+                                size="small"
-                                    icon="plus"
+                                plain
-                                    plain
+                            ></el-button>
-                                    v-auth="'redis:data:save'"
+                        </el-col>
-                                ></el-button>
+                    </el-row>
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="flushDb" type="danger" plain v-auth="'redis:data:save'"
+
-                                    >flush</el-button
+                    <el-row class="mb5 mt5">
+                        <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
+                            >
+
+                            <el-button
+                                v-auth="'redis:data:save'"
+                                :disabled="!scanParam.id || !scanParam.db"
+                                @click="showNewKeyDialog"
+                                type="primary"
+                                icon="plus"
+                                size="small"
+                                plain
+                                >新增key</el-button
+                            >
+
+                            <el-button
+                                :disabled="!scanParam.id || !scanParam.db"
+                                @click="flushDb"
+                                type="danger"
+                                plain
+                                v-auth="'redis:data:del'"
+                                size="small"
+                                icon="delete"
+                                >flush</el-button
+                            >
+                        </el-col>
+                        <el-col :span="5">
+                            <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 var(--el-border-color-light, #ebeef5)',
+                            marginLeft: '5px',
+                        }"
+                        ref="keyTreeRef"
+                        :highlight-current="true"
+                        :data="keyTreeData"
+                        :props="treeProps"
+                        :indent="8"
+                        node-key="key"
+                        :auto-expand-parent="false"
+                        :default-expanded-keys="Array.from(state.keyTreeExpanded)"
+                        @node-click="handleKeyTreeNodeClick"
+                        @node-expand="keyTreeNodeExpand"
+                        @node-collapse="keyTreeNodeCollapse"
+                        @node-contextmenu="rightClickNode"
+                    >
+                        <template #default="{ node, data }">
+                            <span class="el-dropdown-link key-list-custom-node" :title="node.label">
+                                <span v-if="data.type == 1">
+                                    <SvgIcon :size="15" :name="node.expanded ? 'folder-opened' : 'folder'" />
+                                </span>
+                                <span :class="'ml5 ' + (data.type == 1 ? 'folder-label' : 'key-label')">
+                                    {{ node.label }}
+                                </span>
+
+                                <span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
+                            </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-form-item>
+                            </el-row>
-                            <div style="float: right">
+                            <el-row class="mt5">
-                                <span>keys: {{ state.dbsize }}</span>
+                                <el-link @click="delKey(state.rightClickNode.key)" v-auth="'redis:data:del'" type="danger" icon="delete" :underline="false"
-                            </div>
+                                    >删除</el-link
-                        </el-form>
+                                >
-                    </el-col>
+                            </el-row>
-                    <el-table v-loading="state.loading" :data="state.keys" :height="tableHeight" stripe :highlight-current-row="true" style="cursor: pointer">
+                        </div>
-                        <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
+                    </div>
-                        <el-table-column prop="type" label="type" width="80">
+                </div>
-                            <template #default="scope">
+            </el-col>
-                                <el-tag :color="getTypeColor(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
+
-                            </template>
+            <el-col :span="13" style="border-left: 1px solid var(--el-card-border-color)">
-                        </el-table-column>
+                <div class="ml5">
-                        <el-table-column prop="ttl" label="ttl(过期时间)" width="140">
+                    <el-tabs @tab-remove="removeDataTab" style="width: 100%" v-model="state.activeName">
-                            <template #default="scope">
+                        <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
-                                {{ ttlConveter(scope.row.ttl) }}
+                            <key-detail :redisId="scanParam.id" :db="scanParam.db" :key-info="dt.keyInfo" @change-key="searchKey()" @del-key="delKey" />
-                            </template>
+                        </el-tab-pane>
-                        </el-table-column>
+                    </el-tabs>
-                        <el-table-column label="操作">
-                            <template #default="scope">
-                                <el-button @click="showKeyDetail(scope.row)" type="success" icon="search" plain size="small">查看 </el-button>
-                                <el-button v-auth="'redis:data:del'" @click="del(scope.row.key)" type="danger" icon="delete" plain size="small"
-                                    >删除
-                                </el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
                 </div>
             </el-col>
         </el-row>
 
         <div style="text-align: center; margin-top: 10px"></div>
 
-        <el-dialog title="Key详情" v-model="keyDetailDialog.visible" width="800px" :destroy-on-close="true" :close-on-click-modal="false">
-            <key-detail :redisId="scanParam.id" :db="scanParam.db" :key-info="keyDetailDialog.keyInfo" @change-key="searchKey()" />
-        </el-dialog>
-
         <el-dialog title="新增Key" v-model="newKeyDialog.visible" width="500px" :destroy-on-close="true" :close-on-click-modal="false">
             <el-form ref="keyForm" label-width="auto">
                 <el-form-item prop="key" label="键名">
-                    <el-input v-model.trim="keyDetailDialog.keyInfo.key" placeholder="请输入键名"></el-input>
+                    <el-input v-model.trim="newKeyDialog.keyInfo.key" placeholder="请输入键名"></el-input>
                 </el-form-item>
                 <el-form-item prop="type" label="类型">
-                    <el-select v-model="keyDetailDialog.keyInfo.type" default-first-option style="width: 100%" placeholder="请选择类型">
+                    <el-select v-model="newKeyDialog.keyInfo.type" default-first-option style="width: 100%" placeholder="请选择类型">
                         <el-option key="string" label="string" value="string"></el-option>
                         <el-option key="hash" label="hash" value="hash"></el-option>
                         <el-option key="set" label="set" value="set"></el-option>
@@ -109,7 +172,7 @@
             <template #footer>
                 <div class="dialog-footer">
                     <el-button @click="cancelNewKey()">取 消</el-button>
-                    <el-button v-auth="'machine:script:save'" type="primary" @click="newKey">确 定</el-button>
+                    <el-button v-auth="'redis:data:save'" type="primary" @click="newKey">确 定</el-button>
                 </div>
             </template>
         </el-dialog>
@@ -118,11 +181,12 @@
 
 <script lang="ts" setup>
 import { redisApi } from './api';
-import { defineAsyncComponent, toRefs, reactive, onMounted } from 'vue';
+import { ref, defineAsyncComponent, toRefs, reactive, onMounted, nextTick } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { isTrue, notBlank, notNull } from '@/common/assert';
 import { TagTreeNode } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
+import { keysToTree, sortByTreeNodes, keysToList } from './utils';
 
 const KeyDetail = defineAsyncComponent(() => import('./KeyDetail.vue'));
 
@@ -134,24 +198,39 @@ class NodeType {
     static Db = 2;
 }
 
+const treeProps = {
+    label: 'name',
+    children: 'children',
+    isLeaf: 'leaf',
+};
+
+const defaultCount = 250;
+
+const keyTreeRef: any = ref(null);
+const rightMenuRef: any = ref(null);
+
 const state = reactive({
-    loading: false,
-    tableHeight: 600,
     tags: [],
     redisList: [] as any,
     dbList: [],
-    query: {
+    keyTreeHeight: window.innerHeight - 147 - 30 + 'px',
-        tagPath: null,
+    loadingKeyTree: false,
-    },
+    keys: [] as any,
+    keySeparator: ':',
+    keyTreeData: [] as any,
+    keyTreeExpanded: new Set(),
+    activeName: '',
+    dataTabs: {} as any,
+    rightClickNode: {} as any,
     scanParam: {
         id: null as any,
         mode: '',
         db: null as any,
         match: null,
-        count: 10,
+        count: defaultCount,
         cursor: {},
     },
-    keyDetailDialog: {
+    newKeyDialog: {
         visible: false,
         keyInfo: {
             type: 'string',
@@ -159,21 +238,19 @@ const state = reactive({
             key: '',
         },
     },
-    newKeyDialog: {
-        visible: false,
-    },
-    keys: [],
     dbsize: 0,
 });
 
-const { tableHeight, scanParam, keyDetailDialog, newKeyDialog } = toRefs(state);
+const { scanParam, keyTreeData, newKeyDialog } = toRefs(state);
 
 onMounted(async () => {
     setHeight();
+    // 监听浏览器窗口大小变化,更新对应组件高度
+    window.onresize = () => setHeight();
 });
 
 const setHeight = () => {
-    state.tableHeight = window.innerHeight - 159;
+    state.keyTreeHeight = window.innerHeight - 174 + 'px';
 };
 
 /**
@@ -269,20 +346,20 @@ const getDbs = async (redisInfo: any) => {
     return dbs;
 };
 
-const scan = async () => {
+const scan = async (appendKey = false) => {
     isTrue(state.scanParam.id != null, '请先选择redis');
-    notBlank(state.scanParam.count, 'count不能为空');
+    notBlank(state.scanParam.db, '请先选择库');
 
     const match: string = state.scanParam.match || '';
     if (!match) {
-        isTrue(state.scanParam.count <= 100, 'key搜索条件为空时, count不能大于100');
+        state.scanParam.count = defaultCount;
     } else if (match.indexOf('*') != -1) {
         const dbsize = state.dbsize;
         // 如果为模糊搜索，并且搜索的key模式大于指定字符数，则将count设大点scan
         if (match.length > 10) {
             state.scanParam.count = dbsize > 100000 ? Math.floor(dbsize / 10) : 1000;
         } else {
-            state.scanParam.count = 100;
+            state.scanParam.count = defaultCount;
         }
     }
 
@@ -292,20 +369,161 @@ const scan = async () => {
         scanParam.count = Math.floor(state.scanParam.count / 3);
     }
 
-    state.loading = true;
     try {
+        state.loadingKeyTree = true;
         const res = await redisApi.scan.request(scanParam);
-        state.keys = res.keys;
+        // 追加key，则将新key合并至原keys（加载更多）
+        if (appendKey) {
+            state.keys = [...state.keys, ...res.keys];
+        } else {
+            state.keys = res.keys;
+        }
+        setKeyList(state.keys);
         state.dbsize = res.dbSize;
         state.scanParam.cursor = res.cursor;
     } finally {
-        state.loading = false;
+        state.loadingKeyTree = false;
+    }
+};
+
+const setKeyList = (keys: any) => {
+    state.keyTreeData = state.keySeparator ? keysToTree(keys, state.keySeparator, state.keyTreeExpanded) : keysToList(keys);
+    nextTick(() => {
+        // key长度小于指定数量，则展开所有节点
+        if (keys.length <= 20) {
+            expandAllKeyNode(state.keyTreeData);
+        }
+
+        sortByTreeNodes(keyTreeRef.value.root.childNodes);
+    });
+};
+
+// 展开所有节点
+const expandAllKeyNode = (nodes: any) => {
+    for (let node of nodes) {
+        if (!node.children) {
+            continue;
+        }
+        state.keyTreeExpanded.add(node.key);
+        for (let i = 0; i < node.children.length; i++) {
+            expandAllKeyNode(node.children);
+        }
+    }
+};
+
+const handleKeyTreeNodeClick = async (data: any) => {
+    hideAllMenus();
+    // 目录则不做处理
+    if (data.type == 1) {
+        return;
+    }
+
+    showKeyDetail(data.key);
+};
+
+const showKeyDetail = async (key: any, newTab = false) => {
+    let keyInfo;
+    if (typeof key == 'object') {
+        keyInfo = key;
+    } else {
+        if (state.dataTabs[key]) {
+            state.activeName = key;
+            return;
+        }
+        const res = await redisApi.keyInfo.request({ id: state.scanParam.id, db: state.scanParam.db, key: key });
+        keyInfo = {
+            key: key,
+            type: res.type,
+            timed: res.ttl,
+        };
+    }
+
+    let label = keyInfo.key;
+    if (label.length > 40) {
+        label = label.slice(0, 40) + '...';
+    }
+    const dataTab = {
+        key: keyInfo.key,
+        label,
+        keyInfo,
+    };
+
+    if (!newTab) {
+        delete state.dataTabs[state.activeName];
+    }
+
+    state.dataTabs[keyInfo.key] = dataTab;
+    state.activeName = keyInfo.key;
+};
+
+const removeDataTab = (targetName: string) => {
+    const tabNames = Object.keys(state.dataTabs);
+    let activeName = state.activeName;
+    tabNames.forEach((name, index) => {
+        if (name === targetName) {
+            const nextTab = tabNames[index + 1] || tabNames[index - 1];
+            if (nextTab) {
+                activeName = nextTab;
+            }
+        }
+    });
+    state.activeName = activeName;
+    delete state.dataTabs[targetName];
+};
+
+const keyTreeNodeExpand = (data: any, node: any, component: any) => {
+    state.keyTreeExpanded.add(data.key);
+    // async sort nodes
+    if (!node.customSorted) {
+        node.customSorted = true;
+        sortByTreeNodes(node.childNodes);
+    }
+};
+
+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();
+    await scan(false);
 };
 
 const clear = () => {
@@ -316,24 +534,17 @@ const clear = () => {
 };
 
 const resetScanParam = () => {
-    state.scanParam.count = 10;
     state.scanParam.match = null;
     state.scanParam.cursor = {};
-};
+    state.keyTreeExpanded.clear();
-
+    state.dataTabs = {};
-const showKeyDetail = async (row: any) => {
+    state.activeName = '';
-    const type = row.type;
-
-    state.keyDetailDialog.keyInfo.type = type;
-    state.keyDetailDialog.keyInfo.timed = row.ttl;
-    state.keyDetailDialog.keyInfo.key = row.key;
-    state.keyDetailDialog.visible = true;
 };
 
 const showNewKeyDialog = () => {
     notNull(state.scanParam.id, '请先选择redis');
     notNull(state.scanParam.db, '请选择要操作的库');
-    resetKeyDetailInfo();
+    resetNewKeyInfo();
     state.newKeyDialog.visible = true;
 };
 
@@ -358,12 +569,12 @@ const flushDb = () => {
 };
 
 const cancelNewKey = () => {
-    resetKeyDetailInfo();
+    resetNewKeyInfo();
     state.newKeyDialog.visible = false;
 };
 
 const newKey = async () => {
-    const keyInfo = state.keyDetailDialog.keyInfo;
+    const keyInfo = state.newKeyDialog.keyInfo;
     const keyType = keyInfo.type;
     const key = keyInfo.key;
     notBlank(key, '键名不能为空');
@@ -376,85 +587,45 @@ const newKey = async () => {
             value: '',
         });
     }
+
+    showKeyDetail(
+        {
+            ...keyInfo,
+        },
+        true
+    );
     state.newKeyDialog.visible = false;
-    state.keyDetailDialog.visible = true;
+
-    searchKey();
+    // 添加新增的key至key tree
+    state.keys.push(key);
+    setKeyList(state.keys);
 };
 
-const resetKeyDetailInfo = () => {
+const resetNewKeyInfo = () => {
-    state.keyDetailDialog.keyInfo.key = '';
+    state.newKeyDialog.keyInfo.key = '';
-    state.keyDetailDialog.keyInfo.type = 'string';
+    state.newKeyDialog.keyInfo.type = 'string';
-    state.keyDetailDialog.keyInfo.timed = -1;
+    state.newKeyDialog.keyInfo.timed = -1;
 };
 
-const del = (key: string) => {
+const delKey = (key: string) => {
     ElMessageBox.confirm(`确定删除[ ${key} ] 该key?`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
     })
-        .then(() => {
+        .then(async () => {
-            redisApi.delKey
+            await redisApi.delKey.request({
-                .request({
+                key,
-                    key,
+                id: state.scanParam.id,
-                    id: state.scanParam.id,
+                db: state.scanParam.db,
-                    db: state.scanParam.db,
+            });
-                })
+            ElMessage.success('删除成功！');
-                .then(() => {
+            searchKey();
-                    ElMessage.success('删除成功！');
+
-                    searchKey();
+            removeDataTab(key);
-                });
         })
         .catch(() => {});
 };
-
-const ttlConveter = (ttl: any) => {
-    if (ttl == -1 || ttl == 0) {
-        return '永久';
-    }
-    if (!ttl) {
-        ttl = 0;
-    }
-    let second = parseInt(ttl); // 秒
-    let min = 0; // 分
-    let hour = 0; // 小时
-    let day = 0;
-    if (second > 60) {
-        min = parseInt(second / 60 + '');
-        second = second % 60;
-        if (min > 60) {
-            hour = parseInt(min / 60 + '');
-            min = min % 60;
-            if (hour > 24) {
-                day = parseInt(hour / 24 + '');
-                hour = hour % 24;
-            }
-        }
-    }
-    let result = '' + second + 's';
-    if (min > 0) {
-        result = '' + min + 'm:' + result;
-    }
-    if (hour > 0) {
-        result = '' + hour + 'h:' + result;
-    }
-    if (day > 0) {
-        result = '' + day + 'd:' + result;
-    }
-    return result;
-};
-
-const getTypeColor = (type: string) => {
-    if (type == 'string') {
-        return '#E4F5EB';
-    }
-    if (type == 'hash') {
-        return '#F9E2AE';
-    }
-    if (type == 'set') {
-        return '#A8DEE0';
-    }
-};
 </script>
 
 <style lang="scss">
@@ -463,4 +634,42 @@ const getTypeColor = (type: string) => {
         margin-bottom: unset;
     }
 }
+
+.key-list-vtree {
+    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;
+    text-overflow: ellipsis;
+    /*note the following 2 items should be same value, may not consist with itemSize*/
+    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

@@ -21,6 +21,10 @@ const props = defineProps({
     content: {
         type: String,
     },
+    height: {
+        type: String,
+        default: '0px',
+    },
 });
 
 const components = shallowReactive({
@@ -53,14 +57,24 @@ const viewerComponent = computed(() => {
 watch(
     () => props.content,
     (val: any) => {
-        state.content = val;
+        setContent(val);
     }
 );
 
 onMounted(() => {
-    state.content = props.content as any;
+    setContent(props.content as any);
 });
 
+const setContent = (content: string) => {
+    state.content = content;
+    try {
+        JSON.parse(content);
+        state.selectedView = 'Json';
+    } catch (e) {
+        state.selectedView = 'Text';
+    }
+};
+
 const getContent = () => {
     return viewerRef.value.getContent();
 };
@@ -79,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;
@@ -90,12 +104,13 @@ defineExpose({ getContent });
 }
 
 // 默认文本框样式
+
 .format-viewer-container .el-textarea textarea {
     font-size: 14px;
-    height: calc(100vh - 536px);
+    height: calc(100vh - 536px + v-bind(height));
 }
 
 .format-viewer-container .monaco-editor-content {
-    height: calc(100vh - 550px) !important;
+    height: calc(100vh - 550px + v-bind(height)) !important;
 }
 </style>

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

@@ -6,8 +6,9 @@
                 ref="keyHeader"
                 :redis-id="redisId"
                 :db="db"
-                :key-info="keyInfo"
+                :key-info="state.keyInfo"
                 @refresh-content="refreshContent"
+                @del-key="delKey"
                 @change-key="changeKey"
                 class="key-header-info"
             >
@@ -19,7 +20,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, shallowReactive, reactive, computed, toRefs } from 'vue';
+import { defineAsyncComponent, watch, ref, shallowReactive, reactive, computed, toRefs, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import KeyHeader from './KeyHeader.vue';
 
@@ -51,10 +52,11 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['update:visible', 'changeKey', 'valChange']);
+const emit = defineEmits(['update:visible', 'changeKey', 'delKey']);
 
 const state = reactive({
     redisId: 0,
+    keyInfo: {} as any,
 });
 
 const componentMap = {
@@ -78,18 +80,35 @@ const refreshContent = () => {
     keyValueRef.value?.initData();
 };
 
+const delKey = () => {
+    emit('delKey', state.keyInfo.key);
+};
+
 const changeKey = () => {
     emit('changeKey');
 };
 
-const {} = toRefs(state);
+const setKeyInfo = (val: any) => {
+    state.keyInfo.timed = val.timed;
+    state.keyInfo.key = val.key;
+    state.keyInfo.type = val.type;
+};
 
-// watch(
+watch(
-//     () => props.keyInfo,
+    () => props.keyInfo,
-//     (val) => {
+    (val) => {
-//         state.keyInfo = val;
+        setKeyInfo(val);
-//     }
+    },
-// );
+    {
+        deep: true,
+    }
+);
+
+onMounted(() => {
+    setKeyInfo(props.keyInfo);
+});
+
+const {} = toRefs(state);
 </script>
 <style lang="scss">
 .key-tab-container {

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

@@ -2,9 +2,9 @@
     <div>
         <!-- key name -->
         <div class="key-header-item key-name-input">
-            <el-input ref="keyNameInput" v-model="keyInfo.key" title="点击重命名" placeholder="KeyName">
+            <el-input ref="keyNameInput" v-model="ki.key" title="点击重命名" placeholder="KeyName">
                 <template #prepend>
-                    <span class="key-detail-type">{{ keyInfo.type }}</span>
+                    <span class="key-detail-type">{{ ki.type }}</span>
                 </template>
 
                 <template #suffix>
@@ -15,12 +15,20 @@
 
         <!-- key ttl -->
         <div class="key-header-item key-ttl-input">
-            <el-input type="number" v-model.number="keyInfo.timed" placeholder="单位(秒),负数永久" title="点击修改过期时间">
+            <el-input type="number" v-model.number="ki.timed" placeholder="单位(秒),负数永久" title="点击修改过期时间">
                 <template #prepend>
                     <span slot="prepend">TTL</span>
                 </template>
 
                 <template #suffix>
+                    <!-- 时间转换 -->
+                    <el-tooltip effect="dark" placement="top">
+                        <template #content>{{ ttlConveter(ki.timed) }}</template>
+                        <span class="ml10">
+                            <el-icon class="mr5"><InfoFilled /></el-icon>
+                        </span>
+                    </el-tooltip>
+
                     <!-- save ttl -->
                     <SvgIcon v-auth="'redis:data:save'" @click="ttlKey" title="点击修改过期时间" name="check" />
                 </template>
@@ -29,7 +37,8 @@
 
         <!-- del & refresh btn -->
         <div class="key-header-item key-header-btn-con">
-            <el-button slot="reference" ref="refreshBtn" type="success" @click="refreshKey" icon="refresh" title="刷新"></el-button>
+            <el-button slot="reference" type="success" @click="refreshKey" icon="refresh" title="刷新"></el-button>
+            <el-button v-auth="'redis:data:del'" slot="reference" type="danger" @click="delKey" icon="delete" title="删除"></el-button>
         </div>
     </div>
 </template>
@@ -50,7 +59,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refreshContent', 'changeKey', 'valChange']);
+const emit = defineEmits(['refreshContent', 'delKey', 'changeKey']);
 
 const state = reactive({
     redisId: 0,
@@ -59,6 +68,11 @@ const state = reactive({
         type: '',
         timed: -1,
     } as any,
+    ki: {
+        key: '',
+        type: '',
+        timed: -1,
+    } as any,
     oldKey: '',
 });
 
@@ -77,14 +91,18 @@ const refreshKey = async () => {
     emit('refreshContent');
 };
 
+const delKey = async () => {
+    emit('delKey', state.ki.key);
+};
+
 const renameKey = async () => {
-    if (!state.oldKey || state.keyInfo.key == state.oldKey) {
+    if (!state.oldKey || state.ki.key == state.oldKey) {
         return;
     }
     await redisApi.renameKey.request({
         id: props.redisId,
         db: props.db,
-        newKey: state.keyInfo.key,
+        newKey: state.ki.key,
         key: state.oldKey,
     });
     ElMessage.success('设置成功');
@@ -96,7 +114,7 @@ const ttlKey = async () => {
         return;
     }
     // ttl <= 0，则持久化该key
-    if (state.keyInfo.timed <= 0) {
+    if (state.ki.timed <= 0) {
         try {
             await ElMessageBox.confirm('确定持久化该key?', 'Warning', {
                 confirmButtonText: '确认',
@@ -107,15 +125,15 @@ const ttlKey = async () => {
             return;
         }
         await persistKey();
-        state.keyInfo.timed = -1;
+        state.ki.timed = -1;
         return;
     }
 
     await redisApi.expireKey.request({
         id: props.redisId,
         db: props.db,
-        key: state.keyInfo.key,
+        key: state.ki.key,
-        seconds: state.keyInfo.timed,
+        seconds: state.ki.timed,
     });
     ElMessage.success('设置成功');
     emit('changeKey');
@@ -131,15 +149,58 @@ const persistKey = async () => {
     emit('changeKey');
 };
 
-const { keyInfo, oldKey } = toRefs(state);
+const { ki } = toRefs(state);
 
-// watch(
+const setKeyInfo = (val: any) => {
-//     () => props.keyInfo,
+    state.ki.timed = val.timed;
-//     (val) => {
+    state.ki.key = val.key;
-//         state.keyInfo = val;
+    state.oldKey = val.key;
-//         state.keyName = state.keyInfo.key;
+    state.ki.type = val.type;
-//     }
+};
-// );
+
+watch(
+    () => props.keyInfo,
+    (val: any) => {
+        setKeyInfo(val);
+    },
+    { deep: true }
+);
+
+const ttlConveter = (ttl: any) => {
+    if (ttl == -1 || ttl == 0) {
+        return '永久';
+    }
+    if (!ttl) {
+        ttl = 0;
+    }
+    let second = parseInt(ttl); // 秒
+    let min = 0; // 分
+    let hour = 0; // 小时
+    let day = 0;
+    if (second > 60) {
+        min = parseInt(second / 60 + '');
+        second = second % 60;
+        if (min > 60) {
+            hour = parseInt(min / 60 + '');
+            min = min % 60;
+            if (hour > 24) {
+                day = parseInt(hour / 24 + '');
+                hour = hour % 24;
+            }
+        }
+    }
+    let result = '' + second + 's';
+    if (min > 0) {
+        result = '' + min + 'm:' + result;
+    }
+    if (hour > 0) {
+        result = '' + hour + 'h:' + result;
+    }
+    if (day > 0) {
+        result = '' + day + 'd:' + result;
+    }
+    return result;
+};
 </script>
 <style lang="scss">
 .key-detail-type {
@@ -163,13 +224,13 @@ const { keyInfo, oldKey } = toRefs(state);
     width: calc(100% - 332px);
     min-width: 220px;
     max-width: 800px;
-    margin-right: 15px;
+    margin-right: 10px;
     margin-bottom: 10px;
 }
 
 .key-header-item.key-ttl-input {
-    width: 220px;
+    width: 200px;
-    margin-right: 15px;
+    margin-right: 10px;
     margin-bottom: 10px;
 }
 

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

@@ -2,7 +2,7 @@
     <div>
         <el-form class="key-content-string" label-width="auto">
             <div>
-                <format-viewer ref="formatViewerRef" :content="string.value"></format-viewer>
+                <format-viewer ref="formatViewerRef" height="250px" :content="string.value"></format-viewer>
             </div>
         </el-form>
         <div class="mt10 fr">
@@ -11,7 +11,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch, toRefs, onMounted } from 'vue';
+import { ref, watch, reactive, toRefs, onMounted } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
 import { notEmpty } from '@/common/assert';
@@ -53,12 +53,20 @@ const state = reactive({
 const { string } = toRefs(state);
 
 onMounted(() => {
-    state.redisId = props.redisId;
+    setProps(props);
-    state.db = props.db;
-    state.key = props.keyInfo?.key;
-    initData();
 });
 
+watch(props, (newVal) => {
+    setProps(newVal);
+});
+
+const setProps = (val: any) => {
+    state.redisId = val.redisId;
+    state.db = val.db;
+    state.key = val.keyInfo?.key;
+    initData();
+};
+
 const initData = () => {
     getStringValue();
 };
@@ -91,18 +99,18 @@ const getBaseReqParam = () => {
 defineExpose({ initData });
 </script>
 <style lang="scss">
-.key-content-string .format-viewer-container {
+// .key-content-string .format-viewer-container {
-    min-height: calc(100vh - 453px);
+//     min-height: calc(100vh - 253px);
-}
+// }
 
-/*text viewer box*/
+// /*text viewer box*/
-.key-content-string .el-textarea textarea {
+// .key-content-string .el-textarea textarea {
-    font-size: 14px;
+//     font-size: 14px;
-    height: calc(100vh - 436px);
+//     height: calc(100vh - 436px);
-}
+// }
 
-/*json in monaco editor*/
+// /*json in monaco editor*/
-.key-content-string .monaco-editor-content {
+// .key-content-string .monaco-editor-content {
-    height: calc(100vh - 450px) !important;
+//     height: calc(100vh - 450px) !important;
-}
+// }
 </style>

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

@@ -176,7 +176,7 @@ watch(props, async (newValue: any) => {
         convertDb(state.form.db);
     } else {
         state.form = { db: '0' } as any;
-        state.dbList = [];
+        state.dbList = [0];
     }
 });
 

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

@@ -20,7 +20,7 @@
             </template>
 
             <template #queryRight>
-                <el-button type="primary" icon="plus" @click="editRedis(true)" plain>添加</el-button>
+                <el-button type="primary" icon="plus" @click="editRedis(false)" plain>添加</el-button>
                 <el-button type="danger" icon="delete" :disabled="selectionData.length < 1" @click="deleteRedis" plain>删除 </el-button>
             </template>
 
@@ -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/ops/redis/ViewerJson.vue

@@ -4,7 +4,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, watch, reactive, onMounted } from 'vue';
 import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
 
 const props = defineProps({
@@ -22,12 +22,12 @@ const state = reactive({
 });
 
 // 因为默认从Text viewer开始，暂时不watch（保存时会触发重新格式化）。
-// watch(
+watch(
-//     () => props.content,
+    () => props.content,
-//     (val: any) => {
+    (val: any) => {
-//         setContent(val);
+        setContent(val);
-//     }
+    }
-// );
+);
 
 onMounted(() => {
     setContent(props.content);
@@ -37,7 +37,7 @@ const setContent = (val: any) => {
     state.modelValue = val;
     setTimeout(() => {
         monacoEditorRef.value.format();
-    }, 200);
+    }, 100);
 };
 
 const getContent = () => {

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

@@ -9,6 +9,7 @@ export const redisApi = {
     saveRedis: Api.newPost('/redis'),
     delRedis: Api.newDelete('/redis/{id}'),
 
+    keyInfo: Api.newGet('/redis/{id}/{db}/key-info'),
     keyTtl: Api.newGet('/redis/{id}/{db}/key-ttl'),
     renameKey: Api.newPost('/redis/{id}/{db}/rename-key'),
     expireKey: Api.newPost('/redis/{id}/{db}/expire-key'),

mayfly_go_web/src/views/ops/redis/utils.ts

@@ -0,0 +1,116 @@
+export function keysToTree(keys: any, separator: string = ':', openStatus: any = null, forceCut = 20000) {
+    const tree = {};
+    keys.forEach((key: any) => {
+        let currentNode = tree;
+        const keyStr = key;
+        const keySplited = keyStr.split(separator);
+        const lastIndex = keySplited.length - 1;
+
+        keySplited.forEach((value: string, index: number) => {
+            // key node
+            if (index === lastIndex) {
+                currentNode[`${keyStr}\`k\``] = {
+                    keyNode: true,
+                    nameBuffer: key,
+                };
+            }
+            // folder node
+            else {
+                currentNode[value] === undefined && (currentNode[value] = {});
+            }
+
+            currentNode = currentNode[value];
+        });
+    });
+
+    // to tree format
+    return formatTreeData(tree, '', separator, openStatus, forceCut);
+}
+
+export function keysToList(keys: any, separator: string = ':', openStatus: any = null, forceCut = 20000) {
+    return keys.map((x: string) => {
+        return {
+            key: x,
+            name: x,
+        };
+    });
+}
+
+function formatTreeData(tree: any, previousKey: string = '', separator: string = ':', openStatus: any = null, forceCut: number = 20000) {
+    return Object.keys(tree).map((key) => {
+        const node = { name: key || '[Empty]' } as any;
+
+        // folder node
+        if (!tree[key].keyNode && Object.keys(tree[key]).length > 0) {
+            // fullName
+            const tillNowKeyName = previousKey + key + separator;
+
+            node.type = 1;
+            // folder's fullName may same with key name, such as 'aa-'
+            node.key = tillNowKeyName;
+            if (openStatus) {
+                node.open = openStatus?.has(node.key);
+            }
+            node.children = formatTreeData(tree[key], tillNowKeyName, separator, openStatus, forceCut);
+            node.keyCount = node.children.reduce((a: any, b: any) => a + (b.keyCount || 1), 0);
+            // too many children, force cut, do not incluence keyCount display
+            // node.open && node.children.length > forceCut && node.children.splice(forceCut);
+            // keep folder node in front of the tree and sorted(not include the outest list)
+            // async sort, only for opened folders
+            node.open && sortKeysAndFolder(node.children);
+            node.fullName = tillNowKeyName;
+            return node;
+        }
+
+        node.type = 2;
+        // key node
+        node.name = key.replace(/`k`$/, '');
+        // node.nameBuffer = tree[key].nameBuffer.toJSON();
+        node.key = node.name;
+
+        return node;
+    });
+}
+
+export function sortKeysAndFolder(nodes: any) {
+    nodes.sort((a: any, b: any) => {
+        // a & b are all keys
+        if (!a.children && !b.children) {
+            return a.name > b.name ? 1 : -1;
+        }
+        // a & b are all folder
+        if (a.children && b.children) {
+            return a.name > b.name ? 1 : -1;
+        }
+
+        // a is folder, b is key
+        if (a.children) {
+            return -1;
+        }
+        // a is key, b is folder
+
+        return 1;
+    });
+}
+
+// sortByTreeNode
+export function sortByTreeNodes(nodes: any) {
+    nodes.sort((a: any, b: any) => {
+        // a & b are all keys
+        if (a.isLeaf && b.isLeaf) {
+            return a.label > b.label ? 1 : -1;
+        }
+        // a & b are all folder
+        if (!a.isLeaf && !b.isLeaf) {
+            return a.label > b.label ? 1 : -1;
+        }
+
+        // a is folder, b is key
+        if (!a.isLeaf) {
+            return -1;
+        }
+        // a is key, b is folder
+
+        return 1;
+    });
+}

mayfly_go_web/src/views/personal/api.ts

@@ -3,5 +3,7 @@ import Api from '@/common/Api';
 export const personApi = {
     accountInfo: Api.newGet('/sys/accounts/self'),
     updateAccount: Api.newPut('/sys/accounts/self'),
+    authStatus: Api.newGet('/auth/oauth2/status'),
     getMsgs: Api.newGet('/msgs/self'),
+    unbindOauth2: Api.newGet('/auth/oauth2/unbind'),
 };