refactor: 系统水印优化等

feat: 显示 SQL 文件执行进度

.gitignore

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

Dockerfile

@@ -0,0 +1,41 @@
+# 构建前端资源
+FROM node:18-alpine3.16 as fe-builder
+
+WORKDIR /mayfly
+
+COPY mayfly_go_web .
+
+RUN yarn
+
+RUN yarn build
+
+# 构建后端资源
+FROM golang:1.21.0 as be-builder
+
+ENV GOPROXY https://goproxy.cn
+WORKDIR /mayfly
+
+# Copy the go source for building server
+COPY server .
+
+RUN go mod download
+
+COPY --from=fe-builder /mayfly/dist /mayfly/static/static
+
+# Build
+RUN GO111MODULE=on CGO_ENABLED=0 GOOS=linux \
+    go build -a \
+    -o mayfly-go main.go
+
+FROM alpine:3.16
+
+RUN apk add --no-cache ca-certificates bash expat
+
+ENV TZ=Asia/Shanghai
+RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
+
+WORKDIR /mayfly
+
+COPY --from=be-builder /mayfly/mayfly-go /usr/local/bin/mayfly-go
+
+CMD ["mayfly-go"]

Makefile

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

README.md

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

build_release.sh

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

docker-compose.yaml

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

mayfly_go_web/.env.development

@@ -2,4 +2,8 @@
 ENV = 'development'
 
 # 本地环境接口地址
-VITE_API_URL = '/api'
+VITE_API_URL = '/api'
+
+# 路由模式
+# Optional: hash | history
+VITE_ROUTER_MODE = hash

mayfly_go_web/.env.production

@@ -2,4 +2,8 @@
 ENV = 'production'
 
 # 线上环境接口地址
-VITE_API_URL = '/api'
+VITE_API_URL = '/api'
+
+# 路由模式
+# Optional: hash | history
+VITE_ROUTER_MODE = hash

mayfly_go_web/.eslintrc.js

@@ -1,76 +1,76 @@
 module.exports = {
-	root: true,
+    root: true,
-	env: {
+    env: {
-		browser: true,
+        browser: true,
-		es2021: true,
+        es2021: true,
-		node: true,
+        node: true,
-	},
+    },
-	parser: 'vue-eslint-parser',
+    parser: 'vue-eslint-parser',
-	parserOptions: {
+    parserOptions: {
-		ecmaVersion: 12,
+        ecmaVersion: 12,
-		parser: '@typescript-eslint/parser',
+        parser: '@typescript-eslint/parser',
-		sourceType: 'module',
+        sourceType: 'module',
-	},
+    },
-	extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
+    extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
-	plugins: ['vue', '@typescript-eslint'],
+    plugins: ['vue', '@typescript-eslint'],
-	overrides: [
+    overrides: [
-		{
+        {
-			files: ['*.ts', '*.tsx', '*.vue'],
+            files: ['*.ts', '*.tsx', '*.vue'],
-			rules: {
+            rules: {
-				'no-undef': 'off',
+                'no-undef': 'off',
-			},
+            },
-		},
+        },
-	],
+    ],
-	rules: {
+    rules: {
-		// http://eslint.cn/docs/rules/
+        // http://eslint.cn/docs/rules/
-		// https://eslint.vuejs.org/rules/
+        // https://eslint.vuejs.org/rules/
-		// https://typescript-eslint.io/rules/no-unused-vars/
+        // https://typescript-eslint.io/rules/no-unused-vars/
-		'@typescript-eslint/ban-ts-ignore': 'off',
+        '@typescript-eslint/ban-ts-ignore': 'off',
-		'@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-function-return-type': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
-		'@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-empty-function': 'off',
-		'@typescript-eslint/no-use-before-define': 'off',
+        '@typescript-eslint/no-use-before-define': 'off',
-		'@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
-		'@typescript-eslint/ban-types': 'off',
+        '@typescript-eslint/ban-types': 'off',
-		'@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
-		'@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
-		'@typescript-eslint/no-redeclare': 'error',
+        '@typescript-eslint/no-redeclare': 'error',
-		'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+        '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
-		'@typescript-eslint/no-unused-vars': [2],
+        '@typescript-eslint/no-unused-vars': [2],
-		'vue/custom-event-name-casing': 'off',
+        'vue/custom-event-name-casing': 'off',
-		'vue/attributes-order': 'off',
+        'vue/attributes-order': 'off',
-		'vue/one-component-per-file': 'off',
+        'vue/one-component-per-file': 'off',
-		'vue/html-closing-bracket-newline': 'off',
+        'vue/html-closing-bracket-newline': 'off',
-		'vue/max-attributes-per-line': 'off',
+        'vue/max-attributes-per-line': 'off',
-		'vue/multiline-html-element-content-newline': 'off',
+        'vue/multiline-html-element-content-newline': 'off',
-		'vue/singleline-html-element-content-newline': 'off',
+        'vue/singleline-html-element-content-newline': 'off',
-		'vue/attribute-hyphenation': 'off',
+        'vue/attribute-hyphenation': 'off',
-		'vue/html-self-closing': 'off',
+        'vue/html-self-closing': 'off',
-		'vue/no-multiple-template-root': 'off',
+        'vue/no-multiple-template-root': 'off',
-		'vue/require-default-prop': 'off',
+        'vue/require-default-prop': 'off',
-		'vue/no-v-model-argument': 'off',
+        'vue/no-v-model-argument': 'off',
-		'vue/no-arrow-functions-in-watch': 'off',
+        'vue/no-arrow-functions-in-watch': 'off',
-		'vue/no-template-key': 'off',
+        'vue/no-template-key': 'off',
-		'vue/no-v-html': 'off',
+        'vue/no-v-html': 'off',
-		'vue/comment-directive': 'off',
+        'vue/comment-directive': 'off',
-		'vue/no-parsing-error': 'off',
+        'vue/no-parsing-error': 'off',
-		'vue/no-deprecated-v-on-native-modifier': 'off',
+        'vue/no-deprecated-v-on-native-modifier': 'off',
-		'vue/multi-word-component-names': 'off',
+        'vue/multi-word-component-names': 'off',
-		'no-useless-escape': 'off',
+        'no-useless-escape': 'off',
-		'no-sparse-arrays': 'off',
+        'no-sparse-arrays': 'off',
-		'no-prototype-builtins': 'off',
+        'no-prototype-builtins': 'off',
-		'no-constant-condition': 'off',
+        'no-constant-condition': 'off',
-		'no-use-before-define': 'off',
+        'no-use-before-define': 'off',
-		'no-restricted-globals': 'off',
+        'no-restricted-globals': 'off',
-		'no-restricted-syntax': 'off',
+        'no-restricted-syntax': 'off',
-		'generator-star-spacing': 'off',
+        'generator-star-spacing': 'off',
-		'no-unreachable': 'off',
+        'no-unreachable': 'off',
-		'no-multiple-template-root': 'off',
+        'no-multiple-template-root': 'off',
-		'no-unused-vars': 'error',
+        'no-unused-vars': 'error',
-		'no-v-model-argument': 'off',
+        'no-v-model-argument': 'off',
-		'no-case-declarations': 'off',
+        'no-case-declarations': 'off',
-		'no-console': 'error',
+        // 'no-console': 'error',
-		'no-redeclare': 'off',
+        'no-redeclare': 'off',
-	},
+    },
-};
+};

mayfly_go_web/.prettierrc.js

@@ -1,39 +1,39 @@
 module.exports = {
-	// 一行最多多少个字符
+    // 一行最多多少个字符
-	printWidth: 150,
+    printWidth: 160,
-	// 指定每个缩进级别的空格数
+    // 指定每个缩进级别的空格数
-	tabWidth: 4,
+    tabWidth: 4,
-	// 使用制表符而不是空格缩进行
+    // 使用制表符而不是空格缩进行
-	useTabs: false,
+    useTabs: false,
-	// 在语句末尾打印分号
+    // 在语句末尾打印分号
-	semi: true,
+    semi: true,
-	// 使用单引号而不是双引号
+    // 使用单引号而不是双引号
-	singleQuote: true,
+    singleQuote: true,
-	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+    // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
-	quoteProps: 'as-needed',
+    quoteProps: 'as-needed',
-	// 在JSX中使用单引号而不是双引号
+    // 在JSX中使用单引号而不是双引号
-	jsxSingleQuote: false,
+    jsxSingleQuote: false,
-	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
-	trailingComma: 'es5',
+    trailingComma: 'es5',
-	// 在对象文字中的括号之间打印空格
+    // 在对象文字中的括号之间打印空格
-	bracketSpacing: true,
+    bracketSpacing: true,
-	// jsx 标签的反尖括号需要换行
+    // jsx 标签的反尖括号需要换行
-	jsxBracketSameLine: false,
+    jsxBracketSameLine: false,
-	// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
+    // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
-	arrowParens: 'always',
+    arrowParens: 'always',
-	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
-	rangeStart: 0,
+    rangeStart: 0,
-	rangeEnd: Infinity,
+    rangeEnd: Infinity,
-	// 指定要使用的解析器，不需要写文件开头的 @prettier
+    // 指定要使用的解析器，不需要写文件开头的 @prettier
-	requirePragma: false,
+    requirePragma: false,
-	// 不需要自动在文件开头插入 @prettier
+    // 不需要自动在文件开头插入 @prettier
-	insertPragma: false,
+    insertPragma: false,
-	// 使用默认的折行标准 always\never\preserve
+    // 使用默认的折行标准 always\never\preserve
-	proseWrap: 'preserve',
+    proseWrap: 'preserve',
-	// 指定HTML文件的全局空格敏感度 css\strict\ignore
+    // 指定HTML文件的全局空格敏感度 css\strict\ignore
-	htmlWhitespaceSensitivity: 'css',
+    htmlWhitespaceSensitivity: 'css',
-	// Vue文件脚本和样式标签缩进
+    // Vue文件脚本和样式标签缩进
-	vueIndentScriptAndStyle: false,
+    vueIndentScriptAndStyle: false,
-	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+    // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
-	endOfLine: 'lf',
+    endOfLine: 'lf',
 };

mayfly_go_web/package.json

@@ -10,48 +10,49 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
-    "asciinema-player": "^3.3.0",
+    "asciinema-player": "^3.6.2",
-    "axios": "^1.4.0",
+    "axios": "^1.5.0",
-    "countup.js": "^2.0.7",
+    "countup.js": "^2.7.0",
     "cropperjs": "^1.5.11",
     "echarts": "^5.4.0",
-    "element-plus": "^2.3.7",
+    "element-plus": "^2.4.0",
     "jsencrypt": "^3.3.1",
     "lodash": "^4.17.21",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.44.0",
     "monaco-sql-languages": "^0.11.0",
     "monaco-themes": "^0.4.4",
     "nprogress": "^0.2.0",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.0",
     "screenfull": "^6.0.2",
-    "sortablejs": "^1.13.0",
+    "sortablejs": "^1.15.0",
     "sql-formatter": "^12.1.2",
     "vue": "^3.3.4",
     "vue-clipboard3": "^1.0.1",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.5",
-    "xterm": "^5.2.1",
+    "xterm": "^5.3.0",
-    "xterm-addon-fit": "^0.7.0"
+    "xterm-addon-fit": "^0.8.0",
+    "xterm-addon-search": "^0.13.0",
+    "xterm-addon-web-links": "^0.9.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.178",
     "@types/node": "^15.6.0",
     "@types/nprogress": "^0.2.0",
-    "@types/sortablejs": "^1.10.6",
+    "@types/sortablejs": "^1.15.3",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^4.23.0",
+    "@typescript-eslint/parser": "^6.7.4",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.4.0",
-    "@vue/compiler-sfc": "^3.0.11",
+    "@vue/compiler-sfc": "^3.3.4",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.3.1",
     "eslint": "^8.35.0",
     "eslint-plugin-vue": "^8.2.0",
     "prettier": "^2.3.0",
-    "sass": "^1.62.0",
+    "sass": "^1.69.0",
-    "sass-loader": "^13.2.0",
     "typescript": "^5.0.2",
