feat: 新增机器授权凭证管理与其他优化

Merge pull request !39 from zongyangleo/dev_20230213_1

.gitignore

@@ -15,4 +15,6 @@
 *.sum
 
 */node_modules/
-**/vendor/
+**/vendor/
+.idea
+out

README.md

@@ -34,7 +34,7 @@ web版 **linux(终端[终端回放] 文件 脚本 进程)、数据库（mysql po
 ### 系统相关资料
 - 项目文档: https://objs.gitee.io/mayfly-go-docs
 - 系统操作视频: https://space.bilibili.com/484091081/channel/collectiondetail?sid=392854
-- 安装包下载：https://gitee.com/objs/mayfly-go/releases
+- 部署文档：https://objs.gitee.io/mayfly-go-docs/download
 
 
 ### 系统核心功能截图

build_release.sh

@@ -44,7 +44,7 @@ function build() {
     toFolder=$1
     os=$2
     arch=$3
-    copyStatic=$4
+    copyDocScript=$4
 
     echo_yellow "-------------------${os}-${arch}打包构建开始-------------------"
 
@@ -68,17 +68,19 @@ function build() {
     echo_green "移动二进制文件至'${toFolder}'"
     mv ${server_folder}/${execFileName} ${toFolder}
 
-    if [ "${copy2Server}" == "1" ] ; then
-        echo_green "拷贝前端静态页面至'${toFolder}/static'"
-        mkdir -p ${toFolder}/static && cp -r ${web_folder}/dist/* ${toFolder}/static
-    fi
+    # if [ "${copy2Server}" == "1" ] ; then
+    #     echo_green "拷贝前端静态页面至'${toFolder}/static'"
+    #     mkdir -p ${toFolder}/static && cp -r ${web_folder}/dist/* ${toFolder}/static
+    # fi
 
-    echo_green "拷贝脚本等资源文件[config.yml、mayfly-go.sql、readme.txt、startup.sh、shutdown.sh]"
-    cp ${server_folder}/config.yml ${toFolder}
-    cp ${server_folder}/mayfly-go.sql ${toFolder}
-    cp ${server_folder}/readme.txt ${toFolder}
-    cp ${server_folder}/startup.sh ${toFolder}
-    cp ${server_folder}/shutdown.sh ${toFolder}
+    if [ "${copyDocScript}" == "1" ] ; then
+        echo_green "拷贝脚本等资源文件[config.yml、mayfly-go.sql、readme.txt、startup.sh、shutdown.sh]"
+        cp ${server_folder}/config.yml ${toFolder}
+        cp ${server_folder}/mayfly-go.sql ${toFolder}
+        cp ${server_folder}/readme.txt ${toFolder}
+        cp ${server_folder}/startup.sh ${toFolder}
+        cp ${server_folder}/shutdown.sh ${toFolder}
+    fi
 
     echo_yellow ">>>>>>>>>>>>>>>>>>>${os}-${arch}打包构建完成<<<<<<<<<<<<<<<<<<<<\n"
 }
@@ -99,45 +101,100 @@ function buildMac() {
     build "$1/mayfly-go-mac" "darwin" "amd64" $2
 }
 
-function runBuild() {
-    # 构建结果的目的路径
-    read -p "请输入构建产物输出目录: " toPath
-    if [ ! -d ${toPath} ] ; then
-        echo_red "构建产物输出目录不存在!"
-        exit;
-    fi
-    # 进入目标路径,并赋值全路径
-    cd ${toPath}
-    toPath=`pwd`
+function buildDocker() {
+    echo_yellow "-------------------构建docker镜像开始-------------------"
+    imageVersion=$1
+    cd ${server_folder}
+    imageName="mayflygo/mayfly-go:${imageVersion}"
+    docker build -t "${imageName}" .
+    echo_green "docker镜像构建完成->[${imageName}]"
+    echo_yellow "-------------------构建docker镜像结束-------------------"
+}
 
-    read -p "是否构建前端[0|其他->否 1->是 2->构建并拷贝至server/static/static]: " runBuildWeb
-    read -p "请选择构建版本[0|其他->全部 1->linux-amd64 2->linux-arm64 3->windows 4->mac]: " buildType
-    
-    
-    if [ "${runBuildWeb}" == "1" ] || [ "${runBuildWeb}" == "2" ] ; then
-        buildWeb ${runBuildWeb}
+function buildxDocker() {
+    echo_yellow "-------------------docker buildx构建镜像开始-------------------"
+    imageVersion=$1
+    cd ${server_folder}
+    imageName="mayflygo/mayfly-go:${imageVersion}"
+    docker buildx build --push --platform linux/amd64,linux/arm64 -t "${imageName}" .
+    echo_green "docker多版本镜像构建完成->[${imageName}]"
+    echo_yellow "-------------------docker buildx构建镜像结束-------------------"
+}
+
+function runBuild() {
+    read -p "请选择构建版本[0|其他->除docker镜像外其他 1->linux-amd64 2->linux-arm64 3->windows 4->mac 5->docker 6->docker buildx]: " buildType
+
+    toPath="."
+    imageVersion="latest"
+    copyDocScript="1"
+
+    if [[ "${buildType}" != "5" ]] && [[ "${buildType}" != "6" ]] ; then
+        # 构建结果的目的路径
+        read -p "请输入构建产物输出目录[默认当前路径]: " toPath
+        if [ ! -d ${toPath} ] ; then
+            echo_red "构建产物输出目录不存在!"
+            exit;
+        fi
+        if [ "${toPath}" == "" ] ; then
+            toPath="."
+        fi
+
+        read -p "是否拷贝文档&脚本[0->否 1->是][默认是]: " copyDocScript
+        if [ "${copyDocScript}" == "" ] ; then
+            copyDocScript="1"
+        fi
+
+        # 进入目标路径,并赋值全路径
+        cd ${toPath}
+        toPath=`pwd`
     fi
 
+    if [[ "${buildType}" == "5" ]] || [[ "${buildType}" == "6" ]] ; then
+        read -p "请输入docker镜像版本号[默认latest]: " imageVersion
+
+        if [ "${imageVersion}" == "" ] ; then
+            imageVersion="latest"
+        fi
+    fi
+
+
+    # read -p "是否构建前端[0|其他->否 1->是 2->构建并拷贝至server/static/static]: " runBuildWeb
+    runBuildWeb="2"
+    # 编译web前端
+    buildWeb ${runBuildWeb}
+
     case ${buildType} in
          "1")
-            buildLinuxAmd64 ${toPath} ${runBuildWeb}
+            buildLinuxAmd64 ${toPath} ${copyDocScript}
         ;;
          "2")
-            buildLinuxArm64 ${toPath} ${runBuildWeb}
+            buildLinuxArm64 ${toPath} ${copyDocScript}
         ;;
         "3")
-            buildWindows ${toPath} ${runBuildWeb}
+            buildWindows ${toPath} ${copyDocScript}
         ;;
         "4")
-            buildMac ${toPath} ${runBuildWeb}
+            buildMac ${toPath} ${copyDocScript}
+        ;;
+        "5")
+            buildDocker ${imageVersion}
+        ;;
+        "6")
+            buildxDocker ${imageVersion}
         ;;
         *)
-            buildLinuxAmd64 ${toPath} ${runBuildWeb}
-            buildLinuxArm64 ${toPath} ${runBuildWeb}
-            buildWindows ${toPath} ${runBuildWeb}
-            buildMac ${toPath} ${runBuildWeb}
+            buildLinuxAmd64 ${toPath} ${copyDocScript}
+            buildLinuxArm64 ${toPath} ${copyDocScript}
+            buildWindows ${toPath} ${copyDocScript}
+            buildMac ${toPath} ${copyDocScript}
         ;;
     esac
+
+    echo_green "删除['${server_folder}/static/static']下静态资源文件."
+    # 删除静态资源文件，保留一个favicon.ico，否则后端启动会报错
+    rm -rf ${server_folder}/static/static/assets
+    rm -rf ${server_folder}/static/static/config.js
+    rm -rf ${server_folder}/static/static/index.html
 }
 
 runBuild

mayfly_go_web/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh_CN">
 	<head>
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

mayfly_go_web/package.json

@@ -4,31 +4,34 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "preview": "vite preview",
+    "build-preview": "npm run build && npm run preview",
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.0.9",
-    "asciinema-player": "^3.0.1",
-    "axios": "^0.27.2",
-    "codemirror": "^5.65.5",
+    "@element-plus/icons-vue": "^2.1.0",
+    "asciinema-player": "^3.1.0",
+    "axios": "^1.3.4",
     "countup.js": "^2.0.7",
     "cropperjs": "^1.5.11",
-    "echarts": "^5.3.3",
-    "element-plus": "^2.2.17",
-    "jsencrypt": "^3.2.1",
-    "jsoneditor": "^9.9.0",
+    "echarts": "^5.4.0",
+    "element-plus": "^2.2.33",
+    "jsencrypt": "^3.3.1",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
+    "monaco-editor": "^0.36.1",
+    "monaco-sql-languages": "^0.11.0",
+    "monaco-themes": "^0.4.2",
     "nprogress": "^0.2.0",
     "screenfull": "^6.0.2",
     "sortablejs": "^1.13.0",
-    "sql-formatter": "^9.2.0",
-    "vue": "^3.2.39",
+    "sql-formatter": "^12.1.2",
+    "vue": "^3.2.47",
     "vue-clipboard3": "^1.0.1",
-    "vue-router": "^4.1.5",
+    "vue-router": "^4.1.6",
     "vuex": "^4.0.2",
-    "xterm": "^5.0.0",
-    "xterm-addon-fit": "^0.6.0"
+    "xterm": "^5.1.0",
+    "xterm-addon-fit": "^0.7.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.178",
@@ -40,13 +43,13 @@
     "@vitejs/plugin-vue": "^2.3.3",
     "@vue/compiler-sfc": "^3.0.11",
     "dotenv": "^10.0.0",
-    "eslint": "^8.5.0",
+    "eslint": "^8.35.0",
     "eslint-plugin-vue": "^8.2.0",
     "prettier": "^2.3.0",
-    "sass": "^1.45.1",
-    "sass-loader": "^12.4.0",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.13",
+    "sass": "^1.58.0",
+    "sass-loader": "^13.2.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
     "vue-eslint-parser": "^8.0.1"
   },
   "browserslist": [

mayfly_go_web/public/config.js

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

mayfly_go_web/shim.d.ts

@@ -1,10 +1,21 @@
 /* eslint-disable */
+import {IDisposable} from 'monaco-editor';
+
 declare module '*.vue' {
 	import type { DefineComponent } from 'vue';
 	const component: DefineComponent<{}, {}, any>;
 	export default component;
 }
-declare module 'codemirror';
+
+
+declare global {
+	interface Window {
+		completionItemProvider?: IDisposable | undefined;
+	}
+}
+
+
 declare module 'sql-formatter';
 declare module 'jsoneditor';
-declare module 'asciinema-player';
+declare module 'asciinema-player';
+declare module 'monaco-editor';

mayfly_go_web/src/common/Api.ts

@@ -19,24 +19,6 @@ class Api {
         this.method = method;
     }
 
-    /**
-     * 设置rl
-     * @param {String} uri 请求url
-     */
-    setUrl(url: string) {
-        this.url = url;
-        return this;
-    }
-
-    /**
-     * url的请求方法
-     * @param {String} method 请求方法
-     */
-    setMethod(method: string) {
-        this.method = method;
-        return this;
-    }
-
     /**
      * 获取权限的完整url
      */

mayfly_go_web/src/common/config.ts

@@ -1,6 +1,17 @@
+function getBaseApiUrl() {
+    let path = window.location.pathname;
+    if (path == '/') {
+        return window.location.host;
+    }
+    return window.location.host + path;
+}
+
 const config = {
-    baseApiUrl: `${(window as any).globalConfig.BaseApiUrl}/api`,
-    baseWsUrl: `${(window as any).globalConfig.BaseWsUrl || `${location.protocol == 'https:' ? 'wss:' : 'ws:'}//${location.host}`}/api`
+    baseApiUrl: `${(window as any).globalConfig.BaseApiUrl || location.protocol + '//' + getBaseApiUrl()}/api`,
+    baseWsUrl: `${(window as any).globalConfig.BaseWsUrl || `${location.protocol == 'https:' ? 'wss:' : 'ws:'}//${getBaseApiUrl()}`}/api`,
+
+    // 系统版本
+    version: 'v1.4.1'
 }
 
 export default config

mayfly_go_web/src/common/echarts/useEcharts.ts

@@ -1,4 +1,42 @@
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
+
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from "echarts/core";
+ 
+/** 图表后缀都为 Chart  */
+import { PieChart } from "echarts/charts";
+ 
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+} from "echarts/components";
+ 
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from "echarts/features";
+ 
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from "echarts/renderers";
+ 
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+//   BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+//   LineChart,
+  PieChart,
+]);
 
 export default function(dom: any, theme: any = null,  option: any) {
     let chart = echarts.init(dom, theme);

mayfly_go_web/src/common/utils/date.ts

@@ -1,4 +1,4 @@
-export function dateFormat(fmt: string, date: Date) {
+export function dateFormat2(fmt: string, date: Date) {
     let ret;
     const opt = {
         "y+": date.getFullYear().toString(),        // 年
@@ -19,5 +19,9 @@ export function dateFormat(fmt: string, date: Date) {
 }
 
 export function dateStrFormat(fmt: string, dateStr: string) {
-    return dateFormat(fmt, new Date(dateStr))
+    return dateFormat2(fmt, new Date(dateStr))
+}
+
+export function dateFormat(dateStr: string) {
+    return dateFormat2('yyyy-MM-dd HH:mm:ss',new Date(dateStr))
 }

mayfly_go_web/src/common/utils/export.ts

@@ -0,0 +1,39 @@
+export function exportCsv(filename: string, columns: string[], datas: []) {
+    // 二维数组
+    const cvsData = [columns];
+    for (let data of datas) {
+        // 数据值组成的一维数组
+        let dataValueArr: any = [];
+        for (let column of columns) {
+            let val: any = data[column];
+            if (typeof val == 'string' && val) {
+                // csv格式如果有逗号，整体用双引号括起来；如果里面还有双引号就替换成两个双引号，这样导出来的格式就不会有问题了 
+                if (val.indexOf(',') != -1) {
+                    // 如果还有双引号，先将双引号转义，避免两边加了双引号后转义错误
+                    if (val.indexOf('"') != -1) {
+                        val = val.replace(/\"/g, "\"\"");
+                    }
+                    // 再将逗号转义
+                    val = `"${val}"`;
+                }
+                dataValueArr.push(val);
+            } else {
+                dataValueArr.push(val);
+            }
+
+        }
+        cvsData.push(dataValueArr);
+    }
+    const csvString = cvsData.map((e) => e.join(',')).join('\n');
+    // 导出
+    let link = document.createElement('a');
+    let exportContent = '\uFEFF';
+    let blob = new Blob([exportContent + csvString], {
+        type: 'text/plain;charset=utrf-8',
+    });
+    link.id = 'download-csv';
+    link.setAttribute('href', URL.createObjectURL(blob));
+    link.setAttribute('download', `${filename}.csv`);
+    document.body.appendChild(link);
+    link.click();
+}

mayfly_go_web/src/common/utils/loading.ts

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue';
-import loadingCss from '@/theme/loading.scss';
+import loadingCss from "@/theme/loading.scss?inline"
 
 // 定义方法
 export const NextLoading = {

mayfly_go_web/src/common/utils/wartermark.ts

@@ -1,5 +1,5 @@
 import { getUseWatermark4Session, getUserInfo4Session } from '@/common/utils/storage.ts';
-import { dateFormat } from '@/common/utils/date.ts'
+import { dateFormat2 } from '@/common/utils/date.ts'
 
 // 页面添加水印效果
 const setWatermark = (str: any) => {
@@ -46,7 +46,7 @@ const watermark = {
         setTimeout(() => {
             const userinfo = getUserInfo4Session()
             if (userinfo && getUseWatermark4Session()) {
-                set(`${userinfo.username} ${dateFormat('yyyy-MM-dd HH:mm:ss', new Date())}`)
+                set(`${userinfo.username} ${dateFormat2('yyyy-MM-dd HH:mm:ss', new Date())}`)
             } else {
                 del();
             }

mayfly_go_web/src/components/codemirror/codemirror.vue

@@ -1,339 +0,0 @@
-<template>
-    <div class="in-coder-panel">
-        <textarea ref="textarea"></textarea>
-        <el-select v-if="canChangeMode" class="code-mode-select" v-model="mode" @change="changeMode">
-            <el-option v-for="mode in modes" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
-        </el-select>
-    </div>
-</template>
-
-<script lang="ts">
-import { ref, nextTick, toRefs, reactive, watch, onMounted, defineComponent } from 'vue';
-// 引入全局实例
-import _CodeMirror from 'codemirror';
-
-// 核心样式
-import 'codemirror/lib/codemirror.css';
-// 引入主题后还需要在 options 中指定主题才会生效
-import 'codemirror/theme/cobalt.css';
-import 'codemirror/addon/selection/active-line.js';
-// 匹配括号
-import 'codemirror/addon/edit/matchbrackets.js';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/addon/comment/comment';
-
-// 需要引入具体的语法高亮库才会有对应的语法高亮效果
-// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
-// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
-import 'codemirror/mode/yaml/yaml.js';
-import 'codemirror/mode/dockerfile/dockerfile.js';
-import 'codemirror/mode/nginx/nginx.js';
-import 'codemirror/mode/javascript/javascript.js';
-import 'codemirror/mode/css/css.js';
-import 'codemirror/mode/xml/xml.js';
-import 'codemirror/mode/markdown/markdown.js';
-import 'codemirror/mode/python/python.js';
-import 'codemirror/mode/shell/shell.js';
-import 'codemirror/mode/sql/sql.js';
-import 'codemirror/mode/vue/vue.js';
-import 'codemirror/mode/textile/textile.js';
-import 'codemirror/addon/hint/show-hint.css';
-import 'codemirror/addon/hint/show-hint.js';
-
-import { ElOption, ElSelect } from 'element-plus';
-
-// 尝试获取全局实例
-const CodeMirror = (window as any).CodeMirror || _CodeMirror;
-
-export default defineComponent({
-    name: 'CodeMirror',
-     components: {
-        ElOption,
-        ElSelect,
-    },
-    props: {
-        modelValue: {
-            type: String,
-        },
-        language: {
-            type: String,
-            default: null,
-        },
-        height: {
-            type: String,
-            default: "500px",
-        },
-        width: {
-            type: String,
-            default: "auto",
-        },
-        canChangeMode: {
-            type: Boolean,
-            default: false,
-        },
-        options: {
-            type: Object,
-            default: null,
-        },
-    },
-    setup(props: any, { emit }) {
-        let { modelValue, language } = toRefs(props);
-        const textarea: any = ref(null);
-        // 编辑器实例
-        let coder = null as any;
-
-        const state = reactive({
-            coder: null as any,
-            content: '',
-            // 默认的语法类型
-            mode: 'x-sh',
-            // 默认配置
-            options: {
-                // 缩进格式
-                tabSize: 2,
-                // 主题，对应主题库 JS 需要提前引入
-                theme: 'cobalt',
-                // 显示行号
-                lineNumbers: true,
-                line: true,
-                indentWithTabs: true,
-                smartIndent: true,
-                matchBrackets: true,
-                autofocus: true,
-                styleSelectedText: true,
-                styleActiveLine: true, // 高亮选中行
-                foldGutter: true, // 块槽
-                // extraKeys: { Tab: 'autocomplete' }, // 自定义快捷键
-                hintOptions: {
-                    // 当匹配只有一项的时候是否自动补全
-                    completeSingle: false,
-                },
-            },
-            // 支持切换的语法高亮类型，对应 JS 已经提前引入
-            // 使用的是 MIME-TYPE ，不过作为前缀的 text/ 在后面指定时写死了
-            modes: [
-                {
-                    value: 'x-sh',
-                    label: 'Shell',
-                },
-                {
-                    value: 'x-yaml',
-                    label: 'Yaml',
-                },
-                {
-                    value: 'x-dockerfile',
-                    label: 'Dockerfile',
-                },
-                {
-                    value: 'x-nginx-conf',
-                    label: 'Nginx',
-                },
-                {
-                    value: 'html',
-                    label: 'XML/HTML',
-                },
-                {
-                    value: 'x-python',
-                    label: 'Python',
-                },
-                {
-                    value: 'x-sql',
-                    label: 'SQL',
-                },
-                {
-                    value: 'css',
-                    label: 'CSS',
-                },
-                {
-                    value: 'javascript',
-                    label: 'Javascript',
-                },
-                {
-                    value: 'x-java',
-                    label: 'Java',
-                },
-                {
-                    value: 'x-vue',
-                    label: 'Vue',
-                },
-                {
-                    value: 'markdown',
-                    label: 'Markdown',
-                },
-                {
-                    value: 'text/x-textile',
-                    label: 'text',
-                },
-            ],
-        });
-
-        onMounted(() => {
-            init();
-        });
-
-        watch(
-            () => props.modelValue,
-            (newValue) => {
-                handerCodeChange(newValue);
-            }
-        );
-
-        // watch(
-        //     () => props.options,
-        //     (newValue, oldValue) => {
-        //         for (const key in newValue) {
-        //             coder.setOption(key, newValue[key]);
-        //         }
-        //     }
-        // );
-
-        const init = () => {
-            if (props.options) {
-                state.options = props.options;
-            }
-            // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
-            coder = CodeMirror.fromTextArea(textarea.value, state.options);
-            coder.setValue(modelValue.value || state.content);
-
-            // 支持双向绑定
-            coder.on('change', (coder: any) => {
-                state.content = coder.getDoc().getValue();
-                emit('update:modelValue', state.content);
-            });
-
-            coder.on('inputRead', (instance: any, changeObj: any) => {
-                if (/^[a-zA-Z]/.test(changeObj.text[0])) {
-                    instance.showHint();
-                }
-            });
-
-            coder.setSize(props.width, props.height);
-            // editor.setSize('width','height');
-
-            // 修改编辑器的语法配置
-            setMode(language.value);
-
-            [
-                'scroll',
-                'changes',
-                'beforeChange',
-                'cursorActivity',
-                'keyHandled',
-                'inputRead',
-                'electricInput',
-                'beforeSelectionChange',
-                'viewportChange',
-                'swapDoc',
-                'gutterClick',
-                'gutterContextMenu',
-                'focus',
-                'blur',
-                'refresh',
-                'optionChange',
-                'scrollCursorIntoView',
-                'update',
-            ].forEach((event) => {
-                // 循环事件，并兼容 run-time 事件命名
-                coder.on(event, (...args: any) => {
-                    // console.log('当有事件触发了', event, args);
-                    emit(event, ...args);
-                    const lowerCaseEvent = event.replace(/([A-Z])/g, '-$1').toLowerCase();
-                    if (lowerCaseEvent !== event) {
-                        emit(lowerCaseEvent, ...args);
-                    }
-                });
-            });
-
-            state.coder = coder;
-            // 不加无法显示内容，需点击后才可显示
-            refresh();
-        };
-
-        const refresh = () => {
-            nextTick(() => {
-                coder.refresh();
-            });
-        };
-
-        // 设置模式
-        const setMode = (val: string) => {
-            if (val) {
-                // 获取具体的语法类型对象
-                let modeObj = getLanguage(val);
-                // 判断父容器传入的语法是否被支持
-                if (modeObj) {
-                    state.mode = modeObj.value;
-                }
-            }
-            // 修改编辑器的语法配置
-            coder.setOption('mode', `text/${state.mode}`);
-        };
-
-        // 获取当前语法类型
-        const getLanguage = (language: string) => {
-            // 在支持的语法类型列表中寻找传入的语法类型
-            return state.modes.find((mode: any) => {
-                // 所有的值都忽略大小写，方便比较
-                let currentLanguage = language.toLowerCase();
-                let currentLabel = mode.label.toLowerCase();
-                let currentValue = mode.value.toLowerCase();
-
-                // 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较
-                return currentLabel === currentLanguage || currentValue === currentLanguage;
-            });
-        };
-
-        // 更改模式
-        const changeMode = (val: string) => {
-            setMode(val);
-            // 获取修改后的语法
-            let label = (getLanguage(val) as any).label.toLowerCase();
-
-            // 允许父容器通过以下函数监听当前的语法值
-            emit('language-change', label);
-        };
-
-        const handerCodeChange = (newVal: string) => {
-            const cm_value = coder.getValue();
-            if (newVal !== cm_value) {
-                const scrollInfo = coder.getScrollInfo();
-                coder.setValue(newVal);
-                state.content = newVal;
-                coder.scrollTo(scrollInfo.left, scrollInfo.top);
-                refresh()
-            }
-        };
-
-        return {
-            ...toRefs(state),
-            textarea,
-            changeMode,
-            refresh,
-        };
-    },
-});
-</script>
-
-<style lang="scss">
-.in-coder-panel {
-    flex-grow: 1;
-    display: flex;
-    position: relative;
-    .CodeMirror {
-        flex-grow: 1;
-        z-index: 1;
-        .CodeMirror-code {
-            line-height: 19px;
-        }
-        font-family: 'JetBrainsMono';
-    }
-
-    .code-mode-select {
-        position: absolute;
-        z-index: 2;
-        right: 10px;
-        top: 10px;
-        max-width: 130px;
-    }
-}
-</style>

mayfly_go_web/src/components/codemirror/index.js

@@ -1,20 +0,0 @@
-import _CodeMirror from 'codemirror'
-import codemirror from './codemirror.vue'
-
-const CodeMirror = window.CodeMirror || _CodeMirror
-const install = (Vue, config) => {
-  if (config) {
-    if (config.options) {
-      codemirror.props.globalOptions.default = () => config.options
-    }
-    if (config.events) {
-      codemirror.props.globalEvents.default = () => config.events
-    }
-  }
-  Vue.component(codemirror.name, codemirror)
-}
-
-const VueCodemirror = { CodeMirror, codemirror, install }
-
-export default VueCodemirror
-export { CodeMirror, codemirror, install }

mayfly_go_web/src/components/jsonedit/index.vue

@@ -1,133 +0,0 @@
-<template>
-    <div>
-        <div ref="jsoneditorVue" :style="{ height: height, width: width }"></div>
-    </div>
-</template>
-
-<script lang="ts">
-import { ref, toRefs, reactive, nextTick, watch, onMounted, onUnmounted, defineComponent } from 'vue';
-import JSONEditor from 'jsoneditor';
-import 'jsoneditor/dist/jsoneditor.min.css';
-
-export default defineComponent({
-    name: 'JsonEdit',
-    components: {},
-    props: {
-        modelValue: {
-            type: [String, Object],
-        },
-        height: {
-            type: String,
-            default: '500px',
-        },
-        width: {
-            type: String,
-            default: 'auto',
-        },
-        options: {
-            type: Object,
-            default: null,
-        },
-        currentMode: {
-            type: String,
-            default: 'tree',
-        },
-        modeList: {
-            type: Array,
-            default() {
-                return ['tree', 'code', 'form', 'text', 'view'];
-            },
-        },
-    },
-    setup(props: any, { emit }) {
-        let { modelValue, options, modeList, currentMode } = toRefs(props);
-
-        const jsoneditorVue = ref(null)
-        // 编辑器实例
-        let editor = null as any;
-        // 值类型
-        let valueType = 'string';
-        // 是否内部改变(即onChange事件双向绑定)，内部改变则不需要重新赋值给editor
-        let internalChange = false;
-
-        const state = reactive({
-            height: '500px',
-            width: 'auto',
-        });
-
-        onMounted(() => {
-            state.width = props.width;
-            state.height = props.height;
-
-            init();
-            setJson(modelValue.value);
-        });
-
-        onUnmounted(() => {
-            editor?.destroy();
-            editor = null;
-        });
-
-        watch(
-            () => props.modelValue,
-            (newValue) => {
-                if (!editor) {
-                    init();
-                }
-                setJson(newValue);
-            }
-        );
-
-        const setJson = (value: any) => {
-            if (internalChange) {
-                return;
-            }
-            if (typeof value == 'string') {
-                valueType = 'string';
-                editor.set(JSON.parse(value));
-            } else {
-                valueType = 'object';
-                editor.set(value);
-            }
-        };
-
-        const onChange = () => {
-            try {
-                const json = editor.get();
-                if (valueType == 'string') {
-                    emit('update:modelValue', JSON.stringify(json));
-                } else {
-                    emit('update:modelValue', json);
-                }
-                emit('onChange', json);
-                internalChange = true;
-                nextTick(() => {
-                    internalChange = false;
-                });
-            } catch (error) {}
-        };
-
-        const init = () => {
-            console.log('init json editor');
-            const finalOptions = {
-                ...options.value,
-                mode: currentMode.value,
-                modes: modeList.value,
-                onChange,
-            };
-            editor = new JSONEditor(jsoneditorVue.value, finalOptions);
-        };
-
-        return {
-            ...toRefs(state),
-            jsoneditorVue,
-        };
-    },
-});
-</script>
-
-<style lang="scss">
-div.jsoneditor-menu a.jsoneditor-poweredBy {
-    display: none;
-}
-</style>

mayfly_go_web/src/components/monaco/MonacoEditor.vue

@@ -0,0 +1,280 @@
+<template>
+    <div class="monaco-editor" style="border: 1px solid #ccc;">
+        <div 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 languages" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
+        </el-select>
+    </div>
+</template>
+
+<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 { editor, languages } from 'monaco-editor';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+// 主题仓库 https://github.com/brijeshb42/monaco-themes
+// 主题例子 https://editor.bitwiser.in/
+// import Monokai from 'monaco-themes/themes/Monokai.json'
+// import Active4D from 'monaco-themes/themes/Active4D.json'
+// import ahe from 'monaco-themes/themes/All Hallows Eve.json'
+// import bop from 'monaco-themes/themes/Birds of Paradise.json'
+// import krTheme from 'monaco-themes/themes/krTheme.json'
+// import Dracula from 'monaco-themes/themes/Dracula.json'
+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';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+    },
+    language: {
+        type: String,
+        default: null,
+    },
+    height: {
+        type: String,
+        default: '500px',
+    },
+    width: {
+        type: String,
+        default: 'auto',
+    },
+    canChangeMode: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Object,
+        default: null,
+    },
+})
+
+//定义事件
+const emit = defineEmits(['update:modelValue'])
+
+const languages = [
+    {
+        value: 'shell',
+        label: 'Shell',
+    },
+    {
+        value: 'json',
+        label: 'JSON',
+    },
+    {
+        value: 'yaml',
+        label: 'Yaml',
+    },
+    {
+        value: 'dockerfile',
+        label: 'Dockerfile',
+    },
+    {
+        value: 'html',
+        label: 'XML/HTML',
+    },
+    {
+        value: 'python',
+        label: 'Python',
+    },
+    {
+        value: 'sql',
+        label: 'SQL',
+    },
+    {
+        value: 'css',
+        label: 'CSS',
+    },
+    {
+        value: 'javascript',
+        label: 'Javascript',
+    },
+    {
+        value: 'java',
+        label: 'Java',
+    },
+    {
+        value: 'markdown',
+        label: 'Markdown',
+    },
+    {
+        value: 'text',
+        label: 'text',
+    },
+];
+
+const options = {
+    language: 'shell',
+    theme: 'SolarizedLight',
+    automaticLayout: true, //自适应宽高布局
+    foldingStrategy: 'indentation',//代码可分小段折叠
+    roundedSelection: false, // 禁用选择文本背景的圆角
+    matchBrackets: 'near',
+    linkedEditing: true,
+    cursorBlinking: 'smooth',// 光标闪烁样式
+    mouseWheelZoom: true, // 在按住Ctrl键的同时使用鼠标滚轮时，在编辑器中缩放字体
+    overviewRulerBorder: false, // 不要滚动条的边框
+    tabSize: 4, // tab 缩进长度
+    // fontFamily: 'JetBrainsMono', // 字体 暂时不要设置，否则光标容易错位
+    fontWeight: 'bold',
+    // fontSize: 12,
+    // letterSpacing: 1, 字符间距
+    // quickSuggestions:false, // 禁用代码提示
+    minimap: {
+        enabled: false, // 不要小地图
+    },
+}
+
+const state = reactive({
+    languageMode: 'shell',
+})
+
+const {
+    languageMode,
+} = toRefs(state)
+
+onMounted(() => {
+    state.languageMode = props.language;
+    initMonacoEditorIns();
+    setEditorValue(props.modelValue);
+    registerCompletionItemProvider();
+});
+
+onBeforeUnmount(() => {
+    if (monacoEditorIns) {
+        monacoEditorIns.dispose();
+    }
+    if (completionItemProvider) {
+        completionItemProvider.dispose();
+    }
+})
+
+watch(() => props.modelValue, (newValue: any) => {
+    if (!monacoEditorIns.hasTextFocus()) {
+        state.languageMode = props.language;
+        monacoEditorIns?.setValue(newValue);
+    }
+})
+
+watch(() => props.language, (newValue: any) => {
+    changeLanguage(newValue);
+})
+
+
+const monacoTextarea: any = ref(null);
+
+let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
+let completionItemProvider: any = null;
+
+self.MonacoEnvironment = {
+    getWorker(_: any, label: string) {
+        if (label === 'json') {
+            return new JsonWorker()
+        }
+        return new EditorWorker();
+    }
+};
+
+const initMonacoEditorIns = () => {
+    console.log('初始化monaco编辑器')
+    // options参数参考 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#language
+    // 初始化一些主题
+    monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
+    options.language = state.languageMode;
+    // 从localStorage中获取，通过store可能存在父子组件都使用store报错
+    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) => {
+    console.log('change lan');
+    // 获取当前的文档模型
+    let oldModel = monacoEditorIns.getModel()
+    if (!oldModel) {
+        return;
+    }
+    // 创建一个新的文档模型
+    let newModel = monaco.editor.createModel(oldModel.getValue(), value)
+    // 设置成新的
+    monacoEditorIns.setModel(newModel)
+    // 销毁旧的模型
+    if (oldModel) {
+        oldModel.dispose()
+    }
+
+    registerCompletionItemProvider();
+}
+
+const setEditorValue = (value: any) => {
+    monacoEditorIns.getModel()?.setValue(value)
+}
+
+/**
+ * 注册联想补全提示
+ */
+const registerCompletionItemProvider = () => {
+    if (completionItemProvider) {
+        completionItemProvider.dispose();
+    }
+    if (state.languageMode == 'shell') {
+        registeShell()
+    }
+}
+
+const registeShell = () => {
+    completionItemProvider = monaco.languages.registerCompletionItemProvider('shell', {
+        provideCompletionItems: async () => {
+            let suggestions: languages.CompletionItem[] = []
+            shellLan.keywords.forEach((item: any) => {
+                suggestions.push({
+                    label: item,
+                    kind: monaco.languages.CompletionItemKind.Keyword,
+                    insertText: item,
+                } as any);
+            })
+            shellLan.builtins.forEach((item: any) => {
+                suggestions.push({
+                    label: item,
+                    kind: monaco.languages.CompletionItemKind.Property,
+                    insertText: item,
+                } as any);
+            })
+            return {
+                suggestions: suggestions
+            };
+        }
+    })
+};
+
+const format = () => {
+    /*
+    触发自动格式化;
+   */
+    monacoEditorIns.trigger('', 'editor.action.formatDocument', '')
+}
+
+defineExpose({ format })
+
+</script>
+
+<style lang="scss">
+.monaco-editor {
+    .code-mode-select {
+        position: absolute;
+        z-index: 2;
+        right: 10px;
+        top: 10px;
+        max-width: 130px;
+    }
+}
+</style>

mayfly_go_web/src/main.ts

@@ -18,6 +18,8 @@ import SvgIcon from '@/components/svgIcon/index.vue';
 import '@/assets/font/font.css'
 
 const app = createApp(App);
+// 屏蔽警告信息
+app.config.warnHandler = () => null;
 
 /**
  * 导出全局注册 element plus svg 图标

mayfly_go_web/src/router/imports.ts

@@ -3,19 +3,20 @@ import RouterParent from '@/views/layout/routerView/parent.vue';
 export const imports = {
     'RouterParent': RouterParent,
     
-    "Home": () => import('@/views/home/index.vue'),
+    "Home": () => import('@/views/home/Home.vue'),
     'Personal': () => import('@/views/personal/index.vue'),
     // machine
-    "MachineList": () => import('@/views/ops/machine'),
+    "MachineList": () => import('@/views/ops/machine/MachineList.vue'),
+    "AuthCertList": () => import('@/views/ops/machine/authcert/AuthCertList.vue'),
     // sys
     "ResourceList": () => import('@/views/system/resource'),
     "RoleList": () => import('@/views/system/role'),
     "AccountList": () => import('@/views/system/account'),
     "SyslogList": () => import('@/views/system/syslog/SyslogList.vue'),
     "ConfigList": () => import('@/views/system/config/ConfigList.vue'),
-
-    // project
-    "ProjectList": () => import('@/views/ops/project/ProjectList.vue'),
+    // tag
+    "TagTreeList": () => import('@/views/ops/tag/TagTreeList.vue'),
+    "TeamList": () => import('@/views/ops/tag/TeamList.vue'),
     // db
     "DbList": () => import('@/views/ops/db/DbList.vue'),
     "SqlExec": () => import('@/views/ops/db'),

mayfly_go_web/src/router/route.ts

@@ -1,6 +1,6 @@
 import { RouteRecordRaw } from 'vue-router';
 import Layout from '@/views/layout/index.vue'
-import RouterParent from '@/views/layout/routerView/parent.vue';
+// import RouterParent from '@/views/layout/routerView/parent.vue';
 
 // 定义动态路由
 export const dynamicRoutes = [
@@ -12,119 +12,108 @@ export const dynamicRoutes = [
         meta: {
             isKeepAlive: true,
         },
-        children: [
-            {
-                path: '/home',
-                name: 'home',
-                component: () => import('@/views/home/index.vue'),
-                meta: {
-                    title: '首页',
-                    // iframe链接
-                    link: '',
-                    // 是否在菜单栏显示，默认显示
-                    isHide: false,
-                    isKeepAlive: true,
-                    // tag标签是否不可删除
-                    isAffix: true,
-                    // 是否为iframe
-                    isIframe: false,
-                    icon: 'el-icon-s-home',
-                },
-            },
-            {
-                path: '/sys',
-                name: 'Resource',
-                redirect: '/sys/resources',
-                meta: {
-                    title: '系统管理',
-                    // 资源code，用于校验用户是否拥有该资源权限
-                    code: 'sys',
-                    // isKeepAlive: true,
-                    icon: 'el-icon-monitor',
-                },
-                children: [
-                    {
-                        path: 'sys/resources',
-                        name: 'ResourceList',
-                        component: () => import('@/views/system/resource'),
-                        meta: {
-                            title: '资源管理',
-                            code: 'resource:list',
-                            isKeepAlive: true,
-                            icon: 'el-icon-menu',
-                        },
-                    },
-                    {
-                        path: 'sys/roles',
-                        name: 'RoleList',
-                        component: () => import('@/views/system/role'),
-                        meta: {
-                            title: '角色管理',
-                            code: 'role:list',
-                            isKeepAlive: true,
-                            icon: 'el-icon-menu',
-                        },
-                    },
-                    {
-                        path: 'sys/accounts',
-                        name: 'ResourceList',
-                        component: () => import('@/views/system/account'),
-                        meta: {
-                            title: '账号管理',
-                            code: 'account:list',
-                            isKeepAlive: true,
-                            icon: 'el-icon-menu',
-                        },
-                    },
-                ],
-            },
-            {
-                path: '/machine',
-                name: 'Machine',
-                redirect: '/machine/list',
-                meta: {
-                    title: '机器管理',
-                    // 资源code，用于校验用户是否拥有该资源权限
-                    code: 'machine',
-                    // isKeepAlive: true,
-                    icon: 'el-icon-monitor',
-                },
-                children: [
-                    {
-                        path: '/list',
-                        name: 'MachineList',
-                        component: () => import('@/views/ops/machine'),
-                        meta: {
-                            title: '机器列表',
-                            code: 'machine:list',
-                            isKeepAlive: true,
-                            icon: 'el-icon-menu',
-                        },
-                    },
-                ],
-            },
-            {
-                path: '/personal',
-                name: 'personal',
-                component: () => import('@/views/personal/index.vue'),
-                meta: {
-                    title: '个人中心',
-                    isKeepAlive: true,
-                    icon: 'el-icon-user',
-                },
-            },
-            {
-                path: '/iframes',
-                name: 'layoutIfameView',
-                component: RouterParent,
-                meta: {
-                    title: 'iframe',
-                    link: 'https://gitee.com/lyt-top/vue-next-admin',
-                    isIframe: true,
-                    icon: 'el-icon-menu',
-                },
-            },
-        ],
+    //     children: [
+    //         {
+    //             path: '/home',
+    //             name: 'home',
+    //             component: () => import('@/views/home/index.vue'),
+    //             meta: {
+    //                 title: '首页',
+    //                 // iframe链接
+    //                 link: '',
+    //                 // 是否在菜单栏显示，默认显示
+    //                 isHide: false,
+    //                 isKeepAlive: true,
+    //                 // tag标签是否不可删除
+    //                 isAffix: true,
+    //                 // 是否为iframe
+    //                 isIframe: false,
+    //                 icon: 'el-icon-s-home',
+    //             },
+    //         },
+    //         {
+    //             path: '/sys',
+    //             name: 'Resource',
+    //             redirect: '/sys/resources',
+    //             meta: {
+    //                 title: '系统管理',
+    //                 // 资源code，用于校验用户是否拥有该资源权限
+    //                 code: 'sys',
+    //                 // isKeepAlive: true,
+    //                 icon: 'el-icon-monitor',
+    //             },
+    //             children: [
+    //                 {
+    //                     path: 'sys/resources',
+    //                     name: 'ResourceList',
+    //                     component: () => import('@/views/system/resource'),
+    //                     meta: {
+    //                         title: '资源管理',
+    //                         code: 'resource:list',
+    //                         isKeepAlive: true,
+    //                         icon: 'el-icon-menu',
+    //                     },
+    //                 },
+    //                 {
+    //                     path: 'sys/roles',
+    //                     name: 'RoleList',
+    //                     component: () => import('@/views/system/role'),
+    //                     meta: {
+    //                         title: '角色管理',
+    //                         code: 'role:list',
+    //                         isKeepAlive: true,
+    //                         icon: 'el-icon-menu',
+    //                     },
+    //                 },
+    //                 {
+    //                     path: 'sys/accounts',
+    //                     name: 'ResourceList',
+    //                     component: () => import('@/views/system/account'),
+    //                     meta: {
+    //                         title: '账号管理',
+    //                         code: 'account:list',
+    //                         isKeepAlive: true,
+    //                         icon: 'el-icon-menu',
+    //                     },
+    //                 },
+    //             ],
+    //         },
+    //         {
+    //             path: '/machine',
+    //             name: 'Machine',
+    //             redirect: '/machine/list',
+    //             meta: {
+    //                 title: '机器管理',
+    //                 // 资源code，用于校验用户是否拥有该资源权限
+    //                 code: 'machine',
+    //                 // isKeepAlive: true,
+    //                 icon: 'el-icon-monitor',
+    //             },
+    //             children: [
+    //                 {
+    //                     path: '/list',
+    //                     name: 'MachineList',
+    //                     component: () => import('@/views/ops/machine'),
+    //                     meta: {
+    //                         title: '机器列表',
+    //                         code: 'machine:list',
+    //                         isKeepAlive: true,
+    //                         icon: 'el-icon-menu',
+    //                     },
+    //                 },
+    //             ],
+    //         },
+    //         {
+    //             path: '/personal',
+    //             name: 'personal',
+    //             component: () => import('@/views/personal/index.vue'),
+    //             meta: {
+    //                 title: '个人中心',
+    //                 isKeepAlive: true,
+    //                 icon: 'el-icon-user',
+    //             },
+    //         },
+    //     ],
     },
 ];
 
@@ -135,7 +124,7 @@ export const staticRoutes: Array<RouteRecordRaw> = [
         name: 'login',
         component: () => import('@/views/login/index.vue'),
         meta: {
-            title: '登陆',
+            title: '登录',
         },
     },
     {
@@ -165,17 +154,6 @@ export const staticRoutes: Array<RouteRecordRaw> = [
             titleRename: true,
         },
     },
-    {
-        path: '/machine/terminal-rec',
-        name: 'machineTerminalRec',
-        component: () => import('@/views/ops/machine/MachineRec.vue'),
-        meta: {
-            // 将路径 'xxx?name=名字' 里的name字段值替换到title里
-            title: '终端回放 | {name}',
-            // 是否根据query对标题名进行参数替换，即最终显示为‘终端_机器名’
-            titleRename: true,
-        },
-    },
 ];
 
 // 定义404界面

mayfly_go_web/src/store/interface/index.ts

@@ -53,6 +53,7 @@ export interface ThemeConfigState {
         terminalCursor: string;
         terminalFontSize: number;
         terminalFontWeight: string;
+        editorTheme: string;
     };
 }
 
@@ -71,6 +72,7 @@ export interface UserInfosState {
     userInfos: object;
 }
 
+
 // 后端返回原始路由(未处理时)
 // export interface RequestOldRoutesState {
 //     requestOldRoutes: Array<object>;

mayfly_go_web/src/store/modules/themeConfig.ts

@@ -107,13 +107,16 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
             layout: 'classic',
 
             // ssh终端字体颜色
-            terminalForeground: '#7e9192',
+            terminalForeground: '#C5C8C6',
             // ssh终端背景色
-            terminalBackground: '#002833',
+            terminalBackground: '#121212',
             // ssh终端cursor色
-            terminalCursor: '#268F81',
-            terminalFontSize: 15,
-            terminalFontWeight: 'normal',
+            terminalCursor: '#F0CC09',
+            terminalFontSize: 14,
+            terminalFontWeight: 'bold',
+
+            // 编辑器主题
+            editorTheme: 'vs',
 
 
             /* 后端控制路由

mayfly_go_web/src/theme/app.scss

@@ -1,225 +1,261 @@
 /* 初始化样式
 ------------------------------- */
 * {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	outline: none !important;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    outline: none !important;
 }
 
 html,
 body,
 #app {
-	margin: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-	font-weight: 450;
-	-webkit-font-smoothing: antialiased;
-	-webkit-tap-highlight-color: transparent;
-	background-color: #f8f8f8;
-	font-size: 14px;
-	overflow: hidden;
-	position: relative;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+    font-weight: 450;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    background-color: #f8f8f8;
+    font-size: 14px;
+    overflow: hidden;
+    position: relative;
 }
 
 /* 主布局样式
 ------------------------------- */
 .layout-container {
-	width: 100%;
-	height: 100%;
-	.layout-aside {
-		background: var(--bg-menuBar);
-		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
-		height: inherit;
-		position: relative;
-		z-index: 1;
-		display: flex;
-		flex-direction: column;
-		overflow-x: hidden !important;
-		.el-scrollbar__view {
-			overflow: hidden;
-		}
-	}
-	.layout-header {
-		padding: 0 !important;
-	}
-	.layout-main {
-		padding: 0 !important;
-		overflow: hidden;
-		width: 100%;
-		background-color: #f8f8f8;
-	}
-	.el-scrollbar {
-		width: 100%;
-	}
-	.layout-view-bg-white {
-		background: white;
-		width: 100%;
-		height: 100%;
-		border-radius: 4px;
-		border: 1px solid #ebeef5;
-	}
-	.layout-el-aside-br-color {
-		border-right: 1px solid rgb(238, 238, 238);
-	}
-	.layout-aside-width-default {
-		width: 220px !important;
-		transition: width 0.3s ease;
-	}
-	.layout-aside-width64 {
-		width: 64px !important;
-		transition: width 0.3s ease;
-	}
-	.layout-aside-width1 {
-		width: 1px !important;
-		transition: width 0.3s ease;
-	}
-	.layout-scrollbar {
-		@extend .el-scrollbar;
-		padding: 10px;
-	}
-	.layout-mian-height-50 {
-		height: calc(100vh - 50px);
-	}
-	.layout-columns-warp {
-		flex: 1;
-		display: flex;
-		overflow: hidden;
-	}
-	.layout-hide {
-		display: none;
-	}
+    width: 100%;
+    height: 100%;
+
+    .layout-aside {
+        background: var(--bg-menuBar);
+        box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
+        height: inherit;
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        overflow-x: hidden !important;
+
+        .el-scrollbar__view {
+            overflow: hidden;
+        }
+    }
+
+    .layout-header {
+        padding: 0 !important;
+    }
+
+    .layout-main {
+        padding: 0 !important;
+        overflow: hidden;
+        width: 100%;
+        background-color: #f8f8f8;
+    }
+
+    .el-scrollbar {
+        width: 100%;
+    }
+
+    .layout-view-bg-white {
+        background: white;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        border: 1px solid #ebeef5;
+    }
+
+    .layout-el-aside-br-color {
+        border-right: 1px solid rgb(238, 238, 238);
+    }
+
+    .layout-aside-width-default {
+        width: 220px !important;
+        transition: width 0.3s ease;
+    }
+
+    .layout-aside-width64 {
+        width: 64px !important;
+        transition: width 0.3s ease;
+    }
+
+    .layout-aside-width1 {
+        width: 1px !important;
+        transition: width 0.3s ease;
+    }
+
+    .layout-scrollbar {
+        @extend .el-scrollbar;
+        padding: 10px;
+    }
+
+    .layout-mian-height-50 {
+        height: calc(100vh - 50px);
+    }
+
+    .layout-columns-warp {
+        flex: 1;
+        display: flex;
+        overflow: hidden;
+    }
+
+    .layout-hide {
+        display: none;
+    }
 }
 
 /* element plus 全局样式
 ------------------------------- */
 .layout-breadcrumb-seting {
-	.el-drawer__header {
-		padding: 0 15px !important;
-		height: 50px;
-		display: flex;
-		align-items: center;
-		margin-bottom: 0 !important;
-		border-bottom: 1px solid rgb(230, 230, 230);
-	}
-	.el-divider {
-		background-color: rgb(230, 230, 230);
-	}
+    .el-drawer__header {
+        padding: 0 15px !important;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0 !important;
+        border-bottom: 1px solid rgb(230, 230, 230);
+    }
+
+    .el-divider {
+        background-color: rgb(230, 230, 230);
+    }
 }
 
 /* nprogress 进度条跟随主题颜色
 ------------------------------- */
 #nprogress {
-	.bar {
-		background: var(--color-primary) !important;
-		z-index: 9999999 !important;
-	}
+    .bar {
+        background: var(--color-primary) !important;
+        z-index: 9999999 !important;
+    }
 }
 
 /* flex 弹性布局
 ------------------------------- */
 .flex {
-	display: flex;
+    display: flex;
 }
+
 .flex-auto {
-	flex: 1;
+    flex: 1;
 }
+
 .flex-center {
-	@extend .flex;
-	flex-direction: column;
-	width: 100%;
-	overflow: hidden;
+    @extend .flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: hidden;
 }
+
 .flex-margin {
-	margin: auto;
+    margin: auto;
 }
+
 .flex-warp {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-	margin: 0 -5px;
-	.flex-warp-item {
-		padding: 5px;
-		.flex-warp-item-box {
-			width: 100%;
-			height: 100%;
-		}
-	}
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    margin: 0 -5px;
+
+    .flex-warp-item {
+        padding: 5px;
+
+        .flex-warp-item-box {
+            width: 100%;
+            height: 100%;
+        }
+    }
 }
 
 /* 宽高 100%
 ------------------------------- */
 .w100 {
-	width: 100% !important;
+    width: 100% !important;
 }
+
 .h100 {
-	height: 100% !important;
+    height: 100% !important;
 }
+
 .vh100 {
-	height: 100vh !important;
+    height: 100vh !important;
 }
+
 .max100vh {
-	max-height: 100vh !important;
+    max-height: 100vh !important;
 }
+
 .min100vh {
-	min-height: 100vh !important;
+    min-height: 100vh !important;
 }
 
 /* 颜色值
 ------------------------------- */
 .color-primary {
-	color: var(--color-primary);
+    color: var(--color-primary);
 }
+
 .color-success {
-	color: var(--color-success);
+    color: var(--color-success);
 }
+
 .color-warning {
-	color: var(--color-warning);
+    color: var(--color-warning);
 }
+
 .color-danger {
-	color: var(--color-danger);
+    color: var(--color-danger);
 }
+
 .color-info {
-	color: var(--color-info);
+    color: var(--color-info);
 }
 
 /* 字体大小全局样式
 ------------------------------- */
 @for $i from 10 through 32 {
-	.font#{$i} {
-		font-size: #{$i}px !important;
-	}
+    .font#{$i} {
+        font-size: #{$i}px !important;
+    }
 }
 
 /* 外边距、内边距全局样式
 ------------------------------- */
 @for $i from 1 through 35 {
-	.mt#{$i} {
-		margin-top: #{$i}px !important;
-	}
-	.mr#{$i} {
-		margin-right: #{$i}px !important;
-	}
-	.mb#{$i} {
-		margin-bottom: #{$i}px !important;
-	}
-	.ml#{$i} {
-		margin-left: #{$i}px !important;
-	}
-	.pt#{$i} {
-		padding-top: #{$i}px !important;
-	}
-	.pr#{$i} {
-		padding-right: #{$i}px !important;
-	}
-	.pb#{$i} {
-		padding-bottom: #{$i}px !important;
-	}
-	.pl#{$i} {
-		padding-left: #{$i}px !important;
-	}
+    .mt#{$i} {
+        margin-top: #{$i}px !important;
+    }
+
+    .mr#{$i} {
+        margin-right: #{$i}px !important;
+    }
+
+    .mb#{$i} {
+        margin-bottom: #{$i}px !important;
+    }
+
+    .ml#{$i} {
+        margin-left: #{$i}px !important;
+    }
+
+    .pt#{$i} {
+        padding-top: #{$i}px !important;
+    }
+
+    .pr#{$i} {
+        padding-right: #{$i}px !important;
+    }
+
+    .pb#{$i} {
+        padding-bottom: #{$i}px !important;
+    }
+
+    .pl#{$i} {
+        padding-left: #{$i}px !important;
+    }
 }
 
 
@@ -249,15 +285,22 @@ body,
 .el-menu .fa:not(.is-children) {
     font-size: 14px;
 }
-.gray-mode{
+
+.gray-mode {
     filter: grayscale(100%);
 }
 
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
     transition: opacity .2s ease-in-out;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+
+.fade-enter,
+.fade-leave-to
+
+/* .fade-leave-active below version 2.1.8 */
+    {
     opacity: 0;
 }
 
@@ -270,7 +313,7 @@ body,
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
-  }
+}
 
 .toolbar {
     width: 100%;
@@ -289,4 +332,32 @@ body,
     .el-form-item {
         margin-bottom: 3px;
     }
+}
+
+.el-table-z-index-inherit .el-table .el-table__cell {
+    z-index: inherit !important;
+}
+
+.f12 {
+    font-size: 12px
+}
+
+// 图标垂直居中
+.icon-middle {
+    .el-icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        vertical-align: middle;
+    }
+}
+.img-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    vertical-align: middle;
+    height: 16px;
+    width: 16px;
 }

mayfly_go_web/src/theme/iconSelector.scss

@@ -0,0 +1,87 @@
+/* Popover 弹出框(图标选择器)
+------------------------------- */
+.icon-selector-popper {
+	padding: 0 !important;
+	.icon-selector-warp {
+		.icon-selector-warp-title {
+			height: 40px;
+			line-height: 40px;
+			padding: 0 15px;
+		}
+		.icon-selector-warp-row {
+			max-height: 260px;
+			overflow-y: auto;
+			padding: 15px 15px 5px;
+			border-top: 1px solid #ebeef5;
+			.ele-col:nth-last-child(1),
+			.ele-col:nth-last-child(2) {
+				display: none;
+			}
+			.awe-col:nth-child(-n + 24) {
+				display: none;
+			}
+			.icon-selector-warp-item {
+				display: flex;
+				border: 1px solid #ebeef5;
+				padding: 10px;
+				border-radius: 5px;
+				margin-bottom: 10px;
+				transition: all 0.3s ease;
+				.icon-selector-warp-item-value {
+					transition: all 0.3s ease;
+					i {
+						font-size: 20px;
+						color: #606266;
+					}
+				}
+				&:hover {
+					border: 1px solid var(--color-primary);
+					cursor: pointer;
+					transition: all 0.3s ease;
+					.icon-selector-warp-item-value {
+						i {
+							color: var(--color-primary);
+							transition: all 0.3s ease;
+						}
+					}
+				}
+			}
+			.icon-selector-active {
+				border: 1px solid var(--color-primary);
+				.icon-selector-warp-item-value {
+					i {
+						color: var(--color-primary);
+					}
+				}
+			}
+		}
+		.icon-selector-all {
+			.el-input {
+				padding: 0 15px;
+				margin-bottom: 10px;
+			}
+			&-tabs {
+				display: flex;
+				height: 30px;
+				line-height: 30px;
+				padding: 0 15px;
+				margin-bottom: 5px;
+				&-item {
+					flex: 1;
+					text-align: center;
+					cursor: pointer;
+					&:hover {
+						color: var(--color-primary);
+					}
+				}
+				&-active {
+					background: var(--color-primary);
+					border-radius: 5px;
+					.label {
+						color: #ffffff;
+					}
+				}
+			}
+		}
+	}
+}

mayfly_go_web/src/theme/index.scss

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

mayfly_go_web/src/views/home/Home.vue

@@ -7,13 +7,14 @@
                         <img :src="getUserInfos.photo" />
                         <div class="home-card-first-right ml15">
                             <div class="flex-margin">
-                                <div class="home-card-first-right-title">{{ `${currentTime}, ${getUserInfos.username}` }}</div>
+                                <div class="home-card-first-right-title">{{ `${currentTime}, ${getUserInfos.username}`
+                                }}</div>
                             </div>
                         </div>
                     </div>
                 </div>
             </el-col>
-            <el-col :sm="3" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
+            <el-col :sm="3" class="mb15" v-for="(v, k) in topCardItemList as any" :key="k">
                 <div @click="toPage(v)" class="home-card-item home-card-item-box" :style="{ background: v.color }">
                     <div class="home-card-item-flex">
                         <div class="home-card-item-title pb3">{{ v.title }}</div>
@@ -26,7 +27,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
 import { useStore } from '@/store/index.ts';
 // import * as echarts from 'echarts';
@@ -34,103 +35,96 @@ import { CountUp } from 'countup.js';
 import { formatAxis } from '@/common/utils/formatTime.ts';
 import { indexApi } from './api';
 import { useRouter } from 'vue-router';
-export default {
-    name: 'HomePage',
-    setup() {
-        // const { proxy } = getCurrentInstance() as any;
-        const router = useRouter();
-        const store = useStore();
-        const state = reactive({
-            topCardItemList: [
-                {
-                    title: '项目数',
-                    id: 'projectNum',
-                    color: '#FEBB50',
-                },
-                {
-                    title: 'Linux机器数',
-                    id: 'machineNum',
-                    color: '#F95959',
-                },
-                {
-                    title: '数据库总数',
-                    id: 'dbNum',
-                    color: '#8595F4',
-                },
-                {
-                    title: 'redis总数',
-                    id: 'redisNum',
-                    color: '#1abc9c',
-                },
-            ],
-        });
 
-        // 当前时间提示语
-        const currentTime = computed(() => {
-            return formatAxis(new Date());
-        });
+const router = useRouter();
+const store = useStore();
+const state = reactive({
+    topCardItemList: [
+        {
+            title: 'Linux机器',
+            id: 'machineNum',
+            color: '#F95959',
+        },
+        {
+            title: '数据库',
+            id: 'dbNum',
+            color: '#8595F4',
+        },
+        {
+            title: 'redis',
+            id: 'redisNum',
+            color: '#1abc9c',
+        },
+        {
+            title: 'Mongo',
+            id: 'mongoNum',
+            color: '#FEBB50',
+        },
+    ],
+});
 
-        // 初始化数字滚动
-        const initNumCountUp = async () => {
-            const res: any = await indexApi.getIndexCount.request();
-            nextTick(() => {
-                new CountUp('projectNum', res.projectNum).start();
-                new CountUp('machineNum', res.machineNum).start();
-                new CountUp('dbNum', res.dbNum).start();
-                new CountUp('redisNum', res.redisNum).start();
-            });
-        };
+const {
+    topCardItemList,
+} = toRefs(state)
 
-        const toPage = (item: any) => {
-            switch (item.id) {
-                case 'personal': {
-                    router.push('/personal');
-                    break;
-                }
-                case 'projectNum': {
-                    router.push('/ops/projects');
-                    break;
-                }
-                case 'machineNum': {
-                    router.push('/ops/machines');
-                    break;
-                }
-                case 'dbNum': {
-                    router.push('/ops/dbms/dbs');
-                    break;
-                }
-                case 'redisNum': {
-                    router.push('/ops/redis/manage');
-                    break;
-                }
-            }
-        };
+// 当前时间提示语
+const currentTime = computed(() => {
+    return formatAxis(new Date());
+});
 
-        // 页面加载时
-        onMounted(() => {
-            initNumCountUp();
-            // initHomeLaboratory();
-            // initHomeOvertime();
-        });
-
-        // 获取用户信息 vuex
-        const getUserInfos = computed(() => {
-            return store.state.userInfos.userInfos;
-        });
-
-        return {
-            getUserInfos,
-            currentTime,
-            toPage,
-            ...toRefs(state),
-        };
-    },
+// 初始化数字滚动
+const initNumCountUp = async () => {
+    const res: any = await indexApi.getIndexCount.request();
+    nextTick(() => {
+        new CountUp('mongoNum', res.mongoNum).start();
+        new CountUp('machineNum', res.machineNum).start();
+        new CountUp('dbNum', res.dbNum).start();
+        new CountUp('redisNum', res.redisNum).start();
+    });
 };
+
+const toPage = (item: any) => {
+    switch (item.id) {
+        case 'personal': {
+            router.push('/personal');
+            break;
+        }
+        case 'mongoNum': {
+            router.push('/mongo/mongo-data-operation');
+            break;
+        }
+        case 'machineNum': {
+            router.push('/machine/machines');
+            break;
+        }
+        case 'dbNum': {
+            router.push('/dbms/sql-exec');
+            break;
+        }
+        case 'redisNum': {
+            router.push('/redis/data-operation');
+            break;
+        }
+    }
+};
+
+// 页面加载时
+onMounted(() => {
+    initNumCountUp();
+    // initHomeLaboratory();
+    // initHomeOvertime();
+});
+
+// 获取用户信息 vuex
+const getUserInfos = computed(() => {
+    return store.state.userInfos.userInfos;
+});
 </script>
 
 <style scoped lang="scss">
 .home-container {
     overflow-x: hidden;
+
     .home-card-item {
         width: 100%;
         height: 103px;
@@ -138,16 +132,19 @@ export default {
         border-radius: 4px;
         transition: all ease 0.3s;
         cursor: pointer;
+
         &:hover {
             box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
             transition: all ease 0.3s;
         }
     }
+
     .home-card-item-box {
         display: flex;
         align-items: center;
         position: relative;
         overflow: hidden;
+
         &:hover {
             i {
                 right: 0px !important;
@@ -155,6 +152,7 @@ export default {
                 transition: all ease 0.3s;
             }
         }
+
         i {
             position: absolute;
             right: -10px;
@@ -163,48 +161,59 @@ export default {
             transform: rotate(-30deg);
             transition: all ease 0.3s;
         }
+
         .home-card-item-flex {
             padding: 0 20px;
             color: white;
+
             .home-card-item-title,
             .home-card-item-tip {
                 font-size: 13px;
             }
+
             .home-card-item-title-num {
                 font-size: 18px;
             }
+
             .home-card-item-tip-num {
                 font-size: 13px;
             }
         }
     }
+
     .home-card-first {
         background: white;
         border: 1px solid #ebeef5;
         display: flex;
         align-items: center;
+
         img {
             width: 60px;
             height: 60px;
             border-radius: 100%;
             border: 2px solid var(--color-primary-light-5);
         }
+
         .home-card-first-right {
             flex: 1;
             display: flex;
             flex-direction: column;
+
             .home-card-first-right-msg {
                 font-size: 13px;
                 color: gray;
             }
         }
     }
+
     .home-monitor {
         height: 200px;
+
         .flex-warp-item {
             width: 50%;
             height: 100px;
             display: flex;
+
             .flex-warp-item-box {
                 margin: auto;
                 height: auto;
@@ -212,19 +221,24 @@ export default {
             }
         }
     }
+
     .home-warning-card {
         height: 292px;
+
         ::v-deep(.el-card) {
             height: 100%;
         }
     }
+
     .home-dynamic {
         height: 200px;
+
         .home-dynamic-item {
             display: flex;
             width: 100%;
             height: 60px;
             overflow: hidden;
+
             &:first-of-type {
                 .home-dynamic-item-line {
                     i {
@@ -232,20 +246,24 @@ export default {
                     }
                 }
             }
+
             .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;
                     color: gray;
                 }
             }
+
             .home-dynamic-item-line {
                 height: 60px;
                 border-right: 2px dashed #dfdfdf;
                 margin: 0 20px;
                 position: relative;
+
                 i {
                     color: var(--color-primary);
                     font-size: 12px;
@@ -256,8 +274,10 @@ export default {
                     background: white;
                 }
             }
+
             .home-dynamic-item-right {
                 flex: 1;
+
                 .home-dynamic-item-right-title {
                     i {
                         margin-right: 5px;
@@ -270,6 +290,7 @@ export default {
                         color: var(--color-primary);
                     }
                 }
+
                 .home-dynamic-item-right-label {
                     font-size: 13px;
                     color: gray;

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

@@ -83,7 +83,7 @@ export default defineComponent({
             () => route.path,
             () => {
                 initCurrentRouteMeta(route.meta);
-                proxy.$refs.layoutScrollbarRef.wrap$.scrollTop = 0;
+                proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
             }
         );
         return {

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

@@ -1,7 +1,10 @@
 <template>
     <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
         <img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
-        <span>{{ getThemeConfig.globalTitle }}</span>
+        <span>
+            {{ `${getThemeConfig.globalTitle}` }}
+            <sub><span style="font-size: 10px;color:goldenrod">{{ ` ${config.version}` }}</span></sub>
+        </span>
     </div>
     <div class="layout-logo-size" v-else @click="onThemeConfigChange">
         <img src="@/assets/image/logo.svg" class="layout-logo-size-img" />
@@ -11,6 +14,7 @@
 <script lang="ts">
 import { computed, getCurrentInstance } from 'vue';
 import { useStore } from '@/store/index.ts';
+import config from '@/common/config.ts';
 export default {
     name: 'layoutLogo',
     setup() {
@@ -32,6 +36,7 @@ export default {
             store.state.themeConfig.themeConfig.isCollapse = !store.state.themeConfig.themeConfig.isCollapse;
         };
         return {
+            config,
             setShowLogo,
             getThemeConfig,
             onThemeConfigChange,
@@ -52,26 +57,31 @@ export default {
     font-size: 16px;
     cursor: pointer;
     animation: logoAnimation 0.3s ease-in-out;
+
     &:hover {
         span {
             color: var(--color-primary-light-2);
         }
     }
+
     &-medium-img {
         width: 20px;
         margin-right: 5px;
     }
 }
+
 .layout-logo-size {
     width: 100%;
     height: 50px;
     display: flex;
     cursor: pointer;
     animation: logoAnimation 0.3s ease-in-out;
+
     &-img {
         width: 20px;
         margin: auto;
     }
+
     &:hover {
         img {
             animation: logoAnimation 0.3s ease-in-out;

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

@@ -50,6 +50,18 @@
                     </div>
                 </div>
 
+                <el-divider content-position="left">editor 设置</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-select @change="setLocalThemeConfig" v-model="getThemeConfig.editorTheme" size="small" 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>
+                        </el-select>
+                    </div>
+                </div>
+
                 <!-- 全局主题 -->
                 <el-divider content-position="left">全局主题</el-divider>
                 <div class="layout-breadcrumb-seting-bar-flex">

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

@@ -33,7 +33,7 @@
                 popper-class="el-popover-pupop-user-news"
             >
                 <template #reference>
-                    <el-badge :is-dot="true" @click="isShowUserNewsPopover = !isShowUserNewsPopover">
+                    <el-badge :is-dot="false" @click="isShowUserNewsPopover = !isShowUserNewsPopover">
                         <el-icon title="消息">
                             <bell />
                         </el-icon>
@@ -55,7 +55,7 @@
         <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
             <span class="layout-navbars-breadcrumb-user-link" style="cursor: pointer">
                 <img :src="getUserInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
-                {{ getUserInfos.username === '' ? 'test' : getUserInfos.username }}
+                {{ getUserInfos.name || getUserInfos.username }}
                 <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <template #dropdown>

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

@@ -40,7 +40,7 @@ export default {
         };
         // 前往通知中心点击
         const toMsgCenter = () => {
-            // window.open('https://gitee.com/lyt-top/vue-next-admin');
+            
         };
         return {
             onAllReadClick,

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

@@ -234,7 +234,7 @@ export default {
         };
         // 鼠标滚轮滚动
         const onHandleScroll = (e: any) => {
-            proxy.$refs.scrollbarRef.$refs.wrap.scrollLeft += e.wheelDelta / 4;
+            proxy.$refs.scrollbarRef.$refs.wrapRef.scrollLeft += e.wheelDelta / 4;
         };
         // tagsView 横向滚动
         const tagsViewmoveToCurrentTag = () => {
@@ -251,7 +251,7 @@ export default {
                 // 最后 li
                 let liLast: any = tagsRefs.value[tagsRefs.value.length - 1];
                 // 当前滚动条的值
-                let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrap$;
+                let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrapRef;
                 // 当前滚动条滚动宽度
                 let scrollS = scrollRefs.scrollWidth;
                 // 当前滚动条偏移宽度

mayfly_go_web/src/views/login/component/AccountLogin.vue

@@ -2,37 +2,25 @@
     <div>
         <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-content-form" size="large">
             <el-form-item prop="username">
-                <el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable autocomplete="off">
+                <el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable
+                    autocomplete="off">
                 </el-input>
             </el-form-item>
             <el-form-item prop="password">
-                <el-input type="password" placeholder="请输入密码" prefix-icon="lock" v-model="loginForm.password" autocomplete="off" show-password>
+                <el-input type="password" placeholder="请输入密码" prefix-icon="lock" v-model="loginForm.password"
+                    autocomplete="off" show-password>
                 </el-input>
             </el-form-item>
-            <el-form-item v-if="useLoginCaptcha" prop="captcha">
+            <el-form-item v-if="isUseLoginCaptcha" prop="captcha">
                 <el-row :gutter="15">
                     <el-col :span="16">
-                        <el-input
-                            type="text"
-                            maxlength="6"
-                            placeholder="请输入验证码"
-                            prefix-icon="position"
-                            v-model="loginForm.captcha"
-                            clearable
-                            autocomplete="off"
-                            @keyup.enter="login"
-                        ></el-input>
+                        <el-input type="text" maxlength="6" placeholder="请输入验证码" prefix-icon="position"
+                            v-model="loginForm.captcha" clearable autocomplete="off" @keyup.enter="login"></el-input>
                     </el-col>
                     <el-col :span="8">
                         <div class="login-content-code">
-                            <img
-                                class="login-content-code-img"
-                                @click="getCaptcha"
-                                width="130px"
-                                height="40px"
-                                :src="captchaImage"
-                                style="cursor: pointer"
-                            />
+                            <img class="login-content-code-img" @click="getCaptcha" width="130px" height="40px"
+                                :src="captchaImage" style="cursor: pointer" />
                         </div>
                     </el-col>
                 </el-row>
@@ -44,21 +32,20 @@
             </el-form-item>
         </el-form>
 
-        <el-dialog title="修改密码" v-model="changePwdDialog.visible" :close-on-click-modal="false" width="450px" :destroy-on-close="true">
-            <el-form :model="changePwdDialog.form" :rules="changePwdDialog.rules" ref="changePwdFormRef" label-width="65px">
+        <el-dialog title="修改密码" v-model="changePwdDialog.visible" :close-on-click-modal="false" width="450px"
+            :destroy-on-close="true">
+            <el-form :model="changePwdDialog.form" :rules="changePwdDialog.rules" ref="changePwdFormRef"
+                label-width="65px">
                 <el-form-item prop="username" label="用户名" required>
                     <el-input v-model.trim="changePwdDialog.form.username" disabled></el-input>
                 </el-form-item>
                 <el-form-item prop="oldPassword" label="旧密码" required>
-                    <el-input v-model.trim="changePwdDialog.form.oldPassword" autocomplete="new-password" type="password"></el-input>
+                    <el-input v-model.trim="changePwdDialog.form.oldPassword" autocomplete="new-password"
+                        type="password"></el-input>
                 </el-form-item>
                 <el-form-item prop="newPassword" label="新密码" required>
-                    <el-input
-                        v-model.trim="changePwdDialog.form.newPassword"
-                        placeholder="须为8位以上且包含字⺟⼤⼩写+数字+特殊符号"
-                        type="password"
-                        autocomplete="new-password"
-                    ></el-input>
+                    <el-input v-model.trim="changePwdDialog.form.newPassword" placeholder="须为8位以上且包含字⺟⼤⼩写+数字+特殊符号"
+                        type="password" autocomplete="new-password"></el-input>
                 </el-form-item>
             </el-form>
 
@@ -72,8 +59,8 @@
     </div>
 </template>
 
-<script lang="ts">
-import { nextTick, onMounted, ref, toRefs, reactive, defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+import { nextTick, onMounted, ref, toRefs, reactive, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { initBackEndControlRoutesFun } from '@/router/index.ts';
@@ -85,214 +72,210 @@ import { RsaEncrypt } from '@/common/rsa';
 import { useLoginCaptcha, useWartermark } from '@/common/sysconfig';
 import { letterAvatar } from '@/common/utils/string';
 
-export default defineComponent({
-    name: 'AccountLogin',
-    setup() {
-        const store = useStore();
-        const route = useRoute();
-        const router = useRouter();
-        const loginFormRef: any = ref(null);
-        const changePwdFormRef: any = ref(null);
+const rules = {
+    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+    captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+}
 
-        const state = reactive({
-            useLoginCaptcha: false,
-            captchaImage: '',
-            loginForm: {
-                username: '',
-                password: '',
-                captcha: '',
-                cid: '',
-            },
-            changePwdDialog: {
-                visible: false,
-                form: {
-                    username: '',
-                    oldPassword: '',
-                    newPassword: '',
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const loginFormRef: any = ref(null);
+const changePwdFormRef: any = ref(null);
+
+const state = reactive({
+    isUseLoginCaptcha: false,
+    captchaImage: '',
+    loginForm: {
+        username: '',
+        password: '',
+        captcha: '',
+        cid: '',
+    },
+    changePwdDialog: {
+        visible: false,
+        form: {
+            username: '',
+            oldPassword: '',
+            newPassword: '',
+        },
+        rules: {
+            newPassword: [
+                { required: true, message: '请输入新密码', trigger: 'blur' },
+                {
+                    pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/,
+                    message: '须为8位以上且包含字⺟⼤⼩写+数字+特殊符号',
+                    trigger: 'blur',
                 },
-                rules: {
-                    newPassword: [
-                        { required: true, message: '请输入新密码', trigger: 'blur' },
-                        {
-                            pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/,
-                            message: '须为8位以上且包含字⺟⼤⼩写+数字+特殊符号',
-                            trigger: 'blur',
-                        },
-                    ],
-                },
-            },
-            rules: {
-                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-                captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
-            },
-            loading: {
-                signIn: false,
-                changePwd: false,
-            },
-        });
-
-        onMounted(async () => {
-            nextTick(async () => {
-                state.useLoginCaptcha = await useLoginCaptcha();
-                getCaptcha();
-            });
-            // 移除公钥, 方便后续重新获取
-            sessionStorage.removeItem('RsaPublicKey');
-        });
-
-        const getCaptcha = async () => {
-            if (!state.useLoginCaptcha) {
-                return;
-            }
-            let res: any = await openApi.captcha();
-            state.captchaImage = res.base64Captcha;
-            state.loginForm.cid = res.cid;
-        };
-
-        // 时间获取
-        const currentTime = computed(() => {
-            return formatAxis(new Date());
-        });
-
-        // 校验登录表单并登录
-        const login = () => {
-            loginFormRef.value.validate((valid: boolean) => {
-                if (valid) {
-                    onSignIn();
-                } else {
-                    return false;
-                }
-            });
-        };
-
-        // 登录
-        const onSignIn = async () => {
-            state.loading.signIn = true;
-            let loginRes;
-            const originPwd = state.loginForm.password;
-            try {
-                const loginReq = { ...state.loginForm };
-                loginReq.password = await RsaEncrypt(originPwd);
-                loginRes = await openApi.login(loginReq);
-                // 存储 token 到浏览器缓存
-                setSession('token', loginRes.token);
-                setSession('menus', loginRes.menus);
-            } catch (e: any) {
-                state.loading.signIn = false;
-                state.loginForm.captcha = '';
-                // 密码强度不足
-                if (e.code && e.code == 401) {
-                    state.changePwdDialog.form.username = state.loginForm.username;
-                    state.changePwdDialog.form.oldPassword = originPwd;
-                    state.changePwdDialog.form.newPassword = '';
-                    state.changePwdDialog.visible = true;
-                } else {
-                    getCaptcha();
-                }
-                return;
-            }
-            // 用户信息
-            const userInfos = {
-                username: state.loginForm.username,
-                // 头像
-                photo: letterAvatar(state.loginForm.username),
-                time: new Date().getTime(),
-                // // 菜单资源code数组
-                // menus: loginRes.menus,
-                permissions: loginRes.permissions,
-                lastLoginTime: loginRes.lastLoginTime,
-                lastLoginIp: loginRes.lastLoginIp,
-            };
-
-            // 存储用户信息到浏览器缓存
-            setUserInfo2Session(userInfos);
-            // 1、请注意执行顺序(存储用户信息到vuex)
-            store.dispatch('userInfos/setUserInfos', userInfos);
-            if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
-                // 前端控制路由，2、请注意执行顺序
-                // await initAllFun();
-                await initBackEndControlRoutesFun();
-                signInSuccess();
-            } else {
-                // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
-                // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
-                await initBackEndControlRoutesFun();
-                // 执行完 initBackEndControlRoutesFun，再执行 signInSuccess
-                signInSuccess();
-            }
-        };
-
-        // 登录成功后的跳转
-        const signInSuccess = () => {
-            // 初始化登录成功时间问候语
-            let currentTimeInfo = currentTime.value;
-            // 登录成功，跳到转首页
-            // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
-            // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
-            route.query?.redirect ? router.push(route.query.redirect as string) : router.push('/');
-            // 登录成功提示
-            setTimeout(async () => {
-                // 关闭 loading
-                state.loading.signIn = true;
-                ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
-                if (await useWartermark()) {
-                    setUseWatermark2Session(true);
-                }
-            }, 300);
-        };
-
-        const changePwd = () => {
-            changePwdFormRef.value.validate(async (valid: boolean) => {
-                if (!valid) {
-                    return false;
-                }
-                try {
-                    state.loading.changePwd = true;
-                    const form = state.changePwdDialog.form;
-                    const changePwdReq: any = { ...form };
-                    changePwdReq.oldPassword = await RsaEncrypt(form.oldPassword);
-                    changePwdReq.newPassword = await RsaEncrypt(form.newPassword);
-                    await openApi.changePwd(changePwdReq);
-                    ElMessage.success('密码修改成功, 新密码已填充至登录密码框');
-                    state.loginForm.password = state.changePwdDialog.form.newPassword;
-                    state.changePwdDialog.visible = false;
-                    getCaptcha();
-                } finally {
-                    state.loading.changePwd = false;
-                }
-            });
-        };
-
-        const cancelChangePwd = () => {
-            state.changePwdDialog.visible = false;
-            state.changePwdDialog.form.newPassword = '';
-            state.changePwdDialog.form.oldPassword = '';
-            state.changePwdDialog.form.username = '';
-            getCaptcha();
-        };
-
-        return {
-            getCaptcha,
-            currentTime,
-            loginFormRef,
-            changePwdFormRef,
-            login,
-            changePwd,
-            cancelChangePwd,
-            ...toRefs(state),
-        };
+            ],
+        },
+    },
+    loading: {
+        signIn: false,
+        changePwd: false,
     },
 });
+
+const {
+    isUseLoginCaptcha,
+    captchaImage,
+    loginForm,
+    changePwdDialog,
+    loading,
+} = toRefs(state)
+
+onMounted(async () => {
+    nextTick(async () => {
+        state.isUseLoginCaptcha = await useLoginCaptcha();
+        getCaptcha();
+    });
+    // 移除公钥, 方便后续重新获取
+    sessionStorage.removeItem('RsaPublicKey');
+});
+
+const getCaptcha = async () => {
+    if (!state.isUseLoginCaptcha) {
+        return;
+    }
+    let res: any = await openApi.captcha();
+    state.captchaImage = res.base64Captcha;
+    state.loginForm.cid = res.cid;
+};
+
+// 时间获取
+const currentTime = computed(() => {
+    return formatAxis(new Date());
+});
+
+// 校验登录表单并登录
+const login = () => {
+    loginFormRef.value.validate((valid: boolean) => {
+        if (valid) {
+            onSignIn();
+        } else {
+            return false;
+        }
+    });
+};
+
+// 登录
+const onSignIn = async () => {
+    state.loading.signIn = true;
+    let loginRes;
+    const originPwd = state.loginForm.password;
+    try {
+        const loginReq = { ...state.loginForm };
+        loginReq.password = await RsaEncrypt(originPwd);
+        loginRes = await openApi.login(loginReq);
+        // 存储 token 到浏览器缓存
+        setSession('token', loginRes.token);
+        setSession('menus', loginRes.menus);
+    } catch (e: any) {
+        state.loading.signIn = false;
+        state.loginForm.captcha = '';
+        // 密码强度不足
+        if (e.code && e.code == 401) {
+            state.changePwdDialog.form.username = state.loginForm.username;
+            state.changePwdDialog.form.oldPassword = originPwd;
+            state.changePwdDialog.form.newPassword = '';
+            state.changePwdDialog.visible = true;
+        } else {
+            getCaptcha();
+        }
+        return;
+    }
+    // 用户信息
+    const userInfos = {
+        name: loginRes.name,
+        username: state.loginForm.username,
+        // 头像
+        photo: letterAvatar(state.loginForm.username),
+        time: new Date().getTime(),
+        // // 菜单资源code数组
+        // menus: loginRes.menus,
+        permissions: loginRes.permissions,
+        lastLoginTime: loginRes.lastLoginTime,
+        lastLoginIp: loginRes.lastLoginIp,
+    };
+
+    // 存储用户信息到浏览器缓存
+    setUserInfo2Session(userInfos);
+    // 1、请注意执行顺序(存储用户信息到vuex)
+    store.dispatch('userInfos/setUserInfos', userInfos);
+    if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
+        // 前端控制路由，2、请注意执行顺序
+        // await initAllFun();
+        await initBackEndControlRoutesFun();
+        signInSuccess();
+    } else {
+        // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+        // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+        await initBackEndControlRoutesFun();
+        // 执行完 initBackEndControlRoutesFun，再执行 signInSuccess
+        signInSuccess();
+    }
+};
+
+// 登录成功后的跳转
+const signInSuccess = () => {
+    // 初始化登录成功时间问候语
+    let currentTimeInfo = currentTime.value;
+    // 登录成功，跳到转首页
+    // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+    // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+    route.query?.redirect ? router.push(route.query.redirect as string) : router.push('/');
+    // 登录成功提示
+    setTimeout(async () => {
+        // 关闭 loading
+        state.loading.signIn = true;
+        ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
+        if (await useWartermark()) {
+            setUseWatermark2Session(true);
+        }
+    }, 300);
+};
+
+const changePwd = () => {
+    changePwdFormRef.value.validate(async (valid: boolean) => {
+        if (!valid) {
+            return false;
+        }
+        try {
+            state.loading.changePwd = true;
+            const form = state.changePwdDialog.form;
+            const changePwdReq: any = { ...form };
+            changePwdReq.oldPassword = await RsaEncrypt(form.oldPassword);
+            changePwdReq.newPassword = await RsaEncrypt(form.newPassword);
+            await openApi.changePwd(changePwdReq);
+            ElMessage.success('密码修改成功, 新密码已填充至登录密码框');
+            state.loginForm.password = state.changePwdDialog.form.newPassword;
+            state.changePwdDialog.visible = false;
+            getCaptcha();
+        } finally {
+            state.loading.changePwd = false;
+        }
+    });
+};
+
+const cancelChangePwd = () => {
+    state.changePwdDialog.visible = false;
+    state.changePwdDialog.form.newPassword = '';
+    state.changePwdDialog.form.oldPassword = '';
+    state.changePwdDialog.form.username = '';
+    getCaptcha();
+};
 </script>
 
 <style scoped lang="scss">
 .login-content-form {
     margin-top: 20px;
+
     .login-content-code {
         display: flex;
         align-items: center;
         justify-content: space-around;
+
         .login-content-code-img {
             width: 100%;
             height: 40px;
@@ -309,12 +292,14 @@ export default defineComponent({
             transition: all ease 0.2s;
             border-radius: 4px;
             user-select: none;
+
             &:hover {
                 border-color: #c0c4cc;
                 transition: all ease 0.2s;
             }
         }
     }
+
     .login-content-submit {
         width: 100%;
         letter-spacing: 2px;

mayfly_go_web/src/views/login/index.vue

@@ -24,40 +24,37 @@
                 </div> -->
             </div>
         </div>
-        <div class="login-copyright">
+        <!-- <div class="login-copyright">
             <div class="mb5 login-copyright-company">mayfly</div>
             <div class="login-copyright-msg">mayfly</div>
-        </div>
+        </div> -->
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { toRefs, reactive, computed } from 'vue';
 import Account from '@/views/login/component/AccountLogin.vue';
 import { useStore } from '@/store/index.ts';
-export default {
-    name: 'LoginPage',
-    components: { Account },
-    setup() {
-        const store = useStore();
-        const state = reactive({
-            tabsActiveName: 'account',
-            isTabPaneShow: true,
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 切换密码、手机登录
-        const onTabsClick = () => {
-            state.isTabPaneShow = !state.isTabPaneShow;
-        };
-        return {
-            onTabsClick,
-            getThemeConfig,
-            ...toRefs(state),
-        };
-    },
+
+const store = useStore();
+const state = reactive({
+    tabsActiveName: 'account',
+    isTabPaneShow: true,
+});
+
+const {
+    isTabPaneShow,
+    tabsActiveName,
+} = toRefs(state)
+
+// 获取布局配置信息
+const getThemeConfig = computed(() => {
+    return store.state.themeConfig.themeConfig;
+});
+
+// 切换密码、手机登录
+const onTabsClick = () => {
+    state.isTabPaneShow = !state.isTabPaneShow;
 };
 </script>
 
@@ -67,6 +64,7 @@ export default {
     height: 100%;
     background: url('@/assets/image/bg-login.png') no-repeat;
     background-size: 100% 100%;
+
     .login-logo {
         position: absolute;
         top: 30px;
@@ -80,6 +78,7 @@ export default {
         width: 90%;
         transform: translateX(-50%);
     }
+
     .login-content {
         width: 500px;
         padding: 20px;
@@ -94,9 +93,11 @@ export default {
         height: 480px;
         overflow: hidden;
         z-index: 1;
+
         .login-content-main {
             margin: 0 auto;
             width: 80%;
+
             .login-content-title {
                 color: #333;
                 font-weight: 500;
@@ -108,9 +109,11 @@ export default {
             }
         }
     }
+
     .login-content-mobile {
         height: 418px;
     }
+
     .login-copyright {
         position: absolute;
         left: 50%;
@@ -120,9 +123,11 @@ export default {
         color: white;
         font-size: 12px;
         opacity: 0.8;
+
         .login-copyright-company {
             white-space: nowrap;
         }
+
         .login-copyright-msg {
             @extend .login-copyright-company;
         }

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

@@ -1,80 +0,0 @@
-<template>
-    <div>
-        <el-form class="search-form" label-position="right" :inline="true">
-            <el-form-item prop="project" label="项目" label-width="40px">
-                <el-select v-model="projectId" placeholder="请选择项目" @change="changeProject" filterable>
-                    <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"></el-option>
-                </el-select>
-            </el-form-item>
-
-            <el-form-item prop="env" label="env" label-width="33px">
-                <el-select style="width: 80px" v-model="envId" placeholder="环境" @change="changeEnv" filterable>
-                    <el-option v-for="item in envs" :key="item.id" :label="item.name" :value="item.id">
-                        <span style="float: left">{{ item.name }}</span>
-                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
-                    </el-option>
-                </el-select>
-            </el-form-item>
-
-            <slot></slot>
-        </el-form>
-    </div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent, onMounted } from 'vue';
-import { projectApi } from '../project/api';
-
-export default defineComponent({
-    name: 'ProjectEnvSelect',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        data: {
-            type: Object,
-        },
-        title: {
-            type: String,
-        },
-        machineId: {
-            type: Number,
-        },
-        isCommon: {
-            type: Boolean,
-        },
-    },
-    setup(props: any, { emit }) {
-        const state = reactive({
-            projects: [] as any,
-            envs: [] as any,
-            projectId: null,
-            envId: null,
-        });
-
-        onMounted(async () => {
-            state.projects = await projectApi.accountProjects.request(null);
-        });
-
-        const changeProject = async (projectId: any) => {
-            emit('update:projectId', projectId);
-            emit('changeProjectEnv', state.projectId, null);
-            state.envId = null;
-            state.envs = await projectApi.projectEnvs.request({ projectId });
-        };
-
-        const changeEnv = (envId: any) => {
-            emit('update:envId', envId);
-            emit('changeProjectEnv', state.projectId, envId);
-        };
-
-        return {
-            ...toRefs(state),
-            changeProject,
-            changeEnv,
-        };
-    },
-});
-</script>
-<style lang="scss">
-</style>

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

@@ -0,0 +1,61 @@
+<template>
+    <div style="width: 100%">
+        <el-select @focus="getSshTunnelMachines" @change="change" style="width: 100%" v-model="sshTunnelMachineId"
+            @clear="clear" placeholder="请选择SSH隧道机器" clearable>
+            <el-option v-for="item in sshTunnelMachineList" :key="item.id" :label="`${item.ip}:${item.port} [${item.name}]`"
+                :value="item.id">
+            </el-option>
+        </el-select>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, onMounted } from 'vue';
+import { machineApi } from '../machine/api';
+
+const props = defineProps({
+    modelValue: {
+        type: Number,
+    },
+})
+
+//定义事件
+const emit = defineEmits(['update:modelValue'])
+
+const state = reactive({
+    // 单选则为id，多选为id数组
+    sshTunnelMachineId: null as any,
+    sshTunnelMachineList: [] as any,
+});
+
+const {
+    sshTunnelMachineId,
+    sshTunnelMachineList,
+} = toRefs(state)
+
+onMounted(async () => {
+    if (!props.modelValue || props.modelValue <= 0) {
+        state.sshTunnelMachineId = null;
+    } else {
+        state.sshTunnelMachineId = props.modelValue;
+    }
+    await getSshTunnelMachines();
+});
+
+const getSshTunnelMachines = async () => {
+    if (state.sshTunnelMachineList.length == 0) {
+        const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
+        state.sshTunnelMachineList = res.list;
+    }
+};
+
+const clear = () => {
+    state.sshTunnelMachineId = null;
+    change();
+}
+
+const change = () => {
+    emit('update:modelValue', state.sshTunnelMachineId);
+};
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,65 @@
+<template>
+    <div
+        style="display: inline-flex;  justify-content: center;  align-items: center; cursor: pointer;vertical-align: middle;">
+        <el-popover @show="showTagInfo" placement="top-start" title="标签信息" :width="300" trigger="hover">
+            <template #reference>
+                <el-icon>
+                    <InfoFilled />
+                </el-icon>
+            </template>
+            <span v-for="(v, i) in tags" :key="i">
+                <el-tooltip effect="customized" :content="v.remark" placement="top">
+                    <span class="color-success">{{ v.name }}</span>
+                </el-tooltip>
+                <span v-if="i != state.tags.length - 1" class="color-primary"> / </span>
+            </span>
+        </el-popover>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs, onMounted } from 'vue';
+import { tagApi } from '../tag/api';
+const props = defineProps({
+    tagPath: {
+        type: [String],
+        required: true,
+    },
+})
+
+const state = reactive({
+    tagPath: '',
+    tags: [] as any,
+})
+
+const {
+    tags,
+} = toRefs(state)
+
+onMounted(async () => {
+    state.tagPath = props.tagPath;
+})
+
+const showTagInfo = async () => {
+    if (state.tags && state.tags.length > 0) {
+        return;
+    }
+    const tagStrs = state.tagPath.split('/');
+    const tagPaths = [];
+    let nowTag = '';
+    for (let tagStr of tagStrs) {
+        if (nowTag) {
+            nowTag = `${nowTag}/${tagStr}`
+        } else {
+            nowTag = tagStr
+        }
+        tagPaths.push(nowTag)
+    }
+    state.tags = await tagApi.listByQuery.request({ tagPaths: tagPaths.join(',') })
+}
+
+</script>
+
+<style lang="scss">
+
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <el-tree-select @check="changeTag" style="width: 100%" v-model="selectTags" :data="tags" placeholder="请选择关联标签"
+            :render-after-expand="true" :default-expanded-keys="[selectTags]" show-checkbox check-strictly node-key="id"
+            :props="{
+                value: 'id',
+                label: 'codePath',
+                children: 'children',
+            }">
+            <template #default="{ data }">
+                <span class="custom-tree-node">
+                    <span style="font-size: 13px">
+                        {{ data.code }}
+                        <span style="color: #3c8dbc">【</span>
+                        {{ data.name }}
+                        <span style="color: #3c8dbc">】</span>
+                        <el-tag v-if="data.children !== null" size="small">{{ data.children.length }}</el-tag>
+                    </span>
+                </span>
+            </template>
+        </el-tree-select>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, onMounted } from 'vue';
+import { tagApi } from '../tag/api';
+
+const props = defineProps({
+    tagId: {
+        type: Number,
+    },
+    tagPath: {
+        type: String,
+    },
+})
+
+//定义事件
+const emit = defineEmits(['changeTag', 'update:tagId', 'update:tagPath'])
+
+const state = reactive({
+    tags: [],
+    // 单选则为id，多选为id数组
+    selectTags: null as any,
+});
+
+const {
+    tags,
+    selectTags,
+} = toRefs(state)
+
+onMounted(async () => {
+    if (props.tagId) {
+        state.selectTags = props.tagId;
+    }
+    state.tags = await tagApi.getTagTrees.request(null);
+});
+
+const changeTag = (tag: any, checkInfo: any) => {
+    if (checkInfo.checkedNodes.length > 0) {
+        emit('update:tagId', tag.id);
+        emit('update:tagPath', tag.codePath);
+        emit('changeTag', tag);
+    } else {
+        emit('update:tagId', null);
+        emit('update:tagPath', null);
+    }
+};
+</script>
+<style lang="scss">
+
+</style>

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

@@ -0,0 +1,122 @@
+<template>
+    <div class="instances-box layout-aside">
+        <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" />
+
+                <el-tree ref="treeRef" :style="{ maxHeight: state.height, height: state.height, overflow: 'auto' }"
+                    :highlight-current="true" :indent="7" :load="loadNode" :props="treeProps" lazy node-key="key"
+                    :expand-on-click-node="true" :filter-node-method="filterNode" @node-click="treeNodeClick" @node-expand="treeNodeClick">
+                    <template #default="{ node, data }">
+                        <span class="icon-middle ">
+                            <span v-if="data.type == TagTreeNode.TagPath">
+                                <tag-info :tag-path="data.label" />
+                            </span>
+
+                            <slot v-else :node="node" :data="data" name="prefix"></slot>
+
+                            <span class="ml3">
+                                <slot name="label" :data="data"> {{ data.label }}</slot>
+                            </span>
+                        </span>
+                    </template>
+                </el-tree>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref, watch, toRefs } from 'vue';
+import { TagTreeNode } from './tag';
+import TagInfo from './TagInfo.vue';
+
+const props = defineProps({
+    height: {
+        type: [Number, String],
+        default: 0
+    },
+    load: {
+        type: Function,
+        required: true,
+    }
+})
+
+const treeProps = {
+    label: 'name',
+    children: 'zones',
+    isLeaf: 'isLeaf',
+}
+
+const emit = defineEmits(['nodeClick'])
+const treeRef: any = ref(null)
+
+const state = reactive({
+    height: 600 as any,
+    filterText: '',
+    opend: {},
+})
+const { filterText } = toRefs(state)
+
+onMounted(async () => {
+    if (!props.height) {
+        state.height = window.innerHeight - 145 + 'px';
+    } else {
+        state.height = props.height;
+    }
+})
+
+watch(filterText, (val) => {
+    treeRef.value?.filter(val)
+})
+
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.label.includes(value)
+}
+
+/**
+* 加载树节点
+* @param { Object } node
+* @param { Object } resolve
+*/
+const loadNode = async (node: any, resolve: any) => {
+    if (typeof resolve !== 'function') {
+        return;
+    }
+    return resolve(await props.load(node));
+};
+
+const treeNodeClick = (data: any) => {
+    emit('nodeClick', data);
+}
+
+const reloadNode = (nodeKey: any) => {
+    let node = getNode(nodeKey);
+    node.loaded = false;
+    node.expand();
+}
+
+const getNode = (nodeKey: any) => {
+    let node = treeRef.value.getNode(nodeKey);
+    if (!node) {
+        throw new Error('未找到节点: ' + nodeKey);
+    }
+    return node;
+}
+
+defineExpose({
+    reloadNode,
+})
+</script>
+
+<style lang="scss">
+.instances-box {
+    overflow: 'auto';
+
+    .el-tree {
+        display: inline-block;
+        min-width: 100%;
+    }
+}
+</style>

mayfly_go_web/src/views/ops/component/tag.ts

@@ -0,0 +1,38 @@
+export class TagTreeNode {
+    /**
+     * 节点id
+     */
+    key: any
+
+    /**
+     * 节点名称
+     */
+    label: string
+
+    /**
+     * 树节点类型
+     */
+    type: any
+
+    isLeaf: boolean = false;
+
+    params: any;
+
+    static TagPath = -1;
+
+    constructor(key: any, label: string, type?: any) {
+        this.key = key;
+        this.label = label;
+        this.type = type || TagTreeNode.TagPath;
+    }
+
+    withIsLeaf(isLeaf: boolean) {
+        this.isLeaf = isLeaf;
+        return this;
+    }
+
+    withParams(params: any) {
+        this.params = params;
+        return this;
+    }
+}

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-dialog title="创建表" v-model="dialogVisible" :before-close="cancel" width="90%">
+        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="90%">
             <el-form label-position="left" ref="formRef" :model="tableData" label-width="80px">
                 <el-row>
                     <el-col :span="12">
@@ -13,10 +13,21 @@
                             <el-input style="width: 80%" v-model="tableData.tableComment" size="small"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col style="margin-top: 20px" :span="12">
-                        <el-form-item prop="characterSet" label="字符集">
+                    <el-col :span="12">
+                        <el-form-item prop="characterSet" label="charset">
                             <el-select filterable style="width: 80%" v-model="tableData.characterSet" size="small">
-                                <el-option v-for="item in characterSetNameList" :key="item" :label="item" :value="item"> </el-option>
+                                <el-option v-for="item in characterSetNameList" :key="item" :label="item" :value="item">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item prop="characterSet" label="collation">
+                            <el-select filterable style="width: 80%" v-model="tableData.collation" size="small">
+                                <el-option v-for="item in collationNameList" :key="item"
+                                    :label="tableData.characterSet + '_' + item"
+                                    :value="tableData.characterSet + '_' + item">
+                                </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
@@ -24,35 +35,88 @@
 
                 <el-tabs v-model="activeName">
                     <el-tab-pane label="字段" name="1">
-                        <el-table :data="tableData.fields.res">
-                            <el-table-column :prop="item.prop" :label="item.label" v-for="item in tableData.fields.colNames" :key="item.prop">
+                        <el-table :data="tableData.fields.res" :max-height="tableData.height">
+                            <el-table-column :prop="item.prop" :label="item.label"
+                                v-for="item in tableData.fields.colNames" :key="item.prop">
                                 <template #default="scope">
-                                    <el-input v-if="item.prop === 'name'" size="small" v-model="scope.row.name"></el-input>
+                                    <el-input v-if="item.prop === 'name'" size="small" v-model="scope.row.name">
+                                    </el-input>
 
-                                    <el-select v-if="item.prop === 'type'" filterable size="small" v-model="scope.row.type">
-                                        <el-option v-for="typeValue in typeList" :key="typeValue" :value="typeValue">{{ typeValue }}</el-option>
+                                    <el-select v-if="item.prop === 'type'" filterable size="small"
+                                        v-model="scope.row.type">
+                                        <el-option v-for="typeValue in columnTypeList" :key="typeValue"
+                                            :value="typeValue">{{ typeValue }}</el-option>
                                     </el-select>
 
-                                    <el-input v-if="item.prop === 'value'" size="small" v-model="scope.row.value"> </el-input>
+                                    <el-input v-if="item.prop === 'value'" size="small" v-model="scope.row.value">
+                                    </el-input>
 
-                                    <el-input v-if="item.prop === 'length'" size="small" v-model="scope.row.length"> </el-input>
+                                    <el-input v-if="item.prop === 'length'" size="small" v-model="scope.row.length">
+                                    </el-input>
 
-                                    <el-checkbox v-if="item.prop === 'notNull'" size="small" v-model="scope.row.notNull"> </el-checkbox>
+                                    <el-checkbox v-if="item.prop === 'notNull'" size="small"
+                                        v-model="scope.row.notNull"> </el-checkbox>
 
-                                    <el-checkbox v-if="item.prop === 'pri'" size="small" v-model="scope.row.pri"> </el-checkbox>
+                                    <el-checkbox v-if="item.prop === 'pri'" size="small" v-model="scope.row.pri">
+                                    </el-checkbox>
 
-                                     <el-checkbox v-if="item.prop === 'auto_increment'" size="small" v-model="scope.row.auto_increment"> </el-checkbox>
+                                    <el-checkbox v-if="item.prop === 'auto_increment'" size="small"
+                                        v-model="scope.row.auto_increment"> </el-checkbox>
 
-                                     <el-input v-if="item.prop === 'remark'" size="small" v-model="scope.row.remark"> </el-input>
+                                    <el-input v-if="item.prop === 'remark'" size="small" v-model="scope.row.remark">
+                                    </el-input>
 
-                                     <el-button v-if="item.prop === 'action'" type="text" size="small" @click.prevent="deleteRow(scope.$index)">删除</el-button>
+                                    <el-link v-if="item.prop === 'action'" type="danger" plain size="small"
+                                        :underline="false" @click.prevent="deleteRow(scope.$index)">删除</el-link>
                                 </template>
                             </el-table-column>
                         </el-table>
                         <el-row style="margin-top: 20px">
-                            <el-button @click="addRow()" type="text" icon="plus"></el-button>
+                            <el-button @click="addDefaultRows()" link type="warning" icon="plus">添加默认列</el-button>
+                            <el-button @click="addRow()" link type="primary" icon="plus">添加列</el-button>
                         </el-row>
                     </el-tab-pane>
+                    <el-tab-pane label="索引" name="2">
+                        <el-table :data="tableData.indexs.res" :max-height="tableData.height">
+                            <el-table-column :prop="item.prop" :label="item.label"
+                                v-for="item in tableData.indexs.colNames" :key="item.prop">
+                                <template #default="scope">
+
+                                    <el-input v-if="item.prop === 'indexName'" size="small"
+                                        v-model="scope.row.indexName"></el-input>
+
+                                    <el-select v-if="item.prop === 'columnNames'" v-model="scope.row.columnNames"
+                                        multiple collapse-tags collapse-tags-tooltip filterable placeholder="请选择字段"
+                                        style="width: 100%">
+                                        <el-option v-for="cl in tableData.indexs.columns" :key="cl.name"
+                                            :label="cl.name" :value="cl.name">
+                                            {{ cl.name + ' - ' + (cl.remark || '') }}
+                                        </el-option>
+                                    </el-select>
+
+                                    <el-checkbox v-if="item.prop === 'unique'" size="small" v-model="scope.row.unique">
+                                    </el-checkbox>
+
+                                    <el-select v-if="item.prop === 'indexType'" filterable size="small"
+                                        v-model="scope.row.indexType">
+                                        <el-option v-for="typeValue in indexTypeList" :key="typeValue"
+                                            :value="typeValue">{{ typeValue }}</el-option>
+                                    </el-select>
+
+                                    <el-input v-if="item.prop === 'indexComment'" size="small"
+                                        v-model="scope.row.indexComment"> </el-input>
+
+                                    <el-link v-if="item.prop === 'action'" type="danger" plain size="small"
+                                        :underline="false" @click.prevent="deleteIndex(scope.$index)">删除</el-link>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+
+                        <el-row style="margin-top: 20px">
+                            <el-button @click="addIndex()" link type="primary" icon="plus">添加索引</el-button>
+                        </el-row>
+                    </el-tab-pane>
+
                 </el-tabs>
             </el-form>
             <template #footer>
@@ -63,159 +127,84 @@
 </template>
 
 
-<script lang="ts">
-import { watch, toRefs, reactive, defineComponent, ref, getCurrentInstance } from 'vue';
-import { TYPE_LIST, CHARACTER_SET_NAME_LIST } from './service.ts';
+<script lang="ts" setup>
+import { watch, toRefs, reactive, ref } from 'vue';
+import { TYPE_LIST, CHARACTER_SET_NAME_LIST, COLLATION_SUFFIX_LIST } from './service.ts';
 import { ElMessage } from 'element-plus';
 import SqlExecBox from './component/SqlExecBox.ts';
-export default defineComponent({
-    name: 'createTable',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        data: {
-            type: Object,
-        },
-        dbId: {
-            type: Number,
-        },
-        db: {
-            type: String,
-        }
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const formRef: any = ref();
-        const { proxy } = getCurrentInstance() as any;
-        const state = reactive({
-            dialogVisible: false,
-            btnloading: false,
-            activeName: '1',
-            typeList: TYPE_LIST,
-            characterSetNameList: CHARACTER_SET_NAME_LIST,
-            tableData: {
-                fields: {
-                    colNames: [
-                        {
-                            prop: 'name',
-                            label: '字段名称',
-                        },
-                        {
-                            prop: 'type',
-                            label: '字段类型',
-                        },
-                        {
-                            prop: 'length',
-                            label: '长度',
-                        },
-                        {
-                            prop: 'value',
-                            label: '默认值',
-                        },
+    title: {
+        type: String,
+    },
+    data: {
+        type: Object,
+    },
+    dbId: {
+        type: Number,
+    },
+    db: {
+        type: String,
+    }
+})
 
-                        {
-                            prop: 'notNull',
-                            label: '非空',
-                        },
-                        {
-                            prop: 'pri',
-                            label: '主键',
-                        },
-                        {
-                            prop: 'auto_increment',
-                            label: '自增',
-                        },
-                        {
-                            prop: 'remark',
-                            label: '备注',
-                        },
-                        {
-                            prop: 'action',
-                            label: '操作',
-                        },
-                    ],
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change', 'submit-sql'])
 
-                    res: [
-                        {
-                            name: '',
-                            type: '',
-                            value: '',
-                            length: '',
-                            notNull: false,
-                            pri: false,
-                            auto_increment: false,
-                            remark: '',
-                        },
-                    ],
+const formRef: any = ref();
+const state = reactive({
+    dialogVisible: false,
+    btnloading: false,
+    activeName: '1',
+    columnTypeList: TYPE_LIST,
+    indexTypeList: ['BTREE'], // mysql索引类型详解 http://c.biancheng.net/view/7897.html
+    characterSetNameList: CHARACTER_SET_NAME_LIST,
+    collationNameList: COLLATION_SUFFIX_LIST,
+    tableData: {
+        fields: {
+            colNames: [
+                {
+                    prop: 'name',
+                    label: '字段名称',
                 },
-                characterSet: 'utf8mb4',
-                tableName: '',
-                tableComment: '',
-            },
-        });
-
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-        });
-        const cancel = () => {
-            emit('update:visible', false);
-            reset();
-        };
-        const addRow = () => {
-            state.tableData.fields.res.push({
-                name: '',
-                type: '',
-                value: '',
-                length: '',
-                notNull: false,
-                pri: false,
-                auto_increment: false,
-                remark: '',
-            });
-        };
-        const deleteRow = (index: any) => {
-            state.tableData.fields.res.splice(index, 1);
-        };
-        const submit = async () => {
-            let data = state.tableData;
-            let primary_key = '';
-            let fields: string[] = [];
-            data.fields.res.forEach((item) => {
-                fields.push(
-                    `${item.name} ${item.type}${+item.length > 0 ? `(${item.length})` : ''} ${item.notNull ? 'NOT NULL' : ''} ${
-                        item.auto_increment ? 'AUTO_INCREMENT' : ''
-                    } ${item.value ? 'DEFAULT ' + item.value : item.notNull ? '' : 'DEFAULT NULL'} ${
-                        item.remark ? `COMMENT '${item.remark}'` : ''
-                    } \n`
-                );
-                if (item.pri) {
-                    primary_key += `${item.name},`;
-                }
-            });
-
-            let sql = `
-                CREATE TABLE ${data.tableName} (
-                ${fields.join(',')}
-                ${primary_key ? `, PRIMARY KEY (${primary_key.slice(0, -1)})` : ''}
-                ) ENGINE=InnoDB DEFAULT CHARSET=${data.characterSet} COLLATE=utf8mb4_bin COMMENT='${data.tableComment}';`;
-
-            SqlExecBox({
-                sql: sql,
-                dbId: props.dbId as any,
-                db: props.db,
-                runSuccessCallback: () => {
-                    ElMessage.success('创建成功');
-                    proxy.$parent.tableInfo({ id: props.dbId });
-                    cancel();
+                {
+                    prop: 'type',
+                    label: '字段类型',
                 },
-            });
-        };
-        const reset = () => {
-            formRef.value.resetFields();
-            state.tableData.fields.res = [
+                {
+                    prop: 'length',
+                    label: '长度',
+                },
+                {
+                    prop: 'value',
+                    label: '默认值',
+                },
+
+                {
+                    prop: 'notNull',
+                    label: '非空',
+                },
+                {
+                    prop: 'pri',
+                    label: '主键',
+                },
+                {
+                    prop: 'auto_increment',
+                    label: '自增',
+                },
+                {
+                    prop: 'remark',
+                    label: '备注',
+                },
+                {
+                    prop: 'action',
+                    label: '操作',
+                },
+            ],
+            res: [
                 {
                     name: '',
                     type: '',
@@ -226,18 +215,385 @@ export default defineComponent({
                     auto_increment: false,
                     remark: '',
                 },
-            ];
-        };
-        return {
-            ...toRefs(state),
-            formRef,
-            cancel,
-            reset,
-            addRow,
-            deleteRow,
-            submit,
-        };
+            ],
+        },
+        indexs: {
+            colNames: [
+                {
+                    prop: 'indexName',
+                    label: '索引名',
+                },
+                {
+                    prop: 'columnNames',
+                    label: '列名',
+                },
+                {
+                    prop: 'unique',
+                    label: '唯一',
+                },
+                {
+                    prop: 'indexType',
+                    label: '类型',
+                },
+                {
+                    prop: 'indexComment',
+                    label: '备注',
+                },
+                {
+                    prop: 'action',
+                    label: '操作',
+                },
+            ],
+            columns: [{ name: '', remark: '' }],
+            res: [
+                {
+                    indexName: '',
+                    columnNames: [],
+                    unique: false,
+                    indexType: 'BTREE',
+                    indexComment: '',
+                },
+            ],
+        },
+        characterSet: 'utf8mb4',
+        collation: 'utf8mb4_general_ci',
+        tableName: '',
+        tableComment: '',
+        height: 550
     },
 });
+
+const {
+    dialogVisible,
+    btnloading,
+    activeName,
+    columnTypeList,
+    indexTypeList,
+    characterSetNameList,
+    collationNameList,
+    tableData,
+} = toRefs(state)
+
+watch(props, async (newValue) => {
+    state.dialogVisible = newValue.visible;
+});
+
+const cancel = () => {
+    emit('update:visible', false);
+    reset();
+};
+
+const addRow = () => {
+    state.tableData.fields.res.push({
+        name: '',
+        type: '',
+        value: '',
+        length: '',
+        notNull: false,
+        pri: false,
+        auto_increment: false,
+        remark: '',
+    });
+};
+
+const addIndex = () => {
+    state.tableData.indexs.res.push({
+        indexName: '',
+        columnNames: [],
+        unique: false,
+        indexType: 'BTREE',
+        indexComment: '',
+    });
+};
+
+const addDefaultRows = () => {
+    state.tableData.fields.res.push(
+        { name: 'id', type: 'bigint', length: '20', value: '', notNull: true, pri: true, auto_increment: true, remark: '主键ID' },
+        { name: 'creator_id', type: 'bigint', length: '20', value: '', notNull: true, pri: false, auto_increment: false, remark: '创建人id' },
+        { name: 'creator', type: 'varchar', length: '100', value: '', notNull: true, pri: false, auto_increment: false, remark: '创建人姓名' },
+        { name: 'creat_time', type: 'datetime', length: '', value: '', notNull: true, pri: false, auto_increment: false, remark: '创建时间' },
+        { name: 'updater_id', type: 'bigint', length: '20', value: '', notNull: true, pri: false, auto_increment: false, remark: '修改人id' },
+        { name: 'updater', type: 'varchar', length: '100', value: '', notNull: true, pri: false, auto_increment: false, remark: '修改人姓名' },
+        { name: 'update_time', type: 'datetime', length: '', value: '', notNull: true, pri: false, auto_increment: false, remark: '修改时间' },
+    );
+};
+
+const deleteRow = (index: any) => {
+    state.tableData.fields.res.splice(index, 1);
+};
+
+const deleteIndex = (index: any) => {
+    state.tableData.indexs.res.splice(index, 1);
+};
+
+const submit = async () => {
+    let sql = genSql();
+    if (!sql) {
+        ElMessage.warning('没有更改');
+        return;
+    }
+    SqlExecBox({
+        sql: sql,
+        dbId: props.dbId as any,
+        db: props.db,
+        runSuccessCallback: () => {
+            emit('submit-sql', {tableName: state.tableData.tableName });
+            // cancel();
+        },
+    });
+};
+
+/**
+ * 对比两个数组，取出被修改过的对象数组
+ * @param oldArr 原对象数组
+ * @param nowArr 修改后的对象数组
+ * @param key 标志对象唯一属性
+ */
+const filterChangedData = (oldArr: object[], nowArr: object[], key: string): { del: any[], add: any[], upd: any[] } => {
+    let data = {
+        del: [] as object[], // 删除的数据
+        add: [] as object[], // 新增的数据
+        upd: [] as object[] // 修改的数据
+    }
+
+    // 旧数据为空
+    if (oldArr && Array.isArray(oldArr) && oldArr.length === 0
+        && nowArr && Array.isArray(nowArr) && nowArr.length > 0) {
+        data.add = nowArr;
+        return data;
+    }
+
+    // 新数据为空
+    if (nowArr && Array.isArray(nowArr) && nowArr.length === 0
+        && oldArr && Array.isArray(oldArr) && oldArr.length > 0) {
+        data.del = oldArr;
+        return data;
+    }
+
+    let oldMap = {}, newMap = {};
+    oldArr.forEach(a => oldMap[a[key]] = a)
+
+    nowArr.forEach(a => {
+        let k = a[key]
+        newMap[k] = a;
+        if (!oldMap.hasOwnProperty(k)) {// 新增
+            data.add.push(a)
+        }
+    })
+
+    oldArr.forEach(a => {
+        let k = a[key];
+        let newData = newMap[k];
+        if (!newData) { // 删除
+            data.del.push(a)
+        } else { // 判断每个字段是否相等，否则为修改
+            for (let f in a) {
+                let oldV = a[f]
+                let newV = newData[f]
+                if (oldV.toString() !== newV.toString()) {
+                    data.upd.push(newData)
+                    break;
+                }
+            }
+        }
+    })
+    return data;
+}
+
+const genSql = () => {
+
+    const genColumnBasicSql = (cl: any) => {
+        let val = cl.value ? (cl.value === 'CURRENT_TIMESTAMP' ? cl.value : '\'' + cl.value + '\'') : '';
+        let defVal = `${val ? ('DEFAULT ' + val) : ''}`;
+        let length = cl.length ? `(${cl.length})` : '';
+        return ` ${cl.name} ${cl.type}${length} ${cl.notNull ? 'NOT NULL' : 'NULL'} ${cl.auto_increment ? 'AUTO_INCREMENT' : ''} ${defVal} comment '${cl.remark || ''}' `
+    }
+
+    let data = state.tableData;
+    // 创建表
+    if (!props.data?.edit) {
+        if (state.activeName === '1') {// 创建表结构
+            let primary_key = '';
+            let fields: string[] = [];
+            data.fields.res.forEach((item) => {
+                fields.push(genColumnBasicSql(item));
+                if (item.pri) {
+                    primary_key += `${item.name},`;
+                }
+            });
+
+            return `CREATE TABLE ${data.tableName}
+                  ( ${fields.join(',')}
+                      ${primary_key ? `, PRIMARY KEY (${primary_key.slice(0, -1)})` : ''}
+                  ) ENGINE=InnoDB DEFAULT CHARSET=${data.characterSet} COLLATE =${data.collation} COMMENT='${data.tableComment}';`;
+
+        } else if (state.activeName === '2' && data.indexs.res.length > 0) { // 创建索引
+            let sql = `ALTER TABLE ${data.tableName}`;
+            state.tableData.indexs.res.forEach(a => {
+                sql += ` ADD ${a.unique ? 'UNIQUE' : ''} INDEX ${a.indexName}(${a.columnNames.join(',')}) USING ${a.indexType} COMMENT '${a.indexComment}',`;
+            })
+            return sql.substring(0, sql.length - 1) + ';'
+        }
+    } else { // 修改
+        let addSql = '', updSql = '', delSql = '';
+        if (state.activeName === '1') {// 修改列
+            let changeData = filterChangedData(oldData.fields, state.tableData.fields.res, 'name')
+            if (changeData.add.length > 0) {
+                addSql = `ALTER TABLE ${data.tableName}`
+                changeData.add.forEach(a => {
+                    addSql += ` ADD ${genColumnBasicSql(a)},`
+                })
+                addSql = addSql.substring(0, addSql.length - 1)
+                addSql += ';'
+            }
+
+            if (changeData.upd.length > 0) {
+                updSql = `ALTER TABLE ${data.tableName}`;
+                changeData.upd.forEach(a => {
+                    updSql += ` MODIFY ${genColumnBasicSql(a)},`
+                })
+                updSql = updSql.substring(0, updSql.length - 1)
+                updSql += ';'
+            }
+
+            if (changeData.del.length > 0) {
+                changeData.del.forEach(a => {
+                    delSql += ` ALTER TABLE ${data.tableName} DROP COLUMN ${a.name}; `
+                })
+            }
+            return addSql + updSql + delSql;
+
+        } else if (state.activeName === '2') { // 修改索引
+            let changeData = filterChangedData(oldData.indexs, state.tableData.indexs.res, 'indexName')
+            // 搜集修改和删除的索引，添加到drop index xx
+            // 收集新增和修改的索引，添加到ADD xx
+            // ALTER TABLE `test1` 
+            // DROP INDEX `test1_name_uindex`,
+            // DROP INDEX `test1_column_name4_index`,
+            // ADD UNIQUE INDEX `test1_name_uindex`(`id`) USING BTREE COMMENT 'ASDASD',
+            // ADD INDEX `111`(`column_name4`) USING BTREE COMMENT 'zasf';
+
+            let dropIndexNames: string[] = [];
+            let addIndexs: any[] = [];
+
+            if (changeData.upd.length > 0) {
+                changeData.upd.forEach(a => {
+                    dropIndexNames.push(a.indexName)
+                    addIndexs.push(a)
+                })
+            }
+
+            if (changeData.del.length > 0) {
+                changeData.del.forEach(a => {
+                    dropIndexNames.push(a.indexName)
+                })
+            }
+
+            if (changeData.add.length > 0) {
+                changeData.add.forEach(a => {
+                    addIndexs.push(a)
+                })
+            }
+
+            if (dropIndexNames.length > 0 || addIndexs.length > 0) {
+                let sql = `ALTER TABLE ${data.tableName} `;
+                if (dropIndexNames.length > 0) {
+                    dropIndexNames.forEach(a => {
+                        sql += `DROP INDEX ${a},`
+                    })
+                    sql = sql.substring(0, sql.length - 1)
+                }
+
+                if (addIndexs.length > 0) {
+                    if (dropIndexNames.length > 0){
+                        sql += ','
+                    }
+                    addIndexs.forEach(a => {
+                        sql += ` ADD ${a.unique ? 'UNIQUE' : ''} INDEX ${a.indexName}(${a.columnNames.join(',')}) USING ${a.indexType} COMMENT '${a.indexComment}',`;
+                    })
+                    sql = sql.substring(0, sql.length - 1)
+                }
+                return sql;
+            }
+        }
+    }
+};
+
+const reset = () => {
+    state.activeName = '1'
+    formRef.value.resetFields()
+    state.tableData.tableName = ''
+    state.tableData.tableComment = ''
+    state.tableData.fields.res = [
+        {
+            name: '',
+            type: '',
+            value: '',
+            length: '',
+            notNull: false,
+            pri: false,
+            auto_increment: false,
+            remark: '',
+        },
+    ];
+    state.tableData.indexs.res = [{
+        indexName: '',
+        columnNames: [],
+        unique: false,
+        indexType: 'BTREE',
+        indexComment: '',
+    },]
+};
+
+const oldData = { indexs: [] as any[], fields: [] as any[] }
+watch(() => props.data, (newValue: any) => {
+    const { row, indexs, columns } = newValue;
+    // 回显表名表注释
+    state.tableData.tableName = row.tableName
+    state.tableData.tableComment = row.tableComment
+    // 回显列
+    if (columns && Array.isArray(columns) && columns.length > 0) {
+        oldData.fields = [];
+        state.tableData.fields.res = [];
+        // 索引列下拉选
+        state.tableData.indexs.columns = [];
+        columns.forEach(a => {
+            let typeObj = a.columnType.replace(')', '').split('(')
+            let type = typeObj[0];
+            let length = typeObj.length > 1 && typeObj[1] || '';
+            let data = {
+                name: a.columnName,
+                type,
+                value: a.columnDefault || '',
+                length,
+                notNull: a.nullable !== 'YES',
+                pri: a.columnKey === 'PRI',
+                auto_increment: a.extra?.indexOf('auto_increment') > -1,
+                remark: a.columnComment,
+            };
+            state.tableData.fields.res.push(data)
+            oldData.fields.push(JSON.parse(JSON.stringify(data)))
+            // 索引字段下拉选项
+            state.tableData.indexs.columns.push({ name: a.columnName, remark: a.columnComment })
+        })
+    }
+    // 回显索引
+    if (indexs && Array.isArray(indexs) && indexs.length > 0) {
+        oldData.indexs = [];
+        state.tableData.indexs.res = [];
+        // 索引过滤掉主键
+        indexs.filter(a => a.indexName !== "PRIMARY").forEach(a => {
+            let data = {
+                indexName: a.indexName,
+                columnNames: a.columnName?.split(','),
+                unique: a.nonUnique === 0 || false,
+                indexType: a.indexType,
+                indexComment: a.indexComment,
+            }
+            state.tableData.indexs.res.push(data)
+            oldData.indexs.push(JSON.parse(JSON.stringify(data)))
+        })
+    }
+})
 </script>
 

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

@@ -1,98 +1,87 @@
 <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" :before-close="cancel" :close-on-click-modal="false"
+            :destroy-on-close="true" width="38%">
             <el-form :model="form" ref="dbForm" :rules="rules" label-width="95px">
-                <el-form-item prop="projectId" label="项目:" required>
-                    <el-select style="width: 100%" v-model="form.projectId" placeholder="请选择项目" @change="changeProject" filterable>
-                        <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
+                <el-tabs v-model="tabActiveName">
+                    <el-tab-pane label="基础信息" name="basic">
+                        <el-form-item prop="tagId" label="标签:" required>
+                            <tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
+                        </el-form-item>
 
-                <el-form-item prop="envId" label="环境:" required>
-                    <el-select @change="changeEnv" style="width: 100%" v-model="form.envId" placeholder="请选择环境">
-                        <el-option v-for="item in envs" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
-                <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" 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 @click="getDbPwd" :underline="false" type="primary" class="mr5">原密码</el-link>
+                        <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 @click="getDbPwd" :underline="false" type="primary" class="mr5">原密码
+                                            </el-link>
+                                        </template>
+                                    </el-popover>
                                 </template>
-                            </el-popover>
-                        </template>
-                    </el-input>
-                </el-form-item>
-                <el-form-item prop="params" label="连接参数:">
-                    <el-input v-model="form.params" placeholder="其他连接参数，形如: key1=value1&key2=value2"></el-input>
-                </el-form-item>
-                <el-form-item prop="database" label="数据库名:" required>
-                    <el-col :span="19">
-                        <el-select
-                            @change="changeDatabase"
-                            v-model="databaseList"
-                            multiple
-                            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-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="enableSshTunnel" label="SSH隧道:">
-                    <el-col :span="3">
-                        <el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
-                    </el-col>
-                    <el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
-                    <el-col :span="19" v-if="form.enableSshTunnel == 1">
-                        <el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
-                            <el-option
-                                v-for="item in sshTunnelMachineList"
-                                :key="item.id"
-                                :label="`${item.ip}:${item.port} [${item.name}]`"
-                                :value="item.id"
-                            >
-                            </el-option>
-                        </el-select>
-                    </el-col>
-                </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>
@@ -105,232 +94,185 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
 import { dbApi } from './api';
-import { projectApi } from '../project/api.ts';
-import { machineApi } from '../machine/api.ts';
 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';
 
-export default defineComponent({
-    name: 'DbEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        projects: {
-            type: Array,
-        },
-        db: {
-            type: [Boolean, Object],
-        },
-        title: {
-            type: String,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const dbForm: any = ref(null);
+    db: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+})
 
-        const state = reactive({
-            dialogVisible: false,
-            projects: [],
-            envs: [],
-            allDatabases: [] as any,
-            databaseList: [] as any,
-            sshTunnelMachineList: [],
-            form: {
-                id: null,
-                name: null,
-                port: 3306,
-                username: null,
-                password: null,
-                params: null,
-                database: '',
-                project: null,
-                projectId: null,
-                envId: null,
-                env: null,
-                enableSshTunnel: null,
-                sshTunnelMachineId: null,
-            },
-            // 原密码
-            pwd: '',
-            btnLoading: false,
-            rules: {
-                projectId: [
-                    {
-                        required: true,
-                        message: '请选择项目',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                envId: [
-                    {
-                        required: true,
-                        message: '请选择环境',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                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'],
-                    },
-                ],
-                database: [
-                    {
-                        required: true,
-                        message: '请添加数据库',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-            },
-        });
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
 
-        watch(props, (newValue) => {
-            state.dialogVisible = newValue.visible;
-            if (!state.dialogVisible) {
-                return;
-            }
-            state.projects = newValue.projects;
-            if (newValue.db) {
-                getEnvs(newValue.db.projectId);
-                state.form = { ...newValue.db };
-                // 将数据库名使用空格切割，获取所有数据库列表
-                state.databaseList = newValue.db.database.split(' ');
-            } else {
-                state.envs = [];
-                state.form = { port: 3306, enableSshTunnel: -1 } as any;
-                state.databaseList = [];
-            }
-            getSshTunnelMachines();
-        });
+const rules = {
+    tagId: [
+        {
+            required: true,
+            message: '请选择标签',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    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'],
+        },
+    ],
+    database: [
+        {
+            required: true,
+            message: '请添加数据库',
+            trigger: ['change', 'blur'],
+        },
+    ],
+}
 
-        /**
-         * 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加数据库
-         */
-        const changeDatabase = () => {
-            state.form.database = state.databaseList.length == 0 ? '' : state.databaseList.join(' ');
-        };
+const dbForm: any = ref(null);
 
-        const getSshTunnelMachines = async () => {
-            if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
-                const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
-                state.sshTunnelMachineList = res.list;
-            }
-        };
+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,
+    },
+    // 原密码
+    pwd: '',
+    btnLoading: false,
+});
 
-        const getEnvs = async (projectId: any) => {
-            state.envs = await projectApi.projectEnvs.request({ projectId });
-        };
+const {
+    dialogVisible,
+    tabActiveName,
+    allDatabases,
+    databaseList,
+    form,
+    pwd,
+    btnLoading,
+} = toRefs(state)
 
-        const changeProject = (projectId: number) => {
-            for (let p of state.projects as any) {
-                if (p.id == projectId) {
-                    state.form.project = p.name;
-                }
-            }
-            state.form.envId = null;
-            state.form.env = null;
-            state.envs = [];
-            getEnvs(projectId);
-        };
+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.databaseList = [];
+    }
+});
 
-        const changeEnv = (envId: number) => {
-            for (let p of state.envs as any) {
-                if (p.id == envId) {
-                    state.form.env = p.name;
-                }
-            }
-        };
+/**
+ * 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加数据库
+ */
+const changeDatabase = () => {
+    state.form.database = state.databaseList.length == 0 ? '' : state.databaseList.join(' ');
+};
 
-        const getAllDatabase = async () => {
+const getAllDatabase = async () => {
+    const reqForm = { ...state.form };
+    reqForm.password = await RsaEncrypt(reqForm.password);
+    state.allDatabases = await dbApi.getAllDatabase.request(reqForm);
+    ElMessage.success('获取成功, 请选择需要管理操作的数据库');
+};
+
+const getDbPwd = async () => {
+    state.pwd = await dbApi.getDbPwd.request({ id: state.form.id });
+};
+
+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);
-            state.allDatabases = await dbApi.getAllDatabase.request(reqForm);
-            ElMessage.success('获取成功, 请选择需要管理操作的数据库')
-        };
-
-        const getDbPwd = async () => {
-            state.pwd = await dbApi.getDbPwd.request({ id: state.form.id });
-        };
-
-        const btnOk = async () => {
-            if (!state.form.id) {
-                notBlank(state.form.password, '新增操作，密码不可为空');
+            if (!state.form.sshTunnelMachineId) {
+                reqForm.sshTunnelMachineId = -1;
             }
-            dbForm.value.validate(async (valid: boolean) => {
-                if (valid) {
-                    const reqForm = { ...state.form };
-                    reqForm.password = await RsaEncrypt(reqForm.password);
-                    dbApi.saveDb.request(reqForm).then(() => {
-                        ElMessage.success('保存成功');
-                        emit('val-change', state.form);
-                        state.btnLoading = true;
-                        setTimeout(() => {
-                            state.btnLoading = false;
-                        }, 1000);
+            dbApi.saveDb.request(reqForm).then(() => {
+                ElMessage.success('保存成功');
+                emit('val-change', state.form);
+                state.btnLoading = true;
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
 
-                        cancel();
-                    });
-                } else {
-                    ElMessage.error('请正确填写信息');
-                    return false;
-                }
+                cancel();
             });
-        };
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+};
 
-        const resetInputDb = () => {
-            state.databaseList = [];
-            state.allDatabases = [];
-        };
+const resetInputDb = () => {
+    state.databaseList = [];
+    state.allDatabases = [];
+};
 
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-            setTimeout(() => {
-                resetInputDb();
-            }, 500);
-        };
-
-        return {
-            ...toRefs(state),
-            dbForm,
-            getAllDatabase,
-            getDbPwd,
-            changeDatabase,
-            getSshTunnelMachines,
-            changeProject,
-            changeEnv,
-            btnOk,
-            cancel,
-        };
-    },
-});
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+    setTimeout(() => {
+        resetInputDb();
+    }, 500);
+};
 </script>
-<style lang="scss">
-</style>
+<style lang="scss"></style>

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

@@ -2,68 +2,70 @@
     <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-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">
-import { watch, toRefs, reactive, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { watch, toRefs, reactive } from 'vue';
 
-export default defineComponent({
-    name: 'tableEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        data: {
-            type: Object,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const state = reactive({
-            dialogVisible: false,
-            data: {
-                res: [],
-                colNames: [],
-            },
-        });
+    title: {
+        type: String,
+    },
+    data: {
+        type: Object,
+    },
+})
 
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-            state.data.res = newValue.data.res;
-            state.data.colNames = newValue.data.colNames;
-        });
-        const cellClick = (row: any, column: any, cell: any, event: any) => {
-            console.log(cell.children[0].tagName);
-            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);
-        };
-        return {
-            ...toRefs(state),
-            cancel,
-            cellClick,
-        };
+//定义事件
+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/component/DbTable.vue

@@ -0,0 +1,323 @@
+<template>
+    <div>
+        <el-table @cell-dblclick="(row: any, column: any, cell: any, event: any) => cellClick(row, column, cell)"
+            @sort-change="(sort: any) => onTableSortChange(sort)" @selection-change="onDataSelectionChange"
+            :data="datas" size="small" :max-height="tableHeight" v-loading="loading" element-loading-text="查询中..."
+            :empty-text="emptyText" stripe border class="mt5">
+            <el-table-column v-if="datas.length > 0 && table" type="selection" width="35" />
+            <el-table-column min-width="100" :width="DbInst.flexColumnWidth(item, datas)" align="center"
+                v-for="item in columnNames" :key="item" :prop="item" :label="item" show-overflow-tooltip
+                :sortable="sortable">
+                <template #header v-if="showColumnTip">
+                    <el-tooltip raw-content placement="top" effect="customized">
+                        <template #content> {{ getColumnTip(item) }} </template>
+                        {{ item }}
+                    </el-tooltip>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch, reactive, toRefs } from 'vue';
+import { DbInst, UpdateFieldsMeta, FieldsMeta } from '../db';
+
+const emits = defineEmits(['sortChange', 'deleteData', 'selectionChange', 'changeUpdatedField'])
+
+const props = defineProps({
+    dbId: {
+        type: Number,
+        required: true,
+    },
+    dbType: {
+        type: String,
+        default: ''
+    },
+    db: {
+        type: String,
+        required: true,
+    },
+    table: {
+        type: String,
+        default: '',
+    },
+    data: {
+        type: Array,
+    },
+    columnNames: {
+        type: Array,
+    },
+    sortable: {
+        type: [String, Boolean],
+        default: false,
+    },
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    emptyText: {
+        type: String,
+        default: '暂无数据',
+    },
+    showColumnTip: {
+        type: Boolean,
+        default: false,
+    },
+    height: {
+        type: String,
+        default: '600'
+    }
+})
+
+const state = reactive({
+    dbId: 0, // 当前选中操作的数据库实例
+    dbType: '',
+    db: '',  // 数据库名
+    table: '', // 当前的表名
+    datas: [],
+    columnNames: [],
+    columns: [],
+    sortable: false,
+    loading: false,
+    selectionDatas: [] as any,
+    showColumnTip: false,
+    tableHeight: '600',
+    emptyText: '',
+    updatedFields: [] as UpdateFieldsMeta[],// 各个tab表被修改的字段信息
+});
+
+const {
+    tableHeight,
+    datas,
+    sortable,
+    loading,
+    columnNames,
+    showColumnTip,
+} = toRefs(state);
+
+watch(props, (newValue: any) => {
+    setState(newValue);
+});
+
+onMounted(async () => {
+    console.log('in DbTable mounted');
+    setState(props);
+})
+
+const setState = (props: any) => {
+    state.dbId = props.dbId;
+    state.dbType = props.dbType;
+    state.db = props.db;
+    state.table = props.table;
+    state.datas = props.data;
+    state.tableHeight = props.height;
+    state.sortable = props.sortable;
+    state.loading = props.loading;
+    state.columnNames = props.columnNames;
+    state.showColumnTip = props.showColumnTip;
+    state.emptyText = props.emptyText;
+}
+
+const getColumnTip = (columnName: string) => {
+    // 优先从 table map中获取
+    let columns = getNowDb().getColumns(state.table);
+    if (!columns) {
+        return '';
+    }
+
+    const column = columns.find((c: any) => c.columnName == columnName);
+    const comment = column.columnComment;
+    return `${column.columnType} ${comment ? ' |  ' + comment : ''}`;
+};
+
+
+/**
+ * 表排序字段变更
+ */
+const onTableSortChange = async (sort: any) => {
+    if (!sort.prop) {
+        return;
+    }
+    cancelUpdateFields();
+    emits('sortChange', sort);
+};
+
+const onDataSelectionChange = (datas: []) => {
+    state.selectionDatas = datas;
+    emits('selectionChange', datas);
+};
+
+// 监听单元格点击事件
+const cellClick = (row: any, column: any, cell: any) => {
+    const property = column.property;
+    // 如果当前操作的表名不存在 或者 当前列的property不存在(如多选框)，则不允许修改当前单元格内容
+    if (!state.table || !property) {
+        return;
+    }
+    let div: HTMLElement = cell.children[0];
+    if (div && div.tagName === 'DIV') {
+        // 转为字符串比较,可能存在数字等
+        let text = (row[property] || row[property] == 0 ? row[property] : '') + '';
+        let input = document.createElement('input');
+        input.setAttribute('value', text);
+        // 将表格width也赋值于输入框，避免输入框长度超过表格长度
+        input.setAttribute('style', 'height:23px;text-align:center;border:none;' + div.getAttribute('style'));
+        cell.replaceChildren(input);
+        input.focus();
+        input.addEventListener('blur', async () => {
+            row[property] = input.value;
+            cell.replaceChildren(div);
+            if (input.value !== text) {
+                let currentUpdatedFields = state.updatedFields
+                const dbInst = getNowDbInst();
+                // 主键
+                const primaryKey = await dbInst.loadTableColumn(state.db, state.table);
+                const primaryKeyValue = row[primaryKey.columnName];
+                // 更新字段列信息
+                const updateColumn = await dbInst.loadTableColumn(state.db, state.table, property);
+                const newField = {
+                    div, row,
+                    fieldName: column.rawColumnKey,
+                    fieldType: updateColumn.columnType,
+                    oldValue: text,
+                    newValue: input.value
+                } as FieldsMeta;
+
+                // 被修改的字段
+                const primaryKeyFields = currentUpdatedFields.filter((meta) => meta.primaryKey === primaryKeyValue)
+                let hasKey = false;
+                if (primaryKeyFields.length <= 0) {
+                    primaryKeyFields[0] = {
+                        primaryKey: primaryKeyValue,
+                        primaryKeyName: primaryKey.columnName,
+                        primaryKeyType: primaryKey.columnType,
+                        fields: [newField]
+                    }
+                } else {
+                    hasKey = true
+                    let hasField = primaryKeyFields[0].fields.some(a => {
+                        if (a.fieldName === newField.fieldName) {
+                            a.newValue = newField.newValue
+                        }
+                        return a.fieldName === newField.fieldName
+                    })
+                    if (!hasField) {
+                        primaryKeyFields[0].fields.push(newField)
+                    }
+                }
+                let fields = primaryKeyFields[0].fields
+
+                const fieldsParam = fields.filter((a) => {
+                    if (a.fieldName === column.rawColumnKey) {
+                        a.newValue = input.value
+                    }
+                    return a.fieldName === column.rawColumnKey
+                })
+
+                const field = fieldsParam.length > 0 && fieldsParam[0] || {} as FieldsMeta
+                if (field.oldValue === input.value) { // 新值=旧值
+                    // 删除数据
+                    div.classList.remove('update_field_active')
+                    let delIndex: number[] = [];
+                    currentUpdatedFields.forEach((a, i) => {
+                        if (a.primaryKey === primaryKeyValue) {
+                            a.fields = a.fields && a.fields.length > 0 ? a.fields.filter(f => f.fieldName !== column.rawColumnKey) : [];
+                            a.fields.length <= 0 && delIndex.push(i)
+                        }
+                    });
+                    delIndex.forEach(i => delete currentUpdatedFields[i])
+                    currentUpdatedFields = currentUpdatedFields.filter(a => a)
+                } else {
+                    // 新增数据
+                    div.classList.add('update_field_active')
+                    if (hasKey) {
+                        currentUpdatedFields.forEach((value, index, array) => {
+                            if (value.primaryKey === primaryKeyValue) {
+                                array[index].fields = fields
+                            }
+                        })
+                    } else {
+                        currentUpdatedFields.push({
+                            primaryKey: primaryKeyValue,
+                            primaryKeyName: primaryKey.columnName,
+                            primaryKeyType: primaryKey.columnType,
+                            fields
+                        })
+                    }
+                }
+                state.updatedFields = currentUpdatedFields;
+                changeUpdatedField();
+            }
+        });
+    }
+};
+
+const submitUpdateFields = () => {
+    let currentUpdatedFields = state.updatedFields;
+    if (currentUpdatedFields.length <= 0) {
+        return;
+    }
+    const db = state.db;
+    let res = '';
+    let divs: HTMLElement[] = [];
+    currentUpdatedFields.forEach(a => {
+        let sql = `UPDATE ${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)},`
+            divs.push(f.div)
+        })
+        sql = sql.substring(0, sql.length - 1)
+        sql += ` WHERE ${primaryKeyName} = ${DbInst.wrapColumnValue(primaryKeyType, primaryKey)} ;`
+        res += sql;
+    })
+
+    DbInst.getInst(state.dbId).promptExeSql(db, res, () => { }, () => {
+        currentUpdatedFields = [];
+        divs.forEach(a => {
+            a.classList.remove('update_field_active');
+        })
+        state.updatedFields = [];
+        changeUpdatedField();
+    });
+}
+
+const cancelUpdateFields = () => {
+    state.updatedFields.forEach((a: any) => {
+        a.fields.forEach((b: any) => {
+            b.div.classList.remove('update_field_active')
+            b.row[b.fieldName] = b.oldValue
+        })
+    })
+    state.updatedFields = [];
+    changeUpdatedField();
+}
+
+
+const changeUpdatedField = () => {
+    emits('changeUpdatedField', state.updatedFields);
+}
+
+const getNowDb = () => {
+    return DbInst.getInst(state.dbId).getDb(state.db);
+}
+
+const getNowDbInst = () => {
+    return DbInst.getInst(state.dbId);
+}
+
+defineExpose({
+    submitUpdateFields,
+    cancelUpdateFields
+})
+
+</script>
+
+<style lang="scss">
+.update_field_active {
+    background-color: var(--el-color-success)
+}
+</style>

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

@@ -34,11 +34,11 @@ const SqlExecBox = (props: SqlExecProps): void => {
     if (boxInstance) {
         const boxVue = boxInstance.component
         // 调用open方法显示弹框，注意不能使用boxVue.ctx来调用组件函数（build打包后ctx会获取不到）
-        boxVue.proxy.open(props);
+        boxVue.exposed.open(props);
     } else {
         boxInstance = renderBox()
         SqlExecBox(props)
     }
 }
 
-export default SqlExecBox;
+export default SqlExecBox;

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

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <el-dialog title="待执行SQL" v-model="dialogVisible" :show-close="false" width="600px">
-            <codemirror height="350px" class="codesql" ref="cmEditor" language="sql" v-model="sqlValue" :options="cmOptions" />
+        <el-dialog :destroy-on-close="true" title="待执行SQL" v-model="dialogVisible" :show-close="false" width="600px" @close="cancel">
+            <monaco-editor height="300px" class="codesql" language="sql" v-model="sqlValue" />
             <el-input ref="remarkInputRef" v-model="remark" placeholder="请输入执行备注" class="mt5" />
             <template #footer>
                 <span class="dialog-footer">
@@ -13,143 +13,123 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, ref, nextTick, reactive, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { toRefs, ref, nextTick, reactive } from 'vue';
 import { dbApi } from '../api';
 import { ElDialog, ElButton, ElInput, ElMessage, InputInstance } from 'element-plus';
 // import base style
-import 'codemirror/lib/codemirror.css';
-// 引入主题后还需要在 options 中指定主题才会生效
-import 'codemirror/theme/base16-light.css';
-import 'codemirror/addon/selection/active-line';
-import { codemirror } from '@/components/codemirror';
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
 import { format as sqlFormatter } from 'sql-formatter';
 
 import { SqlExecProps } from './SqlExecBox';
 
-export default defineComponent({
-    name: 'SqlExecDialog',
-    components: {
-        codemirror,
-        ElButton,
-        ElDialog,
-        ElInput,
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        dbId: {
-            type: [Number],
-        },
-        db: {
-            type: String,
-        },
-        sql: {
-            type: String,
-        },
+    dbId: {
+        type: [Number],
     },
-    setup(props: any) {
-        const remarkInputRef = ref<InputInstance>();
-        const state = reactive({
-            dialogVisible: false,
-            sqlValue: '',
-            dbId: 0,
-            db: '',
-            remark: '',
-            btnLoading: false,
-            cmOptions: {
-                tabSize: 4,
-                mode: 'text/x-sql',
-                lineNumbers: true,
-                line: true,
-                indentWithTabs: true,
-                smartIndent: true,
-                matchBrackets: true,
-                theme: 'base16-light',
-                autofocus: true,
-                extraKeys: { Tab: 'autocomplete' }, // 自定义快捷键
-            },
-        });
-        state.sqlValue = props.sql;
-
-        let runSuccessCallback: any;
-        let cancelCallback: any;
-        let runSuccess: boolean = false;
-
-        /**
-         * 执行sql
-         */
-        const runSql = async () => {
-            if (!state.remark) {
-                ElMessage.error('请输入执行的备注信息');
-                return;
-            }
-
-            try {
-                state.btnLoading = true;
-                const res = await dbApi.sqlExec.request({
-                    id: state.dbId,
-                    db: state.db,
-                    remark: state.remark,
-                    sql: state.sqlValue.trim(),
-                });
-                if (parseInt(res.res[0].影响条数) >= 1) {
-                    ElMessage.success('执行成功');
-                    runSuccess = true;
-                } else {
-                    ElMessage.error('执行失败');
-                    runSuccess = false;
-                }
-            } catch (e) {
-                runSuccess = false;
-            }
-            if (runSuccess && runSuccessCallback) {
-                runSuccessCallback();
-            }
-            state.btnLoading = false;
-            cancel();
-        };
-
-        const cancel = () => {
-            state.dialogVisible = false;
-            // 没有执行成功，并且取消回调函数存在，则执行
-            if (!runSuccess && cancelCallback) {
-                cancelCallback();
-            }
-            setTimeout(() => {
-                state.dbId = 0;
-                state.sqlValue = '';
-                state.remark = '';
-                runSuccessCallback = null;
-                cancelCallback = null;
-                runSuccess = false;
-            }, 200);
-        };
-
-        const open = (props: SqlExecProps) => {
-            runSuccessCallback = props.runSuccessCallback;
-            cancelCallback = props.cancelCallback;
-            state.sqlValue = sqlFormatter(props.sql);
-            state.dbId = props.dbId;
-            state.db = props.db;
-            state.dialogVisible = true;
-            nextTick(() => {
-                setTimeout(() => {
-                    remarkInputRef.value?.focus();
-                });
-            });
-        };
-
-        return {
-            ...toRefs(state),
-            remarkInputRef,
-            open,
-            runSql,
-            cancel,
-        };
+    db: {
+        type: String,
     },
+    sql: {
+        type: String,
+    },
+})
+
+const remarkInputRef = ref<InputInstance>();
+const state = reactive({
+    dialogVisible: false,
+    sqlValue: '',
+    dbId: 0,
+    db: '',
+    remark: '',
+    btnLoading: false,
 });
+
+const {
+    dialogVisible,
+    sqlValue,
+    remark,
+    btnLoading
+} = toRefs(state)
+
+state.sqlValue = props.sql as any;
+let runSuccessCallback: any;
+let cancelCallback: any;
+let runSuccess: boolean = false;
+
+/**
+ * 执行sql
+ */
+const runSql = async () => {
+    if (!state.remark) {
+        ElMessage.error('请输入执行的备注信息');
+        return;
+    }
+
+    try {
+        state.btnLoading = true;
+        const res = await dbApi.sqlExec.request({
+            id: state.dbId,
+            db: state.db,
+            remark: state.remark,
+            sql: state.sqlValue.trim(),
+        });
+
+        for (let re of res.res) {
+            if (re.result !== 'success') {
+                ElMessage.error(`${re.sql} \n执行失败: ${re.result}`);
+                throw new Error(re.result)
+            }
+        }
+
+        runSuccess = true;
+        ElMessage.success('执行成功');
+    } catch (e) {
+        runSuccess = false;
+    }
+    if (runSuccess) {
+        if (runSuccessCallback) {
+            runSuccessCallback();
+        }
+        cancel();
+    }
+    state.btnLoading = false;
+};
+
+const cancel = () => {
+    state.dialogVisible = false;
+    // 没有执行成功，并且取消回调函数存在，则执行
+    if (!runSuccess && cancelCallback) {
+        cancelCallback();
+    }
+    setTimeout(() => {
+        state.dbId = 0;
+        state.sqlValue = '';
+        state.remark = '';
+        runSuccessCallback = null;
+        cancelCallback = null;
+        runSuccess = false;
+    }, 200);
+};
+
+const open = (props: SqlExecProps) => {
+    runSuccessCallback = props.runSuccessCallback;
+    cancelCallback = props.cancelCallback;
+    state.sqlValue = sqlFormatter(props.sql);
+    state.dbId = props.dbId;
+    state.db = props.db;
+    state.dialogVisible = true;
+    nextTick(() => {
+        setTimeout(() => {
+            remarkInputRef.value?.focus();
+        });
+    });
+};
+
+defineExpose({ open })
 </script>
 <style lang="scss">
 .codesql {

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

@@ -0,0 +1,548 @@
+<template>
+    <div>
+        <div>
+            <div class="toolbar">
+                <div class="fl">
+                    <el-link @click="onRunSql()" :underline="false" class="ml15" icon="VideoPlay">
+                    </el-link>
+                    <el-divider direction="vertical" border-style="dashed" />
+
+                    <el-tooltip class="box-item" effect="dark" content="format sql" placement="top">
+                        <el-link @click="formatSql()" type="primary" :underline="false" icon="MagicStick">
+                        </el-link>
+                    </el-tooltip>
+                    <el-divider direction="vertical" border-style="dashed" />
+
+                    <el-tooltip class="box-item" effect="dark" content="commit" placement="top">
+                        <el-link @click="onCommit()" type="success" :underline="false" icon="CircleCheck">
+                        </el-link>
+                    </el-tooltip>
+                    <el-divider direction="vertical" border-style="dashed" />
+
+                    <el-upload class="sql-file-exec" :before-upload="beforeUpload" :on-success="execSqlFileSuccess"
+                        :headers="{ Authorization: token }" :action="getUploadSqlFileUrl()" :show-file-list="false"
+                        name="file" multiple :limit="100">
+                        <el-tooltip class="box-item" effect="dark" content="SQL脚本执行" placement="top">
+                            <el-link type="success" :underline="false" icon="Document"></el-link>
+                        </el-tooltip>
+                    </el-upload>
+                </div>
+
+                <div style="float: right" class="fl">
+                    <el-button @click="saveSql()" type="primary" icon="document-add" plain size="small">保存SQL
+                    </el-button>
+                    <el-button v-if="sqlName" @click="deleteSql()" type="danger" icon="delete" plain size="small">删除SQL
+                    </el-button>
+                </div>
+            </div>
+        </div>
+
+        <div class="mt5 sqlEditor">
+            <div :id="'MonacoTextarea-' + ti.key" :style="{ height: editorHeight }">
+            </div>
+        </div>
+        <div class="mt5">
+            <el-row>
+                <el-link v-if="table" @click="onDeleteData()" class="ml5" type="danger" icon="delete"
+                    :underline="false"></el-link>
+
+                <span v-if="execRes.data.length > 0">
+                    <el-divider direction="vertical" border-style="dashed" />
+                    <el-link type="success" :underline="false" @click="exportData"><span
+                            style="font-size: 12px">导出</span></el-link>
+                </span>
+                <span v-if="hasUpdatedFileds">
+                    <el-divider direction="vertical" border-style="dashed" />
+                    <el-link type="success" :underline="false" @click="submitUpdateFields()"><span
+                            style="font-size: 12px">提交</span></el-link>
+                </span>
+                <span v-if="hasUpdatedFileds">
+                    <el-divider direction="vertical" border-style="dashed" />
+                    <el-link type="warning" :underline="false" @click="cancelUpdateFields"><span
+                            style="font-size: 12px">取消</span></el-link>
+                </span>
+            </el-row>
+            <db-table ref="dbTableRef" :db-id="state.ti.dbId" :db="state.ti.db"
+                :data="execRes.data" :table="state.table" :column-names="execRes.tableColumn" :loading="loading"
+                height="250" empty-text="tips: select *开头的单表查询或点击表名默认查询的数据,可双击数据在线修改"
+                @selection-change="onDataSelectionChange" @change-updated-field="changeUpdatedField"></db-table>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, watch, onMounted, computed, reactive, toRefs, ref, Ref } from 'vue';
+import { useStore } from '@/store/index.ts';
+import { getSession } from '@/common/utils/storage';
+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 EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
+import * as monaco from 'monaco-editor';
+import { editor } from 'monaco-editor';
+
+// 主题仓库 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 { exportCsv } from '@/common/utils/export';
+import { dateStrFormat } from '@/common/utils/date';
+import { dbApi } from '../../api';
+
+const emits = defineEmits(['saveSqlSuccess', 'deleteSqlSuccess'])
+
+const props = defineProps({
+    data: {
+        type: TabInfo,
+        required: true
+    },
+    // sql脚本名，若有则去加载该sql内容
+    sqlName: {
+        type: String,
+        default: '',
+    },
+    editorHeight: {
+        type: String,
+        default: '600'
+    }
+})
+
+
+const store = useStore();
+const token = getSession('token');
+let monacoEditor = {} as editor.IStandaloneCodeEditor;
+const dbTableRef = ref(null) as Ref;
+
+const state = reactive({
+    token,
+    ti: {} as TabInfo,
+    dbs: [],
+    dbId: null, // 当前选中操作的数据库实例
+    table: '', // 当前单表操作sql的表信息
+    sqlName: '',
+    sql: '', // 当前编辑器的sql内容
+    loading: false, // 是否在加载数据
+    execRes: {
+        data: [],
+        tableColumn: []
+    },
+    selectionDatas: [] as any,
+    editorHeight: '500',
+    hasUpdatedFileds: false,
+});
+
+const {
+    editorHeight,
+    ti,
+    execRes,
+    table,
+    sqlName,
+    loading,
+    hasUpdatedFileds,
+} = toRefs(state);
+
+watch(() => props.editorHeight, (newValue: any) => {
+    state.editorHeight = newValue;
+});
+
+onMounted(async () => {
+    console.log('in query mounted');
+    state.ti = props.data;
+    state.editorHeight = props.editorHeight;
+    const params = state.ti.params;
+    state.dbs = params && params.dbs;
+
+    if (params && params.sqlName) {
+        state.sqlName = params.sqlName;
+        const res = await dbApi.getSql.request({ id: state.ti.dbId, type: 1, name: state.sqlName, db: state.ti.db });
+        state.sql = res.sql;
+    }
+    nextTick(() => {
+        setTimeout(() => initMonacoEditor(), 50)
+    })
+    await state.ti.getNowDbInst().loadDbHints(state.ti.db);
+})
+
+// 获取布局配置信息
+const getThemeConfig: any = computed(() => {
+    return store.state.themeConfig.themeConfig;
+});
+
+self.MonacoEnvironment = {
+    getWorker() {
+        return new EditorWorker();
+    }
+};
+
+const initMonacoEditor = () => {
+    let monacoTextarea = document.getElementById('MonacoTextarea-' + state.ti.key) as HTMLElement
+    // options参数参考 https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html#language
+    // 初始化一些主题
+    monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
+    monacoEditor = monaco.editor.create(monacoTextarea, {
+        language: 'sql',
+        theme: getThemeConfig.value.editorTheme,
+        automaticLayout: true, //自适应宽高布局
+        folding: false,
+        roundedSelection: false, // 禁用选择文本背景的圆角
+        matchBrackets: 'near',
+        linkedEditing: true,
+        cursorBlinking: 'smooth',// 光标闪烁样式
+        mouseWheelZoom: true, // 在按住Ctrl键的同时使用鼠标滚轮时，在编辑器中缩放字体
+        overviewRulerBorder: false, // 不要滚动条的边框
+        tabSize: 2, // tab 缩进长度
+        // fontFamily: 'JetBrainsMono', // 字体 暂时不要设置，否则光标容易错位
+        fontWeight: 'bold',
+        // letterSpacing: 1, 字符间距
+        // quickSuggestions:false, // 禁用代码提示
+        minimap: {
+            enabled: false, // 不要小地图
+        },
+    });
+
+    // 注册快捷键：ctrl + R 运行选中的sql
+    monacoEditor.addAction({
+        // An unique identifier of the contributed action.
+        id: 'run-sql-action' + state.ti.key,
+        // A label of the action that will be presented to the user.
+        label: '执行SQL',
+        // A precondition for this action.
+        precondition: undefined,
+        // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
+        keybindingContext: undefined,
+        keybindings: [
+            // chord
+            monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyR, 0)
+        ],
+        contextMenuGroupId: 'navigation',
+        contextMenuOrder: 1.5,
+        // Method that will be executed when the action is triggered.
+        // @param editor The editor instance is passed in as a convenience
+        run: async function () {
+            try {
+                await onRunSql();
+            } catch (e: any) {
+                e.message && ElMessage.error(e.message)
+            }
+        }
+    });
+
+    // 注册快捷键：ctrl + shift + f 格式化sql
+    monacoEditor.addAction({
+        // An unique identifier of the contributed action.
+        id: 'format-sql-action' + state.ti.key,
+        // A label of the action that will be presented to the user.
+        label: '格式化SQL',
+        // A precondition for this action.
+        precondition: undefined,
+        // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
+        keybindingContext: undefined,
+        keybindings: [
+            // chord
+            monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyF, 0)
+        ],
+        contextMenuGroupId: 'navigation',
+        contextMenuOrder: 2,
+        // Method that will be executed when the action is triggered.
+        // @param editor The editor instance is passed in as a convenience
+        run: async function () {
+            try {
+                await formatSql();
+            } catch (e: any) {
+                e.message && ElMessage.error(e.message)
+            }
+        }
+    });
+
+    // 动态设置主题
+    // monaco.editor.setTheme('hc-black');
+
+    // 如果sql有值，则默认赋值
+    if (state.sql) {
+        monacoEditor.getModel()?.setValue(state.sql);
+    }
+};
+
+/**
+ * 执行sql
+ */
+const onRunSql = async () => {
+    // 没有选中的文本，则为全部文本
+    let sql = getSql() as string;
+    notBlank(sql && sql.trim(), '请选中需要执行的sql');
+    // 去除字符串前的空格、换行等
+    sql = sql.replace(/(^\s*)/g, '');
+    let execRemark = '';
+    let canRun = true;
+    if (
+        sql.startsWith('update') ||
+        sql.startsWith('UPDATE') ||
+        sql.startsWith('INSERT') ||
+        sql.startsWith('insert') ||
+        sql.startsWith('DELETE') ||
+        sql.startsWith('delete')
+    ) {
+        const res: any = await ElMessageBox.prompt('请输入备注', 'Tip', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
+            inputErrorMessage: '请输入执行该sql的备注信息',
+        });
+        execRemark = res.value;
+        if (!execRemark) {
+            canRun = false;
+        }
+    }
+    if (!canRun) {
+        return;
+    }
+
+    try {
+        state.loading = true;
+
+        const colAndData: any = await state.ti.getNowDbInst().runSql(state.ti.db, sql, execRemark);
+        if (!colAndData.res || colAndData.res.length === 0) {
+            ElMessage.warning('未查询到结果集')
+        }
+        state.execRes.data = colAndData.res;
+        state.execRes.tableColumn = colAndData.colNames;
+        cancelUpdateFields()
+    } catch (e: any) {
+        state.execRes.data = [];
+        state.execRes.tableColumn = [];
+        state.table = '';
+        return;
+    } finally {
+        state.loading = false;
+    }
+
+    // 即只有以该字符串开头的sql才可修改表数据内容
+    if (sql.startsWith('SELECT *') || sql.startsWith('select *') || sql.startsWith('SELECT\n  *')) {
+        state.selectionDatas = [];
+        const tableName = sql.split(/from/i)[1];
+        if (tableName) {
+            const tn = tableName.trim().split(' ')[0];
+            state.table = tn;
+            state.table = tn;
+        } else {
+            state.table = '';
+        }
+    } else {
+        state.table = '';
+    }
+};
+
+/**
+ * 获取sql，如果有鼠标选中，则返回选中内容，否则返回输入框内所有内容
+ */
+const getSql = () => {
+    let res = '' as string | undefined;
+    // 编辑器还没初始化
+    if (!monacoEditor?.getModel) {
+        return res;
+    }
+    // 选择选中的sql
+    let selection = monacoEditor.getSelection()
+    if (selection) {
+        res = monacoEditor.getModel()?.getValueInRange(selection)
+    }
+    // 整个编辑器的sql
+    if (!res) {
+        return monacoEditor.getModel()?.getValue()
+    }
+    return res
+};
+
+const saveSql = async () => {
+    const sql = monacoEditor.getModel()?.getValue();
+    notBlank(sql, 'sql内容不能为空');
+
+    let sqlName = state.sqlName;
+    const newSql = !sqlName;
+    if (newSql) {
+        try {
+            const input = await ElMessageBox.prompt('请输入SQL脚本名', 'SQL名', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                inputPattern:
+                    /\w+/,
+                inputErrorMessage: '请输入SQL脚本名',
+            });
+            sqlName = input.value;
+            state.sqlName = sqlName;
+        } catch (e) {
+            return;
+        }
+    }
+
+    await dbApi.saveSql.request({ id: state.ti.dbId, db: state.ti.db, sql: sql, type: 1, name: sqlName });
+    ElMessage.success('保存成功');
+    // 保存sql脚本成功事件
+    emits('saveSqlSuccess', state.ti.dbId, state.ti.db);
+};
+
+const deleteSql = async () => {
+    const sqlName = state.sqlName;
+    notBlank(sqlName, "该sql内容未保存");
+    const { dbId, db } = state.ti;
+    try {
+        await ElMessageBox.confirm(`确定删除【${sqlName}】该SQL内容?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await dbApi.deleteDbSql.request({ id: dbId, db: db, name: sqlName });
+        ElMessage.success('删除成功');
+        emits('deleteSqlSuccess', dbId, db);
+    } catch (err) { }
+};
+
+/**
+ * 格式化sql
+ */
+const formatSql = () => {
+    let selection = monacoEditor.getSelection()
+    if (!selection) {
+        return;
+    }
+    let sql = monacoEditor.getModel()?.getValueInRange(selection)
+    // 有选中sql则格式化并替换选中sql, 否则格式化编辑器所有内容
+    if (sql) {
+        replaceSelection(sqlFormatter(sql), selection)
+        return;
+    }
+    monacoEditor.getModel()?.setValue(sqlFormatter(monacoEditor.getValue()));
+};
+
+/**
+ * 提交事务，用于没有开启自动提交事务
+ */
+const onCommit = () => {
+    state.ti.getNowDbInst().runSql(state.ti.db, 'COMMIT;');
+    ElMessage.success('COMMIT success');
+};
+
+/**
+ * 替换选中的内容
+ */
+const replaceSelection = (str: string, selection: any) => {
+    const model = monacoEditor.getModel();
+    if (!model) {
+        return;
+    }
+    if (!selection) {
+        model.setValue(str);
+        return;
+    }
+    const { startLineNumber, endLineNumber, startColumn, endColumn } = selection
+
+    const textBeforeSelection = model.getValueInRange({
+        startLineNumber: 1,
+        startColumn: 0,
+        endLineNumber: startLineNumber,
+        endColumn: startColumn,
+    })
+
+    const textAfterSelection = model.getValueInRange({
+        startLineNumber: endLineNumber,
+        startColumn: endColumn,
+        endLineNumber: model.getLineCount(),
+        endColumn: model.getLineMaxColumn(model.getLineCount()),
+    })
+
+    monacoEditor.setValue(textBeforeSelection + str + textAfterSelection)
+    monacoEditor.focus()
+    monacoEditor.setPosition({
+        lineNumber: startLineNumber,
+        column: 0,
+    })
+}
+
+/**
+ * 导出当前页数据
+ */
+const exportData = () => {
+    const dataList = state.execRes.data as any;
+    isTrue(dataList.length > 0, '没有数据可导出');
+    exportCsv(`数据查询导出-${dateStrFormat('yyyyMMddHHmm', new Date().toString())}`, state.execRes.tableColumn, dataList)
+};
+
+const beforeUpload = (file: File) => {
+    ElMessage.success(`'${file.name}' 正在上传执行, 请关注结果通知`);
+};
+
+// 执行sql成功
+const execSqlFileSuccess = (res: any) => {
+    if (res.code !== 200) {
+        ElMessage.error(res.msg);
+    }
+};
+
+// 获取sql文件上传执行url
+const getUploadSqlFileUrl = () => {
+    return `${config.baseApiUrl}/dbs/${state.ti.dbId}/exec-sql-file?db=${state.ti.db}`;
+};
+
+
+const onDataSelectionChange = (datas: []) => {
+    state.selectionDatas = datas;
+};
+
+const changeUpdatedField = (updatedFields: []) => {
+    // 如果存在要更新字段，则显示提交和取消按钮
+    state.hasUpdatedFileds = updatedFields && updatedFields.length > 0;
+}
+
+/**
+ * 执行删除数据事件
+ */
+const onDeleteData = async () => {
+    const deleteDatas = state.selectionDatas;
+    isTrue(deleteDatas && deleteDatas.length > 0, '请先选择要删除的数据');
+    const { db } = state.ti;
+    const dbInst = state.ti.getNowDbInst()
+    const primaryKey = await dbInst.loadTableColumn(db, state.table);
+    const primaryKeyColumnName = primaryKey.columnName;
+    dbInst.promptExeSql(db, dbInst.genDeleteByPrimaryKeysSql(db, state.table, deleteDatas), null, () => {
+        state.execRes.data = state.execRes.data.filter(
+            (d: any) => !(deleteDatas.findIndex((x: any) => x[primaryKeyColumnName] == d[primaryKeyColumnName]) != -1)
+        );
+        state.selectionDatas = [];
+    });
+};
+
+const submitUpdateFields = () => {
+    dbTableRef.value.submitUpdateFields();
+}
+
+const cancelUpdateFields = () => {
+    dbTableRef.value.cancelUpdateFields();
+}
+
+</script>
+
+<style lang="scss">
+.sql-file-exec {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    text-decoration: none;
+}
+
+.sqlEditor {
+    font-size: 8pt;
+    font-weight: 600;
+    border: 1px solid #ccc;
+}
+
+
+.update_field_active {
+    background-color: var(--el-color-success)
+}
+</style>

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

@@ -0,0 +1,348 @@
+<template>
+    <div>
+        <el-row>
+            <el-col :span="8">
+                <el-link @click="onRefresh()" icon="refresh" :underline="false" class="ml5">
+                </el-link>
+                <el-divider direction="vertical" border-style="dashed" />
+
+                <el-link @click="addRow()" type="primary" icon="plus" :underline="false"></el-link>
+                <el-divider direction="vertical" border-style="dashed" />
+
+                <el-link @click="onDeleteData()" type="danger" icon="delete" :underline="false"></el-link>
+                <el-divider direction="vertical" border-style="dashed" />
+
+                <el-tooltip class="box-item" effect="dark" content="commit" placement="top">
+                    <el-link @click="onCommit()" type="success" icon="CircleCheck" :underline="false">
+                    </el-link>
+                </el-tooltip>
+                <el-divider direction="vertical" border-style="dashed" />
+
+                <el-tooltip class="box-item" effect="dark" content="生成insert sql" placement="top">
+                    <el-link @click="onGenerateInsertSql()" type="success" :underline="false">gi</el-link>
+                </el-tooltip>
+                <el-divider direction="vertical" border-style="dashed" />
+
+                <el-tooltip class="box-item" effect="dark" content="导出当前页的csv文件" placement="top">
+                    <el-link type="success" :underline="false" @click="exportData"><span class="f12">导出</span></el-link>
+                </el-tooltip>
+                <el-divider direction="vertical" border-style="dashed" />
+
+                <el-tooltip v-if="hasUpdatedFileds" class="box-item" effect="dark" content="提交修改" placement="top">
+                    <el-link @click="submitUpdateFields()" type="success" :underline="false" class="f12">提交</el-link>
+                </el-tooltip>
+                <el-divider v-if="hasUpdatedFileds" direction="vertical" border-style="dashed" />
+                <el-tooltip v-if="hasUpdatedFileds" class="box-item" effect="dark" content="取消修改" placement="top">
+                    <el-link @click="cancelUpdateFields" type="warning" :underline="false" class="f12">取消</el-link>
+                </el-tooltip>
+            </el-col>
+            <el-col :span="16">
+                <el-input v-model="condition" placeholder="若需条件过滤，可选择列并点击对应的字段并输入需要过滤的内容点击查询按钮即可" clearable size="small"
+                    style="width: 100%">
+                    <template #prepend>
+                        <el-popover trigger="click" :width="320" placement="right">
+                            <template #reference>
+                                <el-link type="success" :underline="false">选择列</el-link>
+                            </template>
+                            <el-table :data="columns" max-height="500" size="small" @row-click="
+                                (...event: any) => {
+                                    onConditionRowClick(event);
+                                }
+                            " style="cursor: pointer">
+                                <el-table-column property="columnName" label="列名" show-overflow-tooltip>
+                                </el-table-column>
+                                <el-table-column property="columnComment" label="备注" show-overflow-tooltip>
+                                </el-table-column>
+                            </el-table>
+                        </el-popover>
+                    </template>
+
+                    <template #append>
+                        <el-button @click="onSelectByCondition()" icon="search" size="small"></el-button>
+                    </template>
+                </el-input>
+            </el-col>
+        </el-row>
+
+        <db-table ref="dbTableRef" :db-id="state.ti.dbId" :db="state.ti.db" :data="datas"
+            :table="state.table" :column-names="columnNames" :loading="loading" :height="tableHeight"
+            :show-column-tip="true" :sortable="'custom'" @sort-change="(sort: any) => onTableSortChange(sort)"
+            @selection-change="onDataSelectionChange" @change-updated-field="changeUpdatedField"></db-table>
+
+        <el-row type="flex" class="mt5" justify="center">
+            <el-pagination small :total="count" @current-change="pageChange()" layout="prev, pager, next, total, jumper"
+                v-model:current-page="pageNum" :page-size="DbInst.DefaultLimit"></el-pagination>
+        </el-row>
+        <div style=" font-size: 12px; padding: 0 10px; color: #606266"><span>{{ state.sql }}</span>
+        </div>
+
+        <el-dialog v-model="conditionDialog.visible" :title="conditionDialog.title" width="420px">
+            <el-row>
+                <el-col :span="5">
+                    <el-select v-model="conditionDialog.condition">
+                        <el-option label="=" value="="> </el-option>
+                        <el-option label="LIKE" value="LIKE"> </el-option>
+                        <el-option label=">" value=">"> </el-option>
+                        <el-option label=">=" value=">="> </el-option>
+                        <el-option label="<" value="<"> </el-option>
+                        <el-option label="<=" value="<="> </el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="19">
+                    <el-input v-model="conditionDialog.value" :placeholder="conditionDialog.placeholder" />
+                </el-col>
+            </el-row>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="onCancelCondition">取消</el-button>
+                    <el-button type="primary" @click="onConfirmCondition">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch, reactive, toRefs, ref, Ref } from 'vue';
+import { isTrue, notEmpty, notBlank } from '@/common/assert';
+import { ElMessage } from 'element-plus';
+
+import { DbInst, TabInfo } from '../../db';
+import { exportCsv } from '@/common/utils/export';
+import { dateStrFormat } from '@/common/utils/date';
+import DbTable from '../DbTable.vue'
+
+const emits = defineEmits(['genInsertSql'])
+
+const props = defineProps({
+    data: {
+        type: TabInfo,
+        required: true
+    },
+    tableHeight: {
+        type: String,
+        default: '600'
+    }
+})
+
+const dbTableRef = ref(null) as Ref;
+
+const state = reactive({
+    ti: {} as TabInfo,
+    table: '', // 当前的表名
+    datas: [],
+    sql: '', // 当前数据tab执行的sql
+    orderBy: '',
+    condition: '', // 当前条件框的条件
+    loading: false, // 是否在加载数据
+    columnNames: [],
+    columns: [],
+    pageNum: 1,
+    count: 0,
+    selectionDatas: [] as any,
+    conditionDialog: {
+        title: '',
+        placeholder: '',
+        columnRow: null,
+        dataTab: null,
+        visible: false,
+        condition: '=',
+        value: null
+    },
+    tableHeight: '600',
+    hasUpdatedFileds: false,
+});
+
+const {
+    datas,
+    condition,
+    loading,
+    columns,
+    columnNames,
+    pageNum,
+    count,
+    hasUpdatedFileds,
+    conditionDialog,
+} = toRefs(state);
+
+watch(() => props.tableHeight, (newValue: any) => {
+    state.tableHeight = newValue;
+});
+
+onMounted(async () => {
+    console.log('in table data mounted');
+    state.ti = props.data;
+    state.tableHeight = props.tableHeight;
+    state.table = state.ti.params.table;
+    notBlank(state.table, "TableData组件params.table信息不能为空")
+
+    const columns = await state.ti.getNowDbInst().loadColumns(state.ti.db, state.table);
+    state.columns = columns;
+    state.columnNames = columns.map((t: any) => t.columnName);
+    await onRefresh();
+})
+
+const onRefresh = async () => {
+    // 查询条件置空
+    state.condition = '';
+    state.pageNum = 1;
+    await selectData();
+}
+
+/**
+   * 数据tab修改页数
+   */
+const pageChange = async () => {
+    await selectData();
+};
+
+/**
+ * 单表数据信息查询数据
+ */
+const selectData = async () => {
+    state.loading = true;
+    const dbInst = state.ti.getNowDbInst();
+    const { db } = state.ti;
+    try {
+        const countRes = await dbInst.runSql(db, DbInst.getDefaultCountSql(state.table));
+        state.count = countRes.res[0].count;
+        let sql = dbInst.getDefaultSelectSql(state.table, state.condition, state.orderBy, state.pageNum);
+        state.sql = sql;
+        if (state.count > 0) {
+            const colAndData: any = await dbInst.runSql(db, sql);
+            state.datas = colAndData.res;
+        } else {
+            state.datas = [];
+        }
+    } finally {
+        state.loading = false;
+    }
+}
+
+/**
+ * 导出当前页数据
+ */
+const exportData = () => {
+    const dataList = state.datas as any;
+    isTrue(dataList.length > 0, '没有数据可导出');
+    exportCsv(`数据导出-${state.table}-${dateStrFormat('yyyyMMddHHmm', new Date().toString())}`, state.columnNames, dataList)
+};
+
+
+/**
+ * 条件查询，点击列信息后显示输入对应的值
+ */
+const onConditionRowClick = (event: any) => {
+    const row = event[0];
+    state.conditionDialog.title = `请输入 [${row.columnName}] 的值`;
+    state.conditionDialog.placeholder = `${row.columnType}  ${row.columnComment}`;
+    state.conditionDialog.columnRow = row;
+    state.conditionDialog.visible = true;
+};
+
+// 确认条件
+const onConfirmCondition = () => {
+    const conditionDialog = state.conditionDialog;
+    let condition = state.condition;
+    if (condition) {
+        condition += ` AND `;
+    }
+    const row = conditionDialog.columnRow as any;
+    condition += `${row.columnName} ${conditionDialog.condition} `;
+    state.condition = condition + DbInst.wrapColumnValue(row.columnType, conditionDialog.value);
+    onCancelCondition();
+};
+
+const onCancelCondition = () => {
+    state.conditionDialog.visible = false;
+    state.conditionDialog.title = ``;
+    state.conditionDialog.placeholder = ``;
+    state.conditionDialog.value = null;
+    state.conditionDialog.columnRow = null;
+    state.conditionDialog.dataTab = null;
+};
+
+/**
+ * 提交事务，用于没有开启自动提交事务
+ */
+const onCommit = () => {
+    state.ti.getNowDbInst().runSql(state.ti.db, 'COMMIT;');
+    ElMessage.success('COMMIT success');
+};
+
+const onSelectByCondition = async () => {
+    notEmpty(state.condition, '条件不能为空');
+    state.pageNum = 1;
+    await selectData();
+}
+
+/**
+ * 表排序字段变更
+ */
+const onTableSortChange = async (sort: any) => {
+    if (!sort.prop) {
+        return;
+    }
+    const sortType = sort.order == 'descending' ? 'DESC' : 'ASC';
+    state.orderBy = `ORDER BY ${sort.prop} ${sortType}`;
+    await onRefresh();
+};
+
+const onDataSelectionChange = (datas: []) => {
+    state.selectionDatas = datas;
+};
+
+const changeUpdatedField = (updatedFields: []) => {
+    // 如果存在要更新字段，则显示提交和取消按钮
+    state.hasUpdatedFileds = updatedFields && updatedFields.length > 0;
+}
+
+/**
+ * 执行删除数据事件
+ */
+const onDeleteData = async () => {
+    const deleteDatas = state.selectionDatas;
+    isTrue(deleteDatas && deleteDatas.length > 0, '请先选择要删除的数据');
+    const { db } = state.ti;
+    const dbInst = state.ti.getNowDbInst()
+    dbInst.promptExeSql(db, dbInst.genDeleteByPrimaryKeysSql(db, state.table, deleteDatas), null, () => {
+        onRefresh();
+    });
+};
+
+const onGenerateInsertSql = async () => {
+    isTrue(state.selectionDatas && state.selectionDatas.length > 0, '请先选择数据');
+    emits('genInsertSql', state.ti.getNowDbInst().genInsertSql(state.ti.db, state.table, state.selectionDatas));
+};
+
+const submitUpdateFields = () => {
+    dbTableRef.value.submitUpdateFields();
+}
+
+const cancelUpdateFields = () => {
+    dbTableRef.value.cancelUpdateFields();
+}
+
+// 添加新数据行
+const addRow = async () => {
+    const columns = state.ti.getNowDb().getColumns(state.table);
+    // key: 字段名，value: 字段名提示
+    let obj: any = {};
+    columns.forEach((item: any) => {
+        obj[`${item.columnName}`] = `'${item.columnComment || ''} ${item.columnName}[${item.columnType}]${item.nullable == 'YES' ? '' : '[not null]'}'`;
+    });
+    let columnNames = Object.keys(obj).join(',');
+    let values = Object.values(obj).join(',');
+    let sql = `INSERT INTO ${state.table} (${columnNames}) VALUES (${values});`;
+    state.ti.getNowDbInst().promptExeSql(state.ti.db, sql, null, () => {
+        onRefresh();
+    });
+};
+
+</script>
+
+<style lang="scss">
+.update_field_active {
+    background-color: var(--el-color-success)
+}
+</style>

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

@@ -0,0 +1,473 @@
+/* eslint-disable no-unused-vars */
+import { dbApi } from './api';
+import SqlExecBox from './component/SqlExecBox';
+
+const dbInstCache: Map<number, DbInst> = new Map();
+
+export class DbInst {
+    /**
+     * 标签路径
+     */
+    tagPath: string
+
+    /**
+     * 实例id
+     */
+    id: number
+
+    /**
+     * 实例名
+     */
+    name: string
+
+    /**
+     * 数据库类型, mysql postgres
+     */
+    type: string
+
+    /**
+     * schema -> db
+     */
+    dbs: Map<string, Db> = new Map()
+
+    /**
+     * 默认查询分页数量
+     */
+    static DefaultLimit = 20;
+
+    /**
+     * 获取指定数据库实例，若不存在则新建并缓存
+     * @param dbName 数据库名
+     * @returns db实例
+     */
+    getDb(dbName: string) {
+        if (!dbName) {
+            throw new Error('dbName不能为空')
+        }
+        let db = this.dbs.get(dbName)
+        if (db) {
+            return db;
+        }
+        console.info(`new db -> dbId: ${this.id}, dbName: ${dbName}`);
+        db = new Db();
+        db.name = dbName;
+        this.dbs.set(dbName, db);
+        return db;
+    }
+
+    /**
+     * 加载数据库表信息
+     * @param dbName 数据库名
+     * @returns 表信息
+     */
+    async loadTables(dbName: string) {
+        const db = this.getDb(dbName);
+        // 优先从 table map中获取
+        let tables = db.tables;
+        if (tables) {
+            return tables;
+        }
+        console.log(`load tables -> dbName: ${dbName}`);
+        tables = await dbApi.tableMetadata.request({ id: this.id, db: dbName });
+        db.tables = tables;
+        return tables;
+    }
+
+    /**
+     * 获取表的所有列信息
+     * @param table 表名
+     */
+    async loadColumns(dbName: string, table: string) {
+        const db = this.getDb(dbName);
+        // 优先从 table map中获取
+        let columns = db.getColumns(table);
+        if (columns) {
+            return columns;
+        }
+        console.log(`load columns -> dbName: ${dbName}, table: ${table}`);
+        columns = await dbApi.columnMetadata.request({
+            id: this.id,
+            db: dbName,
+            tableName: table,
+        });
+        db.columnsMap.set(table, columns);
+        return columns;
+    }
+
+    /**
+     * 获取指定表的指定信息
+     * @param table 表名
+     */
+    async loadTableColumn(dbName: string, table: string, columnName?: string) {
+        // 确保该表的列信息都已加载
+        await this.loadColumns(dbName, table);
+        return this.getDb(dbName).getColumn(table, columnName);
+    }
+
+    /**
+     * 获取库信息提示
+     */
+    async loadDbHints(dbName: string) {
+        const db = this.getDb(dbName);
+        if (db.tableHints) {
+            return db.tableHints;
+        }
+        console.log(`load db-hits -> dbName: ${dbName}`);
+        const hits = await dbApi.hintTables.request({ id: this.id, db: db.name, })
+        db.tableHints = hits;
+        return hits;
+    }
+
+    /**
+    * 执行sql
+    * 
+    * @param sql sql
+    * @param remark 执行备注
+    */
+    async runSql(dbName: string, sql: string, remark: string = '') {
+        return await dbApi.sqlExec.request({
+            id: this.id,
+            db: dbName,
+            sql: sql.trim(),
+            remark,
+        });
+    }
+
+    // 获取指定表的默认查询sql
+    getDefaultSelectSql(table: string, condition: string, orderBy: string, pageNum: number, limit: number = DbInst.DefaultLimit) {
+        const baseSql = `SELECT * FROM ${table} ${condition ? 'WHERE ' + condition : ''} ${orderBy ? orderBy : ''}`;
+        if (this.type == 'mysql') {
+            return `${baseSql} LIMIT ${(pageNum - 1) * limit}, ${limit};`;
+        }
+        if (this.type == 'postgres') {
+            return `${baseSql} OFFSET ${(pageNum - 1) * limit} LIMIT ${limit};`;
+        }
+        return baseSql;
+    }
+
+    /**
+     * 生成指定数据的insert语句
+     * @param dbName 数据库名
+     * @param table 表名
+     * @param datas 要生成的数据
+     */
+    genInsertSql(dbName: string, table: string, datas: any[]): string {
+        if (!datas) {
+            return '';
+        }
+        const columns = this.getDb(dbName).getColumns(table);
+        const sqls = [];
+        for (let data of datas) {
+            let colNames = [];
+            let values = [];
+            for (let column of columns) {
+                const colName = column.columnName;
+                colNames.push(colName);
+                values.push(DbInst.wrapValueByType(data[colName]));
+            }
+            sqls.push(`INSERT INTO ${table} (${colNames.join(', ')}) VALUES(${values.join(', ')})`);
+        }
+        return sqls.join(';\n') + ';'
+    }
+
+    /**
+     * 生成根据主键删除的sql语句
+     * @param table 表名
+     * @param datas 要删除的记录
+     */
+    genDeleteByPrimaryKeysSql(db: string, table: string, datas: any[]) {
+        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})`;
+    }
+
+    /* 
+    * 弹框提示是否执行sql
+    */
+    promptExeSql = (db: string, sql: string, cancelFunc: any = null, successFunc: any = null) => {
+        SqlExecBox({
+            sql, dbId: this.id, db,
+            runSuccessCallback: successFunc,
+            cancelCallback: cancelFunc,
+        });
+    };
+
+    /**
+     * 获取或新建dbInst，如果缓存中不存在则新建，否则直接返回
+     * @param inst 数据库实例，后端返回的列表接口中的信息
+     * @returns DbInst
+     */
+    static getOrNewInst(inst: any) {
+        if (!inst) {
+            throw new Error('inst不能为空')
+        }
+        let dbInst = dbInstCache.get(inst.id);
+        if (dbInst) {
+            return dbInst;
+        }
+        console.info(`new dbInst: ${inst.id}, tagPath: ${inst.tagPath}`);
+        dbInst = new DbInst();
+        dbInst.tagPath = inst.tagPath;
+        dbInst.id = inst.id;
+        dbInst.name = inst.name;
+        dbInst.type = inst.type;
+
+        dbInstCache.set(dbInst.id, dbInst);
+        return dbInst;
+    }
+
+    /**
+    * 获取数据库实例id，若不存在，则新建一个并缓存
+    * @param dbId 数据库实例id
+    * @param dbType 第一次获取时为必传项，即第一次创建时
+    * @returns 数据库实例
+    */
+    static getInst(dbId?: number): DbInst {
+        if (!dbId) {
+            throw new Error('dbId不能为空');
+        }
+        let dbInst = dbInstCache.get(dbId);
+        if (dbInst) {
+            return dbInst;
+        }
+        throw new Error('dbInst不存在! 请在合适调用点使用DbInst.newInst()新建该实例');
+    }
+
+    /**
+     * 清空所有实例缓存信息
+     */
+    static clearAll() {
+        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 值
+     * @returns 包装后的值
+     */
+    static wrapValueByType = (val: any) => {
+        if (val == null) {
+            return 'NULL';
+        }
+        if (typeof val == 'number') {
+            return val;
+        }
+        return `'${val}'`;
+    };
+
+    /**
+    * 根据字段类型包装字段值，如为字符串等则添加‘’，数字类型则直接返回即可
+    */
+    static wrapColumnValue(columnType: string, value: any) {
+        if (columnType.match(/int|double|float|nubmer|decimal|byte|bit/gi)) {
+            return value;
+        }
+        return `'${value}'`;
+    };
+
+    /**
+     * 
+     * @param str 字符串
+     * @param tableData 表数据
+     * @param flag 标志
+     * @returns 列宽度
+     */
+    static flexColumnWidth = (str: any, tableData: any, flag = 'equal') => {
+        // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
+        // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
+        // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
+        str = str + '';
+        let columnContent = '';
+        if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
+            return;
+        }
+        if (!str || !str.length || str.length === 0 || str === undefined) {
+            return;
+        }
+        if (flag === 'equal') {
+            // 获取该列中第一个不为空的数据(内容)
+            for (let i = 0; i < tableData.length; i++) {
+                // 转为字符串后比较
+                if ((tableData[i][str] + '').length > 0) {
+                    columnContent = tableData[i][str] + '';
+                    break;
+                }
+            }
+        } else {
+            // 获取该列中最长的数据(内容)
+            let index = 0;
+            for (let i = 0; i < tableData.length; i++) {
+                if (tableData[i][str] === null) {
+                    return;
+                }
+                const now_temp = tableData[i][str] + '';
+                const max_temp = tableData[index][str] + '';
+                if (now_temp.length > max_temp.length) {
+                    index = i;
+                }
+            }
+            columnContent = tableData[index][str] + '';
+        }
+        const contentWidth: number = DbInst.getContentWidth(columnContent);
+        // 获取列名称的长度 加上排序图标长度
+        const columnWidth: number = DbInst.getContentWidth(str) + 43;
+        const flexWidth: number = contentWidth > columnWidth ? contentWidth : columnWidth;
+        return flexWidth + 'px';
+    };
+
+    /**
+     * 获取内容所需要占用的宽度
+    */
+    static getContentWidth = (content: any): number => {
+        // 以下分配的单位长度可根据实际需求进行调整
+        let flexWidth = 0;
+        for (const char of content) {
+            if (flexWidth > 500) {
+                break;
+            }
+            if ((char >= '0' && char <= '9') || (char >= 'a' && char <= 'z')) {
+                // 如果是小写字母、数字字符，分配8个单位宽度
+                flexWidth += 8.5;
+                continue;
+            }
+            if (char >= 'A' && char <= 'Z') {
+                flexWidth += 9;
+                continue;
+            }
+            if (char >= '\u4e00' && char <= '\u9fa5') {
+                // 如果是中文字符，为字符分配16个单位宽度
+                flexWidth += 16;
+            } else {
+                // 其他种类字符，为字符分配9个单位宽度
+                flexWidth += 8;
+            }
+        }
+        if (flexWidth > 500) {
+            // 设置最大宽度
+            flexWidth = 500;
+        }
+        return flexWidth;
+    };
+}
+
+/**
+ * 数据库实例信息
+ */
+class Db {
+    name: string  // 库名
+    tables: []   // 数据库实例表信息
+    columnsMap: Map<string, any> = new Map  // table -> columns
+    tableHints: any = null // 提示词
+
+    /**
+     * 获取指定表列信息（前提需要dbInst.loadColumns）
+     * @param table 表名
+     */
+    getColumns(table: string) {
+        return this.columnsMap.get(table);
+    }
+
+    /**
+    * 获取指定表中的指定列名信息，若列名为空则默认返回主键
+    * @param table 表名
+    * @param columnName 列名
+    */
+    getColumn(table: string, columnName: string = '') {
+        const cols = this.getColumns(table);
+        if (!columnName) {
+            const col = cols.find((c: any) => c.columnKey == 'PRI');
+            return col || cols[0];
+        }
+        return cols.find((c: any) => c.columnName == columnName);
+    }
+}
+
+export enum TabType {
+    /**
+     * 表数据
+     */
+    TableData,
+
+    /**
+     * 查询框
+     */
+    Query,
+}
+
+export class TabInfo {
+    /**
+     * tab唯一key。与label、name都一致
+     */
+    key: string
+
+    /**
+     * 菜单树节点key
+     */
+    treeNodeKey: string
+
+    /**
+     * 数据库实例id
+     */
+    dbId: number
+
+    /**
+     * 库名
+     */
+    db: string = ''
+
+    /**
+     * tab 类型
+     */
+    type: TabType
+
+    /**
+     * tab需要的其他信息
+     */
+    params: any
+
+    getNowDbInst() {
+        return DbInst.getInst(this.dbId);
+    }
+
+    getNowDb() {
+        return this.getNowDbInst().getDb(this.db);
+    }
+}
+
+/** 修改表字段所需数据 */
+export type UpdateFieldsMeta = {
+    // 主键值
+    primaryKey: string
+    // 主键名
+    primaryKeyName: string
+    // 主键类型
+    primaryKeyType: string
+    // 新值
+    fields: FieldsMeta[]
+}
+
+export type FieldsMeta = {
+    // 字段所在div
+    div: HTMLElement
+    // 字段名
+    fieldName: string
+    // 字段所在的表格行数据
+    row: any
+    // 字段类型
+    fieldType: string
+    // 原值
+    oldValue: string
+    // 新值
+    newValue: string
+}

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

@@ -7,5 +7,6 @@ export default {
     // 数据库sql执行类型
     DbSqlExecTypeEnum: new Enum().add('UPDATE', 'UPDATE', 1)
         .add('DELETE', 'DELETE', 2)
-        .add('INSERT', 'INSERT', 3),
+        .add('INSERT', 'INSERT', 3)
+        .add('QUERY', 'QUERY', 4),
 }

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

@@ -1,3 +1,5 @@
-export const TYPE_LIST = ['bigint', 'binary', 'blob', 'char', 'datetime', 'decimal', 'double', 'enum', 'float', 'int', 'json', 'longblob', 'longtext', 'mediumblob', 'mediumtext', 'set', 'smallint', 'text', 'time', 'timestamp', 'tinyint', 'varbinary', 'varchar']
+export const TYPE_LIST = ['bigint', 'binary', 'blob', 'char', 'datetime', 'date', 'decimal', 'double', 'enum', 'float', 'int', 'json', 'longblob', 'longtext', 'mediumblob', 'mediumtext', 'set', 'smallint', 'text', 'time', 'timestamp', 'tinyint', 'varbinary', 'varchar']
 
-export const CHARACTER_SET_NAME_LIST = ['armscii8', 'ascii', 'big5', 'binary', 'cp1250', 'cp1251', 'cp1256', 'cp1257', 'cp850', 'cp852', 'cp866', 'cp932', 'dec8', 'eucjpms', 'euckr', 'gb18030', 'gb2312', 'gbk', 'geostd8', 'greek', 'hebrew', 'hp8', 'keybcs2', 'koi8r', 'koi8u', 'latin1', 'latin2', 'latin5', 'latin7', 'macce', 'macroman', 'sjis', 'swe7', 'tis620', 'ucs2', 'ujis', 'utf16', 'utf16le', 'utf32', 'utf8', 'utf8mb4']
+export const CHARACTER_SET_NAME_LIST = ['armscii8', 'ascii', 'big5', 'binary', 'cp1250', 'cp1251', 'cp1256', 'cp1257', 'cp850', 'cp852', 'cp866', 'cp932', 'dec8', 'eucjpms', 'euckr', 'gb18030', 'gb2312', 'gbk', 'geostd8', 'greek', 'hebrew', 'hp8', 'keybcs2', 'koi8r', 'koi8u', 'latin1', 'latin2', 'latin5', 'latin7', 'macce', 'macroman', 'sjis', 'swe7', 'tis620', 'ucs2', 'ujis', 'utf16', 'utf16le', 'utf32', 'utf8', 'utf8mb4']
+
+export const COLLATION_SUFFIX_LIST = ['unicode_ci', 'bin', 'croatian_ci', 'czech_ci', 'danish_ci', 'esperanto_ci', 'estonian_ci', 'general_ci', 'german2_ci', 'hungarian_ci', 'icelandic_ci', 'latvian_ci', 'lithuanian_ci', 'persian_ci', 'polish_ci', 'roman_ci', 'romanian_ci', 'sinhala_ci', 'slovak_ci', 'slovenian_ci', 'spanish2_ci', 'spanish_ci', 'swedish_ci', 'turkish_ci', 'unicode_520_ci', 'vietnamese_ci']

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

@@ -1,82 +1,73 @@
 <template>
     <div>
-        <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :destroy-on-close="true" :before-close="cancel" width="38%">
+        <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :destroy-on-close="true"
+            :before-close="cancel" width="650px">
             <el-form :model="form" ref="machineForm" :rules="rules" label-width="85px">
-                <el-form-item prop="projectId" label="项目:" required>
-                    <el-select style="width: 100%" v-model="form.projectId" placeholder="请选择项目" @change="changeProject" filterable>
-                        <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
-                <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="ip" label="ip:" required>
-                    <el-col :span="18">
-                        <el-input :disabled="form.id" v-model.trim="form.ip" 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="authMethod" label="认证方式:" required>
-                    <el-select style="width: 100%" v-model="form.authMethod" placeholder="请选择认证方式">
-                        <el-option key="1" label="Password" :value="1"> </el-option>
-                        <el-option key="2" label="PublicKey" :value="2"> </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item v-if="form.authMethod == 1" 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="getPwd" :underline="false" type="primary" class="mr5">原密码</el-link>
-                                </template>
-                            </el-popover>
-                        </template>
-                    </el-input>
-                </el-form-item>
-                <el-form-item v-if="form.authMethod == 2" prop="password" label="秘钥:">
-                    <el-input type="textarea" :rows="3" v-model="form.password" placeholder="请将私钥文件内容拷贝至此，修改操作可不填"></el-input>
-                </el-form-item>
-                <el-form-item prop="remark" label="备注:">
-                    <el-input type="textarea" v-model="form.remark"></el-input>
-                </el-form-item>
+                <el-tabs v-model="tabActiveName">
+                    <el-tab-pane label="基础信息" name="basic">
+                        <el-form-item prop="tagId" label="标签:" required :rules="{
+                            required: true,
+                            message: '请选择标签',
+                            trigger: ['change', 'blur'],
+                        }">
+                            <tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
+                        </el-form-item>
+                        <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="ip" label="ip:" required>
+                            <el-col :span="18">
+                                <el-input :disabled="form.id" v-model.trim="form.ip" 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="enableRecorder" label="终端回放:">
-                    <el-checkbox v-model="form.enableRecorder" :true-label="1" :false-label="-1"></el-checkbox>
-                </el-form-item>
+                        <el-form-item prop="username" label="用户名:">
+                            <el-input v-model.trim="form.username" placeholder="请输授权用户名" autocomplete="new-password">
+                            </el-input>
+                        </el-form-item>
 
-                <el-form-item prop="enableSshTunnel" label="SSH隧道:">
-                    <el-col :span="3">
-                        <el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
-                    </el-col>
-                    <el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
-                    <el-col :span="19" v-if="form.enableSshTunnel == 1">
-                        <el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
-                            <el-option
-                                v-for="item in sshTunnelMachineList"
-                                :key="item.id"
-                                :label="`${item.ip}:${item.port} [${item.name}]`"
-                                :value="item.id"
-                            >
-                            </el-option>
-                        </el-select>
-                    </el-col>
-                </el-form-item>
+                        <el-form-item label="认证方式:">
+                            <el-select @change="changeAuthMethod" style="width: 100%" v-model="state.authType"
+                                placeholder="请选认证方式">
+                                <el-option key="1" label="密码" :value="1"> </el-option>
+                                <el-option key="2" label="授权凭证" :value="2"> </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item v-if="state.authType == 1" prop="password" label="密码:">
+                            <el-input type="password" show-password v-model.trim="form.password" placeholder="请输入密码"
+                                autocomplete="new-password">
+                            </el-input>
+                        </el-form-item>
+
+                        <el-form-item v-if="state.authType == 2" prop="authCertId" label="授权凭证:" required>
+                            <auth-cert-select ref="authCertSelectRef" v-model="form.authCertId" />
+                        </el-form-item>
+
+                        <el-form-item prop="remark" label="备注:">
+                            <el-input type="textarea" v-model="form.remark"></el-input>
+                        </el-form-item>
+                    </el-tab-pane>
+
+                    <el-tab-pane label="其他配置" name="other">
+                        <el-form-item prop="enableRecorder" label="终端回放:">
+                            <el-checkbox v-model="form.enableRecorder" :true-label="1" :false-label="-1"></el-checkbox>
+                        </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>
+                    <el-button @click="testConn" :loading="testConnBtnLoading" type="success">测试连接</el-button>
                     <el-button @click="cancel()">取 消</el-button>
                     <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
                 </div>
@@ -85,185 +76,194 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
 import { machineApi } 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';
+import AuthCertSelect from './authcert/AuthCertSelect.vue'
 
-export default defineComponent({
-    name: 'MachineEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        projects: {
-            type: Array,
-        },
-        machine: {
-            type: [Boolean, Object],
-        },
-        title: {
-            type: String,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const machineForm: any = ref(null);
-        const state = reactive({
-            dialogVisible: false,
-            projects: [],
-            sshTunnelMachineList: [],
-            form: {
-                id: null,
-                projectId: null,
-                projectName: null,
-                name: null,
-                authMethod: 1,
-                port: 22,
-                username: '',
-                password: '',
-                remark: '',
-                enableSshTunnel: null,
-                sshTunnelMachineId: null,
-                enableRecorder: -1,
-            },
-            pwd: '',
-            btnLoading: false,
-            rules: {
-                projectId: [
-                    {
-                        required: true,
-                        message: '请选择项目',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                envId: [
-                    {
-                        required: true,
-                        message: '请选择环境',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                name: [
-                    {
-                        required: true,
-                        message: '请输入别名',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                ip: [
-                    {
-                        required: true,
-                        message: '请输入主机ip和端口',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                username: [
-                    {
-                        required: true,
-                        message: '请输入用户名',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                authMethod: [
-                    {
-                        required: true,
-                        message: '请选择认证方式',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-            },
-        });
+    machine: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+})
 
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-            if (!state.dialogVisible) {
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入别名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    ip: [
+        {
+            required: true,
+            message: '请输入主机ip和端口',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    authCertId: [
+        {
+            required: true,
+            message: '请选择授权凭证',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    username: [
+        {
+            required: true,
+            message: '请输入授权用户名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    password: [
+        {
+            required: true,
+            message: '请输入授权密码',
+            trigger: ['change', 'blur'],
+        },
+    ],
+}
+
+const machineForm: any = ref(null);
+const authCertSelectRef: any = ref(null);
+
+const state = reactive({
+    dialogVisible: false,
+    tabActiveName: 'basic',
+    sshTunnelMachineList: [] as any,
+    authCerts: [] as any,
+    authType: 1,
+    form: {
+        id: null,
+        ip: null,
+        port: 22,
+        name: null,
+        authCertId: null as any,
+        username: '',
+        password: '',
+        tagId: null as any,
+        tagPath: null as any,
+        remark: '',
+        sshTunnelMachineId: null as any,
+        enableRecorder: -1,
+    },
+    pwd: '',
+    testConnBtnLoading: false,
+    btnLoading: false,
+});
+
+const {
+    dialogVisible,
+    tabActiveName,
+    form,
+    testConnBtnLoading,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, async (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (!state.dialogVisible) {
+        return;
+    }
+    state.tabActiveName = 'basic';
+    if (newValue.machine) {
+        state.form = { ...newValue.machine };
+        // 如果凭证类型为公共的，则表示使用授权凭证认证
+        const authCertId = (state.form as any).authCertId
+        if (authCertId > 0) {
+            state.authType = 2;
+        } else {
+            state.authType = 1;
+        }
+    } else {
+        state.form = { port: 22 } as any;
+        state.authType = 1;
+    }
+});
+
+const changeAuthMethod = (val: any) => {
+    if (state.form.id) {
+        if (val == 2) {
+            state.form.authCertId = null;
+        } else {
+            state.form.password = '';
+        }
+    }
+}
+
+const testConn = async () => {
+    machineForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            const form = getReqForm();
+            if (!form) {
                 return;
             }
-            state.projects = newValue.projects;
-            if (newValue.machine) {
-                state.form = { ...newValue.machine };
-            } else {
-                state.form = { port: 22, authMethod: 1 } as any;
+            state.testConnBtnLoading = true;
+            try {
+                await machineApi.testConn.request(form);
+                ElMessage.success('连接成功');
+            } finally {
+                state.testConnBtnLoading = false;
             }
-            getSshTunnelMachines();
-        });
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+}
 
-        const getSshTunnelMachines = async () => {
-            if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
-                const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
-                state.sshTunnelMachineList = res.list;
+const btnOk = async () => {
+    machineForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            const form = getReqForm();
+            if (!form) {
+                return;
             }
-        };
-
-        const getSshTunnelMachine = (machineId: any) => {
-            notBlank(machineId, '请选择或先创建一台隧道机器');
-            return state.sshTunnelMachineList.find((x: any) => x.id == machineId);
-        };
-
-        const getPwd = async () => {
-            state.pwd = await machineApi.getMachinePwd.request({ id: state.form.id });
-        };
-
-        const changeProject = (projectId: number) => {
-            for (let p of state.projects as any) {
-                if (p.id == projectId) {
-                    state.form.projectName = p.name;
-                }
+            state.btnLoading = true;
+            try {
+                await machineApi.saveMachine.request(form);
+                ElMessage.success('保存成功');
+                emit('val-change', form);
+                cancel();
+            } finally {
+                state.btnLoading = false;
             }
-        };
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+};
 
-        const btnOk = async () => {
-            if (!state.form.id) {
-                notBlank(state.form.password, '新增操作，密码不可为空');
-            }
-            machineForm.value.validate(async (valid: boolean) => {
-                if (valid) {
-                    const form: any = state.form;
-                    if (form.enableSshTunnel == 1) {
-                        const tunnelMachine: any = getSshTunnelMachine(form.sshTunnelMachineId);
-                        if (tunnelMachine.ip == form.ip && tunnelMachine.port == form.port) {
-                            ElMessage.error('隧道机器不能与本机器一致');
-                            return;
-                        }
-                    }
-                    const reqForm: any = { ...form };
-                    if (reqForm.authMethod == 1) {
-                        reqForm.password = await RsaEncrypt(state.form.password);
-                    }
-                    state.btnLoading = true;
-                    try {
-                        await machineApi.saveMachine.request(reqForm);
-                        ElMessage.success('保存成功');
-                        emit('val-change', state.form);
-                        cancel();
-                    } finally {
-                        state.btnLoading = false;
-                    }
-                } else {
-                    ElMessage.error('请正确填写信息');
-                    return false;
-                }
-            });
-        };
+const getReqForm = () => {
+    const reqForm: any = { ...state.form };
+    debugger
+    // 如果为密码认证，则置空授权凭证id
+    if (state.authType == 1) {
+        reqForm.authCertId = -1;
+    }
+    if (!state.form.sshTunnelMachineId || state.form.sshTunnelMachineId <= 0) {
+        reqForm.sshTunnelMachineId = -1
+    }
+    return reqForm
+}
 
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-        };
-
-        return {
-            ...toRefs(state),
-            machineForm,
-            getSshTunnelMachines,
-            getPwd,
-            changeProject,
-            btnOk,
-            cancel,
-        };
-    },
-});
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
 </script>
-<style lang="scss">
-</style>
+<style lang="scss"></style>

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

@@ -2,33 +2,21 @@
     <div>
         <el-card>
             <div>
-                <el-button v-auth="'machine:add'" type="primary" icon="plus" @click="openFormDialog(false)" plain>添加</el-button>
-                <el-button
-                    v-auth="'machine:update'"
-                    type="primary"
-                    icon="edit"
-                    :disabled="currentId == null"
-                    @click="openFormDialog(currentData)"
-                    plain
-                    >编辑</el-button
-                >
-                <el-button v-auth="'machine:del'" :disabled="currentId == null" @click="deleteMachine(currentId)" type="danger" icon="delete"
-                    >删除</el-button
-                >
+                <el-button v-auth="'machine:add'" type="primary" icon="plus" @click="openFormDialog(false)" plain>添加
+                </el-button>
+                <el-button v-auth="'machine:update'" type="primary" icon="edit" :disabled="!currentId"
+                    @click="openFormDialog(currentData)" plain>编辑</el-button>
+                <el-button v-auth="'machine:del'" :disabled="!currentId" @click="deleteMachine(currentId)" type="danger"
+                    icon="delete">删除</el-button>
                 <div style="float: right">
-                    <el-select @focus="getProjects" v-model="params.projectId" placeholder="请选择项目" @clear="search" filterable clearable>
-                        <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
+                    <el-select @focus="getTags" v-model="params.tagPath" placeholder="请选择标签" @clear="search" filterable
+                        clearable>
+                        <el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
                     </el-select>
-                    <el-input
-                        class="ml5"
-                        placeholder="请输入名称"
-                        style="width: 150px"
-                        v-model="params.name"
-                        @clear="search"
-                        plain
-                        clearable
-                    ></el-input>
-                    <el-input class="ml5" placeholder="请输入ip" style="width: 150px" v-model="params.ip" @clear="search" plain clearable></el-input>
+                    <el-input class="ml5" placeholder="请输入名称" style="width: 150px" v-model="params.name" @clear="search"
+                        plain clearable></el-input>
+                    <el-input class="ml5" placeholder="请输入ip" style="width: 150px" v-model="params.ip" @clear="search" plain
+                        clearable></el-input>
                     <el-button class="ml5" @click="search" type="success" icon="search"></el-button>
                 </div>
             </div>
@@ -41,358 +29,374 @@
                         </el-radio>
                     </template>
                 </el-table-column>
+                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                        <tag-info :tag-path="scope.row.tagPath" />
+                        <span class="ml5">
+                            {{ scope.row.tagPath }}
+                        </span>
+                    </template>
+                </el-table-column>
                 <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip></el-table-column>
+
                 <el-table-column prop="ip" label="ip:port" min-width="150">
                     <template #default="scope">
-                        <el-link :disabled="scope.row.status == -1" @click="showMachineStats(scope.row)" type="primary" :underline="false">{{
-                            `${scope.row.ip}:${scope.row.port}`
-                        }}</el-link>
+                        <el-link :disabled="scope.row.status == -1" @click="showMachineStats(scope.row)" type="primary"
+                            :underline="false">
+                            {{ `${scope.row.ip}:${scope.row.port}` }}
+                        </el-link>
                     </template>
                 </el-table-column>
-                <el-table-column prop="status" label="状态" min-width="75">
+
+                <el-table-column prop="username" label="用户名" min-width="100">
+                </el-table-column>
+
+                <el-table-column prop="status" label="状态" min-width="80">
                     <template #default="scope">
-                        <el-switch
-                            v-auth:disabled="'machine:update'"
-                            :width="47"
-                            v-model="scope.row.status"
-                            :active-value="1"
-                            :inactive-value="-1"
-                            inline-prompt
-                            active-text="启用"
-                            inactive-text="停用"
+                        <el-switch v-auth:disabled="'machine:update'" :width="52" v-model="scope.row.status"
+                            :active-value="1" :inactive-value="-1" inline-prompt active-text="启用" inactive-text="停用"
                             style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-                            @change="changeStatus(scope.row)"
-                        ></el-switch>
+                            @change="changeStatus(scope.row)"></el-switch>
                     </template>
                 </el-table-column>
-                <el-table-column prop="username" label="用户名" min-width="90"></el-table-column>
-                <el-table-column prop="projectName" label="项目" min-width="120"></el-table-column>
+
                 <el-table-column prop="remark" label="备注" min-width="250" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createTime" label="创建时间" min-width="165">
-                    <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
-                    </template>
-                </el-table-column>
-                <el-table-column prop="creator" label="创建者" min-width="80"></el-table-column>
-                <el-table-column label="操作" min-width="335" fixed="right">
+
+                <el-table-column label="操作" min-width="235" fixed="right">
                     <template #default="scope">
                         <span v-auth="'machine:terminal'">
-                            <el-link
-                                :disabled="scope.row.status == -1"
-                                type="primary"
-                                @click="showTerminal(scope.row)"
-                                plain
-                                size="small"
-                                :underline="false"
-                                >终端</el-link
-                            >
-                            <el-divider direction="vertical" border-style="dashed" />
-                        </span>
-
-                        <span v-auth="'machine:update'" v-if="scope.row.enableRecorder == 1">
-                            <el-link @click="showRec(scope.row)" plain :underline="false" size="small">终端回放</el-link>
+                            <el-link :disabled="scope.row.status == -1" type="primary" @click="showTerminal(scope.row)"
+                                plain size="small" :underline="false">终端</el-link>
                             <el-divider direction="vertical" border-style="dashed" />
                         </span>
 
                         <span v-auth="'machine:file'">
-                            <el-link
-                                type="success"
-                                :disabled="scope.row.status == -1"
-                                @click="fileManage(scope.row)"
-                                plain
-                                size="small"
-                                :underline="false"
-                                >文件</el-link
-                            >
+                            <el-link type="success" :disabled="scope.row.status == -1" @click="showFileManage(scope.row)"
+                                plain size="small" :underline="false">文件</el-link>
                             <el-divider direction="vertical" border-style="dashed" />
                         </span>
 
-                        <el-link
-                            :disabled="scope.row.status == -1"
-                            type="warning"
-                            @click="serviceManager(scope.row)"
-                            plain
-                            size="small"
-                            :underline="false"
-                            >脚本</el-link
-                        >
+                        <el-link :disabled="scope.row.status == -1" type="warning" @click="serviceManager(scope.row)" plain
+                            size="small" :underline="false">脚本</el-link>
                         <el-divider direction="vertical" border-style="dashed" />
 
-                        <el-link @click="showProcess(scope.row)" :disabled="scope.row.status == -1" plain :underline="false" size="small"
-                            >进程</el-link
-                        >
-                        <el-divider direction="vertical" border-style="dashed" />
+                        <el-dropdown>
+                            <span class="el-dropdown-link-machine-list">
+                                更多
+                                <el-icon class="el-icon--right">
+                                    <arrow-down />
+                                </el-icon>
+                            </span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>
+                                        <el-link @click="showInfo(scope.row)" plain :underline="false" size="small">详情
+                                        </el-link>
+                                    </el-dropdown-item>
 
-                        <el-link
-                            :disabled="!scope.row.hasCli || scope.row.status == -1"
-                            type="danger"
-                            @click="closeCli(scope.row)"
-                            plain
-                            size="small"
-                            :underline="false"
-                            >关闭连接</el-link
-                        >
+                                    <el-dropdown-item>
+                                        <el-link @click="showProcess(scope.row)" :disabled="scope.row.status == -1" plain
+                                            :underline="false" size="small">进程</el-link>
+                                    </el-dropdown-item>
+
+                                    <el-dropdown-item v-if="scope.row.enableRecorder == 1">
+                                        <el-link v-auth="'machine:update'" @click="showRec(scope.row)" plain
+                                            :underline="false" size="small">终端回放</el-link>
+                                    </el-dropdown-item>
+
+                                    <el-dropdown-item>
+                                        <el-link :disabled="!scope.row.hasCli || scope.row.status == -1" type="danger"
+                                            @click="closeCli(scope.row)" plain size="small" :underline="false">关闭连接
+                                        </el-link>
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
                     </template>
                 </el-table-column>
             </el-table>
             <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: right"
-                    :total="data.total"
-                    layout="prev, pager, next, total, jumper"
-                    v-model:current-page="params.pageNum"
-                    :page-size="params.pageSize"
-                    @current-change="handlePageChange"
-                ></el-pagination>
+                <el-pagination style="text-align: right" :total="data.total" layout="prev, pager, next, total, jumper"
+                    v-model:current-page="params.pageNum" :page-size="params.pageSize"
+                    @current-change="handlePageChange"></el-pagination>
             </el-row>
         </el-card>
 
-        <machine-edit
-            :title="machineEditDialog.title"
-            :projects="projects"
-            v-model:visible="machineEditDialog.visible"
-            v-model:machine="machineEditDialog.data"
-            @valChange="submitSuccess"
-        ></machine-edit>
+        <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="1.5" label="名称">{{ infoDialog.data.name }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="标签路径">{{ infoDialog.data.tagPath }}</el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="IP">{{ infoDialog.data.ip }}</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.authCertId > 1 ? '授权凭证' : '密码' }}
+                </el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="备注">{{ infoDialog.data.remark }}</el-descriptions-item>
+
+                <el-descriptions-item :span="1.5" label="SSH隧道">{{ infoDialog.data.sshTunnelMachineId > 0 ? '是' : '否' }}
+                </el-descriptions-item>
+                <el-descriptions-item :span="1.5" label="终端回放">{{ infoDialog.data.enableRecorder == 1 ? '是' : '否' }}
+                </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>
+
+        <machine-edit :title="machineEditDialog.title" v-model:visible="machineEditDialog.visible"
+            v-model:machine="machineEditDialog.data" @valChange="submitSuccess"></machine-edit>
 
         <process-list v-model:visible="processDialog.visible" v-model:machineId="processDialog.machineId" />
 
-        <service-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible" v-model:machineId="serviceDialog.machineId" />
+        <service-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-manage :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>
+        <machine-stats v-model:visible="machineStatsDialog.visible" :machineId="machineStatsDialog.machineId"
+            :title="machineStatsDialog.title"></machine-stats>
+
+        <machine-rec v-model:visible="machineRecDialog.visible" :machineId="machineRecDialog.machineId"
+            :title="machineRecDialog.title"></machine-rec>
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { machineApi } from './api';
-import { projectApi } from '../project/api.ts';
+import { tagApi } from '../tag/api.ts';
 import ServiceManage from './ServiceManage.vue';
 import FileManage from './FileManage.vue';
 import MachineEdit from './MachineEdit.vue';
 import ProcessList from './ProcessList.vue';
 import MachineStats from './MachineStats.vue';
+import MachineRec from './MachineRec.vue';
+import { dateFormat } from '@/common/utils/date';
+import TagInfo from '../component/TagInfo.vue';
 
-export default defineComponent({
-    name: 'MachineList',
-    components: {
-        ServiceManage,
-        ProcessList,
-        FileManage,
-        MachineEdit,
-        MachineStats,
+const router = useRouter();
+const state = reactive({
+    tags: [] as any,
+    params: {
+        pageNum: 1,
+        pageSize: 10,
+        ip: null,
+        name: null,
+        tagPath: null,
     },
-    setup() {
-        const router = useRouter();
-        const state = reactive({
-            projects: [],
-            stats: '',
-            params: {
-                pageNum: 1,
-                pageSize: 10,
-                ip: null,
-                name: null,
-            },
-            // 列表数据
-            data: {
-                list: [],
-                total: 10,
-            },
-            // 当前选中数据id
-            currentId: null,
-            currentData: null,
-            serviceDialog: {
-                visible: false,
-                machineId: 0,
-                title: '',
-            },
-            processDialog: {
-                visible: false,
-                machineId: 0,
-            },
-            fileDialog: {
-                visible: false,
-                machineId: 0,
-                title: '',
-            },
-            machineStatsDialog: {
-                visible: false,
-                stats: null,
-                title: '',
-                machineId: 0,
-            },
-            machineEditDialog: {
-                visible: false,
-                data: null,
-                title: '新增机器',
-            },
-            machineRecDialog: {
-                visible: false,
-                machineId: 0,
-                title: '',
-            },
-        });
-
-        onMounted(async () => {
-            search();
-        });
-
-        const choose = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.currentId = item.id;
-            state.currentData = item;
-        };
-
-        const showTerminal = (row: any) => {
-            const { href } = router.resolve({
-                path: `/machine/terminal`,
-                query: {
-                    id: row.id,
-                    name: row.name,
-                },
-            });
-            window.open(href, '_blank');
-        };
-
-        const closeCli = async (row: any) => {
-            await ElMessageBox.confirm(`确定关闭该机器客户端连接?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            });
-            await machineApi.closeCli.request({ id: row.id });
-            ElMessage.success('关闭成功');
-            search();
-        };
-
-        const getProjects = async () => {
-            state.projects = await projectApi.accountProjects.request(null);
-        };
-
-        const openFormDialog = async (machine: any) => {
-            await getProjects();
-            let dialogTitle;
-            if (machine) {
-                state.machineEditDialog.data = state.currentData as any;
-                dialogTitle = '编辑机器';
-            } else {
-                state.machineEditDialog.data = null;
-                dialogTitle = '添加机器';
-            }
-
-            state.machineEditDialog.title = dialogTitle;
-            state.machineEditDialog.visible = true;
-        };
-
-        const deleteMachine = async (id: number) => {
-            try {
-                await ElMessageBox.confirm(`确定删除该机器信息? 该操作将同时删除脚本及文件配置信息`, '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                });
-                await machineApi.del.request({ id });
-                ElMessage.success('操作成功');
-                state.currentId = null;
-                state.currentData = null;
-                search();
-            } catch (err) {}
-        };
-
-        const serviceManager = (row: any) => {
-            state.serviceDialog.machineId = row.id;
-            state.serviceDialog.visible = true;
-            state.serviceDialog.title = `${row.name} => ${row.ip}`;
-        };
-
-        /**
-         * 调整机器状态
-         */
-        const changeStatus = async (row: any) => {
-            await machineApi.changeStatus.request({ id: row.id, status: row.status });
-        };
-
-        /**
-         * 显示机器状态统计信息
-         */
-        const showMachineStats = async (machine: any) => {
-            state.machineStatsDialog.machineId = machine.id;
-            state.machineStatsDialog.title = `机器状态: ${machine.name} => ${machine.ip}`;
-            state.machineStatsDialog.visible = true;
-        };
-
-        const submitSuccess = () => {
-            state.currentId = null;
-            state.currentData = null;
-            search();
-        };
-
-        const fileManage = (currentData: any) => {
-            state.fileDialog.visible = true;
-            state.fileDialog.machineId = currentData.id;
-            state.fileDialog.title = `${currentData.name} => ${currentData.ip}`;
-        };
-
-        const search = async () => {
-            const res = await machineApi.list.request(state.params);
-            state.data = res;
-        };
-
-        const handlePageChange = (curPage: number) => {
-            state.params.pageNum = curPage;
-            search();
-        };
-
-        const showProcess = (row: any) => {
-            state.processDialog.machineId = row.id;
-            state.processDialog.visible = true;
-        };
-
-        const showRec = (row: any) => {
-            const { href } = router.resolve({
-                path: `/machine/terminal-rec`,
-                query: {
-                    id: row.id,
-                    name: `${row.name}[${row.ip}]-终端回放记录`,
-                },
-            });
-            window.open(href, '_blank');
-        };
-
-        return {
-            ...toRefs(state),
-            choose,
-            getProjects,
-            showTerminal,
-            openFormDialog,
-            deleteMachine,
-            closeCli,
-            serviceManager,
-            showMachineStats,
-            showProcess,
-            changeStatus,
-            submitSuccess,
-            fileManage,
-            search,
-            showRec,
-            handlePageChange,
-        };
+    // 列表数据
+    data: {
+        list: [],
+        total: 10,
+    },
+    infoDialog: {
+        visible: false,
+        data: null as any,
+    },
+    // 当前选中数据id
+    currentId: 0,
+    currentData: null,
+    serviceDialog: {
+        visible: false,
+        machineId: 0,
+        title: '',
+    },
+    processDialog: {
+        visible: false,
+        machineId: 0,
+    },
+    fileDialog: {
+        visible: false,
+        machineId: 0,
+        title: '',
+    },
+    machineStatsDialog: {
+        visible: false,
+        stats: null,
+        title: '',
+        machineId: 0,
+    },
+    machineEditDialog: {
+        visible: false,
+        data: null as any,
+        title: '新增机器',
+    },
+    machineRecDialog: {
+        visible: false,
+        machineId: 0,
+        title: '',
     },
 });
+
+const {
+    tags,
+    params,
+    data,
+    infoDialog,
+    currentId,
+    currentData,
+    serviceDialog,
+    processDialog,
+    fileDialog,
+    machineStatsDialog,
+    machineEditDialog,
+    machineRecDialog,
+} = toRefs(state)
+
+onMounted(async () => {
+    search();
+});
+
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.currentId = item.id;
+    state.currentData = item;
+};
+
+const showTerminal = (row: any) => {
+    const { href } = router.resolve({
+        path: `/machine/terminal`,
+        query: {
+            id: row.id,
+            name: row.name,
+        },
+    });
+    window.open(href, '_blank');
+};
+
+const closeCli = async (row: any) => {
+    await ElMessageBox.confirm(`确定关闭该机器客户端连接?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    });
+    await machineApi.closeCli.request({ id: row.id });
+    ElMessage.success('关闭成功');
+    search();
+};
+
+const getTags = async () => {
+    state.tags = await tagApi.getAccountTags.request(null);
+};
+
+const openFormDialog = async (machine: any) => {
+    let dialogTitle;
+    if (machine) {
+        state.machineEditDialog.data = state.currentData as any;
+        dialogTitle = '编辑机器';
+    } else {
+        state.machineEditDialog.data = null;
+        dialogTitle = '添加机器';
+    }
+
+    state.machineEditDialog.title = dialogTitle;
+    state.machineEditDialog.visible = true;
+};
+
+const deleteMachine = async (id: number) => {
+    try {
+        await ElMessageBox.confirm(`确定删除该机器信息? 该操作将同时删除脚本及文件配置信息`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await machineApi.del.request({ id });
+        ElMessage.success('操作成功');
+        state.currentId = 0;
+        state.currentData = null;
+        search();
+    } catch (err) { }
+};
+
+const serviceManager = (row: any) => {
+    state.serviceDialog.machineId = row.id;
+    state.serviceDialog.visible = true;
+    state.serviceDialog.title = `${row.name} => ${row.ip}`;
+};
+
+/**
+ * 调整机器状态
+ */
+const changeStatus = async (row: any) => {
+    await machineApi.changeStatus.request({ id: row.id, status: row.status });
+};
+
+/**
+ * 显示机器状态统计信息
+ */
+const showMachineStats = async (machine: any) => {
+    state.machineStatsDialog.machineId = machine.id;
+    state.machineStatsDialog.title = `机器状态: ${machine.name} => ${machine.ip}`;
+    state.machineStatsDialog.visible = true;
+};
+
+const submitSuccess = () => {
+    state.currentId = 0;
+    state.currentData = null;
+    search();
+};
+
+const showFileManage = (currentData: any) => {
+    state.fileDialog.visible = true;
+    state.fileDialog.machineId = currentData.id;
+    state.fileDialog.title = `${currentData.name} => ${currentData.ip}`;
+};
+
+const search = async () => {
+    const res = await machineApi.list.request(state.params);
+    state.data = res;
+};
+
+const handlePageChange = (curPage: number) => {
+    state.params.pageNum = curPage;
+    search();
+};
+
+const showInfo = (info: any) => {
+    state.infoDialog.data = info;
+    state.infoDialog.visible = true;
+}
+
+const showProcess = (row: any) => {
+    state.processDialog.machineId = row.id;
+    state.processDialog.visible = true;
+};
+
+const showRec = (row: any) => {
+    state.machineRecDialog.title = `${row.name}[${row.ip}]-终端回放记录`;
+    state.machineRecDialog.machineId = row.id;
+    state.machineRecDialog.visible = true;
+};
 </script>
 
 <style>
 .el-dialog__body {
     padding: 2px 2px;
 }
+
+.el-dropdown-link-machine-list {
+    cursor: pointer;
+    color: var(--el-color-primary);
+    display: flex;
+    align-items: center;
+    margin-top: 6px;
+}
 </style>

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

@@ -1,120 +1,130 @@
 <template>
-    <div>
-        <div class="toolbar">
-            <span style="dispaly: inline-block" class="ml10">{{ title }}</span>
-            <el-divider direction="vertical" border-style="dashed" />
-            <el-select @change="getUsers" v-model="operateDate" placeholder="操作日期" filterable>
-                <el-option v-for="item in operateDates" :key="item" :label="item" :value="item"> </el-option>
-            </el-select>
-            <el-select class="ml10" @change="getRecs" filterable v-model="user" placeholder="请选择操作人">
-                <el-option v-for="item in users" :key="item" :label="item" :value="item"> </el-option>
-            </el-select>
-            <el-select class="ml10" @change="playRec" filterable v-model="rec" placeholder="请选择操作记录">
-                <el-option v-for="item in recs" :key="item" :label="item" :value="item"> </el-option>
-            </el-select>
-            <el-divider direction="vertical" border-style="dashed" />
-            快捷键-> space[空格键]: 暂停/播放  |  f: 全屏/取消全屏
-        </div>
-        <div ref="playerRef" id="rc-player"></div>
+    <div id="terminalRecDialog">
+        <el-dialog :title="title" 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>
+                </el-select>
+                <el-select class="ml10" @change="getRecs" filterable v-model="user" placeholder="请选择操作人">
+                    <el-option v-for="item in users" :key="item" :label="item" :value="item"> </el-option>
+                </el-select>
+                <el-select class="ml10" @change="playRec" filterable v-model="rec" placeholder="请选择操作记录">
+                    <el-option v-for="item in recs" :key="item" :label="item" :value="item"> </el-option>
+                </el-select>
+                <el-divider direction="vertical" border-style="dashed" />
+                快捷键-> space[空格键]: 暂停/播放
+            </div>
+            <div ref="playerRef" id="rc-player"></div>
+        </el-dialog>
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, onMounted, ref, reactive, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { toRefs, watch, ref, reactive } from 'vue';
 import { machineApi } from './api';
 import * as AsciinemaPlayer from 'asciinema-player';
 import 'asciinema-player/dist/bundle/asciinema-player.css';
-import { useRoute } from 'vue-router';
-export default defineComponent({
-    name: 'MachineRec',
-    components: {},
-    props: {
-        visible: { type: Boolean },
-        machineId: { type: Number },
-        title: { type: String },
-    },
-    setup(props: any, context) {
-        const route = useRoute();
-        const playerRef = ref(null);
-        const state = reactive({
-            dialogVisible: false,
-            title: '',
-            machineId: 0,
-            operateDates: [],
-            users: [],
-            recs: [],
-            operateDate: '',
-            user: '',
-            rec: '',
-        });
 
-        onMounted(() => {
-            state.machineId = Number.parseInt(route.query.id as string);
-            state.title = route.query.name as string;
-            getOperateDate();
-        });
+const props = defineProps({
+    visible: { type: Boolean },
+    machineId: { type: Number },
+    title: { type: String },
+})
 
-        const getOperateDate = async () => {
-            const res = await machineApi.recDirNames.request({ path: state.machineId });
-            state.operateDates = res as any;
-        };
+const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
 
-        const getUsers = async (operateDate: string) => {
-            state.users = [];
-            state.user = '';
-            state.recs = [];
-            state.rec = '';
-            const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${operateDate}` });
-            state.users = res as any;
-        };
-
-        const getRecs = async (user: string) => {
-            state.recs = [];
-            state.rec = '';
-            const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${state.operateDate}/${user}` });
-            state.recs = res as any;
-        };
-
-        let player: any = null;
-
-        const playRec = async (rec: string) => {
-            if (player) {
-                player.dispose();
-            }
-            const content = await machineApi.recDirNames.request({
-                isFile: '1',
-                path: `${state.machineId}/${state.operateDate}/${state.user}/${rec}`,
-            });
-            player = AsciinemaPlayer.create(`data:text/plain;base64,${content}`, playerRef.value, {
-                autoPlay: true,
-                speed: 1.0,
-                idleTimeLimit: 2,
-            });
-        };
-
-        /**
-         * 关闭取消按钮触发的事件
-         */
-        const handleClose = () => {
-            context.emit('update:visible', false);
-            context.emit('update:machineId', null);
-            context.emit('cancel');
-            state.operateDates = [];
-            state.users = [];
-            state.recs = [];
-            state.operateDate = '';
-            state.user = '';
-            state.rec = '';
-        };
-
-        return {
-            ...toRefs(state),
-            playerRef,
-            getUsers,
-            getRecs,
-            playRec,
-            handleClose,
-        };
-    },
+const playerRef = ref(null);
+const state = reactive({
+    dialogVisible: false,
+    title: '',
+    machineId: 0,
+    operateDates: [],
+    users: [],
+    recs: [],
+    operateDate: '',
+    user: '',
+    rec: '',
 });
+
+const {
+    dialogVisible,
+    title,
+    operateDates,
+    operateDate,
+    users,
+    recs,
+    user,
+    rec,
+} = toRefs(state)
+
+watch(props, async (newValue: any) => {
+    const visible = newValue.visible;
+    if (visible) {
+        state.machineId = newValue.machineId;
+        state.title = newValue.title;
+        await getOperateDate();
+    }
+    state.dialogVisible = visible;
+});
+
+const getOperateDate = async () => {
+    const res = await machineApi.recDirNames.request({ path: state.machineId });
+    state.operateDates = res as any;
+};
+
+const getUsers = async (operateDate: string) => {
+    state.users = [];
+    state.user = '';
+    state.recs = [];
+    state.rec = '';
+    const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${operateDate}` });
+    state.users = res as any;
+};
+
+const getRecs = async (user: string) => {
+    state.recs = [];
+    state.rec = '';
+    const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${state.operateDate}/${user}` });
+    state.recs = res as any;
+};
+
+let player: any = null;
+
+const playRec = async (rec: string) => {
+    if (player) {
+        player.dispose();
+    }
+    const content = await machineApi.recDirNames.request({
+        isFile: '1',
+        path: `${state.machineId}/${state.operateDate}/${state.user}/${rec}`,
+    });
+    player = AsciinemaPlayer.create(`data:text/plain;base64,${content}`, playerRef.value, {
+        autoPlay: true,
+        speed: 1.0,
+        idleTimeLimit: 2,
+    });
+};
+
+/**
+ * 关闭取消按钮触发的事件
+ */
+const handleClose = () => {
+    emit('update:visible', false);
+    emit('update:machineId', null);
+    emit('cancel');
+    state.operateDates = [];
+    state.users = [];
+    state.recs = [];
+    state.operateDate = '';
+    state.user = '';
+    state.rec = '';
+};
 </script>
+<style lang="scss">
+#terminalRecDialog {
+    .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
+        padding: 0px !important;
+    }
+}
+</style>

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

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="true" :destroy-on-close="true" :before-close="cancel" width="1050px">
+        <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="true" :destroy-on-close="true"
+            :before-close="cancel" width="1050px">
             <el-row :gutter="20">
                 <el-col :lg="12" :md="12">
                     <el-descriptions size="small" title="基础信息" :column="2" border>
@@ -19,7 +20,8 @@
                         <el-descriptions-item label="运行中任务">
                             {{ stats.RunningProcs }}
                         </el-descriptions-item>
-                        <el-descriptions-item label="负载"> {{ stats.Load1 }} {{ stats.Load5 }} {{ stats.Load10 }} </el-descriptions-item>
+                        <el-descriptions-item label="负载"> {{ stats.Load1 }} {{ stats.Load5 }} {{ stats.Load10 }}
+                        </el-descriptions-item>
                     </el-descriptions>
                 </el-col>
 
@@ -36,7 +38,8 @@
                 <el-col :lg="8" :md="8">
                     <span style="font-size: 16px; font-weight: 700">磁盘</span>
                     <el-table :data="stats.FSInfos" stripe max-height="250" style="width: 100%" border>
-                        <el-table-column prop="MountPoint" label="挂载点" min-width="100" show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="MountPoint" label="挂载点" min-width="100" show-overflow-tooltip>
+                        </el-table-column>
                         <el-table-column prop="Used" label="可使用" min-width="70" show-overflow-tooltip>
                             <template #default="scope">
                                 {{ formatByteSize(scope.row.Free) }}
@@ -54,8 +57,10 @@
                     <span style="font-size: 16px; font-weight: 700">网卡</span>
                     <el-table :data="netInter" stripe max-height="250" style="width: 100%" border>
                         <el-table-column prop="name" label="网卡" min-width="120" show-overflow-tooltip></el-table-column>
-                        <el-table-column prop="IPv4" label="IPv4" min-width="130" show-overflow-tooltip></el-table-column>
-                        <el-table-column prop="IPv6" label="IPv6" min-width="130" show-overflow-tooltip></el-table-column>
+                        <el-table-column prop="IPv4" label="IPv4" min-width="130" show-overflow-tooltip>
+                        </el-table-column>
+                        <el-table-column prop="IPv6" label="IPv6" min-width="130" show-overflow-tooltip>
+                        </el-table-column>
                         <el-table-column prop="Rx" label="接收(rx)" min-width="110" show-overflow-tooltip>
                             <template #default="scope">
                                 {{ formatByteSize(scope.row.Rx) }}
@@ -73,245 +78,240 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent, ref, nextTick } from 'vue';
+<script lang="ts"  setup>
+import { toRefs, reactive, watch, ref, nextTick } from 'vue';
 import useEcharts from '@/common/echarts/useEcharts.ts';
 import tdTheme from '@/common/echarts/theme.json';
 import { formatByteSize } from '@/common/utils/format';
 import { machineApi } from './api';
 
-export default defineComponent({
-    name: 'MachineStats',
-    components: {},
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        stats: {
-            type: Object,
-        },
-        machineId: {
-            type: Number,
-        },
-        title: {
-            type: String,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const cpuRef: any = ref();
-        const memRef: any = ref();
-
-        let cpuChart: any = null;
-        let memChart: any = null;
-
-        const state = reactive({
-            dialogVisible: false,
-            charts: [] as any,
-            stats: {} as any,
-            netInter: [] as any,
-        });
-
-        watch(props, async (newValue) => {
-            const visible = newValue.visible;
-            if (visible) {
-                await setStats();
-            }
-            state.dialogVisible = visible;
-            if (visible) {
-                initCharts();
-            }
-        });
-
-        const setStats = async () => {
-            state.stats = await machineApi.stats.request({ id: props.machineId });
-        };
-
-        const onRefresh = async () => {
-            await setStats();
-            initCharts();
-        };
-
-        const initMemStats = () => {
-            const data = [
-                { name: '可用内存', value: state.stats.MemAvailable },
-                {
-                    name: '已用内存',
-                    value: state.stats.MemTotal - state.stats.MemAvailable,
-                },
-            ];
-            const option = {
-                title: {
-                    text: '内存',
-                    x: 'left',
-                    textStyle: { fontSize: 15 },
-                },
-                tooltip: {
-                    trigger: 'item',
-                    valueFormatter: formatByteSize,
-                },
-                legend: {
-                    top: '15%',
-                    orient: 'vertical',
-                    left: 'left',
-                    textStyle: { fontSize: 12 },
-                },
-                series: [
-                    {
-                        name: '内存',
-                        type: 'pie',
-                        radius: ['30%', '60%'], // 饼图内圈和外圈大小
-                        center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
-                        avoidLabelOverlap: false,
-                        label: {
-                            show: false,
-                            position: 'center',
-                        },
-                        emphasis: {
-                            label: {
-                                show: true,
-                                fontSize: '15',
-                                fontWeight: 'bold',
-                            },
-                        },
-                        labelLine: {
-                            show: false,
-                        },
-                        data: data,
-                    },
-                ],
-            };
-            if (memChart) {
-                memChart.setOption(option, true);
-                return;
-            }
-            const chart: any = useEcharts(memRef.value, tdTheme, option);
-            memChart = chart;
-            state.charts.push(chart);
-        };
-
-        const initCpuStats = () => {
-            const cpu = state.stats.CPU;
-            const data = [
-                { name: 'Idle', value: cpu.Idle },
-                {
-                    name: 'Iowait',
-                    value: cpu.Iowait,
-                },
-                {
-                    name: 'System',
-                    value: cpu.System,
-                },
-                {
-                    name: 'User',
-                    value: cpu.User,
-                },
-            ];
-            const option = {
-                title: {
-                    text: 'CPU使用率',
-                    x: 'left',
-                    textStyle: { fontSize: 15 },
-                },
-                tooltip: {
-                    trigger: 'item',
-                    valueFormatter: (value: any) => value + '%',
-                },
-                legend: {
-                    top: '15%',
-                    orient: 'vertical',
-                    left: 'left',
-                    textStyle: { fontSize: 12 },
-                },
-                series: [
-                    {
-                        name: 'CPU',
-                        type: 'pie',
-                        radius: ['30%', '60%'], // 饼图内圈和外圈大小
-                        center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
-                        avoidLabelOverlap: false,
-                        label: {
-                            show: false,
-                            position: 'center',
-                        },
-                        emphasis: {
-                            label: {
-                                show: true,
-                                fontSize: '15',
-                                fontWeight: 'bold',
-                            },
-                        },
-                        labelLine: {
-                            show: false,
-                        },
-                        data: data,
-                    },
-                ],
-            };
-            if (cpuChart) {
-                cpuChart.setOption(option, true);
-                return;
-            }
-            const chart: any = useEcharts(cpuRef.value, tdTheme, option);
-            cpuChart = chart;
-            state.charts.push(chart);
-        };
-
-        const initCharts = () => {
-            nextTick(() => {
-                initMemStats();
-                initCpuStats();
-            });
-            parseNetInter();
-            initEchartsResize();
-        };
-
-        const initEchartResizeFun = () => {
-            nextTick(() => {
-                for (let i = 0; i < state.charts.length; i++) {
-                    setTimeout(() => {
-                        state.charts[i].resize();
-                    }, i * 1000);
-                }
-            });
-        };
-
-        const initEchartsResize = () => {
-            window.addEventListener('resize', initEchartResizeFun);
-        };
-
-        const parseNetInter = () => {
-            state.netInter = [];
-            const netInter = state.stats.NetIntf;
-            const keys = Object.keys(netInter);
-            const values = Object.values(netInter);
-            for (let i = 0; i < values.length; i++) {
-                let value: any = values[i];
-                // 将网卡名称赋值新属性值name
-                value.name = keys[i];
-                state.netInter.push(value);
-            }
-        };
-
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-
-            setTimeout(() => {
-                cpuChart = null;
-                memChart = null;
-            }, 200);
-        };
-
-        return {
-            ...toRefs(state),
-            cpuRef,
-            memRef,
-            cancel,
-            formatByteSize,
-            onRefresh,
-        };
+    stats: {
+        type: Object,
     },
+    machineId: {
+        type: Number,
+    },
+    title: {
+        type: String,
+    },
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
+
+const cpuRef: any = ref();
+const memRef: any = ref();
+
+let cpuChart: any = null;
+let memChart: any = null;
+
+const state = reactive({
+    dialogVisible: false,
+    stats: {} as any,
+    netInter: [] as any,
 });
+
+const {
+    dialogVisible,
+    stats,
+    netInter,
+} = toRefs(state)
+
+let charts = [] as any
+
+watch(props, async (newValue: any) => {
+    const visible = newValue.visible;
+    if (visible) {
+        await setStats();
+    }
+    state.dialogVisible = visible;
+    if (visible) {
+        initCharts();
+    }
+});
+
+const setStats = async () => {
+    state.stats = await machineApi.stats.request({ id: props.machineId });
+};
+
+const onRefresh = async () => {
+    await setStats();
+    initCharts();
+};
+
+const initMemStats = () => {
+    const data = [
+        { name: '可用内存', value: state.stats.MemAvailable },
+        {
+            name: '已用内存',
+            value: state.stats.MemTotal - state.stats.MemAvailable,
+        },
+    ];
+    const option = {
+        title: {
+            text: '内存',
+            x: 'left',
+            textStyle: { fontSize: 15 },
+        },
+        tooltip: {
+            trigger: 'item',
+            valueFormatter: formatByteSize,
+        },
+        legend: {
+            top: '15%',
+            orient: 'vertical',
+            left: 'left',
+            textStyle: { fontSize: 12 },
+        },
+        series: [
+            {
+                name: '内存',
+                type: 'pie',
+                radius: ['30%', '60%'], // 饼图内圈和外圈大小
+                center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center',
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: '15',
+                        fontWeight: 'bold',
+                    },
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: data,
+            },
+        ],
+    };
+    if (memChart) {
+        memChart.setOption(option, true);
+        return;
+    }
+    const chart: any = useEcharts(memRef.value, tdTheme, option);
+    memChart = chart;
+    charts.push(chart);
+};
+
+const initCpuStats = () => {
+    const cpu = state.stats.CPU;
+    const data = [
+        { name: 'Idle', value: cpu.Idle },
+        {
+            name: 'Iowait',
+            value: cpu.Iowait,
+        },
+        {
+            name: 'System',
+            value: cpu.System,
+        },
+        {
+            name: 'User',
+            value: cpu.User,
+        },
+    ];
+    const option = {
+        title: {
+            text: 'CPU使用率',
+            x: 'left',
+            textStyle: { fontSize: 15 },
+        },
+        tooltip: {
+            trigger: 'item',
+            valueFormatter: (value: any) => value + '%',
+        },
+        legend: {
+            top: '15%',
+            orient: 'vertical',
+            left: 'left',
+            textStyle: { fontSize: 12 },
+        },
+        series: [
+            {
+                name: 'CPU',
+                type: 'pie',
+                radius: ['30%', '60%'], // 饼图内圈和外圈大小
+                center: ['60%', '50%'], // 饼图位置，0: 左右；1: 上下
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center',
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: '15',
+                        fontWeight: 'bold',
+                    },
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: data,
+            },
+        ],
+    };
+    if (cpuChart) {
+        cpuChart.setOption(option, true);
+        return;
+    }
+    const chart: any = useEcharts(cpuRef.value, tdTheme, option);
+    cpuChart = chart;
+    charts.push(chart);
+};
+
+const initCharts = () => {
+    nextTick(() => {
+        initMemStats();
+        initCpuStats();
+    });
+    parseNetInter();
+    initEchartsResize();
+};
+
+const initEchartResizeFun = () => {
+    nextTick(() => {
+        for (let i = 0; i < charts.length; i++) {
+            setTimeout(() => {
+                charts[i].resize();
+            }, i * 1000);
+        }
+    });
+};
+
+const initEchartsResize = () => {
+    window.addEventListener('resize', initEchartResizeFun);
+};
+
+const parseNetInter = () => {
+    state.netInter = [];
+    const netInter = state.stats.NetIntf;
+    const keys = Object.keys(netInter);
+    const values = Object.values(netInter);
+    for (let i = 0; i < values.length; i++) {
+        let value: any = values[i];
+        // 将网卡名称赋值新属性值name
+        value.name = keys[i];
+        state.netInter.push(value);
+    }
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+
+    setTimeout(() => {
+        cpuChart = null;
+        memChart = null;
+    }, 200);
+};
 </script>
 <style lang="scss">
 .card-item-chart {

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

@@ -1,6 +1,7 @@
 <template>
     <div class="file-manage">
-        <el-dialog title="进程信息" v-model="dialogVisible" :destroy-on-close="true" :show-close="true" :before-close="handleClose" width="65%">
+        <el-dialog title="进程信息" v-model="dialogVisible" :destroy-on-close="true" :show-close="true"
+            :before-close="handleClose" width="65%">
             <div class="toolbar">
                 <el-row>
                     <el-col :span="4">
@@ -21,7 +22,8 @@
                         </el-select>
                     </el-col>
                     <el-col :span="6">
-                        <el-button class="ml5" @click="getProcess" type="primary" icon="tickets" size="small" plain>刷新</el-button>
+                        <el-button class="ml5" @click="getProcess" type="primary" icon="tickets" size="small" plain>刷新
+                        </el-button>
                     </el-col>
                 </el-row>
             </div>
@@ -35,7 +37,9 @@
                     <template #header>
                         VSZ
                         <el-tooltip class="box-item" effect="dark" content="虚拟内存" placement="top">
-                            <el-icon><question-filled /></el-icon>
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
@@ -43,7 +47,9 @@
                     <template #header>
                         RSS
                         <el-tooltip class="box-item" effect="dark" content="固定内存" placement="top">
-                            <el-icon><question-filled /></el-icon>
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
@@ -51,7 +57,9 @@
                     <template #header>
                         STAT
                         <el-tooltip class="box-item" effect="dark" content="进程状态" placement="top">
-                            <el-icon><question-filled /></el-icon>
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
@@ -59,7 +67,9 @@
                     <template #header>
                         START
                         <el-tooltip class="box-item" effect="dark" content="启动时间" placement="top">
-                            <el-icon><question-filled /></el-icon>
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
@@ -67,17 +77,21 @@
                     <template #header>
                         TIME
                         <el-tooltip class="box-item" effect="dark" content="该进程实际使用CPU运作的时间" placement="top">
-                            <el-icon><question-filled /></el-icon>
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
-                <el-table-column prop="command" label="command" :min-width="120" show-overflow-tooltip> </el-table-column>
+                <el-table-column prop="command" label="command" :min-width="120" show-overflow-tooltip>
+                </el-table-column>
 
                 <el-table-column label="操作">
                     <template #default="scope">
                         <el-popconfirm title="确定终止该进程?" @confirm="confirmKillProcess(scope.row.pid)">
                             <template #reference>
-                                <el-button v-auth="'machine:killprocess'" type="danger" icon="delete" size="small" plain>终止</el-button>
+                                <el-button v-auth="'machine:killprocess'" type="danger" icon="delete" size="small"
+                                    plain>终止</el-button>
                             </template>
                         </el-popconfirm>
                         <!-- <el-button @click="addFiles(scope.row)" type="danger" icon="delete" size="small" plain>终止</el-button> -->
@@ -88,118 +102,114 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { machineApi } from './api';
-import enums from './enums';
-export default defineComponent({
-    name: 'ProcessList',
-    components: {},
-    props: {
-        visible: { type: Boolean },
-        machineId: { type: Number },
-        title: { type: String },
-    },
-    setup(props: any, context) {
-        const state = reactive({
-            dialogVisible: false,
-            params: {
-                name: '',
-                sortType: '1',
-                count: '10',
-                id: 0,
-            },
-            processList: [],
-        });
-
-        watch(props, (newValue) => {
-            if (props.machineId) {
-                state.params.id = props.machineId;
-                getProcess();
-            }
-            state.dialogVisible = newValue.visible;
-        });
-
-        const getProcess = async () => {
-            const res = await machineApi.process.request(state.params);
-            // 解析字符串
-            // USER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
-            // root         1  0.0  0.0 125632  3352 ?        Ss    2019 154:04 /usr/lib/systemd/systemd --system --deserialize 22
-            const psStrings = res.split('\n');
-            const ps = [];
-            // 如果有根据名称查进程，则第一行没有表头
-            const index = state.params.name == '' ? 1 : 0;
-            for (let i = index; i < psStrings.length; i++) {
-                const psStr = psStrings[i];
-                const process = psStr.split(/\s+/);
-                if (process.length < 2) {
-                    continue;
-                }
-                let command = process[10];
-                // 搜索进程时由于使用grep命令，可能会多个bash或grep进程
-                if (state.params.name) {
-                    if (command == 'bash' || command == 'grep') {
-                        continue;
-                    }
-                }
-                // 获取command，由于command中也有可能存在空格被切割，故重新拼接
-                for (let j = 10; j < process.length - 1; j++) {
-                    command += ' ' + process[j + 1];
-                }
-                ps.push({
-                    user: process[0],
-                    pid: process[1],
-                    cpu: process[2],
-                    mem: process[3],
-                    vsz: kb2Mb(process[4]),
-                    rss: kb2Mb(process[5]),
-                    stat: process[7],
-                    start: process[8],
-                    time: process[9],
-                    command,
-                });
-            }
-            state.processList = ps as any;
-        };
-
-        const confirmKillProcess = async (pid: any) => {
-            await machineApi.killProcess.request({
-                pid,
-                id: state.params.id,
-            });
-            ElMessage.success('kill success');
-            state.params.name = '';
-            getProcess();
-        };
-
-        const kb2Mb = (kb: string) => {
-            return (parseInt(kb) / 1024).toFixed(2) + 'M';
-        };
-
-        /**
-         * 关闭取消按钮触发的事件
-         */
-        const handleClose = () => {
-            context.emit('update:visible', false);
-            context.emit('update:machineId', null);
-            context.emit('cancel');
-            state.params = {
-                name: '',
-                sortType: '1',
-                count: '10',
-                id: 0,
-            };
-            state.processList = [];
-        };
-
-        return {
-            ...toRefs(state),
-            getProcess,
-            confirmKillProcess,
-            enums,
-            handleClose,
-        };
+
+const props = defineProps({
+    visible: { type: Boolean },
+    machineId: { type: Number },
+    title: { type: String },
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
+
+const state = reactive({
+    dialogVisible: false,
+    params: {
+        name: '',
+        sortType: '1',
+        count: '10',
+        id: 0,
     },
+    processList: [],
 });
+
+const {
+    dialogVisible,
+    params,
+    processList,
+} = toRefs(state)
+
+
+watch(props, (newValue) => {
+    if (props.machineId) {
+        state.params.id = props.machineId;
+        getProcess();
+    }
+    state.dialogVisible = newValue.visible;
+});
+
+const getProcess = async () => {
+    const res = await machineApi.process.request(state.params);
+    // 解析字符串
+    // USER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
+    // root         1  0.0  0.0 125632  3352 ?        Ss    2019 154:04 /usr/lib/systemd/systemd --system --deserialize 22
+    const psStrings = res.split('\n');
+    const ps = [];
+    // 如果有根据名称查进程，则第一行没有表头
+    const index = state.params.name == '' ? 1 : 0;
+    for (let i = index; i < psStrings.length; i++) {
+        const psStr = psStrings[i];
+        const process = psStr.split(/\s+/);
+        if (process.length < 2) {
+            continue;
+        }
+        let command = process[10];
+        // 搜索进程时由于使用grep命令，可能会多个bash或grep进程
+        if (state.params.name) {
+            if (command == 'bash' || command == 'grep') {
+                continue;
+            }
+        }
+        // 获取command，由于command中也有可能存在空格被切割，故重新拼接
+        for (let j = 10; j < process.length - 1; j++) {
+            command += ' ' + process[j + 1];
+        }
+        ps.push({
+            user: process[0],
+            pid: process[1],
+            cpu: process[2],
+            mem: process[3],
+            vsz: kb2Mb(process[4]),
+            rss: kb2Mb(process[5]),
+            stat: process[7],
+            start: process[8],
+            time: process[9],
+            command,
+        });
+    }
+    state.processList = ps as any;
+};
+
+const confirmKillProcess = async (pid: any) => {
+    await machineApi.killProcess.request({
+        pid,
+        id: state.params.id,
+    });
+    ElMessage.success('kill success');
+    state.params.name = '';
+    getProcess();
+};
+
+const kb2Mb = (kb: string) => {
+    return (parseInt(kb) / 1024).toFixed(2) + 'M';
+};
+
+/**
+ * 关闭取消按钮触发的事件
+ */
+const handleClose = () => {
+    emit('update:visible', false);
+    emit('update:machineId', null);
+    emit('cancel');
+    state.params = {
+        name: '',
+        sortType: '1',
+        count: '10',
+        id: 0,
+    };
+    state.processList = [];
+};
 </script>

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

@@ -1,15 +1,8 @@
 <template>
     <div class="mock-data-dialog">
-        <el-dialog
-            :title="title"
-            v-model="dialogVisible"
-            :close-on-click-modal="false"
-            :before-close="cancel"
-            :show-close="true"
-            :destroy-on-close="true"
-            width="900px"
-        >
-            <el-form :model="form" ref="scriptForm" label-width="70px" size="small">
+        <el-dialog :title="title" v-model="dialogVisible" :close-on-click-modal="false" :before-close="cancel"
+            :show-close="true" :destroy-on-close="true" width="900px">
+            <el-form :model="form" ref="scriptForm" label-width="50px" size="small">
                 <el-form-item prop="method" label="名称">
                     <el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
                 </el-form-item>
@@ -20,7 +13,8 @@
 
                 <el-form-item prop="type" label="类型">
                     <el-select v-model="form.type" default-first-option style="width: 100%" placeholder="请选择类型">
-                        <el-option v-for="item in enums.scriptTypeEnum" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        <el-option v-for="item in enums.scriptTypeEnum as any" :key="item.value" :label="item.label"
+                            :value="item.value"></el-option>
                     </el-select>
                 </el-form-item>
 
@@ -29,172 +23,161 @@
                 </el-row>
                 <el-form-item :key="param" v-for="(param, index) in params" prop="params" :label="`参数${index + 1}`">
                     <el-row>
-                        <el-col :span="5"><el-input v-model="param.model" placeholder="内容中用{{.model}}替换"></el-input></el-col>
-                        <el-divider :span="1" direction="vertical" border-style="dashed" />
-                        <el-col :span="4"><el-input v-model="param.name" placeholder="字段名"></el-input></el-col>
-                        <el-divider :span="1" direction="vertical" border-style="dashed" />
-                        <el-col :span="4"><el-input v-model="param.placeholder" placeholder="字段说明"></el-input></el-col>
-                        <el-divider :span="1" direction="vertical" border-style="dashed" />
+                        <el-col :span="5">
+                            <el-input v-model="param.model" placeholder="内容中用{{.model}}替换"></el-input>
+                        </el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
+                        <el-col :span="4">
+                            <el-input v-model="param.name" placeholder="字段名"></el-input>
+                        </el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
+                        <el-col :span="4">
+                            <el-input v-model="param.placeholder" placeholder="字段说明"></el-input>
+                        </el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
                         <el-col :span="4">
                             <el-input v-model="param.options" placeholder="可选值 ,分割"></el-input>
                         </el-col>
-                        <el-divider :span="1" direction="vertical" border-style="dashed" />
-                        <el-col :span="2"><el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button></el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
+                        <el-col :span="2">
+                            <el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button>
+                        </el-col>
                     </el-row>
                 </el-form-item>
 
-                <el-form-item prop="script" label="内容" id="content">
-                    <codemirror ref="cmEditor" v-model="form.script" language="shell" width="700px" />
-                </el-form-item>
+                <monaco-editor v-model="form.script" language="shell" height="300px" />
             </el-form>
 
             <template #footer>
                 <div class="dialog-footer">
                     <el-button @click="cancel()" :disabled="submitDisabled">关 闭</el-button>
-                    <el-button
-                        v-auth="'machine:script:save'"
-                        type="primary"
-                        :loading="btnLoading"
-                        @click="btnOk"
-                        :disabled="submitDisabled"
-                        >保 存</el-button
-                    >
+                    <el-button v-auth="'machine:script:save'" type="primary" :loading="btnLoading" @click="btnOk"
+                        :disabled="submitDisabled">保 存</el-button>
                 </div>
             </template>
         </el-dialog>
     </div>
 </template>
 
-<script lang="ts">
-import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, toRefs, reactive, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { machineApi } from './api';
 import enums from './enums';
 import { notEmpty } from '@/common/assert';
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
 
-import { codemirror } from '@/components/codemirror';
-
-export default defineComponent({
-    name: 'ScriptEdit',
-    components: {
-        codemirror,
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        data: {
-            type: Object,
-        },
-        title: {
-            type: String,
-        },
-        machineId: {
-            type: Number,
-        },
-        isCommon: {
-            type: Boolean,
-        },
+    data: {
+        type: Object,
     },
-    setup(props: any, { emit }) {
-        const { isCommon, machineId } = toRefs(props);
-        const scriptForm: any = ref(null);
-
-        const state = reactive({
-            dialogVisible: false,
-            submitDisabled: false,
-            params: [] as any,
-            form: {
-                id: null,
-                name: '',
-                machineId: 0,
-                description: '',
-                script: '',
-                params: '',
-                type: null,
-            },
-            btnLoading: false,
-        });
-
-        watch(props, (newValue) => {
-            state.dialogVisible = newValue.visible;
-            if (!newValue.visible) {
-                return;
-            }
-            if (newValue.data) {
-                state.form = { ...newValue.data };
-                if (state.form.params) {
-                    state.params = JSON.parse(state.form.params);
-                }
-            } else {
-                state.form = {} as any;
-                state.form.script = '';
-            }
-        });
-
-        const onAddParam = () => {
-            state.params.push({ name: '', model: '', placeholder: '' });
-        };
-
-        const onDeleteParam = (idx: number) => {
-            state.params.splice(idx, 1);
-        };
-
-        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);
-                    }
-                    machineApi.saveScript.request(state.form).then(
-                        () => {
-                            ElMessage.success('保存成功');
-                            emit('submitSuccess');
-                            state.submitDisabled = false;
-                            cancel();
-                        },
-                        () => {
-                            state.submitDisabled = false;
-                        }
-                    );
-                } else {
-                    return false;
-                }
-            });
-        };
-
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-            state.params = [];
-        };
-
-        return {
-            ...toRefs(state),
-            enums,
-            onAddParam,
-            onDeleteParam,
-            scriptForm,
-            btnOk,
-            cancel,
-        };
+    title: {
+        type: String,
     },
+    machineId: {
+        type: Number,
+    },
+    isCommon: {
+        type: Boolean,
+    },
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'submitSuccess'])
+
+const { isCommon, machineId } = toRefs(props);
+const scriptForm: any = ref(null);
+
+const state = reactive({
+    dialogVisible: false,
+    submitDisabled: false,
+    params: [] as any,
+    form: {
+        id: null,
+        name: '',
+        machineId: 0,
+        description: '',
+        script: '',
+        params: '',
+        type: null,
+    },
+    btnLoading: false,
 });
-</script>
-<style lang="scss">
-// 	.m-dialog {
-// 		.el-cascader {
-// 			width: 100%;
-// 		}
-// 	}
-#content {
-    .CodeMirror {
-        height: 300px !important;
+
+const {
+    dialogVisible,
+    submitDisabled,
+    params,
+    form,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (!newValue.visible) {
+        return;
     }
-}
-</style>
+    if (newValue.data) {
+        state.form = { ...newValue.data };
+        if (state.form.params) {
+            state.params = JSON.parse(state.form.params);
+        }
+    } else {
+        state.form = {} as any;
+        state.form.script = '';
+    }
+});
+
+const onAddParam = () => {
+    state.params.push({ name: '', model: '', placeholder: '' });
+};
+
+const onDeleteParam = (idx: number) => {
+    state.params.splice(idx, 1);
+};
+
+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);
+            }
+            machineApi.saveScript.request(state.form).then(
+                () => {
+                    ElMessage.success('保存成功');
+                    emit('submitSuccess');
+                    state.submitDisabled = false;
+                    cancel();
+                },
+                () => {
+                    state.submitDisabled = false;
+                }
+            );
+        } else {
+            return false;
+        }
+    });
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+    state.params = [];
+};
+</script>
+<style lang="scss"></style>

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

@@ -1,6 +1,7 @@
 <template>
     <div class="file-manage">
-        <el-dialog :title="title" v-model="dialogVisible" :destroy-on-close="true" :show-close="true" :before-close="handleClose" width="60%">
+        <el-dialog :title="title" v-model="dialogVisible" :destroy-on-close="true" :show-close="true"
+            :before-close="handleClose" width="60%">
             <div class="toolbar">
                 <div style="float: left">
                     <el-select v-model="type" @change="getScripts" size="small" placeholder="请选择">
@@ -9,20 +10,12 @@
                     </el-select>
                 </div>
                 <div style="float: right">
-                    <el-button @click="editScript(currentData)" :disabled="currentId == null" type="primary" icon="tickets" size="small" plain
-                        >查看</el-button
-                    >
-                    <el-button v-auth="'machine:script:save'" type="primary" @click="editScript(null)" icon="plus" size="small" plain>添加</el-button>
-                    <el-button
-                        v-auth="'machine:script:del'"
-                        :disabled="currentId == null"
-                        type="danger"
-                        @click="deleteRow(currentData)"
-                        icon="delete"
-                        size="small"
-                        plain
-                        >删除</el-button
-                    >
+                    <el-button @click="editScript(currentData)" :disabled="currentId == null" type="primary"
+                        icon="tickets" size="small" plain>查看</el-button>
+                    <el-button v-auth="'machine:script:save'" type="primary" @click="editScript(null)" icon="plus"
+                        size="small" plain>添加</el-button>
+                    <el-button v-auth="'machine:script:del'" :disabled="currentId == null" type="danger"
+                        @click="deleteRow(currentData)" icon="delete" size="small" plain>删除</el-button>
                 </div>
             </div>
 
@@ -43,56 +36,32 @@
                 </el-table-column>
                 <el-table-column label="操作">
                     <template #default="scope">
-                        <el-button v-if="scope.row.id == null" @click="addFiles(scope.row)" type="success" icon="el-icon-success" size="small" plain
-                            >确定</el-button
-                        >
+                        <el-button v-if="scope.row.id == null" type="success" icon="el-icon-success" size="small" plain>
+                            确定</el-button>
 
-                        <el-button
-                            v-auth="'machine:script:run'"
-                            v-if="scope.row.id != null"
-                            @click="runScript(scope.row)"
-                            type="primary"
-                            icon="video-play"
-                            size="small"
-                            plain
-                            >执行</el-button
-                        >
+                        <el-button v-auth="'machine:script:run'" v-if="scope.row.id != null"
+                            @click="runScript(scope.row)" type="primary" icon="video-play" size="small" plain>执行
+                        </el-button>
                     </template>
                 </el-table-column>
             </el-table>
             <el-row style="margin-top: 10px" type="flex" justify="end">
-                <el-pagination
-                    small
-                    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-pagination small 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="脚本参数" v-model="scriptParamsDialog.visible" width="400px">
             <el-form ref="paramsForm" :model="scriptParamsDialog.params" label-width="70px" size="small">
-                <el-form-item v-for="item in scriptParamsDialog.paramsFormItem" :key="item.name" :prop="item.model" :label="item.name" required>
-                    <el-input
-                        v-if="!item.options"
-                        v-model="scriptParamsDialog.params[item.model]"
-                        :placeholder="item.placeholder"
-                        autocomplete="off"
-                        clearable
-                    ></el-input>
-                    <el-select
-                        v-else
-                        v-model="scriptParamsDialog.params[item.model]"
-                        :placeholder="item.placeholder"
-                        filterable
-                        autocomplete="off"
-                        clearable
-                        style="width: 100%"
-                    >
-                        <el-option v-for="option in item.options.split(',')" :key="option" :label="option" :value="option" />
+                <el-form-item v-for="item in scriptParamsDialog.paramsFormItem as any" :key="item.name"
+                    :prop="item.model" :label="item.name" required>
+                    <el-input v-if="!item.options" v-model="scriptParamsDialog.params[item.model]"
+                        :placeholder="item.placeholder" autocomplete="off" clearable></el-input>
+                    <el-select v-else v-model="scriptParamsDialog.params[item.model]" :placeholder="item.placeholder"
+                        filterable autocomplete="off" clearable style="width: 100%">
+                        <el-option v-for="option in item.options.split(',')" :key="option" :label="option"
+                            :value="option" />
                     </el-select>
                 </el-form-item>
             </el-form>
@@ -109,257 +78,237 @@
             </div>
         </el-dialog>
 
-        <el-dialog
-            v-if="terminalDialog.visible"
-            title="终端"
-            v-model="terminalDialog.visible"
-            width="80%"
-            :close-on-click-modal="false"
-            :modal="false"
-            @close="closeTermnial"
-        >
-            <ssh-terminal ref="terminal" :cmd="terminalDialog.cmd" :machineId="terminalDialog.machineId" height="560px" />
+        <el-dialog v-if="terminalDialog.visible" title="终端" v-model="terminalDialog.visible" width="80%"
+            :close-on-click-modal="false" :modal="false" @close="closeTermnial">
+            <ssh-terminal ref="terminal" :cmd="terminalDialog.cmd" :machineId="terminalDialog.machineId"
+                height="560px" />
         </el-dialog>
 
-        <script-edit
-            v-model:visible="editDialog.visible"
-            v-model:data="editDialog.data"
-            :title="editDialog.title"
-            v-model:machineId="editDialog.machineId"
-            :isCommon="type == 1"
-            @submitSuccess="submitSuccess"
-        />
+        <script-edit v-model:visible="editDialog.visible" v-model:data="editDialog.data" :title="editDialog.title"
+            v-model:machineId="editDialog.machineId" :isCommon="type == 1" @submitSuccess="submitSuccess" />
     </div>
 </template>
 
-<script lang="ts">
-import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, toRefs, reactive, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import SshTerminal from './SshTerminal.vue';
 import { machineApi } from './api';
 import enums from './enums';
 import ScriptEdit from './ScriptEdit.vue';
 
-export default defineComponent({
-    name: 'ServiceManage',
-    components: {
-        ScriptEdit,
-        SshTerminal,
+const props = defineProps({
+    visible: { type: Boolean },
+    machineId: { type: Number },
+    title: { type: String },
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'update:machineId'])
+
+const paramsForm: any = ref(null);
+const state = reactive({
+    dialogVisible: false,
+    type: 0,
+    currentId: null,
+    currentData: null,
+    query: {
+        machineId: 0 as any,
+        pageNum: 1,
+        pageSize: 8,
     },
-    props: {
-        visible: { type: Boolean },
-        machineId: { type: Number },
-        title: { type: String },
+    editDialog: {
+        visible: false,
+        data: null as any,
+        title: '',
+        machineId: 9999999,
     },
-    setup(props: any, context) {
-        const paramsForm: any = ref(null);
-        const state = reactive({
-            dialogVisible: false,
-            type: 0,
-            currentId: null,
-            currentData: null,
-            query: {
-                machineId: 0,
-                pageNum: 1,
-                pageSize: 8,
-            },
-            editDialog: {
-                visible: false,
-                data: null,
-                title: '',
-                machineId: 9999999,
-            },
-            total: 0,
-            scriptTable: [],
-            scriptParamsDialog: {
-                visible: false,
-                params: {},
-                paramsFormItem: [],
-            },
-            resultDialog: {
-                visible: false,
-                result: '',
-            },
-            terminalDialog: {
-                visible: false,
-                cmd: '',
-                machineId: 0,
-            },
-        });
-
-        watch(props, async (newValue) => {
-            if (props.machineId && newValue.visible) {
-                await getScripts();
-            }
-            state.dialogVisible = newValue.visible;
-        });
-
-        const getScripts = async () => {
-            state.currentId = null;
-            state.currentData = null;
-            state.query.machineId = state.type == 0 ? props.machineId : 9999999;
-            const res = await machineApi.scripts.request(state.query);
-            state.scriptTable = res.list;
-            state.total = res.total;
-        };
-
-        const handlePageChange = (curPage: number) => {
-            state.query.pageNum = curPage;
-            getScripts();
-        };
-
-        const runScript = async (script: any) => {
-            // 如果存在参数，则弹窗输入参数后执行
-            if (script.params) {
-                state.scriptParamsDialog.paramsFormItem = JSON.parse(script.params);
-                if (state.scriptParamsDialog.paramsFormItem && state.scriptParamsDialog.paramsFormItem.length > 0) {
-                    state.scriptParamsDialog.visible = true;
-                    return;
-                }
-            }
-
-            run(script);
-        };
-
-        // 有参数的脚本执行函数
-        const hasParamsRun = async (script: any) => {
-            // 如果脚本参数弹窗显示，则校验参数表单数据通过后执行
-            if (state.scriptParamsDialog.visible) {
-                paramsForm.value.validate((valid: any) => {
-                    if (valid) {
-                        run(script);
-                        state.scriptParamsDialog.params = {};
-                        state.scriptParamsDialog.visible = false;
-                        paramsForm.value.resetFields();
-                    } else {
-                        return false;
-                    }
-                });
-            }
-        };
-
-        const run = async (script: any) => {
-            const noResult = script.type == enums.scriptTypeEnum['NO_RESULT'].value;
-            // 如果脚本类型为有结果类型，则显示结果信息
-            if (script.type == enums.scriptTypeEnum['RESULT'].value || noResult) {
-                const res = await machineApi.runScript.request({
-                    machineId: props.machineId,
-                    scriptId: script.id,
-                    params: state.scriptParamsDialog.params,
-                });
-
-                if (noResult) {
-                    ElMessage.success('执行完成');
-                    return;
-                }
-                state.resultDialog.result = res;
-                state.resultDialog.visible = true;
-                return;
-            }
-
-            if (script.type == enums.scriptTypeEnum['REAL_TIME'].value) {
-                script = script.script;
-                if (state.scriptParamsDialog.params) {
-                    script = templateResolve(script, state.scriptParamsDialog.params);
-                }
-                state.terminalDialog.cmd = script;
-                state.terminalDialog.visible = true;
-                state.terminalDialog.machineId = props.machineId;
-                return;
-            }
-        };
-
-        /**
-         * 解析 {{.param}} 形式模板字符串
-         */
-        function templateResolve(template: string, param: any) {
-            return template.replace(/\{{.\w+\}}/g, (word) => {
-                const key = word.substring(3, word.length - 2);
-                const value = param[key];
-                if (value != null || value != undefined) {
-                    return value;
-                }
-                return '';
-            });
-        }
-
-        const closeTermnial = () => {
-            state.terminalDialog.visible = false;
-            state.terminalDialog.machineId = 0;
-        };
-
-        /**
-         * 选择数据
-         */
-        const choose = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.currentId = item.id;
-            state.currentData = item;
-        };
-
-        const editScript = (data: any) => {
-            state.editDialog.machineId = props.machineId;
-            state.editDialog.data = data;
-            if (data) {
-                state.editDialog.title = '查看编辑脚本';
-            } else {
-                state.editDialog.title = '新增脚本';
-            }
-            state.editDialog.visible = true;
-        };
-
-        const submitSuccess = () => {
-            getScripts();
-        };
-
-        const deleteRow = (row: any) => {
-            ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            }).then(() => {
-                machineApi.deleteScript
-                    .request({
-                        machineId: props.machineId,
-                        scriptId: row.id,
-                    })
-                    .then(() => {
-                        getScripts();
-                    });
-                // 删除配置文件
-            });
-        };
-
-        /**
-         * 关闭取消按钮触发的事件
-         */
-        const handleClose = () => {
-            context.emit('update:visible', false);
-            context.emit('update:machineId', null);
-            context.emit('cancel');
-            state.scriptTable = [];
-            state.scriptParamsDialog.paramsFormItem = [];
-        };
-
-        return {
-            ...toRefs(state),
-            paramsForm,
-            enums,
-            getScripts,
-            handlePageChange,
-            runScript,
-            hasParamsRun,
-            closeTermnial,
-            choose,
-            editScript,
-            submitSuccess,
-            deleteRow,
-            handleClose,
-        };
+    total: 0,
+    scriptTable: [],
+    scriptParamsDialog: {
+        visible: false,
+        params: {},
+        paramsFormItem: [],
+    },
+    resultDialog: {
+        visible: false,
+        result: '',
+    },
+    terminalDialog: {
+        visible: false,
+        cmd: '',
+        machineId: 0,
     },
 });
+
+const {
+    dialogVisible,
+    type,
+    currentId,
+    currentData,
+    query,
+    editDialog,
+    total,
+    scriptTable,
+    scriptParamsDialog,
+    resultDialog,
+    terminalDialog,
+} = toRefs(state)
+
+watch(props, async (newValue) => {
+    if (props.machineId && newValue.visible) {
+        await getScripts();
+    }
+    state.dialogVisible = newValue.visible;
+});
+
+const getScripts = async () => {
+    state.currentId = null;
+    state.currentData = null;
+    state.query.machineId = state.type == 0 ? props.machineId : 9999999;
+    const res = await machineApi.scripts.request(state.query);
+    state.scriptTable = res.list;
+    state.total = res.total;
+};
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    getScripts();
+};
+
+const runScript = async (script: any) => {
+    // 如果存在参数，则弹窗输入参数后执行
+    if (script.params) {
+        state.scriptParamsDialog.paramsFormItem = JSON.parse(script.params);
+        if (state.scriptParamsDialog.paramsFormItem && state.scriptParamsDialog.paramsFormItem.length > 0) {
+            state.scriptParamsDialog.visible = true;
+            return;
+        }
+    }
+
+    run(script);
+};
+
+// 有参数的脚本执行函数
+const hasParamsRun = async (script: any) => {
+    // 如果脚本参数弹窗显示，则校验参数表单数据通过后执行
+    if (state.scriptParamsDialog.visible) {
+        paramsForm.value.validate((valid: any) => {
+            if (valid) {
+                run(script);
+                state.scriptParamsDialog.params = {};
+                state.scriptParamsDialog.visible = false;
+                paramsForm.value.resetFields();
+            } else {
+                return false;
+            }
+        });
+    }
+};
+
+const run = async (script: any) => {
+    const noResult = script.type == enums.scriptTypeEnum['NO_RESULT'].value;
+    // 如果脚本类型为有结果类型，则显示结果信息
+    if (script.type == enums.scriptTypeEnum['RESULT'].value || noResult) {
+        const res = await machineApi.runScript.request({
+            machineId: props.machineId,
+            scriptId: script.id,
+            params: state.scriptParamsDialog.params,
+        });
+
+        if (noResult) {
+            ElMessage.success('执行完成');
+            return;
+        }
+        state.resultDialog.result = res;
+        state.resultDialog.visible = true;
+        return;
+    }
+
+    if (script.type == enums.scriptTypeEnum['REAL_TIME'].value) {
+        script = script.script;
+        if (state.scriptParamsDialog.params) {
+            script = templateResolve(script, state.scriptParamsDialog.params);
+        }
+        state.terminalDialog.cmd = script;
+        state.terminalDialog.visible = true;
+        state.terminalDialog.machineId = props.machineId as any;
+        return;
+    }
+};
+
+/**
+ * 解析 {{.param}} 形式模板字符串
+ */
+function templateResolve(template: string, param: any) {
+    return template.replace(/\{{.\w+\}}/g, (word) => {
+        const key = word.substring(3, word.length - 2);
+        const value = param[key];
+        if (value != null || value != undefined) {
+            return value;
+        }
+        return '';
+    });
+}
+
+const closeTermnial = () => {
+    state.terminalDialog.visible = false;
+    state.terminalDialog.machineId = 0;
+};
+
+/**
+ * 选择数据
+ */
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.currentId = item.id;
+    state.currentData = item;
+};
+
+const editScript = (data: any) => {
+    state.editDialog.machineId = props.machineId as any;
+    state.editDialog.data = data;
+    if (data) {
+        state.editDialog.title = '查看编辑脚本';
+    } else {
+        state.editDialog.title = '新增脚本';
+    }
+    state.editDialog.visible = true;
+};
+
+const submitSuccess = () => {
+    getScripts();
+};
+
+const deleteRow = (row: any) => {
+    ElMessageBox.confirm(`此操作将删除 [${row.name}], 是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        machineApi.deleteScript
+            .request({
+                machineId: props.machineId,
+                scriptId: row.id,
+            })
+            .then(() => {
+                getScripts();
+            });
+        // 删除配置文件
+    });
+};
+
+/**
+ * 关闭取消按钮触发的事件
+ */
+const handleClose = () => {
+    emit('update:visible', false);
+    emit('update:machineId', null);
+    emit('cancel');
+    state.scriptTable = [];
+    state.scriptParamsDialog.paramsFormItem = [];
+};
 </script>
 <style lang="sass">
 </style>

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

@@ -1,197 +1,185 @@
 <template>
-    <div :style="{ height: height }" id="xterm" class="xterm" />
+    <div :style="{ height: props.height }" id="xterm" class="xterm" />
 </template>
 
-<script lang="ts">
+<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.ts';
 import config from '@/common/config';
 import { useStore } from '@/store/index.ts';
-import { nextTick, toRefs, watch, computed, reactive, defineComponent, onMounted, onBeforeUnmount } from 'vue';
+import { nextTick, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
 
-export default defineComponent({
-    name: 'SshTerminal',
-    props: {
-        machineId: { type: Number },
-        cmd: { type: String },
-        height: { type: String },
-    },
-    setup(props: any) {
-        const state = reactive({
-            machineId: 0,
-            cmd: '',
-            height: '',
-            term: null as any,
-            socket: null as any,
-        });
+const props = defineProps({
+    machineId: { type: Number },
+    cmd: { type: String },
+    height: { type: [String, Number] },
+})
 
-        const resize = 1;
-        const data = 2;
-        const ping = 3;
-
-        watch(props, (newValue) => {
-            state.machineId = newValue.machineId;
-            state.cmd = newValue.cmd;
-            state.height = newValue.height;
-        });
-
-        onMounted(() => {
-            state.machineId = props.machineId;
-            state.height = props.height;
-            state.cmd = props.cmd;
-        });
-
-        onBeforeUnmount(() => {
-            closeAll();
-        });
-
-        const store = useStore();
-
-        // 获取布局配置信息
-        const getThemeConfig: any = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-
-        nextTick(() => {
-            initXterm();
-            initSocket();
-        });
-
-        function initXterm() {
-            const term: any = new Terminal({
-                fontSize: getThemeConfig.value.terminalFontSize || 15,
-                fontWeight: getThemeConfig.value.terminalFontWeight || 'normal',
-                fontFamily: 'JetBrainsMono, monaco, Consolas, Lucida Console, monospace',
-                cursorBlink: true,
-                disableStdin: false,
-                theme: {
-                    foreground: getThemeConfig.value.terminalForeground || '#7e9192', //字体
-                    background: getThemeConfig.value.terminalBackground || '#002833', //背景色
-                    cursor: getThemeConfig.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/${state.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;
-            }
-        }
-
-        return {
-            ...toRefs(state),
-        };
-    },
+const state = reactive({
+    cmd: '',
+    term: null as any,
+    socket: null as any,
 });
-</script>
+
+const resize = 1;
+const data = 2;
+const ping = 3;
+
+onMounted(() => {
+    state.cmd = props.cmd as any;
+
+    nextTick(() => {
+        initXterm();
+        initSocket();
+    });
+});
+
+onBeforeUnmount(() => {
+    closeAll();
+});
+
+const store = useStore();
+
+// 获取布局配置信息
+const getThemeConfig: any = computed(() => {
+    return store.state.themeConfig.themeConfig;
+});
+
+function initXterm() {
+    const term: any = new Terminal({
+        fontSize: getThemeConfig.value.terminalFontSize || 15,
+        fontWeight: getThemeConfig.value.terminalFontWeight || 'normal',
+        fontFamily: 'JetBrainsMono, monaco, Consolas, Lucida Console, monospace',
+        cursorBlink: true,
+        disableStdin: false,
+        theme: {
+            foreground: getThemeConfig.value.terminalForeground || '#7e9192', //字体
+            background: getThemeConfig.value.terminalBackground || '#002833', //背景色
+            cursor: getThemeConfig.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

@@ -4,36 +4,27 @@
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import SshTerminal from './SshTerminal.vue';
-import { reactive, toRefs, defineComponent, onMounted } from 'vue';
+import { reactive, toRefs, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
-export default defineComponent({
-    name: 'SshTerminalPage',
-    components: {
-        SshTerminal,
-    },
-    props: {
-        machineId: { type: Number },
-    },
-    setup() {
-        const route = useRoute();
-        const state = reactive({
-            machineId: 0,
-            height: 700,
-        });
+const route = useRoute();
+const state = reactive({
+    machineId: 0,
+    height: 0,
+});
 
-        onMounted(() => {
-            state.height = window.innerHeight + 5;
-            state.machineId = Number.parseInt(route.query.id as string);
-        });
+const {
+    machineId,
+    height,
+} = toRefs(state)
 
-        return {
-            ...toRefs(state),
-        };
-    },
+onMounted(() => {
+    state.height = window.innerHeight + 5;
+    state.machineId = Number.parseInt(route.query.id as string);
 });
 </script>
 <style lang="scss">
+
 </style>

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

@@ -10,6 +10,7 @@ export const machineApi = {
     // 终止进程
     killProcess: Api.create("/machines/{id}/process", 'delete'),
     closeCli: Api.create("/machines/{id}/close-cli", 'delete'),
+    testConn: Api.create("/machines/test-conn", 'post'),
     // 保存按钮
     saveMachine: Api.create("/machines", 'post'),
     // 调整状态
@@ -35,4 +36,11 @@ export const machineApi = {
     delConf: Api.create("/machines/{machineId}/files/{id}", 'delete'),
     terminal: Api.create("/api/machines/{id}/terminal", 'get'),
     recDirNames: Api.create("/machines/rec/names", 'get')
+}
+
+export const authCertApi = {
+    baseList : Api.create("/sys/authcerts/base", 'get'),
+    list: Api.create("/sys/authcerts", 'get'),
+    save: Api.create("/sys/authcerts", 'post'),
+    delete: Api.create("/sys/authcerts/{id}", 'delete'),
 }

mayfly_go_web/src/views/ops/machine/authcert/AuthCertEdit.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <el-dialog :title="title" v-model="dvisible" :show-close="false" :before-close="cancel" width="500px"
+            :destroy-on-close="true">
+            <el-form ref="acForm" :rules="rules" :model="form" label-width="90px">
+                <el-form-item prop="name" label="名称:" required>
+                    <el-input v-model="form.name"></el-input>
+                </el-form-item>
+                <el-form-item prop="authMethod" label="认证方式:" required>
+                    <el-select style="width: 100%" v-model="form.authMethod" placeholder="请选择认证方式">
+                        <el-option key="1" label="密码" :value="1"> </el-option>
+                        <el-option key="2" label="密钥" :value="2"> </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item v-if="form.authMethod == 1" prop="password" label="密码:">
+                    <el-input type="password" show-password clearable v-model.trim="form.password" placeholder="请输入密码"
+                        autocomplete="new-password">
+                    </el-input>
+                </el-form-item>
+                <el-form-item v-if="form.authMethod == 2" prop="password" label="秘钥:">
+                    <el-input type="textarea" :rows="5" v-model="form.password" placeholder="请将私钥文件内容拷贝至此">
+                    </el-input>
+                </el-form-item>
+                <el-form-item v-if="form.authMethod == 2" prop="passphrase" label="秘钥密码:">
+                    <el-input type="password" v-model="form.passphrase">
+                    </el-input>
+                </el-form-item>
+
+                <el-form-item label="备注:">
+                    <el-input v-model="form.remark" type="textarea" :rows="2"></el-input>
+                </el-form-item>
+            </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 { ref, toRefs, reactive, watch } from 'vue';
+import { authCertApi } from '../api';
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+    },
+    data: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+})
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
+
+const acForm: any = ref(null);
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '授权凭证名称不能为空',
+            trigger: ['change', 'blur'],
+        },
+    ]
+}
+
+const state = reactive({
+    dvisible: false,
+    params: [] as any,
+    form: {
+        id: null,
+        name: '',
+        authMethod: 1,
+        password: '',
+        passphrase: '',
+        remark: '',
+    },
+    btnLoading: false,
+});
+
+const {
+    dvisible,
+    form,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, (newValue: any) => {
+    state.dvisible = newValue.visible;
+    if (newValue.data) {
+        state.form = { ...newValue.data };
+    } else {
+        state.form = { authMethod: 1 } as any;
+        state.params = [];
+    }
+});
+
+const cancel = () => {
+    // 更新父组件visible prop对应的值为false
+    emit('update:visible', false);
+    // 若父组件有取消事件，则调用
+    emit('cancel');
+};
+
+const btnOk = async () => {
+    acForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            state.btnLoading = true;
+            try {
+                await authCertApi.save.request(state.form);
+                emit('val-change', state.form);
+                cancel();
+            } finally {
+                state.btnLoading = false;
+            }
+        }
+    });
+};
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="role-list">
+        <el-card>
+            <div>
+                <el-button type="primary" icon="plus" @click="edit(false)">添加</el-button>
+                <el-button :disabled="chooseId == null" @click="edit(chooseData)" type="primary" icon="edit">编辑
+                </el-button>
+                <el-button :disabled="chooseId == null" @click="deleteAc(chooseData)" type="danger" icon="delete">删除
+                </el-button>
+
+                <div style="float: right">
+                    <el-select v-model="query.type" placeholder="请选择标签" @clear="search" filterable clearable>
+                        <el-option label="" value="item"> </el-option>
+                    </el-select>
+                    <el-input class="ml5" placeholder="请输入凭证名称" style="width: 150px" v-model="query.name" @clear="search"
+                        plain clearable></el-input>
+                    <el-button class="ml5" @click="search" type="success" icon="search"></el-button>
+                </div>
+            </div>
+
+            <el-table :data="authcerts" @current-change="choose" ref="table" style="width: 100%">
+                <el-table-column label="选择" width="55px">
+                    <template #default="scope">
+                        <el-radio v-model="chooseId" :label="scope.row.id">
+                            <i></i>
+                        </el-radio>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="名称" min-width="60px" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="authMethod" label="认证方式" min-width="50px">
+                    <template #default="scope">
+                        <el-tag v-if="scope.row.authMethod == 1" type="success" size="small">密码</el-tag>
+                        <el-tag v-if="scope.row.authMethod == 2" type="primary" size="small">密钥</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="remark" label="备注" min-width="100px" show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column prop="creator" label="创建人" min-width="60px"></el-table-column>
+                <el-table-column prop="createTime" label="创建时间" min-width="100px">
+                    <template #default="scope">
+                        {{ dateFormat(scope.row.createTime) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="modifier" label="修改者" min-width="60px" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="updateTime" label="更新时间" min-width="100px">
+                    <template #default="scope">
+                        {{ dateFormat(scope.row.updateTime) }}
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
+                <el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
+                    layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
+                    :page-size="query.pageSize"></el-pagination>
+            </el-row>
+        </el-card>
+
+        <auth-cert-edit :title="editor.title" v-model:visible="editor.visible" :data="editor.authcert"
+            @val-change="editChange" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, onMounted } from 'vue';
+import AuthCertEdit from './AuthCertEdit.vue';
+import { authCertApi } from '../api';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { dateFormat } from '@/common/utils/date';
+
+const state = reactive({
+    query: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        type: null,
+    },
+    total: 0,
+    authcerts: [],
+    chooseId: null,
+    chooseData: null,
+    paramsDialog: {
+        visible: false,
+        config: null as any,
+        params: {},
+        paramsFormItem: [] as any,
+    },
+    editor: {
+        title: '授权凭证保存',
+        visible: false,
+        authcert: {},
+    },
+});
+
+const {
+    query,
+    total,
+    authcerts,
+    chooseId,
+    chooseData,
+    editor,
+} = toRefs(state)
+
+onMounted(() => {
+    search();
+});
+
+const search = async () => {
+    let res = await authCertApi.list.request(state.query);
+    state.authcerts = res.list;
+    state.total = res.total;
+};
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    search();
+};
+
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.chooseId = item.id;
+    state.chooseData = item;
+};
+
+const editChange = () => {
+    ElMessage.success('保存成功');
+    state.chooseId = null;
+    state.chooseData = null;
+    search();
+};
+
+const edit = (data: any) => {
+    if (data) {
+        state.editor.authcert = data;
+    } else {
+        state.editor.authcert = false;
+    }
+
+    state.editor.visible = true;
+};
+
+const deleteAc = async (data: any) => {
+    try {
+        await ElMessageBox.confirm(`确定删除该授权凭证?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await authCertApi.delete.request({ id: data.id });
+        ElMessage.success('删除成功');
+        state.chooseData = null;
+        state.chooseId = null;
+        search();
+    } catch (err) { }
+
+}
+</script>
+<style lang="scss"></style>

mayfly_go_web/src/views/ops/machine/authcert/AuthCertSelect.vue

@@ -0,0 +1,63 @@
+<template>
+    <div style="width: 100%">
+        <el-select @change="changeValue" v-model="id" filterable placeholder="请选择授权凭证,可前往[机器管理->授权凭证]添加"
+            style="width: 100%">
+            <el-option v-for="ac in acs" :key="ac.id" :value="ac.id" :label="ac.name">
+                <el-tag v-if="ac.authMethod == 1" type="success" size="small">密码</el-tag>
+                <el-tag v-if="ac.authMethod == 2" type="primary" size="small">密钥</el-tag>
+
+                <el-divider direction="vertical" border-style="dashed" />
+                {{ ac.name }}
+
+                <el-divider direction="vertical" border-style="dashed" />
+                {{ ac.remark }}
+            </el-option>
+        </el-select>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs, onMounted } from 'vue';
+import { authCertApi } from '../api';
+
+//定义事件
+const emit = defineEmits(['update:modelValue', 'change'])
+
+
+const props = defineProps({
+    modelValue: {
+        type: [Number],
+        required: true,
+    },
+})
+
+const state = reactive({
+    acs: [] as any,
+    id: null as any,
+})
+
+const {
+    acs,
+    id,
+} = toRefs(state)
+
+onMounted(async () => {
+    await getAcs();
+    if (props.modelValue) {
+        state.id = props.modelValue;
+    }
+})
+
+const changeValue = (val: any) => {
+    emit('update:modelValue', val);
+    emit('change', val);
+}
+
+const getAcs = async () => {
+    const acs = await authCertApi.baseList.request({ pageSize: 100, type: 2 })
+    state.acs = acs.list;
+}
+
+</script>
+
+<style lang="scss"></style>

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

@@ -1,99 +1,114 @@
 <template>
     <div>
-        <div class="toolbar">
-            <el-row type="flex" justify="space-between">
-                <el-col :span="24">
-                    <project-env-select @changeProjectEnv="changeProjectEnv">
-                        <template #default>
-                            <el-form-item label="实例" label-width="40px">
-                                <el-select v-model="mongoId" placeholder="请选择mongo" @change="changeMongo">
-                                    <el-option v-for="item in mongoList" :key="item.id" :label="item.name" :value="item.id">
-                                        <span style="float: left">{{ item.name }}</span>
-                                        <span style="float: right; color: #8492a6; margin-left: 6px; font-size: 13px">{{ ` [${item.uri}]` }}</span>
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
+        <el-row>
+            <el-col :span="4">
+                <tag-tree @node-click="nodeClick" :load="loadNode">
+                    <template #prefix="{ data }">
+                        <span v-if="data.type == NodeType.Mongo">
+                            <el-popover placement="right-start" title="mongo实例信息" trigger="hover" :width="210">
+                                <template #reference>
+                                    <img src="@/assets/icon/mongo.png" class="img-icon" />
+                                </template>
+                                <template #default>
+                                    <el-form class="instances-pop-form" label-width="50px" :size="'small'">
+                                        <el-form class="instances-pop-form" label-width="55px" :size="'small'">
+                                            <el-form-item label="名称:">{{ data.params.name }}</el-form-item>
+                                            <el-form-item label="链接:">{{ data.params.uri }}</el-form-item>
+                                        </el-form>
+                                    </el-form>
+                                </template>
+                            </el-popover>
+                        </span>
 
-                            <el-form-item label="库" label-width="20px">
-                                <el-select v-model="database" placeholder="请选择库" @change="changeDatabase" filterable>
-                                    <el-option v-for="item in databases" :key="item.Name" :label="item.Name" :value="item.Name">
-                                        <span style="float: left">{{ item.Name }}</span>
-                                        <span style="float: right; color: #8492a6; margin-left: 4px; font-size: 13px">{{
-                                            ` [${formatByteSize(item.SizeOnDisk)}]`
-                                        }}</span>
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
+                        <el-icon v-if="data.type == NodeType.Dbs">
+                            <Coin color="#67c23a" />
+                        </el-icon>
 
-                            <el-form-item label="集合" label-width="40px">
-                                <el-select v-model="collection" placeholder="请选择集合" @change="changeCollection" filterable>
-                                    <el-option v-for="item in collections" :key="item" :label="item" :value="item">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                        </template>
-                    </project-env-select>
-                </el-col>
-            </el-row>
-        </div>
+                        <el-icon v-if="data.type == NodeType.Coll || data.type == NodeType.CollMenu">
+                            <Document class="color-primary" />
+                        </el-icon>
+                    </template>
 
-        <el-container id="data-exec" style="border: 1px solid #eee; margin-top: 1px">
-            <el-tabs @tab-remove="removeDataTab" @tab-click="onDataTabClick" style="width: 100%; margin-left: 5px" v-model="activeName">
-                <el-tab-pane closable v-for="dt in dataTabs" :key="dt.name" :label="dt.name" :name="dt.name">
-                    <el-row v-if="mongoId">
-                        <el-link @click="findCommand(activeName)" icon="refresh" :underline="false" class="ml5"></el-link>
-                        <el-link @click="showInsertDocDialog" class="ml5" type="primary" icon="plus" :underline="false"></el-link>
-                    </el-row>
-                    <el-row class="mt5 mb5">
-                        <el-input
-                            ref="findParamInputRef"
-                            v-model="dt.findParamStr"
-                            placeholder="点击输入相应查询条件"
-                            @focus="showFindDialog(dt.name)"
-                        >
-                            <template #prepend>查询参数</template>
-                        </el-input>
-                    </el-row>
-                    <el-row>
-                        <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="12" />
-                                <div style="padding: 3px; float: right" class="mr5 mongo-doc-btns">
+                    <template #label="{ data }">
+                        <span v-if="data.type == NodeType.Dbs">
+                            {{ data.params.dbName }}
+                            <span style="color: #8492a6;font-size: 13px">
+                                [{{ formatByteSize(data.params.size) }}]
+                            </span>
+                        </span>
+
+                        <span v-else>{{ data.label }}</span>
+                    </template>
+                </tag-tree>
+            </el-col>
+
+            <el-col :span="20">
+                <el-container id="mongo-tab" style="border: 1px solid #eee; margin-top: 1px">
+                    <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-row>
+                                <el-col :span="2">
                                     <div>
-                                        <el-link @click="onJsonEditor(item)" :underline="false" type="success" icon="MagicStick"></el-link>
-
-                                        <el-divider direction="vertical" border-style="dashed" />
-
-                                        <el-link
-                                            @click="onSaveDoc(item.value)"
-                                            :underline="false"
-                                            type="warning"
-                                            icon="DocumentChecked"
-                                        ></el-link>
-
-                                        <el-divider direction="vertical" border-style="dashed" />
-
-                                        <el-popconfirm @confirm="onDeleteDoc(item.value)" title="确定删除该文档?">
-                                            <template #reference>
-                                                <el-link :underline="false" type="danger" icon="DocumentDelete"></el-link>
-                                            </template>
-                                        </el-popconfirm>
+                                        <el-link @click="findCommand(state.activeName)" icon="refresh"
+                                            :underline="false" class="">
+                                        </el-link>
+                                        <el-link @click="showInsertDocDialog" class="ml5" type="primary" icon="plus"
+                                            :underline="false">
+                                        </el-link>
                                     </div>
-                                </div>
-                            </el-card>
-                        </el-col>
-                    </el-row>
-                </el-tab-pane>
-            </el-tabs>
-        </el-container>
+                                </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>
+                                <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="onJsonEditor(item)" :underline="false" type="success"
+                                                    icon="MagicStick"></el-link>
+
+                                                <el-divider direction="vertical" border-style="dashed" />
+
+                                                <el-link @click="onSaveDoc(item.value)" :underline="false"
+                                                    type="warning" icon="DocumentChecked"></el-link>
+
+                                                <el-divider direction="vertical" border-style="dashed" />
+
+                                                <el-popconfirm @confirm="onDeleteDoc(item.value)" title="确定删除该文档?">
+                                                    <template #reference>
+                                                        <el-link :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-container>
+            </el-col>
+
+        </el-row>
 
         <el-dialog width="600px" title="find参数" v-model="findDialog.visible">
             <el-form label-width="70px">
                 <el-form-item label="filter">
-                    <el-input v-model="findDialog.findParam.filter" type="textarea" :rows="6" clearable auto-complete="off"></el-input>
+                    <monaco-editor style="width: 100%;" height="150px" ref="monacoEditorRef"
+                        v-model="findDialog.findParam.filter" language="json" />
                 </el-form-item>
                 <el-form-item label="sort">
-                    <el-input v-model="findDialog.findParam.sort" type="textarea" :rows="3" clearable auto-complete="off"></el-input>
+                    <el-input v-model="findDialog.findParam.sort" type="textarea" :rows="3" clearable
+                        auto-complete="off"></el-input>
                 </el-form-item>
                 <el-form-item label="limit">
                     <el-input v-model.number="findDialog.findParam.limit" type="number" auto-complete="off"></el-input>
@@ -110,8 +125,9 @@
             </template>
         </el-dialog>
 
-        <el-dialog width="800px" :title="`新增'${activeName}'集合文档`" v-model="insertDocDialog.visible" :close-on-click-modal="false">
-            <json-edit currentMode="code" v-model="insertDocDialog.doc" />
+        <el-dialog width="60%" :title="`新增'${state.activeName}'集合文档`" v-model="insertDocDialog.visible"
+            :close-on-click-modal="false">
+            <monaco-editor v-model="insertDocDialog.doc" language="json" />
             <template #footer>
                 <div>
                     <el-button @click="insertDocDialog.visible = false">取 消</el-button>
@@ -120,327 +136,365 @@
             </template>
         </el-dialog>
 
-        <el-dialog width="70%" title="json编辑器" v-model="jsoneditorDialog.visible" @close="onCloseJsonEditDialog" :close-on-click-modal="false">
-            <json-edit v-model="jsoneditorDialog.doc" />
+        <el-dialog width="60%" title="json编辑器" v-model="jsonEditorDialog.visible" @close="onCloseJsonEditDialog"
+            :close-on-click-modal="false">
+            <monaco-editor v-model="jsonEditorDialog.doc" language="json" />
         </el-dialog>
 
         <div style="text-align: center; margin-top: 10px"></div>
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { mongoApi } from './api';
-import { toRefs, ref, reactive, defineComponent } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
 import { ElMessage } from 'element-plus';
-import ProjectEnvSelect from '../component/ProjectEnvSelect.vue';
 
-import { isTrue, notBlank, notNull } from '@/common/assert';
+import { isTrue, notBlank } from '@/common/assert';
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
+import { TagTreeNode } from '../component/tag';
+import TagTree from '../component/TagTree.vue';
 import { formatByteSize } from '@/common/utils/format';
-import JsonEdit from '@/components/jsonedit/index.vue';
 
-export default defineComponent({
-    name: 'MongoDataOp',
-    components: {
-        ProjectEnvSelect,
-        JsonEdit,
+/**
+ * 树节点类型
+ */
+class NodeType {
+    static Mongo = 1
+    static Dbs = 2
+    static CollMenu = 3
+    static Coll = 4
+}
+
+const findParamInputRef: any = ref(null);
+const state = reactive({
+    tags: [],
+    mongoList: [] as any,
+    activeName: '', // 当前操作的tab
+    dataTabs: {} as any, // 数据tabs
+    findDialog: {
+        visible: false,
+        findParam: {
+            limit: 0,
+            skip: 0,
+            filter: '',
+            sort: '',
+        },
     },
-    setup() {
-        const findParamInputRef: any = ref(null);
-        const state = reactive({
-            loading: false,
-            mongoList: [],
-            query: {
-                envId: 0,
-            },
-            mongoId: null, // 当前选择操作的mongo
-            database: '', // 当前选择操作的库
-            collection: '', //当前选中的collection
-            activeName: '', // 当前操作的tab
-            databases: [],
-            collections: [],
-            dataTabs: {}, // 数据tabs
-            findDialog: {
-                visible: false,
-                findParam: {
-                    filter: '',
-                    sort: '',
-                },
-            },
-            insertDocDialog: {
-                visible: false,
-                doc: '',
-            },
-            jsoneditorDialog: {
-                visible: false,
-                doc: '',
-                item: {} as any,
-            },
-        });
-
-        const searchMongo = async () => {
-            notNull(state.query.envId, '请先选择项目环境');
-            const res = await mongoApi.mongoList.request(state.query);
-            state.mongoList = res.list;
-        };
-
-        const changeProjectEnv = (projectId: any, envId: any) => {
-            state.databases = [];
-            state.collections = [];
-            state.mongoId = null;
-            state.collection = '';
-            state.database = '';
-            state.dataTabs = {};
-            if (envId != null) {
-                state.query.envId = envId;
-                searchMongo();
-            }
-        };
-
-        const changeMongo = () => {
-            state.databases = [];
-            state.collections = [];
-            state.dataTabs = {};
-            getDatabases();
-        };
-
-        const getDatabases = async () => {
-            const res = await mongoApi.databases.request({ id: state.mongoId });
-            state.databases = res.Databases;
-        };
-
-        const changeDatabase = () => {
-            state.collections = [];
-            state.collection = '';
-            state.dataTabs = {};
-            getCollections();
-        };
-
-        const getCollections = async () => {
-            state.collections = await mongoApi.collections.request({ id: state.mongoId, database: state.database });
-        };
-
-        const changeCollection = () => {
-            const collection = state.collection;
-            let dataTab = state.dataTabs[collection];
-            if (!dataTab) {
-                // 默认查询参数
-                const findParam = {
-                        filter: '{}',
-                        sort: '{"_id": -1}',
-                        skip: 0,
-                        limit: 12,
-                    },
-                    dataTab = {
-                        name: collection,
-                        datas: [],
-                        findParamStr: JSON.stringify(findParam),
-                        findParam,
-                    };
-                state.dataTabs[collection] = dataTab;
-            }
-            state.activeName = collection;
-            findCommand(collection);
-        };
-
-        const showFindDialog = (collection: string) => {
-            // 获取当前tab的索引位置，将其输入框失去焦点，防止输入以及重复获取焦点
-            const dataTabNames = Object.keys(state.dataTabs);
-            for (let i = 0; i < dataTabNames.length; i++) {
-                if (collection == dataTabNames[i]) {
-                    findParamInputRef.value[i].blur();
-                }
-            }
-
-            state.findDialog.findParam = state.dataTabs[collection].findParam;
-            state.findDialog.visible = true;
-        };
-
-        const confirmFindDialog = () => {
-            state.dataTabs[state.activeName].findParam = state.findDialog.findParam;
-            state.dataTabs[state.activeName].findParamStr = JSON.stringify(state.findDialog.findParam);
-            state.findDialog.visible = false;
-            findCommand(state.activeName);
-        };
-
-        const findCommand = async (collection: string) => {
-            const dataTab = state.dataTabs[collection];
-            const findParma = dataTab.findParam;
-            let filter, sort;
-            try {
-                filter = findParma.filter ? JSON.parse(findParma.filter) : {};
-                sort = findParma.sort ? JSON.parse(findParma.sort) : {};
-            } catch (e) {
-                ElMessage.error('filter或sort字段json字符串值错误。注意: json key需双引号');
-                return;
-            }
-            const datas = await mongoApi.findCommand.request({
-                id: state.mongoId,
-                database: state.database,
-                collection,
-                filter,
-                sort,
-                limit: findParma.limit || 12,
-                skip: findParma.skip || 0,
-            });
-            state.dataTabs[collection].datas = wrapDatas(datas);
-        };
-
-        /**
-         * 包装mongo查询回来的对象，即将其都转为json字符串并用value属性值描述，方便显示
-         */
-        const wrapDatas = (datas: any) => {
-            const wrapDatas = [] as any;
-            if (!datas) {
-                return wrapDatas;
-            }
-            for (let data of datas) {
-                wrapDatas.push({ value: JSON.stringify(data, null, 4) });
-            }
-            return wrapDatas;
-        };
-
-        const showInsertDocDialog = () => {
-            // tab数据中的第一个文档，因为该集合的文档都类似，故使用第一个文档赋值至需要新增的文档输入框，方便直接修改新增
-            const datasFirstDoc = state.dataTabs[state.activeName].datas[0];
-            let doc = '';
-            if (datasFirstDoc) {
-                // 移除_id字段，因为新增无需该字段
-                const docObj = JSON.parse(datasFirstDoc.value);
-                delete docObj['_id'];
-                doc = JSON.stringify(docObj, null, 4);
-            }
-            state.insertDocDialog.doc = doc;
-            state.insertDocDialog.visible = true;
-        };
-
-        const onInsertDoc = async () => {
-            let docObj;
-            try {
-                docObj = JSON.parse(state.insertDocDialog.doc);
-            } catch (e) {
-                ElMessage.error('文档内容错误,无法解析为json对象');
-            }
-            const res = await mongoApi.insertCommand.request({
-                id: state.mongoId,
-                database: state.database,
-                collection: state.activeName,
-                doc: docObj,
-            });
-            isTrue(res.InsertedID, '新增失败');
-            ElMessage.success('新增成功');
-            findCommand(state.activeName);
-            state.insertDocDialog.visible = false;
-        };
-
-        const onJsonEditor = (item: any) => {
-            state.jsoneditorDialog.item = item;
-            state.jsoneditorDialog.doc = item.value;
-            state.jsoneditorDialog.visible = true;
-        };
-
-        const onCloseJsonEditDialog = () => {
-            state.jsoneditorDialog.item.value = JSON.stringify(JSON.parse(state.jsoneditorDialog.doc), null, 4);
-        };
-
-        const onSaveDoc = async (doc: string) => {
-            const docObj = parseDocJsonString(doc);
-            const id = docObj._id;
-            notBlank(id, '文档的_id属性不存在');
-            delete docObj['_id'];
-            const res = await mongoApi.updateByIdCommand.request({
-                id: state.mongoId,
-                database: state.database,
-                collection: state.collection,
-                docId: id,
-                update: { $set: docObj },
-            });
-            isTrue(res.ModifiedCount == 1, '修改失败');
-            ElMessage.success('保存成功');
-        };
-
-        const onDeleteDoc = async (doc: string) => {
-            const docObj = parseDocJsonString(doc);
-            const id = docObj._id;
-            notBlank(id, '文档的_id属性不存在');
-            const res = await mongoApi.deleteByIdCommand.request({
-                id: state.mongoId,
-                database: state.database,
-                collection: state.collection,
-                docId: id,
-            });
-            isTrue(res.DeletedCount == 1, '删除失败');
-            ElMessage.success('删除成功');
-            findCommand(state.activeName);
-        };
-
-        /**
-         * 将json字符串解析为json对象
-         */
-        const parseDocJsonString = (doc: string) => {
-            try {
-                return JSON.parse(doc);
-            } catch (e) {
-                ElMessage.error('文档内容解析为json对象失败');
-                throw e;
-            }
-        };
-
-        /**
-         * 数据tab点击
-         */
-        const onDataTabClick = (tab: any) => {
-            const name = tab.props.name;
-            // 修改选择框绑定的表信息
-            state.collection = name;
-        };
-
-        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;
-            // 如果移除最后一个数据tab，则将选择框绑定的collection置空
-            if (activeName == targetName) {
-                state.collection = '';
-            } else {
-                state.collection = activeName;
-            }
-
-            delete state.dataTabs[targetName];
-        };
-
-        return {
-            ...toRefs(state),
-            findParamInputRef,
-            changeProjectEnv,
-            changeMongo,
-            changeDatabase,
-            changeCollection,
-            onDataTabClick,
-            removeDataTab,
-            showFindDialog,
-            confirmFindDialog,
-            findCommand,
-            showInsertDocDialog,
-            onInsertDoc,
-            onSaveDoc,
-            onDeleteDoc,
-            onJsonEditor,
-            onCloseJsonEditDialog,
-            formatByteSize,
-        };
+    insertDocDialog: {
+        visible: false,
+        doc: '',
+    },
+    jsonEditorDialog: {
+        visible: false,
+        doc: '',
+        item: {} as any,
     },
 });
+
+const {
+    findDialog,
+    insertDocDialog,
+    jsonEditorDialog,
+} = toRefs(state)
+
+/**
+ * instmap;  tagPaht -> mongo info[]
+ */
+const instMap: Map<string, any[]> = new Map();
+
+const getInsts = async () => {
+    const res = await mongoApi.mongoList.request({ pageNum: 1, pageSize: 1000, });
+    if (!res.total) return
+    for (const mongoInfo of res.list) {
+        const tagPath = mongoInfo.tagPath;
+        let mongoInsts = instMap.get(tagPath) || [];
+        mongoInsts.push(mongoInfo);
+        instMap.set(tagPath, mongoInsts);
+    }
+}
+
+/**
+ * 加载文件树节点
+ * @param {Object} node
+ * @param {Object} resolve
+ */
+const loadNode = async (node: any) => {
+    // 一级为tagPath
+    if (node.level === 0) {
+        await getInsts();
+        const tagPaths = instMap.keys();
+        const tagNodes = [];
+        for (let tagPath of tagPaths) {
+            tagNodes.push(new TagTreeNode(tagPath, tagPath));
+        }
+        return tagNodes;
+    }
+
+    const data = node.data;
+    const params = data.params;
+    const nodeType = data.type;
+
+    // 点击标签 -> 显示mongo信息列表
+    if (nodeType === TagTreeNode.TagPath) {
+        const mongoInfos = instMap.get(data.key)
+        return mongoInfos?.map((x: any) => {
+            return new TagTreeNode(`${data.key}.${x.id}`, x.name, NodeType.Mongo).withParams(x);
+        });
+    }
+
+    // 点击mongo -> 加载mongo数据库列表
+    if (nodeType === NodeType.Mongo) {
+        return await getDatabases(params);
+    }
+
+    // 点击数据库列表 -> 加载数据库下拥有的菜单列表
+    if (nodeType === NodeType.Dbs) {
+        return [new TagTreeNode(`${params.id}.${params.dbName}.mongo-coll`, '集合', NodeType.CollMenu).withParams(params)];
+    }
+
+    // 点击数据库集合节点 -> 加载集合列表
+    if (nodeType === NodeType.CollMenu) {
+        return await getCollections(params.id, params.dbName)
+    }
+
+    return [];
+};
+
+/**
+ * 获取实例的所有库信息
+ * @param inst 实例信息
+ */
+const getDatabases = async (inst: any) => {
+    const res = await mongoApi.databases.request({ id: inst.id });
+    return res.Databases.map((x: any) => {
+        const dbName = x.Name;
+        return new TagTreeNode(`${inst.id}.${dbName}`, dbName, NodeType.Dbs).withParams({
+            id: inst.id,
+            dbName,
+            size: x.SizeOnDisk,
+        })
+    })
+}
+
+/**
+ * 获取集合列表信息
+ * @param inst
+ */
+const getCollections = async (id: any, database: string) => {
+    const colls = await mongoApi.collections.request({ id, database });
+    return colls.map((x: any) => {
+        return new TagTreeNode(`${id}.${database}.${x}`, x, NodeType.Coll).withIsLeaf(true).withParams({
+            id,
+            database,
+            collection: x,
+        });
+    });
+}
+
+const nodeClick = (data: any) => {
+    // 点击集合
+    if (data.type === NodeType.Coll) {
+        const { id, database, collection } = data.params;
+        changeCollection(id, database, collection);
+    }
+}
+
+const changeCollection = (id: any, schema: string, collection: string) => {
+    const label = `${id}:\`${schema}\`.${collection}`;
+    let dataTab = state.dataTabs[label];
+    if (!dataTab) {
+        // 默认查询参数
+        const findParam = {
+            filter: '{}',
+            sort: '{"_id": -1}',
+            skip: 0,
+            limit: 12,
+        };
+        state.dataTabs[label] = {
+            key: label,
+            label: label,
+            name: label,
+            mongoId: id,
+            database: schema,
+            collection,
+            datas: [],
+            findParamStr: JSON.stringify(findParam),
+            findParam,
+        };
+    }
+    state.activeName = label;
+    findCommand(label);
+};
+
+const showFindDialog = (key: string) => {
+    // 获取当前tab的索引位置，将其输入框失去焦点，防止输入以及重复获取焦点
+    const dataTabNames = Object.keys(state.dataTabs);
+    for (let i = 0; i < dataTabNames.length; i++) {
+        if (key == dataTabNames[i]) {
+            findParamInputRef.value[i].blur();
+        }
+    }
+
+    state.findDialog.findParam = state.dataTabs[key].findParam;
+    state.findDialog.visible = true;
+};
+
+const confirmFindDialog = () => {
+    state.dataTabs[state.activeName].findParam = state.findDialog.findParam;
+    state.dataTabs[state.activeName].findParamStr = JSON.stringify(state.findDialog.findParam);
+    state.findDialog.visible = false;
+    findCommand(state.activeName);
+};
+
+const findCommand = async (key: string) => {
+    const dataTab = getNowDataTab();
+    const findParma = dataTab.findParam;
+    let filter, sort;
+    try {
+        filter = findParma.filter ? JSON.parse(findParma.filter) : {};
+        sort = findParma.sort ? JSON.parse(findParma.sort) : {};
+    } catch (e) {
+        ElMessage.error('filter或sort字段json字符串值错误。注意: json key需双引号');
+        return;
+    }
+    const datas = await mongoApi.findCommand.request({
+        id: dataTab.mongoId,
+        database: dataTab.database,
+        collection: dataTab.collection,
+        filter,
+        sort,
+        limit: findParma.limit || 12,
+        skip: findParma.skip || 0,
+    });
+    state.dataTabs[key].datas = wrapDatas(datas);
+};
+
+/**
+ * 包装mongo查询回来的对象，即将其都转为json字符串并用value属性值描述，方便显示
+ */
+const wrapDatas = (datas: any) => {
+    const wrapDatas = [] as any;
+    if (!datas) {
+        return wrapDatas;
+    }
+    for (let data of datas) {
+        wrapDatas.push({ value: JSON.stringify(data, null, 4) });
+    }
+    return wrapDatas;
+};
+
+const showInsertDocDialog = () => {
+    // tab数据中的第一个文档，因为该集合的文档都类似，故使用第一个文档赋值至需要新增的文档输入框，方便直接修改新增
+    const datasFirstDoc = state.dataTabs[state.activeName].datas[0];
+    let doc = '';
+    if (datasFirstDoc) {
+        // 移除_id字段，因为新增无需该字段
+        const docObj = JSON.parse(datasFirstDoc.value);
+        delete docObj['_id'];
+        doc = JSON.stringify(docObj, null, 4);
+    }
+    state.insertDocDialog.doc = doc;
+    state.insertDocDialog.visible = true;
+};
+
+const onInsertDoc = async () => {
+    let docObj;
+    try {
+        docObj = JSON.parse(state.insertDocDialog.doc);
+    } catch (e) {
+        ElMessage.error('文档内容错误,无法解析为json对象');
+    }
+    const dataTab = getNowDataTab();
+    const res = await mongoApi.insertCommand.request({
+        id: dataTab.mongoId,
+        database: dataTab.database,
+        collection: dataTab.collection,
+        doc: docObj,
+    });
+    isTrue(res.InsertedID, '新增失败');
+    ElMessage.success('新增成功');
+    findCommand(state.activeName);
+    state.insertDocDialog.visible = false;
+};
+
+const onJsonEditor = (item: any) => {
+    state.jsonEditorDialog.item = item;
+    state.jsonEditorDialog.doc = item.value;
+    state.jsonEditorDialog.visible = true;
+};
+
+const onCloseJsonEditDialog = () => {
+    state.jsonEditorDialog.item.value = JSON.stringify(JSON.parse(state.jsonEditorDialog.doc), null, 4);
+};
+
+const onSaveDoc = async (doc: string) => {
+    const docObj = parseDocJsonString(doc);
+    const id = docObj._id;
+    notBlank(id, '文档的_id属性不存在');
+    delete docObj['_id'];
+    const dataTab = getNowDataTab();
+    const res = await mongoApi.updateByIdCommand.request({
+        id: dataTab.mongoId,
+        database: dataTab.database,
+        collection: dataTab.collection,
+        docId: id,
+        update: { $set: docObj },
+    });
+    isTrue(res.ModifiedCount == 1, '修改失败');
+    ElMessage.success('保存成功');
+};
+
+const onDeleteDoc = async (doc: string) => {
+    const docObj = parseDocJsonString(doc);
+    const id = docObj._id;
+    notBlank(id, '文档的_id属性不存在');
+    const dataTab = getNowDataTab();
+    const res = await mongoApi.deleteByIdCommand.request({
+        id: dataTab.mongoId,
+        database: dataTab.database,
+        collection: dataTab.collection,
+        docId: id,
+    });
+    isTrue(res.DeletedCount == 1, '删除失败');
+    ElMessage.success('删除成功');
+    findCommand(state.activeName);
+};
+
+/**
+ * 将json字符串解析为json对象
+ */
+const parseDocJsonString = (doc: string) => {
+    try {
+        return JSON.parse(doc);
+    } catch (e) {
+        ElMessage.error('文档内容解析为json对象失败');
+        throw e;
+    }
+};
+
+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 getNowDataTab = () => {
+    return state.dataTabs[state.activeName]
+}
+
 </script>
 
-<style>
+<style lang="scss">
 .mongo-doc-btns {
     position: absolute;
     z-index: 2;
@@ -448,4 +502,14 @@ export default defineComponent({
     top: 2px;
     max-width: 120px;
 }
+
+#mongo-tab {
+    .el-tabs__header {
+        margin: 0 0 5px;
+
+        .el-tabs__item {
+            padding: 0 5px;
+        }
+    }
+}
 </style>

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

@@ -1,48 +1,29 @@
 <template>
     <div>
-        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" width="38%" :destroy-on-close="true">
+        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :close-on-click-modal="false" width="38%"
+            :destroy-on-close="true">
             <el-form :model="form" ref="mongoForm" :rules="rules" label-width="85px">
-                <el-form-item prop="projectId" label="项目" required>
-                    <el-select style="width: 100%" v-model="form.projectId" placeholder="请选择项目" @change="changeProject" filterable>
-                        <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
+                <el-tabs v-model="tabActiveName">
+                    <el-tab-pane label="基础信息" name="basic">
+                        <el-form-item prop="tagId" label="标签:" required>
+                            <tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
+                        </el-form-item>
 
-                <el-form-item prop="envId" label="环境" required>
-                    <el-select @change="changeEnv" style="width: 100%" v-model="form.envId" placeholder="请选择环境">
-                        <el-option v-for="item in envs" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
-                <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="uri" label="uri" required>
-                    <el-input
-                        type="textarea"
-                        :rows="2"
-                        v-model.trim="form.uri"
-                        placeholder="形如 mongodb://username:password@host1:port1"
-                        auto-complete="off"
-                    ></el-input>
-                </el-form-item>
+                        <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="uri" label="uri" required>
+                            <el-input type="textarea" :rows="2" v-model.trim="form.uri"
+                                placeholder="形如 mongodb://username:password@host1:port1" auto-complete="off"></el-input>
+                        </el-form-item>
+                    </el-tab-pane>
 
-                <el-form-item prop="enableSshTunnel" label="SSH隧道:">
-                    <el-col :span="3">
-                        <el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
-                    </el-col>
-                    <el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
-                    <el-col :span="19" v-if="form.enableSshTunnel == 1">
-                        <el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
-                            <el-option
-                                v-for="item in sshTunnelMachineList"
-                                :key="item.id"
-                                :label="`${item.ip}:${item.port} [${item.name}]`"
-                                :value="item.id"
-                            >
-                            </el-option>
-                        </el-select>
-                    </el-col>
-                </el-form-item>
+                    <el-tab-pane label="其他配置" name="other">
+                        <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>
@@ -55,165 +36,115 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
 import { mongoApi } from './api';
-import { projectApi } from '../project/api.ts';
-import { machineApi } from '../machine/api.ts';
 import { ElMessage } from 'element-plus';
+import TagSelect from '../component/TagSelect.vue';
+import SshTunnelSelect from '../component/SshTunnelSelect.vue';
 
-export default defineComponent({
-    name: 'MongoEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        projects: {
-            type: Array,
-        },
-        mongo: {
-            type: [Boolean, Object],
-        },
-        title: {
-            type: String,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const mongoForm: any = ref(null);
-        const state = reactive({
-            dialogVisible: false,
-            projects: [],
-            envs: [],
-            sshTunnelMachineList: [],
-            form: {
-                id: null,
-                name: null,
-                uri: null,
-                enableSshTunnel: -1,
-                sshTunnelMachineId: null,
-                project: null,
-                projectId: null,
-                envId: null,
-                env: null,
-            },
-            btnLoading: false,
-            rules: {
-                projectId: [
-                    {
-                        required: true,
-                        message: '请选择项目',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                envId: [
-                    {
-                        required: true,
-                        message: '请选择环境',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                name: [
-                    {
-                        required: true,
-                        message: '请输入名称',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                uri: [
-                    {
-                        required: true,
-                        message: '请输入mongo uri',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-            },
-        });
-
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-            if (!state.dialogVisible) {
-                return;
-            }
-            state.projects = newValue.projects;
-            if (newValue.mongo) {
-                getEnvs(newValue.mongo.projectId);
-                state.form = { ...newValue.mongo };
-            } else {
-                state.envs = [];
-                state.form = { db: 0 } as any;
-            }
-            getSshTunnelMachines();
-        });
-
-        const getSshTunnelMachines = async () => {
-            if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
-                const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
-                state.sshTunnelMachineList = res.list;
-            }
-        };
-
-        const getEnvs = async (projectId: any) => {
-            state.envs = await projectApi.projectEnvs.request({ projectId });
-        };
-
-        const changeProject = (projectId: number) => {
-            for (let p of state.projects as any) {
-                if (p.id == projectId) {
-                    state.form.project = p.name;
-                }
-            }
-            state.form.envId = null;
-            state.form.env = null;
-            state.envs = [];
-            getEnvs(projectId);
-        };
-
-        const changeEnv = (envId: number) => {
-            for (let p of state.envs as any) {
-                if (p.id == envId) {
-                    state.form.env = p.name;
-                }
-            }
-        };
-
-        const btnOk = async () => {
-            mongoForm.value.validate(async (valid: boolean) => {
-                if (valid) {
-                    const reqForm = { ...state.form };
-                    // reqForm.uri = await RsaEncrypt(reqForm.uri);
-                    mongoApi.saveMongo.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');
-        };
-
-        return {
-            ...toRefs(state),
-            mongoForm,
-            changeProject,
-            getSshTunnelMachines,
-            changeEnv,
-            btnOk,
-            cancel,
-        };
+    mongo: {
+        type: [Boolean, Object],
     },
+    title: {
+        type: String,
+    },
+})
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
+
+const rules = {
+    tagId: [
+        {
+            required: true,
+            message: '请选择标签',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    name: [
+        {
+            required: true,
+            message: '请输入名称',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    uri: [
+        {
+            required: true,
+            message: '请输入mongo uri',
+            trigger: ['change', 'blur'],
+        },
+    ],
+}
+
+const mongoForm: any = ref(null);
+const state = reactive({
+    dialogVisible: false,
+    tabActiveName: 'basic',
+    form: {
+        id: null,
+        name: null,
+        uri: null,
+        sshTunnelMachineId: null as any,
+        tagId: null as any,
+        tagPath: null as any,
+    },
+    btnLoading: false,
 });
+
+const {
+    dialogVisible,
+    tabActiveName,
+    form,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, async (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (!state.dialogVisible) {
+        return;
+    }
+    state.tabActiveName = 'basic';
+    if (newValue.mongo) {
+        state.form = { ...newValue.mongo };
+    } else {
+        state.form = { db: 0 } as any;
+    }
+});
+
+const btnOk = async () => {
+    mongoForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            const reqForm = { ...state.form };
+            if (!state.form.sshTunnelMachineId || state.form.sshTunnelMachineId <= 0) {
+                reqForm.sshTunnelMachineId = -1
+            }
+            // reqForm.uri = await RsaEncrypt(reqForm.uri);
+            mongoApi.saveMongo.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>
+<style lang="scss"></style>

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

@@ -0,0 +1,178 @@
+<template>
+    <tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags" ref="menuRef">
+        <template #submenu="props">
+            <el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'mongo-instance-' + inst.id"
+                :key="'mongo-instance-' + inst.id" @click.stop="changeInstance(inst, () => { })">
+                <template #title>
+                    <el-popover placement="right-start" title="mongo数据库实例信息" trigger="hover" :width="210">
+                        <template #reference>
+                            <span>&nbsp;&nbsp;<el-icon>
+                                    <MostlyCloudy color="#409eff" />
+                                </el-icon>{{ inst.name }}</span>
+                        </template>
+                        <template #default>
+                            <el-form class="instances-pop-form" label-width="55px" :size="'small'">
+                                <el-form-item label="名称:">{{ inst.name }}</el-form-item>
+                                <el-form-item label="链接:">{{ inst.uri }}</el-form-item>
+                            </el-form>
+                        </template>
+                    </el-popover>
+                </template>
+                <!-- 第三级：数据库 -->
+                <el-sub-menu v-for="db in instances.dbs[inst.id]" :index="inst.id + db.Name" :key="inst.id + db.Name"
+                    :class="state.nowSchema === (inst.id + db.Name) && 'checked'"
+                    @click.stop="changeSchema(inst, db.Name)">
+                    <template #title>
+                        &nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                            <Coin color="#67c23a" />
+                        </el-icon>
+                        <span class="checked-schema">
+                            {{ db.Name }}
+                            <span style="color: #8492a6;font-size: 13px">[{{
+                                formatByteSize(db.SizeOnDisk)
+                            }}]</span>
+                        </span>
+                    </template>
+                    <!-- 第四级 01：表 -->
+                    <el-sub-menu :index="inst.id + db.Name + '-table'">
+                        <template #title>
+                            <div style="width: 100%" @click="loadTableNames(inst, db.Name, () => { })">
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                    <Calendar color="#409eff" />
+                                </el-icon>
+                                <span>集合</span>
+                                <el-icon v-show="state.loading[inst.id + db.Name]" class="is-loading">
+                                    <Loading />
+                                </el-icon>
+                            </div>
+                        </template>
+                        <el-menu-item :index="inst.id + db.Name + '-tableSearch'"
+                            :key="inst.id + db.Name + '-tableSearch'">
+                            <template #title>
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                                <el-input size="small" placeholder="过滤" clearable
+                                    @change="filterTableName(inst.id, db.Name)"
+                                    @keyup="(e: any) => filterTableName(inst.id, db.Name, e)"
+                                    v-model="state.filterParam[inst.id + db.Name]" />
+                            </template>
+                        </el-menu-item>
+
+                        <template v-for="tb in instances.tables[inst.id + db.Name]">
+                            <el-menu-item :index="inst.id + db.Name + tb.tableName"
+                                :key="inst.id + db.Name + tb.tableName" v-if="tb.show"
+                                @click="loadTableData(inst, db.Name, tb.tableName)">
+                                <template #title>
+                                    <div style="width: 100%">
+                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
+                                            <Calendar color="#409eff" />
+                                        </el-icon>
+                                        <span :title="tb.tableComment || ''">{{ tb.tableName }}</span>
+                                    </div>
+                                </template>
+                            </el-menu-item>
+                        </template>
+                    </el-sub-menu>
+                </el-sub-menu>
+            </el-sub-menu>
+        </template>
+    </tag-menu>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeMount, reactive } from 'vue';
+import { formatByteSize } from '@/common/utils/format';
+import TagMenu from '../component/TagMenu.vue';
+
+const props = defineProps({
+    instances: {
+        type: Object, required: true
+    },
+})
+
+const emits = defineEmits(['initLoadInstances', 'changeInstance', 'loadTableNames', 'loadTableData', 'changeSchema'])
+
+onBeforeMount(async () => {
+    await initLoadInstances()
+    setHeight()
+})
+
+const setHeight = () => {
+    state.instanceMenuMaxHeight = window.innerHeight - 115 + 'px';
+}
+
+const state = reactive({
+    instanceMenuMaxHeight: '800px',
+    nowSchema: '',
+    filterParam: {},
+    loading: {},
+
+})
+
+/**
+ * 初始化加载实例数据
+ */
+const initLoadInstances = () => {
+    emits('initLoadInstances')
+}
+
+/**
+ * 改变选中的数据库实例
+ * @param inst 选中的实例对象
+ * @param fn 选中的实例对象后的回调事件
+ */
+const changeInstance = (inst: any, fn: Function) => {
+    emits('changeInstance', inst, fn)
+}
+/**
+ * 改变选中的数据库schema
+ * @param inst 选中的实例对象
+ * @param schema 选中的数据库schema
+ */
+const changeSchema = (inst: any, schema: string) => {
+    state.nowSchema = inst.id + schema
+    emits('changeSchema', inst, schema)
+}
+/**
+ * 加载schema下所有表
+ * @param inst 数据库实例
+ * @param fn 加载表名后的回调函数，参数：表名list
+ * @param schema database名
+ */
+const loadTableNames = async (inst: any, schema: string, fn: Function) => {
+    state.loading[inst.id + schema] = true
+    await emits('loadTableNames', inst, schema, (res: any) => {
+        state.loading[inst.id + schema] = false
+        fn && fn(res)
+    })
+}
+/**
+ * 加载选中表数据
+ * @param inst 数据库实例
+ * @param schema database名
+ * @param tableName 表名
+ */
+const loadTableData = (inst: any, schema: string, tableName: string) => {
+    emits('loadTableData', inst, schema, tableName)
+}
+
+const filterTableName = (instId: number, schema: string, event?: any) => {
+    if (event) {
+        state.filterParam[instId + schema] = event.target.value
+    }
+    let param = state.filterParam[instId + schema] as string
+    param = param?.replace('/', '\/')
+    const key = instId + schema;
+    props.instances.tables[key].forEach((a: any) => {
+        a.show = param ? eval('/' + param.split('').join('[_\w]*') + '[_\w]*/ig').test(a.tableName) : true
+    })
+}
+
+</script>
+
+<style lang="scss">
+.instances-pop-form {
+    .el-form-item {
+        margin-bottom: unset;
+    }
+}
+</style>

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

@@ -2,11 +2,13 @@
     <div>
         <el-card>
             <el-button type="primary" icon="plus" @click="editMongo(true)" plain>添加</el-button>
-            <el-button type="primary" icon="edit" :disabled="currentId == null" @click="editMongo(false)" plain>编辑</el-button>
-            <el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteMongo" plain>删除</el-button>
+            <el-button type="primary" icon="edit" :disabled="currentId == null" @click="editMongo(false)" plain>编辑
+            </el-button>
+            <el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteMongo" plain>删除
+            </el-button>
             <div style="float: right">
-                <el-select @focus="getProjects" v-model="query.projectId" placeholder="请选择项目" filterable clearable>
-                    <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
+                <el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" filterable clearable>
+                    <el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
                 </el-select>
                 <el-button class="ml5" @click="search" type="success" icon="search"></el-button>
             </div>
@@ -18,8 +20,14 @@
                         </el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="project" label="项目" width></el-table-column>
-                <el-table-column prop="env" label="环境" width></el-table-column>
+                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                        <tag-info :tag-path="scope.row.tagPath" />
+                        <span class="ml5">
+                            {{ scope.row.tagPath }}
+                        </span>
+                    </template>
+                </el-table-column>
                 <el-table-column prop="name" label="名称" width></el-table-column>
                 <el-table-column prop="uri" label="连接uri" min-width="150" show-overflow-tooltip>
                     <template #default="scope">
@@ -28,26 +36,22 @@
                 </el-table-column>
                 <el-table-column prop="createTime" label="创建时间" min-width="150">
                     <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
+                        {{ dateFormat(scope.row.createTime) }}
                     </template>
                 </el-table-column>
                 <el-table-column prop="creator" label="创建人"></el-table-column>
 
                 <el-table-column label="操作" width>
                     <template #default="scope">
-                        <el-link type="primary" @click="showDatabases(scope.row.id)" plain size="small" :underline="false">数据库</el-link>
+                        <el-link type="primary" @click="showDatabases(scope.row.id)" plain size="small"
+                            :underline="false">数据库</el-link>
                     </template>
                 </el-table-column>
             </el-table>
             <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: right"
-                    @current-change="handlePageChange"
-                    :total="total"
-                    layout="prev, pager, next, total, jumper"
-                    v-model:current-page="query.pageNum"
-                    :page-size="query.pageSize"
-                ></el-pagination>
+                <el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
+                    layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
+                    :page-size="query.pageSize"></el-pagination>
             </el-row>
         </el-card>
 
@@ -61,16 +65,19 @@
                 </el-table-column>
                 <el-table-column min-width="80" property="Empty" label="是否为空" />
 
-                <el-table-column min-width="80" 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-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-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-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 }}
@@ -119,7 +126,8 @@
                 <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-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>
@@ -130,7 +138,8 @@
                 </el-table-column>
             </el-table>
 
-            <el-dialog width="700px" :title="collectionsDialog.statsDialog.title" v-model="collectionsDialog.statsDialog.visible">
+            <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 }}
@@ -178,241 +187,230 @@
             </template>
         </el-dialog>
 
-        <mongo-edit
-            @val-change="valChange"
-            :projects="projects"
-            :title="mongoEditDialog.title"
-            v-model:visible="mongoEditDialog.visible"
-            v-model:mongo="mongoEditDialog.data"
-        ></mongo-edit>
+        <mongo-edit @val-change="valChange" :title="mongoEditDialog.title" v-model:visible="mongoEditDialog.visible"
+            v-model:mongo="mongoEditDialog.data"></mongo-edit>
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { mongoApi } from './api';
-import { toRefs, reactive, defineComponent, onMounted } from 'vue';
+import { toRefs, reactive, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { projectApi } from '../project/api.ts';
+import { tagApi } from '../tag/api.ts';
 import MongoEdit from './MongoEdit.vue';
 import { formatByteSize } from '@/common/utils/format';
+import { dateFormat } from '@/common/utils/date';
+import TagInfo from '../component/TagInfo.vue';
 
-export default defineComponent({
-    name: 'MongoList',
-    components: {
-        MongoEdit,
+const state = reactive({
+    tags: [],
+    dbOps: {
+        dbId: 0,
+        db: '',
     },
-    setup() {
-        const state = reactive({
-            projects: [],
-            list: [],
-            total: 0,
-            currentId: null,
-            currentData: null,
-            query: {
-                pageNum: 1,
-                pageSize: 10,
-                prjectId: null,
-                clusterId: null,
-            },
-            mongoEditDialog: {
-                visible: false,
-                data: null,
-                title: '新增mongo',
-            },
-            databaseDialog: {
-                visible: false,
-                data: [],
-                title: '',
-                statsDialog: {
-                    visible: false,
-                    data: {},
-                    title: '',
-                },
-            },
-            collectionsDialog: {
-                database: '',
-                visible: false,
-                data: [],
-                title: '',
-                statsDialog: {
-                    visible: false,
-                    data: {},
-                    title: '',
-                },
-            },
-            createCollectionDialog: {
-                visible: false,
-                form: {
-                    name: '',
-                },
-            },
-        });
-
-        onMounted(async () => {
-            search();
-        });
-
-        const handlePageChange = (curPage: number) => {
-            state.query.pageNum = curPage;
-            search();
-        };
-
-        const choose = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.currentId = item.id;
-            state.currentData = item;
-        };
-
-        const showDatabases = async (id: number) => {
-            state.databaseDialog.data = (await mongoApi.databases.request({ id })).Databases;
-            state.databaseDialog.title = `数据库列表`;
-            state.databaseDialog.visible = true;
-        };
-
-        const showDatabaseStats = async (dbName: string) => {
-            state.databaseDialog.statsDialog.data = await mongoApi.runCommand.request({
-                id: state.currentId,
-                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.currentId, 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.currentId,
-                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.currentId,
-                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.currentId,
-                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 () => {
-            try {
-                await ElMessageBox.confirm(`确定删除该mongo?`, '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                });
-                await mongoApi.deleteMongo.request({ id: state.currentId });
-                ElMessage.success('删除成功');
-                state.currentData = null;
-                state.currentId = null;
-                search();
-            } catch (err) {}
-        };
-
-        const search = async () => {
-            const res = await mongoApi.mongoList.request(state.query);
-            state.list = res.list;
-            state.total = res.total;
-        };
-
-        const getProjects = async () => {
-            state.projects = await projectApi.accountProjects.request(null);
-        };
-
-        const editMongo = async (isAdd = false) => {
-            await getProjects();
-            if (isAdd) {
-                state.mongoEditDialog.data = null;
-                state.mongoEditDialog.title = '新增mongo';
-            } else {
-                state.mongoEditDialog.data = state.currentData;
-                state.mongoEditDialog.title = '修改mongo';
-            }
-            state.mongoEditDialog.visible = true;
-        };
-
-        const valChange = () => {
-            state.currentId = null;
-            state.currentData = null;
-            search();
-        };
-
-        return {
-            ...toRefs(state),
-            getProjects,
-            search,
-            handlePageChange,
-            choose,
-            showDatabases,
-            showDatabaseStats,
-            showCollections,
-            showCollectionStats,
-            onDeleteCollection,
-            showCreateCollectionDialog,
-            onCreateCollection,
-            formatByteSize,
-            deleteMongo,
-            editMongo,
-            valChange,
-        };
+    list: [],
+    total: 0,
+    currentId: null,
+    currentData: null as any,
+    query: {
+        pageNum: 1,
+        pageSize: 10,
+        tagPath: null,
+    },
+    mongoEditDialog: {
+        visible: false,
+        data: null as any,
+        title: '新增mongo',
+    },
+    databaseDialog: {
+        visible: 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,
+    currentId,
+    query,
+    mongoEditDialog,
+    databaseDialog,
+    collectionsDialog,
+    createCollectionDialog,
+} = toRefs(state)
+
+onMounted(async () => {
+    search();
+});
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    search();
+};
+
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.currentId = item.id;
+    state.currentData = item;
+};
+
+const showDatabases = async (id: number) => {
+    // state.query.tagPath = row.tagPath
+    state.dbOps.dbId = id
+
+    state.databaseDialog.data = (await mongoApi.databases.request({ id })).Databases;
+    state.databaseDialog.title = `数据库列表`;
+    state.databaseDialog.visible = true;
+};
+
+const showDatabaseStats = async (dbName: string) => {
+    state.databaseDialog.statsDialog.data = await mongoApi.runCommand.request({
+        id: state.currentId,
+        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.currentId, 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.currentId,
+        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.currentId,
+        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.currentId,
+        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 () => {
+    try {
+        await ElMessageBox.confirm(`确定删除该mongo?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await mongoApi.deleteMongo.request({ id: state.currentId });
+        ElMessage.success('删除成功');
+        state.currentData = null;
+        state.currentId = null;
+        search();
+    } catch (err) { }
+};
+
+const search = async () => {
+    const res = await mongoApi.mongoList.request(state.query);
+    state.list = res.list;
+    state.total = res.total;
+};
+
+const getTags = async () => {
+    state.tags = await tagApi.getAccountTags.request(null);
+};
+
+const editMongo = async (isAdd = false) => {
+    if (isAdd) {
+        state.mongoEditDialog.data = null;
+        state.mongoEditDialog.title = '新增mongo';
+    } else {
+        state.mongoEditDialog.data = state.currentData;
+        state.mongoEditDialog.title = '修改mongo';
+    }
+    state.mongoEditDialog.visible = true;
+};
+
+const valChange = () => {
+    state.currentId = null;
+    state.currentData = null;
+    search();
+};
+
 </script>
 
 <style>
+
 </style>

mayfly_go_web/src/views/ops/project/ProjectList.vue

@@ -1,443 +0,0 @@
-<template>
-    <div class="project-list">
-        <el-card>
-            <div>
-                <el-button @click="showAddProjectDialog" v-auth="permissions.saveProject" type="primary" icon="plus">添加</el-button>
-                <el-button
-                    @click="showAddProjectDialog(chooseData)"
-                    v-auth="permissions.saveProject"
-                    :disabled="chooseId == null"
-                    type="primary"
-                    icon="edit"
-                    >编辑</el-button
-                >
-                <el-button @click="showMembers(chooseData)" :disabled="chooseId == null" type="success" icon="user">成员管理</el-button>
-
-                <el-button @click="showEnv(chooseData)" :disabled="chooseId == null" type="info" icon="setting">环境管理</el-button>
-
-                <el-button v-auth="permissions.delProject" @click="delProject" :disabled="chooseId == null" type="danger" icon="delete"
-                    >删除</el-button
-                >
-
-                <div style="float: right">
-                    <el-input class="mr2" placeholder="请输入项目名！" style="width: 200px" v-model="query.name" @clear="search" clearable></el-input>
-                    <el-button @click="search" type="success" icon="search"></el-button>
-                </div>
-            </div>
-            <el-table :data="projects" @current-change="choose" ref="table" style="width: 100%">
-                <el-table-column label="选择" width="55px">
-                    <template #default="scope">
-                        <el-radio v-model="chooseId" :label="scope.row.id">
-                            <i></i>
-                        </el-radio>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="name" label="项目名"></el-table-column>
-                <el-table-column prop="remark" label="描述" min-width="180px" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createTime" label="创建时间">
-                    <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
-                    </template>
-                </el-table-column>
-                <el-table-column prop="creator" label="创建者"> </el-table-column>
-                <!-- <el-table-column label="查看更多" min-width="80px">
-                <template #default="scope">
-                    <el-link @click.prevent="showMembers(scope.row)" type="success">成员</el-link>
-
-                    <el-link class="ml5" @click.prevent="showEnv(scope.row)" type="info">环境</el-link>
-                </template>
-            </el-table-column> -->
-            </el-table>
-            <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: right"
-                    @current-change="handlePageChange"
-                    :total="total"
-                    layout="prev, pager, next, total, jumper"
-                    v-model:current-page="query.pageNum"
-                    :page-size="query.pageSize"
-                ></el-pagination>
-            </el-row>
-        </el-card>
-
-        <el-dialog width="400px" title="项目编辑" :before-close="cancelAddProject" v-model="addProjectDialog.visible">
-            <el-form :model="addProjectDialog.form" label-width="70px">
-                <el-form-item prop="name" label="项目名:" required>
-                    <el-input :disabled="addProjectDialog.form.id ? true : false" v-model="addProjectDialog.form.name" auto-complete="off"></el-input>
-                </el-form-item>
-                <el-form-item label="描述:">
-                    <el-input v-model="addProjectDialog.form.remark" auto-complete="off"></el-input>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="cancelAddProject()">取 消</el-button>
-                    <el-button @click="addProject" type="primary">确 定</el-button>
-                </div>
-            </template>
-        </el-dialog>
-
-        <el-dialog width="500px" :title="showEnvDialog.title" v-model="showEnvDialog.visible">
-            <div class="toolbar">
-                <el-button @click="showAddEnvDialog" v-auth="permissions.saveMember" type="primary" icon="plus">添加</el-button>
-                <el-button @click="deleteEnv" v-auth="permissions.delProject" :disabled="showEnvDialog.chooseId == null" type="danger" icon="delete"
-                    >删除</el-button
-                >
-            </div>
-            <el-table @current-change="chooseEnv" border :data="showEnvDialog.envs">
-                <el-table-column label="选择" width="50px">
-                    <template #default="scope">
-                        <el-radio v-model="showEnvDialog.chooseId" :label="scope.row.id">
-                            <i></i>
-                        </el-radio>
-                    </template>
-                </el-table-column>
-                <el-table-column property="name" label="环境名" width="125"></el-table-column>
-                <el-table-column property="remark" label="描述" width="125"></el-table-column>
-                <el-table-column property="createTime" label="创建时间">
-                    <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <el-dialog width="400px" title="添加环境" :before-close="cancelAddEnv" v-model="showEnvDialog.addVisible">
-                <el-form :model="showEnvDialog.envForm" label-width="70px">
-                    <el-form-item prop="name" label="环境名:" required>
-                        <el-input v-model="showEnvDialog.envForm.name" auto-complete="off"></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 class="dialog-footer">
-                        <el-button @click="cancelAddEnv()">取 消</el-button>
-                        <el-button v-auth="permissions.saveEnv" @click="addEnv" type="primary" :loading="btnLoading">确 定</el-button>
-                    </div>
-                </template>
-            </el-dialog>
-        </el-dialog>
-
-        <el-dialog width="500px" :title="showMemDialog.title" v-model="showMemDialog.visible">
-            <div class="toolbar">
-                <el-button v-auth="permissions.saveMember" @click="showAddMemberDialog()" type="primary" icon="plus">添加</el-button>
-                <el-button v-auth="permissions.delMember" @click="deleteMember" :disabled="showMemDialog.chooseId == null" type="danger" icon="delete"
-                    >移除</el-button
-                >
-            </div>
-            <el-table @current-change="chooseMember" border :data="showMemDialog.members.list">
-                <el-table-column label="选择" width="50px">
-                    <template #default="scope">
-                        <el-radio v-model="showMemDialog.chooseId" :label="scope.row.id">
-                            <i></i>
-                        </el-radio>
-                    </template>
-                </el-table-column>
-                <el-table-column property="username" label="账号" width="125"></el-table-column>
-                <el-table-column property="createTime" label="加入时间">
-                    <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
-                    </template>
-                </el-table-column>
-                <el-table-column property="creator" label="分配者" width="125"></el-table-column>
-            </el-table>
-            <el-pagination
-                @current-change="setMemebers"
-                style="text-align: center"
-                background
-                layout="prev, pager, next, total, jumper"
-                :total="showMemDialog.members.total"
-                v-model:current-page="showMemDialog.query.pageNum"
-                :page-size="showMemDialog.query.pageSize"
-            />
-
-            <el-dialog width="400px" title="添加成员" :before-close="cancelAddMember" v-model="showMemDialog.addVisible">
-                <el-form :model="showMemDialog.memForm" label-width="70px">
-                    <el-form-item label="账号:">
-                        <el-select
-                            style="width: 100%"
-                            remote
-                            :remote-method="getAccount"
-                            v-model="showMemDialog.memForm.accountId"
-                            filterable
-                            placeholder="请输入账号模糊搜索并选择"
-                        >
-                            <el-option v-for="item in showMemDialog.accounts" :key="item.id" :label="item.username" :value="item.id"> </el-option>
-                        </el-select>
-                    </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 class="dialog-footer">
-                        <el-button @click="cancelAddMember()">取 消</el-button>
-                        <el-button v-auth="permissions.saveMember" @click="addMember" type="primary" :loading="btnLoading">确 定</el-button>
-                    </div>
-                </template>
-            </el-dialog>
-        </el-dialog>
-    </div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
-import { projectApi } from './api';
-import { accountApi } from '../../system/api';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { notEmpty, notNull } from '@/common/assert';
-export default defineComponent({
-    name: 'ProjectList',
-    components: {},
-    setup() {
-        const state = reactive({
-            permissions: {
-                saveProject: 'project:save',
-                delProject: 'project:del',
-                saveMember: 'project:member:add',
-                delMember: 'project:member:del',
-                saveEnv: 'project:env:add',
-            },
-            query: {
-                pageNum: 1,
-                pageSize: 10,
-                name: null,
-            },
-            total: 0,
-            projects: [],
-            btnLoading: false,
-            chooseId: null as any,
-            chooseData: null as any,
-            addProjectDialog: {
-                title: '新增项目',
-                visible: false,
-                form: { name: '', remark: '' },
-            },
-            showEnvDialog: {
-                visible: false,
-                chooseId: null,
-                chooseData: null,
-                envs: [],
-                title: '',
-                addVisible: false,
-                envForm: {
-                    name: '',
-                    remark: '',
-                    projectId: 0,
-                },
-            },
-            showMemDialog: {
-                visible: false,
-                chooseId: null,
-                chooseData: null,
-                query: {
-                    pageSize: 8,
-                    pageNum: 1,
-                    projectId: null,
-                },
-                members: {
-                    list: [],
-                    total: null,
-                },
-                title: '',
-                addVisible: false,
-                memForm: {},
-                accounts: [],
-            },
-        });
-
-        onMounted(() => {
-            search();
-        });
-
-        const search = async () => {
-            let res = await projectApi.projects.request(state.query);
-            state.projects = res.list;
-            state.total = res.total;
-        };
-
-        const handlePageChange = (curPage: number) => {
-            state.query.pageNum = curPage;
-            search();
-        };
-
-        const showAddProjectDialog = (data: any) => {
-            if (data) {
-                state.addProjectDialog.form = { ...data };
-            } else {
-                state.addProjectDialog.form = {} as any;
-            }
-            state.addProjectDialog.visible = true;
-        };
-
-        const cancelAddProject = () => {
-            state.addProjectDialog.visible = false;
-            state.addProjectDialog.form = {} as any;
-        };
-
-        const addProject = async () => {
-            const form = state.addProjectDialog.form as any;
-            notEmpty(form.name, '项目名不能为空');
-            notEmpty(form.remark, '项目描述不能为空');
-
-            await projectApi.saveProject.request(form);
-            ElMessage.success('保存成功');
-            search();
-            cancelAddProject();
-        };
-
-        const delProject = async () => {
-            try {
-                await ElMessageBox.confirm(`确定删除该项目?`, '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                });
-                await projectApi.delProject.request({ id: state.chooseId });
-                ElMessage.success('删除成功');
-                state.chooseData = null;
-                state.chooseId = null;
-                search();
-            } catch (err) {}
-        };
-
-        const choose = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.chooseId = item.id;
-            state.chooseData = item;
-        };
-
-        const showMembers = async (project: any) => {
-            state.showMemDialog.query.projectId = project.id;
-            await setMemebers();
-            state.showMemDialog.title = `${project.name}的成员信息`;
-            state.showMemDialog.visible = true;
-        };
-
-        /**
-         * 选中成员
-         */
-        const chooseMember = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.showMemDialog.chooseData = item;
-            state.showMemDialog.chooseId = item.id;
-        };
-
-        const deleteMember = async () => {
-            notNull(state.showMemDialog.chooseData, '请选选择成员');
-            await projectApi.deleteProjectMem.request(state.showMemDialog.chooseData);
-            ElMessage.success('移除成功');
-            // 重新赋值成员列表
-            setMemebers();
-        };
-
-        /**
-         * 设置成员列表信息
-         */
-        const setMemebers = async () => {
-            const res = await projectApi.projectMems.request(state.showMemDialog.query);
-            state.showMemDialog.members.list = res.list;
-            state.showMemDialog.members.total = res.total;
-        };
-
-        const showEnv = async (project: any) => {
-            state.showEnvDialog.envs = await projectApi.projectEnvs.request({ projectId: project.id });
-            state.showEnvDialog.title = `${project.name}的环境信息`;
-            state.showEnvDialog.visible = true;
-        };
-
-        const chooseEnv = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.showEnvDialog.chooseData = item;
-            state.showEnvDialog.chooseId = item.id;
-        };
-
-        const deleteEnv = async () => {
-            notNull(state.showEnvDialog.chooseData, '请选选择环境');
-            await projectApi.delProjectEnvs.request({ id: state.showEnvDialog.chooseId });
-            ElMessage.success('删除成功');
-            state.showEnvDialog.envs = await projectApi.projectEnvs.request({ projectId: state.chooseId });
-        };
-
-        const showAddMemberDialog = () => {
-            state.showMemDialog.addVisible = true;
-        };
-
-        const addMember = async () => {
-            const memForm = state.showMemDialog.memForm as any;
-            memForm.projectId = state.chooseData.id;
-            notEmpty(memForm.accountId, '请先选择账号');
-
-            await projectApi.saveProjectMem.request(memForm);
-            ElMessage.success('保存成功');
-            setMemebers();
-            cancelAddMember();
-        };
-
-        const cancelAddMember = () => {
-            state.showMemDialog.memForm = {};
-            state.showMemDialog.addVisible = false;
-            state.showMemDialog.chooseData = null;
-            state.showMemDialog.chooseId = null;
-        };
-
-        const getAccount = (username: any) => {
-            accountApi.list.request({ username }).then((res) => {
-                state.showMemDialog.accounts = res.list;
-            });
-        };
-
-        const showAddEnvDialog = () => {
-            state.showEnvDialog.addVisible = true;
-        };
-
-        const addEnv = async () => {
-            const envForm = state.showEnvDialog.envForm;
-            envForm.projectId = state.chooseData.id;
-            await projectApi.saveProjectEnv.request(envForm);
-            ElMessage.success('保存成功');
-            state.showEnvDialog.envs = await projectApi.projectEnvs.request({ projectId: envForm.projectId });
-            cancelAddEnv();
-        };
-
-        const cancelAddEnv = () => {
-            state.showEnvDialog.envForm = {} as any;
-            state.showEnvDialog.addVisible = false;
-        };
-
-        return {
-            ...toRefs(state),
-            search,
-            handlePageChange,
-            choose,
-            showAddProjectDialog,
-            addProject,
-            delProject,
-            cancelAddProject,
-            showMembers,
-            setMemebers,
-            showEnv,
-            deleteEnv,
-            showAddMemberDialog,
-            addMember,
-            chooseMember,
-            deleteMember,
-            cancelAddMember,
-            showAddEnvDialog,
-            chooseEnv,
-            addEnv,
-            cancelAddEnv,
-            getAccount,
-        };
-    },
-});
-</script>
-<style lang="scss">
-</style>

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

@@ -1,17 +0,0 @@
-import Api from '@/common/Api';
-
-export const projectApi = {
-    // 获取账号可访问的项目列表
-    accountProjects: Api.create("/accounts/projects", 'get'),
-    projects: Api.create("/projects", 'get'),
-    saveProject: Api.create("/projects", 'post'),
-    delProject: Api.create("/projects", 'delete'),
-    // 获取项目下的环境信息
-    projectEnvs:  Api.create("/projects/{projectId}/envs", 'get'),
-    delProjectEnvs:  Api.create("/projects/envs", 'delete'),
-    saveProjectEnv:  Api.create("/projects/{projectId}/envs", 'post'),
-    // 获取项目下的成员信息
-    projectMems:  Api.create("/projects/{projectId}/members", 'get'),
-    saveProjectMem:  Api.create("/projects/{projectId}/members", 'post'),
-    deleteProjectMem:  Api.create("/projects/{projectId}/members/{accountId}", 'delete'),
-}   

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

@@ -1,37 +1,49 @@
 <template>
     <div>
-        <el-card>
-            <div style="float: left">
+        <el-row>
+            <el-col :span="4">
                 <el-row type="flex" justify="space-between">
-                    <el-col :span="24">
-                        <project-env-select @changeProjectEnv="changeProjectEnv" @clear="clearRedis">
-                            <template #default>
-                                <el-form-item label="redis" label-width="40px">
-                                    <el-select v-model="scanParam.id" placeholder="请选择redis" @change="changeRedis" @clear="clearRedis" clearable>
-                                        <el-option v-for="item in redisList" :key="item.id" :label="item.host" :value="item.id"> </el-option>
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item label="库" label-width="20px">
-                                    <el-select v-model="scanParam.db" @change="changeDb" placeholder="库"  style="width: 70px">
-                                        <el-option v-for="db in dbList" :key="db" :label="db" :value="db"> </el-option>
-                                    </el-select>
-                                </el-form-item>
+                    <el-col :span="24" class="el-scrollbar flex-auto">
+                        <tag-tree @node-click="nodeClick" :load="loadNode">
+                            <template #prefix="{ data }">
+                                <span v-if="data.type == NodeType.Redis">
+                                    <el-popover placement="right-start" title="redis实例信息" trigger="hover" :width="210">
+                                        <template #reference>
+                                            <img src="@/assets/icon/redis.png" class="img-icon" />
+                                        </template>
+                                        <template #default>
+                                            <el-form class="instances-pop-form" label-width="50px" :size="'small'">
+                                                <el-form-item label="名称:">{{ data.params.name }}</el-form-item>
+                                                <el-form-item label="模式:">{{ data.params.mode }}</el-form-item>
+                                                <el-form-item label="链接:">{{ data.params.host }}</el-form-item>
+                                                <el-form-item label="备注:">{{
+                                                    data.params.remark
+                                                }}</el-form-item>
+                                            </el-form>
+                                        </template>
+                                    </el-popover>
+                                </span>
+
+                                <el-icon v-if="data.type == NodeType.Db">
+                                    <Coin color="#67c23a" />
+                                </el-icon>
                             </template>
-                        </project-env-select>
+                        </tag-tree>
                     </el-col>
-                    <el-col class="mt10">
+                </el-row>
+            </el-col>
+
+            <el-col :span="20" style="border-left: 1px solid var(--el-card-border-color);">
+                <div class="mt10 ml5">
+                    <el-col>
                         <el-form class="search-form" label-position="right" :inline="true" label-width="60px">
                             <el-form-item label="key" label-width="40px">
-                                <el-input
-                                    placeholder="match 支持*模糊key"
-                                    style="width: 240px"
-                                    v-model="scanParam.match"
-                                    @clear="clear()"
-                                    clearable
-                                ></el-input>
+                                <el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match"
+                                    @clear="clear()" clearable></el-input>
                             </el-form-item>
-                            <el-form-item label="count" label-width="60px">
-                                <el-input placeholder="count" style="width: 62px" v-model.number="scanParam.count"></el-input>
+                            <el-form-item label="count" label-width="40px">
+                                <el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count">
+                                </el-input>
                             </el-form-item>
                             <el-form-item>
                                 <el-button @click="searchKey()" type="success" icon="search" plain></el-button>
@@ -40,368 +52,405 @@
                                     <template #reference>
                                         <el-button type="primary" icon="plus" plain></el-button>
                                     </template>
-                                    <el-tag @click="onAddData('string')" :color="getTypeColor('string')" style="cursor: pointer">string</el-tag>
-                                    <el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5" style="cursor: pointer">hash</el-tag>
-                                    <el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5" style="cursor: pointer">set</el-tag>
+                                    <el-tag @click="onAddData('string')" :color="getTypeColor('string')"
+                                        style="cursor: pointer">string</el-tag>
+                                    <el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5"
+                                        style="cursor: pointer">hash</el-tag>
+                                    <el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5"
+                                        style="cursor: pointer">set</el-tag>
                                     <!-- <el-tag @click="onAddData('list')" :color="getTypeColor('list')" class="ml5" style="cursor: pointer">list</el-tag> -->
                                 </el-popover>
                             </el-form-item>
                             <div style="float: right">
-                                <span>keys: {{ dbsize }}</span>
+                                <span>keys: {{ state.dbsize }}</span>
                             </div>
                         </el-form>
                     </el-col>
-                </el-row>
-            </div>
-
-            <el-table v-loading="loading" :data="keys" stripe :highlight-current-row="true" style="cursor: pointer">
-                <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
-                <el-table-column prop="type" label="type" width="80">
-                    <template #default="scope">
-                        <el-tag :color="getTypeColor(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="ttl" label="ttl(过期时间)" width="140">
-                    <template #default="scope">
-                        {{ ttlConveter(scope.row.ttl) }}
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                    <template #default="scope">
-                        <el-button @click="getValue(scope.row)" type="success" icon="search" plain size="small">查看</el-button>
-                        <el-button @click="del(scope.row.key)" type="danger" icon="delete" plain size="small">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </el-card>
+                    <el-table v-loading="state.loading" :data="state.keys" stripe :highlight-current-row="true"
+                        style="cursor: pointer">
+                        <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
+                        <el-table-column prop="type" label="type" width="80">
+                            <template #default="scope">
+                                <el-tag :color="getTypeColor(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="ttl" label="ttl(过期时间)" width="140">
+                            <template #default="scope">
+                                {{ ttlConveter(scope.row.ttl) }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作">
+                            <template #default="scope">
+                                <el-button @click="getValue(scope.row)" type="success" icon="search" plain
+                                    size="small">查看
+                                </el-button>
+                                <el-button @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>
 
-        <hash-value
-            v-model:visible="hashValueDialog.visible"
-            :operationType="dataEdit.operationType"
-            :title="dataEdit.title"
-            :keyInfo="dataEdit.keyInfo"
-            :redisId="scanParam.id"
-            :db="scanParam.db"
-            @cancel="onCancelDataEdit"
-            @valChange="searchKey"
-        />
+        <hash-value v-model:visible="hashValueDialog.visible" :operationType="dataEdit.operationType"
+            :title="dataEdit.title" :keyInfo="dataEdit.keyInfo" :redisId="scanParam.id" :db="scanParam.db"
+            @cancel="onCancelDataEdit" @valChange="searchKey" />
 
-        <string-value
-            v-model:visible="stringValueDialog.visible"
-            :operationType="dataEdit.operationType"
-            :title="dataEdit.title"
-            :keyInfo="dataEdit.keyInfo"
-            :redisId="scanParam.id"
-            :db="scanParam.db"
-            @cancel="onCancelDataEdit"
-            @valChange="searchKey"
-        />
+        <string-value v-model:visible="stringValueDialog.visible" :operationType="dataEdit.operationType"
+            :title="dataEdit.title" :keyInfo="dataEdit.keyInfo" :redisId="scanParam.id" :db="scanParam.db"
+            @cancel="onCancelDataEdit" @valChange="searchKey" />
 
-        <set-value
-            v-model:visible="setValueDialog.visible"
-            :title="dataEdit.title"
-            :keyInfo="dataEdit.keyInfo"
-            :redisId="scanParam.id"
-            :db="scanParam.db"
-            :operationType="dataEdit.operationType"
-            @valChange="searchKey"
-            @cancel="onCancelDataEdit"
-        />
+        <set-value v-model:visible="setValueDialog.visible" :title="dataEdit.title" :keyInfo="dataEdit.keyInfo"
+            :redisId="scanParam.id" :db="scanParam.db" :operationType="dataEdit.operationType" @valChange="searchKey"
+            @cancel="onCancelDataEdit" />
 
-        <list-value
-            v-model:visible="listValueDialog.visible"
-            :title="dataEdit.title"
-            :keyInfo="dataEdit.keyInfo"
-            :redisId="scanParam.id"
-            :db="scanParam.db"
-            :operationType="dataEdit.operationType"
-            @valChange="searchKey"
-            @cancel="onCancelDataEdit"
-        />
+        <list-value v-model:visible="listValueDialog.visible" :title="dataEdit.title" :keyInfo="dataEdit.keyInfo"
+            :redisId="scanParam.id" :db="scanParam.db" :operationType="dataEdit.operationType" @valChange="searchKey"
+            @cancel="onCancelDataEdit" />
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { redisApi } from './api';
-import { toRefs, reactive, defineComponent } from 'vue';
+import { toRefs, reactive, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import ProjectEnvSelect from '../component/ProjectEnvSelect.vue';
 import HashValue from './HashValue.vue';
 import StringValue from './StringValue.vue';
 import SetValue from './SetValue.vue';
 import ListValue from './ListValue.vue';
 import { isTrue, notBlank, notNull } from '@/common/assert';
+import { TagTreeNode } from '../component/tag';
+import TagTree from '../component/TagTree.vue';
 
-export default defineComponent({
-    name: 'DataOperation',
-    components: {
-        StringValue,
-        HashValue,
-        SetValue,
-        ListValue,
-        ProjectEnvSelect,
+/**
+ * 树节点类型
+ */
+class NodeType {
+    static Redis = 1
+    static Db = 2
+}
+
+const state = reactive({
+    instanceMenuMaxHeight: '600',
+    loading: false,
+    tags: [],
+    redisList: [] as any,
+    dbList: [],
+    query: {
+        tagPath: null,
     },
-    setup() {
-        const state = reactive({
-            loading: false,
-            redisList: [],
-            dbList: [],
-            query: {
-                envId: 0,
-            },
-            scanParam: {
-                id: null,
-                db: null,
-                match: null,
-                count: 10,
-                cursor: {},
-            },
-            dataEdit: {
-                visible: false,
-                title: '新增数据',
-                operationType: 1,
-                keyInfo: {
-                    type: 'string',
-                    timed: -1,
-                    key: '',
-                },
-            },
-            hashValueDialog: {
-                visible: false,
-            },
-            stringValueDialog: {
-                visible: false,
-            },
-            setValueDialog: {
-                visible: false,
-            },
-            listValueDialog: {
-                visible: false,
-            },
-            keys: [],
-            dbsize: 0,
-        });
-
-        const searchRedis = async () => {
-            notNull(state.query.envId, '请先选择项目环境');
-            const res = await redisApi.redisList.request(state.query);
-            state.redisList = res.list;
-        };
-
-        const changeProjectEnv = (projectId: any, envId: any) => {
-            clearRedis();
-            if (envId != null) {
-                state.query.envId = envId;
-                searchRedis();
-            }
-        };
-
-        const changeRedis = (id: number) => {
-            resetScanParam(id);
-            state.scanParam.db = null;
-            state.dbList = (state.redisList.find((x: any) => x.id == id) as any).db.split(',');
-            state.keys = [];
-            state.dbsize = 0;
-        };
-
-        const changeDb = () => {
-            resetScanParam(state.scanParam.id as any);
-            state.keys = [];
-            state.dbsize = 0;
-            searchKey();
-        };
-
-        const scan = async () => {
-            isTrue(state.scanParam.id != null, '请先选择redis');
-            notBlank(state.scanParam.count, 'count不能为空');
-
-            const match = state.scanParam.match;
-            if (!match || (match as string).length < 4) {
-                isTrue(state.scanParam.count <= 200, 'key为空或小于4字符时, count不能超过200');
-            } else {
-                isTrue(state.scanParam.count <= 20000, 'count不能超过20000');
-            }
-
-            state.loading = true;
-            try {
-                const res = await redisApi.scan.request(state.scanParam);
-                state.keys = res.keys;
-                state.dbsize = res.dbSize;
-                state.scanParam.cursor = res.cursor;
-            } finally {
-                state.loading = false;
-            }
-        };
-
-        const searchKey = async () => {
-            state.scanParam.cursor = {};
-            await scan();
-        };
-
-        const clearRedis = () => {
-            state.redisList = [];
-            state.scanParam.id = null;
-            resetScanParam();
-            state.scanParam.db = null;
-            state.keys = [];
-            state.dbsize = 0;
-        };
-
-        const clear = () => {
-            resetScanParam();
-            if (state.scanParam.id) {
-                scan();
-            }
-        };
-
-        const resetScanParam = (id: number = 0) => {
-            state.scanParam.count = 10;
-            if (id != 0) {
-                const redis: any = state.redisList.find((x: any) => x.id == id);
-                // 集群模式count设小点，因为后端会从所有master节点scan一遍然后合并结果
-                if (redis && redis.mode == 'cluster') {
-                    state.scanParam.count = 4;
-                }
-            }
-            state.scanParam.match = null;
-            state.scanParam.cursor = {};
-        };
-
-        const getValue = async (row: any) => {
-            const type = row.type;
-
-            state.dataEdit.keyInfo.type = type;
-            state.dataEdit.keyInfo.timed = row.ttl;
-            state.dataEdit.keyInfo.key = row.key;
-            state.dataEdit.operationType = 2;
-            state.dataEdit.title = '查看数据';
-
-            if (type == 'hash') {
-                state.hashValueDialog.visible = true;
-            } else if (type == 'string') {
-                state.stringValueDialog.visible = true;
-            } else if (type == 'set') {
-                state.setValueDialog.visible = true;
-            } else if (type == 'list') {
-                state.listValueDialog.visible = true;
-            } else {
-                ElMessage.warning('暂不支持该类型');
-            }
-        };
-
-        const onAddData = (type: string) => {
-            notNull(state.scanParam.id, '请先选择redis');
-            state.dataEdit.operationType = 1;
-            state.dataEdit.title = '新增数据';
-            state.dataEdit.keyInfo.type = type;
-            state.dataEdit.keyInfo.timed = -1;
-            if (type == 'hash') {
-                state.hashValueDialog.visible = true;
-            } else if (type == 'string') {
-                state.stringValueDialog.visible = true;
-            } else if (type == 'set') {
-                state.setValueDialog.visible = true;
-            } else if (type == 'list') {
-                state.listValueDialog.visible = true;
-            } else {
-                ElMessage.warning('暂不支持该类型');
-            }
-        };
-
-        const onCancelDataEdit = () => {
-            state.dataEdit.keyInfo = {} as any;
-        };
-
-        const del = (key: string) => {
-            ElMessageBox.confirm(`确定删除[ ${key} ] 该key?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            })
-                .then(() => {
-                    redisApi.delKey
-                        .request({
-                            key,
-                            id: state.scanParam.id,
-                            db: state.scanParam.db,
-                        })
-                        .then(() => {
-                            ElMessage.success('删除成功！');
-                            searchKey();
-                        });
-                })
-                .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';
-            }
-        };
-
-        return {
-            ...toRefs(state),
-            changeProjectEnv,
-            changeRedis,
-            changeDb,
-            clearRedis,
-            searchKey,
-            scan,
-            clear,
-            getValue,
-            del,
-            ttlConveter,
-            getTypeColor,
-            onAddData,
-            onCancelDataEdit,
-        };
+    scanParam: {
+        id: null as any,
+        mode: '',
+        db: '',
+        match: null,
+        count: 10,
+        cursor: {},
     },
+    dataEdit: {
+        visible: false,
+        title: '新增数据',
+        operationType: 1,
+        keyInfo: {
+            type: 'string',
+            timed: -1,
+            key: '',
+        },
+    },
+    hashValueDialog: {
+        visible: false,
+    },
+    stringValueDialog: {
+        visible: false,
+    },
+    setValueDialog: {
+        visible: false,
+    },
+    listValueDialog: {
+        visible: false,
+    },
+    keys: [],
+    dbsize: 0,
 });
+
+const {
+    scanParam,
+    dataEdit,
+    hashValueDialog,
+    stringValueDialog,
+    setValueDialog,
+    listValueDialog,
+} = toRefs(state)
+
+
+onMounted(async () => {
+    setHeight();
+})
+
+const setHeight = () => {
+    state.instanceMenuMaxHeight = window.innerHeight - 115 + 'px';
+}
+
+/**
+ * instmap;  tagPaht -> redis info[]
+ */
+const instMap: Map<string, any[]> = new Map();
+
+const getInsts = async () => {
+    const res = await redisApi.redisList.request({});
+    if (!res.total) return
+    for (const redisInfo of res.list) {
+        const tagPath = redisInfo.tagPath;
+        let redisInsts = instMap.get(tagPath) || [];
+        redisInsts.push(redisInfo);
+        instMap.set(tagPath, redisInsts);
+    }
+}
+
+/**
+ * 加载文件树节点
+ * @param {Object} node
+ * @param {Object} resolve
+ */
+const loadNode = async (node: any) => {
+    // 一级为tagPath
+    if (node.level === 0) {
+        await getInsts();
+        const tagPaths = instMap.keys();
+        const tagNodes = [];
+        for (let tagPath of tagPaths) {
+            tagNodes.push(new TagTreeNode(tagPath, tagPath));
+        }
+        return tagNodes;
+    }
+
+    const data = node.data;
+    // 点击tagPath -> 加载数据库信息列表
+    if (data.type === TagTreeNode.TagPath) {
+        const redisInfos = instMap.get(data.key)
+        return redisInfos?.map((x: any) => {
+            return new TagTreeNode(`${data.key}.${x.id}`, x.name, NodeType.Redis).withParams(x);
+        });
+    }
+
+    // 点击redis实例 -> 加载库列表
+    if (data.type === NodeType.Redis) {
+        return await getDbs(data.params);
+    }
+
+    return [];
+};
+
+const nodeClick = (data: any) => {
+    // 点击库事件
+    if (data.type === NodeType.Db) {
+        resetScanParam();
+        state.scanParam.id = data.params.id;
+        state.scanParam.db = data.params.db;
+        scan();
+    }
+}
+
+/**
+ * 获取所有库信息
+ * @param redisInfo redis信息
+ */
+const getDbs = async (redisInfo: any) => {
+    let dbs: TagTreeNode[] = redisInfo.db.split(',').map((x: string) => {
+        return new TagTreeNode(x, x, NodeType.Db).withIsLeaf(true).withParams({
+            id: redisInfo.id,
+            db: x,
+            name: `db${x}`,
+            keys: 0,
+        })
+    })
+    const res = await redisApi.redisInfo.request({ id: redisInfo.id, host: redisInfo.host, section: "Keyspace" });
+    for (let db in res.Keyspace) {
+        for (let d of dbs) {
+            if (db == d.params.name) {
+                d.params.keys = res.Keyspace[db]?.split(',')[0]?.split('=')[1] || 0
+            }
+        }
+    }
+    // 替换label
+    dbs.forEach((e: any) => {
+        e.label = `${e.params.name} [${e.params.keys}]`
+    });
+    return dbs;
+}
+
+const scan = async () => {
+    isTrue(state.scanParam.id != null, '请先选择redis');
+    notBlank(state.scanParam.count, 'count不能为空');
+
+    const match: string = state.scanParam.match || '';
+    if (!match) {
+        isTrue(state.scanParam.count <= 100, "key搜索条件为空时, count不能大于100")
+    } 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;
+        }
+    }
+
+    const scanParam = { ...state.scanParam }
+    // 集群模式count设小点，因为后端会从所有master节点scan一遍然后合并结果,默认假设redis集群有3个master
+    if (scanParam.mode == 'cluster') {
+        scanParam.count = Math.floor(state.scanParam.count / 3)
+    }
+
+    state.loading = true;
+    try {
+        const res = await redisApi.scan.request(scanParam);
+        state.keys = res.keys;
+        state.dbsize = res.dbSize;
+        state.scanParam.cursor = res.cursor;
+    } finally {
+        state.loading = false;
+    }
+};
+
+const searchKey = async () => {
+    state.scanParam.cursor = {};
+    await scan();
+};
+
+const clear = () => {
+    resetScanParam();
+    if (state.scanParam.id) {
+        scan();
+    }
+};
+
+const resetScanParam = () => {
+    state.scanParam.count = 10;
+    state.scanParam.match = null;
+    state.scanParam.cursor = {};
+};
+
+const getValue = async (row: any) => {
+    const type = row.type;
+
+    state.dataEdit.keyInfo.type = type;
+    state.dataEdit.keyInfo.timed = row.ttl;
+    state.dataEdit.keyInfo.key = row.key;
+    state.dataEdit.operationType = 2;
+    state.dataEdit.title = '查看数据';
+
+    if (type == 'hash') {
+        state.hashValueDialog.visible = true;
+    } else if (type == 'string') {
+        state.stringValueDialog.visible = true;
+    } else if (type == 'set') {
+        state.setValueDialog.visible = true;
+    } else if (type == 'list') {
+        state.listValueDialog.visible = true;
+    } else {
+        ElMessage.warning('暂不支持该类型');
+    }
+};
+
+const onAddData = (type: string) => {
+    notNull(state.scanParam.id, '请先选择redis');
+    state.dataEdit.operationType = 1;
+    state.dataEdit.title = '新增数据';
+    state.dataEdit.keyInfo.type = type;
+    state.dataEdit.keyInfo.timed = -1;
+    if (type == 'hash') {
+        state.hashValueDialog.visible = true;
+    } else if (type == 'string') {
+        state.stringValueDialog.visible = true;
+    } else if (type == 'set') {
+        state.setValueDialog.visible = true;
+    } else if (type == 'list') {
+        state.listValueDialog.visible = true;
+    } else {
+        ElMessage.warning('暂不支持该类型');
+    }
+};
+
+const onCancelDataEdit = () => {
+    state.dataEdit.keyInfo = {} as any;
+};
+
+const del = (key: string) => {
+    ElMessageBox.confirm(`确定删除[ ${key} ] 该key?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        redisApi.delKey
+            .request({
+                key,
+                id: state.scanParam.id,
+                db: state.scanParam.db,
+            })
+            .then(() => {
+                ElMessage.success('删除成功！');
+                searchKey();
+            });
+    }).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>
+<style lang="scss">
+.instances-pop-form {
+    .el-form-item {
+        margin-bottom: unset;
+    }
+}
 </style>

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

@@ -0,0 +1,108 @@
+<template>
+    <div style="width: 100%;">
+        <el-input @input="onInput" type="textarea" v-model="modelValue" :autosize="autosize" :rows="rows" />
+        <div style="padding: 3px; float: right" class="mr5 format-btns">
+            <div>
+                <el-button @click="showFormatDialog()" :underline="false" type="success" icon="MagicStick" size="small">
+                </el-button>
+            </div>
+        </div>
+        <el-dialog @opened="opened" width="60%" :title="title" v-model="formatDialog.visible"
+            :close-on-click-modal="false">
+            <monaco-editor ref="monacoEditorRef" :canChangeMode="true" v-model="formatDialog.value" language="json" />
+            <template #footer>
+                <div>
+                    <el-button @click="formatDialog.visible = false">取 消</el-button>
+                    <el-button @click="onConfirmValue" type="primary">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch, toRefs, onMounted } from 'vue';
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
+
+const props = defineProps({
+    title: {
+        type: String,
+    },
+    modelValue: {
+        type: String,
+    },
+    rows: {
+        type: Number,
+    },
+    autosize: {
+        type: Object
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const monacoEditorRef: any = ref(null)
+
+const state = reactive({
+    rows: 2,
+    autosize: {},
+    modelValue: '',
+    formatDialog: {
+        visible: false,
+        value: '',
+    }
+});
+
+const {
+    rows,
+    autosize,
+    modelValue,
+    formatDialog,
+} = toRefs(state)
+
+watch(
+    () => props.modelValue,
+    (val: any) => {
+        state.modelValue = val;
+    }
+);
+
+onMounted(() => {
+    state.modelValue = props.modelValue as any;
+    state.autosize = props.autosize as any;
+    state.rows = props.rows as any;
+})
+
+const showFormatDialog = () => {
+    state.formatDialog.visible = true;
+    state.formatDialog.value = state.modelValue;
+}
+
+const opened = () => {
+    monacoEditorRef.value.format();
+};
+
+const onConfirmValue = () => {
+    // 尝试压缩json
+    try {
+        state.modelValue = JSON.stringify(JSON.parse(state.formatDialog.value));
+    } catch (e) {
+        state.modelValue = state.formatDialog.value;
+    }
+    emit('update:modelValue', state.modelValue);
+    state.formatDialog.visible = false;
+}
+
+const onInput = (value: any) => {
+    emit('update:modelValue', value);
+}
+
+</script>
+<style lang="scss">
+.format-btns {
+    position: absolute;
+    z-index: 2;
+    right: 5px;
+    top: 4px;
+    max-width: 120px;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
+    <el-dialog class="el-table-z-index-inherit" :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
         <el-form label-width="85px">
             <el-form-item prop="key" label="key:">
                 <el-input :disabled="operationType == 2" v-model="key.key"></el-input>
@@ -14,14 +14,18 @@
             <el-row class="mt10">
                 <el-form label-position="right" :inline="true">
                     <el-form-item label="field" label-width="40px" v-if="operationType == 2">
-                        <el-input placeholder="支持*模糊field" style="width: 140px" v-model="scanParam.match" clearable size="small"></el-input>
+                        <el-input placeholder="支持*模糊field" style="width: 140px" v-model="scanParam.match" clearable
+                            size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="count" v-if="operationType == 2">
-                        <el-input placeholder="count" style="width: 62px" v-model.number="scanParam.count" size="small"></el-input>
+                        <el-input placeholder="count" style="width: 62px" v-model.number="scanParam.count" size="small">
+                        </el-input>
                     </el-form-item>
                     <el-form-item>
-                        <el-button v-if="operationType == 2" @click="reHscan()" type="success" icon="search" plain size="small"></el-button>
-                        <el-button v-if="operationType == 2" @click="hscan()" icon="bottom" plain size="small">scan</el-button>
+                        <el-button v-if="operationType == 2" @click="reHscan()" type="success" icon="search" plain
+                            size="small"></el-button>
+                        <el-button v-if="operationType == 2" @click="hscan()" icon="bottom" plain size="small">scan
+                        </el-button>
                         <el-button @click="onAddHashValue" icon="plus" size="small" plain>添加</el-button>
                     </el-form-item>
                     <div v-if="operationType == 2" class="mt10" style="float: right">
@@ -29,7 +33,7 @@
                     </div>
                 </el-form>
             </el-row>
-            <el-table :data="hashValues" stripe style="width: 100%">
+            <el-table :data="hashValues" stripe style="width: 100%;">
                 <el-table-column prop="field" label="field" width>
                     <template #default="scope">
                         <el-input v-model="scope.row.field" clearable size="small"></el-input>
@@ -37,13 +41,16 @@
                 </el-table-column>
                 <el-table-column prop="value" label="value" min-width="200">
                     <template #default="scope">
-                        <el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】field:【${scope.row.field}】`" v-model="scope.row.value"
+                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></format-input>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" width="120">
                     <template #default="scope">
-                        <el-button v-if="operationType == 2" type="success" @click="hset(scope.row)" icon="check" size="small" plain></el-button>
-                        <el-button type="danger" @click="hdel(scope.row.field, scope.$index)" icon="delete" size="small" plain></el-button>
+                        <el-button v-if="operationType == 2" type="success" @click="hset(scope.row)" icon="check"
+                            size="small" plain></el-button>
+                        <el-button type="danger" @click="hdel(scope.row.field, scope.$index)" icon="delete" size="small"
+                            plain></el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -56,196 +63,191 @@
         </template>
     </el-dialog>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, watch, toRefs } from 'vue';
+<script lang="ts" setup>
+import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { isTrue, notEmpty } from '@/common/assert';
+import FormatInput from './FormatInput.vue';
 
-export default defineComponent({
-    name: 'HashValue',
-    components: {},
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        // 操作类型，1：新增，2：修改
-        operationType: {
-            type: [Number],
-            require: true,
-        },
-        redisId: {
-            type: [Number],
-            require: true,
-        },
-        db: {
-            type: [Number],
-            require: true,
-        },
-        keyInfo: {
-            type: [Object],
-        },
-        hashValue: {
-            type: [Array, Object],
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    emits: ['valChange', 'cancel', 'update:visible'],
-    setup(props: any, { emit }) {
-        const state = reactive({
-            dialogVisible: false,
-            operationType: 1,
-            redisId: 0,
-            db: 0,
-            key: {
-                key: '',
-                type: 'hash',
-                timed: -1,
-            },
-            scanParam: {
-                key: '',
-                id: 0,
-                db: 0,
-                cursor: 0,
-                match: '',
-                count: 10,
-            },
-            keySize: 0,
-            hashValues: [
-                {
-                    field: '',
-                    value: '',
-                },
-            ],
-        });
-
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-            setTimeout(() => {
-                state.hashValues = [];
-                state.key = {} as any;
-            }, 500);
-        };
-
-        watch(props, async (newValue) => {
-            const visible = newValue.visible;
-            state.redisId = newValue.redisId;
-            state.db = newValue.db;
-            state.key = newValue.keyInfo;
-            state.operationType = newValue.operationType;
-
-            if (visible && state.operationType == 2) {
-                state.scanParam.id = props.redisId;
-                state.scanParam.key = state.key.key;
-                await reHscan();
-            }
-
-            state.dialogVisible = visible;
-        });
-
-        const reHscan = async () => {
-            state.scanParam.id = state.redisId;
-            state.scanParam.db = state.db;
-            state.scanParam.cursor = 0;
-            hscan();
-        };
-
-        const hscan = async () => {
-            const match = state.scanParam.match;
-            if (!match || match == '' || match == '*') {
-                if (state.scanParam.count > 100) {
-                    ElMessage.error('match为空或者*时, count不能超过100');
-                    return;
-                }
-            } else {
-                if (state.scanParam.count > 1000) {
-                    ElMessage.error('count不能超过1000');
-                    return;
-                }
-            }
-
-            const scanRes = await redisApi.hscan.request(state.scanParam);
-            state.scanParam.cursor = scanRes.cursor;
-            state.keySize = scanRes.keySize;
-
-            const keys = scanRes.keys;
-            const hashValue = [];
-            const fieldCount = keys.length / 2;
-            let nextFieldIndex = 0;
-            for (let i = 0; i < fieldCount; i++) {
-                hashValue.push({ field: keys[nextFieldIndex++], value: keys[nextFieldIndex++] });
-            }
-            state.hashValues = hashValue;
-        };
-
-        const hdel = async (field: any, index: any) => {
-            // 如果是新增操作，则直接数组移除即可
-            if (state.operationType == 1) {
-                state.hashValues.splice(index, 1);
-                return;
-            }
-            await ElMessageBox.confirm(`确定删除[${field}]?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            });
-            await redisApi.hdel.request({
-                id: state.redisId,
-                db: state.db,
-                key: state.key.key,
-                field,
-            });
-            ElMessage.success('删除成功');
-            reHscan();
-        };
-
-        const hset = async (row: any) => {
-            await redisApi.saveHashValue.request({
-                id: state.redisId,
-                db: state.db,
-                key: state.key.key,
-                timed: state.key.timed,
-                value: [
-                    {
-                        field: row.field,
-                        value: row.value,
-                    },
-                ],
-            });
-            ElMessage.success('保存成功');
-        };
-
-        const onAddHashValue = () => {
-            state.hashValues.unshift({ field: '', value: '' });
-        };
-
-        const saveValue = async () => {
-            notEmpty(state.key.key, 'key不能为空');
-            isTrue(state.hashValues.length > 0, 'hash内容不能为空');
-            const sv = { value: state.hashValues, id: state.redisId, db: state.db };
-            Object.assign(sv, state.key);
-            await redisApi.saveHashValue.request(sv);
-            ElMessage.success('保存成功');
-
-            cancel();
-            emit('valChange');
-        };
-
-        return {
-            ...toRefs(state),
-            reHscan,
-            hscan,
-            cancel,
-            hdel,
-            hset,
-            onAddHashValue,
-            saveValue,
-        };
+    title: {
+        type: String,
     },
+    // 操作类型，1：新增，2：修改
+    operationType: {
+        type: [Number],
+        require: true,
+    },
+    redisId: {
+        type: [Number],
+        require: true,
+    },
+    db: {
+        type: [String],
+        require: true,
+    },
+    keyInfo: {
+        type: [Object],
+    },
+    hashValue: {
+        type: [Array, Object],
+    },
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
+
+const state = reactive({
+    dialogVisible: false,
+    operationType: 1,
+    redisId: 0,
+    db: '0',
+    key: {
+        key: '',
+        type: 'hash',
+        timed: -1,
+    },
+    scanParam: {
+        key: '',
+        id: 0,
+        db: '0',
+        cursor: 0,
+        match: '',
+        count: 10,
+    },
+    keySize: 0,
+    hashValues: [
+        {
+            field: '',
+            value: '',
+        },
+    ],
 });
+
+const {
+    dialogVisible,
+    operationType,
+    key,
+    scanParam,
+    keySize,
+    hashValues,
+} = toRefs(state)
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+    setTimeout(() => {
+        state.hashValues = [];
+        state.key = {} as any;
+    }, 500);
+};
+
+watch(props, async (newValue: any) => {
+    const visible = newValue.visible;
+    state.redisId = newValue.redisId;
+    state.db = newValue.db;
+    state.key = newValue.keyInfo;
+    state.operationType = newValue.operationType;
+
+    if (visible && state.operationType == 2) {
+        state.scanParam.id = props.redisId as any;
+        state.scanParam.key = state.key.key;
+        await reHscan();
+    }
+
+    state.dialogVisible = visible;
+});
+
+const reHscan = async () => {
+    state.scanParam.id = state.redisId;
+    state.scanParam.db = state.db;
+    state.scanParam.cursor = 0;
+    hscan();
+};
+
+const hscan = async () => {
+    const match = state.scanParam.match;
+    if (!match || match == '' || match == '*') {
+        if (state.scanParam.count > 100) {
+            ElMessage.error('match为空或者*时, count不能超过100');
+            return;
+        }
+    } else {
+        if (state.scanParam.count > 1000) {
+            ElMessage.error('count不能超过1000');
+            return;
+        }
+    }
+
+    const scanRes = await redisApi.hscan.request(state.scanParam);
+    state.scanParam.cursor = scanRes.cursor;
+    state.keySize = scanRes.keySize;
+
+    const keys = scanRes.keys;
+    const hashValue = [];
+    const fieldCount = keys.length / 2;
+    let nextFieldIndex = 0;
+    for (let i = 0; i < fieldCount; i++) {
+        hashValue.push({ field: keys[nextFieldIndex++], value: keys[nextFieldIndex++] });
+    }
+    state.hashValues = hashValue;
+};
+
+const hdel = async (field: any, index: any) => {
+    // 如果是新增操作，则直接数组移除即可
+    if (state.operationType == 1) {
+        state.hashValues.splice(index, 1);
+        return;
+    }
+    await ElMessageBox.confirm(`确定删除[${field}]?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    });
+    await redisApi.hdel.request({
+        id: state.redisId,
+        db: state.db,
+        key: state.key.key,
+        field,
+    });
+    ElMessage.success('删除成功');
+    reHscan();
+};
+
+const hset = async (row: any) => {
+    await redisApi.saveHashValue.request({
+        id: state.redisId,
+        db: state.db,
+        key: state.key.key,
+        timed: state.key.timed,
+        value: [
+            {
+                field: row.field,
+                value: row.value,
+            },
+        ],
+    });
+    ElMessage.success('保存成功');
+};
+
+const onAddHashValue = () => {
+    state.hashValues.unshift({ field: '', value: '' });
+};
+
+const saveValue = async () => {
+    notEmpty(state.key.key, 'key不能为空');
+    isTrue(state.hashValues.length > 0, 'hash内容不能为空');
+    const sv = { value: state.hashValues, id: state.redisId, db: state.db };
+    Object.assign(sv, state.key);
+    await redisApi.saveHashValue.request(sv);
+    ElMessage.success('保存成功');
+
+    cancel();
+    emit('valChange');
+};
 </script>
 <style lang="scss">
 #string-value-text {
@@ -261,4 +263,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
+</style>

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

@@ -1,192 +1,228 @@
 <template>
     <div>
-        <el-dialog :title="title" v-model="dialogVisible" :show-close="true" width="35%" @close="close()">
-            <el-collapse>
-                <el-collapse-item title="Server(Redis服务器的一般信息)" name="server">
-                    <div class="row">
-                        <span class="title">redis_version(版本):</span>
-                        <span class="value">{{ info.Server.redis_version }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">tcp_port(端口):</span>
-                        <span class="value">{{ info.Server.tcp_port }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">redis_mode(模式):</span>
-                        <span class="value">{{ info.Server.redis_mode }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">os(宿主操作系统):</span>
-                        <span class="value">{{ info.Server.os }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">uptime_in_days(运行天数):</span>
-                        <span class="value">{{ info.Server.uptime_in_days }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">executable(可执行文件路径):</span>
-                        <span class="value">{{ info.Server.executable }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">config_file(配置文件路径):</span>
-                        <span class="value">{{ info.Server.config_file }}</span>
-                    </div>
-                </el-collapse-item>
+        <el-dialog :title="title" v-model="dialogVisible" :show-close="true" width="1000px" @close="close()">
 
-                <el-collapse-item title="Clients(客户端连接)" name="client">
-                    <div class="row">
-                        <span class="title">connected_clients(已连接客户端数):</span>
-                        <span class="value">{{ info.Clients.connected_clients }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">blocked_clients(正在等待阻塞命令客户端数):</span>
-                        <span class="value">{{ info.Clients.blocked_clients }}</span>
-                    </div>
-                </el-collapse-item>
-                <el-collapse-item title="Keyspace(key信息)" name="keyspace">
-                    <div class="row" v-for="(value, key) in info.Keyspace" :key="key">
-                        <span class="title">{{ key }}: </span>
-                        <span class="value">{{ value }}</span>
-                    </div>
-                </el-collapse-item>
+            <el-row :gutter="20">
+                <el-col :lg="16" :md="16">
+                    <el-descriptions class="redis-info info-server" title="Redis服务器信息" :column="3" size="small" border>
+                        <el-descriptions-item label="版本">{{ info.Server.redis_version }}</el-descriptions-item>
+                        <el-descriptions-item label="端口">{{ info.Server.tcp_port }}</el-descriptions-item>
+                        <el-descriptions-item label="PID">{{ info.Server.process_id }}</el-descriptions-item>
+                        <el-descriptions-item label="模式">{{ info.Server.redis_mode }}</el-descriptions-item>
+                        <el-descriptions-item label="操作系统">{{ info.Server.os }}</el-descriptions-item>
+                        <el-descriptions-item label="运行天数">{{ info.Server.uptime_in_days }}</el-descriptions-item>
+                        <el-descriptions-item label="可执行文件路径">{{ info.Server.executable }}</el-descriptions-item>
+                        <el-descriptions-item label="配置文件路径">{{ info.Server.config_file }}</el-descriptions-item>
+                    </el-descriptions>
+                </el-col>
+                <el-col :lg="8" :md="8" class="redis-info">
+                    <div class="info-memory-chart" ref="memRef"></div>
+                </el-col>
+            </el-row>
 
-                <el-collapse-item title="Stats(统计)" name="state">
-                    <div class="row">
-                        <span class="title">total_commands_processed(总处理命令数):</span>
-                        <span class="value">{{ info.Stats.total_commands_processed }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">instantaneous_ops_per_sec(当前qps):</span>
-                        <span class="value">{{ info.Stats.instantaneous_ops_per_sec }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">total_net_input_bytes(网络入口流量字节数):</span>
-                        <span class="value">{{ info.Stats.total_net_input_bytes }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">total_net_output_bytes(网络出口流量字节数):</span>
-                        <span class="value">{{ info.Stats.total_net_output_bytes }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">expired_keys(过期key的总数量):</span>
-                        <span class="value">{{ info.Stats.expired_keys }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">instantaneous_ops_per_sec(当前qps):</span>
-                        <span class="value">{{ info.Stats.instantaneous_ops_per_sec }}</span>
-                    </div>
-                </el-collapse-item>
+            <el-row :gutter="20">
+                <el-col :lg="12" :md="12">
+                    <el-descriptions class="redis-info info-cluster" title="节点信息" :column="3" size="small" border>
+                        <el-descriptions-item label="是否启用集群模式">{{ info.Cluster.cluster_enabled }}</el-descriptions-item>
+                        <el-descriptions-item label="DB总数">{{ info.Cluster.databases }}</el-descriptions-item>
+                        <el-descriptions-item label="节点总数">{{ info.Cluster.nodecount }}</el-descriptions-item>
+                    </el-descriptions>
+                </el-col>
 
-                <el-collapse-item title="Persistence(持久化)" name="persistence">
-                    <div class="row">
-                        <span class="title">aof_enabled(是否启用aof):</span>
-                        <span class="value">{{ info.Persistence.aof_enabled }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">loading(是否正在载入持久化文件):</span>
-                        <span class="value">{{ info.Persistence.loading }}</span>
-                    </div>
-                </el-collapse-item>
+                <el-col :lg="12" :md="12">
+                    <el-descriptions class="redis-info info-client" title="客户端连接" :column="3" size="small" border>
+                        <el-descriptions-item label="已连接客户端数">{{ info.Clients.connected_clients
+                        }}</el-descriptions-item>
+                        <el-descriptions-item label="正在等待阻塞命令客户端数">{{ info.Clients.blocked_clients
+                        }}</el-descriptions-item>
+                    </el-descriptions>
+                </el-col>
+            </el-row>
 
-                <el-collapse-item title="Cluster(集群)" name="cluster">
-                    <div class="row">
-                        <span class="title">cluster_enabled(是否启用集群模式):</span>
-                        <span class="value">{{ info.Cluster.cluster_enabled }}</span>
-                    </div>
-                </el-collapse-item>
+            <el-descriptions class="redis-info info-memory" title="CPU" :column="2" size="small" border>
+                <el-descriptions-item label="系统CPU">{{ info.CPU.used_cpu_sys }}</el-descriptions-item>
+                <el-descriptions-item label="用户CPU">{{ info.CPU.used_cpu_user }}</el-descriptions-item>
+                <el-descriptions-item label="后台系统CPU">{{ info.CPU.used_cpu_sys_children }}</el-descriptions-item>
+                <el-descriptions-item label="后台用户CPU">{{ info.CPU.used_cpu_user_children }}</el-descriptions-item>
+            </el-descriptions>
 
-                <el-collapse-item title="Memory(内存消耗相关信息)" name="memory">
-                    <div class="row">
-                        <span class="title">used_memory(分配内存总量):</span>
-                        <span class="value">{{ info.Memory.used_memory_human }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">maxmemory(最大内存配置):</span>
-                        <span class="value">{{ info.Memory.maxmemory }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">used_memory_rss(已分配的内存总量，操作系统角度):</span>
-                        <span class="value">{{ info.Memory.used_memory_rss_human }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">mem_fragmentation_ratio(used_memory_rss和used_memory 之间的比率):</span>
-                        <span class="value">{{ info.Memory.mem_fragmentation_ratio }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">used_memory_peak(内存消耗峰值):</span>
-                        <span class="value">{{ info.Memory.used_memory_peak_human }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">total_system_memory(主机总内存):</span>
-                        <span class="value">{{ info.Memory.total_system_memory_human }}</span>
-                    </div>
-                </el-collapse-item>
+            <el-row :gutter="20" class="redis-info">
+                <el-col :lg="24" :md="24">
+                    <span style="font-size: 14px; font-weight: 700">键值统计</span>
+                    <el-table :data="Keyspace" stripe max-height="250" style="width: 100%" border>
+                        <el-table-column prop="db" label="数据库" min-width="100" show-overflow-tooltip>
+                        </el-table-column>
+                        <el-table-column prop="keys" label="keys" min-width="70" show-overflow-tooltip>
+                        </el-table-column>
+                        <el-table-column prop="expires" label="expires" min-width="70" show-overflow-tooltip>
+                        </el-table-column>
+                        <el-table-column prop="avg_ttl" label="avg_ttl" min-width="70" show-overflow-tooltip>
+                        </el-table-column>
+                    </el-table>
+                </el-col>
+            </el-row>
+
+            <el-descriptions class="redis-info info-state" title="统计信息" :column="3" size="small" border>
+                <el-descriptions-item label="总处理命令数">{{ info.Stats.total_commands_processed }}</el-descriptions-item>
+                <el-descriptions-item label="当前qps">{{ info.Stats.instantaneous_ops_per_sec }}</el-descriptions-item>
+                <el-descriptions-item label="过期key的总数量">{{ info.Stats.expired_keys }}</el-descriptions-item>
+                <el-descriptions-item label="网络入口流量字节数">{{ info.Stats.total_net_input_bytes }}</el-descriptions-item>
+                <el-descriptions-item label="网络出口流量字节数">{{ info.Stats.total_net_output_bytes }}</el-descriptions-item>
+            </el-descriptions>
+
+            <el-descriptions class="redis-info info-persistence" title="持久化" :column="3" size="small" border>
+                <el-descriptions-item label="是否启用aof">{{ info.Persistence?.aof_enabled || false
+                }}</el-descriptions-item>
+                <el-descriptions-item label="是否正在载入持久化文件">{{ info.Persistence?.loading || false
+                }}</el-descriptions-item>
+            </el-descriptions>
 
-                <el-collapse-item title="CPU" name="cpu">
-                    <div class="row">
-                        <span class="title">used_cpu_sys(由Redis服务器消耗的系统CPU):</span>
-                        <span class="value">{{ info.CPU.used_cpu_sys }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">used_cpu_user(由Redis服务器消耗的用户CPU):</span>
-                        <span class="value">{{ info.CPU.used_cpu_user }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">used_cpu_sys_children(由后台进程消耗的系统CPU):</span>
-                        <span class="value">{{ info.CPU.used_cpu_sys_children }}</span>
-                    </div>
-                    <div class="row">
-                        <span class="title">used_cpu_user_children(由后台进程消耗的用户CPU):</span>
-                        <span class="value">{{ info.CPU.used_cpu_user_children }}</span>
-                    </div>
-                </el-collapse-item>
-            </el-collapse>
         </el-dialog>
     </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, watch, toRefs } from 'vue';
+<script lang="ts" setup>
+import { reactive, watch, toRefs, ref, nextTick } from 'vue';
+import { formatByteSize } from '@/common/utils/format';
+import useEcharts from '@/common/echarts/useEcharts';
+import tdTheme from '@/common/echarts/theme.json';
 
-export default defineComponent({
-    name: 'Info',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        info: {
-            type: [Boolean, Object],
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const state = reactive({
-            dialogVisible: false,
-        });
-
-        watch(
-            () => props.visible,
-            (val) => {
-                state.dialogVisible = val;
-            }
-        );
-        
-        const close = () => {
-            emit('update:visible', false);
-            emit('close');
-        };
-
-        return {
-            ...toRefs(state),
-            close,
-        };
+    title: {
+        type: String,
     },
+    info: {
+        type: [Boolean, Object],
+    },
+})
+
+const emit = defineEmits(['update:visible', 'close'])
+
+const state = reactive({
+    dialogVisible: false,
+    memInfo: {} as any,
+    Keyspace: [] as any[],
+
 });
+
+let memChart: any = null;
+let memRef = ref(null);
+
+const {
+    dialogVisible,
+    Keyspace,
+} = toRefs(state)
+
+watch(
+    () => props.visible,
+    (val) => {
+        state.dialogVisible = val;
+    }
+);
+watch(
+    () => props.info,
+    (info: any) => {
+        state.memInfo = info['Memory'];
+        if (state.memInfo) {
+            initCharts();
+        }
+        if (info['Keyspace']) {
+            let arr = [];
+            for (let k in info['Keyspace']) {
+                let data = { db: k }
+                let d = info['Keyspace'][k].split(',')
+                for (let f of d) {
+                    let v = f.split('=')
+                    data[v[0]] = v[1]
+                }
+                arr.push(data)
+            }
+            state.Keyspace = arr
+        }
+    }
+);
+
+const initCharts = () => {
+    nextTick(() => {
+        initMemStats();
+    });
+}
+
+const initMemStats = () => {
+    let maxMem = state.memInfo.maxmemory === '0' ? state.memInfo.total_system_memory : state.memInfo.maxmemory
+    const data = [
+        { name: '可用内存：', value: maxMem - state.memInfo.used_memory },
+        {
+            name: '已用内存：',
+            value: state.memInfo.used_memory,
+        },
+    ];
+    const option = {
+        title: {
+            text: '内存',
+            x: 'left',
+            textStyle: { fontSize: 14 },
+        },
+        tooltip: {
+            trigger: 'item',
+            valueFormatter: formatByteSize,
+        },
+        legend: {
+            top: '15%',
+            orient: 'vertical',
+            left: 'left',
+            textStyle: { fontSize: 12 },
+        },
+        series: [
+            {
+                name: '内存',
+                type: 'pie',
+                radius: ['30%', '60%'], // 饼图内圈和外圈大小
+                center: ['40%', '50%'], // 饼图位置，0: 左右；1: 上下
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center',
+                },
+                emphasis: {
+                    label: {
+                        fontSize: '15',
+                        fontWeight: 'bold',
+                    },
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: data,
+            },
+        ],
+    };
+    if (memChart) {
+        memChart.setOption(option, true);
+        return;
+    }
+    memChart = useEcharts(memRef.value, tdTheme, option);
+}
+
+const close = () => {
+    emit('update:visible', false);
+    emit('close');
+};
 </script>
 
-<style>
+<style lang="scss">
+.redis-info {
+    margin-top: 12px;
+
+    .info-memory-chart {
+        width: 360px;
+        height: 150px;
+    }
+}
+
 .row .title {
     font-size: 12px;
     color: #8492a6;
@@ -195,6 +231,6 @@ export default defineComponent({
 
 .row .value {
     font-size: 12px;
-    color: black;
+    color: var(--el-color-success);
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
+    <el-dialog class="el-table-z-index-inherit" :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
         <el-form label-width="85px">
             <el-form-item prop="key" label="key:">
                 <el-input :disabled="operationType == 2" v-model="key.key"></el-input>
@@ -18,32 +18,22 @@
             <el-table :data="value" stripe style="width: 100%">
                 <el-table-column prop="value" label="value" min-width="200">
                     <template #default="scope">
-                        <el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="scope.row.value"
+                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></format-input>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" width="140">
                     <template #default="scope">
-                        <el-button
-                            v-if="operationType == 2"
-                            type="success"
-                            @click="lset(scope.row, scope.$index)"
-                            icon="check"
-                            size="small"
-                            plain
-                        ></el-button>
+                        <el-button v-if="operationType == 2" type="success" @click="lset(scope.row, scope.$index)"
+                            icon="check" size="small" plain></el-button>
                         <!-- <el-button type="danger" @click="set.value.splice(scope.$index, 1)" icon="delete" size="small" plain></el-button> -->
                     </template>
                 </el-table-column>
             </el-table>
             <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: right"
-                    :total="len"
-                    layout="prev, pager, next, total"
-                    @current-change="handlePageChange"
-                    v-model:current-page="pageNum"
-                    :page-size="pageSize"
-                ></el-pagination>
+                <el-pagination style="text-align: right" :total="len" layout="prev, pager, next, total"
+                    @current-change="handlePageChange" v-model:current-page="pageNum" :page-size="pageSize">
+                </el-pagination>
             </el-row>
         </el-form>
         <!-- <template #footer>
@@ -54,147 +44,143 @@
         </template> -->
     </el-dialog>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, watch, toRefs } from 'vue';
+<script lang="ts" setup>
+import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
-import { isTrue, notEmpty } from '@/common/assert';
+import FormatInput from './FormatInput.vue';
 
-export default defineComponent({
-    name: 'ListValue',
-    components: {},
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        redisId: {
-            type: [Number],
-            require: true,
-        },
-        db: {
-            type: [Number],
-            require: true,
-        },
-        keyInfo: {
-            type: [Object],
-        },
-        // 操作类型，1：新增，2：修改
-        operationType: {
-            type: [Number],
-        },
-        listValue: {
-            type: [Array, Object],
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    emits: ['valChange', 'cancel', 'update:visible'],
-    setup(props: any, { emit }) {
-        const state = reactive({
-            dialogVisible: false,
-            operationType: 1,
-            redisId: '',
-            db: 0,
-            key: {
-                key: '',
-                type: 'string',
-                timed: -1,
-            },
-            value: [{ value: '' }],
-            len: 0,
-            start: 0,
-            stop: 0,
-            pageNum: 1,
-            pageSize: 10,
-        });
-
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-            setTimeout(() => {
-                state.key = {
-                    key: '',
-                    type: 'string',
-                    timed: -1,
-                };
-                state.value = [];
-            }, 500);
-        };
-
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-            state.key = newValue.key;
-            state.redisId = newValue.redisId;
-            state.db = newValue.db;
-            state.key = newValue.keyInfo;
-            state.operationType = newValue.operationType;
-            // 如果是查看编辑操作，则获取值
-            if (state.dialogVisible && state.operationType == 2) {
-                getListValue();
-            }
-        });
-
-        const getListValue = async () => {
-            const pageNum = state.pageNum;
-            const pageSize = state.pageSize;
-            const res = await redisApi.getListValue.request({
-                id: state.redisId,
-                db: state.db,
-                key: state.key.key,
-                start: (pageNum - 1) * pageSize,
-                stop: pageNum * pageSize - 1,
-            });
-            state.len = res.len;
-            state.value = res.list.map((x: any) => {
-                return {
-                    value: x,
-                };
-            });
-        };
-
-        const lset = async (row: any, rowIndex: number) => {
-            await redisApi.setListValue.request({
-                id: state.redisId,
-                db: state.db,
-                key: state.key.key,
-                index: (state.pageNum - 1) * state.pageSize + rowIndex,
-                value: row.value,
-            });
-            ElMessage.success('数据保存成功');
-        };
-
-        const saveValue = async () => {
-            notEmpty(state.key.key, 'key不能为空');
-            isTrue(state.value.length > 0, 'list内容不能为空');
-            // const sv = { value: state.value.map((x) => x.value), id: state.redisId };
-            // Object.assign(sv, state.key);
-            // await redisApi.saveSetValue.request(sv);
-
-            ElMessage.success('数据保存成功');
-            cancel();
-            emit('valChange');
-        };
-
-        const onAddListValue = () => {
-            state.value.unshift({ value: '' });
-        };
-
-        const handlePageChange = (curPage: number) => {
-            state.pageNum = curPage;
-            getListValue();
-        };
-
-        return {
-            ...toRefs(state),
-            saveValue,
-            handlePageChange,
-            cancel,
-            lset,
-            onAddListValue,
-        };
+    title: {
+        type: String,
     },
+    redisId: {
+        type: [Number],
+        require: true,
+    },
+    db: {
+        type: [String],
+        require: true,
+    },
+    keyInfo: {
+        type: [Object],
+    },
+    // 操作类型，1：新增，2：修改
+    operationType: {
+        type: [Number],
+    },
+    listValue: {
+        type: [Array, Object],
+    },
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
+
+const state = reactive({
+    dialogVisible: false,
+    operationType: 1,
+    redisId: '',
+    db: '0',
+    key: {
+        key: '',
+        type: 'string',
+        timed: -1,
+    },
+    value: [{ value: '' }],
+    len: 0,
+    start: 0,
+    stop: 0,
+    pageNum: 1,
+    pageSize: 10,
 });
+
+const {
+    dialogVisible,
+    operationType,
+    key,
+    value,
+    len,
+    pageNum,
+    pageSize,
+} = toRefs(state)
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+    setTimeout(() => {
+        state.key = {
+            key: '',
+            type: 'string',
+            timed: -1,
+        };
+        state.value = [];
+    }, 500);
+};
+
+watch(props, async (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    state.redisId = newValue.redisId;
+    state.db = newValue.db;
+    state.key = newValue.keyInfo;
+    state.operationType = newValue.operationType;
+    // 如果是查看编辑操作，则获取值
+    if (state.dialogVisible && state.operationType == 2) {
+        getListValue();
+    }
+});
+
+const getListValue = async () => {
+    const pageNum = state.pageNum;
+    const pageSize = state.pageSize;
+    const res = await redisApi.getListValue.request({
+        id: state.redisId,
+        db: state.db,
+        key: state.key.key,
+        start: (pageNum - 1) * pageSize,
+        stop: pageNum * pageSize - 1,
+    });
+    state.len = res.len;
+    state.value = res.list.map((x: any) => {
+        return {
+            value: x,
+        };
+    });
+};
+
+const lset = async (row: any, rowIndex: number) => {
+    await redisApi.setListValue.request({
+        id: state.redisId,
+        db: state.db,
+        key: state.key.key,
+        index: (state.pageNum - 1) * state.pageSize + rowIndex,
+        value: row.value,
+    });
+    ElMessage.success('数据保存成功');
+};
+
+// const saveValue = async () => {
+//     notEmpty(state.key.key, 'key不能为空');
+//     isTrue(state.value.length > 0, 'list内容不能为空');
+//     // const sv = { value: state.value.map((x) => x.value), id: state.redisId };
+//     // Object.assign(sv, state.key);
+//     // await redisApi.saveSetValue.request(sv);
+
+//     ElMessage.success('数据保存成功');
+//     cancel();
+//     emit('valChange');
+// };
+
+// const onAddListValue = () => {
+//     state.value.unshift({ value: '' });
+// };
+
+const handlePageChange = (curPage: number) => {
+    state.pageNum = curPage;
+    getListValue();
+};
 </script>
 <style lang="scss">
 #string-value-text {
@@ -210,4 +196,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
+</style>

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

@@ -1,74 +1,59 @@
 <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" :before-close="cancel" :close-on-click-modal="false"
+            :destroy-on-close="true" width="38%">
             <el-form :model="form" ref="redisForm" :rules="rules" label-width="85px">
-                <el-form-item prop="projectId" label="项目:" required>
-                    <el-select style="width: 100%" v-model="form.projectId" placeholder="请选择项目" @change="changeProject" filterable>
-                        <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
+                <el-tabs v-model="tabActiveName">
+                    <el-tab-pane label="基础信息" name="basic">
+                        <el-form-item prop="tagId" label="标签:" required>
+                            <tag-select v-model:tag-id="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
+                        </el-form-item>
+                        <el-form-item prop="name" label="名称:" required>
+                            <el-input v-model.trim="form.name" placeholder="请输入redis名称" auto-complete="off"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="mode" label="mode:" required>
+                            <el-select style="width: 100%" v-model="form.mode" placeholder="请选择模式">
+                                <el-option label="standalone" value="standalone"> </el-option>
+                                <el-option label="cluster" value="cluster"> </el-option>
+                                <el-option label="sentinel" value="sentinel"> </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item prop="host" label="host:" required>
+                            <el-input v-model.trim="form.host"
+                                placeholder="请输入host:port；sentinel模式为: mastername=sentinelhost:port，若集群或哨兵需设多个节点可使用','分割"
+                                auto-complete="off" type="textarea"></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="getPwd" :underline="false" type="primary"
+                                                class="mr5">原密码</el-link>
+                                        </template>
+                                    </el-popover>
+                                </template></el-input>
+                        </el-form-item>
+                        <el-form-item prop="db" label="库号:" required>
+                            <el-select @change="changeDb" v-model="dbList" multiple allow-create filterable
+                                placeholder="请选择可操作库号" style="width: 100%">
+                                <el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :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-tab-pane>
 
-                <el-form-item prop="envId" label="环境:" required>
-                    <el-select @change="changeEnv" style="width: 100%" v-model="form.envId" placeholder="请选择环境">
-                        <el-option v-for="item in envs" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item prop="mode" label="mode:" required>
-                    <el-select style="width: 100%" v-model="form.mode" placeholder="请选择模式">
-                        <el-option label="standalone" value="standalone"> </el-option>
-                        <el-option label="cluster" value="cluster"> </el-option>
-                        <el-option label="sentinel" value="sentinel"> </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item prop="host" label="host:" required>
-                    <el-input
-                        v-model.trim="form.host"
-                        placeholder="请输入host:port；sentinel模式为: mastername=sentinelhost:port，若集群或哨兵需设多个节点可使用','分割"
-                        auto-complete="off"
-                        type="textarea"
-                    ></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="getPwd" :underline="false" type="primary" class="mr5">原密码</el-link>
-                                </template>
-                            </el-popover>
-                        </template></el-input
-                    >
-                </el-form-item>
-                <el-form-item prop="db" label="库号:" required>
-                    <el-select @change="changeDb" v-model="dbList" multiple placeholder="请选择可操作库号" style="width: 100%">
-                        <el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :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-item prop="enableSshTunnel" label="SSH隧道:">
-                    <el-col :span="3">
-                        <el-checkbox @change="getSshTunnelMachines" v-model="form.enableSshTunnel" :true-label="1" :false-label="-1"></el-checkbox>
-                    </el-col>
-                    <el-col :span="2" v-if="form.enableSshTunnel == 1"> 机器: </el-col>
-                    <el-col :span="19" v-if="form.enableSshTunnel == 1">
-                        <el-select style="width: 100%" v-model="form.sshTunnelMachineId" placeholder="请选择SSH隧道机器">
-                            <el-option
-                                v-for="item in sshTunnelMachineList"
-                                :key="item.id"
-                                :label="`${item.ip}:${item.port} [${item.name}]`"
-                                :value="item.id"
-                            >
-                            </el-option>
-                        </el-select>
-                    </el-col>
-                </el-form-item>
+                    <el-tab-pane label="其他配置" name="other">
+                        <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>
@@ -81,202 +66,145 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
 import { redisApi } from './api';
-import { projectApi } from '../project/api.ts';
-import { machineApi } from '../machine/api.ts';
 import { ElMessage } from 'element-plus';
 import { RsaEncrypt } from '@/common/rsa';
+import TagSelect from '../component/TagSelect.vue';
+import SshTunnelSelect from '../component/SshTunnelSelect.vue';
 
-export default defineComponent({
-    name: 'RedisEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        projects: {
-            type: Array,
-        },
-        redis: {
-            type: [Boolean, Object],
-        },
-        title: {
-            type: String,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const redisForm: any = ref(null);
-        const state = reactive({
-            dialogVisible: false,
-            projects: [],
-            envs: [],
-            sshTunnelMachineList: [],
-            form: {
-                id: null,
-                name: null,
-                mode: 'standalone',
-                host: '',
-                password: null,
-                db: '',
-                project: null,
-                projectId: null,
-                envId: null,
-                env: null,
-                remark: '',
-                enableSshTunnel: null,
-                sshTunnelMachineId: null,
-            },
-            dbList: [0],
-            pwd: '',
-            btnLoading: false,
-            rules: {
-                projectId: [
-                    {
-                        required: true,
-                        message: '请选择项目',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                envId: [
-                    {
-                        required: true,
-                        message: '请选择环境',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                host: [
-                    {
-                        required: true,
-                        message: '请输入主机ip:port',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                db: [
-                    {
-                        required: true,
-                        message: '请选择库号',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                mode: [
-                    {
-                        required: true,
-                        message: '请选择模式',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-            },
-        });
+    redis: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+})
 
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-            if (!state.dialogVisible) {
+const emit = defineEmits(['update:visible', 'val-change', 'cancel'])
+
+const rules = {
+    host: [
+        {
+            required: true,
+            message: '请输入主机ip:port',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    db: [
+        {
+            required: true,
+            message: '请选择库号',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    mode: [
+        {
+            required: true,
+            message: '请选择模式',
+            trigger: ['change', 'blur'],
+        },
+    ],
+}
+
+const redisForm: any = ref(null);
+const state = reactive({
+    dialogVisible: false,
+    tabActiveName: 'basic',
+    form: {
+        id: null,
+        tagId: null as any,
+        tagPath: null as any,
+        name: null,
+        mode: 'standalone',
+        host: '',
+        password: null,
+        db: '',
+        remark: '',
+        sshTunnelMachineId: -1,
+    },
+    dbList: [0],
+    pwd: '',
+    btnLoading: false,
+
+});
+
+const {
+    dialogVisible,
+    tabActiveName,
+    form,
+    dbList,
+    pwd,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, async (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (!state.dialogVisible) {
+        return;
+    }
+    state.tabActiveName = 'basic';
+    if (newValue.redis) {
+        state.form = { ...newValue.redis };
+        convertDb(state.form.db);
+    } else {
+        state.form = { db: '0' } as any;
+        state.dbList = [];
+    }
+});
+
+const convertDb = (db: string) => {
+    state.dbList = db.split(',').map((x) => Number.parseInt(x));
+};
+
+/**
+ * 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加库号
+ */
+const changeDb = () => {
+    state.form.db = state.dbList.length == 0 ? '' : state.dbList.join(',');
+};
+
+const getPwd = async () => {
+    state.pwd = await redisApi.getRedisPwd.request({ id: state.form.id });
+};
+
+const btnOk = async () => {
+    redisForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            const reqForm = { ...state.form };
+            if (reqForm.mode == 'sentinel' && reqForm.host.split('=').length != 2) {
+                ElMessage.error('sentinel模式host需为: mastername=sentinelhost:sentinelport模式');
                 return;
             }
-            state.projects = newValue.projects;
-            if (newValue.redis) {
-                getEnvs(newValue.redis.projectId);
-                state.form = { ...newValue.redis };
-                convertDb(state.form.db);
-            } else {
-                state.envs = [];
-                state.form = { db: '0', enableSshTunnel: -1 } as any;
-                state.dbList = [];
+            if (!state.form.sshTunnelMachineId || state.form.sshTunnelMachineId <= 0) {
+                reqForm.sshTunnelMachineId = -1
             }
-            getSshTunnelMachines();
-        });
+            reqForm.password = await RsaEncrypt(reqForm.password);
+            redisApi.saveRedis.request(reqForm).then(() => {
+                ElMessage.success('保存成功');
+                emit('val-change', state.form);
+                state.btnLoading = true;
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
 
-        const convertDb = (db: string) => {
-            state.dbList = db.split(',').map((x) => Number.parseInt(x));
-        };
-
-        /**
-         * 改变表单中的数据库字段，方便表单错误提示。如全部删光，可提示请添加库号
-         */
-        const changeDb = () => {
-            state.form.db = state.dbList.length == 0 ? '' : state.dbList.join(',');
-        };
-
-        const getSshTunnelMachines = async () => {
-            if (state.form.enableSshTunnel == 1 && state.sshTunnelMachineList.length == 0) {
-                const res = await machineApi.list.request({ pageNum: 1, pageSize: 100 });
-                state.sshTunnelMachineList = res.list;
-            }
-        };
-
-        const getEnvs = async (projectId: any) => {
-            state.envs = await projectApi.projectEnvs.request({ projectId });
-        };
-
-        const getPwd = async () => {
-            state.pwd = await redisApi.getRedisPwd.request({ id: state.form.id });
-        };
-
-        const changeProject = (projectId: number) => {
-            for (let p of state.projects as any) {
-                if (p.id == projectId) {
-                    state.form.project = p.name;
-                }
-            }
-            state.form.envId = null;
-            state.form.env = null;
-            state.envs = [];
-            getEnvs(projectId);
-        };
-
-        const changeEnv = (envId: number) => {
-            for (let p of state.envs as any) {
-                if (p.id == envId) {
-                    state.form.env = p.name;
-                }
-            }
-        };
-
-        const btnOk = async () => {
-            redisForm.value.validate(async (valid: boolean) => {
-                if (valid) {
-                    const reqForm = { ...state.form };
-                    if (reqForm.mode == 'sentinel' && reqForm.host.split('=').length != 2) {
-                        ElMessage.error('sentinel模式host需为: mastername=sentinelhost:sentinelport模式');
-                        return;
-                    }
-                    reqForm.password = await RsaEncrypt(reqForm.password);
-                    redisApi.saveRedis.request(reqForm).then(() => {
-                        ElMessage.success('保存成功');
-                        emit('val-change', state.form);
-                        state.btnLoading = true;
-                        setTimeout(() => {
-                            state.btnLoading = false;
-                        }, 1000);
-
-                        cancel();
-                    });
-                } else {
-                    ElMessage.error('请正确填写信息');
-                    return false;
-                }
+                cancel();
             });
-        };
+        } else {
+            ElMessage.error('请正确填写信息');
+            return false;
+        }
+    });
+};
 
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-        };
-
-        return {
-            ...toRefs(state),
-            redisForm,
-            changeDb,
-            getSshTunnelMachines,
-            getPwd,
-            changeProject,
-            changeEnv,
-            btnOk,
-            cancel,
-        };
-    },
-});
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
 </script>
-<style lang="scss">
-</style>
+<style lang="scss"></style>

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

@@ -2,11 +2,13 @@
     <div>
         <el-card>
             <el-button type="primary" icon="plus" @click="editRedis(true)" plain>添加</el-button>
-            <el-button type="primary" icon="edit" :disabled="currentId == null" @click="editRedis(false)" plain>编辑</el-button>
-            <el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteRedis" plain>删除</el-button>
+            <el-button type="primary" icon="edit" :disabled="currentId == null" @click="editRedis(false)" plain>编辑
+            </el-button>
+            <el-button type="danger" icon="delete" :disabled="currentId == null" @click="deleteRedis" plain>删除
+            </el-button>
             <div style="float: right">
-                <el-select @focus="getProjects" v-model="query.projectId" placeholder="请选择项目" filterable clearable>
-                    <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
+                <el-select @focus="getTags" v-model="query.tagPath" placeholder="请选择标签" filterable clearable>
+                    <el-option v-for="item in tags" :key="item" :label="item" :value="item"> </el-option>
                 </el-select>
                 <el-button class="ml5" @click="search" type="success" icon="search"></el-button>
             </div>
@@ -18,48 +20,43 @@
                         </el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="project" label="项目" min-width="100"></el-table-column>
-                <el-table-column prop="env" label="环境" min-width="100"></el-table-column>
+                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                        <tag-info :tag-path="scope.row.tagPath" />
+                        <span class="ml5">
+                            {{ scope.row.tagPath }}
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="名称" min-width="100"></el-table-column>
                 <el-table-column prop="host" label="host:port" min-width="150" show-overflow-tooltip> </el-table-column>
                 <el-table-column prop="mode" label="mode" min-width="100"></el-table-column>
                 <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="createTime" label="创建时间" min-width="160">
+
+                <el-table-column label="更多" min-width="155" fixed="right">
                     <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
-                    </template>
-                </el-table-column>
-                <el-table-column prop="creator" label="创建人" min-width="100"></el-table-column>
-                <el-table-column label="更多" min-width="130" fixed="right">
-                    <template #default="scope">
-                        <el-link
-                            v-if="scope.row.mode == 'standalone' || scope.row.mode == 'sentinel'"
-                            type="primary"
-                            @click="info(scope.row)"
-                            :underline="false"
-                            >单机信息</el-link
-                        >
-                        <el-link @click="onShowClusterInfo(scope.row)" v-if="scope.row.mode == 'cluster'" type="success" :underline="false"
-                            >集群信息</el-link
-                        >
+                        <el-link @click="showDetail(scope.row)" :underline="false">详情</el-link>
+                        <el-divider direction="vertical" border-style="dashed" />
+
+                        <el-link v-if="scope.row.mode === 'standalone' || scope.row.mode === 'sentinel'" type="primary"
+                            @click="showInfoDialog(scope.row)" :underline="false">单机信息</el-link>
+                        <el-link @click="onShowClusterInfo(scope.row)" v-if="scope.row.mode === 'cluster'"
+                            type="primary" :underline="false">集群信息</el-link>
                     </template>
                 </el-table-column>
             </el-table>
             <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: right"
-                    @current-change="handlePageChange"
-                    :total="total"
-                    layout="prev, pager, next, total, jumper"
-                    v-model:current-page="query.pageNum"
-                    :page-size="query.pageSize"
-                ></el-pagination>
+                <el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
+                    layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
+                    :page-size="query.pageSize"></el-pagination>
             </el-row>
         </el-card>
 
         <info v-model:visible="infoDialog.visible" :title="infoDialog.title" :info="infoDialog.info"></info>
 
         <el-dialog width="1000px" title="集群信息" v-model="clusterInfoDialog.visible">
-            <el-input type="textarea" :autosize="{ minRows: 12, maxRows: 12 }" v-model="clusterInfoDialog.info"> </el-input>
+            <el-input type="textarea" :autosize="{ minRows: 12, maxRows: 12 }" v-model="clusterInfoDialog.info">
+            </el-input>
 
             <el-divider content-position="left">节点信息</el-divider>
             <el-table :data="clusterInfoDialog.nodes" stripe size="small" border>
@@ -67,44 +64,37 @@
                     <template #header>
                         nodeId
                         <el-tooltip class="box-item" effect="dark" content="节点id" placement="top">
-                            <el-icon><question-filled /></el-icon>
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
                 <el-table-column prop="ip" label="ip" min-width="180">
                     <template #header>
                         ip
-                        <el-tooltip
-                            class="box-item"
-                            effect="dark"
-                            content="ip:port1@port2：port1指redis服务器与客户端通信的端口，port2则是集群内部节点间通信的端口"
-                            placement="top"
-                        >
-                            <el-icon><question-filled /></el-icon>
+                        <el-tooltip class="box-item" effect="dark"
+                            content="ip:port1@port2：port1指redis服务器与客户端通信的端口，port2则是集群内部节点间通信的端口" placement="top">
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                     <template #default="scope">
-                        <el-tag
-                            @click="info({ id: clusterInfoDialog.redisId, ip: scope.row.ip })"
-                            effect="plain"
-                            type="success"
-                            size="small"
-                            style="cursor: pointer"
-                            >{{ scope.row.ip }}</el-tag
-                        >
+                        <el-tag @click="showInfoDialog({ id: clusterInfoDialog.redisId, ip: scope.row.ip })"
+                            effect="plain" type="success" size="small" style="cursor: pointer">{{ scope.row.ip }}
+                        </el-tag>
                     </template>
                 </el-table-column>
                 <el-table-column prop="flags" label="flags" min-width="110"></el-table-column>
                 <el-table-column prop="masterSlaveRelation" label="masterSlaveRelation" min-width="300">
                     <template #header>
                         masterSlaveRelation
-                        <el-tooltip
-                            class="box-item"
-                            effect="dark"
-                            content="如果节点是slave，并且已知master节点，则为master节点ID；否则为符号'-'"
-                            placement="top"
-                        >
-                            <el-icon><question-filled /></el-icon>
+                        <el-tooltip class="box-item" effect="dark"
+                            content="如果节点是slave，并且已知master节点，则为master节点ID；否则为符号'-'" placement="top">
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
@@ -121,13 +111,12 @@
                 <el-table-column prop="configEpoch" label="configEpoch" min-width="130">
                     <template #header>
                         configEpoch
-                        <el-tooltip
-                            class="box-item"
-                            effect="dark"
+                        <el-tooltip class="box-item" effect="dark"
                             content="节点的epoch值（如果该节点是从节点，则为其主节点的epoch值）。每当节点发生失败切换时，都会创建一个新的，独特的，递增的epoch。"
-                            placement="top"
-                        >
-                            <el-icon><question-filled /></el-icon>
+                            placement="top">
+                            <el-icon>
+                                <question-filled />
+                            </el-icon>
                         </el-tooltip>
                     </template>
                 </el-table-column>
@@ -136,170 +125,182 @@
             </el-table>
         </el-dialog>
 
-        <redis-edit
-            @val-change="valChange"
-            :projects="projects"
-            :title="redisEditDialog.title"
-            v-model:visible="redisEditDialog.visible"
-            v-model:redis="redisEditDialog.data"
-        ></redis-edit>
+        <el-dialog v-model="detailDialog.visible">
+            <el-descriptions title="详情" :column="3" border>
+                <el-descriptions-item :span="1.5" label="id">{{ detailDialog.data.id }}</el-descriptions-item>
+                <el-descriptions-item :span="1.5" label="名称">{{ detailDialog.data.name }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="标签路径">{{ detailDialog.data.tagPath }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="主机">{{ detailDialog.data.host }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="库">{{ detailDialog.data.db }}</el-descriptions-item>
+                <el-descriptions-item :span="3" label="备注">{{ detailDialog.data.remark }}</el-descriptions-item>
+
+                <el-descriptions-item :span="3" label="SSH隧道">{{ detailDialog.data.sshTunnelMachineId > 0 ? '是' : '否' }}
+                </el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="创建时间">{{ dateFormat(detailDialog.data.createTime) }}
+                </el-descriptions-item>
+                <el-descriptions-item :span="1" label="创建者">{{ detailDialog.data.creator }}</el-descriptions-item>
+
+                <el-descriptions-item :span="2" label="更新时间">{{ dateFormat(detailDialog.data.updateTime) }}
+                </el-descriptions-item>
+                <el-descriptions-item :span="1" label="修改者">{{ detailDialog.data.modifier }}</el-descriptions-item>
+            </el-descriptions>
+        </el-dialog>
+
+        <redis-edit @val-change="valChange" :tags="tags" :title="redisEditDialog.title"
+            v-model:visible="redisEditDialog.visible" v-model:redis="redisEditDialog.data"></redis-edit>
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import Info from './Info.vue';
 import { redisApi } from './api';
-import { toRefs, reactive, defineComponent, onMounted } from 'vue';
+import { toRefs, reactive, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { projectApi } from '../project/api.ts';
+import { tagApi } from '../tag/api.ts';
 import RedisEdit from './RedisEdit.vue';
+import { dateFormat } from '@/common/utils/date';
+import TagInfo from '../component/TagInfo.vue';
 
-export default defineComponent({
-    name: 'RedisList',
-    components: {
-        Info,
-        RedisEdit,
+const state = reactive({
+    tags: [],
+    redisTable: [],
+    total: 0,
+    currentId: null,
+    currentData: null,
+    query: {
+        tagPath: null,
+        pageNum: 1,
+        pageSize: 10,
+        clusterId: null,
     },
-    setup() {
-        const state = reactive({
-            projects: [],
-            redisTable: [],
-            total: 0,
-            currentId: null,
-            currentData: null,
-            query: {
-                pageNum: 1,
-                pageSize: 10,
-                prjectId: null,
-                clusterId: null,
-            },
-            redisInfo: {
-                url: '',
-            },
-            clusterInfoDialog: {
-                visible: false,
-                redisId: 0,
-                info: '',
-                nodes: [],
-            },
-            clusters: [
-                {
-                    id: 0,
-                    name: '单机',
-                },
-            ],
-            infoDialog: {
-                title: '',
-                visible: false,
-                info: {
-                    Server: {},
-                    Keyspace: {},
-                    Clients: {},
-                    CPU: {},
-                    Memory: {},
-                },
-            },
-            redisEditDialog: {
-                visible: false,
-                data: null,
-                title: '新增redis',
-            },
-        });
-
-        onMounted(async () => {
-            search();
-        });
-
-        const handlePageChange = (curPage: number) => {
-            state.query.pageNum = curPage;
-            search();
-        };
-
-        const choose = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.currentId = item.id;
-            state.currentData = item;
-        };
-
-        const deleteRedis = async () => {
-            try {
-                await ElMessageBox.confirm(`确定删除该redis?`, '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                });
-                await redisApi.delRedis.request({ id: state.currentId });
-                ElMessage.success('删除成功');
-                state.currentData = null;
-                state.currentId = null;
-                search();
-            } catch (err) {}
-        };
-
-        const info = async (redis: any) => {
-            var host = redis.host;
-            if (redis.ip) {
-                host = redis.ip.split('@')[0];
-            }
-            const res = await redisApi.redisInfo.request({ id: redis.id, host });
-            state.infoDialog.info = res;
-            state.infoDialog.title = `'${host}' info`;
-            state.infoDialog.visible = true;
-        };
-
-        const onShowClusterInfo = async (redis: any) => {
-            const ci = await redisApi.clusterInfo.request({ id: redis.id });
-            state.clusterInfoDialog.info = ci.clusterInfo;
-            state.clusterInfoDialog.nodes = ci.clusterNodes;
-            state.clusterInfoDialog.redisId = redis.id;
-            state.clusterInfoDialog.visible = true;
-        };
-
-        const search = async () => {
-            const res = await redisApi.redisList.request(state.query);
-            state.redisTable = res.list;
-            state.total = res.total;
-        };
-
-        const getProjects = async () => {
-            state.projects = await projectApi.accountProjects.request(null);
-        };
-
-        const editRedis = async (isAdd = false) => {
-            await getProjects();
-            if (isAdd) {
-                state.redisEditDialog.data = null;
-                state.redisEditDialog.title = '新增redis';
-            } else {
-                state.redisEditDialog.data = state.currentData;
-                state.redisEditDialog.title = '修改redis';
-            }
-            state.redisEditDialog.visible = true;
-        };
-
-        const valChange = () => {
-            state.currentId = null;
-            state.currentData = null;
-            search();
-        };
-
-        return {
-            ...toRefs(state),
-            getProjects,
-            search,
-            handlePageChange,
-            choose,
-            info,
-            onShowClusterInfo,
-            deleteRedis,
-            editRedis,
-            valChange,
-        };
+    detailDialog: {
+        visible: false,
+        data: null as any,
+    },
+    clusterInfoDialog: {
+        visible: false,
+        redisId: 0,
+        info: '',
+        nodes: [],
+    },
+    infoDialog: {
+        title: '',
+        visible: false,
+        info: {
+            Server: {},
+            Keyspace: {},
+            Clients: {},
+            CPU: {},
+            Memory: {},
+        },
+    },
+    redisEditDialog: {
+        visible: false,
+        data: null as any,
+        title: '新增redis',
     },
 });
+
+const {
+    tags,
+    redisTable,
+    total,
+    currentId,
+    query,
+    detailDialog,
+    clusterInfoDialog,
+    infoDialog,
+    redisEditDialog,
+} = toRefs(state)
+
+onMounted(async () => {
+    search();
+});
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    search();
+};
+
+const showDetail = (detail: any) => {
+    state.detailDialog.data = detail;
+    state.detailDialog.visible = true;
+}
+
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.currentId = item.id;
+    state.currentData = item;
+};
+
+const deleteRedis = async () => {
+    try {
+        await ElMessageBox.confirm(`确定删除该redis?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await redisApi.delRedis.request({ id: state.currentId });
+        ElMessage.success('删除成功');
+        state.currentData = null;
+        state.currentId = null;
+        search();
+    } catch (err) { }
+};
+
+const showInfoDialog = async (redis: any) => {
+    var host = redis.host;
+    if (redis.ip) {
+        host = redis.ip.split('@')[0];
+    }
+    const res = await redisApi.redisInfo.request({ id: redis.id, host });
+    state.infoDialog.info = res;
+    state.infoDialog.title = `[${redis.name || host}] redis信息`;
+    state.infoDialog.visible = true;
+};
+
+const onShowClusterInfo = async (redis: any) => {
+    const ci = await redisApi.clusterInfo.request({ id: redis.id });
+    state.clusterInfoDialog.info = ci.clusterInfo;
+    state.clusterInfoDialog.nodes = ci.clusterNodes;
+    state.clusterInfoDialog.redisId = redis.id;
+    state.clusterInfoDialog.visible = true;
+};
+
+const search = async () => {
+    const res = await redisApi.redisList.request(state.query);
+    state.redisTable = res.list;
+    state.total = res.total;
+};
+
+const getTags = async () => {
+    state.tags = await tagApi.getAccountTags.request(null);
+};
+
+const editRedis = async (isAdd = false) => {
+    if (isAdd) {
+        state.redisEditDialog.data = null;
+        state.redisEditDialog.title = '新增redis';
+    } else {
+        state.redisEditDialog.data = state.currentData;
+        state.redisEditDialog.title = '修改redis';
+    }
+    state.redisEditDialog.visible = true;
+};
+
+const valChange = () => {
+    state.currentId = null;
+    state.currentData = null;
+    search();
+};
 </script>
 
 <style>
+
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
+    <el-dialog class="el-table-z-index-inherit" :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
         <el-form label-width="85px">
             <el-form-item prop="key" label="key:">
                 <el-input :disabled="operationType == 2" v-model="key.key"></el-input>
@@ -15,12 +15,14 @@
             <el-table :data="value" stripe style="width: 100%">
                 <el-table-column prop="value" label="value" min-width="200">
                     <template #default="scope">
-                        <el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="scope.row.value" clearable type="textarea"
+                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></format-input>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" width="90">
                     <template #default="scope">
-                        <el-button type="danger" @click="value.splice(scope.$index, 1)" icon="delete" size="small" plain>删除</el-button>
+                        <el-button type="danger" @click="value.splice(scope.$index, 1)" icon="delete" size="small"
+                            plain>删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -33,119 +35,115 @@
         </template>
     </el-dialog>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, watch, toRefs } from 'vue';
+<script lang="ts" setup>
+import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
 import { isTrue, notEmpty } from '@/common/assert';
+import FormatInput from './FormatInput.vue';
 
-export default defineComponent({
-    name: 'SetValue',
-    components: {},
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        redisId: {
-            type: [Number],
-            require: true,
-        },
-        db: {
-            type: [Number],
-            require: true,
-        },
-        keyInfo: {
-            type: [Object],
-        },
-        // 操作类型，1：新增，2：修改
-        operationType: {
-            type: [Number],
-        },
-        setValue: {
-            type: [Array, Object],
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    emits: ['valChange', 'cancel', 'update:visible'],
-    setup(props: any, { emit }) {
-        const state = reactive({
-            dialogVisible: false,
-            operationType: 1,
-            redisId: '',
-            db: 0,
-            key: {
-                key: '',
-                type: 'string',
-                timed: -1,
-            },
-            value: [{ value: '' }],
-        });
-
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-            setTimeout(() => {
-                state.key = {
-                    key: '',
-                    type: 'string',
-                    timed: -1,
-                };
-                state.value = [];
-            }, 500);
-        };
-
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-            state.key = newValue.key;
-            state.redisId = newValue.redisId;
-            state.db = newValue.db;
-            state.key = newValue.keyInfo;
-            state.operationType = newValue.operationType;
-            // 如果是查看编辑操作，则获取值
-            if (state.dialogVisible && state.operationType == 2) {
-                getSetValue();
-            }
-        });
-
-        const getSetValue = async () => {
-            const res = await redisApi.getSetValue.request({
-                id: state.redisId,
-                db: state.db,
-                key: state.key.key,
-            });
-            state.value = res.map((x: any) => {
-                return {
-                    value: x,
-                };
-            });
-        };
-
-        const saveValue = async () => {
-            notEmpty(state.key.key, 'key不能为空');
-            isTrue(state.value.length > 0, 'set内容不能为空');
-            const sv = { value: state.value.map((x) => x.value), id: state.redisId, db: state.db };
-            Object.assign(sv, state.key);
-            await redisApi.saveSetValue.request(sv);
-
-            ElMessage.success('数据保存成功');
-            cancel();
-            emit('valChange');
-        };
-
-        const onAddSetValue = () => {
-            state.value.unshift({ value: '' });
-        };
-
-        return {
-            ...toRefs(state),
-            saveValue,
-            cancel,
-            onAddSetValue,
-        };
+    title: {
+        type: String,
     },
+    redisId: {
+        type: [Number],
+        require: true,
+    },
+    db: {
+        type: [String],
+        require: true,
+    },
+    keyInfo: {
+        type: [Object],
+    },
+    // 操作类型，1：新增，2：修改
+    operationType: {
+        type: [Number],
+    },
+    setValue: {
+        type: [Array, Object],
+    },
+})
+
+const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
+
+const state = reactive({
+    dialogVisible: false,
+    operationType: 1,
+    redisId: '',
+    db: '0',
+    key: {
+        key: '',
+        type: 'set',
+        timed: -1,
+    },
+    value: [{ value: '' }],
 });
+
+const {
+    dialogVisible,
+    operationType,
+    key,
+    value,
+} = toRefs(state)
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+    setTimeout(() => {
+        state.key = {
+            key: '',
+            type: 'string',
+            timed: -1,
+        };
+        state.value = [];
+    }, 500);
+};
+
+watch(props, async (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    state.redisId = newValue.redisId;
+    state.db = newValue.db;
+    state.key = newValue.keyInfo;
+    state.operationType = newValue.operationType;
+    // 如果是查看编辑操作，则获取值
+    if (state.dialogVisible && state.operationType == 2) {
+        getSetValue();
+    }
+});
+
+const getSetValue = async () => {
+    const res = await redisApi.getSetValue.request({
+        id: state.redisId,
+        db: state.db,
+        key: state.key.key,
+    });
+    state.value = res.map((x: any) => {
+        return {
+            value: x,
+        };
+    });
+};
+
+const saveValue = async () => {
+    notEmpty(state.key.key, 'key不能为空');
+    isTrue(state.value.length > 0, 'set内容不能为空');
+    const sv = { value: state.value.map((x) => x.value), id: state.redisId, db: state.db };
+    Object.assign(sv, state.key);
+    await redisApi.saveSetValue.request(sv);
+
+    ElMessage.success('数据保存成功');
+    cancel();
+    emit('valChange');
+};
+
+const onAddSetValue = () => {
+    state.value.unshift({ value: '' });
+};
 </script>
 <style lang="scss">
 #string-value-text {
@@ -161,4 +159,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
+</style>

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

@@ -12,11 +12,11 @@
             </el-form-item>
 
             <div id="string-value-text" style="width: 100%">
-                <el-input class="json-text" v-model="string.value" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
-                <el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
+                <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="string.value" :autosize="{ minRows: 10, maxRows: 20 }"></format-input>
+                <!-- <el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
                     <el-option key="text" label="text" value="text"> </el-option>
                     <el-option key="json" label="json" value="json"> </el-option>
-                </el-select>
+                </el-select> -->
             </div>
         </el-form>
         <template #footer>
@@ -27,144 +27,128 @@
         </template>
     </el-dialog>
 </template>
-<script lang="ts">
-import { defineComponent, reactive, watch, toRefs } from 'vue';
+<script lang="ts" setup>
+import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
 import { notEmpty } from '@/common/assert';
-import { formatJsonString } from '@/common/utils/format';
+import FormatInput from './FormatInput.vue';
 
-export default defineComponent({
-    name: 'StringValue',
-    components: {},
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        redisId: {
-            type: [Number],
-            require: true,
-        },
-        db: {
-            type: [Number],
-            require: true,
-        },
-        keyInfo: {
-            type: [Object],
-        },
-        // 操作类型，1：新增，2：修改
-        operationType: {
-            type: [Number],
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    emits: ['valChange', 'cancel', 'update:visible'],
-    setup(props: any, { emit }) {
-        const state = reactive({
-            dialogVisible: false,
-            operationType: 1,
-            redisId: '',
-            db: 0,
-            key: {
-                key: '',
-                type: 'string',
-                timed: -1,
-            },
-            string: {
-                type: 'text',
-                value: '',
-            },
-        });
+    title: {
+        type: String,
+    },
+    redisId: {
+        type: [Number],
+        require: true,
+    },
+    db: {
+        type: [String],
+        require: true,
+    },
+    keyInfo: {
+        type: [Object],
+    },
+    // 操作类型，1：新增，2：修改
+    operationType: {
+        type: [Number],
+    },
+})
 
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-            setTimeout(() => {
-                state.key = {
-                    key: '',
-                    type: 'string',
-                    timed: -1,
-                };
-                state.string.value = '';
-                state.string.type = 'text';
-            }, 500);
-        };
+const emit = defineEmits(['update:visible', 'cancel', 'valChange'])
 
-        watch(
-            () => props.visible,
-            (val) => {
-                state.dialogVisible = val;
-            }
-        );
-
-        watch(
-            () => props.redisId,
-            (val) => {
-                state.redisId = val;
-            }
-        );
-
-        watch(
-            () => props.db,
-            (val) => {
-                state.db = val;
-            }
-        );
-
-        watch(props, async (newValue) => {
-            state.dialogVisible = newValue.visible;
-            state.key = newValue.key;
-            state.redisId = newValue.redisId;
-            state.db = newValue.db;
-            state.key = newValue.keyInfo;
-            state.operationType = newValue.operationType;
-            // 如果是查看编辑操作，则获取值
-            if (state.dialogVisible && state.operationType == 2) {
-                getStringValue();
-            }
-        });
-
-        const getStringValue = async () => {
-            state.string.value = await redisApi.getStringValue.request({
-                id: state.redisId,
-                db: state.db,
-                key: state.key.key,
-            });
-        };
-
-        const saveValue = async () => {
-            notEmpty(state.key.key, 'key不能为空');
-
-            notEmpty(state.string.value, 'value不能为空');
-            const sv = { value: formatJsonString(state.string.value, true), id: state.redisId, db: state.db };
-            Object.assign(sv, state.key);
-            await redisApi.saveStringValue.request(sv);
-            ElMessage.success('数据保存成功');
-            cancel();
-            emit('valChange');
-        };
-
-        // 更改文本类型
-        const onChangeTextType = (val: string) => {
-            if (val == 'json') {
-                state.string.value = formatJsonString(state.string.value, false);
-                return;
-            }
-            if (val == 'text') {
-                state.string.value = formatJsonString(state.string.value, true);
-            }
-        };
-
-        return {
-            ...toRefs(state),
-            saveValue,
-            cancel,
-            onChangeTextType,
-        };
+const state = reactive({
+    dialogVisible: false,
+    operationType: 1,
+    redisId: '',
+    db: '0',
+    key: {
+        key: '',
+        type: 'string',
+        timed: -1,
+    },
+    string: {
+        type: 'text',
+        value: '',
     },
 });
+
+const {
+    dialogVisible,
+    operationType,
+    key,
+    string,
+} = toRefs(state)
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+    setTimeout(() => {
+        state.key = {
+            key: '',
+            type: 'string',
+            timed: -1,
+        };
+        state.string.value = '';
+        state.string.type = 'text';
+    }, 500);
+};
+
+watch(
+    () => props.visible,
+    (val) => {
+        state.dialogVisible = val;
+    }
+);
+
+watch(
+    () => props.redisId,
+    (val) => {
+        state.redisId = val as any;
+    }
+);
+
+watch(
+    () => props.db,
+    (val) => {
+        state.db = val as any;
+    }
+);
+
+watch(props, async (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    state.redisId = newValue.redisId;
+    state.db = newValue.db;
+    state.key = newValue.keyInfo;
+    state.operationType = newValue.operationType;
+    // 如果是查看编辑操作，则获取值
+    if (state.dialogVisible && state.operationType == 2) {
+        getStringValue();
+    }
+});
+
+const getStringValue = async () => {
+    state.string.value = await redisApi.getStringValue.request({
+        id: state.redisId,
+        db: state.db,
+        key: state.key.key,
+    });
+};
+
+const saveValue = async () => {
+    notEmpty(state.key.key, 'key不能为空');
+
+    notEmpty(state.string.value, 'value不能为空');
+    const sv = { value: state.string.value, id: state.redisId, db: state.db };
+    Object.assign(sv, state.key);
+    await redisApi.saveStringValue.request(sv);
+    ElMessage.success('数据保存成功');
+    cancel();
+    emit('valChange');
+};
 </script>
 <style lang="scss">
 #string-value-text {
@@ -180,4 +164,4 @@ export default defineComponent({
         max-width: 70px;
     }
 }
-</style>
+</style>

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

@@ -1,88 +0,0 @@
-<template>
-    <el-dialog :title="keyValue.key" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="900px">
-        <el-form>
-            <el-form-item>
-                <el-input  class="json-text" v-model="keyValue2.jsonValue" type="textarea" :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
-            </el-form-item>
-            <!-- <vue3-json-editor v-model="keyValue2.jsonValue" @json-change="valueChange" :show-btns="false" :expandedOnStart="true" /> -->
-        </el-form>
-        <template #footer>
-            <div class="dialog-footer">
-                <el-button @click="cancel()">取 消</el-button>
-                <el-button @click="saveValue" type="primary">确 定</el-button>
-            </div>
-        </template>
-    </el-dialog>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, watch, toRefs } from 'vue';
-import { redisApi } from './api';
-import { ElMessage } from 'element-plus';
-import { isTrue } from '@/common/assert';
-
-
-export default defineComponent({
-    name: 'ValueDialog',
-    components: {},
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        title: {
-            type: String,
-        },
-        keyValue: {
-            type: [String, Object],
-        },
-    },
-    setup(props: any, { emit }) {
-        const state = reactive({
-            dialogVisible: false,
-            keyValue2: {} as any,
-        });
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-        };
-
-        watch(
-            () => props.visible,
-            (val) => {
-                state.dialogVisible = val;
-            }
-        );
-
-        watch(
-            () => props.keyValue,
-            (val) => {
-                state.keyValue2 = val;
-                if (typeof val.value == 'string') {
-                    state.keyValue2.jsonValue = JSON.stringify(JSON.parse(val.value), null, 2);
-                } else {
-                    state.keyValue2.jsonValue = JSON.stringify(val.value, null, 2);
-                }
-            }
-        );
-
-        const saveValue = async () => {
-            isTrue(state.keyValue2.type == 'string', '暂不支持除string外其他类型修改');
-
-            state.keyValue2.value = state.keyValue2.jsonValue;
-            await redisApi.saveStringValue.request(state.keyValue2);
-            ElMessage.success('保存成功');
-            cancel();
-        };
-
-        const valueChange = (val: any) => {
-            state.keyValue2.value = JSON.stringify(val);
-        };
-
-        return {
-            ...toRefs(state),
-            saveValue,
-            valueChange,
-            cancel,
-        };
-    },
-});
-</script>

mayfly_go_web/src/views/ops/tag/TagTreeList.vue

@@ -0,0 +1,293 @@
+<template>
+    <div class="menu">
+        <div class="toolbar">
+            <el-input v-model="filterTag" placeholder="输入标签关键字过滤" style="width: 200px; margin-right: 10px" />
+            <el-button v-auth="'tag:save'" type="primary" icon="plus" @click="showSaveTabDialog(null)">添加</el-button>
+            <div style="float: right">
+                <el-tooltip effect="dark" placement="top">
+                    <template #content>
+                        1. 用于将资产进行归类
+                        <br />2. 可在团队管理中进行分配，用于资源隔离 <br />3. 拥有父标签的团队成员可访问操作其自身或子标签关联的资源
+                    </template>
+                    <span>标签作用<el-icon>
+                            <question-filled />
+                        </el-icon>
+                    </span>
+                </el-tooltip>
+            </div>
+        </div>
+        <el-tree ref="tagTreeRef" class="none-select" :indent="38" node-key="id" :props="props" :data="data"
+            @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"
+            :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" :filter-node-method="filterNode">
+            <template #default="{ data }">
+                <span class="custom-tree-node">
+                    <span style="font-size: 13px">
+                        {{ data.code }}
+                        <span style="color: #3c8dbc">【</span>
+                        {{ data.name }}
+                        <span style="color: #3c8dbc">】</span>
+                        <el-tag v-if="data.children !== null" size="small">{{ data.children.length }}</el-tag>
+                    </span>
+
+                    <el-link @click.prevent="info(data)" style="margin-left: 25px" icon="view" type="info"
+                        :underline="false" />
+
+                    <el-link v-auth="'tag:save'" @click.prevent="showEditTagDialog(data)" class="ml5" type="primary"
+                        icon="edit" :underline="false" />
+
+                    <el-link v-auth="'tag:save'" @click.prevent="showSaveTabDialog(data)" icon="circle-plus"
+                        :underline="false" type="success" class="ml5" />
+
+                    <!-- <el-link
+                        v-auth="'resource:changeStatus'"
+                        @click.prevent="changeStatus(data, -1)"
+                        v-if="data.status === 1 && data.type === enums.ResourceTypeEnum.PERMISSION.value"
+                        icon="circle-close"
+                        :underline="false"
+                        type="warning"
+                        class="ml5"
+                    />
+
+                    <el-link
+                        v-auth="'resource:changeStatus'"
+                        @click.prevent="changeStatus(data, 1)"
+                        v-if="data.status === -1 && data.type === enums.ResourceTypeEnum.PERMISSION.value"
+                        type="success"
+                        icon="circle-check"
+                        :underline="false"
+                        plain
+                        class="ml5"
+                    /> -->
+
+                    <el-link v-auth="'tag:del'" @click.prevent="deleteTag(data)" v-if="data.children == null"
+                        type="danger" icon="delete" :underline="false" plain class="ml5" />
+                </span>
+            </template>
+        </el-tree>
+
+        <el-dialog width="500px" :title="saveTabDialog.title" :before-close="cancelSaveTag"
+            v-model="saveTabDialog.visible">
+            <el-form ref="tagForm" :rules="rules" :model="saveTabDialog.form" label-width="70px">
+                <el-form-item prop="code" label="标识:" required>
+                    <el-input :disabled="saveTabDialog.form.id ? true : false" v-model="saveTabDialog.form.code"
+                        auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item prop="name" label="名称:" required>
+                    <el-input v-model="saveTabDialog.form.name" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="备注:">
+                    <el-input v-model="saveTabDialog.form.remark" auto-complete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="cancelSaveTag()">取 消</el-button>
+                    <el-button @click="saveTag" type="primary">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <el-dialog v-model="infoDialog.visible">
+            <el-descriptions title="节点信息" :column="2" border>
+                <el-descriptions-item label="code">{{ infoDialog.data.code }}</el-descriptions-item>
+                <el-descriptions-item label="code路径">{{ infoDialog.data.codePath }}</el-descriptions-item>
+                <el-descriptions-item label="名称">{{ infoDialog.data.name }}</el-descriptions-item>
+                <el-descriptions-item label="备注">{{ infoDialog.data.remark }}</el-descriptions-item>
+
+                <el-descriptions-item label="创建者">{{ infoDialog.data.creator }}</el-descriptions-item>
+                <el-descriptions-item label="创建时间">{{ dateFormat(infoDialog.data.createTime) }}</el-descriptions-item>
+                <el-descriptions-item label="修改者">{{ infoDialog.data.modifier }}</el-descriptions-item>
+                <el-descriptions-item label="更新时间">{{ dateFormat(infoDialog.data.updateTime) }}</el-descriptions-item>
+            </el-descriptions>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, ref, watch, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { tagApi } from './api';
+import { dateFormat } from '@/common/utils/date';
+
+interface Tree {
+    id: number;
+    codePath: string;
+    name: string;
+    children?: Tree[];
+}
+
+const tagForm: any = ref(null);
+const tagTreeRef: any = ref(null);
+const filterTag = ref('');
+
+const state = reactive({
+    data: [],
+    saveTabDialog: {
+        title: '新增标签',
+        visible: false,
+        form: { id: 0, pid: 0, code: '', name: '', remark: '' },
+    },
+    infoDialog: {
+        title: '',
+        visible: false,
+        // 资源类型选择是否选
+        data: null as any,
+    },
+    // 展开的节点
+    defaultExpandedKeys: [] as any
+});
+
+const {
+    data,
+    saveTabDialog,
+    infoDialog,
+    defaultExpandedKeys,
+} = toRefs(state)
+
+const props = {
+    label: 'name',
+    children: 'children',
+};
+
+const rules = {
+    code: [
+        { required: true, message: '标识符不能为空', trigger: 'blur' },
+        // {
+        //     pattern: /^\w+$/g,
+        //     message: '标识符只能为空数字字母下划线等',
+        //     trigger: 'blur',
+        // },
+    ],
+    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+};
+
+onMounted(() => {
+    search();
+});
+
+watch(filterTag, (val) => {
+    tagTreeRef.value!.filter(val);
+});
+
+const filterNode = (value: string, data: Tree) => {
+    if (!value) return true;
+    return data.codePath.includes(value) || data.name.includes(value);
+};
+
+const search = async () => {
+    let res = await tagApi.getTagTrees.request(null);
+    state.data = res;
+};
+
+const info = async (data: any) => {
+    state.infoDialog.data = data;
+    state.infoDialog.visible = true;
+};
+
+const showSaveTabDialog = (data: any) => {
+    if (data) {
+        state.saveTabDialog.form.pid = data.id;
+        state.saveTabDialog.title = `新增 [${data.codePath}] 子标签信息`;
+    } else {
+        state.saveTabDialog.title = '新增根标签信息';
+    }
+    state.saveTabDialog.visible = true;
+};
+
+const showEditTagDialog = (data: any) => {
+    state.saveTabDialog.form.id = data.id;
+    state.saveTabDialog.form.code = data.code;
+    state.saveTabDialog.form.name = data.name;
+    state.saveTabDialog.form.remark = data.remark;
+    state.saveTabDialog.title = `修改 [${data.codePath}] 信息`;
+    state.saveTabDialog.visible = true;
+};
+
+const saveTag = async () => {
+    tagForm.value.validate(async (valid: any) => {
+        if (valid) {
+            const form = state.saveTabDialog.form;
+            await tagApi.saveTagTree.request(form);
+            ElMessage.success('保存成功');
+            search();
+            cancelSaveTag();
+        }
+    });
+};
+
+const cancelSaveTag = () => {
+    state.saveTabDialog.visible = false;
+    state.saveTabDialog.form = {} as any;
+    tagForm.value.resetFields();
+};
+
+const deleteTag = (data: any) => {
+    ElMessageBox.confirm(`此操作将删除 [${data.codePath}], 是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(async () => {
+        await tagApi.delTagTree.request({ id: data.id });
+        ElMessage.success('删除成功！');
+        search();
+    });
+};
+
+// const changeStatus = async (data: any, status: any) => {
+//     await resourceApi.changeStatus.request({
+//         id: data.id,
+//         status: status,
+//     });
+//     data.status = status;
+//     ElMessage.success((status === 1 ? '启用' : '禁用') + '成功！');
+// };
+
+// 节点被展开时触发的事件
+const handleNodeExpand = (data: any, node: any) => {
+    const id: any = node.data.id;
+    if (!state.defaultExpandedKeys.includes(id)) {
+        state.defaultExpandedKeys.push(id);
+    }
+};
+
+// 关闭节点
+const handleNodeCollapse = (data: any, node: any) => {
+    removeDeafultExpandId(node.data.id);
+
+    let childNodes = node.childNodes;
+    for (let cn of childNodes) {
+        if (cn.expanded) {
+            removeDeafultExpandId(cn.data.id);
+        }
+        // 递归删除展开的子节点节点id
+        handleNodeCollapse(data, cn);
+    }
+};
+
+const removeDeafultExpandId = (id: any) => {
+    let index = state.defaultExpandedKeys.indexOf(id);
+    if (index > -1) {
+        state.defaultExpandedKeys.splice(index, 1);
+    }
+};
+</script>
+<style lang="scss">
+.menu {
+    height: 100%;
+
+    .el-tree-node__content {
+        height: 40px;
+        line-height: 40px;
+    }
+}
+
+.none-select {
+    moz-user-select: -moz-none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+</style>

mayfly_go_web/src/views/ops/tag/TeamList.vue

@@ -0,0 +1,409 @@
+<template>
+    <div class="role-list">
+        <el-card>
+            <el-button v-auth="'team:save'" type="primary" icon="plus" @click="showSaveTeamDialog(false)">添加</el-button>
+            <el-button v-auth="'team:del'" :disabled="!chooseId" @click="deleteTeam(chooseData)" type="danger"
+                icon="delete">删除</el-button>
+
+            <div style="float: right">
+                <el-input placeholder="请输入团队名称" class="mr2" style="width: 200px" v-model="query.name" @clear="search"
+                    clearable></el-input>
+                <el-button @click="search" type="success" icon="search"></el-button>
+            </div>
+            <el-table :data="data" @current-change="choose" ref="table" style="width: 100%">
+                <el-table-column label="选择" width="55px">
+                    <template #default="scope">
+                        <el-radio v-model="chooseId" :label="scope.row.id">
+                            <i></i>
+                        </el-radio>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="团队名称"></el-table-column>
+                <el-table-column prop="remark" label="备注" min-width="160px" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="createTime" label="创建时间">
+                    <template #default="scope">
+                        {{ dateFormat(scope.row.createTime) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="creator" label="创建者"> </el-table-column>
+                <el-table-column label="操作" min-width="80px">
+                    <template #default="scope">
+                        <el-link @click.prevent="showMembers(scope.row)" :underline="false" type="primary">成员</el-link>
+                        <el-divider direction="vertical" border-style="dashed" />
+                        <el-link @click.prevent="showTags(scope.row)" :underline="false" type="success">标签</el-link>
+                        <el-divider v-auth="'team:save'" direction="vertical" border-style="dashed" />
+                        <el-link v-auth="'team:save'" @click.prevent="showSaveTeamDialog(scope.row)" :underline="false" type="warning">编辑</el-link>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
+                <el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
+                    layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
+                    :page-size="query.pageSize"></el-pagination>
+            </el-row>
+        </el-card>
+
+        <el-dialog width="400px" title="团队编辑" :before-close="cancelSaveTeam" v-model="addTeamDialog.visible">
+            <el-form ref="teamForm" :model="addTeamDialog.form" label-width="70px">
+                <el-form-item prop="name" label="团队名:" required>
+                    <el-input v-model="addTeamDialog.form.name" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="备注:">
+                    <el-input v-model="addTeamDialog.form.remark" auto-complete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="cancelSaveTeam()">取 消</el-button>
+                    <el-button @click="saveTeam" type="primary">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <el-dialog width="500px" :title="showTagDialog.title" :before-close="closeTagDialog"
+            v-model="showTagDialog.visible">
+            <el-form label-width="70px">
+                <el-form-item prop="tag" label="标签:">
+                    <el-tree-select ref="tagTreeRef" style="width: 100%" v-model="showTagDialog.tagTreeTeams"
+                        :data="showTagDialog.tags" :default-expanded-keys="showTagDialog.tagTreeTeams" multiple
+                        :render-after-expand="true" show-checkbox check-strictly node-key="id"
+                        :props="showTagDialog.props" @check="tagTreeNodeCheck">
+                        <template #default="{ data }">
+                            <span class="custom-tree-node">
+                                <span style="font-size: 13px">
+                                    {{ data.code }}
+                                    <span style="color: #3c8dbc">【</span>
+                                    {{ data.name }}
+                                    <span style="color: #3c8dbc">】</span>
+                                    <el-tag v-if="data.children !== null" size="small">{{ data.children.length }}
+                                    </el-tag>
+                                </span>
+                            </span>
+                        </template>
+                    </el-tree-select>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="closeTagDialog()">取 消</el-button>
+                    <el-button v-auth="'team:tag:save'" @click="saveTags()" type="primary">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <el-dialog width="700px" :title="showMemDialog.title" v-model="showMemDialog.visible">
+            <div class="toolbar">
+                <el-button v-auth="'team:member:save'" @click="showAddMemberDialog()" type="primary" icon="plus"
+                    size="small">添加</el-button>
+                <el-button v-auth="'team:member:del'" @click="deleteMember" :disabled="showMemDialog.chooseId == null"
+                    type="danger" icon="delete" size="small">移除</el-button>
+                <div style="float: right">
+                    <el-input placeholder="请输入用户名" class="mr2" style="width: 150px"
+                        v-model="showMemDialog.query.username" size="small" @clear="search" clearable></el-input>
+                    <el-button @click="setMemebers" type="success" icon="search" size="small"></el-button>
+                </div>
+            </div>
+            <el-table @current-change="chooseMember" border :data="showMemDialog.members.list" size="small">
+                <el-table-column label="选择" width="50px">
+                    <template #default="scope">
+                        <el-radio v-model="showMemDialog.chooseId" :label="scope.row.id">
+                            <i></i>
+                        </el-radio>
+                    </template>
+                </el-table-column>
+                <el-table-column property="name" label="姓名" width="115"></el-table-column>
+                <el-table-column property="username" label="账号" width="135"></el-table-column>
+                <el-table-column property="createTime" label="加入时间">
+                    <template #default="scope">
+                        {{ dateFormat(scope.row.createTime) }}
+                    </template>
+                </el-table-column>
+                <el-table-column property="creator" label="分配者" width="135"></el-table-column>
+            </el-table>
+            <el-pagination size="small" @current-change="setMemebers" style="text-align: center" background
+                layout="prev, pager, next, total, jumper" :total="showMemDialog.members.total"
+                v-model:current-page="showMemDialog.query.pageNum" :page-size="showMemDialog.query.pageSize" />
+
+            <el-dialog width="400px" title="添加成员" :before-close="cancelAddMember" v-model="showMemDialog.addVisible">
+                <el-form :model="showMemDialog.memForm" label-width="70px">
+                    <el-form-item label="账号:">
+                        <el-select style="width: 100%" remote :remote-method="getAccount"
+                            v-model="showMemDialog.memForm.accountIds" filterable multiple placeholder="请输入账号模糊搜索并选择">
+                            <el-option v-for="item in showMemDialog.accounts" :key="item.id"
+                                :label="`${item.username} [${item.name}]`" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <template #footer>
+                    <div class="dialog-footer">
+                        <el-button @click="cancelAddMember()">取 消</el-button>
+                        <el-button @click="addMember" type="primary">确 定</el-button>
+                    </div>
+                </template>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, reactive, onMounted } from 'vue';
+import { tagApi } from './api';
+import { accountApi } from '../../system/api';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { dateFormat } from '@/common/utils/date';
+import { notBlank } from '@/common/assert';
+
+const teamForm: any = ref(null);
+const tagTreeRef: any = ref(null);
+const state = reactive({
+    currentEditPermissions: false,
+    addTeamDialog: {
+        title: '新增团队',
+        visible: false,
+        form: { id: 0, name: '', remark: '' },
+    },
+    query: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+    },
+    total: 0,
+    data: [],
+    chooseId: 0,
+    chooseData: null,
+    showMemDialog: {
+        visible: false,
+        chooseId: 0,
+        chooseData: null,
+        query: {
+            pageSize: 10,
+            pageNum: 1,
+            teamId: null,
+            username: null,
+        },
+        members: {
+            list: [],
+            total: null,
+        },
+        title: '',
+        addVisible: false,
+        memForm: {
+            accountIds: [] as any,
+            teamId: 0,
+        },
+        accounts: Array(),
+    },
+    showTagDialog: {
+        title: '项目信息',
+        visible: false,
+        tags: [],
+        teamId: 0,
+        tagTreeTeams: [] as any,
+        props: {
+            value: 'id',
+            label: 'codePath',
+            children: 'children',
+        },
+    },
+});
+
+const {
+    query,
+    addTeamDialog,
+    total,
+    data,
+    chooseId,
+    chooseData,
+    showMemDialog,
+    showTagDialog,
+} = toRefs(state)
+
+onMounted(() => {
+    search();
+});
+
+const search = async () => {
+    let res = await tagApi.getTeams.request(state.query);
+    state.data = res.list;
+    state.total = res.total;
+};
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    search();
+};
+
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.chooseId = item.id;
+    state.chooseData = item;
+};
+
+const showSaveTeamDialog = (data: any) => {
+    if (data) {
+        state.addTeamDialog.form.id = data.id;
+        state.addTeamDialog.form.name = data.name;
+        state.addTeamDialog.form.remark = data.remark;
+        state.addTeamDialog.title = `修改 [${data.codePath}] 信息`;
+    }
+    state.addTeamDialog.visible = true;
+};
+
+const saveTeam = async () => {
+    teamForm.value.validate(async (valid: any) => {
+        if (valid) {
+            const form = state.addTeamDialog.form;
+            await tagApi.saveTeam.request(form);
+            ElMessage.success('保存成功');
+            search();
+            cancelSaveTeam();
+        }
+    });
+};
+
+const cancelSaveTeam = () => {
+    state.addTeamDialog.visible = false;
+    state.addTeamDialog.form = {} as any;
+    teamForm.value.resetFields();
+};
+
+const deleteTeam = (data: any) => {
+    ElMessageBox.confirm(`此操作将删除 [${data.name}], 是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(async () => {
+        await tagApi.delTeam.request({ id: data.id });
+        ElMessage.success('删除成功！');
+        search();
+    });
+};
+
+/********** 团队成员相关 ***********/
+
+const showMembers = async (team: any) => {
+    state.showMemDialog.query.teamId = team.id;
+    await setMemebers();
+    state.showMemDialog.title = `[${team.name}] 成员信息`;
+    state.showMemDialog.visible = true;
+};
+
+const getAccount = (username: any) => {
+    if (username) {
+        accountApi.list.request({ username }).then((res) => {
+            state.showMemDialog.accounts = res.list;
+        });
+    }
+};
+
+/**
+ * 选中成员
+ */
+const chooseMember = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.showMemDialog.chooseData = item;
+    state.showMemDialog.chooseId = item.id;
+};
+
+const deleteMember = async () => {
+    await tagApi.delTeamMem.request(state.showMemDialog.chooseData);
+    ElMessage.success('移除成功');
+    // 重新赋值成员列表
+    setMemebers();
+};
+
+/**
+ * 设置成员列表信息
+ */
+const setMemebers = async () => {
+    const res = await tagApi.getTeamMem.request(state.showMemDialog.query);
+    state.showMemDialog.members.list = res.list;
+    state.showMemDialog.members.total = res.total;
+};
+
+const showAddMemberDialog = () => {
+    state.showMemDialog.addVisible = true;
+};
+
+const addMember = async () => {
+    const memForm = state.showMemDialog.memForm;
+    memForm.teamId = state.chooseId;
+    notBlank(memForm.accountIds, '请先选择账号');
+
+    await tagApi.saveTeamMem.request(memForm);
+    ElMessage.success('保存成功');
+    setMemebers();
+    cancelAddMember();
+};
+
+const cancelAddMember = () => {
+    state.showMemDialog.memForm = {} as any;
+    state.showMemDialog.addVisible = false;
+    state.showMemDialog.chooseData = null;
+    state.showMemDialog.chooseId = 0;
+};
+
+/********** 标签相关 ***********/
+
+const showTags = async (team: any) => {
+    state.showTagDialog.tags = await tagApi.getTagTrees.request(null);
+    state.showTagDialog.tagTreeTeams = await tagApi.getTeamTagIds.request({ teamId: team.id });
+    state.showTagDialog.title = `[${team.name}] 团队标签信息`;
+    state.showTagDialog.teamId = team.id;
+    state.showTagDialog.visible = true;
+};
+
+const closeTagDialog = () => {
+    state.showTagDialog.visible = false;
+    setTimeout(() => {
+        state.showTagDialog.tagTreeTeams = [];
+    }, 500);
+};
+
+const saveTags = async () => {
+    await tagApi.saveTeamTags.request({
+        teamId: state.showTagDialog.teamId,
+        tagIds: state.showTagDialog.tagTreeTeams,
+    });
+    ElMessage.success('保存成功');
+    closeTagDialog();
+};
+
+const tagTreeNodeCheck = () => {
+    // const node = tagTreeRef.value.getNode(data.id);
+    // console.log(node);
+    // // state.showTagDialog.tagTreeTeams = [16]
+    // if (node.checked) {
+    //     if (node.parent) {
+    //         console.log(node.parent);
+    //         // removeCheckedTagId(node.parent.key);
+    //         tagTreeRef.value.setChecked(node.parent, false, false);
+    //     }
+    //     // // parentNode = node.parent
+    //     // for (let parentNode of node.parent) {
+    //     //     parentNode.setChecked(false);
+    //     // }
+    // }
+    // console.log(data);
+    // console.log(checkInfo);
+};
+
+        // function removeCheckedTagId(id: any) {
+        //     console.log(state.showTagDialog.tagTreeTeams);
+        //     for (let i = 0; i < state.showTagDialog.tagTreeTeams.length; i++) {
+        //         if (state.showTagDialog.tagTreeTeams[i] == id) {
+        //             console.log('has id', id);
+        //             state.showTagDialog.tagTreeTeams.splice(i, 1);
+        //         }
+        //     }
+        //     console.log(state.showTagDialog.tagTreeTeams);
+        // }
+</script>
+<style lang="scss">
+
+</style>

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

@@ -0,0 +1,20 @@
+import Api from '@/common/Api';
+
+export const tagApi = {
+    getAccountTags: Api.create("/tag-trees/account-has", 'get'),
+    listByQuery: Api.create("/tag-trees/query", 'get'),
+    getTagTrees: Api.create("/tag-trees", 'get'),
+    saveTagTree: Api.create("/tag-trees", 'post'),
+    delTagTree: Api.create("/tag-trees/{id}", 'delete'),
+
+    getTeams: Api.create("/teams", 'get'),
+    saveTeam: Api.create("/teams", 'post'),
+    delTeam: Api.create("/teams/{id}", 'delete'),
+
+    getTeamMem: Api.create("/teams/{teamId}/members", 'get'),
+    saveTeamMem: Api.create("/teams/{teamId}/members", 'post'),
+    delTeamMem: Api.create("/teams/{teamId}/members/{accountId}", 'delete'),
+
+    getTeamTagIds: Api.create("/teams/{teamId}/tags", 'get'),
+    saveTeamTags: Api.create("/teams/{teamId}/tags", 'post'),
+}   

mayfly_go_web/src/views/personal/index.vue

@@ -12,8 +12,9 @@
                         </div>
                         <div class="personal-user-right">
                             <el-row>
-                                <el-col :span="24" class="personal-title mb18"
-                                    >{{ currentTime }}，{{ getUserInfos.username }}，生活变的再糟糕，也不妨碍我变得更好！
+                                <el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{
+                                        getUserInfos.name
+                                }}，生活变的再糟糕，也不妨碍我变得更好！
                                 </el-col>
                                 <el-col :span="24">
                                     <el-row>
@@ -35,7 +36,9 @@
                                         </el-col>
                                         <el-col :xs="24" :sm="16" class="personal-item mb6">
                                             <div class="personal-item-label">上次登录时间：</div>
-                                            <div class="personal-item-value">{{ $filters.dateFormat(getUserInfos.lastLoginTime) }}</div>
+                                            <div class="personal-item-value">{{
+                                                    dateFormat(getUserInfos.lastLoginTime)
+                                            }}</div>
                                         </el-col>
                                     </el-row>
                                 </el-col>
@@ -54,7 +57,7 @@
                     </template>
                     <div class="personal-info-box">
                         <ul class="personal-info-ul">
-                            <li v-for="(v, k) in msgDialog.msgs.list" :key="k" class="personal-info-li">
+                            <li v-for="(v, k) in msgDialog.msgs.list as any" :key="k" class="personal-info-li">
                                 <a class="personal-info-li-title">{{ `[${getMsgTypeDesc(v.type)}] ${v.msg}` }}</a>
                             </li>
                         </ul>
@@ -72,19 +75,15 @@
                     <el-table-column property="msg" label="消息"></el-table-column>
                     <el-table-column property="createTime" label="时间" width="150">
                         <template #default="scope">
-                            {{ $filters.dateFormat(scope.row.createTime) }}
+                            {{ dateFormat(scope.row.createTime) }}
                         </template>
                     </el-table-column>
                 </el-table>
-                <el-pagination
-                    @current-change="getMsgs"
-                    style="text-align: center"
-                    background
-                    layout="prev, pager, next, total, jumper"
-                    :total="msgDialog.msgs.total"
-                    v-model:current-page="msgDialog.query.pageNum"
-                    :page-size="msgDialog.query.pageSize"
-                />
+                <el-row type="flex" class="mt5" justify="center">
+                    <el-pagination small @current-change="getMsgs" style="text-align: center" background
+                        layout="prev, pager, next, total, jumper" :total="msgDialog.msgs.total"
+                        v-model:current-page="msgDialog.query.pageNum" :page-size="msgDialog.query.pageSize" />
+                </el-row>
             </el-dialog>
 
             <!-- 营销推荐 -->
@@ -112,13 +111,8 @@
                         <el-row :gutter="35">
                             <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                 <el-form-item label="密码">
-                                    <el-input
-                                        type="password"
-                                        show-password
-                                        v-model="accountForm.password"
-                                        placeholder="请输入新密码"
-                                        clearable
-                                    ></el-input>
+                                    <el-input type="password" show-password v-model="accountForm.password"
+                                        placeholder="请输入新密码" clearable></el-input>
                                 </el-form-item>
                             </el-col>
                             <!--  -->
@@ -181,122 +175,118 @@
     </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { toRefs, reactive, computed, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import { formatAxis } from '@/common/utils/formatTime.ts';
-import { recommendList } from './mock.ts';
 import { useStore } from '@/store/index.ts';
 import { personApi } from './api';
-export default {
-    name: 'PersonalPage',
-    setup() {
-        const store = useStore();
-        const state = reactive({
-            accountInfo: {
-                roles: [],
-            },
-            msgs: [],
-            msgDialog: {
-                visible: false,
-                query: {
-                    pageSize: 10,
-                    pageNum: 1,
-                },
-                msgs: {
-                    list: [],
-                    total: null,
-                },
-            },
-            recommendList,
-            accountForm: {
-                password: '',
-            },
-        });
-        // 当前时间提示语
-        const currentTime = computed(() => {
-            return formatAxis(new Date());
-        });
+import { dateFormat } from '@/common/utils/date';
 
-        // 获取用户信息 vuex
-        const getUserInfos = computed(() => {
-            return store.state.userInfos.userInfos;
-        });
+const store = useStore();
 
-        const showMsgs = () => {
-            state.msgDialog.visible = true;
-        };
-
-        const roleInfo = computed(() => {
-            if (state.accountInfo.roles.length == 0) {
-                return '';
-            }
-            return state.accountInfo.roles.map((val: any) => val.name).join('、');
-        });
-
-        onMounted(() => {
-            getAccountInfo();
-            getMsgs();
-        });
-
-        const getAccountInfo = async () => {
-            state.accountInfo = await personApi.accountInfo.request();
-        };
-
-        const updateAccount = async () => {
-            await personApi.updateAccount.request(state.accountForm);
-            ElMessage.success('更新成功');
-        };
-
-        const getMsgs = async () => {
-            const res = await personApi.getMsgs.request(state.msgDialog.query);
-            state.msgDialog.msgs = res;
-        };
-
-        const getMsgTypeDesc = (type: number) => {
-            if (type == 1) {
-                return '登录';
-            }
-            if (type == 2) {
-                return '通知';
-            }
-        };
-
-        return {
-            getUserInfos,
-            currentTime,
-            roleInfo,
-            showMsgs,
-            getAccountInfo,
-            getMsgs,
-            getMsgTypeDesc,
-            updateAccount,
-            ...toRefs(state),
-        };
+const state = reactive({
+    accountInfo: {
+        roles: [],
     },
+    msgs: [],
+    msgDialog: {
+        visible: false,
+        query: {
+            pageSize: 10,
+            pageNum: 1,
+        },
+        msgs: {
+            list: [],
+            total: null,
+        },
+    },
+    recommendList: [],
+    accountForm: {
+        password: '',
+    },
+});
+
+const {
+    msgDialog,
+    accountForm,
+} = toRefs(state)
+
+// 当前时间提示语
+const currentTime = computed(() => {
+    return formatAxis(new Date());
+});
+
+// 获取用户信息 vuex
+const getUserInfos = computed(() => {
+    return store.state.userInfos.userInfos;
+});
+
+const showMsgs = () => {
+    state.msgDialog.visible = true;
+};
+
+const roleInfo = computed(() => {
+    if (state.accountInfo.roles.length == 0) {
+        return '';
+    }
+    return state.accountInfo.roles.map((val: any) => val.name).join('、');
+});
+
+onMounted(() => {
+    getAccountInfo();
+    getMsgs();
+});
+
+const getAccountInfo = async () => {
+    state.accountInfo = await personApi.accountInfo.request();
+};
+
+const updateAccount = async () => {
+    await personApi.updateAccount.request(state.accountForm);
+    ElMessage.success('更新成功');
+};
+
+const getMsgs = async () => {
+    const res = await personApi.getMsgs.request(state.msgDialog.query);
+    state.msgDialog.msgs = res;
+};
+
+const getMsgTypeDesc = (type: number) => {
+    if (type == 1) {
+        return '登录';
+    }
+    if (type == 2) {
+        return '通知';
+    }
 };
 </script>
 
 <style scoped lang="scss">
 @import '../../theme/mixins/mixins.scss';
+
 .personal {
     .personal-user {
         height: 130px;
         display: flex;
         align-items: center;
+
         .personal-user-left {
             width: 100px;
             height: 130px;
             border-radius: 3px;
+
             ::v-deep(.el-upload) {
                 height: 100%;
             }
+
             .personal-user-left-upload {
                 img {
                     width: 100%;
                     height: 100%;
                     border-radius: 3px;
                 }
+
                 &:hover {
                     img {
                         animation: logoAnimation 0.3s ease-in-out;
@@ -304,51 +294,63 @@ export default {
                 }
             }
         }
+
         .personal-user-right {
             flex: 1;
             padding: 0 15px;
+
             .personal-title {
                 font-size: 18px;
                 @include text-ellipsis(1);
             }
+
             .personal-item {
                 display: flex;
                 align-items: center;
                 font-size: 13px;
+
                 .personal-item-label {
                     color: gray;
                     @include text-ellipsis(1);
                 }
+
                 .personal-item-value {
                     @include text-ellipsis(1);
                 }
             }
         }
     }
+
     .personal-info {
         .personal-info-more {
             float: right;
             color: gray;
             font-size: 13px;
+
             &:hover {
                 color: var(--color-primary);
                 cursor: pointer;
             }
         }
+
         .personal-info-box {
             height: 130px;
             overflow: hidden;
+
             .personal-info-ul {
                 list-style: none;
+
                 .personal-info-li {
                     font-size: 13px;
                     padding-bottom: 10px;
+
                     .personal-info-li-title {
                         display: inline-block;
                         @include text-ellipsis(1);
                         color: grey;
                         text-decoration: none;
                     }
+
                     & a:hover {
                         color: var(--color-primary);
                         cursor: pointer;
@@ -357,6 +359,7 @@ export default {
             }
         }
     }
+
     .personal-recommend-row {
         .personal-recommend-col {
             .personal-recommend {
@@ -366,6 +369,7 @@ export default {
                 border-radius: 3px;
                 overflow: hidden;
                 cursor: pointer;
+
                 &:hover {
                     i {
                         right: 0px !important;
@@ -373,6 +377,7 @@ export default {
                         transition: all ease 0.3s;
                     }
                 }
+
                 i {
                     position: absolute;
                     right: -10px;
@@ -381,11 +386,13 @@ export default {
                     transform: rotate(-30deg);
                     transition: all ease 0.3s;
                 }
+
                 .personal-recommend-auto {
                     padding: 15px;
                     position: absolute;
                     left: 0;
                     top: 5%;
+
                     .personal-recommend-msg {
                         font-size: 12px;
                         margin-top: 10px;
@@ -394,11 +401,13 @@ export default {
             }
         }
     }
+
     .personal-edit {
         .personal-edit-title {
             position: relative;
             padding-left: 10px;
             color: #606266;
+
             &::after {
                 content: '';
                 width: 2px;
@@ -410,21 +419,26 @@ export default {
                 background: var(--color-primary);
             }
         }
+
         .personal-edit-safe-box {
             border-bottom: 1px solid #ebeef5;
             padding: 15px 0;
+
             .personal-edit-safe-item {
                 width: 100%;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+
                 .personal-edit-safe-item-left {
                     flex: 1;
                     overflow: hidden;
+
                     .personal-edit-safe-item-left-label {
                         color: #606266;
                         margin-bottom: 5px;
                     }
+
                     .personal-edit-safe-item-left-value {
                         color: gray;
                         @include text-ellipsis(1);
@@ -432,6 +446,7 @@ export default {
                     }
                 }
             }
+
             &:last-of-type {
                 padding-bottom: 0;
                 border-bottom: none;

mayfly_go_web/src/views/system/account/AccountEdit.vue

@@ -1,12 +1,18 @@
 <template>
     <div class="account-dialog">
-        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="35%" :destroy-on-close="true">
+        <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" :show-close="false" width="35%"
+            :destroy-on-close="true">
             <el-form :model="form" ref="accountForm" :rules="rules" label-width="85px">
-                <el-form-item prop="username" label="用户名:" required>
-                    <el-input :disabled="edit" v-model.trim="form.username" placeholder="请输入账号用户名，密码默认与账号名一致" auto-complete="off"></el-input>
+                <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 v-if="edit" prop="password" label="密码:" required>
-                    <el-input type="password" v-model.trim="form.password" placeholder="请输入密码" autocomplete="new-password"></el-input>
+                <el-form-item prop="username" label="用户名:" required>
+                    <el-input :disabled="edit" v-model.trim="form.username" placeholder="请输入账号用户名，密码默认与账号名一致"
+                        auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item v-if="edit" prop="password" label="密码:">
+                    <el-input type="password" v-model.trim="form.password" placeholder="输入密码可修改用户密码"
+                        autocomplete="new-password"></el-input>
                 </el-form-item>
             </el-form>
 
@@ -20,98 +26,102 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
 import { accountApi } from '../api';
 import { ElMessage } from 'element-plus';
 
-export default defineComponent({
-    name: 'AccountEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        account: {
-            type: [Boolean, Object],
-        },
-        title: {
-            type: String,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const accountForm: any = ref(null);
-        const state = reactive({
-            dialogVisible: false,
-            edit: false,
-            form: {
-                id: null,
-                username: null,
-                password: null,
-                repassword: null,
-            },
-            btnLoading: false,
-            rules: {
-                username: [
-                    {
-                        required: true,
-                        message: '请输入用户名',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                // password: [
-                //     {
-                //         required: true,
-                //         message: '请输入密码',
-                //         trigger: ['change', 'blur'],
-                //     },
-                // ],
-            },
-        });
-
-        watch(props, (newValue) => {
-            if (newValue.account) {
-                state.form = { ...newValue.account };
-                state.edit = true;
-            } else {
-                state.form = {} as any;
-            }
-            state.dialogVisible = newValue.visible;
-        });
-
-        const btnOk = async () => {
-            accountForm.value.validate((valid: boolean) => {
-                if (valid) {
-                    accountApi.save.request(state.form).then(() => {
-                        ElMessage.success('操作成功');
-                        emit('val-change', state.form);
-                        state.btnLoading = true;
-                        setTimeout(() => {
-                            state.btnLoading = false;
-                        }, 1000);
-                        //重置表单域
-                        accountForm.value.resetFields();
-                        state.form = {} as any;
-                    });
-                } else {
-                    ElMessage.error('表单填写有误');
-                    return false;
-                }
-            });
-        };
-
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-        };
-
-        return {
-            ...toRefs(state),
-            accountForm,
-            btnOk,
-            cancel,
-        };
+    account: {
+        type: [Boolean, Object],
     },
+    title: {
+        type: String,
+    },
+})
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
+
+const accountForm: any = ref(null);
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入姓名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    username: [
+        {
+            required: true,
+            message: '请输入用户名',
+            trigger: ['change', 'blur'],
+        },
+    ],
+}
+
+const state = reactive({
+    dialogVisible: false,
+    edit: false,
+    form: {
+        id: null,
+        name: null,
+        username: null,
+        password: null,
+        repassword: null,
+    },
+    btnLoading: false
 });
+
+const {
+    dialogVisible,
+    edit,
+    form,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, (newValue: any) => {
+    if (newValue.account) {
+        state.form = { ...newValue.account };
+        state.edit = true;
+    } else {
+        state.edit = false;
+        state.form = {} as any;
+    }
+    state.dialogVisible = newValue.visible;
+});
+
+const btnOk = async () => {
+    accountForm.value.validate((valid: boolean) => {
+        if (valid) {
+            accountApi.save.request(state.form).then(() => {
+                ElMessage.success('操作成功');
+                emit('val-change', state.form);
+                state.btnLoading = true;
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
+                //重置表单域
+                accountForm.value.resetFields();
+                state.form = {} as any;
+            });
+        } else {
+            ElMessage.error('表单填写有误');
+            return false;
+        }
+    });
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
 </script>
 <style lang="scss">
+
 </style>

mayfly_go_web/src/views/system/account/AccountList.vue

@@ -2,21 +2,15 @@
     <div class="role-list">
         <el-card>
             <el-button v-auth="'account:add'" type="primary" icon="plus" @click="editAccount(true)">添加</el-button>
-            <el-button v-auth="'account:add'" :disabled="chooseId == null" @click="editAccount(false)" type="primary" icon="edit">编辑</el-button>
-            <el-button v-auth="'account:saveRoles'" :disabled="chooseId == null" @click="roleEdit()" type="success" icon="setting"
-                >角色分配</el-button
-            >
-            <el-button v-auth="'account:del'" :disabled="chooseId == null" @click="deleteAccount()" type="danger" icon="delete">删除</el-button>
+            <el-button v-auth="'account:add'" :disabled="chooseId == null" @click="editAccount(false)" type="primary"
+                icon="edit">编辑</el-button>
+            <el-button v-auth="'account:saveRoles'" :disabled="chooseId == null" @click="showRoleEdit()" type="success"
+                icon="setting">角色分配</el-button>
+            <el-button v-auth="'account:del'" :disabled="chooseId == null" @click="deleteAccount()" type="danger"
+                icon="delete">删除</el-button>
             <div style="float: right">
-                <el-input
-                    class="mr2"
-                    placeholder="请输入账号名"
-                    size="small"
-                    style="width: 300px"
-                    v-model="query.username"
-                    @clear="search()"
-                    clearable
-                ></el-input>
+                <el-input class="mr2" placeholder="请输入账号名" size="small" style="width: 300px" v-model="query.username"
+                    @clear="search()" clearable></el-input>
                 <el-button @click="search()" type="success" icon="search" size="small"></el-button>
             </div>
             <el-table :data="datas" ref="table" @current-change="choose" show-overflow-tooltip>
@@ -27,9 +21,10 @@
                         </el-radio>
                     </template>
                 </el-table-column>
+                <el-table-column prop="name" label="姓名" min-width="115"></el-table-column>
                 <el-table-column prop="username" label="用户名" min-width="115"></el-table-column>
 
-                <el-table-column align="center" prop="status" label="状态" min-width="65">
+                <el-table-column align="center" prop="status" label="状态" min-width="70">
                     <template #default="scope">
                         <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
                         <el-tag v-if="scope.row.status == -1" type="danger">禁用</el-tag>
@@ -37,20 +32,20 @@
                 </el-table-column>
                 <el-table-column min-width="160" prop="lastLoginTime" label="最后登录时间" show-overflow-tooltip>
                     <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.lastLoginTime) }}
+                        {{ dateFormat(scope.row.lastLoginTime) }}
                     </template>
                 </el-table-column>
 
                 <el-table-column min-width="115" prop="creator" label="创建账号"></el-table-column>
                 <el-table-column min-width="160" prop="createTime" label="创建时间" show-overflow-tooltip>
                     <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
+                        {{ dateFormat(scope.row.createTime) }}
                     </template>
                 </el-table-column>
                 <!-- <el-table-column min-width="115" prop="modifier" label="更新账号"></el-table-column>
 			<el-table-column min-width="160" prop="updateTime" label="修改时间">
 				<template #default="scope">
-					{{ $filters.dateFormat(scope.row.updateTime) }}
+					{{ dateFormat(scope.row.updateTime) }}
 				</template>
 			</el-table-column> -->
 
@@ -65,37 +60,17 @@
 
                 <el-table-column label="操作" min-width="200px">
                     <template #default="scope">
-                        <el-button
-                            v-auth="'account:changeStatus'"
-                            @click="changeStatus(scope.row)"
-                            v-if="scope.row.status == 1"
-                            type="danger"
-                            icom="tickets"
-                            size="small"
-                            plain
-                            >禁用</el-button
-                        >
-                        <el-button
-                            v-auth="'account:changeStatus'"
-                            v-if="scope.row.status == -1"
-                            type="success"
-                            @click="changeStatus(scope.row)"
-                            size="small"
-                            plain
-                            >启用</el-button
-                        >
+                        <el-button v-auth="'account:changeStatus'" @click="changeStatus(scope.row)"
+                            v-if="scope.row.status == 1" type="danger" icom="tickets" size="small" plain>禁用</el-button>
+                        <el-button v-auth="'account:changeStatus'" v-if="scope.row.status == -1" type="success"
+                            @click="changeStatus(scope.row)" size="small" plain>启用</el-button>
                     </template>
                 </el-table-column>
             </el-table>
             <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: right"
-                    @current-change="handlePageChange"
-                    :total="total"
-                    layout="prev, pager, next, total, jumper"
-                    v-model:current-page="query.pageNum"
-                    :page-size="query.pageSize"
-                ></el-pagination>
+                <el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
+                    layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
+                    :page-size="query.pageSize"></el-pagination>
             </el-row>
         </el-card>
 
@@ -105,201 +80,189 @@
                 <el-table-column property="creator" label="分配账号" width="125"></el-table-column>
                 <el-table-column property="createTime" label="分配时间">
                     <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
+                        {{ dateFormat(scope.row.createTime) }}
                     </template>
                 </el-table-column>
             </el-table>
         </el-dialog>
 
         <el-dialog :title="showResourceDialog.title" v-model="showResourceDialog.visible" width="400px">
-            <el-tree
-                style="height: 50vh; overflow: auto"
-                :data="showResourceDialog.resources"
-                node-key="id"
-                :props="showResourceDialog.defaultProps"
-                :expand-on-click-node="true"
-            >
+            <el-tree style="height: 50vh; overflow: auto" :data="showResourceDialog.resources" node-key="id"
+                :props="showResourceDialog.defaultProps" :expand-on-click-node="true">
                 <template #default="{ node, data }">
                     <span class="custom-tree-node">
-                        <span v-if="data.type == enums.ResourceTypeEnum.MENU.value">{{ node.label }}</span>
-                        <span v-if="data.type == enums.ResourceTypeEnum.PERMISSION.value" style="color: #67c23a">{{ node.label }}</span>
+                        <span v-if="data.type == enums.ResourceTypeEnum['MENU'].value">{{ node.label }}</span>
+                        <span v-if="data.type == enums.ResourceTypeEnum['PERMISSION'].value" style="color: #67c23a">{{
+                                node.label
+                        }}</span>
                     </span>
                 </template>
             </el-tree>
         </el-dialog>
 
         <role-edit v-model:visible="roleDialog.visible" :account="roleDialog.account" @cancel="cancel()" />
-        <account-edit v-model:visible="accountDialog.visible" v-model:account="accountDialog.data" @val-change="valChange()" />
+        <account-edit v-model:visible="accountDialog.visible" v-model:account="accountDialog.data"
+            @val-change="valChange()" />
     </div>
 </template>
 
-<script lang='ts'>
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+<script lang='ts' setup>
+import { toRefs, reactive, onMounted } from 'vue';
 import RoleEdit from './RoleEdit.vue';
 import AccountEdit from './AccountEdit.vue';
 import enums from '../enums';
 import { accountApi } from '../api';
 import { ElMessage, ElMessageBox } from 'element-plus';
-export default defineComponent({
-    name: 'AccountList',
-    components: {
-        RoleEdit,
-        AccountEdit,
+import { dateFormat } from '@/common/utils/date';
+
+const state = reactive({
+    chooseId: null,
+    /**
+     * 选中的数据
+     */
+    chooseData: null,
+    /**
+     * 查询条件
+     */
+    query: {
+        username: '',
+        pageNum: 1,
+        pageSize: 10,
     },
-    setup() {
-        const state = reactive({
-            chooseId: null,
-            /**
-             * 选中的数据
-             */
-            chooseData: null,
-            /**
-             * 查询条件
-             */
-            query: {
-                pageNum: 1,
-                pageSize: 10,
-            },
-            datas: [],
-            total: 0,
-            showRoleDialog: {
-                title: '',
-                visible: false,
-                accountRoles: [],
-            },
-            showResourceDialog: {
-                title: '',
-                visible: false,
-                resources: [],
-                defaultProps: {
-                    children: 'children',
-                    label: 'name',
-                },
-            },
-            roleDialog: {
-                visible: false,
-                account: null,
-                roles: [],
-            },
-            accountDialog: {
-                visible: false,
-                data: null,
-            },
-        });
-
-        onMounted(() => {
-            search();
-        });
-
-        const choose = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.chooseId = item.id;
-            state.chooseData = item;
-        };
-
-        const search = async () => {
-            let res: any = await accountApi.list.request(state.query);
-            state.datas = res.list;
-            state.total = res.total;
-        };
-
-        const showResources = async (row: any) => {
-            let showResourceDialog = state.showResourceDialog;
-            showResourceDialog.title = '"' + row.username + '" 的菜单&权限';
-            showResourceDialog.resources = [];
-            showResourceDialog.resources = await accountApi.resources.request({
-                id: row.id,
-            });
-            showResourceDialog.visible = true;
-        };
-
-        const showRoles = async (row: any) => {
-            let showRoleDialog = state.showRoleDialog;
-            showRoleDialog.title = '"' + row.username + '" 的角色信息';
-            showRoleDialog.accountRoles = await accountApi.roles.request({
-                id: row.id,
-            });
-            showRoleDialog.visible = true;
-        };
-
-        const changeStatus = async (row: any) => {
-            let id = row.id;
-            let status = row.status == -1 ? 1 : -1;
-            await accountApi.changeStatus.request({
-                id,
-                status,
-            });
-            ElMessage.success('操作成功');
-            search();
-        };
-
-        const handlePageChange = (curPage: number) => {
-            state.query.pageNum = curPage;
-            search();
-        };
-
-        const roleEdit = () => {
-            if (!state.chooseId) {
-                ElMessage.error('请选择账号');
-            }
-            state.roleDialog.visible = true;
-            state.roleDialog.account = state.chooseData;
-        };
-
-        const editAccount = (isAdd = false) => {
-            if (isAdd) {
-                state.accountDialog.data = null;
-            } else {
-                state.accountDialog.data = state.chooseData;
-            }
-            state.accountDialog.visible = true;
-        };
-
-        const cancel = () => {
-            state.roleDialog.visible = false;
-            state.roleDialog.account = null;
-            search();
-        };
-
-        const valChange = () => {
-            state.accountDialog.visible = false;
-            search();
-        };
-
-        const deleteAccount = async () => {
-            try {
-                await ElMessageBox.confirm(`确定删除该账号?`, '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                });
-                await accountApi.del.request({ id: state.chooseId });
-                ElMessage.success('删除成功');
-                state.chooseData = null;
-                state.chooseId = null;
-                search();
-            } catch (err) {}
-        };
-
-        return {
-            ...toRefs(state),
-            enums,
-            search,
-            choose,
-            showResources,
-            showRoles,
-            changeStatus,
-            handlePageChange,
-            roleEdit,
-            editAccount,
-            cancel,
-            valChange,
-            deleteAccount,
-        };
+    datas: [],
+    total: 0,
+    showRoleDialog: {
+        title: '',
+        visible: false,
+        accountRoles: [],
+    },
+    showResourceDialog: {
+        title: '',
+        visible: false,
+        resources: [],
+        defaultProps: {
+            children: 'children',
+            label: 'name',
+        },
+    },
+    roleDialog: {
+        visible: false,
+        account: null as any,
+        roles: [],
+    },
+    accountDialog: {
+        visible: false,
+        data: null as any,
     },
 });
+
+const {
+    chooseId,
+    query,
+    datas,
+    total,
+    showRoleDialog,
+    showResourceDialog,
+    roleDialog,
+    accountDialog,
+} = toRefs(state)
+
+onMounted(() => {
+    search();
+});
+
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.chooseId = item.id;
+    state.chooseData = item;
+};
+
+const search = async () => {
+    let res: any = await accountApi.list.request(state.query);
+    state.datas = res.list;
+    state.total = res.total;
+};
+
+const showResources = async (row: any) => {
+    let showResourceDialog = state.showResourceDialog;
+    showResourceDialog.title = '"' + row.username + '" 的菜单&权限';
+    showResourceDialog.resources = [];
+    showResourceDialog.resources = await accountApi.resources.request({
+        id: row.id,
+    });
+    showResourceDialog.visible = true;
+};
+
+const showRoles = async (row: any) => {
+    let showRoleDialog = state.showRoleDialog;
+    showRoleDialog.title = '"' + row.username + '" 的角色信息';
+    showRoleDialog.accountRoles = await accountApi.roles.request({
+        id: row.id,
+    });
+    showRoleDialog.visible = true;
+};
+
+const changeStatus = async (row: any) => {
+    let id = row.id;
+    let status = row.status == -1 ? 1 : -1;
+    await accountApi.changeStatus.request({
+        id,
+        status,
+    });
+    ElMessage.success('操作成功');
+    search();
+};
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    search();
+};
+
+const showRoleEdit = () => {
+    if (!state.chooseId) {
+        ElMessage.error('请选择账号');
+    }
+    state.roleDialog.visible = true;
+    state.roleDialog.account = state.chooseData;
+};
+
+const editAccount = (isAdd = false) => {
+    if (isAdd) {
+        state.accountDialog.data = null;
+    } else {
+        state.accountDialog.data = state.chooseData;
+    }
+    state.accountDialog.visible = true;
+};
+
+const cancel = () => {
+    state.roleDialog.visible = false;
+    state.roleDialog.account = null;
+    search();
+};
+
+const valChange = () => {
+    state.accountDialog.visible = false;
+    search();
+};
+
+const deleteAccount = async () => {
+    try {
+        await ElMessageBox.confirm(`确定删除该账号?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await accountApi.del.request({ id: state.chooseId });
+        ElMessage.success('删除成功');
+        state.chooseData = null;
+        state.chooseId = null;
+        search();
+    } catch (err) { }
+};
 </script>
 <style lang="scss">
+
 </style>

mayfly_go_web/src/views/system/account/RoleEdit.vue

@@ -1,14 +1,11 @@
 <template>
     <div class="account-dialog">
-        <el-dialog
-            :title="account == null ? '' : '分配“' + account.username + '”的角色'"
-            v-model="dialogVisible"
-            :before-close="cancel"
-            :show-close="false"
-        >
+        <el-dialog :title="account == null ? '' : '分配“' + account.username + '”的角色'" v-model="dialogVisible"
+            :before-close="cancel" :show-close="false">
             <div class="toolbar">
                 <div style="float: left">
-                    <el-input placeholder="请输入角色名" style="width: 150px" v-model="query.name" @clear="clear()" clearable></el-input>
+                    <el-input placeholder="请输入角色名" style="width: 150px" v-model="query.name" @clear="clear()" clearable>
+                    </el-input>
                     <el-button @click="search" type="success" icon="search"></el-button>
                 </div>
             </div>
@@ -22,15 +19,9 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-pagination
-                @current-change="handlePageChange"
-                style="text-align: center; margin-top: 20px"
-                background
-                layout="prev, pager, next, total, jumper"
-                :total="total"
-                v-model:current-page="query.pageNum"
-                :page-size="query.pageSize"
-            ></el-pagination>
+            <el-pagination @current-change="handlePageChange" style="text-align: center; margin-top: 20px" background
+                layout="prev, pager, next, total, jumper" :total="total" v-model:current-page="query.pageNum"
+                :page-size="query.pageSize"></el-pagination>
 
             <template #footer>
                 <div class="dialog-footer">
@@ -42,140 +33,134 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref } from 'vue';
 import { roleApi, accountApi } from '../api';
 import { ElMessage } from 'element-plus';
-export default defineComponent({
-    name: 'RoleEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        account: {
-            type: [Boolean, Object],
-        },
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const roleTable: any = ref(null);
-        const state = reactive({
-            dialogVisible: false,
-            btnLoading: false,
-            // 所有角色
-            allRole: [] as any,
-            // 该账号拥有的角色id
-            roles: [] as any,
-            query: {
-                name: null,
-                pageNum: 1,
-                pageSize: 5,
-            },
-            total: 0,
-        });
+    account: Object
+})
 
-        watch(props, (newValue) => {
-            state.dialogVisible = newValue.visible;
-            if (newValue.account && newValue.account.id != 0) {
-                accountApi.roleIds
-                    .request({
-                        id: props.account['id'],
-                    })
-                    .then((res) => {
-                        state.roles = res || [];
-                        search();
-                    });
-            } else {
-                return;
-            }
-        });
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
 
-        const handlePageChange = () => {
-            search();
-        };
+const roleTable: any = ref(null);
 
-        const selectable = (row: any) => {
-            // 角色code不以COMMON开头才可勾选
-            return row.code.indexOf('COMMON') != 0;
-        };
-
-        const select = (val: any, row: any) => {
-            let roles = state.roles;
-            // 如果账号的角色id存在则为取消该角色(删除角色id列表中的该记录id)，否则为新增角色
-            if (roles.includes(row.id)) {
-                for (let i = 0; i < roles.length; i++) {
-                    let item = roles[i];
-                    if (item === row.id) {
-                        roles.splice(i, 1);
-                        break;
-                    }
-                }
-            } else {
-                roles.push(row.id);
-            }
-        };
-
-        /**
-         * 检查是否勾选权限,即是否拥有权限
-         */
-        const checkSelected = () => {
-            // 必须用异步，否则勾选不了
-            setTimeout(() => {
-                roleTable.value.clearSelection();
-                state.allRole.forEach((r: any) => {
-                    if (state.roles.includes(r.id)) {
-                        roleTable.value.toggleRowSelection(r, true);
-                    }
-                });
-            }, 50);
-        };
-
-        const btnOk = async () => {
-            let roleIds = state.roles.join(',');
-            await accountApi.saveRoles.request({
-                id: props.account['id'],
-                roleIds: roleIds,
-            });
-            ElMessage.success('保存成功!');
-            cancel();
-        };
-
-        /**
-         * 取消
-         */
-        const cancel = () => {
-            state.query.pageNum = 1;
-            state.query.name = null;
-            emit('update:visible', false);
-            emit('cancel');
-        };
-
-        /**
-         * 清空查询框
-         */
-        const clear = () => {
-            state.query.pageNum = 1;
-            state.query.name = null;
-            search();
-        };
-
-        const search = async () => {
-            let res = await roleApi.list.request(state.query);
-            state.allRole = res.list;
-            state.total = res.total;
-            checkSelected();
-        };
-
-        return {
-            ...toRefs(state),
-            roleTable,
-            search,
-            handlePageChange,
-            selectable,
-            select,
-            btnOk,
-            cancel,
-            clear,
-        };
+const state = reactive({
+    dialogVisible: false,
+    btnLoading: false,
+    // 所有角色
+    allRole: [] as any,
+    // 该账号拥有的角色id
+    query: {
+        name: null,
+        pageNum: 1,
+        pageSize: 5,
     },
+    total: 0,
 });
+
+const {
+    dialogVisible,
+    btnLoading,
+    allRole,
+    query,
+    total,
+} = toRefs(state)
+
+// 用户拥有的角色信息
+let roles: any[] = []
+
+watch(props, (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (state.dialogVisible && newValue.account && newValue.account.id != 0) {
+        accountApi.roleIds
+            .request({
+                id: props.account!.id,
+            })
+            .then((res) => {
+                roles = res || [];
+                search();
+            });
+    }
+});
+
+const handlePageChange = () => {
+    search();
+};
+
+const selectable = (row: any) => {
+    // 角色code不以COMMON开头才可勾选
+    return row.code.indexOf('COMMON') != 0;
+};
+
+const select = (val: any, row: any) => {
+    // 如果账号的角色id存在则为取消该角色(删除角色id列表中的该记录id)，否则为新增角色
+    if (roles.includes(row.id)) {
+        for (let i = 0; i < roles.length; i++) {
+            let item = roles[i];
+            if (item === row.id) {
+                roles.splice(i, 1);
+                break;
+            }
+        }
+    } else {
+        roles.push(row.id);
+    }
+};
+
+/**
+ * 检查是否勾选权限,即是否拥有权限
+ */
+const checkSelected = () => {
+    // 必须用异步，否则勾选不了
+    setTimeout(() => {
+        roleTable.value.clearSelection();
+        state.allRole.forEach((r: any) => {
+            if (roles.includes(r.id)) {
+                roleTable.value.toggleRowSelection(r, true);
+            }
+        });
+    }, 50);
+};
+
+const btnOk = async () => {
+    let roleIds = roles.join(',');
+    await accountApi.saveRoles.request({
+        id: props.account!.id,
+        roleIds: roleIds,
+    });
+    ElMessage.success('保存成功!');
+    cancel();
+};
+
+/**
+ * 取消
+ */
+const cancel = () => {
+    state.query.pageNum = 1;
+    state.query.name = null;
+    emit('update:visible', false);
+    emit('cancel');
+};
+
+/**
+ * 清空查询框
+ */
+const clear = () => {
+    state.query.pageNum = 1;
+    state.query.name = null;
+    search();
+};
+
+const search = async () => {
+    let res = await roleApi.list.request(state.query);
+    state.allRole = res.list;
+    state.total = res.total;
+    checkSelected();
+};
 </script>

mayfly_go_web/src/views/system/api.ts

@@ -40,4 +40,4 @@ export const configApi = {
 
 export const logApi = {
     list: Api.create("/syslogs", "get")
-}
+}

mayfly_go_web/src/views/system/config/ConfigEdit.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <el-dialog :title="title" v-model="dvisible" :show-close="false" :before-close="cancel" width="500px" :destroy-on-close="true">
+        <el-dialog :title="title" v-model="dvisible" :show-close="false" :before-close="cancel" width="750px"
+            :destroy-on-close="true">
             <el-form ref="configForm" :model="form" label-width="90px">
                 <el-form-item prop="name" label="配置项:" required>
                     <el-input v-model="form.name"></el-input>
@@ -8,9 +9,44 @@
                 <el-form-item prop="key" label="配置key:" required>
                     <el-input :disabled="form.id != null" v-model="form.key"></el-input>
                 </el-form-item>
-                <el-form-item prop="value" label="配置值:" required>
-                    <el-input v-model="form.value"></el-input>
+
+                <el-row style="margin-left: 30px; margin-bottom: 5px">
+                    <el-button @click="onAddParam" size="small" type="success">新增配置项</el-button>
+                </el-row>
+                <el-form-item :key="param" v-for="(param, index) in params" prop="params" :label="`参数${index + 1}`">
+                    <el-row>
+                        <el-col :span="5">
+                            <el-input v-model="param.model" placeholder="model"></el-input>
+                        </el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
+                        <el-col :span="4">
+                            <el-input v-model="param.name" placeholder="字段名"></el-input>
+                        </el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
+                        <el-col :span="4">
+                            <el-input v-model="param.placeholder" placeholder="字段说明"></el-input>
+                        </el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
+                        <el-col :span="4">
+                            <el-input v-model="param.options" placeholder="可选值 ,分割"></el-input>
+                        </el-col>
+                        <span :span="1">
+                            <el-divider direction="vertical" border-style="dashed" />
+                        </span>
+                        <el-col :span="2">
+                            <el-button @click="onDeleteParam(index)" size="small" type="danger">删除</el-button>
+                        </el-col>
+                    </el-row>
                 </el-form-item>
+                <!-- <el-form-item prop="value" label="配置值:" required>
+                    <el-input v-model="form.value"></el-input>
+                </el-form-item> -->
                 <el-form-item label="备注:">
                     <el-input v-model="form.remark" type="textarea" :rows="2"></el-input>
                 </el-form-item>
@@ -25,75 +61,94 @@
     </div>
 </template>
 
-<script lang="ts">
-import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, toRefs, reactive, watch } from 'vue';
 import { configApi } from '../api';
 
-export default defineComponent({
-    name: 'ConfigEdit',
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        data: {
-            type: [Boolean, Object],
-        },
-        title: {
-            type: String,
-        },
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    setup(props: any, { emit }) {
-        const configForm: any = ref(null);
-        const state = reactive({
-            dvisible: false,
-            form: {
-                id: null,
-                name: '',
-                key: '',
-                value: '',
-                remark: '',
-            },
-            btnLoading: false,
-        });
-
-        watch(props, (newValue) => {
-            state.dvisible = newValue.visible;
-            if (newValue.data) {
-                state.form = { ...newValue.data };
-            } else {
-                state.form = {} as any;
-            }
-        });
-
-        const cancel = () => {
-            // 更新父组件visible prop对应的值为false
-            emit('update:visible', false);
-            // 若父组件有取消事件，则调用
-            emit('cancel');
-        };
-
-        const btnOk = async () => {
-            configForm.value.validate(async (valid: boolean) => {
-                if (valid) {
-                    await configApi.save.request(state.form);
-                    emit('val-change', state.form);
-                    cancel();
-                    state.btnLoading = true;
-                    setTimeout(() => {
-                        state.btnLoading = false;
-                    }, 1000);
-                }
-            });
-        };
-
-        return {
-            ...toRefs(state),
-            configForm,
-            btnOk,
-            cancel,
-        };
+    data: {
+        type: [Boolean, Object],
     },
+    title: {
+        type: String,
+    },
+})
+
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
+
+
+const configForm: any = ref(null);
+
+const state = reactive({
+    dvisible: false,
+    params: [] as any,
+    form: {
+        id: null,
+        name: '',
+        key: '',
+        params: '',
+        value: '',
+        remark: '',
+    },
+    btnLoading: false,
 });
+
+const {
+    dvisible,
+    params,
+    form,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, (newValue: any) => {
+    state.dvisible = newValue.visible;
+    if (newValue.data) {
+        state.form = { ...newValue.data };
+        if (state.form.params) {
+            state.params = JSON.parse(state.form.params);
+        } else {
+            state.params = [];
+        }
+    } else {
+        state.form = {} as any;
+        state.params = [];
+    }
+});
+
+const onAddParam = () => {
+    state.params.push({ name: '', model: '', placeholder: '' });
+};
+
+const onDeleteParam = (idx: number) => {
+    state.params.splice(idx, 1);
+};
+
+const cancel = () => {
+    // 更新父组件visible prop对应的值为false
+    emit('update:visible', false);
+    // 若父组件有取消事件，则调用
+    emit('cancel');
+};
+
+const btnOk = async () => {
+    configForm.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (state.params) {
+                state.form.params = JSON.stringify(state.params);
+            }
+            await configApi.save.request(state.form);
+            emit('val-change', state.form);
+            cancel();
+            state.btnLoading = true;
+            setTimeout(() => {
+                state.btnLoading = false;
+            }, 1000);
+        }
+    });
+};
 </script>
-<style lang="scss">
-</style>
+<style lang="scss"></style>

mayfly_go_web/src/views/system/config/ConfigList.vue

@@ -2,7 +2,8 @@
     <div class="role-list">
         <el-card>
             <el-button type="primary" icon="plus" @click="editConfig(false)">添加</el-button>
-            <el-button :disabled="chooseId == null" @click="editConfig(chooseData)" type="primary" icon="edit">编辑</el-button>
+            <el-button :disabled="chooseId == null" @click="editConfig(chooseData)" type="primary" icon="edit">编辑
+            </el-button>
 
             <el-table :data="configs" @current-change="choose" ref="table" style="width: 100%">
                 <el-table-column label="选择" width="55px">
@@ -12,113 +13,201 @@
                         </el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="name" label="配置项"></el-table-column>
-                <el-table-column prop="key" label="配置key"></el-table-column>
-                <el-table-column prop="value" label="配置值" min-width="100px" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="name" label="配置项" min-width="100px" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="key" label="配置key" min-width="100px"></el-table-column>
+                <el-table-column prop="value" label="配置值" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="remark" label="备注" min-width="100px" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="updateTime" label="更新时间">
+                <el-table-column prop="updateTime" label="更新时间" min-width="100px">
                     <template #default="scope">
-                        {{ $filters.dateFormat(scope.row.createTime) }}
+                        {{ dateFormat(scope.row.updateTime) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="modifier" label="修改者" min-width="60px" show-overflow-tooltip></el-table-column>
+                <el-table-column label="操作" min-width="50" fixed="right">
+                    <template #default="scope">
+                        <el-link :disabled="scope.row.status == -1" type="warning"
+                            @click="showSetConfigDialog(scope.row)" plain size="small" :underline="false">配置</el-link>
                     </template>
                 </el-table-column>
-                <el-table-column prop="modifier" label="修改者" show-overflow-tooltip></el-table-column>
             </el-table>
             <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination
-                    style="text-align: right"
-                    @current-change="handlePageChange"
-                    :total="total"
-                    layout="prev, pager, next, total, jumper"
-                    v-model:current-page="query.pageNum"
-                    :page-size="query.pageSize"
-                ></el-pagination>
+                <el-pagination style="text-align: right" @current-change="handlePageChange" :total="total"
+                    layout="prev, pager, next, total, jumper" v-model:current-page="query.pageNum"
+                    :page-size="query.pageSize"></el-pagination>
             </el-row>
         </el-card>
 
-        <config-edit :title="configEdit.title" v-model:visible="configEdit.visible" :data="configEdit.config" @val-change="configEditChange" />
+        <el-dialog :before-close="closeSetConfigDialog" title="配置项设置" v-model="paramsDialog.visible" width="500px">
+            <el-form v-if="paramsDialog.paramsFormItem.length > 0" ref="paramsForm" :model="paramsDialog.params"
+                label-width="90px">
+                <el-form-item v-for="item in paramsDialog.paramsFormItem" :key="item.name" :prop="item.model"
+                    :label="item.name" required>
+                    <el-input v-if="!item.options" v-model="paramsDialog.params[item.model]"
+                        :placeholder="item.placeholder" autocomplete="off" clearable></el-input>
+                    <el-select v-else v-model="paramsDialog.params[item.model]" :placeholder="item.placeholder"
+                        filterable autocomplete="off" clearable style="width: 100%">
+                        <el-option v-for="option in item.options.split(',')" :key="option" :label="option"
+                            :value="option" />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <el-form v-else ref="paramsForm" label-width="90px">
+                <el-form-item label="配置值" required>
+                    <el-input v-model="paramsDialog.params" :placeholder="paramsDialog.config.remark" autocomplete="off"
+                        clearable></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="closeSetConfigDialog()">取 消</el-button>
+                    <el-button type="primary" @click="setConfig()">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+
+        <config-edit :title="configEdit.title" v-model:visible="configEdit.visible" :data="configEdit.config"
+            @val-change="configEditChange" />
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { toRefs, reactive, onMounted } from 'vue';
 import ConfigEdit from './ConfigEdit.vue';
 import { configApi } from '../api';
-import { ElMessage, ElMessageBox } from 'element-plus';
-export default defineComponent({
-    name: 'ConfigList',
-    components: {
-        ConfigEdit,
+import { ElMessage } from 'element-plus';
+import { dateFormat } from '@/common/utils/date';
+
+const state = reactive({
+    query: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
     },
-    setup() {
-        const state = reactive({
-            dialogFormVisible: false,
-            currentEditPermissions: false,
-            query: {
-                pageNum: 1,
-                pageSize: 10,
-                name: null,
-            },
-            total: 0,
-            configs: [],
-            chooseId: null,
-            chooseData: null,
-            configEdit: {
-                title: '配置修改',
-                visible: false,
-                config: {},
-            },
-        });
-
-        onMounted(() => {
-            search();
-        });
-
-        const search = async () => {
-            let res = await configApi.list.request(state.query);
-            state.configs = res.list;
-            state.total = res.total;
-        };
-
-        const handlePageChange = (curPage: number) => {
-            state.query.pageNum = curPage;
-            search();
-        };
-
-        const choose = (item: any) => {
-            if (!item) {
-                return;
-            }
-            state.chooseId = item.id;
-            state.chooseData = item;
-        };
-
-        const configEditChange = () => {
-            ElMessage.success('修改成功！');
-            state.chooseId = null;
-            state.chooseData = null;
-            search();
-        };
-
-        const editConfig = (data: any) => {
-            if (data) {
-                state.configEdit.config = data;
-            } else {
-                state.configEdit.config = false;
-            }
-
-            state.configEdit.visible = true;
-        };
-
-        return {
-            ...toRefs(state),
-            search,
-            handlePageChange,
-            choose,
-            configEditChange,
-            editConfig,
-        };
+    total: 0,
+    configs: [],
+    chooseId: null,
+    chooseData: null,
+    paramsDialog: {
+        visible: false,
+        config: null as any,
+        params: {},
+        paramsFormItem: [] as any,
+    },
+    configEdit: {
+        title: '配置修改',
+        visible: false,
+        config: {},
     },
 });
+
+const {
+    query,
+    total,
+    configs,
+    chooseId,
+    chooseData,
+    paramsDialog,
+    configEdit,
+} = toRefs(state)
+
+onMounted(() => {
+    search();
+});
+
+const search = async () => {
+    let res = await configApi.list.request(state.query);
+    state.configs = res.list;
+    state.total = res.total;
+};
+
+const handlePageChange = (curPage: number) => {
+    state.query.pageNum = curPage;
+    search();
+};
+
+const showSetConfigDialog = (row: any) => {
+    state.paramsDialog.config = row;
+    // 存在配置项则弹窗提示输入对应的配置项
+    if (row.params) {
+        state.paramsDialog.paramsFormItem = JSON.parse(row.params);
+        if (state.paramsDialog.paramsFormItem && state.paramsDialog.paramsFormItem.length > 0) {
+            if (row.value) {
+                state.paramsDialog.params = JSON.parse(row.value);
+            }
+        } else {
+            state.paramsDialog.params = row.value;
+        }
+    } else {
+        state.paramsDialog.params = row.value;
+    }
+    state.paramsDialog.visible = true;
+};
+
+const closeSetConfigDialog = () => {
+    state.paramsDialog.visible = false;
+    setTimeout(() => {
+        state.paramsDialog.config = {};
+        state.paramsDialog.params = {};
+        state.paramsDialog.paramsFormItem = [];
+    }, 300);
+};
+
+const setConfig = async () => {
+    let paramsValue = state.paramsDialog.params;
+    if (state.paramsDialog.paramsFormItem.length > 0) {
+        // 如果配置项删除，则需要将value中对应的字段移除
+        for (let paramKey in paramsValue) {
+            if (!hasParam(paramKey, state.paramsDialog.paramsFormItem)) {
+                delete paramsValue[paramKey];
+            }
+        }
+        paramsValue = JSON.stringify(paramsValue);
+    }
+    await configApi.save.request({
+        id: state.paramsDialog.config.id,
+        key: state.paramsDialog.config.key,
+        name: state.paramsDialog.config.name,
+        value: paramsValue,
+    });
+    ElMessage.success('保存成功');
+    closeSetConfigDialog();
+    search();
+};
+
+const hasParam = (paramKey: string, paramItems: any) => {
+    for (let paramItem of paramItems) {
+        if (paramItem.model == paramKey) {
+            return true;
+        }
+    }
+    return false;
+};
+
+const choose = (item: any) => {
+    if (!item) {
+        return;
+    }
+    state.chooseId = item.id;
+    state.chooseData = item;
+};
+
+const configEditChange = () => {
+    ElMessage.success('保存成功');
+    state.chooseId = null;
+    state.chooseData = null;
+    search();
+};
+
+const editConfig = (data: any) => {
+    if (data) {
+        state.configEdit.config = data;
+    } else {
+        state.configEdit.config = false;
+    }
+
+    state.configEdit.visible = true;
+};
 </script>
 <style lang="scss">
+
 </style>

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

@@ -5,8 +5,9 @@
                 <el-row :gutter="10">
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
                         <el-form-item prop="type" label="类型" required>
-                            <el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择" >
-                                <el-option v-for="item in enums.ResourceTypeEnum" :key="item.value" :label="item.label" :value="item.value">
+                            <el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择">
+                                <el-option v-for="item in enums.ResourceTypeEnum as any" :key="item.value" :label="item.label"
+                                    :value="item.value">
                                 </el-option>
                             </el-select>
                         </el-form-item>
@@ -27,55 +28,56 @@
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" label="图标">
+                        <el-form-item v-if="form.type === menuTypeValue" label="图标">
                             <icon-selector v-model="form.meta.icon" type="ele" />
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="路由名">
+                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="路由名">
                             <el-input v-model.trim="form.meta.routeName" placeholder="请输入路由名称"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="组件">
+                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="组件">
                             <el-input v-model.trim="form.meta.component" placeholder="请输入组件名"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否缓存">
+                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否缓存">
                             <el-select v-model="form.meta.isKeepAlive" placeholder="请选择" width="w100">
-                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
+                                    :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否隐藏">
+                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否隐藏">
                             <el-select v-model="form.meta.isHide" placeholder="请选择" width="w100">
-                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
+                                    :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="tag不可删除">
+                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="tag不可删除">
                             <el-select v-model="form.meta.isAffix" placeholder="请选择" width="w100">
-                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
+                                    :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === enums.ResourceTypeEnum.MENU.value" prop="code" label="是否iframe">
-                            <el-select @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择" width="w100">
-                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否iframe">
+                            <el-select @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择"
+                                width="w100">
+                                <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
+                                    :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item
-                            v-if="form.type === enums.ResourceTypeEnum.MENU.value && form.meta.isIframe"
-                            prop="code"
-                            label="iframe地址"
-                            width="w100"
-                        >
+                        <el-form-item v-if="form.type === menuTypeValue && form.meta.isIframe" prop="code"
+                            label="iframe地址" width="w100">
                             <el-input v-model.trim="form.meta.link" placeholder="请输入iframe url"></el-input>
                         </el-form-item>
                     </el-col>
@@ -92,210 +94,196 @@
     </div>
 </template>
 
-<script lang="ts">
-import { ref, toRefs, reactive, watch, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, toRefs, reactive, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { resourceApi } from '../api';
 import enums from '../enums';
 import { notEmpty } from '@/common/assert';
 import iconSelector from '@/components/iconSelector/index.vue';
 
-export default defineComponent({
-    name: 'ResourceEdit',
-    components: {
-        iconSelector,
+const props = defineProps({
+    visible: {
+        type: Boolean,
     },
-    props: {
-        visible: {
-            type: Boolean,
-        },
-        data: {
-            type: [Boolean, Object],
-        },
-        title: {
-            type: String,
-        },
-        typeDisabled: {
-            type: Boolean,
-        },
+    data: {
+        type: [Boolean, Object],
     },
-    setup(props: any, { emit }) {
-        const menuForm: any = ref(null);
+    title: {
+        type: String,
+    },
+    typeDisabled: {
+        type: Boolean,
+    },
+})
 
-        const defaultMeta = {
+//定义事件
+const emit = defineEmits(['update:visible', 'cancel', 'val-change'])
+
+const menuForm: any = ref(null);
+
+const menuTypeValue = enums.ResourceTypeEnum['MENU'].value
+
+const defaultMeta = {
+    routeName: '',
+    icon: 'Menu',
+    redirect: '',
+    component: '',
+    isKeepAlive: true,
+    isHide: false,
+    isAffix: false,
+    isIframe: false,
+    link: '',
+};
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入资源名称',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    weight: [
+        {
+            required: true,
+            message: '请输入序号',
+            trigger: ['change', 'blur'],
+        },
+    ],
+}
+
+const trueFalseOption = [
+    {
+        label: '是',
+        value: true,
+    },
+    {
+        label: '否',
+        value: false,
+    },
+]
+
+const state = reactive({
+    dialogVisible: false,
+    form: {
+        id: null,
+        name: null,
+        pid: null,
+        code: null,
+        type: null,
+        weight: 0,
+        meta: {
             routeName: '',
-            icon: 'Menu',
+            icon: '',
             redirect: '',
             component: '',
             isKeepAlive: true,
             isHide: false,
             isAffix: false,
             isIframe: false,
-        };
-
-        const state = reactive({
-            trueFalseOption: [
-                {
-                    label: '是',
-                    value: true,
-                },
-                {
-                    label: '否',
-                    value: false,
-                },
-            ],
-            dialogVisible: false,
-            //弹出框对象
-            dialogForm: {
-                title: '',
-                visible: false,
-                data: {},
-            },
-            props: {
-                value: 'id',
-                label: 'name',
-                children: 'children',
-            },
-            form: {
-                id: null,
-                name: null,
-                pid: null,
-                code: null,
-                type: null,
-                weight: 0,
-                meta: {
-                    routeName: '',
-                    icon: '',
-                    redirect: '',
-                    component: '',
-                    isKeepAlive: true,
-                    isHide: false,
-                    isAffix: false,
-                    isIframe: false,
-                },
-            },
-            // 资源类型选择是否禁用
-            // typeDisabled: false,
-            btnLoading: false,
-            rules: {
-                name: [
-                    {
-                        required: true,
-                        message: '请输入资源名称',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-                weight: [
-                    {
-                        required: true,
-                        message: '请输入序号',
-                        trigger: ['change', 'blur'],
-                    },
-                ],
-            },
-        });
-
-        watch(props, (newValue) => {
-            state.dialogVisible = newValue.visible;
-            if (newValue.data) {
-                state.form = { ...newValue.data };
-            } else {
-                state.form = {} as any;
-            }
-
-            if (!state.form.meta) {
-                state.form.meta = defaultMeta;
-            }
-
-            // 不存在或false，都为false
-            const meta: any = state.form.meta;
-            state.form.meta.isKeepAlive = meta.isKeepAlive ? true : false;
-            state.form.meta.isHide = meta.isHide ? true : false;
-            state.form.meta.isAffix = meta.isAffix ? true : false;
-            state.form.meta.isIframe = meta.isIframe ? true : false;
-        });
-
-        // 改变iframe字段，如果为是，则设置默认的组件
-        const changeIsIframe = (value: boolean) => {
-            if (value) {
-                state.form.meta.component = 'RouterParent';
-            }
-        };
-
-        const btnOk = () => {
-            const submitForm = { ...state.form };
-            if (submitForm.type == 1) {
-                // 如果是菜单，则解析meta，如果值为false或者''则去除该值
-                submitForm.meta = parseMenuMeta(submitForm.meta);
-            } else {
-                submitForm.meta = null as any;
-            }
-            submitForm.weight = parseInt(submitForm.weight as any);
-            menuForm.value.validate((valid: any) => {
-                if (valid) {
-                    resourceApi.save.request(submitForm).then(() => {
-                        emit('val-change', submitForm);
-                        state.btnLoading = true;
-                        ElMessage.success('保存成功');
-                        setTimeout(() => {
-                            state.btnLoading = false;
-                        }, 1000);
-
-                        cancel();
-                    });
-                } else {
-                    return false;
-                }
-            });
-        };
-
-        const parseMenuMeta = (meta: any) => {
-            let metaForm: any = {};
-            // 如果是菜单，则校验meta
-            notEmpty(meta.routeName, '路由名不能为空');
-            metaForm.routeName = meta.routeName;
-            if (meta.isKeepAlive) {
-                metaForm.isKeepAlive = true;
-            }
-            if (meta.isHide) {
-                metaForm.isHide = true;
-            }
-            if (meta.isAffix) {
-                metaForm.isAffix = true;
-            }
-            if (meta.isIframe) {
-                metaForm.isIframe = true;
-            }
-            if (meta.link) {
-                metaForm.link = meta.link;
-            }
-            if (meta.redirect) {
-                metaForm.redirect = meta.redirect;
-            }
-            if (meta.component) {
-                metaForm.component = meta.component;
-            }
-            if (meta.icon) {
-                metaForm.icon = meta.icon;
-            }
-            return metaForm;
-        };
-
-        const cancel = () => {
-            emit('update:visible', false);
-            emit('cancel');
-        };
-
-        return {
-            ...toRefs(state),
-            enums,
-            changeIsIframe,
-            menuForm,
-            btnOk,
-            cancel,
-        };
+            link: '',
+        },
     },
+    btnLoading: false,
 });
+
+const {
+    dialogVisible,
+    form,
+    btnLoading,
+} = toRefs(state)
+
+watch(props, (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+    if (newValue.data) {
+        state.form = { ...newValue.data };
+    } else {
+        state.form = {} as any;
+    }
+
+    if (!state.form.meta) {
+        state.form.meta = defaultMeta;
+    }
+
+    // 不存在或false，都为false
+    const meta: any = state.form.meta;
+    state.form.meta.isKeepAlive = meta.isKeepAlive ? true : false;
+    state.form.meta.isHide = meta.isHide ? true : false;
+    state.form.meta.isAffix = meta.isAffix ? true : false;
+    state.form.meta.isIframe = meta.isIframe ? true : false;
+});
+
+// 改变iframe字段，如果为是，则设置默认的组件
+const changeIsIframe = (value: boolean) => {
+    if (value) {
+        state.form.meta.component = 'RouterParent';
+    }
+};
+
+const btnOk = () => {
+    const submitForm = { ...state.form };
+    if (submitForm.type == 1) {
+        // 如果是菜单，则解析meta，如果值为false或者''则去除该值
+        submitForm.meta = parseMenuMeta(submitForm.meta);
+    } else {
+        submitForm.meta = null as any;
+    }
+    submitForm.weight = parseInt(submitForm.weight as any);
+    menuForm.value.validate((valid: any) => {
+        if (valid) {
+            resourceApi.save.request(submitForm).then(() => {
+                emit('val-change', submitForm);
+                state.btnLoading = true;
+                ElMessage.success('保存成功');
+                setTimeout(() => {
+                    state.btnLoading = false;
+                }, 1000);
+
+                cancel();
+            });
+        } else {
+            return false;
+        }
+    });
+};
+
+const parseMenuMeta = (meta: any) => {
+    let metaForm: any = {};
+    // 如果是菜单，则校验meta
+    notEmpty(meta.routeName, '路由名不能为空');
+    metaForm.routeName = meta.routeName;
+    if (meta.isKeepAlive) {
+        metaForm.isKeepAlive = true;
+    }
+    if (meta.isHide) {
+        metaForm.isHide = true;
+    }
+    if (meta.isAffix) {
+        metaForm.isAffix = true;
+    }
+    if (meta.isIframe) {
+        metaForm.isIframe = true;
+    }
+    if (meta.link) {
+        metaForm.link = meta.link;
+    }
+    if (meta.redirect) {
+        metaForm.redirect = meta.redirect;
+    }
+    if (meta.component) {
+        metaForm.component = meta.component;
+    }
+    if (meta.icon) {
+        metaForm.icon = meta.icon;
+    }
+    return metaForm;
+};
+
+const cancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
 </script>
 <style lang="scss">
 // 	.m-dialog {