-    "vite": "^4.3.9",
+    "vite": "^4.4.11",
-    "vue-eslint-parser": "^9.1.1"
+    "vue-eslint-parser": "^9.3.1"
   },
   "browserslist": [
     "> 1%",

mayfly_go_web/public/config.js

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

mayfly_go_web/src/App.vue

@@ -1,20 +1,33 @@
 <template>
-    <router-view v-show="themeConfig.lockScreenTime !== 0" />
+    <div class="h100">
-    <LockScreen v-if="themeConfig.isLockScreen" />
+        <el-watermark
-    <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime !== 0" />
+            :zIndex="10000000"
+            :width="210"
+            v-if="themeConfig.isWatermark"
+            :font="{ color: 'rgba(180, 180, 180, 0.5)' }"
+            :content="themeConfig.watermarkText"
+            class="h100"
+        >
+            <router-view v-show="themeConfig.lockScreenTime !== 0" />
+        </el-watermark>
+        <router-view v-if="!themeConfig.isWatermark" v-show="themeConfig.lockScreenTime !== 0" />
+
+        <LockScreen v-if="themeConfig.isLockScreen" />
+        <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime !== 0" />
+    </div>
 </template>
 
 <script setup lang="ts" name="app">
-import { ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
-// import { useTagsViewRoutes } from '@/store/tagsViewRoutes';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
 import { getLocal } from '@/common/utils/storage';
-import LockScreen from '@/views/layout/lockScreen/index.vue';
+import LockScreen from '@/layout/lockScreen/index.vue';
-import Setings from '@/views/layout/navBars/breadcrumb/setings.vue';
+import Setings from '@/layout/navBars/breadcrumb/setings.vue';
-import Watermark from '@/common/utils/wartermark';
 import mittBus from '@/common/utils/mitt';
+import { getThemeConfig } from './common/utils/storage';
+import { useWatermark } from '@/common/sysconfig';
 
 const setingsRef = ref();
 const route = useRoute();
@@ -27,14 +40,6 @@ const openSetingsDrawer = () => {
     setingsRef.value.openDrawer();
 };
 
-// 设置初始化，防止刷新时恢复默认
-onBeforeMount(() => {
-    // 设置批量第三方 icon 图标
-    // setIntroduction.cssCdn();
-    // // 设置批量第三方 js
-    // setIntroduction.jsCdn();
-});
-
 // 页面加载时
 onMounted(() => {
     nextTick(() => {
@@ -42,17 +47,62 @@ onMounted(() => {
         mittBus.on('openSetingsDrawer', () => {
             openSetingsDrawer();
         });
+
         // 获取缓存中的布局配置
-        if (getLocal('themeConfig')) {
+        const tc = getThemeConfig();
-            themeConfigStores.setThemeConfig({ themeConfig: getLocal('themeConfig') })
+        if (tc) {
+            themeConfigStores.setThemeConfig({ themeConfig: tc });
             document.documentElement.style.cssText = getLocal('themeConfigStyle');
+
+            themeConfigStores.switchDark(tc.isDark);
         }
+
+        // 是否开启水印
+        useWatermark().then((res) => {
+            themeConfigStores.setWatermarkConfig(res);
+        });
     });
 });
 
+// 监听 themeConfig isWartermark配置文件的变化
+watch(
+    () => themeConfig.value.isWatermark,
+    (val) => {
+        if (val) {
+            setTimeout(() => {
+                setWatermarkContent();
+                refreshWatermarkTime();
+            }, 500);
+        }
+    }
+);
+
+const setWatermarkContent = () => {
+    themeConfigStores.setWatermarkUser();
+    themeConfigStores.setWatermarkNowTime();
+};
+
+let refreshWatermarkTimeInterval: any = null;
+/**
+ * 刷新水印时间
+ */
+const refreshWatermarkTime = () => {
+    if (refreshWatermarkTimeInterval) {
+        clearInterval(refreshWatermarkTimeInterval);
+    }
+    refreshWatermarkTimeInterval = setInterval(() => {
+        if (themeConfig.value.isWatermark) {
+            themeConfigStores.setWatermarkNowTime();
+        } else {
+            clearInterval(refreshWatermarkTimeInterval);
+        }
+    }, 10000);
+};
+
 // 页面销毁时，关闭监听布局配置
 onUnmounted(() => {
-    mittBus.off('openSetingsDrawer', () => { });
+    clearInterval(refreshWatermarkTimeInterval);
+    mittBus.off('openSetingsDrawer', () => {});
 });
 
 // 监听路由的变化，设置网站标题
@@ -60,8 +110,6 @@ watch(
     () => route.path,
     () => {
         nextTick(() => {
-            // 路由变化更新水印
-            Watermark.use();
             document.title = `${route.meta.title} - ${themeConfig.value.globalTitle}` || themeConfig.value.globalTitle;
         });
     }

mayfly_go_web/src/common/Api.ts

@@ -1,4 +1,4 @@
-import request from './request'
+import request from './request';
 
 /**
  * 可用于各模块定义各自api请求
@@ -27,23 +27,13 @@ class Api {
     }
 
     /**
-     * 操作该权限，即请求对应的url
+     * 请求对应的该api
      * @param {Object} param 请求该api的参数
      */
-    request(param: any = null, options: any = null): Promise<any> {
+    request(param: any = null, options: any = null, headers: any = null): Promise<any> {
-        return request.send(this, param, options);
+        return request.request(this.method, this.url, param, headers, options);
     }
 
-    /**
-    * 操作该权限，即请求对应的url
-    * @param {Object} param 请求该api的参数
-    * @param headers headers
-    */
-    requestWithHeaders(param: any, headers: any): Promise<any> {
-        return request.sendWithHeaders(this, param, headers);
-    }
-
-
     /**    静态方法     **/
 
     /**
@@ -51,7 +41,7 @@ class Api {
      * @param url url
      * @param method 请求方法(get,post,put,delete...)
      */
-    static create(url: string, method: string) :Api {
+    static create(url: string, method: string): Api {
         return new Api(url, method);
     }
 
@@ -88,5 +78,4 @@ class Api {
     }
 }
 
-
+export default Api;
-export default Api

mayfly_go_web/src/common/Enum.ts

@@ -1,37 +1,94 @@
+export interface EnumValueTag {
+    color?: string;
+    type?: string;
+}
+
 /**
- * 枚举类
+ * 枚举值
- * @author meilin.huang
  */
-export class Enum {
+export class EnumValue {
     /**
-     * 添加枚举字段
+     * 枚举值
-     * 
-     * @param {string} field  枚举字段名
-     * @param {string} label  枚举名称
-     * @param {Object} value  枚举值
      */
-    add(field: string, label: string, value: any) {
+    value: any;
-        this[field] = { label, value }
+
-        return this
+    /**
+     * 枚举描述
+     */
+    label: string;
+
+    /**
+     * 展示的标签信息
+     */
+    tag: EnumValueTag;
+
+    constructor(value: any, label: string) {
+        this.value = value;
+        this.label = label;
+    }
+
+    setTagType(type: string = 'primary'): EnumValue {
+        this.tag = { type };
+        return this;
+    }
+
+    tagTypeInfo(): EnumValue {
+        return this.setTagType('info');
+    }
+
+    tagTypeSuccess(): EnumValue {
+        return this.setTagType('success');
+    }
+
+    tagTypeDanger(): EnumValue {
+        return this.setTagType('danger');
+    }
+
+    tagTypeWarning(): EnumValue {
+        return this.setTagType('warning');
+    }
+
+    setTagColor(color: string): EnumValue {
+        this.tag = { color };
+        return this;
+    }
+
+    public static of(value: any, label: string): EnumValue {
+        return new EnumValue(value, label);
     }
 
     /**
-     * 根据枚举value获取其label
+     * 根据枚举值获取指定枚举值对象
-     * 
+     *
-     * @param {Object} value 
+     * @param enumValues 所有枚举值
+     * @param value 需要匹配的枚举值
+     * @returns 枚举值对象
      */
-    getLabelByValue(value: any) {
+    static getEnumByValue(enumValues: EnumValue[], value: any): EnumValue | null {
-        // 字段不存在返回‘’
+        for (let enumValue of enumValues) {
-        if (value === undefined || value === null) {
+            if (enumValue.value == value) {
-            return ''
+                return enumValue;
-        }
-        for (const i in this) {
-            const e: any = this[i]
-            if (e && e.value === value) {
-                return e.label
             }
         }
+        return null;
+    }
 
-        return ''
+    /**
+     * 根据枚举值获取枚举描述
+     *
+     * @param enums 枚举对象
+     * @param value 枚举值
+     * @returns 枚举描述
+     */
+    static getLabelByValue(enums: any, value: any) {
+        const enumValues = Object.values(enums) as any;
+        for (let enumValue of enumValues) {
+            if (enumValue['value'] == value) {
+                return enumValue['label'];
+            }
+        }
+        return '';
     }
 }
+
+export default EnumValue;

mayfly_go_web/src/common/SocketBuilder.ts

@@ -1,46 +1,43 @@
 class SocketBuilder {
-
     websocket: WebSocket;
-  
-    constructor(url: string) {
-      if (typeof (WebSocket) === "undefined") {
-        throw new Error('不支持websocket');
-      }
-      if (!url) {
-        throw new Error('websocket url不能为空');
-      }
-      this.websocket = new WebSocket(url);
-    }
-  
-    static builder(url: string) {
-      return new SocketBuilder(url);
-    }
-  
-    open(onopen: any) {
-      this.websocket.onopen = onopen;
-      return this;
-    }
-  
-    error(onerror: any) {
-      this.websocket.onerror = onerror;
-      return this;
-    }
-  
-    message(onmessage: any) {
-      this.websocket.onmessage = onmessage;
-      return this;
-    }
-  
-    close(onclose: any) {
-      this.websocket.onclose = onclose;
-      return this;
-    }
-  
-    build() {
-      return this.websocket;
-    }
-  }
 
-  
+    constructor(url: string) {
-  export default SocketBuilder;
+        if (typeof WebSocket === 'undefined') {
-  
+            throw new Error('不支持websocket');
+        }
+        if (!url) {
+            throw new Error('websocket url不能为空');
+        }
+        this.websocket = new WebSocket(url);
+    }
+
+    static builder(url: string) {
+        return new SocketBuilder(url);
+    }
+
+    open(onopen: any) {
+        this.websocket.onopen = onopen;
+        return this;
+    }
+
+    error(onerror: any) {
+        this.websocket.onerror = onerror;
+        return this;
+    }
+
+    message(onmessage: any) {
+        this.websocket.onmessage = onmessage;
+        return this;
+    }
+
+    close(onclose: any) {
+        this.websocket.onclose = onclose;
+        return this;
+    }
+
+    build() {
+        return this.websocket;
+    }
+}
+
+export default SocketBuilder;

mayfly_go_web/src/common/assert.ts

@@ -5,17 +5,17 @@ class AssertError extends Error {
     constructor(message: string) {
         super(message);
         // 错误类名
-        this.name = "AssertError";
+        this.name = 'AssertError';
     }
 }
 
 /**
  * 断言表达式为true
- * 
+ *
  * @param condition 条件表达式
  * @param msg 错误消息
  */
- export function isTrue(condition: boolean, msg: string) {
+export function isTrue(condition: boolean, msg: string) {
     if (!condition) {
         throw new AssertError(msg);
     }
@@ -23,45 +23,45 @@ class AssertError extends Error {
 
 /**
  * 断言不能为空值，即null,0,''等
- * 
+ *
  * @param obj 对象1
  * @param msg 错误消息
  */
- export function notBlank(obj: any, msg: string) {
+export function notBlank(obj: any, msg: string) {
-    isTrue(obj, msg)
+    isTrue(obj, msg);
 }
 
 /**
  * 断言两对象相等
- * 
+ *
  * @param obj1 对象1
  * @param obj2 对象2
  * @param msg 错误消息
  */
- export function isEquals(obj1: any, obj2: any, msg: string) {
+export function isEquals(obj1: any, obj2: any, msg: string) {
     isTrue(obj1 === obj2, msg);
 }
 
 /**
  * 断言对象不为null或undefiend
- * 
+ *
  * @param obj 对象
  * @param msg 错误提示
  */
 export function notNull(obj: any, msg: string) {
     if (obj == null || obj == undefined) {
-        throw new AssertError(msg)
+        throw new AssertError(msg);
     }
 }
 
 /**
-* 断言字符串不能为空
+ * 断言字符串不能为空
-* 
+ *
-* @param str 字符串
+ * @param str 字符串
-* @param msg 错误提示
+ * @param msg 错误提示
-*/
+ */
 export function notEmpty(str: string, msg: string) {
     if (str == null || str == undefined || str == '') {
         throw new AssertError(msg);
     }
-}
+}

mayfly_go_web/src/common/config.ts

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

mayfly_go_web/src/common/echarts/useEcharts.ts

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

mayfly_go_web/src/common/enums.ts

@@ -1,27 +0,0 @@
-interface BaseEnum {
-    name: string
-    value: any
-}
-
-const success: BaseEnum = {
-    name: 'success',
-    value: 200
-}
-
-export enum ResultEnum {
-    SUCCESS = 200,
-    ERROR = 400,
-    PARAM_ERROR = 405,
-    SERVER_ERROR = 500,
-    NO_PERMISSION = 501
-}
-// /**
-//  * 全局公共枚举类
-//  */
-// export default {
-//   // uri请求方法
-//   requestMethod: new Enum().add('GET', 'GET', 1).add('POST', 'POST', 2).add('PUT', 'PUT', 3).add('DELETE', 'DELETE', 4),
-//   // 结果枚举
-//   ResultEnum: new Enum().add('SUCCESS', '操作成功', 200).add('ERROR', '操作失败', 400).add('PARAM_ERROR', '参数错误', 405).add('SERVER_ERROR', '服务器异常', 500)
-//     .add('NO_PERMISSION', '没有权限', 501)
-// }

mayfly_go_web/src/common/openApi.ts

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

mayfly_go_web/src/common/pattern.ts

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

mayfly_go_web/src/common/request.ts

@@ -1,9 +1,7 @@
-import router from "../router";
+import router from '../router';
 import Axios from 'axios';
-import { ResultEnum } from './enums'
-import Api from './Api';
 import config from './config';
-import { getSession } from './utils/storage';
+import { getToken } from './utils/storage';
 import { templateResolve } from './utils/string';
 import { ElMessage } from 'element-plus';
 
@@ -22,8 +20,16 @@ export interface Result {
     data?: any;
 }
 
-const baseUrl: string = config.baseApiUrl
+enum ResultEnum {
-const baseWsUrl: string = config.baseWsUrl
+    SUCCESS = 200,
+    ERROR = 400,
+    PARAM_ERROR = 405,
+    SERVER_ERROR = 500,
+    NO_PERMISSION = 501,
+}
+
+const baseUrl: string = config.baseApiUrl;
+// const baseWsUrl: string = config.baseWsUrl;
 
 /**
  * 通知错误消息
@@ -37,83 +43,94 @@ function notifyErrorMsg(msg: string) {
 // create an axios instance
 const service = Axios.create({
     baseURL: baseUrl, // url = base url + request url
-    timeout: 20000 // request timeout
+    timeout: 60000, // request timeout
-})
+});
 
 // request interceptor
 service.interceptors.request.use(
     (config: any) => {
         // do something before request is sent
-        const token = getSession("token")
+        const token = getToken();
         if (token) {
             // 设置token
-            config.headers['Authorization'] = token
+            config.headers['Authorization'] = token;
         }
-        return config
+        return config;
     },
-    error => {
+    (error) => {
-        return Promise.reject(error)
+        return Promise.reject(error);
     }
-)
+);
 
 // response interceptor
 service.interceptors.response.use(
-    response => {
+    (response) => {
         // 获取请求返回结果
         const data: Result = response.data;
+        if (data.code === ResultEnum.SUCCESS) {
+            return data.data;
+        }
         // 如果提示没有权限，则移除token，使其重新登录
         if (data.code === ResultEnum.NO_PERMISSION) {
             router.push({
                 path: '/401',
             });
         }
-        if (data.code === ResultEnum.SUCCESS) {
+        return Promise.reject(data);
-            return data.data;
-        } else {
-            return Promise.reject(data);
-        }
     },
     (e: any) => {
+        const rejectPromise = Promise.reject(e);
+
+        const statusCode = e.response?.status;
+        if (statusCode == 500) {
+            notifyErrorMsg('服务器未知异常');
+            return rejectPromise;
+        }
+
+        if (statusCode == 404) {
+            notifyErrorMsg('请求接口未找到');
+            return rejectPromise;
+        }
+
         if (e.message) {
             // 对响应错误做点什么
             if (e.message.indexOf('timeout') != -1) {
-                notifyErrorMsg('网络超时');
+                notifyErrorMsg('网络请求超时');
-            } else if (e.message == 'Network Error') {
+                return rejectPromise;
+            }
+
+            if (e.message == 'Network Error') {
                 notifyErrorMsg('网络连接错误');
-            } else if (e.message.indexOf('404')) {
+                return rejectPromise;
-                notifyErrorMsg('请求接口找不到');
-            } else {
-                if (e.response.data) ElMessage.error(e.response.statusText);
-                else notifyErrorMsg('接口路径找不到');
             }
         }
 
-        return Promise.reject(e)
+        notifyErrorMsg('网络请求错误');
+        return rejectPromise;
     }
-)
+);
 
 /**
  * 请求uri
  * 该方法已处理请求结果中code != 200的message提示,如需其他错误处理(取消加载状态,重置对象状态等等),可catch继续处理
- * 
+ *
  * @param {Object} method 请求方法(GET,POST,PUT,DELTE等)
  * @param {Object} uri    uri
  * @param {Object} params 参数
  */
 function request(method: string, url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-    if (!url)
+    if (!url) throw new Error('请求url不能为空');
-        throw new Error('请求url不能为空');
     // 简单判断该url是否是restful风格
-    if (url.indexOf("{") != -1) {
+    if (url.indexOf('{') != -1) {
         url = templateResolve(url, params);
     }
     const query: any = {
         method,
         url: url,
-        ...options
+        ...options,
     };
     if (headers) {
-        query.headers = headers
+        query.headers = headers;
     }
 
     // post和put使用json格式传参
@@ -122,43 +139,51 @@ function request(method: string, url: string, params: any = null, headers: any =
     } else {
         query.params = params;
     }
-    return service.request(query).then(res => res)
+    return service
-        .catch(e => {
+        .request(query)
-            // 如果返回的code不为成功，则会返回对应的错误msg，则直接统一通知即可
+        .then((res) => res)
-            if (e.msg) {
+        .catch((e) => {
-                notifyErrorMsg(e.msg)
+            // 如果返回的code不为成功，则会返回对应的错误msg，则直接统一通知即可。忽略登录超时或没有权限的提示（直接跳转至401页面）
+            if (e.msg && e?.code != ResultEnum.NO_PERMISSION) {
+                notifyErrorMsg(e.msg);
             }
             return Promise.reject(e);
         });
 }
 
 /**
- * 根据api执行对应接口
+ * get请求uri
- * @param api Api实例
+ * 该方法已处理请求结果中code != 200的message提示,如需其他错误处理(取消加载状态,重置对象状态等等),可catch继续处理
- * @param params 请求参数
+ *
+ * @param {Object} url   uri
+ * @param {Object} params 参数
  */
-function send(api: Api, params: any, options: any): Promise<any> {
+function get(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-    return request(api.method, api.url, params, null, options);
+    return request('get', url, params, headers, options);
 }
 
-/**
+function post(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
- * 根据api执行对应接口
+    return request('post', url, params, headers, options);
- * @param api Api实例
+}
- * @param params 请求参数
+
- */
+function put(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-function sendWithHeaders(api: Api, params: any, headers: any): Promise<any> {
+    return request('put', url, params, headers, options);
-    return request(api.method, api.url, params, headers, null);
+}
+
+function del(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
+    return request('delete', url, params, headers, options);
 }
 
 function getApiUrl(url: string) {
     // 只是返回api地址而不做请求，用在上传组件之类的
-    return baseUrl + url + '?token=' + getSession('token');
+    return baseUrl + url + '?token=' + getToken();
 }
 
-
 export default {
     request,
-    send,
+    get,
-    sendWithHeaders,
+    post,
-    getApiUrl
+    put,
-}
+    del,
+    getApiUrl,
+};

mayfly_go_web/src/common/rsa.ts

@@ -1,36 +1,36 @@
 import openApi from './openApi';
-import JSEncrypt from 'jsencrypt'
+import JSEncrypt from 'jsencrypt';
 import { notBlank } from './assert';
 
-var encryptor: any = null
+var encryptor: any = null;
 
 export async function getRsaPublicKey() {
-    let publicKey = sessionStorage.getItem('RsaPublicKey')
+    let publicKey = sessionStorage.getItem('RsaPublicKey');
     if (publicKey) {
-        return publicKey
+        return publicKey;
     }
-    publicKey = await openApi.getPublicKey.request() as string
+    publicKey = (await openApi.getPublicKey()) as string;
-    sessionStorage.setItem('RsaPublicKey', publicKey)
+    sessionStorage.setItem('RsaPublicKey', publicKey);
-    return publicKey
+    return publicKey;
 }
 
 /**
  * 公钥加密指定值
- * 
+ *
  * @param value value
  * @returns 加密后的值
  */
 export async function RsaEncrypt(value: any) {
     // 不存在则返回空值
     if (!value) {
-        return ""
+        return '';
     }
-    if (encryptor != null) {
+    if (encryptor != null && sessionStorage.getItem('RsaPublicKey') != null) {
-        return encryptor.encrypt(value)
+        return encryptor.encrypt(value);
     }
-    encryptor = new JSEncrypt()
+    encryptor = new JSEncrypt();
-    const publicKey = await getRsaPublicKey() as string;
+    const publicKey = (await getRsaPublicKey()) as string;
-    notBlank(publicKey, "获取公钥失败")
+    notBlank(publicKey, '获取公钥失败');
-    encryptor.setPublicKey(publicKey)//设置公钥
+    encryptor.setPublicKey(publicKey); //设置公钥
-    return encryptor.encrypt(value)
+    return encryptor.encrypt(value);
-}
+}

mayfly_go_web/src/common/sockets.ts

@@ -1,45 +1,79 @@
-
+import Config from './config';
-import Config from './config'
+import { ElNotification, NotificationHandle } from 'element-plus';
-import { ElNotification } from 'element-plus'
 import SocketBuilder from './SocketBuilder';
-import { getSession } from '@/common/utils/storage.ts';
+import { getToken } from '@/common/utils/storage';
+import { createVNode, reactive } from "vue";
+import { buildProgressProps } from "@/components/progress-notify/progress-notify";
+import ProgressNotify from '/src/components/progress-notify/progress-notify.vue';
 
 export default {
     /**
      * 全局系统消息websocket
      */
     sysMsgSocket() {
-        const token = getSession('token');
+        const token = getToken();
         if (!token) {
             return null;
         }
+        const messageTypes = {
+            0: "error",
+            1: "success",
+            2: "info",
+        }
+        const notifyMap: Map<Number, any> = new Map()
+
         return SocketBuilder.builder(`${Config.baseWsUrl}/sysmsg?token=${token}`)
             .message((event: { data: string }) => {
                 const message = JSON.parse(event.data);
-                let mtype: string;
+                const type = messageTypes[message.type]
-                switch (message.type) {
+                switch (message.category) {
-                    case 0:
+                    case "execSqlFileProgress":
-                        mtype = 'error';
+                        const content = JSON.parse(message.msg)
-                        break;
+                        const id = content.id
-                    case 2:
+                        let progress = notifyMap.get(id)
-                        mtype = 'info';
+                        if (content.terminated) {
-                        break;
+                            if (progress != undefined) {
-                    case 1:
+                                progress.notification?.close()
-                        mtype = 'success';
+                                notifyMap.delete(id)
+                                progress = undefined
+                            }
+                            return
+                        }
+                        if (progress == undefined) {
+                            progress = {
+                                props: reactive(buildProgressProps()),
+                                notification: undefined,
+                            }
+                        }
+                        progress.props.progress.sqlFileName = content.sqlFileName
+                        progress.props.progress.executedStatements = content.executedStatements
+                        if (!notifyMap.has(id)) {
+                            const vNodeMessage = createVNode(
+                                ProgressNotify,
+                                progress.props,
+                                null,
+                            )
+                            progress.notification = ElNotification({
+                                duration: 0,
+                                title: message.title,
+                                message: vNodeMessage,
+                                type: type,
+                                showClose: false,
+                            });
+                            notifyMap.set(id, progress)
+                        }
                         break;
                     default:
-                        mtype = 'info';
+                        ElNotification({
+                            duration: 0,
+                            title: message.title,
+                            message: message.msg,
+                            type: type,
+                        });
+                        break;
                 }
-                if (mtype == undefined) {
-                    return;
-                }
-                ElNotification({
-                    duration: 0,
-                    title: message.title,
-                    message: message.msg,
-                    type: mtype as any,
-                })
             })
-            .open((event: any) => console.log(event)).build();
+            .open((event: any) => console.log(event))
-    }
+            .build();
-}
+    },
+};

mayfly_go_web/src/common/sysconfig.ts

@@ -1,38 +1,38 @@
 import openApi from './openApi';
 
 // 登录是否使用验证码配置key
-const AccountLoginSecurity = "AccountLoginSecurity"
+const AccountLoginSecurity = 'AccountLoginSecurity';
-const UseLoginCaptchaConfigKey = "UseLoginCaptcha"
+const UseLoginCaptchaConfigKey = 'UseLoginCaptcha';
-const UseWartermarkConfigKey = "UseWartermark"
+const UseWatermarkConfigKey = 'UseWatermark';
 
 /**
  * 获取系统配置值
- * 
+ *
  * @param key 配置key
  * @returns 配置值
  */
-export async function getConfigValue(key: string) : Promise<string> {
+export async function getConfigValue(key: string): Promise<string> {
-    return await openApi.getConfigValue.request({key}) as string
+    return (await openApi.getConfigValue({ key })) as string;
 }
 
 /**
  * 获取bool类型系统配置值
- * 
+ *
  * @param key 配置key
  * @param defaultValue 默认值
  * @returns 是否为ture，1: true；其他: false
  */
-export async function getBoolConfigValue(key :string, defaultValue :boolean) : Promise<boolean> {
+export async function getBoolConfigValue(key: string, defaultValue: boolean): Promise<boolean> {
     const value = await getConfigValue(key);
     return convertBool(value, defaultValue);
 }
 
 /**
  * 获取账号登录安全配置
- * 
+ *
- * @returns 
+ * @returns
  */
-export async function getAccountLoginSecurity() : Promise<any> {
+export async function getAccountLoginSecurity(): Promise<any> {
     const value = await getConfigValue(AccountLoginSecurity);
     if (!value) {
         return null;
@@ -45,25 +45,44 @@ export async function getAccountLoginSecurity() : Promise<any> {
 
 /**
  * 是否使用登录验证码
- * 
+ *
- * @returns 
+ * @returns
  */
-export async function useLoginCaptcha() : Promise<boolean> {
+export async function useLoginCaptcha(): Promise<boolean> {
-    return await getBoolConfigValue(UseLoginCaptchaConfigKey, true)
+    return await getBoolConfigValue(UseLoginCaptchaConfigKey, true);
 }
 
 /**
- * 是否启用水印
+ * 是否启用水印信息配置
- * 
+ *
- * @returns 
+ * @returns
  */
- export async function useWartermark() : Promise<boolean> {
+export async function useWatermark(): Promise<any> {
-    return await getBoolConfigValue(UseWartermarkConfigKey, true)
+    const value = await getConfigValue(UseWatermarkConfigKey);
+    if (!value) {
+        return {
+            isUse: true,
+        };
+    }
+    const jsonValue = JSON.parse(value);
+    // 将字符串转为bool
+    jsonValue.isUse = convertBool(jsonValue.isUse, true);
+    return jsonValue;
 }
 
 function convertBool(value: string, defaultValue: boolean) {
     if (!value) {
         return defaultValue;
     }
-    return value == "1" || value == "true";
+    return value == '1' || value == 'true';
-}
+}
+
+/**
+ * 获取LDAP登录配置
+ *
+ * @returns
+ */
+export async function getLdapEnabled(): Promise<any> {
+    const value = await openApi.getLdapEnabled();
+    return convertBool(value, false);
+}

mayfly_go_web/src/common/utils/date.ts

@@ -1,27 +1,27 @@
 export function dateFormat2(fmt: string, date: Date) {
     let ret;
     const opt = {
-        "y+": date.getFullYear().toString(),        // 年
+        'y+': date.getFullYear().toString(), // 年
-        "M+": (date.getMonth() + 1).toString(),     // 月
+        'M+': (date.getMonth() + 1).toString(), // 月
-        "d+": date.getDate().toString(),            // 日
+        'd+': date.getDate().toString(), // 日
-        "H+": date.getHours().toString(),           // 时
+        'H+': date.getHours().toString(), // 时
-        "m+": date.getMinutes().toString(),         // 分
+        'm+': date.getMinutes().toString(), // 分
-        "s+": date.getSeconds().toString()          // 秒
+        's+': date.getSeconds().toString(), // 秒
         // 有其他格式化字符需求可以继续添加，必须转化成字符串
     };
     for (const k in opt) {
-        ret = new RegExp("(" + k + ")").exec(fmt);
+        ret = new RegExp('(' + k + ')').exec(fmt);
         if (ret) {
-            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+            fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'));
         }
     }
     return fmt;
 }
 
 export function dateStrFormat(fmt: string, dateStr: string) {
-    return dateFormat2(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))
+    return dateFormat2('yyyy-MM-dd HH:mm:ss', new Date(dateStr));
-}
+}

mayfly_go_web/src/common/utils/export.ts

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

mayfly_go_web/src/common/utils/format.ts

@@ -1,7 +1,7 @@
 /**
  * 格式化字节单位
  * @param size byte size
- * @returns 
+ * @returns
  */
 export function formatByteSize(size: any) {
     const value = Number(size);
@@ -116,8 +116,7 @@ export function formatDate(date: Date, format: string) {
         '3': '三',
         '4': '四',
     };
-    if (/(W+)/.test(format))
+    if (/(W+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
-        format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
     if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
     for (let k in opt) {
         let r = new RegExp('(' + k + ')').exec(format);
@@ -192,4 +191,4 @@ export function formatAxis(param: any) {
     else if (hour < 19) return '傍晚好';
     else if (hour < 22) return '晚上好';
     else return '夜里好';
-}
+}

mayfly_go_web/src/common/utils/loading.ts

@@ -1,46 +1,42 @@
 import { nextTick } from 'vue';
-import loadingCss from "@/theme/loading.scss?inline"
+import '@/theme/loading.scss';
 
-// 定义方法
+/**
+ * 页面全局 Loading
+ * @method start 创建 loading
+ * @method done 移除 loading
+ */
 export const NextLoading = {
-    // 载入 css
-    setCss: () => {
-        let link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = loadingCss;
-        link.crossOrigin = 'anonymous';
-        document.getElementsByTagName('head')[0].appendChild(link);
-    },
     // 创建 loading
     start: () => {
-        const bodys: any = document.body;
+        const bodys: Element = document.body;
-        const div = document.createElement('div');
+        const div = <HTMLElement>document.createElement('div');
         div.setAttribute('class', 'loading-next');
         const htmls = `
 			<div class="loading-next-box">
-			<div class="loading-next-box-warp">
+				<div class="loading-next-box-warp">
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
-				<div class="loading-next-box-item"></div>
+					<div class="loading-next-box-item"></div>
+				</div>
 			</div>
-		</div>
 		`;
         div.innerHTML = htmls;
         bodys.insertBefore(div, bodys.childNodes[0]);
     },
     // 移除 loading
-    done: () => {
+    done: (time: number = 1000) => {
         nextTick(() => {
             setTimeout(() => {
-                const el = document.querySelector('.loading-next');
+                const el = <HTMLElement>document.querySelector('.loading-next');
-                el && el.parentNode?.removeChild(el);
+                el?.parentNode?.removeChild(el);
-            }, 1000);
+            }, time);
         });
     },
 };

mayfly_go_web/src/common/utils/mitt.ts

@@ -5,4 +5,4 @@ import mitt, { Emitter } from 'mitt';
 const emitter: Emitter<any> = mitt<any>();
 
 // 导出
-export default emitter;
+export default emitter;

mayfly_go_web/src/common/utils/setIconfont.ts

@@ -1,30 +1,28 @@
 // 字体图标 url
-const cssCdnUrlList: Array<string> = [
+const cssCdnUrlList: Array<string> = [];
-	
-];
 // 第三方 js url
 const jsCdnUrlList: Array<string> = [];
 
 // 动态批量设置字体图标
 export function setCssCdn() {
-	if (cssCdnUrlList.length <= 0) return false;
+    if (cssCdnUrlList.length <= 0) return false;
-	cssCdnUrlList.map((v) => {
+    cssCdnUrlList.map((v) => {
-		let link = document.createElement('link');
+        let link = document.createElement('link');
-		link.rel = 'stylesheet';
+        link.rel = 'stylesheet';
-		link.href = v;
+        link.href = v;
-		link.crossOrigin = 'anonymous';
+        link.crossOrigin = 'anonymous';
-		document.getElementsByTagName('head')[0].appendChild(link);
+        document.getElementsByTagName('head')[0].appendChild(link);
-	});
+    });
 }
 
 // 动态批量设置第三方js
 export function setJsCdn() {
-	if (jsCdnUrlList.length <= 0) return false;
+    if (jsCdnUrlList.length <= 0) return false;
-	jsCdnUrlList.map((v) => {
+    jsCdnUrlList.map((v) => {
-		let link = document.createElement('script');
+        let link = document.createElement('script');
-		link.src = v;
+        link.src = v;
-		document.body.appendChild(link);
+        document.body.appendChild(link);
-	});
+    });
 }
 
 /**
@@ -33,15 +31,15 @@ export function setJsCdn() {
  * @method jsCdn 动态批量设置第三方js
  */
 const setIntroduction = {
-	// 设置css
+    // 设置css
-	cssCdn: () => {
+    cssCdn: () => {
-		setCssCdn();
+        setCssCdn();
-	},
+    },
-	// 设置js
+    // 设置js
-	jsCdn: () => {
+    jsCdn: () => {
-		setJsCdn();
+        setJsCdn();
-	},
+    },
 };
 
 // 导出函数方法
-export default setIntroduction;
+export default setIntroduction;

mayfly_go_web/src/common/utils/storage.ts

@@ -1,17 +1,70 @@
+const TokenKey = 'token';
+const UserKey = 'user';
+const TagViewsKey = 'tagViews';
+
+// 获取请求token
+export function getToken(): string {
+    return getLocal(TokenKey);
+}
+
+// 保存用户访问token
+export function saveToken(token: string) {
+    setLocal(TokenKey, token);
+}
+
+// 获取登录用户基础信息
+export function getUser() {
+    return getLocal(UserKey);
+}
+
+// 保存用户信息
+export function saveUser(userinfo: any) {
+    setLocal(UserKey, userinfo);
+}
+
+export function saveThemeConfig(themeConfig: any) {
+    setLocal('themeConfig', themeConfig);
+}
+
+export function getThemeConfig() {
+    return getLocal('themeConfig');
+}
+
+// 清除用户相关的用户信息
+export function clearUser() {
+    removeLocal(TokenKey);
+    removeLocal(UserKey);
+}
+
+export function getTagViews() {
+    return getSession(TagViewsKey);
+}
+
+export function setTagViews(tagViews: Array<object>) {
+    setSession(TagViewsKey, tagViews);
+}
+
+export function removeTagViews() {
+    removeSession(TagViewsKey);
+}
+
 // 1. localStorage
 // 设置永久缓存
 export function setLocal(key: string, val: any) {
     window.localStorage.setItem(key, JSON.stringify(val));
 }
+
 // 获取永久缓存
 export function getLocal(key: string) {
     let json: any = window.localStorage.getItem(key);
     return JSON.parse(json);
 }
+
 // 移除永久缓存
 export function removeLocal(key: string) {
     window.localStorage.removeItem(key);
 }
+
 // 移除全部永久缓存
 export function clearLocal() {
     window.localStorage.clear();
@@ -22,35 +75,20 @@ export function clearLocal() {
 export function setSession(key: string, val: any) {
     window.sessionStorage.setItem(key, JSON.stringify(val));
 }
+
 // 获取临时缓存
 export function getSession(key: string) {
     let json: any = window.sessionStorage.getItem(key);
     return JSON.parse(json);
 }
+
 // 移除临时缓存
 export function removeSession(key: string) {
     window.sessionStorage.removeItem(key);
 }
+
 // 移除全部临时缓存
 export function clearSession() {
+    clearUser();
     window.sessionStorage.clear();
 }
-
-
-
-export function getUserInfo4Session() {
-    return getSession("userInfo")
-}
-
-export function setUserInfo2Session(userinfo: any) {
-    setSession("userInfo", userinfo)
-}
-
-// 获取是否开启水印
-export function getUseWatermark4Session() {
-    return getSession("useWatermark")
-}
-
-export function setUseWatermark2Session(useWatermark: boolean) {
-    setSession("useWatermark", useWatermark)
-}

mayfly_go_web/src/common/utils/string.ts

@@ -3,7 +3,7 @@
  * 解析后为 hahahahh_1
  * @param template 模板字符串
  * @param param   参数占位符
- * @returns 
+ * @returns
  */
 export function templateResolve(template: string, param: any) {
     return template.replace(/\{\w+\}/g, (word) => {
@@ -12,7 +12,7 @@ export function templateResolve(template: string, param: any) {
         if (value != null || value != undefined) {
             return value;
         }
-        return "";
+        return '';
     });
 }
 
@@ -21,11 +21,34 @@ export function letterAvatar(name: string, size = 60, color = '') {
     name = name || '';
     size = size || 60;
     var colours = [
-        "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
+            '#1abc9c',
-        "#f1c40f", "#e67e22", "#e74c3c", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
+            '#2ecc71',
-    ],
+            '#3498db',
+            '#9b59b6',
+            '#34495e',
+            '#16a085',
+            '#27ae60',
+            '#2980b9',
+            '#8e44ad',
+            '#2c3e50',
+            '#f1c40f',
+            '#e67e22',
+            '#e74c3c',
+            '#00bcd4',
+            '#95a5a6',
+            '#f39c12',
+            '#d35400',
+            '#c0392b',
+            '#bdc3c7',
+            '#7f8c8d',
+        ],
         nameSplit = String(name).split(' '),
-        initials, charIndex, colourIndex, canvas, context, dataURI;
+        initials,
+        charIndex,
+        colourIndex,
+        canvas,
+        context,
+        dataURI;
 
     if (nameSplit.length == 1) {
         initials = nameSplit[0] ? nameSplit[0].charAt(0) : '?';
@@ -33,23 +56,76 @@ export function letterAvatar(name: string, size = 60, color = '') {
         initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
     }
     if (window.devicePixelRatio) {
-        size = (size * window.devicePixelRatio);
+        size = size * window.devicePixelRatio;
     }
-    initials = initials.toLocaleUpperCase()
+    initials = initials.toLocaleUpperCase();
     charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64;
     colourIndex = charIndex % 20;
     canvas = document.createElement('canvas');
     canvas.width = size;
     canvas.height = size;
-    context = canvas.getContext("2d") as any;
+    context = canvas.getContext('2d') as any;
 
     context.fillStyle = color ? color : colours[colourIndex - 1];
     context.fillRect(0, 0, canvas.width, canvas.height);
     context.font = Math.round(canvas.width / 2) + "px 'Microsoft Yahei'";
-    context.textAlign = "center";
+    context.textAlign = 'center';
-    context.fillStyle = "#FFF";
+    context.fillStyle = '#FFF';
     context.fillText(initials, size / 2, size / 1.5);
     dataURI = canvas.toDataURL();
     canvas = null;
     return dataURI;
-};
+}
+
+/**
+ * 计算文本所占用的宽度（px） -> 该种方式较为准确
+ * 使用span标签包裹内容，然后计算span的宽度 width： px
+ * @param str
+ */
+export function getTextWidth(str: string) {
+    let width = 0;
+    let html = document.createElement('span');
+    html.innerText = str;
+    html.className = 'getTextWidth';
+    document?.querySelector('body')?.appendChild(html);
+    width = (document?.querySelector('.getTextWidth') as any).offsetWidth;
+    document?.querySelector('.getTextWidth')?.remove();
+    return width;
+}
+
+/**
+ * 获取内容所需要占用的宽度
+ */
+export function getContentWidth(content: any): number {
+    if (!content) {
+        return 50;
+    }
+    // 以下分配的单位长度可根据实际需求进行调整
+    let flexWidth = 0;
+    for (const char of content) {
+        if (flexWidth > 500) {
+            break;
+        }
+        if ((char >= '0' && char <= '9') || (char >= 'a' && char <= 'z')) {
+            // 小写字母、数字字符
+            flexWidth += 9.3;
+            continue;
+        }
+        if (char >= 'A' && char <= 'Z') {
+            flexWidth += 9;
+            continue;
+        }
+        if (char >= '\u4e00' && char <= '\u9fa5') {
+            // 如果是中文字符，为字符分配16个单位宽度
+            flexWidth += 20;
+        } else {
+            // 其他种类字符
+            flexWidth += 8;
+        }
+    }
+    // if (flexWidth > 450) {
+    //     // 设置最大宽度
+    //     flexWidth = 450;
+    // }
+    return flexWidth;
+}

mayfly_go_web/src/common/utils/svgIcons.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import * as svg from '@element-plus/icons-vue';
-import iconfontJson from '@/assets/iconfont/iconfont.json'
+import iconfontJson from '@/assets/iconfont/iconfont.json';
 import SvgIcon from '@/components/svgIcon/index.vue';
 
 /**
@@ -52,21 +52,21 @@ const getLocalAliIconfont = () => {
             resolve(iconfontJson.glyphs.map((x: any) => prefix + x.font_class));
         });
     });
-}
+};
 
 // 初始化获取 css 样式，获取 element plus 自带图标
 const elementPlusIconfont = () => {
     return new Promise((resolve, reject) => {
-		nextTick(() => {
+        nextTick(() => {
-			const icons = svg as any;
+            const icons = svg as any;
-			const sheetsIconList = [];
+            const sheetsIconList = [];
-			for (const i in icons) {
+            for (const i in icons) {
-				sheetsIconList.push(`${icons[i].name}`);
+                sheetsIconList.push(`${icons[i].name}`);
-			}
+            }
-			if (sheetsIconList.length > 0) resolve(sheetsIconList);
+            if (sheetsIconList.length > 0) resolve(sheetsIconList);
-			else reject('未获取到值，请刷新重试');
+            else reject('未获取到值，请刷新重试');
-		});
+        });
-	});
+    });
 };
 
 // 初始化获取 css 样式，这里使用 fontawesome 的图标
@@ -103,7 +103,7 @@ const awesomeIconfont = () => {
 // 定义导出方法集合
 const initIconfont = {
     ali: () => {
-    	return getLocalAliIconfont();
+        return getLocalAliIconfont();
     },
     ele: () => {
         return elementPlusIconfont();

mayfly_go_web/src/common/utils/toolsValidate.ts

@@ -163,8 +163,7 @@ export function verifyPasswordStrength(val: string) {
     // 中：字母+数字，字母+特殊字符，数字+特殊字符
     if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中';
     // 强：字母+数字+特殊字符
-    if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+    if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '强';
-        v = '强';
     // 返回结果
     return v;
 }
@@ -172,11 +171,7 @@ export function verifyPasswordStrength(val: string) {
 // IP地址
 export function verifyIPAddress(val: string) {
     // false: IP地址不正确
-    if (
+    if (!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(val))
-        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-            val
-        )
-    )
         return false;
     // true: IP地址正确
     else return true;

mayfly_go_web/src/common/utils/url.ts

@@ -0,0 +1,13 @@
+const mode = import.meta.env.VITE_ROUTER_MODE;
+
+/**
+ * @description 获取不同路由模式所对应的 url
+ * @returns {String}
+ */
+export function getNowUrl() {
+    const url = {
+        hash: location.hash.substring(1),
+        history: location.pathname + location.search,
+    };
+    return url[mode];
+}

mayfly_go_web/src/common/utils/wartermark.ts

@@ -1,65 +0,0 @@
-import { getUseWatermark4Session, getUserInfo4Session } from '@/common/utils/storage.ts';
-import { dateFormat2 } from '@/common/utils/date.ts'
-
-// 页面添加水印效果
-const setWatermark = (str: any) => {
-    const id = '1.23452384164.123412416';
-    if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
-    const can = document.createElement('canvas');
-    can.width = 400;
-    can.height = 250;
-    const cans: any = can.getContext('2d');
-    cans.rotate((-20 * Math.PI) / 180);
-    cans.font = '14px Vedana';
-    cans.fillStyle = 'rgba(200, 200, 200, 0.35)';
-    cans.textAlign = 'left';
-    cans.textBaseline = 'Middle';
-    // cans.fillText('mayfly go', can.width / 4, can.height )
-    cans.fillText(str, can.width / 8, can.height / 2);
-
-    const div = document.createElement('div');
-    div.id = id;
-    div.style.pointerEvents = 'none';
-    div.style.top = '30px';
-    div.style.left = '0px';
-    div.style.position = 'fixed';
-    div.style.zIndex = '10000000';
-    div.style.width = document.documentElement.clientWidth + 'px';
-    div.style.height = document.documentElement.clientHeight + 'px';
-    div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;
-    document.body.appendChild(div);
-    return id;
-};
-
-function set(str: any) {
-    let id = setWatermark(str);
-    if (document.getElementById(id) === null) id = setWatermark(str);
-}
-
-function del() {
-    let id = '1.23452384164.123412416';
-    if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
-}
-
-const watermark = {
-    use: () => {
-        setTimeout(() => {
-            const userinfo = getUserInfo4Session()
-            if (userinfo && getUseWatermark4Session()) {
-                set(`${userinfo.username} ${dateFormat2('yyyy-MM-dd HH:mm:ss', new Date())}`)
-            } else {
-                del();
-            }
-        }, 1500)
-    },
-    // 设置水印
-    set: (str: any) => {
-        set(str)
-    },
-    // 删除水印
-    del: () => {
-        del();
-    },
-};
-
-export default watermark;

mayfly_go_web/src/components/auth/auth.ts

@@ -0,0 +1,25 @@
+import { useUserInfo } from '@/store/userInfo';
+
+/**
+ * 判断当前用户是否拥有指定权限
+ * @param code 权限code
+ * @returns
+ */
+export function hasPerm(code: string) {
+    return useUserInfo().userInfo.permissions.some((v: any) => v === code);
+}
+
+/**
+ * 判断用户是否拥有权限对象里对应的code
+ * @param perms { save: "xxx:save"}
+ * @returns {"xxx:save": true}  key->permission code
+ */
+export function hasPerms(permCodes: any[]) {
+    const res = {};
+    for (let permCode of permCodes) {
+        if (hasPerm(permCode)) {
+            res[permCode] = true;
+        }
+    }
+    return res;
+}

mayfly_go_web/src/components/contextmenu/index.vue

@@ -1,12 +1,24 @@
 <template>
     <transition name="el-zoom-in-center">
-        <div aria-hidden="true" class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu" role="tooltip"
+        <div
-            data-popper-placement="bottom" :style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`" :key="Math.random()"
+            aria-hidden="true"
-            v-show="state.isShow">
+            class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
+            role="tooltip"
+            data-popper-placement="bottom"
+            :style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
+            :key="Math.random()"
+            v-show="state.isShow"
+        >
             <ul class="el-dropdown-menu">
                 <template v-for="(v, k) in state.dropdownList">
-                    <li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" :key="k" v-if="!v.affix"
+                    <li
-                        @click="onCurrentContextmenuClick(v.contextMenuClickId)">
+                        class="el-dropdown-menu__item"
+                        aria-disabled="false"
+                        tabindex="-1"
+                        :key="k"
+                        v-if="!v.affix"
+                        @click="onCurrentContextmenuClick(v.contextMenuClickId)"
+                    >
                         <SvgIcon :name="v.icon" />
                         <span>{{ v.txt }}</span>
                     </li>
@@ -43,9 +55,7 @@ const emit = defineEmits(['currentContextmenuClick']);
 // 定义变量内容
 const state = reactive({
     isShow: false,
-    dropdownList: [
+    dropdownList: [{ contextMenuClickId: 0, txt: '刷新', affix: false, icon: 'RefreshRight' }],
-        { contextMenuClickId: 0, txt: '刷新', affix: false, icon: 'RefreshRight' },
-    ],
     item: {} as any,
     arrowLeft: 10,
 });
@@ -100,7 +110,7 @@ watch(
 watch(
     () => props.items,
     (x: any) => {
-        state.dropdownList = x
+        state.dropdownList = x;
     },
     {
         deep: true,
@@ -129,4 +139,4 @@ defineExpose({
         }
     }
 }
-</style>
+</style>

mayfly_go_web/src/components/enumtag/EnumTag.vue

@@ -0,0 +1,60 @@
+<template>
+    <el-tag v-bind="$attrs" :type="type" :color="color" effect="plain">{{ enumLabel }}</el-tag>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, watch, reactive, onMounted } from 'vue';
+import EnumValue from '@/common/Enum';
+
+const props = defineProps({
+    enums: {
+        type: Object, // 需要为EnumValue类型
+        required: true,
+    },
+    value: {
+        type: [Object, String, Number],
+        required: true,
+    },
+});
+
+const defaultType = 'primary';
+
+const state = reactive({
+    type: defaultType,
+    color: '',
+    enumLabel: '',
+});
+
+const { type, color, enumLabel } = toRefs(state);
+
+// 监听该值是否改变，改变则需要将其枚举值与标签进行调整
+watch(
+    () => props.value,
+    (newValue: any) => {
+        convert(newValue);
+    }
+);
+
+onMounted(() => {
+    convert(props.value);
+});
+
+const convert = (value: any) => {
+    const enumValue = EnumValue.getEnumByValue(Object.values(props.enums as any) as any, value) as any;
+    if (!enumValue) {
+        state.enumLabel = '-';
+        state.type = 'danger';
+        state.color = '';
+        return;
+    }
+
+    state.enumLabel = enumValue?.label || '';
+    if (enumValue.tag) {
+        state.color = enumValue.tag.color;
+        state.type = enumValue.tag.type;
+    } else {
+        state.type = defaultType;
+    }
+};
+</script>
+<style scoped lang="scss"></style>

mayfly_go_web/src/components/iconSelector/index.vue

@@ -1,50 +1,47 @@
 <template>
-	<div class="icon-selector w100 h100">
+    <div class="icon-selector w100 h100">
-		<el-input
+        <el-input
-			v-model="state.fontIconSearch"
+            v-model="state.fontIconSearch"
-			:placeholder="state.fontIconPlaceholder"
+            :placeholder="state.fontIconPlaceholder"
-			:clearable="clearable"
+            :clearable="clearable"
-			:disabled="disabled"
+            :disabled="disabled"
-			:size="size"
+            :size="size"
-			ref="inputWidthRef"
+            ref="inputWidthRef"
-			@clear="onClearFontIcon"
+            @clear="onClearFontIcon"
-			@focus="onIconFocus"
+            @focus="onIconFocus"
-			@blur="onIconBlur"
+            @blur="onIconBlur"
-		>
+        >
-			<template #prepend>
+            <template #prepend>
-				<SvgIcon
+                <SvgIcon :name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="font14" />
-					:name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix"
+            </template>
-					class="font14"
+        </el-input>
-				/>
+        <el-popover
-			</template>
+            placement="bottom"
-		</el-input>
+            :width="state.fontIconWidth"
-		<el-popover
+            transition="el-zoom-in-top"
-			placement="bottom"
+            popper-class="icon-selector-popper"
-			:width="state.fontIconWidth"
+            trigger="click"
-			transition="el-zoom-in-top"
+            :virtual-ref="inputWidthRef"
-			popper-class="icon-selector-popper"
+            virtual-triggering
-			trigger="click"
+        >
-			:virtual-ref="inputWidthRef"
+            <template #default>
-			virtual-triggering
+                <div class="icon-selector-warp">
-		>
+                    <div class="icon-selector-warp-title">{{ title }}</div>
-			<template #default>
+                    <el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
-				<div class="icon-selector-warp">
+                        <el-tab-pane lazy label="ele" name="ele">
-					<div class="icon-selector-warp-title">{{ title }}</div>
+                            <IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
-					<el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
+                        </el-tab-pane>
-						<el-tab-pane lazy label="ele" name="ele">
-							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
-						</el-tab-pane>
                         <el-tab-pane lazy label="ali" name="ali">
-							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
+                            <IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
-						</el-tab-pane>
+                        </el-tab-pane>
-						<!-- <el-tab-pane lazy label="awe" name="awe">
+                        <!-- <el-tab-pane lazy label="awe" name="awe">
 							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
 						</el-tab-pane> -->
-					</el-tabs>
+                    </el-tabs>
-				</div>
+                </div>
-			</template>
+            </template>
-		</el-popover>
+        </el-popover>
-	</div>
+    </div>
 </template>
 
 <script setup lang="ts" name="iconSelector">
@@ -55,45 +52,45 @@ import '@/theme/iconSelector.scss';
 
 // 定义父组件传过来的值
 const props = defineProps({
-	// 输入框前置内容
+    // 输入框前置内容
-	prepend: {
+    prepend: {
-		type: String,
+        type: String,
-		default: () => 'Pointer',
+        default: () => 'Pointer',
-	},
+    },
-	// 输入框占位文本
+    // 输入框占位文本
-	placeholder: {
+    placeholder: {
-		type: String,
+        type: String,
-		default: () => '请输入内容搜索图标或者选择图标',
+        default: () => '请输入内容搜索图标或者选择图标',
-	},
+    },
-	// 输入框占位文本
+    // 输入框占位文本
-	size: {
+    size: {
-		type: String,
+        type: String,
-		default: () => 'default',
+        default: () => 'default',
-	},
+    },
-	// 弹窗标题
+    // 弹窗标题
-	title: {
+    title: {
-		type: String,
+        type: String,
-		default: () => '请选择图标',
+        default: () => '请选择图标',
-	},
+    },
-	// 禁用
+    // 禁用
-	disabled: {
+    disabled: {
-		type: Boolean,
+        type: Boolean,
-		default: () => false,
+        default: () => false,
-	},
+    },
-	// 是否可清空
+    // 是否可清空
-	clearable: {
+    clearable: {
-		type: Boolean,
+        type: Boolean,
-		default: () => true,
+        default: () => true,
-	},
+    },
-	// 自定义空状态描述文字
+    // 自定义空状态描述文字
-	emptyDescription: {
+    emptyDescription: {
-		type: String,
+        type: String,
-		default: () => '无相关图标',
+        default: () => '无相关图标',
-	},
+    },
-	// 双向绑定值，默认为 modelValue，
+    // 双向绑定值，默认为 modelValue，
-	// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
+    // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
-	// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
+    // 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
-	modelValue: String,
+    modelValue: String,
 });
 
 // 定义子组件向父组件传值/事件
@@ -105,138 +102,138 @@ const IconList = defineAsyncComponent(() => import('@/components/iconSelector/li
 // 定义变量内容
 const inputWidthRef = ref();
 const state = reactive({
-	fontIconPrefix: '',
+    fontIconPrefix: '',
-	fontIconWidth: 0,
+    fontIconWidth: 0,
-	fontIconSearch: '',
+    fontIconSearch: '',
-	fontIconPlaceholder: '',
+    fontIconPlaceholder: '',
-	fontIconTabActive: 'ele',
+    fontIconTabActive: 'ele',
-	fontIconList: {
+    fontIconList: {
-		ali: [],
+        ali: [],
-		ele: [],
+        ele: [],
-		awe: [],
+        awe: [],
-	},
+    },
 });
 
 // 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
 const onIconFocus = () => {
-	if (!props.modelValue) return false;
+    if (!props.modelValue) return false;
-	state.fontIconSearch = '';
+    state.fontIconSearch = '';
-	state.fontIconPlaceholder = props.modelValue;
+    state.fontIconPlaceholder = props.modelValue;
 };
 // 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
 const onIconBlur = () => {
-	const list = fontIconTabNameList();
+    const list = fontIconTabNameList();
-	setTimeout(() => {
+    setTimeout(() => {
-		const icon = list.filter((icon: string) => icon === state.fontIconSearch);
+        const icon = list.filter((icon: string) => icon === state.fontIconSearch);
-		if (icon.length <= 0) state.fontIconSearch = '';
+        if (icon.length <= 0) state.fontIconSearch = '';
-	}, 300);
+    }, 300);
 };
 // 图标搜索及图标数据显示
 const fontIconSheetsFilterList = computed(() => {
-	const list = fontIconTabNameList();
+    const list = fontIconTabNameList();
-	if (!state.fontIconSearch) return list;
+    if (!state.fontIconSearch) return list;
-	let search = state.fontIconSearch.trim().toLowerCase();
+    let search = state.fontIconSearch.trim().toLowerCase();
-	return list.filter((item: string) => {
+    return list.filter((item: string) => {
-		if (item.toLowerCase().indexOf(search) !== -1) return item;
+        if (item.toLowerCase().indexOf(search) !== -1) return item;
-	});
+    });
 });
 // 根据 tab name 类型设置图标
 const fontIconTabNameList = () => {
-	let iconList: any = [];
+    let iconList: any = [];
-	if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
+    if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
-	else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
+    else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
-	else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
+    else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
-	return iconList;
+    return iconList;
 };
 // 处理 icon 双向绑定数值回显
 const initModeValueEcho = () => {
-	if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
+    if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
-	(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
+    (<string | undefined>state.fontIconPlaceholder) = props.modelValue;
-	(<string | undefined>state.fontIconPrefix) = props.modelValue;
+    (<string | undefined>state.fontIconPrefix) = props.modelValue;
 };
 // 处理 icon 类型，用于回显时，tab 高亮与初始化数据
 const initFontIconName = () => {
-	let name = 'ele';
+    let name = 'ele';
-	if (props.modelValue!.indexOf('iconfont') > -1) {
+    if (props.modelValue!.indexOf('iconfont') > -1) {
         name = 'ali';
     } else {
         name = 'ele';
     }
-	// else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
+    // else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
-	// else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
+    // else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
-	// 初始化 tab 高亮回显
+    // 初始化 tab 高亮回显
-	state.fontIconTabActive = name;
+    state.fontIconTabActive = name;
-	return name;
+    return name;
 };
 // 初始化数据
 const initFontIconData = async (name: string) => {
-	if (name === 'ali') {
+    if (name === 'ali') {
-		// 阿里字体图标使用 `iconfont xxx`
+        // 阿里字体图标使用 `iconfont xxx`
-		if (state.fontIconList.ali.length > 0) return;
+        if (state.fontIconList.ali.length > 0) return;
-		const res: any = await initIconfont.ali();
+        const res: any = await initIconfont.ali();
         state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`);
-	} else if (name === 'ele') {
+    } else if (name === 'ele') {
-		// element plus 图标
+        // element plus 图标
-		if (state.fontIconList.ele.length > 0) return;
+        if (state.fontIconList.ele.length > 0) return;
-		await initIconfont.ele().then((res: any) => {
+        await initIconfont.ele().then((res: any) => {
-			state.fontIconList.ele = res;
+            state.fontIconList.ele = res;
-		});
+        });
-	} else if (name === 'awe') {
+    } else if (name === 'awe') {
-		// fontawesome字体图标使用 `fa xxx`
+        // fontawesome字体图标使用 `fa xxx`
-		// if (state.fontIconList.awe.length > 0) return;
+        // if (state.fontIconList.awe.length > 0) return;
-		// await initIconfont.awe().then((res: any) => {
+        // await initIconfont.awe().then((res: any) => {
-		// 	state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
+        // 	state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
-		// });
+        // });
-	}
+    }
-	// 初始化 input 的 placeholder
+    // 初始化 input 的 placeholder
-	// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
+    // 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
-	state.fontIconPlaceholder = props.placeholder;
+    state.fontIconPlaceholder = props.placeholder;
-	// 初始化双向绑定回显
+    // 初始化双向绑定回显
-	initModeValueEcho();
+    initModeValueEcho();
 };
 // 图标点击切换
 const onIconClick = (pane: TabsPaneContext) => {
-	initFontIconData(pane.paneName as string);
+    initFontIconData(pane.paneName as string);
-	inputWidthRef.value.focus();
+    inputWidthRef.value.focus();
 };
 // 获取当前点击的 icon 图标
 const onColClick = (v: string) => {
-	state.fontIconPlaceholder = v;
+    state.fontIconPlaceholder = v;
-	state.fontIconPrefix = v;
+    state.fontIconPrefix = v;
-	emit('get', state.fontIconPrefix);
+    emit('get', state.fontIconPrefix);
-	emit('update:modelValue', state.fontIconPrefix);
+    emit('update:modelValue', state.fontIconPrefix);
-	inputWidthRef.value.focus();
+    inputWidthRef.value.focus();
 };
 // 清空当前点击的 icon 图标
 const onClearFontIcon = () => {
-	state.fontIconPrefix = '';
+    state.fontIconPrefix = '';
-	emit('clear', state.fontIconPrefix);
+    emit('clear', state.fontIconPrefix);
-	emit('update:modelValue', state.fontIconPrefix);
+    emit('update:modelValue', state.fontIconPrefix);
 };
 // 获取 input 的宽度
 const getInputWidth = () => {
-	nextTick(() => {
+    nextTick(() => {
-		state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
+        state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
-	});
+    });
 };
 // 监听页面宽度改变
 const initResize = () => {
-	window.addEventListener('resize', () => {
+    window.addEventListener('resize', () => {
-		getInputWidth();
+        getInputWidth();
-	});
+    });
 };
 // 页面加载时
 onMounted(() => {
-	initFontIconData(initFontIconName());
+    initFontIconData(initFontIconName());
-	initResize();
+    initResize();
-	getInputWidth();
+    getInputWidth();
 });
 // 监听双向绑定 modelValue 的变化
 watch(
-	() => props.modelValue,
+    () => props.modelValue,
-	() => {
+    () => {
-		initModeValueEcho();
+        initModeValueEcho();
-		initFontIconName();
+        initFontIconName();
-	}
+    }
 );
-</script>
+</script>

mayfly_go_web/src/components/iconSelector/list.vue

@@ -1,36 +1,36 @@
 <template>
-	<div class="icon-selector-warp-row">
+    <div class="icon-selector-warp-row">
-		<el-scrollbar ref="selectorScrollbarRef">
+        <el-scrollbar ref="selectorScrollbarRef">
-			<el-row :gutter="10" v-if="props.list.length > 0">
+            <el-row :gutter="10" v-if="props.list.length > 0">
-				<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" v-for="(v, k) in list" :key="k" @click="onColClick(v)">
+                <el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" v-for="(v, k) in list" :key="k" @click="onColClick(v)">
-					<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': prefix === v }">
+                    <div class="icon-selector-warp-item" :class="{ 'icon-selector-active': prefix === v }">
-						<SvgIcon :name="v" />
+                        <SvgIcon :name="v" />
-					</div>
+                    </div>
-				</el-col>
+                </el-col>
-			</el-row>
+            </el-row>
-			<el-empty :image-size="100" v-if="list.length <= 0" :description="empty"></el-empty>
+            <el-empty :image-size="100" v-if="list.length <= 0" :description="empty"></el-empty>
-		</el-scrollbar>
+        </el-scrollbar>
-	</div>
+    </div>
 </template>
 
 <script setup lang="ts" name="iconSelectorList">
 // 定义父组件传过来的值
 const props = defineProps({
-	// 图标列表数据
+    // 图标列表数据
-	list: {
+    list: {
-		type: Array,
+        type: Array,
-		default: () => [],
+        default: () => [],
-	},
+    },
-	// 自定义空状态描述文字
+    // 自定义空状态描述文字
-	empty: {
+    empty: {
-		type: String,
+        type: String,
-		default: () => '无相关图标',
+        default: () => '无相关图标',
-	},
+    },
-	// 高亮当前选中图标
+    // 高亮当前选中图标
-	prefix: {
+    prefix: {
-		type: String,
+        type: String,
-		default: () => '',
+        default: () => '',
-	},
+    },
 });
 
 // 定义子组件向父组件传值/事件
@@ -38,47 +38,47 @@ const emit = defineEmits(['get-icon']);
 
 // 当前 icon 图标点击时
 const onColClick = (v: unknown | string) => {
-	emit('get-icon', v);
+    emit('get-icon', v);
 };
 </script>
 
 <style scoped lang="scss">
 .icon-selector-warp-row {
-	height: 230px;
+    height: 230px;
-	overflow: hidden;
+    overflow: hidden;
-	.el-row {
+    .el-row {
-		padding: 15px;
+        padding: 15px;
-	}
+    }
-	.el-scrollbar__bar.is-horizontal {
+    .el-scrollbar__bar.is-horizontal {
-		display: none;
+        display: none;
-	}
+    }
-	.icon-selector-warp-item {
+    .icon-selector-warp-item {
-		display: flex;
+        display: flex;
-		justify-content: center;
+        justify-content: center;
-		align-items: center;
+        align-items: center;
-		border: 1px solid var(--el-border-color);
+        border: 1px solid var(--el-border-color);
-		border-radius: 5px;
+        border-radius: 5px;
-		margin-bottom: 10px;
+        margin-bottom: 10px;
-		height: 30px;
+        height: 30px;
-		i {
+        i {
-			font-size: 20px;
+            font-size: 20px;
-			color: var(--el-text-color-regular);
+            color: var(--el-text-color-regular);
-		}
+        }
-		&:hover {
+        &:hover {
-			cursor: pointer;
+            cursor: pointer;
-			background-color: var(--el-color-primary-light-9);
+            background-color: var(--el-color-primary-light-9);
-			border: 1px solid var(--el-color-primary-light-5);
+            border: 1px solid var(--el-color-primary-light-5);
-			i {
+            i {
-				color: var(--el-color-primary);
+                color: var(--el-color-primary);
-			}
+            }
-		}
+        }
-	}
+    }
-	.icon-selector-active {
+    .icon-selector-active {
-		background-color: var(--el-color-primary-light-9);
+        background-color: var(--el-color-primary-light-9);
-		border: 1px solid var(--el-color-primary-light-5);
+        border: 1px solid var(--el-color-primary-light-5);
-		i {
+        i {
-			color: var(--el-color-primary);
+            color: var(--el-color-primary);
-		}
+        }
-	}
+    }
 }
-</style>
+</style>

mayfly_go_web/src/components/monaco/MonacoEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="monaco-editor" style="border: 1px solid #ccc;">
+    <div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5)">
         <div class="monaco-editor-content" ref="monacoTextarea" :style="{ height: height }"></div>
         <el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage">
             <el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
@@ -9,10 +9,32 @@
 
 <script lang="ts" setup>
 import { ref, watch, toRefs, reactive, onMounted, onBeforeUnmount } from 'vue';
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import * as monaco from 'monaco-editor';
+// 相关语言
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/dockerfile/dockerfile.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/css/css.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/java/java.contribution.js';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js';
+import 'monaco-editor/esm/vs/language/json/monaco.contribution';
+// 右键菜单
+import 'monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js';
+import 'monaco-editor/esm/vs/editor/contrib/caretOperations/browser/caretOperations.js';
+import 'monaco-editor/esm/vs/editor/contrib/clipboard//browser/clipboard.js';
+import 'monaco-editor/esm/vs/editor/contrib/find/browser/findController.js';
+import 'monaco-editor/esm/vs/editor/contrib/format//browser/formatActions.js';
+// 提示
+import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js';
+import 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestInlineCompletions.js';
+
 import { editor, languages } from 'monaco-editor';
-import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 // 主题仓库 https://github.com/brijeshb42/monaco-themes
 // 主题例子 https://editor.bitwiser.in/
 // import Monokai from 'monaco-themes/themes/Monokai.json'
@@ -21,10 +43,15 @@ import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 // 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 SolarizedLight from 'monaco-themes/themes/Solarized-light.json';
 import { language as shellLan } from 'monaco-editor/esm/vs/basic-languages/shell/shell.js';
 import { ElOption, ElSelect } from 'element-plus';
 
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+
 const props = defineProps({
     modelValue: {
         type: String,
@@ -49,10 +76,10 @@ const props = defineProps({
         type: Object,
         default: null,
     },
-})
+});
 
 //定义事件
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue']);
 
 const languageArr = [
     {
@@ -109,11 +136,11 @@ const options = {
     language: 'shell',
     theme: 'SolarizedLight',
     automaticLayout: true, //自适应宽高布局
-    foldingStrategy: 'indentation',//代码可分小段折叠
+    foldingStrategy: 'indentation', //代码可分小段折叠
     roundedSelection: false, // 禁用选择文本背景的圆角
     matchBrackets: 'near',
     linkedEditing: true,
-    cursorBlinking: 'smooth',// 光标闪烁样式
+    cursorBlinking: 'smooth', // 光标闪烁样式
     mouseWheelZoom: true, // 在按住Ctrl键的同时使用鼠标滚轮时，在编辑器中缩放字体
     overviewRulerBorder: false, // 不要滚动条的边框
     tabSize: 4, // tab 缩进长度
@@ -125,15 +152,28 @@ const options = {
     minimap: {
         enabled: false, // 不要小地图
     },
-}
+};
+
+const monacoTextarea: any = ref();
+
+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 state = reactive({
+    editorHeight: '500px',
     languageMode: 'shell',
-})
+});
 
-const {
+const { languageMode } = toRefs(state);
-    languageMode,
-} = toRefs(state)
 
 onMounted(() => {
     state.languageMode = props.language;
@@ -147,124 +187,125 @@ onBeforeUnmount(() => {
         monacoEditorIns.dispose();
     }
     if (completionItemProvider) {
+        console.log('unmount=> dispose completion item provider');
         completionItemProvider.dispose();
     }
-})
+});
 
-watch(() => props.modelValue, (newValue: any) => {
+watch(
-    if (!monacoEditorIns.hasTextFocus()) {
+    () => props.modelValue,
-        state.languageMode = props.language;
+    (newValue: any) => {
-        monacoEditorIns?.setValue(newValue);
+        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();
     }
-};
+);
+
+watch(
+    () => props.language,
+    (newValue: any) => {
+        changeLanguage(newValue);
+    }
+);
+
+// 监听 themeConfig editorTheme配置文件的变化
+watch(
+    () => themeConfig.value.editorTheme,
+    (val) => {
+        console.log('monaco editor theme change: ', val);
+        monaco?.editor?.setTheme(val);
+    }
+);
 
 const initMonacoEditorIns = () => {
-    console.log('初始化monaco编辑器')
+    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 = themeConfig.value.editorTheme;
-    options.theme = JSON.parse(localStorage.getItem('themeConfig') as string).editorTheme || 'vs';
     monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options as any));
 
     // 监听内容改变,双向绑定
     monacoEditorIns.onDidChangeModelContent(() => {
         emit('update:modelValue', monacoEditorIns.getModel()?.getValue());
-    })
+    });
-
-    // 动态设置主题
-    // monaco.editor.setTheme('hc-black');
 };
 
 const changeLanguage = (value: any) => {
     console.log('change lan');
     // 获取当前的文档模型
-    let oldModel = monacoEditorIns.getModel()
+    let oldModel = monacoEditorIns.getModel();
     if (!oldModel) {
         return;
     }
     // 创建一个新的文档模型
-    let newModel = monaco.editor.createModel(oldModel.getValue(), value)
+    let newModel = monaco.editor.createModel(oldModel.getValue(), value);
     // 设置成新的
-    monacoEditorIns.setModel(newModel)
+    monacoEditorIns.setModel(newModel);
     // 销毁旧的模型
     if (oldModel) {
-        oldModel.dispose()
+        oldModel.dispose();
     }
 
     registerCompletionItemProvider();
-}
+};
 
 const setEditorValue = (value: any) => {
-    monacoEditorIns.getModel()?.setValue(value)
+    monacoEditorIns.getModel()?.setValue(value);
-}
+};
 
 /**
  * 注册联想补全提示
  */
 const registerCompletionItemProvider = () => {
     if (completionItemProvider) {
+        console.log('exist competion item provider, dispose now');
         completionItemProvider.dispose();
     }
     if (state.languageMode == 'shell') {
-        registeShell()
+        registeShell();
     }
-}
+};
 
 const registeShell = () => {
     completionItemProvider = monaco.languages.registerCompletionItemProvider('shell', {
         provideCompletionItems: async () => {
-            let suggestions: languages.CompletionItem[] = []
+            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
+                suggestions: suggestions,
             };
-        }
+        },
-    })
+    });
 };
 
 const format = () => {
     /*
     触发自动格式化;
    */
-    monacoEditorIns.trigger('', 'editor.action.formatDocument', '')
+    monacoEditorIns.trigger('', 'editor.action.formatDocument', '');
-}
+};
 
-defineExpose({ format })
+const getEditor = () => {
+    return monacoEditorIns;
+};
 
+defineExpose({ getEditor, format });
 </script>
 
 <style lang="scss">

mayfly_go_web/src/components/monaco/completionItemProvider.ts

@@ -0,0 +1,25 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+/**
+ * key: language, value: CompletionItemProvider
+ */
+const completionItemProviders: Map<string, any> = new Map();
+
+export function registerCompletionItemProvider(language: string, completionItemProvider: any, replace: boolean = true) {
+    const exist = completionItemProviders.get(language);
+    if (exist) {
+        if (!replace) {
+            return;
+        }
+        exist.dispose();
+    }
+    completionItemProviders.set(language, monaco.languages.registerCompletionItemProvider(language, completionItemProvider));
+}
+
+export function dispposeCompletionItemProvider(language: string) {
+    const exist = completionItemProviders.get(language);
+    if (exist) {
+        exist.dispose();
+        completionItemProviders.delete(language);
+    }
+}

mayfly_go_web/src/components/pagetable/PageTable.vue

@@ -10,56 +10,66 @@
         <el-card>
             <div class="query" ref="queryRef">
                 <div>
-                    <div v-if="props.query.length > 0" class="query-head">
+                    <div v-if="props.query.length > 0">
-                        <div style="display: flex; align-items: center;">
+                        <el-form :model="props.queryForm" label-width="auto" :size="props.size">
-                            <el-form :model="props.queryForm" label-width="70px" style="display: flex;">
+                            <el-row
-                                <el-form-item :label="item.label" style="margin-right: 20px; margin-bottom: 0px;"
+                                v-for="i in Math.ceil((props.query.length + 1) / (defaultQueryCount + 1))"
-                                    v-for="item in props.query?.slice(0, defaultQueryCount)" :key="item.prop">
+                                :key="i"
+                                v-show="i == 1 || isOpenMoreQuery"
+                                :class="i > 1 && isOpenMoreQuery ? 'is-open' : ''"
+                            >
+                                <el-form-item
+                                    :label="item.label"
+                                    style="margin-right: 12px; margin-bottom: 0px"
+                                    v-for="item in getRowQueryItem(i)"
+                                    :key="item.prop"
+                                >
                                     <!-- 这里只获取指定个数的筛选条件 -->
-                                    <el-input v-model="queryForm[item.prop]" :placeholder="'输入' + item.label + '关键字'"
+                                    <el-input
-                                        clearable v-if="item.type == 'text'"></el-input>
+                                        v-model="queryForm[item.prop]"
+                                        :placeholder="'输入' + item.label + '关键字'"
+                                        clearable
+                                        v-if="item.type == 'text'"
+                                    ></el-input>
 
-                                    <el-select-v2 v-model="queryForm[item.prop]" :options="item.options" clearable
+                                    <el-select-v2
-                                        :placeholder="'选择' + item.label + '关键字'" v-else-if="item.type == 'select'" />
+                                        v-model="queryForm[item.prop]"
+                                        :options="item.options"
+                                        clearable
+                                        :placeholder="'选择' + item.label + '关键字'"
+                                        v-else-if="item.type == 'select'"
+                                    />
 
-                                    <el-date-picker v-model="queryForm[item.prop]" clearable type="datetimerange"
+                                    <el-date-picker
-                                        format="YYYY-MM-DD hh:mm:ss" value-format="x" range-separator="至"
+                                        v-model="queryForm[item.prop]"
-                                        start-placeholder="开始时间" end-placeholder="结束时间" v-else-if="item.type == 'date'" />
+                                        clearable
+                                        type="datetimerange"
+                                        format="YYYY-MM-DD hh:mm:ss"
+                                        value-format="x"
+                                        range-separator="至"
+                                        start-placeholder="开始时间"
+                                        end-placeholder="结束时间"
+                                        v-else-if="item.type == 'date'"
+                                    />
+
+                                    <template v-else-if="item.slot == 'queryBtns'">
+                                        <template v-if="props.query?.length > defaultQueryCount">
+                                            <el-button
+                                                @click="isOpenMoreQuery = !isOpenMoreQuery"
+                                                v-if="!isOpenMoreQuery"
+                                                icon="ArrowDownBold"
+                                                circle
+                                            ></el-button>
+                                            <el-button @click="isOpenMoreQuery = !isOpenMoreQuery" v-else icon="ArrowUpBold" circle></el-button>
+                                        </template>
+
+                                        <el-button @click="queryData()" type="primary" icon="search" plain>查询</el-button>
+                                        <el-button @click="reset()" icon="RefreshRight">重置</el-button>
+                                    </template>
 
                                     <slot :name="item.slot"></slot>
                                 </el-form-item>
-                            </el-form>
+                            </el-row>
-
-                            <template v-if="props.query?.length > defaultQueryCount">
-                                <el-button @click="isOpenMoreQuery = !isOpenMoreQuery" v-if="!isOpenMoreQuery"
-                                    icon="ArrowDownBold" circle></el-button>
-                                <el-button @click="isOpenMoreQuery = !isOpenMoreQuery" v-else icon="ArrowUpBold"
-                                    circle></el-button>
-                            </template>
-
-                            <el-button @click="queryData()" type="primary" plain>查询</el-button>
-                            <el-button @click="reset()">重置</el-button>
-                        </div>
-                    </div>
-                    <!-- 这里做的是一个类似于折叠面板的功能 -->
-                    <div class="query-content" :class="isOpenMoreQuery ? 'is-open' : ''">
-                        <el-form :model="props.queryForm" label-width="70px" style="display: flex; flex-wrap: wrap;">
-                            <el-form-item :label="item.label" style="margin-right: 20px; margin-bottom: 0px;"
-                                v-for="item in props.query?.slice(defaultQueryCount)" :key="item.prop">
-
-                                <!-- 这里获取除前两个以外所有的筛选条件 -->
-                                <el-input v-model="queryForm[item.prop]" :placeholder="'输入' + item.label + '关键字'" clearable
-                                    v-if="item.type == 'text'"></el-input>
-
-                                <el-select-v2 v-model="queryForm[item.prop]" :options="item.options" clearable
-                                    :placeholder="'选择' + item.label + '关键字'" v-else-if="item.type == 'select'" />
-
-                                <el-date-picker v-model="queryForm[item.prop]" clearable type="datetimerange"
-                                    format="YYYY-MM-DD hh:mm:ss" value-format="x" range-separator="至"
-                                    start-placeholder="开始时间" end-placeholder="结束时间" v-else-if="item.type == 'date'" />
-
-                                <slot :name="item.slot"></slot>
-                            </el-form-item>
                         </el-form>
                     </div>
                 </div>
@@ -71,89 +81,143 @@
                     <!-- 
                     动态表头显示，根据表格每条配置项中的show字段来决定改列是否显示或者隐藏 
                     columns 就是我们表格配置的数组对象
-                -->
+                    -->
-                    <el-popover placement="bottom" title="表格配置" :width="200" trigger="click">
+                    <el-popover
+                        placement="bottom"
+                        title="表格配置"
+                        popper-style="max-height: 550px; overflow: auto; max-width: 450px"
+                        width="auto"
+                        trigger="click"
+                    >
                         <div v-for="(item, index) in props.columns" :key="index">
                             <el-checkbox v-model="item.show" :label="item.label" :true-label="true" :false-label="false" />
                         </div>
                         <template #reference>
                             <!-- 一个Element Plus中的图标 -->
-                            <el-button icon="Operation"></el-button>
+                            <el-button icon="Operation" :size="props.size"></el-button>
                         </template>
                     </el-popover>
                 </div>
             </div>
 
-            <el-table v-bind="$attrs" max-height="700" @current-change="choose" :data="props.data" border
+            <el-table
-                highlight-current-row show-overflow-tooltip>
+                v-bind="$attrs"
-                <el-table-column v-if="props.showChooseColumn" label="选择" align="center" width="53px">
+                :max-height="tableMaxHeight"
-                    <template #default="scope">
+                @selection-change="handleSelectionChange"
-                        <el-radio v-model="state.chooseId" :label="scope.row.id">
+                :data="props.data"
-                            <i></i>
+                highlight-current-row
-                        </el-radio>
+                v-loading="loadingData"
-                    </template>
+                :size="props.size"
-                </el-table-column>
+            >
+                <el-table-column v-if="props.showSelection" type="selection" width="40" />
 
                 <template v-for="(item, index) in columns">
-                    <el-table-column :key="index" v-if="item.show" :prop="item.prop" :label="item.label" :fixed="item.fixed"
+                    <el-table-column
-                        :align="item.align" :show-overflow-tooltip="item.showOverflowTooltip || true"
+                        :key="index"
-                        :min-width="item.minWidth" :sortable="item.sortable || false" :type="item.type" :width="item.width">
+                        v-if="item.show"
-
+                        :prop="item.prop"
+                        :label="item.label"
+                        :fixed="item.fixed"
+                        :align="item.align"
+                        :show-overflow-tooltip="item.showOverflowTooltip"
+                        :min-width="item.minWidth"
+                        :sortable="item.sortable || false"
+                        :type="item.type"
+                        :width="item.width"
+                    >
                         <!-- 插槽：预留功能 -->
                         <template #default="scope" v-if="item.slot">
-                            <slot :name="item.slot" :data="scope.row"></slot>
+                            <slot :name="item.prop" :data="scope.row"></slot>
+                        </template>
+
+                        <!-- 枚举类型使用tab展示 -->
+                        <template #default="scope" v-else-if="item.type == 'tag'">
+                            <enum-tag :size="props.size" :enums="item.typeParam" :value="scope.row[item.prop]"></enum-tag>
                         </template>
 
                         <template #default="scope" v-else>
-                            <span>{{ item.formatFunc ? item.formatFunc(scope.row[item.prop]) : scope.row[item.prop]
+                            <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
-                                }}</span>
+                            <el-popover
-                        </template>
+                                v-if="item.isBeautify && scope.row[item.prop]?.length > 35"
+                                effect="light"
+                                trigger="click"
+                                placement="top"
+                                width="600px"
+                            >
+                                <template #default>
+                                    <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
+                                </template>
+                                <template #reference>
+                                    <el-link
+                                        @click="formatText(scope.row[item.prop])"
+                                        :underline="false"
+                                        type="success"
+                                        icon="MagicStick"
+                                        class="mr5"
+                                    ></el-link>
+                                </template>
+                            </el-popover>
 
+                            <span>{{ item.getValueByData(scope.row) }}</span>
+                        </template>
                     </el-table-column>
                 </template>
             </el-table>
 
             <el-row style="margin-top: 20px" type="flex" justify="end">
-                <el-pagination @current-change="handlePageChange" @size-change="handleSizeChange" style="text-align: right"
+                <el-pagination
-                    layout="prev, pager, next, total, sizes, jumper" :total="props.total"
+                    :small="props.size == 'small'"
-                    v-model:current-page="state.pageNum" v-model:page-size="state.pageSize"
+                    @current-change="handlePageChange"
-                    :page-sizes="[10, 15, 20, 25]" />
+                    @size-change="handleSizeChange"
+                    style="text-align: right"
+                    layout="prev, pager, next, total, sizes, jumper"
+                    :total="props.total"
+                    v-model:current-page="state.pageNum"
+                    v-model:page-size="state.pageSize"
+                    :page-sizes="pageSizes"
+                />
             </el-row>
         </el-card>
     </div>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { toRefs, watch, reactive, onMounted } from 'vue';
 import { TableColumn, TableQuery } from './index';
+import EnumTag from '@/components/enumtag/EnumTag.vue';
 
-const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize', 'update:chooseData', 'pageChange'])
+const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize', 'update:selectionData', 'pageChange'])
 
 const props = defineProps({
+    size: {
+        type: String,
+        default: '',
+    },
+    inputWidth: {
+        type: [Number, String],
+        default: 0,
+    },
     // 是否显示选择列
-    showChooseColumn: {
+    showSelection: {
         type: Boolean,
         default: false,
     },
-    // 选择列绑定的主键key字段名
-    chooseDataIdKey: {
-        type: String,
-        default: "id"
-    },
     // 当前选择的数据
-    chooseData: {
+    selectionData: {
-        type: Object
+        type: Array<any>
     },
     // 列信息
     columns: {
         type: Array<TableColumn>,
         default: function () {
             return [];
-        }
+        },
+        required: true,
     },
     // 表格数据
     data: {
         type: Array,
+        required: true,
     },
     total: {
         type: [Number],
@@ -167,6 +231,13 @@ const props = defineProps({
         type: [Number],
         default: 10,
     },
+    // 查询条件配置
+    query: {
+        type: Array<TableQuery>,
+        default: function () {
+            return [];
+        }
+    },
     // 绑定的查询表单
     queryForm: {
         type: Object,
@@ -174,100 +245,148 @@ const props = defineProps({
             return {};
         }
     },
-    // 查询条件配置
-    query: {
-        type: Array<TableQuery>,
-        default: function () {
-            return [];
-        }
-    }
 })
 
 const state = reactive({
+    pageSizes: [] as any, // 可选每页显示的数据量
     pageSize: 10,
     pageNum: 1,
-    chooseData: null as any,
-    chooseId: 0 as any,
     isOpenMoreQuery: false,
-    defaultQueryCount: 2, // 默认显示的查询参数个数
+    defaultQueryCount: 2, // 默认显示的查询参数个数，展开后每行显示查询条件个数为该值加1。第一行用最后一列来占用按钮
     queryForm: {} as any,
+    loadingData: false,
+    // 输入框宽度
+    inputWidth: "200px" as any,
+    formatVal: '', // 格式化后的值
+    tableMaxHeight: window.innerHeight - 240 + 'px',
 })
 
 const {
+    pageSizes,
     isOpenMoreQuery,
     defaultQueryCount,
     queryForm,
+    loadingData,
+    inputWidth,
+    formatVal,
+    tableMaxHeight,
 } = toRefs(state)
 
 watch(() => props.queryForm, (newValue: any) => {
-    state.queryForm = newValue
+    state.queryForm = newValue;
-})
-
-watch(() => props.chooseData, (newValue: any) => {
-    state.chooseData = newValue
-    if (newValue) {
-        state.chooseId = state.chooseData[props.chooseDataIdKey]
-    } else {
-        state.chooseId = 0;
-    }
 })
 
 watch(() => props.pageNum, (newValue: any) => {
-    state.pageNum = newValue
+    state.pageNum = newValue;
 })
 
 watch(() => props.pageSize, (newValue: any) => {
-    state.pageSize = newValue
+    state.pageSize = newValue;
 })
 
 watch(() => props.data, (newValue: any) => {
-    if (newValue.length > 0) {
+    if (newValue && newValue.length > 0) {
         props.columns.forEach(item => {
             if (item.autoWidth && item.show) {
-                item.minWidth = TableColumn.flexColumnWidth(item.prop, item.label, props.data) as any
+                item.autoCalculateMinWidth(props.data);
             }
         })
     }
 })
 
 onMounted(() => {
+    const pageSize = props.pageSize;
+
     state.pageNum = props.pageNum;
-    state.pageSize = props.pageSize;
+    state.pageSize = pageSize;
     state.queryForm = props.queryForm;
+    state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4, pageSize * 5];
+
+    // 如果没传输入框宽度，则根据组件size设置默认宽度
+    if (!props.inputWidth) {
+        state.inputWidth = props.size == 'small' ? '150px' : '200px';
+    } else {
+        state.inputWidth = props.inputWidth;
+    }
+
+    window.addEventListener('resize', () => {
+        calcuTableHeight();
+    });
 })
 
-// 处理选中了列表中的某一条数据
+const calcuTableHeight = () => {
-const choose = (item: any) => {
+    state.tableMaxHeight = window.innerHeight - 240 + 'px';
-    if (!item || !props.showChooseColumn) {
+}
-        return;
+
+const formatText = (data: any)=> {
+    state.formatVal = '';
+    try {
+        state.formatVal = JSON.stringify(JSON.parse(data), null, 4);
+    }  catch (e) {
+        state.formatVal = data;
     }
-    state.chooseData = item;
+}
-    state.chooseId = item[props.chooseDataIdKey]
+
-    emit('update:chooseData', state.chooseData)
+const getRowQueryItem = (row: number) => {
-};
+    // 第一行需要加个查询等按钮列
+    if (row === 1) {
+        const res = props.query.slice(row - 1, defaultQueryCount.value);
+        // 查询等按钮列
+        res.push(TableQuery.slot("", "", "queryBtns"));
+        return res
+    }
+    const columnCount = defaultQueryCount.value + 1;
+    return props.query.slice((row - 1) * columnCount - 1, row * columnCount - 1);
+}
+
+const handleSelectionChange = (val: any) => {
+    emit('update:selectionData', val);
+}
 
 const handlePageChange = () => {
-    emit('update:pageNum', state.pageNum)
+    emit('update:pageNum', state.pageNum);
-    emit("pageChange")
+    execQuery();
 }
 
 const handleSizeChange = () => {
-    emit('update:pageSize', state.pageSize)
+    changePageNum(1);
-    emit("pageChange")
+    emit('update:pageSize', state.pageSize);
+    execQuery();
 }
 
 const queryData = () => {
-    // 触发重新调用查询接口即可
+    changePageNum(1);
-    emit("pageChange")
+    execQuery();
 }
 
 const reset = () => {
-    // 触发重新调用查询接口即可
+    // 将查询参数绑定的值置空，并重新粗发查询接口
-    state.queryForm = {};
+    for (let qi of props.query) {
-    emit('update:queryForm', state.queryForm)
+        state.queryForm[qi.prop] = null;
-    emit("pageChange")
+    }
+
+    changePageNum(1);
+    emit('update:queryForm', state.queryForm);
+    execQuery();
 }
 
+const changePageNum = (pageNum: number) => {
+    state.pageNum = pageNum;
+    emit('update:pageNum', state.pageNum);
+}
+
+const execQuery = () => {
+    emit('pageChange');
+}
+
+/**
+ * 是否正在加载数据
+ */
+const loading = (loading: boolean) => {
+    state.loadingData = loading;
+}
+
+defineExpose({ loading })
 </script>
 <style scoped lang="scss">
 .page-table {
@@ -275,44 +394,19 @@ const reset = () => {
         margin-bottom: 10px;
         overflow: hidden;
 
-        .query-head {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .query-content {
-            width: 100%;
-            max-height: 0px;
-            transition: all 0.8s;
-        }
-
         .is-open {
-            padding: 10px 0;
+            // padding: 10px 0;
             max-height: 200px;
+            margin-top: 10px;
         }
 
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
-        margin-bottom: 10px;
-
-        .query-content {
-            display: flex;
-            align-items: flex-start;
-
-            .query-form {
-                .el-form-item {
-                    margin: 0px;
-                    margin-right: 20px;
-                }
-            }
-        }
 
         .slot {
             display: flex;
             justify-content: flex-end;
-            padding-right: 20px;
         }
     }
 
@@ -325,15 +419,19 @@ const reset = () => {
     font-weight: bold;
 }
 
-.el-input {
-    width: 200px;
-}
-
 .el-select-v2 {
-    width: 200px;
+    width: v-bind(inputWidth);
 }
 
-::v-deep(.el-date-editor) {
+.el-input {
+    width: v-bind(inputWidth);
+}
+
+.el-select {
+    width: v-bind(inputWidth);
+}
+
+.el-date-editor {
     width: 380px !important;
 }
-</style>
+</style>

mayfly_go_web/src/components/pagetable/index.ts

@@ -1,7 +1,8 @@
+import EnumValue from '@/common/Enum';
 import { dateFormat } from '@/common/utils/date';
+import { getTextWidth } from '@/common/utils/string';
 
 export class TableColumn {
-
     /**
      * 属性字段
      */
@@ -17,52 +18,142 @@ export class TableColumn {
      */
     autoWidth: boolean = true;
 
-    /**      
+    /**
+     * 自动计算宽度时，累加该值（可能列值会进行转换 如添加图标等，宽度需要比计算出来的更宽些）
+     */
+    addWidth: number = 0;
+
+    /**
      * 最小宽度
      */
     minWidth: number | string;
 
     /**
-     * 插槽名
+     * 是否插槽，是的话插槽名则为prop属性名
      */
-    slot: string;
+    slot: boolean = false;
 
     showOverflowTooltip: boolean = true;
 
     sortable: boolean = false;
 
+    /**
+     * 官方：对应列的类型。 如果设置了selection则显示多选框；
+     * 如果设置了 index 则显示该行的索引（从 1 开始计算）；
+     *
+     * 新增 tag类型，用于枚举值转换后用tag进行展示
+     *
+     */
     type: string;
 
+    /**
+     * 类型展示需要的额外参数，如枚举转换的EnumValue值等
+     */
+    typeParam: any;
+
     width: number | string;
 
     fixed: any;
 
-    align: string = "center"
+    align: string = 'left';
 
-    formatFunc: Function
+    /**
+     * 指定格式化函数对原始值进行格式化，如时间格式化等
+     * param1: data, param2: prop
+     */
+    formatFunc: Function;
 
-    show: boolean = true
+    /**
+     * 是否显示该列
+     */
+    show: boolean = true;
+
+    /**
+     * 是否展示美化按钮（主要用于美化json文本等）
+     */
+    isBeautify: boolean = false;
 
     constructor(prop: string, label: string) {
         this.prop = prop;
         this.label = label;
     }
 
+    /**
+     * 获取该列在指定行数据中的值
+     * @param rowData 该行对应的数据
+     * @returns 该列对应的值
+     */
+    getValueByData(rowData: any) {
+        if (this.formatFunc) {
+            return this.formatFunc(rowData, this.prop);
+        }
+        return rowData[this.prop];
+    }
+
     static new(prop: string, label: string): TableColumn {
-        return new TableColumn(prop, label)
+        return new TableColumn(prop, label);
+    }
+
+    noShowOverflowTooltip(): TableColumn {
+        this.showOverflowTooltip = false;
+        return this;
     }
 
     setMinWidth(minWidth: number | string): TableColumn {
-        this.minWidth = minWidth
+        this.minWidth = minWidth;
         this.autoWidth = false;
         return this;
     }
 
-    setSlot(slot: string): TableColumn {
+    setAddWidth(addWidth: number): TableColumn {
-        this.slot = slot
+        this.addWidth = addWidth;
         return this;
     }
 
+    /**
+     * 居中对齐
+     * @returns this
+     */
+    alignCenter(): TableColumn {
+        this.align = 'center';
+        return this;
+    }
+
+    /**
+     * 使用标签类型展示该列（用于枚举值友好展示）
+     * @param param 枚举对象
+     * @returns this
+     */
+    typeTag(param: any): TableColumn {
+        this.type = 'tag';
+        this.typeParam = param;
+        return this;
+    }
+
+    typeText(): TableColumn {
+        this.type = 'text';
+        return this;
+    }
+
+    typeJson(): TableColumn {
+        this.type = 'jsonText';
+        return this;
+    }
+
+    /**
+     * 标识该列为插槽
+     * @returns this
+     */
+    isSlot(): TableColumn {
+        this.slot = true;
+        return this;
+    }
+
+    /**
+     * 设置该列的格式化回调函数
+     * @param func 格式化回调函数(参数为 -> data: 该行对应的数据，prop: 该列对应的prop属性值)
+     * @returns
+     */
     setFormatFunc(func: Function): TableColumn {
         this.formatFunc = func;
         return this;
@@ -73,100 +164,86 @@ export class TableColumn {
      * @returns this
      */
     isTime(): TableColumn {
-        this.setFormatFunc(dateFormat)
+        this.setFormatFunc((data: any, prop: string) => {
+            return dateFormat(data[prop]);
+        });
+        return this;
+    }
+
+    /**
+     * 标识该列枚举类，需进行枚举值转换
+     * @returns this
+     */
+    isEnum(enums: any): TableColumn {
+        this.setFormatFunc((data: any, prop: string) => {
+            return EnumValue.getLabelByValue(enums, data[prop]);
+        });
         return this;
     }
 
     fixedRight(): TableColumn {
-        this.fixed = "right";
+        this.fixed = 'right';
         return this;
     }
 
     fixedLeft(): TableColumn {
-        this.fixed = "left";
+        this.fixed = 'left';
         return this;
     }
 
+    canBeautify(): TableColumn {
+        this.isBeautify = true;
+        return this;
+    }
 
     /**
-     * 
+     * 自动计算最小宽度
      * @param str 字符串
      * @param tableData 表数据
      * @param label 表头label也参与宽度计算
      * @returns 列宽度
      */
-    static flexColumnWidth = (str: any, label: string, tableData: any) => {
+    autoCalculateMinWidth = (tableData: any) => {
-        // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
+        const prop = this.prop;
+        const label = this.label;
 
-        str = str + '';
-        let columnContent = '';
         if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
-            return;
+            return 0;
         }
-        if (!str || !str.length || str.length === 0 || str === undefined) {
-            return;
-        }
-        // 获取该列中最长的数据(内容)
-        let index = 0;
-        for (let i = 0; i < tableData.length; i++) {
-            if (!tableData[i][str]) {
-                continue;
-            }
-            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 = TableColumn.getContentWidth(columnContent);
-        // 获取label的宽度，取较大的宽度
-        const columnWidth: number = TableColumn.getContentWidth(label) + 30;
-        const flexWidth: number = contentWidth > columnWidth ? contentWidth : columnWidth;
-        return flexWidth + 'px';
-    };
 
-    /**
+        let maxWidthText = '';
-     * 获取内容所需要占用的宽度
+        let maxWidthValue;
-    */
+        // 为了兼容formatFunc格式化回调函数
-    static getContentWidth = (content: any): number => {
+        let maxData;
-        if (!content) {
+        // 获取该列中最长的数据(内容)
-            return 50;
+        for (let i = 0; i < tableData.length; i++) {
-        }
+            let nowData = tableData[i];
-        // 以下分配的单位长度可根据实际需求进行调整
+            let nowValue = nowData[prop];
-        let flexWidth = 0;
+            if (!nowValue) {
-        for (const char of content) {
-            if (flexWidth > 500) {
-                break;
-            }
-            if ((char >= '0' && char <= '9') || (char >= 'a' && char <= 'z')) {
-                // 小写字母、数字字符
-                flexWidth += 9.3;
                 continue;
             }
-            if (char >= 'A' && char <= 'Z') {
+            // 转为字符串比较长度
-                flexWidth += 9;
+            let nowText = nowValue + '';
-                continue;
+            if (nowText.length > maxWidthText.length) {
-            }
+                maxWidthText = nowText;
-            if (char >= '\u4e00' && char <= '\u9fa5') {
+                maxWidthValue = nowValue;
-                // 如果是中文字符，为字符分配16个单位宽度
+                maxData = nowData;
-                flexWidth += 20;
-            } else {
-                // 其他种类字符
-                flexWidth += 8;
             }
         }
-        if (flexWidth > 400) {
+        if (this.formatFunc && maxWidthValue) {
-            // 设置最大宽度
+            maxWidthText = this.formatFunc(maxData, prop) + '';
-            flexWidth = 400;
         }
-        return flexWidth;
+        // 需要加上表格的内间距等，视情况加
+        const contentWidth: number = getTextWidth(maxWidthText) + 30;
+        // 获取label的宽度，取较大的宽度
+        const columnWidth: number = getTextWidth(label) + 60;
+        const flexWidth: number = contentWidth > columnWidth ? contentWidth : columnWidth;
+        // 设置上限与累加需要额外增加的宽度
+        this.minWidth = (flexWidth > 400 ? 400 : flexWidth) + this.addWidth;
     };
 }
 
-
 export class TableQuery {
-
     /**
      * 属性字段
      */
@@ -192,42 +269,41 @@ export class TableQuery {
      */
     slot: string;
 
-
     constructor(prop: string, label: string) {
         this.prop = prop;
         this.label = label;
     }
 
     static new(prop: string, label: string): TableQuery {
-        return new TableQuery(prop, label)
+        return new TableQuery(prop, label);
     }
 
     static text(prop: string, label: string): TableQuery {
-        const tq = new TableQuery(prop, label)
+        const tq = new TableQuery(prop, label);
         tq.type = 'text';
         return tq;
     }
 
     static select(prop: string, label: string): TableQuery {
-        const tq = new TableQuery(prop, label)
+        const tq = new TableQuery(prop, label);
         tq.type = 'select';
         return tq;
     }
 
     static date(prop: string, label: string): TableQuery {
-        const tq = new TableQuery(prop, label)
+        const tq = new TableQuery(prop, label);
         tq.type = 'date';
         return tq;
     }
 
     static slot(prop: string, label: string, slotName: string): TableQuery {
-        const tq = new TableQuery(prop, label)
+        const tq = new TableQuery(prop, label);
         tq.slot = slotName;
         return tq;
     }
 
     setOptions(options: any): TableQuery {
         this.options = options;
-        return this
+        return this;
     }
-}
+}

mayfly_go_web/src/components/progress-notify/progress-notify.ts

@@ -0,0 +1,12 @@
+export const buildProgressProps = (): any => {
+    return {
+        progress: {
+            sqlFileName: {
+                type: String,
+            },
+            executedStatements: {
+                type: Number,
+            },
+        },
+    };
+};

mayfly_go_web/src/components/progress-notify/progress-notify.vue

@@ -0,0 +1,34 @@
+<template>
+    <el-descriptions border size="small" :title="`${progress.sqlFileName}`">
+        <el-descriptions-item label="时间">{{ state.elapsedTime }}</el-descriptions-item>
+        <el-descriptions-item label="已处理">{{ progress.executedStatements }}</el-descriptions-item>
+    </el-descriptions>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive } from 'vue';
+import { formatTime } from 'element-plus/es/components/countdown/src/utils';
+import { buildProgressProps } from './progress-notify';
+
+const props = defineProps(buildProgressProps());
+
+const state = reactive({
+    elapsedTime: '00:00:00',
+});
+
+let timer: any = undefined;
+const startTime = Date.now();
+
+onMounted(async () => {
+    timer = setInterval(() => {
+        const elapsed = Date.now() - startTime;
+        state.elapsedTime = formatTime(elapsed, 'HH:mm:ss');
+    }, 1000);
+});
+
+onUnmounted(async () => {
+    if (timer != undefined) {
+        clearInterval(timer); // 在Vue实例销毁前，清除我们的定时器
+        timer = undefined;
+    }
+});
+</script>

mayfly_go_web/src/components/svgIcon/index.vue

@@ -35,7 +35,7 @@ const props = defineProps({
     isEle: {
         type: Boolean,
         default: true,
-    }
+    },
 });
 
 // 在线链接、本地引入地址前缀
@@ -48,7 +48,7 @@ const getIconName = computed(() => {
 
 // 用于判断 element plus 自带 svg 图标的显示、隐藏。不存在 空格分隔的icon name即为element plus自带icon
 const isShowIconSvg = computed(() => {
-    const ss = props?.name?.split(" ")
+    const ss = props?.name?.split(' ');
     if (!ss) {
         return true;
     }
@@ -56,13 +56,13 @@ const isShowIconSvg = computed(() => {
 });
 
 const isIconfont = () => {
-    return props?.name?.startsWith("iconfont")
+    return props?.name?.startsWith('iconfont');
-}
+};
 
 const getIconfontName = () => {
     // iconfont icon-xxxx 获取icon-xxx即可
-    return props?.name?.split(" ")[1]
+    return props?.name?.split(' ')[1];
-}
+};
 
 // 用于判断在线链接、本地引入等图标显示、隐藏
 const isShowIconImg = computed(() => {
@@ -102,4 +102,4 @@ const setIconSvgInsStyle = computed(() => {
     cursor: pointer;
     vertical-align: middle;
 }
-</style>
+</style>

mayfly_go_web/src/components/terminal/TerminalBody.vue

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

mayfly_go_web/src/components/terminal/TerminalDialog.vue

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

mayfly_go_web/src/components/terminal/TerminalSearch.vue

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

mayfly_go_web/src/components/terminal/common.ts

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

mayfly_go_web/src/directive/auth.ts

@@ -1,21 +1,22 @@
 import type { App } from 'vue';
 import { useUserInfo } from '@/store/userInfo';
 import { judementSameArr } from '@/common/utils/arrayOperation';
+import { hasPerm } from '@/components/auth/auth';
 
 // 用户权限指令
 export function authDirective(app: App) {
     // 单个权限验证（v-auth="xxx"）
     app.directive('auth', {
         mounted(el, binding) {
-            if (!useUserInfo().userInfo.permissions.some((v: any) => v === binding.value)) {
+            if (!hasPerm(binding.value)) {
                 parseNoAuth(el, binding);
-            };
+            }
         },
     });
     // 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
     app.directive('auths', {
         mounted(el, binding) {
-            const value = binding.value
+            const value = binding.value;
             let flag = false;
             useUserInfo().userInfo.permissions.map((val: any) => {
                 value.map((v: any) => {
@@ -32,14 +33,14 @@ export function authDirective(app: App) {
         mounted(el, binding) {
             if (!judementSameArr(binding.value, useUserInfo().userInfo.permissions)) {
                 parseNoAuth(el, binding);
-            };
+            }
         },
     });
 }
 
 /**
  * 处理没有权限场景
- * 
+ *
  * @param el  元素
  * @param binding 绑定至
  */
@@ -54,8 +55,8 @@ const parseNoAuth = (el: any, binding: any) => {
         // 移除该元素
         el.parentNode.removeChild(el);
     }
-}
+};
 
 const disableClickFn = (event: any) => {
     event && event.stopImmediatePropagation();
-}
+};

mayfly_go_web/src/directive/waves.ts

@@ -44,7 +44,7 @@ export function wavesDirective(app: App) {
             el.addEventListener('mousedown', onCurrentClick, false);
         },
         unmounted(el) {
-            el.addEventListener('mousedown', () => { });
+            el.addEventListener('mousedown', () => {});
         },
     });
 }

mayfly_go_web/src/layout/component/aside.vue

@@ -21,8 +21,8 @@ import pinia from '@/store/index';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
 import { useRoutesList } from '@/store/routesList';
-import Logo from '@/views/layout/logo/index.vue';
+import Logo from '@/layout/logo/index.vue';
-import Vertical from '@/views/layout/navMenu/vertical.vue';
+import Vertical from '@/layout/navMenu/vertical.vue';
 import mittBus from '@/common/utils/mitt';
 
 const { proxy } = getCurrentInstance() as any;
@@ -38,8 +38,7 @@ const state: any = reactive({
 // 设置菜单展开/收起时的宽度
 const setCollapseWidth = computed(() => {
     let { layout, isCollapse, menuBar } = themeConfig.value;
-    let asideBrColor =
+    let asideBrColor = menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
-        menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
     if (layout === 'columns') {
         // 分栏布局，菜单收起时宽度给 1px
         if (isCollapse) {

mayfly_go_web/src/layout/component/columnsAside.vue

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

mayfly_go_web/src/layout/component/header.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import NavBarsIndex from '@/views/layout/navBars/index.vue';
+import NavBarsIndex from '@/layout/navBars/index.vue';
 import { useThemeConfig } from '@/store/themeConfig';
 export default {
     name: 'layoutHeader',

mayfly_go_web/src/layout/component/main.vue

@@ -1,16 +1,25 @@
 <template>
     <el-main class="layout-main">
-        <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
+        <el-scrollbar
+            class="layout-scrollbar"
+            ref="layoutScrollbarRef"
             v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1"
-            :style="{ minHeight: `calc(100vh - ${state.headerHeight}` }">
+            :style="{ minHeight: `calc(100vh - ${state.headerHeight}` }"
+        >
             <LayoutParentView />
             <Footer v-if="themeConfig.isFooter" />
         </el-scrollbar>
-        <Link :style="{ height: `calc(100vh - ${state.headerHeight}` }" :meta="state.currentRouteMeta"
+        <Link
-            v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2" />
+            :style="{ height: `calc(100vh - ${state.headerHeight}` }"
-        <Iframes :style="{ height: `calc(100vh - ${state.headerHeight}` }" :meta="state.currentRouteMeta"
+            :meta="state.currentRouteMeta"
+            v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2"
+        />
+        <Iframes
+            :style="{ height: `calc(100vh - ${state.headerHeight}` }"
+            :meta="state.currentRouteMeta"
             v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 1 && state.isShowLink"
-            @getCurrentRouteMeta="onGetCurrentRouteMeta" />
+            @getCurrentRouteMeta="onGetCurrentRouteMeta"
+        />
     </el-main>
 </template>
 
@@ -19,10 +28,10 @@ import { reactive, getCurrentInstance, watch, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
-import LayoutParentView from '@/views/layout/routerView/parent.vue';
+import LayoutParentView from '@/layout/routerView/parent.vue';
-import Footer from '@/views/layout/footer/index.vue';
+import Footer from '@/layout/footer/index.vue';
-import Link from '@/views/layout/routerView/link.vue';
+import Link from '@/layout/routerView/link.vue';
-import Iframes from '@/views/layout/routerView/iframes.vue';
+import Iframes from '@/layout/routerView/iframes.vue';
 
 const { proxy } = getCurrentInstance() as any;
 const { themeConfig } = storeToRefs(useThemeConfig());

mayfly_go_web/src/layout/index.vue

@@ -10,10 +10,10 @@ import { onBeforeMount, onUnmounted } from 'vue';
 import { getLocal, setLocal } from '@/common/utils/storage';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
-import Defaults from '@/views/layout/main/defaults.vue';
+import Defaults from '@/layout/main/defaults.vue';
-import Classic from '@/views/layout/main/classic.vue';
+import Classic from '@/layout/main/classic.vue';
-import Transverse from '@/views/layout/main/transverse.vue';
+import Transverse from '@/layout/main/transverse.vue';
-import Columns from '@/views/layout/main/columns.vue';
+import Columns from '@/layout/main/columns.vue';
 import mittBus from '@/common/utils/mitt';
 
 const { themeConfig } = storeToRefs(useThemeConfig());

mayfly_go_web/src/layout/lockScreen/index.vue

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

mayfly_go_web/src/layout/logo/index.vue

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

mayfly_go_web/src/layout/main/classic.vue

@@ -15,10 +15,10 @@
 <script lang="ts" setup name="layoutClassic">
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
-import Aside from '@/views/layout/component/aside.vue';
+import Aside from '@/layout/component/aside.vue';
-import Header from '@/views/layout/component/header.vue';
+import Header from '@/layout/component/header.vue';
-import Main from '@/views/layout/component/main.vue';
+import Main from '@/layout/component/main.vue';
-import TagsView from '@/views/layout/navBars/tagsView/tagsView.vue';
+import TagsView from '@/layout/navBars/tagsView/tagsView.vue';
 
 const { themeConfig } = storeToRefs(useThemeConfig());
 </script>

mayfly_go_web/src/layout/main/columns.vue

@@ -17,10 +17,10 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import Aside from '@/views/layout/component/aside.vue';
+import Aside from '@/layout/component/aside.vue';
-import Header from '@/views/layout/component/header.vue';
+import Header from '@/layout/component/header.vue';
-import Main from '@/views/layout/component/main.vue';
+import Main from '@/layout/component/main.vue';
-import ColumnsAside from '@/views/layout/component/columnsAside.vue';
+import ColumnsAside from '@/layout/component/columnsAside.vue';
 import { useThemeConfig } from '@/store/themeConfig';
 export default {
     name: 'layoutColumns',

mayfly_go_web/src/layout/main/defaults.vue

@@ -15,9 +15,9 @@
 <script lang="ts">
 import { computed, getCurrentInstance, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import Aside from '@/views/layout/component/aside.vue';
+import Aside from '@/layout/component/aside.vue';
-import Header from '@/views/layout/component/header.vue';
+import Header from '@/layout/component/header.vue';
-import Main from '@/views/layout/component/main.vue';
+import Main from '@/layout/component/main.vue';
 import { useThemeConfig } from '@/store/themeConfig';
 export default {
     name: 'layoutDefaults',
@@ -32,7 +32,7 @@ export default {
         watch(
             () => route.path,
             () => {
-                proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0;
+                proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
             }
         );
         return {

mayfly_go_web/src/layout/main/transverse.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts">
-import Header from '@/views/layout/component/header.vue';
+import Header from '@/layout/component/header.vue';
-import Main from '@/views/layout/component/main.vue';
+import Main from '@/layout/component/main.vue';
 export default {
     name: 'layoutTransverse',
     components: { Header, Main },

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

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

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

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

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

@@ -1,6 +1,16 @@
 <template>
     <div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
-        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+        <div class="layout-navbars-breadcrumb-user-icon">
+            <el-switch
+                @change="switchDark(state.isDark)"
+                v-model="state.isDark"
+                active-action-icon="Moon"
+                inactive-action-icon="Sunny"
+                style="--el-switch-off-color: #c4c9c4; --el-switch-on-color: #2c2c2c"
+                class="dark-icon"
+            />
+        </div>
+        <!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
             <div class="layout-navbars-breadcrumb-user-icon">
                 <el-icon title="组件大小">
                     <plus />
@@ -13,7 +23,7 @@
                     <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
                 </el-dropdown-menu>
             </template>
-        </el-dropdown>
+        </el-dropdown> -->
         <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
             <el-icon title="菜单搜索">
                 <search />
@@ -25,8 +35,7 @@
             </el-icon>
         </div>
         <div class="layout-navbars-breadcrumb-user-icon">
-            <el-popover placement="bottom" trigger="click" :visible="state.isShowUserNewsPopover" :width="300"
+            <el-popover placement="bottom" trigger="click" :visible="state.isShowUserNewsPopover" :width="300" popper-class="el-popover-pupop-user-news">
-                popper-class="el-popover-pupop-user-news">
                 <template #reference>
                     <el-badge :is-dot="false" @click="state.isShowUserNewsPopover = !state.isShowUserNewsPopover">
                         <el-icon title="消息">
@@ -47,7 +56,7 @@
                 <crop />
             </el-icon>
         </div>
-        <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
+        <el-dropdown trigger="click" :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
             <span class="layout-navbars-breadcrumb-user-link" style="cursor: pointer">
                 <img :src="userInfo.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
                 {{ userInfo.name || userInfo.username }}
@@ -70,25 +79,29 @@ import { ref, computed, reactive, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import screenfull from 'screenfull';
-import { resetRoute } from '@/router/index.ts';
+import { resetRoute } from '@/router/index';
 import { storeToRefs } from 'pinia';
 import { useUserInfo } from '@/store/userInfo';
 import { useThemeConfig } from '@/store/themeConfig';
-import { clearSession, setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
+import { clearSession, removeLocal } from '@/common/utils/storage';
-import UserNews from '@/views/layout/navBars/breadcrumb/userNews.vue';
+import UserNews from '@/layout/navBars/breadcrumb/userNews.vue';
-import SearchMenu from '@/views/layout/navBars/breadcrumb/search.vue';
+import SearchMenu from '@/layout/navBars/breadcrumb/search.vue';
 import mittBus from '@/common/utils/mitt';
+import openApi from '@/common/openApi';
+import { saveThemeConfig, getThemeConfig } from '@/common/utils/storage';
 
 const router = useRouter();
 const searchRef = ref();
 const state = reactive({
+    isDark: false,
     isScreenfull: false,
     isShowUserNewsPopover: false,
     disabledI18n: 'zh-cn',
     disabledSize: '',
 });
 const { userInfo } = storeToRefs(useUserInfo());
-const { themeConfig } = storeToRefs(useThemeConfig());
+const themeConfigStore = useThemeConfig();
+const { themeConfig } = storeToRefs(themeConfigStore);
 
 // 设置分割样式
 const layoutUserFlexNum = computed(() => {
@@ -122,8 +135,9 @@ const onHandleCommandClick = (path: string) => {
             showCancelButton: true,
             confirmButtonText: '确定',
             cancelButtonText: '取消',
-            beforeClose: (action, instance, done) => {
+            beforeClose: async (action, instance, done) => {
                 if (action === 'confirm') {
+                    await openApi.logout();
                     instance.confirmButtonLoading = true;
                     instance.confirmButtonText = '退出中';
                     setTimeout(() => {
@@ -145,12 +159,17 @@ const onHandleCommandClick = (path: string) => {
                     ElMessage.success('安全退出成功！');
                 }, 300);
             })
-            .catch(() => { });
+            .catch(() => {});
     } else {
         router.push(path);
     }
 };
 
+const switchDark = (isDark: boolean) => {
+    themeConfigStore.switchDark(isDark);
+    saveThemeConfig(themeConfig.value);
+};
+
 // // 菜单搜索点击
 const onSearchClick = () => {
     searchRef.value.openSearch();
@@ -160,7 +179,7 @@ const onSearchClick = () => {
 const onComponentSizeChange = (size: string) => {
     removeLocal('themeConfig');
     themeConfig.value.globalComponentSize = size;
-    setLocal('themeConfig', themeConfig.value);
+    saveThemeConfig(themeConfig.value);
     // proxy.$ELEMENT.size = size;
     initComponentSize();
     window.location.reload();
@@ -168,7 +187,7 @@ const onComponentSizeChange = (size: string) => {
 
 // 初始化全局组件大小
 const initComponentSize = () => {
-    switch (getLocal('themeConfig').globalComponentSize) {
+    switch (getThemeConfig().globalComponentSize) {
         case '':
             state.disabledSize = '';
             break;
@@ -186,8 +205,10 @@ const initComponentSize = () => {
 
 // 页面加载时
 onMounted(() => {
-    if (getLocal('themeConfig')) {
+    const themeConfig = getThemeConfig();
+    if (themeConfig) {
         initComponentSize();
+        state.isDark = themeConfig.isDark;
     }
 });
 </script>
@@ -244,4 +265,5 @@ onMounted(() => {
     ::v-deep(.el-badge__content.is-fixed) {
         top: 12px;
     }
-}</style>
+}
+</style>

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

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

mayfly_go_web/src/layout/navBars/index.vue

@@ -8,8 +8,8 @@
 <script lang="ts">
 import { computed } from 'vue';
 import { useThemeConfig } from '@/store/themeConfig';
-import BreadcrumbIndex from '@/views/layout/navBars/breadcrumb/index.vue';
+import BreadcrumbIndex from '@/layout/navBars/breadcrumb/index.vue';
-import TagsView from '@/views/layout/navBars/tagsView/tagsView.vue';
+import TagsView from '@/layout/navBars/tagsView/tagsView.vue';
 export default {
     name: 'layoutNavBars',
     components: { BreadcrumbIndex, TagsView },

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

@@ -0,0 +1,138 @@
+<template>
+    <transition name="el-zoom-in-center">
+        <div
+            aria-hidden="true"
+            class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
+            role="tooltip"
+            data-popper-placement="bottom"
+            :style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
+            :key="Math.random()"
+            v-show="state.isShow"
+        >
+            <ul class="el-dropdown-menu">
+                <template v-for="(v, k) in state.dropdownList">
+                    <li
+                        class="el-dropdown-menu__item"
+                        aria-disabled="false"
+                        tabindex="-1"
+                        :key="k"
+                        v-if="!v.affix"
+                        @click="onCurrentContextmenuClick(v.contextMenuClickId)"
+                    >
+                        <SvgIcon :name="v.icon" />
+                        <span>{{ v.txt }}</span>
+                    </li>
+                </template>
+            </ul>
+            <div class="el-popper__arrow" :style="{ left: `${state.arrowLeft}px` }"></div>
+        </div>
+    </transition>
+</template>
+
+<script setup lang="ts" name="layoutTagsViewContextmenu">
+import { computed, reactive, onMounted, onUnmounted, watch } from 'vue';
+
+// 定义父组件传过来的值
+const props = defineProps({
+    dropdown: {
+        type: Object,
+        default: () => {
+            return {
+                x: 0,
+                y: 0,
+            };
+        },
+    },
+});
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['currentContextmenuClick']);
+
+// 定义变量内容
+const state = reactive({
+    isShow: false,
+    dropdownList: [
+        { contextMenuClickId: 0, txt: '刷新', affix: false, icon: 'RefreshRight' },
+        { contextMenuClickId: 1, txt: '关闭', affix: false, icon: 'Close' },
+        { contextMenuClickId: 2, txt: '关闭其他', affix: false, icon: 'CircleClose' },
+        { contextMenuClickId: 3, txt: '关闭所有', affix: false, icon: 'FolderDelete' },
+        {
+            contextMenuClickId: 4,
+            txt: '当前页全屏',
+            affix: false,
+            icon: 'full-screen',
+        },
+    ],
+    item: {} as any,
+    arrowLeft: 10,
+});
+
+// 父级传过来的坐标 x,y 值
+const dropdowns = computed(() => {
+    // 117 为 `Dropdown 下拉菜单` 的宽度
+    if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
+        return {
+            x: document.documentElement.clientWidth - 117 - 5,
+            y: props.dropdown.y,
+        };
+    } else {
+        return props.dropdown;
+    }
+});
+// 当前项菜单点击
+const onCurrentContextmenuClick = (contextMenuClickId: number) => {
+    emit('currentContextmenuClick', { id: contextMenuClickId, path: state.item.path });
+};
+// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
+const openContextmenu = (item: any) => {
+    state.item = item;
+    item.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
+    closeContextmenu();
+    setTimeout(() => {
+        state.isShow = true;
+    }, 10);
+};
+// 关闭右键菜单
+const closeContextmenu = () => {
+    state.isShow = false;
+};
+// 监听页面监听进行右键菜单的关闭
+onMounted(() => {
+    document.body.addEventListener('click', closeContextmenu);
+});
+// 页面卸载时，移除右键菜单监听事件
+onUnmounted(() => {
+    document.body.removeEventListener('click', closeContextmenu);
+});
+// 监听下拉菜单位置
+watch(
+    () => props.dropdown,
+    ({ x }) => {
+        if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
+        else state.arrowLeft = 10;
+    },
+    {
+        deep: true,
+    }
+);
+
+// 暴露变量
+defineExpose({
+    openContextmenu,
+});
+</script>
+
+<style scoped lang="scss">
+.custom-contextmenu {
+    transform-origin: center top;
+    z-index: 2190;
+    position: fixed;
+    .el-dropdown-menu__item {
+        font-size: 12px !important;
+        white-space: nowrap;
+        i {
+            font-size: 12px !important;
+        }
+    }
+}
+</style>

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

@@ -2,29 +2,43 @@
     <div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': themeConfig.layout === 'classic' }">
         <el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
             <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
-                <li v-for="(v, k) in state.tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
+                <li
-                    :class="{ 'is-active': isActive(v) }" @contextmenu.prevent="onContextmenu(v, $event)"
+                    v-for="(v, k) in tagsViews"
-                    @click="onTagsClick(v, k)" :ref="
+                    :key="k"
+                    class="layout-navbars-tagsview-ul-li"
+                    :data-name="v.name"
+                    :class="{ 'is-active': isActive(v) }"
+                    @contextmenu.prevent="onContextmenu(v, $event)"
+                    @click="onTagsClick(v, k)"
+                    :ref="
                         (el) => {
                             if (el) tagsRefs[k] = el;
                         }
-                    ">
+                    "
-                    <SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14"
+                >
-                        v-if="isActive(v)" />
+                    <SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)" />
-                    <SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont"
+                    <SvgIcon :name="v.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
-                        v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
+                    <span>{{ v.title }}</span>
-                    <span>{{ v.meta.title }}</span>
                     <template v-if="isActive(v)">
-                        <SvgIcon name="RefreshRight" class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
+                        <SvgIcon
-                            @click.stop="refreshCurrentTagsView($route.fullPath)" />
+                            name="RefreshRight"
-                        <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
+                            class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
-                            v-if="!v.meta.isAffix"
+                            @click.stop="refreshCurrentTagsView($route.fullPath)"
-                            @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
+                        />
+                        <SvgIcon
+                            name="Close"
+                            class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
+                            v-if="!v.isAffix"
+                            @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
+                        />
                     </template>
 
-                    <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
+                    <SvgIcon
-                        v-if="!v.meta.isAffix"
+                        name="Close"
-                        @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
+                        class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
+                        v-if="!v.isAffix"
+                        @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
+                    />
                 </li>
             </ul>
         </el-scrollbar>
@@ -38,17 +52,24 @@ import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import screenfull from 'screenfull';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
-import { getSession, setSession, removeSession } from '@/common/utils/storage';
 import mittBus from '@/common/utils/mitt';
 import Sortable from 'sortablejs';
-import Contextmenu from '@/views/layout/navBars/tagsView/contextmenu.vue';
+import Contextmenu from '@/layout/navBars/tagsView/contextmenu.vue';
+import { getTagViews, setTagViews, removeTagViews } from '@/common/utils/storage';
+import { useTagsViews } from '@/store/tagsViews';
+import { useKeepALiveNames } from '@/store/keepAliveNames';
 
 const { proxy } = getCurrentInstance() as any;
 const tagsRefs = ref([]) as any;
 const scrollbarRef = ref();
 const contextmenuRef = ref();
 const tagsUlRef = ref();
+
 const { themeConfig } = storeToRefs(useThemeConfig());
+const { tagsViews } = storeToRefs(useTagsViews());
+
+const keepAliveNamesStores = useKeepALiveNames();
+
 const route = useRoute();
 const router = useRouter();
 
@@ -56,7 +77,6 @@ const state = reactive({
     routePath: route.fullPath,
     dropdown: { x: '', y: '' },
     tagsRefsIndex: 0,
-    tagsViewList: [] as any,
     sortable: '' as any,
 });
 
@@ -67,119 +87,153 @@ const setTagsStyle = computed(() => {
 
 // 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
 const addBrowserSetSession = (tagsViewList: Array<object>) => {
-    setSession('tagsViewList', tagsViewList);
+    setTagViews(tagsViewList);
 };
 
-// 获取 vuex 中的 tagsViewRoutes 列表
+// 获取  tagsViewRoutes 列表
 const getTagsViewRoutes = () => {
     state.routePath = route.fullPath;
-    state.tagsViewList = [];
+    tagsViews.value = [];
-    if (!themeConfig.value.isCacheTagsView) removeSession('tagsViewList');
+    if (!themeConfig.value.isCacheTagsView) {
+        removeTagViews();
+    }
     initTagsView();
 };
-// vuex 中获取路由信息：如果是设置了固定的（isAffix），进行初始化显示
+// 获取路由信息：如果是设置了固定的（isAffix），进行初始化显示
 const initTagsView = () => {
-    if (getSession('tagsViewList') && themeConfig.value.isCacheTagsView) {
+    const tagViews = getTagViews();
-        state.tagsViewList = getSession('tagsViewList');
+    if (tagViews && themeConfig.value.isCacheTagsView) {
+        tagsViews.value = tagViews;
     } else {
-        state.tagsViewList?.map((v: any) => {
+        tagsViews.value?.map((v: any) => {
-            if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
+            if (v.isAffix && !v.isHide) {
+                tagsViews.value.push({ ...v });
+                keepAliveNamesStores.setCacheKeepAlive(v);
+            }
         });
         addTagsView(route.fullPath);
     }
     // 初始化当前元素(li)的下标
-    getTagsRefsIndex(route.fullPath);
+    setTagsRefsIndex(route.fullPath);
     // 添加初始化横向滚动条移动到对应位置
     tagsViewmoveToCurrentTag();
 };
 
 // 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
 // path为fullPath
-const addTagsView = (path: string, to: any = null) => {
+const addTagsView = (path: string, to: any = null, tagViewIndex: number = -1) => {
-    if (!to) {
+    nextTick(async () => {
-        to = route;
+        if (!to) {
-    }
+            to = route;
-
-    path = decodeURI(path);
-    for (let tv of state.tagsViewList) {
-        if (tv.fullPath === path) {
-            return false;
         }
-    }
+
-    
+        for (let tv of tagsViews.value) {
-    const tagView = { ...to }
+            if (tv.path === path) {
-    // 防止Converting circular structure to JSON错误
+                return false;
-    tagView.matched = null;
+            }
-    tagView.redirectedFrom = null;
+        }
-    state.tagsViewList.push(tagView);
+
-    addBrowserSetSession(state.tagsViewList);
+        const tagView = {
+            path: path,
+            name: to.name,
+            query: to.query,
+            title: to.meta.title,
+            icon: to.meta.icon,
+            isAffix: to.meta.isAffix,
+            isKeepAlive: to.meta.isKeepAlive,
+        };
+
+        if (tagViewIndex != -1) {
+            tagsViews.value.splice(tagViewIndex + 1, 0, tagView);
+        } else {
+            tagsViews.value.push(tagView);
+        }
+        await keepAliveNamesStores.addCachedView(tagView);
+        addBrowserSetSession(tagsViews.value);
+    });
 };
 
 // 2、刷新当前 tagsView：
 // path为fullPath
-const refreshCurrentTagsView = (path: string) => {
+const refreshCurrentTagsView = async (path: string) => {
+    const item = getTagsView(path);
+    await keepAliveNamesStores.delCachedView(item);
+    keepAliveNamesStores.addCachedView(item);
     mittBus.emit('onTagsViewRefreshRouterView', path);
 };
 
+const getTagsView = (path: string) => {
+    return tagsViews.value.find((v: any) => v.path === path);
+};
+
 // 3、关闭当前 tagsView：如果是设置了固定的（isAffix），不可以关闭
 // path为fullPath
 const closeCurrentTagsView = (path: string) => {
-    state.tagsViewList.map((v: any, k: number, arr: any) => {
+    tagsViews.value.map((v: TagsView, k: number, arr: any) => {
-        if (!v.meta.isAffix) {
+        if (!v.isAffix) {
-            if (v.fullPath === path) {
+            if (v.path === path) {
-                state.tagsViewList.splice(k, 1);
+                keepAliveNamesStores.delCachedView(v);
+                tagsViews.value.splice(k, 1);
                 setTimeout(() => {
                     if (state.routePath !== path) {
                         return;
                     }
-                    let next;
+                    let next: TagsView;
                     // 最后一个且高亮时
-                    if (state.tagsViewList.length === k) {
+                    if (tagsViews.value.length === k) {
-                        next = k !== arr.length ? arr[k] : arr[arr.length - 1]
+                        next = k !== arr.length ? arr[k] : arr[arr.length - 1];
                     } else {
                         next = arr[k];
                     }
 
-                    if (next.meta.isDynamic) {
+                    if (next) {
-                        router.push({ name: next.name, params: next.params });
-                    } else {
                         router.push({ path: next.path, query: next.query });
+                    } else {
+                        router.push({ path: '/' });
                     }
                 }, 0);
             }
         }
     });
-    addBrowserSetSession(state.tagsViewList);
+    addBrowserSetSession(tagsViews.value);
 };
 
 // 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
 const closeOtherTagsView = (path: string) => {
-    const oldTagViews = state.tagsViewList;
+    const oldTagViews = tagsViews.value;
-    state.tagsViewList = [];
+    tagsViews.value = [];
-    oldTagViews.map((v: any) => {
+    oldTagViews.map((v: TagsView) => {
-        if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
+        if (v.isAffix && !v.isHide) {
+            keepAliveNamesStores.delOthersCachedViews(v);
+            tagsViews.value.push({ ...v });
+        }
     });
     addTagsView(path);
 };
 
 // 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
 const closeAllTagsView = (path: string) => {
-    const oldTagViews = state.tagsViewList;
+    keepAliveNamesStores.delAllCachedViews();
-    state.tagsViewList = [];
+    const oldTagViews = tagsViews.value;
+    tagsViews.value = [];
     oldTagViews.map((v: any) => {
-        if (v.meta.isAffix && !v.meta.isHide) {
+        if (v.isAffix && !v.isHide) {
-            state.tagsViewList.push({ ...v });
+            tagsViews.value.push({ ...v });
-            if (state.tagsViewList.some((v: any) => v.path === path)) router.push({ path, query: route.query });
+            if (tagsViews.value.some((v: any) => v.path === path)) {
-            else router.push({ path: v.path, query: route.query });
+                router.push({ path, query: route.query });
+            }
         }
     });
-    addBrowserSetSession(state.tagsViewList);
+    if (tagsViews.value) {
+        router.push({ path: '/' });
+    }
+    addBrowserSetSession(tagsViews.value);
 };
 // 6、开启当前页面全屏
 const openCurrenFullscreen = (path: string) => {
-    const item = state.tagsViewList.find((v: any) => v.fullPath === path);
+    const item = tagsViews.value.find((v: any) => v.path === path);
     nextTick(() => {
-        router.push({ path, query: item.query });
+        router.push({ path, query: item?.query });
         const element = document.querySelector('.layout-main');
         const screenfulls: any = screenfull;
         screenfulls.request(element);
@@ -189,17 +243,17 @@ const openCurrenFullscreen = (path: string) => {
 const onCurrentContextmenuClick = (data: any) => {
     // path为fullPath
     let { id, path } = data;
-    let currentTag = state.tagsViewList.find((v: any) => v.fullPath === path);
+    let currentTag = tagsViews.value.find((v: any) => v.path === path);
     switch (id) {
         case 0:
             refreshCurrentTagsView(path);
-            router.push({ path, query: currentTag.query });
+            router.push({ path, query: currentTag?.query });
             break;
         case 1:
             closeCurrentTagsView(path);
             break;
         case 2:
-            router.push({ path, query: currentTag.query });
+            router.push({ path, query: currentTag?.query });
             closeOtherTagsView(path);
             break;
         case 3:
@@ -211,8 +265,8 @@ const onCurrentContextmenuClick = (data: any) => {
     }
 };
 // 判断页面高亮
-const isActive = (route: any) => {
+const isActive = (tagView: TagsView) => {
-    return route.fullPath === state.routePath;
+    return tagView.path === state.routePath;
 };
 // 右键点击时：传 x,y 坐标值到子组件中（props）
 const onContextmenu = (v: any, e: any) => {
@@ -223,7 +277,7 @@ const onContextmenu = (v: any, e: any) => {
 };
 // 当前的 tagsView 项点击时
 const onTagsClick = (v: any, k: number) => {
-    state.routePath = decodeURI(v.fullPath);
+    state.routePath = decodeURI(v.path);
     state.tagsRefsIndex = k;
     router.push(v);
 };
@@ -288,9 +342,9 @@ const tagsViewmoveToCurrentTag = () => {
     });
 };
 // 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
-const getTagsRefsIndex = (path: string) => {
+const setTagsRefsIndex = (path: string) => {
-    if (state.tagsViewList.length > 0) {
+    if (tagsViews.value.length > 0) {
-        state.tagsRefsIndex = state.tagsViewList.findIndex((item: any) => item.fullPath === path);
+        state.tagsRefsIndex = tagsViews.value.findIndex((item: any) => item.path === path);
     }
 };
 // 设置 tagsView 可以进行拖拽
@@ -305,7 +359,7 @@ const initSortable = () => {
             onEnd: () => {
                 const sortEndList: any = [];
                 state.sortable.toArray().map((val: any) => {
-                    state.tagsViewList.map((v: any) => {
+                    tagsViews.value.map((v: any) => {
                         if (v.name === val) sortEndList.push({ ...v });
                     });
                 });
@@ -315,18 +369,6 @@ const initSortable = () => {
     }
 };
 
-// 监听路由的变化，动态赋值给 tagsView
-// watch(
-// 	pinia.state,
-// 	(val) => {
-// 		if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
-// 		getTagsViewRoutes();
-// 	},
-// 	{
-// 		deep: true,
-// 	}
-// );
-
 // 页面加载前
 onBeforeMount(() => {
     // 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
@@ -357,17 +399,18 @@ onMounted(() => {
 });
 // 路由更新时
 onBeforeRouteUpdate((to) => {
-    state.routePath = decodeURI(to.fullPath);
+    const path = decodeURI(to.fullPath);
-    addTagsView(to.fullPath, to);
+    state.routePath = path;
-    getTagsRefsIndex(to.fullPath);
+    addTagsView(path, to, state.tagsRefsIndex);
+    setTagsRefsIndex(path);
     tagsViewmoveToCurrentTag();
 });
 </script>
 
 <style scoped lang="scss">
 .layout-navbars-tagsview {
-    background-color: var(--el-color-white);
+    background-color: var(--bg-main-color);
-    border-bottom: 1px solid var(--next-border-color-light);
+    border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
     position: relative;
     z-index: 4;
 

mayfly_go_web/src/layout/navMenu/horizontal.vue

@@ -1,24 +1,23 @@
 <template>
     <div class="el-menu-horizontal-warp">
         <el-scrollbar @wheel.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
-            <el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal"
+            <el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal" @select="onHorizontalSelect">
-                @select="onHorizontalSelect">
                 <template v-for="val in menuLists">
                     <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
                         <template #title>
-                            <SvgIcon :name="val.meta.icon"/>
+                            <SvgIcon :name="val.meta.icon" />
                             <span>{{ val.meta.title }}</span>
                         </template>
                         <SubItem :chil="val.children" />
                     </el-sub-menu>
                     <el-menu-item :index="val.path" :key="val?.path" v-else>
                         <template #title v-if="!val.meta.link || (val.meta.link && val.meta.linkType == 1)">
-                            <SvgIcon :name="val.meta.icon"/>
+                            <SvgIcon :name="val.meta.icon" />
                             {{ val.meta.title }}
                         </template>
                         <template #title v-else>
                             <a :href="val.meta.link" target="_blank">
-                                <SvgIcon :name="val.meta.icon"/>
+                                <SvgIcon :name="val.meta.icon" />
                                 {{ val.meta.title }}
                             </a>
                         </template>
@@ -32,7 +31,7 @@
 <script lang="ts" setup name="navMenuHorizontal">
 import { reactive, computed, getCurrentInstance, onMounted, nextTick } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import SubItem from '@/views/layout/navMenu/subItem.vue';
+import SubItem from '@/layout/navMenu/subItem.vue';
 import { useRoutesList } from '@/store/routesList';
 import { useThemeConfig } from '@/store/themeConfig';
 import mittBus from '@/common/utils/mitt';

mayfly_go_web/src/layout/navMenu/vertical.vue

@@ -1,21 +1,28 @@
 <template>
-    <el-menu router :default-active="state.defaultActive" background-color="transparent" :collapse="setIsCollapse"
+    <el-menu
-        :unique-opened="themeConfig.isUniqueOpened" :collapse-transition="false">
+        router
+        :default-active="state.defaultActive"
+        background-color="transparent"
+        :collapse="setIsCollapse"
+        :unique-opened="themeConfig.isUniqueOpened"
+        :collapse-transition="false"
+    >
         <template v-for="val in menuLists">
             <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
                 <template #title>
-                    <SvgIcon :name="val.meta.icon"/>
+                    <SvgIcon :name="val.meta.icon" />
                     <span>{{ val.meta.title }}</span>
                 </template>
                 <SubItem :chil="val.children" />
             </el-sub-menu>
             <el-menu-item :index="val.path" :key="val?.path" v-else>
-                <SvgIcon :name="val.meta.icon"/>
+                <SvgIcon :name="val.meta.icon" />
                 <template #title v-if="!val.meta.link || (val.meta.link && val.meta.linkType == 1)">
                     <span>{{ val.meta.title }}</span>
                 </template>
                 <template #title v-else>
-                    <a :href="val.meta.link" target="_blank">{{ val.meta.title }}</a></template>
+                    <a :href="val.meta.link" target="_blank">{{ val.meta.title }}</a></template
+                >
             </el-menu-item>
         </template>
     </el-menu>
@@ -26,7 +33,7 @@ import { reactive, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import SubItem from '@/views/layout/navMenu/subItem.vue';
+import SubItem from '@/layout/navMenu/subItem.vue';
 import mittBus from '@/common/utils/mitt';
 
 // 定义父组件传过来的值

mayfly_go_web/src/layout/routerView/parent.vue

@@ -2,7 +2,7 @@
     <div class="h100">
         <router-view v-slot="{ Component }">
             <transition :name="setTransitionName" mode="out-in">
-                <keep-alive :include="state.keepAliveNameList">
+                <keep-alive :include="getKeepAliveNames">
                     <component :is="Component" :key="state.refreshRouterViewKey" class="w100" />
                 </keep-alive>
             </transition>
@@ -11,38 +11,62 @@
 </template>
 
 <script lang="ts" setup name="layoutParentView">
-import { computed, reactive, onBeforeMount, onUnmounted, nextTick } from 'vue';
+import { computed, watch, reactive, onBeforeMount, onMounted, onUnmounted, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
 import { useKeepALiveNames } from '@/store/keepAliveNames';
 import mittBus from '@/common/utils/mitt';
+import { getTagViews } from '@/common/utils/storage';
 
 const route = useRoute();
 const { themeConfig } = storeToRefs(useThemeConfig());
-const { keepAliveNames } = storeToRefs(useKeepALiveNames());
+const { keepAliveNames, cachedViews } = storeToRefs(useKeepALiveNames());
+
 const state: any = reactive({
     refreshRouterViewKey: null,
     keepAliveNameList: [],
-    keepAliveNameNewList: [],
 });
-// 监听路由的变化，动态赋值给refreshRouterViewKey
+
-// onBeforeRouteUpdate((to: any) => {
+// 获取组件缓存列表(name值)
-// 	state.refreshRouterViewKey = decodeURI(to.fullPath);
+const getKeepAliveNames = computed(() => {
-// });
+    return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
+});
+
 // 页面加载前，处理缓存，页面刷新时路由缓存处理
 onBeforeMount(() => {
     state.keepAliveNameList = keepAliveNames.value;
     mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
         if (decodeURI(route.fullPath) !== path) return false;
         state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
-        state.refreshRouterViewKey = route.path;
+        state.refreshRouterViewKey = '';
         nextTick(() => {
-            state.refreshRouterViewKey = null;
+            state.refreshRouterViewKey = path;
             state.keepAliveNameList = keepAliveNames.value;
         });
     });
 });
+// 页面加载时
+onMounted(() => {
+    nextTick(() => {
+        setTimeout(() => {
+            if (themeConfig.value.isCacheTagsView) {
+                let tagsViewArr: any = getTagViews() || [];
+                cachedViews.value = tagsViewArr.filter((item: any) => item?.isKeepAlive).map((item: any) => item.name as string);
+            }
+        }, 0);
+    });
+});
+// 监听路由变化，防止 tagsView 多标签时，切换动画消失
+watch(
+    () => route.fullPath,
+    () => {
+        state.refreshRouterViewKey = decodeURI(route.fullPath);
+    },
+    {
+        immediate: true,
+    }
+);
 // 设置主界面切换动画
 const setTransitionName = computed(() => {
     return themeConfig.value.animation;

mayfly_go_web/src/main.ts

@@ -9,22 +9,20 @@ import { registElSvgIcon } from '@/common/utils/svgIcons';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'element-plus/theme-chalk/dark/css-vars.css';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import { ElMessage } from 'element-plus';
 
 import '@/theme/index.scss';
-import '@/assets/font/font.css'
+import '@/assets/font/font.css';
-import '@/assets/iconfont/iconfont.js'
+import '@/assets/iconfont/iconfont.js';
 
 const app = createApp(App);
 
 registElSvgIcon(app);
 directive(app);
 
-app.use(pinia)
+app.use(pinia).use(router).use(ElementPlus, { size: globalComponentSize, locale: zhCn }).mount('#app');
-    .use(router)
-    .use(ElementPlus, { size: globalComponentSize, locale: zhCn })
-    .mount('#app');
 
 // 屏蔽警告信息
 app.config.warnHandler = () => null;
@@ -32,8 +30,8 @@ app.config.warnHandler = () => null;
 app.config.errorHandler = function (err: any, vm, info) {
     // 如果是断言错误，则进行提示即可
     if (err.name == 'AssertError') {
-        ElMessage.error(err.message)
+        ElMessage.error(err.message);
     } else {
-        console.error(err, info)
+        console.error(err, info);
     }
-}
+};

mayfly_go_web/src/router/index.ts

@@ -1,10 +1,10 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
-import { getSession, clearSession } from '@/common/utils/storage';
+import { clearSession, getToken } from '@/common/utils/storage';
-import { templateResolve } from '@/common/utils/string'
+import { templateResolve } from '@/common/utils/string';
 import { NextLoading } from '@/common/utils/loading';
-import { dynamicRoutes, staticRoutes, pathMatch } from './route'
+import { dynamicRoutes, staticRoutes, pathMatch } from './route';
 import openApi from '@/common/openApi';
 import sockets from '@/common/sockets';
 import pinia from '@/store/index';
@@ -18,7 +18,7 @@ import { useKeepALiveNames } from '@/store/keepAliveNames';
  * @method import.meta.glob
  * @link 参考：https://cn.vitejs.dev/guide/features.html#json
  */
-const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
+const viewsModules: any = import.meta.glob(['../views/**/*.{vue,tsx}']);
 const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...viewsModules });
 
 // 添加静态路由
@@ -29,95 +29,106 @@ const router = createRouter({
 
 // 前端控制路由：初始化方法，防止刷新时丢失
 export function initAllFun() {
-    NextLoading.start(); // 界面 loading 动画开始执行
+    const token = getToken(); // 获取浏览器缓存 token 值
-    const token = getSession('token'); // 获取浏览器缓存 token 值
     if (!token) {
         // 无 token 停止执行下一步
-        return false
+        return false;
     }
     useUserInfo().setUserInfo({});
     router.addRoute(pathMatch); // 添加404界面
     resetRoute(); // 删除/重置路由
-    // 添加动态路由
+    router.addRoute(dynamicRoutes[0]);
-    setFilterRouteEnd().forEach((route: any) => {
+
-        router.addRoute((route as unknown) as RouteRecordRaw);
-    });
     // 过滤权限菜单
-    useRoutesList().setRoutesList(setFilterMenuFun(dynamicRoutes[0].children, useUserInfo().userInfo.menus))
+    useRoutesList().setRoutesList(dynamicRoutes[0].children);
 }
 
 // 后端控制路由：执行路由数据初始化
 export async function initBackEndControlRoutesFun() {
-    NextLoading.start(); // 界面 loading 动画开始执行
+    const token = getToken(); // 获取浏览器缓存 token 值
-    const token = getSession('token'); // 获取浏览器缓存 token 值
     if (!token) {
         // 无 token 停止执行下一步
-        return false
+        return false;
     }
     useUserInfo().setUserInfo({});
     // 获取路由
     let menuRoute = await getBackEndControlRoutes();
-    dynamicRoutes[0].children = backEndRouterConverter(menuRoute); // 处理路由（component）
+
+    const cacheList: Array<string> = [];
+    // 处理路由（component）
+    dynamicRoutes[0].children = backEndRouterConverter(menuRoute, (router: any) => {
+        // 可能为false时不存在isKeepAlive属性
+        if (!router.meta.isKeepAlive) {
+            router.meta.isKeepAlive = false;
+        }
+        if (router.meta.isKeepAlive) {
+            cacheList.push(router.name);
+        }
+    });
+    useKeepALiveNames().setCacheKeepAlive(cacheList);
+
     // 添加404界面
     router.addRoute(pathMatch);
     resetRoute(); // 删除/重置路由
-    // 添加动态路由
+    router.addRoute(dynamicRoutes[0] as unknown as RouteRecordRaw);
-    formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).forEach((route: any) => {
+
-        router.addRoute((route as unknown) as RouteRecordRaw);
+    useRoutesList().setRoutesList(dynamicRoutes[0].children);
-    });
-    useRoutesList().setRoutesList(dynamicRoutes[0].children)
 }
 
 // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
 export async function getBackEndControlRoutes() {
     try {
-        const menuAndPermission = await openApi.getPermissions.request();
+        const menuAndPermission = await openApi.getPermissions();
         // 赋值权限码，用于控制按钮等
         useUserInfo().userInfo.permissions = menuAndPermission.permissions;
         return menuAndPermission.menus;
     } catch (e: any) {
         console.error(e);
-        return []
+        return [];
     }
 }
 
+type RouterConvCallbackFunc = (router: any) => void;
+
 // 后端控制路由，后端返回路由 转换为vue route
-export function backEndRouterConverter(routes: any, parentPath: string = "/") {
+export function backEndRouterConverter(routes: any, callbackFunc: RouterConvCallbackFunc = null as any, parentPath: string = '/') {
     if (!routes) return;
     return routes.map((item: any) => {
         if (!item.meta) {
-            return item
+            return item;
         }
         // 将json字符串的meta转为对象
-        item.meta = JSON.parse(item.meta)
+        item.meta = JSON.parse(item.meta);
         // 将meta.comoponet 解析为route.component
         if (item.meta.component) {
-            item.component = dynamicImport(dynamicViewsModules, item.meta.component)
+            item.component = dynamicImport(dynamicViewsModules, item.meta.component);
-            delete item.meta['component']
+            delete item.meta['component'];
         }
         // route.path == resource.code
-        let path = item.code
+        let path = item.code;
         // 如果不是以 / 开头，则路径需要拼接父路径
-        if (!path.startsWith("/")) {
+        if (!path.startsWith('/')) {
-            path = parentPath + "/" + path;
+            path = parentPath + '/' + path;
         }
-        item.path = path
+        item.path = path;
-        delete item['code']
+        delete item['code'];
 
         // route.meta.title == resource.name
-        item.meta.title = item.name
+        item.meta.title = item.name;
-        delete item['name']
+        delete item['name'];
 
         // route.name == resource.meta.routeName
-        item.name = item.meta.routeName
+        item.name = item.meta.routeName;
-        delete item.meta['routeName']
+        delete item.meta['routeName'];
 
         // route.redirect == resource.meta.redirect
         if (item.meta.redirect) {
-            item.redirect = item.meta.redirect
+            item.redirect = item.meta.redirect;
-            delete item.meta['redirect']
+            delete item.meta['redirect'];
         }
-        item.children && backEndRouterConverter(item.children, item.path);
+        // 存在回调，则执行回调
+        callbackFunc && callbackFunc(item);
+        item.children && backEndRouterConverter(item.children, callbackFunc, item.path);
         return item;
     });
 }
@@ -143,86 +154,6 @@ export function dynamicImport(dynamicViewsModules: Record<string, Function>, com
     }
 }
 
-// 多级嵌套数组处理成一维数组
-export function formatFlatteningRoutes(arr: any) {
-    if (arr.length <= 0) return false;
-    for (let i = 0; i < arr.length; i++) {
-        if (arr[i].children) {
-            arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
-        }
-    }
-    return arr;
-}
-
-// 多级嵌套数组处理后的一维数组，再处理成 `定义动态路由` 的格式
-// 只保留二级：也就是二级以上全部处理成只有二级，keep-alive 支持二级缓存
-// isKeepAlive 处理 `name` 值，进行缓存。顶级关闭，全部不缓存
-export function formatTwoStageRoutes(arr: any) {
-    if (arr.length <= 0) return false;
-    const newArr: any = [];
-    const cacheList: Array<string> = [];
-    arr.forEach((v: any) => {
-        if (v.path === '/') {
-            newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
-        } else {
-            newArr[0].children.push({ ...v });
-            if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) {
-                cacheList.push(v.name);
-            }
-        }
-    });
-    useKeepALiveNames().setCacheKeepAlive(cacheList);
-    return newArr;
-}
-
-// 判断路由code 是否包含当前登录用户menus字段中，menus为字符串code数组
-export function hasAnth(menus: any, route: any) {
-    if (route.meta && route.meta.code) {
-        return menus.includes(route.meta.code)
-    }
-    return true
-}
-
-// 递归过滤有权限的路由
-export function setFilterMenuFun(routes: any, menus: any) {
-    const menu: any = [];
-    routes.forEach((route: any) => {
-        const item = { ...route };
-        if (hasAnth(menus, item)) {
-            if (item.children) {
-                item.children = setFilterMenuFun(item.children, menus)
-            }
-            menu.push(item);
-        }
-    });
-    return menu;
-}
-
-// 获取当前用户的权限去比对路由表，用于动态路由的添加
-export function setFilterRoute(chil: any) {
-    let filterRoute: any = [];
-    chil.forEach((route: any) => {
-        // 如果路由需要拥有指定code才可访问，则校验该用户菜单是否存在该code
-        if (route.meta.code) {
-            useUserInfo().userInfo.menus.forEach((m: any) => {
-                if (route.meta.code == m) {
-                    filterRoute.push({ ...route })
-                }
-            })
-        } else {
-            filterRoute.push({ ...route })
-        }
-    });
-    return filterRoute;
-}
-
-// 比对后的路由表，进行重新赋值
-export function setFilterRouteEnd() {
-    let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
-    filterRouteEnd[0].children = setFilterRoute(filterRouteEnd[0].children);
-    return filterRouteEnd;
-}
-
 // 删除/重置路由
 export function resetRoute() {
     useRoutesList().routesList.forEach((route: any) => {
@@ -232,14 +163,19 @@ export function resetRoute() {
 }
 
 export async function initRouter() {
-    // 初始化方法执行
+    NextLoading.start(); // 界面 loading 动画开始执行
-    const { isRequestRoutes } = useThemeConfig(pinia).themeConfig;
+    try {
-    if (!isRequestRoutes) {
+        // 初始化方法执行
-        // 未开启后端控制路由
+        const { isRequestRoutes } = useThemeConfig(pinia).themeConfig;
-        initAllFun();
+        if (!isRequestRoutes) {
-    } else if (isRequestRoutes) {
+            // 未开启后端控制路由
-        // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+            initAllFun();
-        await initBackEndControlRoutesFun();
+        } else if (isRequestRoutes) {
+            // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+            await initBackEndControlRoutesFun();
+        }
+    } finally {
+        NextLoading.done();
     }
 }
 
@@ -252,12 +188,12 @@ router.beforeEach(async (to, from, next) => {
     if (to.meta.title) NProgress.start();
 
     // 如果有标题参数，则再原标题后加上参数来区别
-    if (to.meta.titleRename) {
+    if (to.meta.titleRename && to.meta.title) {
-        to.meta.title = templateResolve(to.meta.title as string, to.query)
+        to.meta.title = templateResolve(to.meta.title as string, to.query);
     }
 
-    const token = getSession('token');
+    const token = getToken();
-    if (to.path === '/login' && !token) {
+    if ((to.path === '/login' || to.path == '/oauth2/callback') && !token) {
         next();
         NProgress.done();
         return;
@@ -270,7 +206,7 @@ router.beforeEach(async (to, from, next) => {
 
         if (SysWs) {
             SysWs.close();
-            SysWs = null;
+            SysWs = undefined;
         }
         return;
     }
@@ -297,7 +233,6 @@ router.beforeEach(async (to, from, next) => {
 // 路由加载后
 router.afterEach(() => {
     NProgress.done();
-    NextLoading.done();
 });
 
 // 导出路由

mayfly_go_web/src/router/route.ts

@@ -1,5 +1,5 @@
 import { RouteRecordRaw } from 'vue-router';
-import Layout from '@/views/layout/index.vue'
+import Layout from '@/layout/index.vue';
 
 // 定义动态路由
 export const dynamicRoutes = [
@@ -11,109 +11,109 @@ export const dynamicRoutes = [
         meta: {
             isKeepAlive: true,
         },
-        children: []
+        children: [],
-    //     children: [
+        //     children: [
-    //         {
+        //         {
-    //             path: '/home',
+        //             path: '/home',
-    //             name: 'home',
+        //             name: 'home',
-    //             component: () => import('@/views/home/index.vue'),
+        //             component: () => import('@/views/home/index.vue'),
-    //             meta: {
+        //             meta: {
-    //                 title: '首页',
+        //                 title: '首页',
-    //                 // iframe链接
+        //                 // iframe链接
-    //                 link: '',
+        //                 link: '',
-    //                 // 是否在菜单栏显示，默认显示
+        //                 // 是否在菜单栏显示，默认显示
-    //                 isHide: false,
+        //                 isHide: false,
-    //                 isKeepAlive: true,
+        //                 isKeepAlive: true,
-    //                 // tag标签是否不可删除
+        //                 // tag标签是否不可删除
-    //                 isAffix: true,
+        //                 isAffix: true,
-    //                 // 是否为iframe
+        //                 // 是否为iframe
-    //                 isIframe: false,
+        //                 isIframe: false,
-    //                 icon: 'el-icon-s-home',
+        //                 icon: 'el-icon-s-home',
-    //             },
+        //             },
-    //         },
+        //         },
-    //         {
+        //         {
-    //             path: '/sys',
+        //             path: '/sys',
-    //             name: 'Resource',
+        //             name: 'Resource',
-    //             redirect: '/sys/resources',
+        //             redirect: '/sys/resources',
-    //             meta: {
+        //             meta: {
-    //                 title: '系统管理',
+        //                 title: '系统管理',
-    //                 // 资源code，用于校验用户是否拥有该资源权限
+        //                 // 资源code，用于校验用户是否拥有该资源权限
-    //                 code: 'sys',
+        //                 code: 'sys',
-    //                 // isKeepAlive: true,
+        //                 // isKeepAlive: true,
-    //                 icon: 'el-icon-monitor',
+        //                 icon: 'el-icon-monitor',
-    //             },
+        //             },
-    //             children: [
+        //             children: [
-    //                 {
+        //                 {
-    //                     path: 'sys/resources',
+        //                     path: 'sys/resources',
-    //                     name: 'ResourceList',
+        //                     name: 'ResourceList',
-    //                     component: () => import('@/views/system/resource'),
+        //                     component: () => import('@/views/system/resource'),
-    //                     meta: {
+        //                     meta: {
-    //                         title: '资源管理',
+        //                         title: '资源管理',
-    //                         code: 'resource:list',
+        //                         code: 'resource:list',
-    //                         isKeepAlive: true,
+        //                         isKeepAlive: true,
-    //                         icon: 'el-icon-menu',
+        //                         icon: 'el-icon-menu',
-    //                     },
+        //                     },
-    //                 },
+        //                 },
-    //                 {
+        //                 {
-    //                     path: 'sys/roles',
+        //                     path: 'sys/roles',
-    //                     name: 'RoleList',
+        //                     name: 'RoleList',
-    //                     component: () => import('@/views/system/role'),
+        //                     component: () => import('@/views/system/role'),
-    //                     meta: {
+        //                     meta: {
-    //                         title: '角色管理',
+        //                         title: '角色管理',
-    //                         code: 'role:list',
+        //                         code: 'role:list',
-    //                         isKeepAlive: true,
+        //                         isKeepAlive: true,
-    //                         icon: 'el-icon-menu',
+        //                         icon: 'el-icon-menu',
-    //                     },
+        //                     },
-    //                 },
+        //                 },
-    //                 {
+        //                 {
-    //                     path: 'sys/accounts',
+        //                     path: 'sys/accounts',
-    //                     name: 'ResourceList',
+        //                     name: 'ResourceList',
-    //                     component: () => import('@/views/system/account'),
+        //                     component: () => import('@/views/system/account'),
-    //                     meta: {
+        //                     meta: {
-    //                         title: '账号管理',
+        //                         title: '账号管理',
-    //                         code: 'account:list',
+        //                         code: 'account:list',
-    //                         isKeepAlive: true,
+        //                         isKeepAlive: true,
-    //                         icon: 'el-icon-menu',
+        //                         icon: 'el-icon-menu',
-    //                     },
+        //                     },
-    //                 },
+        //                 },
-    //             ],
+        //             ],
-    //         },
+        //         },
-    //         {
+        //         {
-    //             path: '/machine',
+        //             path: '/machine',
-    //             name: 'Machine',
+        //             name: 'Machine',
-    //             redirect: '/machine/list',
+        //             redirect: '/machine/list',
-    //             meta: {
+        //             meta: {
-    //                 title: '机器管理',
+        //                 title: '机器管理',
-    //                 // 资源code，用于校验用户是否拥有该资源权限
+        //                 // 资源code，用于校验用户是否拥有该资源权限
-    //                 code: 'machine',
+        //                 code: 'machine',
-    //                 // isKeepAlive: true,
+        //                 // isKeepAlive: true,
-    //                 icon: 'el-icon-monitor',
+        //                 icon: 'el-icon-monitor',
-    //             },
+        //             },
-    //             children: [
+        //             children: [
-    //                 {
+        //                 {
-    //                     path: '/list',
+        //                     path: '/list',
-    //                     name: 'MachineList',
+        //                     name: 'MachineList',
-    //                     component: () => import('@/views/ops/machine'),
+        //                     component: () => import('@/views/ops/machine'),
-    //                     meta: {
+        //                     meta: {
-    //                         title: '机器列表',
+        //                         title: '机器列表',
-    //                         code: 'machine:list',
+        //                         code: 'machine:list',
-    //                         isKeepAlive: true,
+        //                         isKeepAlive: true,
-    //                         icon: 'el-icon-menu',
+        //                         icon: 'el-icon-menu',
-    //                     },
+        //                     },
-    //                 },
+        //                 },
-    //             ],
+        //             ],
-    //         },
+        //         },
-    //         {
+        //         {
-    //             path: '/personal',
+        //             path: '/personal',
-    //             name: 'personal',
+        //             name: 'personal',
-    //             component: () => import('@/views/personal/index.vue'),
+        //             component: () => import('@/views/personal/index.vue'),
-    //             meta: {
+        //             meta: {
-    //                 title: '个人中心',
+        //                 title: '个人中心',
-    //                 isKeepAlive: true,
+        //                 isKeepAlive: true,
-    //                 icon: 'el-icon-user',
+        //                 icon: 'el-icon-user',
-    //             },
+        //             },
-    //         },
+        //         },
-    //     ],
+        //     ],
     },
 ];
 
@@ -143,6 +143,14 @@ export const staticRoutes: Array<RouteRecordRaw> = [
             title: '没有权限',
         },
     },
+    {
+        path: '/oauth2/callback',
+        name: 'oauth2Callback',
+        component: () => import('@/views/oauth/Oauth2Callback.vue'),
+        meta: {
+            title: 'oauth2回调',
+        },
+    },
     {
         path: '/machine/terminal',
         name: 'machineTerminal',
@@ -160,4 +168,4 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 export const pathMatch = {
     path: '/:path(.*)*',
     redirect: '/404',
-};
+};

mayfly_go_web/src/store/keepAliveNames.ts

@@ -9,27 +9,29 @@ import { defineStore } from 'pinia';
  * @methods delAllCachedViews 右键菜单`全部关闭`，删除要缓存的路由 names（关闭 Tagsview）
  */
 export const useKeepALiveNames = defineStore('keepALiveNames', {
-	state: (): KeepAliveNamesState => ({
+    state: (): KeepAliveNamesState => ({
-		keepAliveNames: [],
+        keepAliveNames: [],
-		cachedViews: [],
+        cachedViews: [],
-	}),
+    }),
-	actions: {
+    actions: {
-		async setCacheKeepAlive(data: Array<string>) {
+        async setCacheKeepAlive(data: Array<string>) {
-			this.keepAliveNames = data;
+            this.keepAliveNames = data;
-		},
+        },
-		async addCachedView(view: any) {
+        async addCachedView(view: any) {
-			if (view.meta.isKeepAlive) this.cachedViews?.push(view.name);
+            if (view.isKeepAlive) {
-		},
+                this.cachedViews?.push(view.name);
-		async delCachedView(view: any) {
+            }
-			const index = this.cachedViews.indexOf(view.name);
+        },
-			index > -1 && this.cachedViews.splice(index, 1);
+        async delCachedView(view: any) {
-		},
+            const index = this.cachedViews.indexOf(view.name);
-		async delOthersCachedViews(view: any) {
+            index > -1 && this.cachedViews.splice(index, 1);
-			if (view.meta.isKeepAlive) this.cachedViews = [view.name];
+        },
-			else this.cachedViews = [];
+        async delOthersCachedViews(view: any) {
-		},
+            if (view.isKeepAlive) this.cachedViews = [view.name];
-		async delAllCachedViews() {
+            else this.cachedViews = [];
-			this.cachedViews = [];
+        },
-		},
+        async delAllCachedViews() {
-	},
+            this.cachedViews = [];
+        },
+    },
 });

mayfly_go_web/src/store/routesList.ts

@@ -7,12 +7,12 @@ import { defineStore } from 'pinia';
  * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
  */
 export const useRoutesList = defineStore('routesList', {
-	state: (): RoutesListState => ({
+    state: (): RoutesListState => ({
-		routesList: [],
+        routesList: [],
-	}),
+    }),
-	actions: {
+    actions: {
-		async setRoutesList(data: Array<string>) {
+        async setRoutesList(data: Array<string>) {
-			this.routesList = data;
+            this.routesList = data;
-		},
+        },
-	},
+    },
-});
+});

mayfly_go_web/src/store/tagsViews.ts

@@ -0,0 +1,25 @@
+import { getNowUrl } from '@/common/utils/url';
+import { defineStore } from 'pinia';
+
+/**
+ * tags view
+ */
+export const useTagsViews = defineStore('tagsViews', {
+    state: (): TagsViewsState => ({
+        tagsViews: [],
+    }),
+    actions: {
+        setTagsViews(data: Array<TagsView>) {
+            this.tagsViews = data;
+        },
+        // 设置当前页面的tags view title
+        setNowTitle(title: string) {
+            this.tagsViews.forEach((item) => {
+                // console.log(getNowUrl(), item.path);
+                if (item.path == getNowUrl()) {
+                    item.title = title;
+                }
+            });
+        },
+    },
+});

mayfly_go_web/src/store/themeConfig.ts

@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia';
+import { dateFormat2 } from '@/common/utils/date';
+import { useUserInfo } from '@/store/userInfo';
 
 export const useThemeConfig = defineStore('themeConfig', {
     state: (): ThemeConfigState => ({
@@ -24,13 +26,13 @@ export const useThemeConfig = defineStore('themeConfig', {
             // 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             topBar: '#ffffff',
             // 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-            menuBar: '#545c64',
+            menuBar: '#FFFFFF',
             // 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             columnsMenuBar: '#545c64',
             // 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             topBarColor: '#606266',
             // 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-            menuBarColor: '#eaeaea',
+            menuBarColor: '#606266',
             // 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             columnsMenuBarColor: '#e6e6e6',
             // 是否开启顶栏背景颜色渐变
@@ -81,14 +83,16 @@ export const useThemeConfig = defineStore('themeConfig', {
             isSortableTagsView: true,
             // 是否开启 Footer 底部版权信息
             isFooter: false,
+            // 是否暗模式
+            isDark: false,
             // 是否开启灰色模式
             isGrayscale: false,
             // 是否开启色弱模式
             isInvert: false,
             // 是否开启水印
-            isWartermark: false,
+            isWatermark: false,
-            // 水印文案
+            // 水印文案数组，0->用户信息  1->当前时间 2->额外信息
-            wartermarkText: 'mayfly',
+            watermarkText: ['', '', ''],
 
             /* 其它设置
             ------------------------------- */
@@ -116,7 +120,6 @@ export const useThemeConfig = defineStore('themeConfig', {
             // 编辑器主题
             editorTheme: 'vs',
 
-
             /* 后端控制路由
             ------------------------------- */
             // 是否开启后端控制路由
@@ -139,5 +142,40 @@ export const useThemeConfig = defineStore('themeConfig', {
         setThemeConfig(data: ThemeConfigState) {
             this.themeConfig = data.themeConfig;
         },
+        // 切换暗模式
+        switchDark(isDark: boolean) {
+            this.themeConfig.isDark = isDark;
+            const body = document.documentElement as HTMLElement;
+            if (isDark) {
+                body.setAttribute('class', 'dark');
+                this.themeConfig.editorTheme = 'vs-dark';
+            } else {
+                body.setAttribute('class', '');
+                this.themeConfig.editorTheme = 'SolarizedLight';
+            }
+        },
+        // 设置水印配置信息
+        setWatermarkConfig(useWatermarkConfig: any) {
+            this.themeConfig.watermarkText = [];
+            this.themeConfig.isWatermark = useWatermarkConfig.isUse;
+            if (!useWatermarkConfig.isUse) {
+                return;
+            }
+            // 索引2为用户自定义水印信息
+            this.themeConfig.watermarkText[2] = useWatermarkConfig.content;
+        },
+        // 设置水印用户信息
+        setWatermarkUser(del: boolean = false) {
+            const userinfo = useUserInfo().userInfo;
+            let desc = '';
+            if (!del && userinfo && userinfo.username) {
+                desc = `${userinfo.username}(${userinfo.name})`;
+            }
+            this.themeConfig.watermarkText[0] = desc;
+        },
+        // 设置水印时间为当前时间
+        setWatermarkNowTime() {
+            this.themeConfig.watermarkText[1] = dateFormat2('yyyy-MM-dd HH:mm:ss', new Date());
+        },
     },
-})
+});

mayfly_go_web/src/store/userInfo.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { getSession } from '@/common/utils/storage';
+import { getUser } from '@/common/utils/storage';
 
 export const useUserInfo = defineStore('userInfo', {
     state: (): UserInfoState => ({
@@ -8,12 +8,12 @@ export const useUserInfo = defineStore('userInfo', {
     actions: {
         // 设置用户信息
         async setUserInfo(data: object) {
-            const ui = getSession('userInfo')
+            const ui = getUser();
-			if (ui) {
+            if (ui) {
-				this.userInfo = ui;
+                this.userInfo = ui;
-			} else {
+            } else {
-				this.userInfo = data;
+                this.userInfo = data;
-			}
+            }
         },
-    }
+    },
-})
+});