feat: 1.8.3

refactor: 代码优化与数据库表列显示配置优化
refactor: 机器计划任务与流程定义关联至标签
2025-11-02 23:40:24 +08:00 · 2024-05-10 19:59:49 +08:00 · 2024-05-09 21:29:34 +08:00 · 2024-05-08 21:04:25 +08:00 · 2024-05-07 11:59:12 +00:00 · 2024-05-05 14:53:30 +08:00
696 changed files with 60644 additions and 13835 deletions
--- a/18
+++ b/18
@@ -1,16 +1,16 @@
 # 构建前端资源
-FROM node:18-alpine3.16 as fe-builder
+FROM node:18-bookworm-slim as fe-builder

 WORKDIR /mayfly

 COPY mayfly_go_web .

-RUN yarn
-
-RUN yarn build
+RUN yarn config set registry 'https://registry.npmmirror.com' && \
+    yarn install && \
+    yarn build

 # 构建后端资源
-FROM golang:1.21.0 as be-builder
+FROM golang:1.22 as be-builder

 ENV GOPROXY https://goproxy.cn
 WORKDIR /mayfly
@@ -24,12 +24,14 @@ COPY --from=fe-builder /mayfly/dist /mayfly/static/static

 # Build
 RUN GO111MODULE=on CGO_ENABLED=0 GOOS=linux \
-    go build -a \
+    go build -a -ldflags=-w \
    -o mayfly-go main.go

-FROM alpine:3.16
+FROM debian:bookworm-slim

-RUN apk add --no-cache ca-certificates bash expat
+RUN apt-get update && \
+    apt-get install -y ca-certificates expat libncurses5 && \
+    apt-get clean

 ENV TZ=Asia/Shanghai
 RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@
    <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.21%2B-yellow.svg" alt="golang"/>
+    <img src="https://img.shields.io/badge/Golang-1.22%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">
@@ -22,7 +22,7 @@

 ### 介绍

-web 版 **linux(终端[终端回放] 文件 脚本 进程 计划任务)、数据库（mysql postgres）、redis(单机 哨兵 集群)、mongo 统一管理操作平台**
+web 版 **linux(终端[终端回放、命令过滤] 文件 脚本 进程 计划任务)、数据库（mysql postgres oracle sqlserver 达梦 高斯 sqlite）数据同步 数据迁移、redis(单机 哨兵 集群)、mongo 等集工单流程审批于一体的统一管理操作平台**

 ### 开发语言与主要框架

@@ -45,56 +45,61 @@ http://go.mayfly.run

 ### 系统核心功能截图

-##### 记录操作记录
+#### 首页

-![记录操作记录](https://objs.gitee.io/mayfly-go-docs/home/log.jpg "屏幕截图.png")
+![首页](https://foruda.gitee.com/images/1714378104294194769/149fd257_1240250.png "屏幕截图")

 #### 机器操作

 ##### 状态查看

-![状态查看](https://objs.gitee.io/mayfly-go-docs/home/machine-status.jpg "屏幕截图.png")
+![机器状态查看](https://foruda.gitee.com/images/1714378556642584686/93c46ec0_1240250.png "屏幕截图")

 ##### ssh 终端

-![ssh终端](https://objs.gitee.io/mayfly-go-docs/home/machine-ssh.jpg "屏幕截图.png")
+![终端操作](https://foruda.gitee.com/images/1714378353790214943/2864ba66_1240250.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")
+![文件操作](https://foruda.gitee.com/images/1714378417206086701/74a188d8_1240250.png "屏幕截图")
+
+![文件查看](https://foruda.gitee.com/images/1714378482611638688/7753faf6_1240250.png "屏幕截图")

 #### 数据库操作

 ##### sql 编辑器

-![sql编辑器](https://objs.gitee.io/mayfly-go-docs/home/dbms-sql-editor.jpg "屏幕截图.png")
+![sql编辑器](https://foruda.gitee.com/images/1714378747473077515/3c9387c0_1240250.png "屏幕截图")

 ##### 在线增删改查数据

-![选表查数据](https://objs.gitee.io/mayfly-go-docs/home/dbms-show-table-data.jpg "屏幕截图.png")
+![选表查数据](https://foruda.gitee.com/images/1714378625059063750/3951e5a8_1240250.png "屏幕截图")

 #### Redis 操作

-![数据](https://objs.gitee.io/mayfly-go-docs/home/redis-data-list.jpg "屏幕截图.png")
+![redis操作](https://foruda.gitee.com/images/1714378855845451114/4c3f0097_1240250.png "屏幕截图")

 #### Mongo 操作

-![数据](https://objs.gitee.io/mayfly-go-docs/home/mongo-op.jpg "屏幕截图.png")
+![mongo操作](https://foruda.gitee.com/images/1714378916425714642/77fc0ed9_1240250.png "屏幕截图")

-##### 系统管理
+#### 工单流程审批
+
+![流程审批](https://foruda.gitee.com/images/1714379057627690037/ad136862_1240250.png "屏幕截图")
+
+#### 系统管理

 ##### 账号管理

-![账号管理](https://images.gitee.com/uploads/images/2021/0607/173919_a8d7dc18_1240250.png "屏幕截图.png")
+![账号管理](https://foruda.gitee.com/images/1714379179491881231/c6d802ae_1240250.png "屏幕截图")

 ##### 角色管理

-![角色管理](https://images.gitee.com/uploads/images/2021/0607/174028_3654fb28_1240250.png "屏幕截图.png")
+![角色管理](https://foruda.gitee.com/images/1714379269408676381/6ac1e85c_1240250.png "屏幕截图")

-##### 资源管理
+##### 菜单资源管理

-![资源管理](https://images.gitee.com/uploads/images/2021/0607/174436_e9e1535c_1240250.png "屏幕截图.png")
+![菜单资源管理](https://foruda.gitee.com/images/1714379321338009940/a00d6a02_1240250.png "屏幕截图")

 **其他更多功能&操作指南可查看在线文档**: https://www.yuque.com/may-fly/mayfly-go

--- a/build_release.sh
+++ b/build_release.sh
@@ -56,7 +56,7 @@ function build() {
    if [ "${os}" == "windows" ];then
        execFileName="${execFileName}.exe"
    fi
-    CGO_ENABLE=0 GOOS=${os} GOARCH=${arch} go build -o ${execFileName} main.go
+    CGO_ENABLE=0 GOOS=${os} GOARCH=${arch} go build -ldflags=-w -o ${execFileName} main.go

    if [ -d ${toFolder} ] ; then
        echo_green "目标文件夹已存在,清空文件夹"
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -14,7 +14,7 @@ services:
    restart: always

  server:
-    image: mayfly-go:v1.3.1
+    image: ccr.ccs.tencentyun.com/mayfly/mayfly-go:v1.8.3
    build:
      context: .
      dockerfile: Dockerfile
--- a/mayfly_go_web/.env.development
+++ b/mayfly_go_web/.env.development
@@ -1,6 +1,8 @@
 # 本地环境
 ENV = 'development'

+VITE_OPEN = true
+
 # 本地环境接口地址
 VITE_API_URL = '/api'

--- a/mayfly_go_web/.gitignore
+++ b/mayfly_go_web/.gitignore
@@ -1,7 +1,8 @@
 .DS_Store
 node_modules
 /dist
-
+*.lock
+pnpm-lock.yaml

 # local env files
 .env.local
--- a/mayfly_go_web/LICENSE
+++ b/mayfly_go_web/LICENSE
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 lyt-Top
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -9,32 +9,32 @@
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
  },
  "dependencies": {
-    "@element-plus/icons-vue": "^2.1.0",
-    "@vueuse/core": "^10.7.0",
-    "asciinema-player": "^3.6.2",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^10.9.0",
+    "asciinema-player": "^3.7.1",
    "axios": "^1.6.2",
    "clipboard": "^2.0.11",
-    "countup.js": "^2.7.0",
-    "cropperjs": "^1.5.11",
-    "echarts": "^5.4.3",
-    "element-plus": "^2.4.3",
-    "js-base64": "^3.7.5",
+    "cropperjs": "^1.6.1",
+    "echarts": "^5.5.0",
+    "element-plus": "^2.7.2",
+    "js-base64": "^3.7.7",
    "jsencrypt": "^3.3.2",
    "lodash": "^4.17.21",
    "mitt": "^3.0.1",
-    "monaco-editor": "^0.45.0",
+    "monaco-editor": "^0.48.0",
    "monaco-sql-languages": "^0.11.0",
    "monaco-themes": "^0.4.4",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "qrcode.vue": "^3.4.1",
    "screenfull": "^6.0.2",
-    "sortablejs": "^1.15.0",
+    "sortablejs": "^1.15.2",
    "splitpanes": "^3.1.5",
-    "sql-formatter": "^14.0.0",
+    "sql-formatter": "^15.0.2",
+    "trzsz": "^1.1.5",
    "uuid": "^9.0.1",
-    "vue": "^3.3.11",
-    "vue-router": "^4.2.5",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0",
    "xterm-addon-search": "^0.13.0",
@@ -42,21 +42,22 @@
  },
  "devDependencies": {
    "@types/lodash": "^4.14.178",
-    "@types/node": "^15.6.0",
+    "@types/node": "^18.14.0",
    "@types/nprogress": "^0.2.0",
-    "@types/sortablejs": "^1.15.3",
+    "@types/sortablejs": "^1.15.8",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
-    "@vitejs/plugin-vue": "^4.5.1",
-    "@vue/compiler-sfc": "^3.3.10",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.27",
+    "code-inspector-plugin": "^0.4.5",
    "dotenv": "^16.3.1",
    "eslint": "^8.35.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "prettier": "^3.1.0",
-    "sass": "^1.69.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.7",
-    "vue-eslint-parser": "^9.3.2"
+    "eslint-plugin-vue": "^9.25.0",
+    "prettier": "^3.2.5",
+    "sass": "^1.76.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vue-eslint-parser": "^9.4.2"
  },
  "browserslist": [
    "> 1%",
--- a/mayfly_go_web/src/App.vue
+++ b/mayfly_go_web/src/App.vue
@@ -4,7 +4,7 @@
            :zIndex="10000000"
            :width="210"
            v-if="themeConfig.isWatermark"
-            :font="{ color: 'rgba(180, 180, 180, 0.5)' }"
+            :font="{ color: 'rgba(180, 180, 180, 0.3)' }"
            :content="themeConfig.watermarkText"
            class="h100"
        >
@@ -22,12 +22,9 @@ import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
-import { getLocal } from '@/common/utils/storage';
 import LockScreen from '@/layout/lockScreen/index.vue';
 import Setings from '@/layout/navBars/breadcrumb/setings.vue';
 import mittBus from '@/common/utils/mitt';
-import { getThemeConfig } from './common/utils/storage';
-import { useWatermark } from '@/common/sysconfig';
 import { useIntervalFn } from '@vueuse/core';

 const setingsRef = ref();
@@ -49,17 +46,8 @@ onMounted(() => {
            openSetingsDrawer();
        });

-        // 获取缓存中的布局配置
-        const tc = getThemeConfig();
-        if (tc) {
-            themeConfigStores.setThemeConfig({ themeConfig: tc });
-            document.documentElement.style.cssText = getLocal('themeConfigStyle');
-        }
-
-        // 是否开启水印
-        useWatermark().then((res) => {
-            themeConfigStores.setWatermarkConfig(res);
-        });
+        // 初始化系统主题
+        themeConfigStores.initThemeConfig();
    });
 });

--- a/mayfly_go_web/src/assets/iconfont/iconfont.js
+++ b/mayfly_go_web/src/assets/iconfont/iconfont.js
--- a/mayfly_go_web/src/assets/iconfont/iconfont.json
+++ b/mayfly_go_web/src/assets/iconfont/iconfont.json
@@ -53,6 +53,55 @@
      "font_class": "redis",
      "unicode": "e619",
      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "25271976",
+      "name": "oracle",
+      "font_class": "oracle",
+      "unicode": "e507",
+      "unicode_decimal": 58631
+    },
+    {
+      "icon_id": "8105644",
+      "name": "mariadb",
+      "font_class": "mariadb",
+      "unicode": "e513",
+      "unicode_decimal": 58643
+    },
+    {
+      "icon_id": "13601813",
+      "name": "sqlite",
+      "font_class": "sqlite",
+      "unicode": "e546",
+      "unicode_decimal": 58694
+    },
+    {
+      "icon_id": "29340317",
+      "name": "temp-mssql",
+      "font_class": "MSSQLNATIVE",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "7699332",
+      "name": "gaussdb",
+      "font_class": "gauss",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "34836637",
+      "name": "kingbase",
+      "font_class": "kingbase",
+      "unicode": "e882",
+      "unicode_decimal": 59522
+    },
+    {
+      "icon_id": "33047500",
+      "name": "vastbase",
+      "font_class": "vastbase",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
    }
  ]
 }
--- a/mayfly_go_web/src/common/Api.ts
+++ b/mayfly_go_web/src/common/Api.ts
@@ -1,5 +1,5 @@
 import request from './request';
-import { useApiFetch } from './useRequest';
+import { useApiFetch } from '@/hooks/useRequest';

 /**
 * 可用于各模块定义各自api请求
--- a/mayfly_go_web/src/common/Enum.ts
+++ b/mayfly_go_web/src/common/Enum.ts
@@ -22,6 +22,8 @@ export class EnumValue {
     */
    tag: EnumValueTag;

+    extra: any;
+
    constructor(value: any, label: string) {
        this.value = value;
        this.label = label;
@@ -53,6 +55,11 @@ export class EnumValue {
        return this;
    }

+    setExtra(extra: any): EnumValue {
+        this.extra = extra;
+        return this;
+    }
+
    public static of(value: any, label: string): EnumValue {
        return new EnumValue(value, label);
    }
@@ -60,11 +67,12 @@ export class EnumValue {
    /**
     * 根据枚举值获取指定枚举值对象
     *
-     * @param enumValues 所有枚举值
+     * @param enums 枚举对象
     * @param value 需要匹配的枚举值
     * @returns 枚举值对象
     */
-    static getEnumByValue(enumValues: EnumValue[], value: any): EnumValue | null {
+    static getEnumByValue(enums: any, value: any): EnumValue | null {
+        const enumValues = Object.values(enums) as any;
        for (let enumValue of enumValues) {
            if (enumValue.value == value) {
                return enumValue;
--- a/mayfly_go_web/src/common/commonEnum.ts
+++ b/mayfly_go_web/src/common/commonEnum.ts
@@ -1,9 +1,24 @@
 import EnumValue from './Enum';

+// 资源类型
+export const ResourceTypeEnum = {
+    Machine: EnumValue.of(1, '机器').setExtra({ icon: 'Monitor', iconColor: 'var(--el-color-primary)' }).tagTypeSuccess(),
+    Db: EnumValue.of(2, '数据库实例').setExtra({ icon: 'Coin', iconColor: 'var(--el-color-warning)' }).tagTypeWarning(),
+    Redis: EnumValue.of(3, 'redis').setExtra({ icon: 'iconfont icon-redis', iconColor: 'var(--el-color-danger)' }).tagTypeInfo(),
+    Mongo: EnumValue.of(4, 'mongo').setExtra({ icon: 'iconfont icon-mongo', iconColor: 'var(--el-color-success)' }).tagTypeDanger(),
+};
+
 // 标签关联的资源类型
 export const TagResourceTypeEnum = {
-    Machine: EnumValue.of(1, '机器'),
-    Db: EnumValue.of(2, '数据库'),
-    Redis: EnumValue.of(3, 'redis'),
-    Mongo: EnumValue.of(4, 'mongo'),
+    AuthCert: EnumValue.of(-2, '公共凭证').setExtra({ icon: 'Ticket' }),
+    Tag: EnumValue.of(-1, '标签').setExtra({ icon: 'CollectionTag' }),
+
+    Machine: ResourceTypeEnum.Machine,
+    Db: ResourceTypeEnum.Db,
+    Redis: ResourceTypeEnum.Redis,
+    Mongo: ResourceTypeEnum.Mongo,
+
+    MachineAuthCert: EnumValue.of(11, '机器-授权凭证').setExtra({ icon: 'Ticket', iconColor: 'var(--el-color-success)' }),
+    DbAuthCert: EnumValue.of(21, '数据库-授权凭证').setExtra({ icon: 'Ticket', iconColor: 'var(--el-color-success)' }),
+    DbName: EnumValue.of(22, '数据库').setExtra({ icon: 'Coin' }),
 };
--- a/mayfly_go_web/src/common/config.ts
+++ b/mayfly_go_web/src/common/config.ts
@@ -15,7 +15,7 @@ const config = {
    baseWsUrl: `${(window as any).globalConfig.BaseWsUrl || `${location.protocol == 'https:' ? 'wss:' : 'ws:'}//${getBaseApiUrl()}`}/api`,

    // 系统版本
-    version: 'v1.6.1',
+    version: 'v1.8.3',
 };

 export default config;
--- a/mayfly_go_web/src/common/echarts/theme.json
+++ b/mayfly_go_web/src/common/echarts/theme.json
@@ -1,176 +0,0 @@
-{
-    "seriesCnt": "4",
-    "backgroundColor": "rgba(0,0,0,0)",
-    "titleColor": "#008acd",
-    "subtitleColor": "#aaaaaa",
-    "textColorShow": false,
-    "textColor": "#333",
-    "markTextColor": "#eeeeee",
-    "color": [
-        "#2ec7c9",
-        "#b6a2de",
-        "#5ab1ef",
-        "#ffb980",
-        "#d87a80",
-        "#8d98b3",
-        "#e5cf0d",
-        "#97b552",
-        "#95706d",
-        "#dc69aa",
-        "#07a2a4",
-        "#9a7fd1",
-        "#588dd5",
-        "#f5994e",
-        "#c05050",
-        "#59678c",
-        "#c9ab00",
-        "#7eb00a",
-        "#6f5553",
-        "#c14089"
-    ],
-    "borderColor": "#ccc",
-    "borderWidth": 0,
-    "visualMapColor": [
-        "#5ab1ef",
-        "#e0ffff"
-    ],
-    "legendTextColor": "#333333",
-    "kColor": "#d87a80",
-    "kColor0": "#2ec7c9",
-    "kBorderColor": "#d87a80",
-    "kBorderColor0": "#2ec7c9",
-    "kBorderWidth": 1,
-    "lineWidth": 2,
-    "symbolSize": 3,
-    "symbol": "emptyCircle",
-    "symbolBorderWidth": 1,
-    "lineSmooth": true,
-    "graphLineWidth": 1,
-    "graphLineColor": "#aaaaaa",
-    "mapLabelColor": "#d87a80",
-    "mapLabelColorE": "rgb(100,0,0)",
-    "mapBorderColor": "#eeeeee",
-    "mapBorderColorE": "#444",
-    "mapBorderWidth": 0.5,
-    "mapBorderWidthE": 1,
-    "mapAreaColor": "#dddddd",
-    "mapAreaColorE": "rgba(254,153,78,1)",
-    "axes": [
-        {
-            "type": "all",
-            "name": "通用坐标轴",
-            "axisLineShow": true,
-            "axisLineColor": "#eeeeee",
-            "axisTickShow": true,
-            "axisTickColor": "#eeeeee",
-            "axisLabelShow": true,
-            "axisLabelColor": "#eeeeee",
-            "splitLineShow": true,
-            "splitLineColor": [
-                "#aaaaaa"
-            ],
-            "splitAreaShow": false,
-            "splitAreaColor": [
-                "#eeeeee"
-            ]
-        },
-        {
-            "type": "category",
-            "name": "类目坐标轴",
-            "axisLineShow": true,
-            "axisLineColor": "#008acd",
-            "axisTickShow": true,
-            "axisTickColor": "#333",
-            "axisLabelShow": true,
-            "axisLabelColor": "#333",
-            "splitLineShow": false,
-            "splitLineColor": [
-                "#eee"
-            ],
-            "splitAreaShow": false,
-            "splitAreaColor": [
-                "rgba(250,250,250,0.3)",
-                "rgba(200,200,200,0.3)"
-            ]
-        },
-        {
-            "type": "value",
-            "name": "数值坐标轴",
-            "axisLineShow": true,
-            "axisLineColor": "#008acd",
-            "axisTickShow": true,
-            "axisTickColor": "#333",
-            "axisLabelShow": true,
-            "axisLabelColor": "#333",
-            "splitLineShow": true,
-            "splitLineColor": [
-                "#eee"
-            ],
-            "splitAreaShow": true,
-            "splitAreaColor": [
-                "rgba(250,250,250,0.3)",
-                "rgba(200,200,200,0.3)"
-            ]
-        },
-        {
-            "type": "log",
-            "name": "对数坐标轴",
-            "axisLineShow": true,
-            "axisLineColor": "#008acd",
-            "axisTickShow": true,
-            "axisTickColor": "#333",
-            "axisLabelShow": true,
-            "axisLabelColor": "#333",
-            "splitLineShow": true,
-            "splitLineColor": [
-                "#eee"
-            ],
-            "splitAreaShow": true,
-            "splitAreaColor": [
-                "rgba(250,250,250,0.3)",
-                "rgba(200,200,200,0.3)"
-            ]
-        },
-        {
-            "type": "time",
-            "name": "时间坐标轴",
-            "axisLineShow": true,
-            "axisLineColor": "#008acd",
-            "axisTickShow": true,
-            "axisTickColor": "#333",
-            "axisLabelShow": true,
-            "axisLabelColor": "#333",
-            "splitLineShow": true,
-            "splitLineColor": [
-                "#eee"
-            ],
-            "splitAreaShow": false,
-            "splitAreaColor": [
-                "rgba(250,250,250,0.3)",
-                "rgba(200,200,200,0.3)"
-            ]
-        }
-    ],
-    "axisSeperateSetting": true,
-    "toolboxColor": "#2ec7c9",
-    "toolboxEmphasisColor": "#18a4a6",
-    "tooltipAxisColor": "#008acd",
-    "tooltipAxisWidth": "1",
-    "timelineLineColor": "#008acd",
-    "timelineLineWidth": 1,
-    "timelineItemColor": "#008acd",
-    "timelineItemColorE": "#a9334c",
-    "timelineCheckColor": "#2ec7c9",
-    "timelineCheckBorderColor": "#2ec7c9",
-    "timelineItemBorderWidth": 1,
-    "timelineControlColor": "#008acd",
-    "timelineControlBorderColor": "#008acd",
-    "timelineControlBorderWidth": 0.5,
-    "timelineLabelColor": "#008acd",
-    "datazoomBackgroundColor": "rgba(47,69,84,0)",
-    "datazoomDataColor": "#efefff",
-    "datazoomFillColor": "rgba(182,162,222,0.2)",
-    "datazoomHandleColor": "#008acd",
-    "datazoomHandleWidth": "100",
-    "datazoomLabelColor": "#333333"
-}
--- a/mayfly_go_web/src/common/echarts/useEcharts.ts
+++ b/mayfly_go_web/src/common/echarts/useEcharts.ts
@@ -1,38 +0,0 @@
-// import * as echarts from 'echarts'
-
-// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
-import * as echarts from 'echarts/core';
-
-/** 图表后缀都为 Chart  */
-import { PieChart } from 'echarts/charts';
-
-// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
-import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
-
-// 标签自动布局，全局过渡动画等特性
-import { LabelLayout, UniversalTransition } from 'echarts/features';
-
-// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-import { CanvasRenderer } from 'echarts/renderers';
-
-// 注册必须的组件
-echarts.use([
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    DatasetComponent,
-    TransformComponent,
-    LegendComponent,
-    //   BarChart,
-    LabelLayout,
-    UniversalTransition,
-    CanvasRenderer,
-    //   LineChart,
-    PieChart,
-]);
-
-export default function (dom: any, theme: any = null, option: any) {
-    let chart = echarts.init(dom, theme);
-    chart.setOption(option);
-    return chart;
-}
--- a/mayfly_go_web/src/common/pattern.ts
+++ b/mayfly_go_web/src/common/pattern.ts
@@ -1,4 +1,9 @@
 export const AccountUsernamePattern = {
    pattern: /^[a-zA-Z0-9_]{5,20}$/g,
-    message: '只允许输入5-20位大小写字母、数字、下划线',
+    message: '只允许输入5-20位大小写字母、数字、_-.:',
+};
+
+export const ResourceCodePattern = {
+    pattern: /^[a-zA-Z0-9_\-.:]{1,32}$/g,
+    message: '只允许输入1-32位大小写字母、数字、_-.:',
 };
--- a/mayfly_go_web/src/common/request.ts
+++ b/mayfly_go_web/src/common/request.ts
@@ -4,7 +4,7 @@ import { getClientId, getToken } from './utils/storage';
 import { templateResolve } from './utils/string';
 import { ElMessage } from 'element-plus';
 import axios from 'axios';
-import { useApiFetch } from './useRequest';
+import { useApiFetch } from '../hooks/useRequest';
 import Api from './Api';

 export default {
--- a/mayfly_go_web/src/common/sysconfig.ts
+++ b/mayfly_go_web/src/common/sysconfig.ts
@@ -1,9 +1,77 @@
 import openApi from './openApi';

 // 登录是否使用验证码配置key
-const AccountLoginSecurity = 'AccountLoginSecurity';
-const UseWatermarkConfigKey = 'UseWatermark';
-const MachineConfig = 'MachineConfig';
+const AccountLoginSecurityKey = 'AccountLoginSecurity';
+const MachineConfigKey = 'MachineConfig';
+const SysStyleConfigKey = 'SysStyleConfig';
+
+/**
+ * 获取账号登录安全配置
+ *
+ * @returns
+ */
+export async function getAccountLoginSecurity(): Promise<any> {
+    const value = await getConfigValue(AccountLoginSecurityKey);
+    if (!value) {
+        return null;
+    }
+    const jsonValue = JSON.parse(value);
+    jsonValue.useCaptcha = convertBool(jsonValue.useCaptcha, true);
+    jsonValue.useOtp = convertBool(jsonValue.useOtp, true);
+    return jsonValue;
+}
+
+/**
+ * 获取全局系统样式配置（logo、title等）
+ *
+ * @returns
+ */
+export async function getSysStyleConfig(): Promise<any> {
+    const value = await getConfigValue(SysStyleConfigKey);
+    const defaultValue = {
+        useWatermark: true,
+    };
+    if (!value) {
+        return defaultValue;
+    }
+
+    const jsonValue = JSON.parse(value);
+    // 将字符串转为bool
+    jsonValue.useWatermark = convertBool(jsonValue.useWatermark, true);
+    return jsonValue;
+}
+
+/**
+ * 获取LDAP登录配置
+ *
+ * @returns
+ */
+export async function getLdapEnabled(): Promise<any> {
+    const value = await openApi.getLdapEnabled();
+    return convertBool(value, false);
+}
+
+/**
+ * 获取机器配置
+ *
+ * @returns
+ */
+export async function getMachineConfig(): Promise<any> {
+    const value = await getConfigValue(MachineConfigKey);
+    const defaultValue = {
+        // 默认1gb
+        uploadMaxFileSize: '1GB',
+    };
+    if (!value) {
+        return defaultValue;
+    }
+    try {
+        const jsonValue = JSON.parse(value);
+        return jsonValue;
+    } catch (e) {
+        return defaultValue;
+    }
+}

 /**
 * 获取系统配置值
@@ -27,77 +95,6 @@ export async function getBoolConfigValue(key: string, defaultValue: boolean): Pr
    return convertBool(value, defaultValue);
 }

-/**
- * 获取账号登录安全配置
- *
- * @returns
- */
-export async function getAccountLoginSecurity(): Promise<any> {
-    const value = await getConfigValue(AccountLoginSecurity);
-    if (!value) {
-        return null;
-    }
-    const jsonValue = JSON.parse(value);
-    jsonValue.useCaptcha = convertBool(jsonValue.useCaptcha, true);
-    jsonValue.useOtp = convertBool(jsonValue.useOtp, true);
-    return jsonValue;
-}
-
-/**
- * 是否启用水印信息配置
- *
- * @returns
- */
-export async function useWatermark(): Promise<any> {
-    const value = await getConfigValue(UseWatermarkConfigKey);
-    const defaultValue = {
-        isUse: true,
-    };
-    if (!value) {
-        return defaultValue;
-    }
-    try {
-        const jsonValue = JSON.parse(value);
-        // 将字符串转为bool
-        jsonValue.isUse = convertBool(jsonValue.isUse, true);
-        return jsonValue;
-    } catch (e) {
-        return defaultValue;
-    }
-}
-
-/**
- * 获取LDAP登录配置
- *
- * @returns
- */
-export async function getLdapEnabled(): Promise<any> {
-    const value = await openApi.getLdapEnabled();
-    return convertBool(value, false);
-}
-
-/**
- * 是否启用水印信息配置
- *
- * @returns
- */
-export async function getMachineConfig(): Promise<any> {
-    const value = await getConfigValue(MachineConfig);
-    const defaultValue = {
-        // 默认1gb
-        uploadMaxFileSize: '1GB',
-    };
-    if (!value) {
-        return defaultValue;
-    }
-    try {
-        const jsonValue = JSON.parse(value);
-        return jsonValue;
-    } catch (e) {
-        return defaultValue;
-    }
-}
-
 function convertBool(value: string, defaultValue: boolean) {
    if (!value) {
        return defaultValue;
--- a/mayfly_go_web/src/common/syssocket.ts
+++ b/mayfly_go_web/src/common/syssocket.ts
@@ -41,7 +41,14 @@ class SysSocket {
        const sysMsgUrl = `${Config.baseWsUrl}/sysmsg?${joinClientParams()}`;
        this.socket = SocketBuilder.builder(sysMsgUrl)
            .message((event: { data: string }) => {
-                const message = JSON.parse(event.data);
+                let message;
+                try {
+                    message = JSON.parse(event.data);
+                } catch (e) {
+                    console.error('解析ws消息失败', e);
+                    return;
+                }
+
                // 存在消息类别对应的处理器，则进行处理，否则进行默认通知处理
                const handler = this.categoryHandlers.get(message.category);
                if (handler) {
@@ -66,9 +73,9 @@ class SysSocket {
    }

    destory() {
-        this.socket.close();
+        this.socket?.close();
        this.socket = null;
-        this.categoryHandlers.clear();
+        this.categoryHandlers?.clear();
    }

    /**
--- a/mayfly_go_web/src/common/utils/date.ts
+++ b/mayfly_go_web/src/common/utils/date.ts
@@ -7,6 +7,7 @@ export function dateFormat2(fmt: string, date: Date) {
        'H+': date.getHours().toString(), // 时
        'm+': date.getMinutes().toString(), // 分
        's+': date.getSeconds().toString(), // 秒
+        'S+': date.getMilliseconds() ? date.getMilliseconds().toString() : '', // 毫秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (const k in opt) {
@@ -23,5 +24,8 @@ export function dateStrFormat(fmt: string, dateStr: string) {
 }

 export function dateFormat(dateStr: string) {
+    if (!dateStr) {
+        return '';
+    }
    return dateFormat2('yyyy-MM-dd HH:mm:ss', new Date(dateStr));
 }
--- a/mayfly_go_web/src/common/utils/export.ts
+++ b/mayfly_go_web/src/common/utils/export.ts
@@ -7,24 +7,22 @@ export function exportCsv(filename: string, columns: string[], datas: []) {
        for (let column of columns) {
            let val: any = data[column];
            if (val == null || val == undefined) {
-                dataValueArr.push('');
-                continue;
-            }
+                val = '';
+            } else if (val && typeof val == 'string') {
+                // 替换换行符
+                val = val.replace(/[\r\n]/g, '\\n');

-            if (typeof val == 'string' && val) {
                // csv格式如果有逗号，整体用双引号括起来；如果里面还有双引号就替换成两个双引号，这样导出来的格式就不会有问题了
                if (val.indexOf(',') != -1) {
                    // 如果还有双引号，先将双引号转义，避免两边加了双引号后转义错误
                    if (val.indexOf('"') != -1) {
-                        val = val.replace(/\"/g, '""');
+                        val = val.replace(/"/g, '""');
                    }
                    // 再将逗号转义
                    val = `"${val}"`;
                }
-                dataValueArr.push(val + '\t');
-            } else {
-                dataValueArr.push(val + '\t');
            }
+            dataValueArr.push(String(val));
        }
        cvsData.push(dataValueArr);
    }
--- a/mayfly_go_web/src/common/utils/format.ts
+++ b/mayfly_go_web/src/common/utils/format.ts
@@ -46,60 +46,6 @@ export function convertToBytes(sizeStr: string) {
    return bytes;
 }

-/**
- * 格式化json字符串
- * @param txt  json字符串
- * @param compress 是否压缩
- * @returns 格式化后的字符串
- */
-export function formatJsonString(txt: string, compress: boolean) {
-    var indentChar = '    ';
-    if (/^\s*$/.test(txt)) {
-        console.log('数据为空,无法格式化! ');
-        return txt;
-    }
-    try {
-        var data = JSON.parse(txt);
-    } catch (e: any) {
-        console.log('数据源语法错误,格式化失败! 错误信息: ' + e.description, 'err');
-        return txt;
-    }
-    var draw: any = [],
-        line = compress ? '' : '\n',
-        // eslint-disable-next-line no-unused-vars
-        nodeCount: number = 0,
-        // eslint-disable-next-line no-unused-vars
-        maxDepth: number = 0;
-
-    var notify = function (name: any, value: any, isLast: any, indent: any, formObj: any) {
-        nodeCount++; /*节点计数*/
-        for (var i = 0, tab = ''; i < indent; i++) tab += indentChar; /* 缩进HTML */
-        tab = compress ? '' : tab; /*压缩模式忽略缩进*/
-        maxDepth = ++indent; /*缩进递增并记录*/
-        if (value && value.constructor == Array) {
-            /*处理数组*/
-            draw.push(tab + (formObj ? '"' + name + '": ' : '') + '[' + line); /*缩进'[' 然后换行*/
-            for (var i = 0; i < value.length; i++) notify(i, value[i], i == value.length - 1, indent, false);
-            draw.push(tab + ']' + (isLast ? line : ',' + line)); /*缩进']'换行,若非尾元素则添加逗号*/
-        } else if (value && typeof value == 'object') {
-            /*处理对象*/
-            draw.push(tab + (formObj ? '"' + name + '": ' : '') + '{' + line); /*缩进'{' 然后换行*/
-            var len = 0,
-                i = 0;
-            for (var key in value) len++;
-            for (var key in value) notify(key, value[key], ++i == len, indent, true);
-            draw.push(tab + '}' + (isLast ? line : ',' + line)); /*缩进'}'换行,若非尾元素则添加逗号*/
-        } else {
-            if (typeof value == 'string') value = '"' + value + '"';
-            draw.push(tab + (formObj ? '"' + name + '": ' : '') + value + (isLast ? '' : ',') + line);
-        }
-    };
-    var isLast = true,
-        indent = 0;
-    notify('', data, isLast, indent, false);
-    return draw.join('');
-}
-
 /*
 * 年(Y) 可用1-4个占位符
 * 月(m)、日(d)、小时(H)、分(M)、秒(S) 可用1-2个占位符
@@ -204,6 +150,45 @@ export function formatPast(param: any, format: string = 'YYYY-mm-dd') {
    }
 }

+/**
+ * 格式化指定时间数为人性化可阅读的内容(默认time为秒单位)
+ *
+ * @param time 时间数
+ * @param unit time对应的单位
+ * @returns
+ */
+export function formatTime(time: number, unit: string = 's') {
+    const units = {
+        y: 31536000,
+        M: 2592000,
+        d: 86400,
+        h: 3600,
+        m: 60,
+        s: 1,
+    };
+
+    if (!units[unit]) {
+        return 'Invalid unit';
+    }
+
+    let seconds = time * units[unit];
+    let result = '';
+
+    const timeUnits = Object.entries(units).map(([unit, duration]) => {
+        const value = Math.floor(seconds / duration);
+        seconds %= duration;
+        return { value, unit };
+    });
+
+    timeUnits.forEach(({ value, unit }) => {
+        if (value > 0) {
+            result += `${value}${unit} `;
+        }
+    });
+
+    return result;
+}
+
 /**
 * formatAxis(new Date())   // 上午好
 */
--- a/mayfly_go_web/src/common/utils/object.ts
+++ b/mayfly_go_web/src/common/utils/object.ts
@@ -0,0 +1,33 @@
+/**
+ * 根据对象访问路径，获取对应的值
+ *
+ * @param obj 对象，如 {user: {name: 'xxx'}, orderNo: 1212211, products: [{id: 12}]}
+ * @param path 访问路径，如 orderNo 或者 user.name 或者product[0].id
+ * @returns 路径对应的值
+ */
+export function getValueByPath(obj: any, path: string) {
+    const keys = path.split('.');
+    let result = obj;
+    for (let key of keys) {
+        if (!result || typeof result !== 'object') {
+            return undefined;
+        }
+
+        if (key.includes('[') && key.includes(']')) {
+            // 处理包含数组索引的情况
+            const arrayKey = key.substring(0, key.indexOf('['));
+            const matchIndex = key.match(/\[(.*?)\]/);
+
+            if (!matchIndex) {
+                return undefined;
+            }
+
+            const index = parseInt(matchIndex[1]);
+            result = Array.isArray(result[arrayKey]) ? result[arrayKey][index] : undefined;
+        } else {
+            result = result[key];
+        }
+    }
+
+    return result;
+}
--- a/mayfly_go_web/src/common/utils/storage.ts
+++ b/mayfly_go_web/src/common/utils/storage.ts
@@ -33,7 +33,9 @@ export function getThemeConfig() {
    return getLocal('themeConfig');
 }

-// 清除用户相关的用户信息
+/**
+ * 清除当前登录用户相关信息
+ */
 export function clearUser() {
    removeLocal(TokenKey);
    removeLocal(UserKey);
--- a/mayfly_go_web/src/components/SearchForm/components/SearchFormItem.vue
+++ b/mayfly_go_web/src/components/SearchForm/components/SearchFormItem.vue
@@ -2,6 +2,7 @@
    <component
        :is="item?.render ?? `el-${item.type}`"
        v-bind="{ ...handleSearchProps, ...placeholder, clearable: true }"
+        v-on="{ ...handleEvents }"
        v-model.trim="itemValue"
        :data="item.type === 'tree-select' ? item.options : []"
        :options="['cascader', 'select-v2'].includes(item.type!) ? item.options : []"
@@ -27,17 +28,13 @@
 <script setup lang="ts" name="SearchFormItem">
 import { computed } from 'vue';
 import { SearchItem } from '../index';
-import { useVModel } from '@vueuse/core';

 interface SearchFormItemProps {
-    modelValue: any;
    item: SearchItem;
 }
 const props = defineProps<SearchFormItemProps>();

-const emit = defineEmits(['update:modelValue']);
-
-const itemValue = useVModel(props, 'modelValue', emit);
+const itemValue = defineModel('modelValue');

 // 判断 fieldNames 设置 label && value && children 的 key 值
 const fieldNames = computed(() => {
@@ -48,19 +45,6 @@ const fieldNames = computed(() => {
    };
 });

-// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
-// const enumMap = inject('enumMap', ref(new Map()));
-// const columnEnum = computed(() => {
-//     let enumData = enumMap.value.get(props.item.prop);
-//     if (!enumData) return [];
-//     if (props.item?.type === 'select-v2' && props.item.fieldNames) {
-//         enumData = enumData.map((item: { [key: string]: any }) => {
-//             return { ...item, label: item[fieldNames.value.label], value: item[fieldNames.value.value] };
-//         });
-//     }
-//     return enumData;
-// });
-
 // 处理透传的 searchProps (type 为 tree-select、cascader 的时候需要给下默认 label && value && children)
 const handleSearchProps = computed(() => {
    const label = fieldNames.value.label;
@@ -77,6 +61,12 @@ const handleSearchProps = computed(() => {
    return searchProps;
 });

+// 处理透传的 事件
+const handleEvents = computed(() => {
+    let itemEvents = props.item?.events ?? {};
+    return itemEvents;
+});
+
 // 处理默认 placeholder
 const placeholder = computed(() => {
    const search = props.item;
--- a/mayfly_go_web/src/components/SearchForm/index.ts
+++ b/mayfly_go_web/src/components/SearchForm/index.ts
@@ -1,4 +1,5 @@
-import { VNode } from 'vue';
+import Api from '@/common/Api';
+import { VNode, ref, toValue } from 'vue';

 export type FieldNamesProps = {
    label: string;
@@ -19,6 +20,94 @@ export type SearchItemType =
    | 'switch'
    | 'slider';

+/**
+ * 表单组件可选项的api信息
+ */
+export class OptionsApi {
+    /**
+     * 请求获取options的api
+     */
+    api: Api;
+
+    /**
+     * 请求参数
+     */
+    params: any;
+
+    /**
+     * 是否立即执行，否则在组件focus事件中获取
+     */
+    immediate: boolean = false;
+
+    /**
+     * 是否只获取一次，即若以获取则不继续调用该api
+     */
+    once: boolean = true;
+
+    /**
+     * 转换函数，主要用于将响应的api结果转换为满足组件options的结构
+     */
+    convertFn: (apiResp: any) => any;
+
+    // remote: boolean = false;
+
+    /**
+     * 远程方法参数属性字段，存在该值，则说明使用remote-method进行远程搜索
+     */
+    remoteMethodParamProp: string;
+
+    withConvertFn(fn: (apiResp: any) => any) {
+        this.convertFn = fn;
+        return this;
+    }
+
+    /**
+     *  立即获取该可选值
+     * @returns
+     */
+    withImmediate() {
+        this.immediate = true;
+        return this;
+    }
+
+    /**
+     * 设为非一次性api，即每次组件focus获取的时候都允许重新获取options
+     * @returns this
+     */
+    withNoOnce() {
+        this.once = false;
+        return this;
+    }
+
+    /**
+     * 是否使用select的remote方式远程搜索调用
+     * @param remoteReqParamKey  remote请求参数对应的prop，需要将输入的value赋值给params[paramProp]进行远程搜索
+     */
+    isRemote(paramProp: string) {
+        this.remoteMethodParamProp = paramProp;
+        return this;
+    }
+
+    /**
+     * 调用api获取组件可选项
+     * @returns 组件可选项信息
+     */
+    async getOptions() {
+        let res = await this.api.request(toValue(this.params));
+        if (this.convertFn) {
+            res = this.convertFn(res);
+        }
+        return res;
+    }
+
+    static new(api: Api, params: any): OptionsApi {
+        const oa = new OptionsApi();
+        oa.api = api;
+        oa.params = params;
+        return oa;
+    }
+}
+
 /**
 * 搜索项
 */
@@ -43,22 +132,50 @@ export class SearchItem {
     */
    options: any;

+    /**
+     * 获取可选项的api信息
+     */
+    optionsApi: OptionsApi;
+
    /**
     * 插槽名
     */
    slot: string;

-    props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+    /**
+     * 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+     */
+    props?: any;

-    tooltip?: string; // 搜索提示
+    /**
+     * 搜索项事件，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+     */
+    events?: any;

-    span?: number; // 搜索项所占用的列数，默认为 1 列
+    /**
+     * 搜索提示
+     */
+    tooltip?: string;

-    offset?: number; // 搜索字段左侧偏移列数
+    /**
+     * 搜索项所占用的列数，默认为 1 列
+     */
+    span?: number;

-    fieldNames: FieldNamesProps; // 指定 label && value && children 的 key 值，用于select等类型组件
+    /**
+     * 搜索字段左侧偏移列数
+     */
+    offset?: number;

-    render?: (scope: any) => VNode; // 自定义搜索内容渲染（tsx语法）
+    /**
+     * 指定 label && value && children 的 key 值，用于select等类型组件
+     */
+    fieldNames: FieldNamesProps;
+
+    /**
+     * 自定义搜索内容渲染（tsx语法）
+     */
+    render?: (scope: any) => VNode;

    constructor(prop: string, label: string) {
        this.prop = prop;
@@ -69,7 +186,7 @@ export class SearchItem {
        return new SearchItem(prop, label);
    }

-    static text(prop: string, label: string): SearchItem {
+    static input(prop: string, label: string): SearchItem {
        const tq = new SearchItem(prop, label);
        tq.type = 'input';
        return tq;
@@ -78,10 +195,11 @@ export class SearchItem {
    static select(prop: string, label: string): SearchItem {
        const tq = new SearchItem(prop, label);
        tq.type = 'select';
+        tq.withOneProps('filterable', true);
        return tq;
    }

-    static date(prop: string, label: string): SearchItem {
+    static datePicker(prop: string, label: string): SearchItem {
        const tq = new SearchItem(prop, label);
        tq.type = 'date-picker';
        return tq;
@@ -93,8 +211,40 @@ export class SearchItem {
        return tq;
    }

-    withSpan(span: number): SearchItem {
-        this.span = span;
+    /**
+     * 为组件设置一个props属性
+     * @param propsKey 属性key
+     * @param propsValue 属性value
+     * @returns
+     */
+    withOneProps(propsKey: string, propsValue: any): SearchItem {
+        if (!this.props) {
+            this.props = {};
+        }
+        this.props[propsKey] = propsValue;
+        return this;
+    }
+
+    /**
+     * 为组件传递组件自身的props属性 (根据 element plus 官方文档来传递，该属性所有值会透传到组件)
+     * @returns this
+     */
+    withProps(props: any = {}): SearchItem {
+        this.props = props;
+        return this;
+    }
+
+    /**
+     * 为组件传递组件自身事件函数
+     * @param event 事件名称
+     * @param fn 事件处理函数
+     * @returns
+     */
+    bindEvent(event: string, eventFn: any): SearchItem {
+        if (!this.events) {
+            this.events = {};
+        }
+        this.events[event] = eventFn;
        return this;
    }

@@ -108,8 +258,61 @@ export class SearchItem {
        return this;
    }

-    setOptions(options: any): SearchItem {
+    /**
+     * 设置获取组件options可选项值的api配置
+     * @param optionsApi 可选项api配置
+     * @returns this
+     */
+    withOptionsApi(optionsApi: OptionsApi): SearchItem {
+        this.optionsApi = optionsApi;
+        // 使用api获取组件可选项需要将options转为响应式，否则组件无法响应式获取组件可选项
+        this.options = ref(null);
+
+        // 存在远程搜索请求参数prop，则为使用远程搜索可选项
+        if (optionsApi.remoteMethodParamProp) {
+            return this.withOneProps('remote', true).withOneProps('remote-method', async (value: any) => {
+                if (!value) {
+                    this.options.value = [];
+                    return;
+                }
+                // 将输入的内容赋值为真实api请求参数中指定的属性字段
+                optionsApi.params[optionsApi.remoteMethodParamProp] = value;
+                this.options.value = await this.optionsApi.getOptions();
+            });
+        }
+
+        // 立即执行，则直接调用api获取并赋值options
+        if (this.optionsApi.immediate) {
+            this.optionsApi.getOptions().then((res) => {
+                this.options.value = res;
+            });
+        } else {
+            // 注册focus事件，在触发focus时赋值options
+            this.bindEvent('focus', async () => {
+                if (!toValue(this.options) || !optionsApi.once) {
+                    this.options.value = await this.optionsApi.getOptions();
+                }
+            });
+        }
+        return this;
+    }
+
+    withSpan(span: number): SearchItem {
+        this.span = span;
+        return this;
+    }
+
+    withOptions(options: any): SearchItem {
        this.options = options;
        return this;
    }
+
+    /**
+     * 赋值placeholder
+     * @param val placeholder
+     * @returns
+     */
+    withPlaceholder(val: string): SearchItem {
+        return this.withOneProps('placeholder', val);
+    }
 }
--- a/mayfly_go_web/src/components/SearchForm/index.vue
+++ b/mayfly_go_web/src/components/SearchForm/index.vue
@@ -14,7 +14,7 @@
                            <span>:</span>
                        </template>

-                        <SearchFormItem v-if="!item.slot" :item="item" v-model="searchParam[item.prop]" />
+                        <SearchFormItem @keyup.enter="handleItemKeyupEnter(item)" v-if="!item.slot" :item="item" v-model="searchParam[item.prop]" />

                        <slot v-else :name="item.slot"></slot>
                    </el-form-item>
@@ -44,11 +44,9 @@ import Grid from '@/components/Grid/index.vue';
 import GridItem from '@/components/Grid/components/GridItem.vue';
 import SvgIcon from '@/components/svgIcon/index.vue';
 import { SearchItem } from './index';
-import { useVModel } from '@vueuse/core';

 interface ProTableProps {
    items: SearchItem[]; // 搜索配置项
-    modelValue?: { [key: string]: any }; // 搜索参数
    searchCol: number | Record<BreakPoint, number>;
    search: (params: any) => void; // 搜索方法
    reset: (params: any) => void; // 重置方法
@@ -60,9 +58,7 @@ const props = withDefaults(defineProps<ProTableProps>(), {
    modelValue: () => ({}),
 });

-const emit = defineEmits(['update:modelValue']);
-
-const searchParam = useVModel(props, 'modelValue', emit);
+const searchParam: any = defineModel('modelValue');

 // 获取响应式设置
 const getResponsive = (item: SearchItem) => {
@@ -98,6 +94,12 @@ const showCollapse = computed(() => {
    }, 0);
    return show;
 });
+
+const handleItemKeyupEnter = (item: SearchItem) => {
+    if (item.type == 'input') {
+        props.search(searchParam);
+    }
+};
 </script>
 <style lang="scss">
 .search-form {
--- a/mayfly_go_web/src/components/contextmenu/index.vue
+++ b/mayfly_go_web/src/components/contextmenu/index.vue
@@ -184,6 +184,10 @@ defineExpose({
    z-index: 2190;
    position: fixed;

+    .el-dropdown-menu__item {
+        padding: 5px 12px;
+    }
+
    .el-dropdown-menu__item {
        font-size: 12px !important;
        white-space: nowrap;
--- a/mayfly_go_web/src/components/crontab/Crontab.vue
+++ b/mayfly_go_web/src/components/crontab/Crontab.vue
@@ -0,0 +1,294 @@
+<template>
+    <div class="crontab">
+        <el-tabs v-model="state.activeName" @tab-change="changeTab(state.activeName)" type="border-card">
+            <el-tab-pane label="秒" name="second" v-if="shouldHide('second')">
+                <CrontabSecond :cron="crontabValueObj" ref="secondRef" />
+            </el-tab-pane>
+
+            <el-tab-pane label="分钟" name="min" v-if="shouldHide('min')">
+                <CrontabMin :cron="crontabValueObj" ref="minRef" />
+            </el-tab-pane>
+
+            <el-tab-pane label="小时" name="hour" v-if="shouldHide('hour')">
+                <CrontabHour :cron="crontabValueObj" ref="hourRef" />
+            </el-tab-pane>
+
+            <el-tab-pane label="日" name="day" v-if="shouldHide('day')">
+                <CrontabDay :cron="crontabValueObj" ref="dayRef" />
+            </el-tab-pane>
+
+            <el-tab-pane label="月" name="mouth" v-if="shouldHide('mouth')">
+                <CrontabMouth :cron="crontabValueObj" ref="mouthRef" />
+            </el-tab-pane>
+
+            <el-tab-pane label="周" name="week" v-if="shouldHide('week')">
+                <CrontabWeek :cron="crontabValueObj" ref="weekRef" />
+            </el-tab-pane>
+
+            <el-tab-pane label="年" name="year" v-if="shouldHide('year')">
+                <CrontabYear :cron="crontabValueObj" ref="yearRef" />
+            </el-tab-pane>
+        </el-tabs>
+
+        <div class="popup-main">
+            <div class="popup-result">
+                <p class="title">时间表达式</p>
+                <table>
+                    <thead>
+                        <th v-for="item of tabTitles" width="40" :key="item">{{ item }}</th>
+                        <th>crontab完整表达式</th>
+                    </thead>
+                    <tbody>
+                        <td>
+                            <span>{{ crontabValueObj.second }}</span>
+                        </td>
+                        <td>
+                            <span>{{ crontabValueObj.min }}</span>
+                        </td>
+                        <td>
+                            <span>{{ crontabValueObj.hour }}</span>
+                        </td>
+                        <td>
+                            <span>{{ crontabValueObj.day }}</span>
+                        </td>
+                        <td>
+                            <span>{{ crontabValueObj.mouth }}</span>
+                        </td>
+                        <td>
+                            <span>{{ crontabValueObj.week }}</span>
+                        </td>
+                        <td>
+                            <span>{{ crontabValueObj.year }}</span>
+                        </td>
+                        <td>
+                            <span>{{ contabValueString }}</span>
+                        </td>
+                    </tbody>
+                </table>
+            </div>
+            <CrontabResult :ex="contabValueString"></CrontabResult>
+
+            <div class="pop_btn">
+                <el-button size="small" @click="hidePopup">取消</el-button>
+                <el-button size="small" type="warning" @click="clearCron">重置</el-button>
+                <el-button size="small" type="primary" @click="submitFill">确定</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, onMounted, reactive, ref, nextTick, watch } from 'vue';
+import CrontabSecond from './CrontabSecond.vue';
+import CrontabMin from './CrontabMin.vue';
+import CrontabHour from './CrontabHour.vue';
+import CrontabDay from './CrontabDay.vue';
+import CrontabMouth from './CrontabMouth.vue';
+import CrontabWeek from './CrontabWeek.vue';
+import CrontabYear from './CrontabYear.vue';
+import CrontabResult from './CrontabResult.vue';
+
+const secondRef: any = ref(null);
+const minRef: any = ref(null);
+const hourRef: any = ref(null);
+const dayRef: any = ref(null);
+const mouthRef: any = ref(null);
+const weekRef: any = ref(null);
+const yearRef: any = ref(null);
+
+const props = defineProps({
+    expression: {
+        type: String,
+        required: true,
+    },
+    hideComponent: {
+        type: Array,
+    },
+});
+
+//定义事件
+const emit = defineEmits(['hide', 'fill']);
+
+const state = reactive({
+    tabTitles: ['秒', '分钟', '小时', '日', '月', '周', '年'],
+    tabActive: 0,
+    activeName: 'second',
+    myindex: 0,
+    crontabValueObj: {
+        second: '*',
+        min: '*',
+        hour: '*',
+        day: '*',
+        mouth: '*',
+        week: '?',
+        year: '',
+    },
+});
+
+const { tabTitles, crontabValueObj } = toRefs(state);
+
+onMounted(() => {
+    resolveExp();
+});
+
+watch(
+    () => props.expression,
+    () => {
+        resolveExp();
+    }
+);
+
+function shouldHide(key: string) {
+    if (props.hideComponent && props.hideComponent.includes(key)) return false;
+    return true;
+}
+
+function resolveExp() {
+    //反解析 表达式
+    if (props.expression) {
+        let arr = props.expression.split(' ');
+        if (arr.length >= 6) {
+            //6 位以上是合法表达式
+            let obj = {
+                second: arr[0],
+                min: arr[1],
+                hour: arr[2],
+                day: arr[3],
+                mouth: arr[4],
+                week: arr[5],
+                year: arr[6] ? arr[6] : '',
+            };
+            state.crontabValueObj = {
+                ...obj,
+            };
+        }
+        changeTab(state.activeName);
+    } else {
+        //没有传入的表达式 则还原
+        clearCron();
+    }
+}
+
+// 改变tab
+const changeTab = (name: string) => {
+    nextTick(() => {
+        getRefByName(name).value?.parse();
+    });
+};
+
+const getRefByName = (name: string) => {
+    switch (name) {
+        case 'second':
+            return secondRef;
+        case 'min':
+            return minRef;
+        case 'hour':
+            return hourRef;
+        case 'day':
+            return dayRef;
+        case 'mouth':
+            return mouthRef;
+        case 'week':
+            return weekRef;
+        case 'year':
+            return yearRef;
+    }
+};
+
+// 隐藏弹窗
+function hidePopup() {
+    emit('hide');
+}
+
+// 填充表达式
+const submitFill = () => {
+    emit('fill', contabValueString.value);
+    hidePopup();
+};
+
+const clearCron = () => {
+    // 还原选择项
+    state.crontabValueObj = {
+        second: '*',
+        min: '*',
+        hour: '*',
+        day: '*',
+        mouth: '*',
+        week: '?',
+        year: '',
+    };
+    changeTab(state.activeName);
+};
+
+const contabValueString = computed(() => {
+    let obj = state.crontabValueObj;
+    let str = obj.second + ' ' + obj.min + ' ' + obj.hour + ' ' + obj.day + ' ' + obj.mouth + ' ' + obj.week + (obj.year == '' ? '' : ' ' + obj.year);
+    return str;
+});
+</script>
+
+<style scoped lang="scss">
+.pop_btn {
+    text-align: right;
+}
+.popup-main {
+    position: relative;
+    margin: 10px auto;
+    background: var(--el-bg-color-overlay);
+    border-radius: 5px;
+    font-size: 12px;
+    overflow: hidden;
+}
+.popup-title {
+    overflow: hidden;
+    line-height: 34px;
+    padding-top: 6px;
+    background: #f2f2f2;
+}
+.popup-result {
+    box-sizing: border-box;
+    line-height: 24px;
+    margin: 15px auto;
+    padding: 15px 20px 10px;
+    border: 1px solid var(--el-border-color);
+    position: relative;
+}
+.popup-result .title {
+    position: absolute;
+    top: -18px;
+    left: 50%;
+    width: 140px;
+    font-size: 14px;
+    margin-left: -70px;
+    text-align: center;
+    line-height: 30px;
+    background: var(--el-bg-color-overlay);
+}
+.popup-result table {
+    text-align: center;
+    width: 100%;
+    margin: 0 auto;
+}
+.popup-result table span {
+    display: block;
+    width: 100%;
+    font-family: arial;
+    line-height: 30px;
+    height: 30px;
+    white-space: nowrap;
+    overflow: hidden;
+    border: 1px solid var(--el-border-color);
+}
+.popup-result-scroll {
+    font-size: 12px;
+    line-height: 24px;
+    height: 10em;
+    overflow-y: auto;
+}
+
+.crontab {
+    ::v-deep(.el-form-item) {
+        margin-bottom: 10px !important;
+    }
+}
+</style>
--- a/mayfly_go_web/src/components/crontab/CrontabDay.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabDay.vue
@@ -0,0 +1,216 @@
+<template>
+    <el-form size="small">
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="1"> 日，允许的通配符[, - * / L M] </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="3">
+                周期从
+                <el-input-number v-model="cycle01" :min="0" :max="31" /> - <el-input-number v-model="cycle02" :min="0" :max="31" /> 日
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="4">
+                从
+                <el-input-number v-model="average01" :min="0" :max="31" /> 号开始，每 <el-input-number v-model="average02" :min="0" :max="31" /> 日执行一次
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="5">
+                每月
+                <el-input-number v-model="workday" :min="0" :max="31" /> 号最近的那个工作日
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="6"> 本月最后一天 </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <div class="flex-align-center w100">
+                <el-radio v-model="radioValue" :label="7" class="mr5"> 指定 </el-radio>
+                <el-select @click="radioValue = 7" class="w100" clearable v-model="checkboxList" placeholder="可多选" multiple>
+                    <el-option v-for="item in 31" :key="item" :value="`${item}`">{{ item }}</el-option>
+                </el-select>
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, watch, reactive } from 'vue';
+import { checkNumber, CrontabValueObj } from './index';
+
+const cron = defineModel<CrontabValueObj>('cron', { required: true });
+
+const state = reactive({
+    radioValue: 1,
+    workday: 1,
+    cycle01: 1,
+    cycle02: 2,
+    average01: 1,
+    average02: 1,
+    checkboxList: [] as any,
+});
+
+const { radioValue, workday, cycle01, cycle02, average01, average02, checkboxList } = toRefs(state);
+
+// 单选按钮值变化时
+function radioChange() {
+    if (state.radioValue === 1) {
+        cron.value.day = '*';
+        cron.value.week = '?';
+        cron.value.mouth = '*';
+    } else {
+        if (cron.value.hour === '*') {
+            cron.value.hour = '0';
+        }
+        if (cron.value.min === '*') {
+            cron.value.min = '0';
+        }
+        if (cron.value.second === '*') {
+            cron.value.second = '0';
+        }
+    }
+
+    switch (state.radioValue) {
+        case 2:
+            cron.value.day = '?';
+            break;
+        case 3:
+            cron.value.day = state.cycle01 + '-' + state.cycle02;
+            break;
+        case 4:
+            cron.value.day = state.average01 + '/' + state.average02;
+            break;
+        case 5:
+            cron.value.day = state.workday + 'W';
+            break;
+        case 6:
+            cron.value.day = 'L';
+            break;
+        case 7:
+            cron.value.day = checkboxString.value;
+            break;
+    }
+}
+// 周期两个值变化时
+function cycleChange() {
+    if (state.radioValue == 3) {
+        cron.value.day = cycleTotal.value;
+    }
+}
+// 平均两个值变化时
+function averageChange() {
+    state.average01 = checkNumber(state.average01, 1, 31);
+    state.average02 = checkNumber(state.average02, 1, 31);
+    if (state.radioValue == 4) {
+        cron.value.day = averageTotal.value;
+    }
+}
+// 最近工作日值变化时
+function workdayChange() {
+    state.workday = checkNumber(state.workday, 1, 31);
+    if (state.radioValue == 5) {
+        cron.value.day = state.workday + 'W';
+    }
+}
+// checkbox值变化时
+function checkboxChange() {
+    if (state.radioValue == 7) {
+        cron.value.day = checkboxString.value;
+    }
+}
+
+// 父组件传递的week发生变化触发
+// function weekChange() {
+//     //判断week值与day不能同时为“?”
+//     if (cron.value.week == '?' && state.radioValue == 2) {
+//         state.radioValue = 1;
+//     } else if (cron.value.week !== '?' && state.radioValue != 2) {
+//         state.radioValue = 2;
+//     }
+// }
+
+// 计算两个周期值
+const cycleTotal = computed(() => {
+    return state.cycle01 + '-' + state.cycle02;
+});
+
+// 计算平均用到的值
+const averageTotal = computed(() => {
+    return state.average01 + '/' + state.average02;
+});
+
+// 计算工作日格式
+const workdayCheck = computed(() => {
+    return state.workday;
+});
+
+// 计算勾选的checkbox值合集
+const checkboxString = computed(() => {
+    let str = state.checkboxList.join();
+    return str == '' ? '*' : str;
+});
+
+watch(
+    () => state.radioValue,
+    () => {
+        radioChange();
+    }
+);
+
+watch(cycleTotal, () => {
+    cycleChange();
+});
+
+watch(averageTotal, () => {
+    averageChange();
+});
+
+watch(workdayCheck, () => {
+    workdayChange();
+});
+
+watch(checkboxString, () => {
+    checkboxChange();
+});
+
+const parse = () => {
+    //反解析
+    let value = cron.value.day;
+    if (value === '*') {
+        state.radioValue = 1;
+    } else if (value == '?') {
+        state.radioValue = 2;
+    } else if (value.indexOf('-') > -1) {
+        state.radioValue = 3;
+        let indexArr = value.split('-') as any;
+        isNaN(indexArr[0]) ? (state.cycle01 = 0) : (state.cycle01 = indexArr[0]);
+        state.cycle02 = indexArr[1];
+    } else if (value.indexOf('/') > -1) {
+        state.radioValue = 4;
+        let indexArr = value.split('/') as any;
+        isNaN(indexArr[0]) ? (state.average01 = 0) : (state.average01 = indexArr[0]);
+        state.average02 = indexArr[1];
+    } else if (value.indexOf('W') > -1) {
+        state.radioValue = 5;
+        let indexArr = value.split('W') as any;
+        isNaN(indexArr[0]) ? (state.workday = 0) : (state.workday = indexArr[0]);
+    } else if (value === 'L') {
+        state.radioValue = 6;
+    } else {
+        state.checkboxList = value.split(',');
+        state.radioValue = 7;
+    }
+};
+
+defineExpose({ parse });
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabHour.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabHour.vue
@@ -0,0 +1,156 @@
+<template>
+    <el-form size="small">
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="1"> 小时，允许的通配符[, - * /] </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="2">
+                周期从
+                <el-input-number v-model="cycle01" :min="0" :max="60" /> - <el-input-number v-model="cycle02" :min="0" :max="60" /> 小时
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="3">
+                从
+                <el-input-number v-model="average01" :min="0" :max="60" /> 小时开始，每 <el-input-number v-model="average02" :min="0" :max="60" /> 小时执行一次
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <div class="flex-align-center w100">
+                <el-radio v-model="radioValue" :label="4" class="mr5"> 指定 </el-radio>
+                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" placeholder="可多选" multiple>
+                    <el-option v-for="item in 60" :key="item" :value="`${item - 1}`">{{ item - 1 }}</el-option>
+                </el-select>
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, watch, reactive } from 'vue';
+import { checkNumber, CrontabValueObj } from './index';
+
+const cron = defineModel<CrontabValueObj>('cron', { required: true });
+
+const state = reactive({
+    radioValue: 1,
+    cycle01: 0,
+    cycle02: 1,
+    average01: 0,
+    average02: 1,
+    checkboxList: [] as any,
+});
+
+const { radioValue, cycle01, cycle02, average01, average02, checkboxList } = toRefs(state);
+
+// 单选按钮值变化时
+function radioChange() {
+    if (state.radioValue === 1) {
+        cron.value.hour = '*';
+        cron.value.day = '*';
+    } else {
+        if (cron.value.min === '*') {
+            cron.value.min = '0';
+        }
+        if (cron.value.second === '*') {
+            cron.value.second = '0';
+        }
+    }
+    switch (state.radioValue) {
+        case 2:
+            cron.value.hour = state.cycle01 + '-' + state.cycle02;
+            break;
+        case 3:
+            cron.value.hour = state.average01 + '/' + state.average02;
+            break;
+        case 4:
+            cron.value.hour = checkboxString.value;
+            break;
+    }
+}
+// 周期两个值变化时
+function cycleChange() {
+    state.cycle01 = checkNumber(state.cycle01, 0, 23);
+    state.cycle02 = checkNumber(state.cycle02, 0, 23);
+    if (state.radioValue == 2) {
+        cron.value.hour = cycleTotal.value;
+    }
+}
+
+// 平均两个值变化时
+function averageChange() {
+    state.average01 = checkNumber(state.average01, 0, 23);
+    state.average02 = checkNumber(state.average02, 0, 23);
+    if (state.radioValue == 3) {
+        cron.value.hour = averageTotal.value;
+    }
+}
+
+// checkbox值变化时
+function checkboxChange() {
+    if (state.radioValue == 4) {
+        cron.value.hour = checkboxString.value;
+    }
+}
+
+// 计算两个周期值
+const cycleTotal = computed(() => {
+    return state.cycle01 + '-' + state.cycle02;
+});
+
+// 计算平均用到的值
+const averageTotal = computed(() => {
+    return state.average01 + '/' + state.average02;
+});
+
+// 计算勾选的checkbox值合集
+const checkboxString = computed(() => {
+    let str = state.checkboxList.join();
+    return str == '' ? '*' : str;
+});
+
+watch(
+    () => state.radioValue,
+    () => {
+        radioChange();
+    }
+);
+
+watch(cycleTotal, () => {
+    cycleChange();
+});
+
+watch(averageTotal, () => {
+    averageChange();
+});
+
+watch(checkboxString, () => {
+    checkboxChange();
+});
+
+const parse = () => {
+    //反解析
+    let ins = cron.value.hour;
+    if (ins === '*') {
+        state.radioValue = 1;
+    } else if (ins.indexOf('-') > -1) {
+        state.radioValue = 2;
+        let indexArr = ins.split('-') as any;
+        isNaN(indexArr[0]) ? (state.cycle01 = 0) : (state.cycle01 = indexArr[0]);
+        state.cycle02 = indexArr[1];
+    } else if (ins.indexOf('/') > -1) {
+        state.radioValue = 3;
+        let indexArr = ins.split('/') as any;
+        isNaN(indexArr[0]) ? (state.average01 = 0) : (state.average01 = indexArr[0]);
+        state.average02 = indexArr[1];
+    } else {
+        state.radioValue = 4;
+        state.checkboxList = ins.split(',');
+    }
+};
+
+defineExpose({ parse });
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabInput.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabInput.vue
@@ -0,0 +1,19 @@
+<template>
+    <el-input v-model="cron" placeholder="可点击左边按钮配置">
+        <template #prepend>
+            <el-button @click="showCron = true" icon="Pointer"></el-button>
+        </template>
+    </el-input>
+    <el-dialog title="生成 cron" v-model="showCron" width="600px">
+        <Crontab :expression="cron" @hide="showCron = false" @fill="(ex: any) => (cron = ex)" />
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import Crontab from '@/components/crontab/Crontab.vue';
+
+const cron = defineModel<string>('modelValue', { required: true });
+
+const showCron = ref(false);
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabMin.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabMin.vue
@@ -0,0 +1,152 @@
+<template>
+    <el-form size="small">
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="1"> 分钟，允许的通配符[, - * /] </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="2">
+                周期从
+                <el-input-number v-model="cycle01" :min="0" :max="60" /> - <el-input-number v-model="cycle02" :min="0" :max="60" /> 分钟
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="3">
+                从
+                <el-input-number v-model="average01" :min="0" :max="60" /> 分钟开始，每 <el-input-number v-model="average02" :min="0" :max="60" /> 分钟执行一次
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <div class="flex-align-center w100">
+                <el-radio v-model="radioValue" :label="4" class="mr5"> 指定 </el-radio>
+                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" placeholder="可多选" multiple>
+                    <el-option v-for="item in 60" :key="item" :value="`${item - 1}`">{{ item - 1 }}</el-option>
+                </el-select>
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, watch, reactive } from 'vue';
+import { checkNumber, CrontabValueObj } from './index';
+
+const cron = defineModel<CrontabValueObj>('cron', { required: true });
+
+const state = reactive({
+    radioValue: 1,
+    cycle01: 0,
+    cycle02: 1,
+    average01: 0,
+    average02: 1,
+    checkboxList: [] as any,
+});
+
+const { radioValue, cycle01, cycle02, average01, average02, checkboxList } = toRefs(state);
+
+// 单选按钮值变化时
+function radioChange() {
+    if (state.radioValue !== 1 && cron.value.second === '*') {
+        cron.value.second = '0';
+    }
+    switch (state.radioValue) {
+        case 1:
+            cron.value.min = '*';
+            cron.value.hour = '*';
+            break;
+        case 2:
+            cron.value.min = state.cycle01 + '-' + state.cycle02;
+            break;
+        case 3:
+            cron.value.min = state.average01 + '/' + state.average02;
+            break;
+        case 4:
+            cron.value.min = checkboxString.value;
+            break;
+    }
+}
+// 周期两个值变化时
+function cycleChange() {
+    state.cycle01 = checkNumber(state.cycle01, 0, 59);
+    state.cycle02 = checkNumber(state.cycle02, 0, 59);
+    if (state.radioValue == 2) {
+        cron.value.min = cycleTotal.value;
+    }
+}
+
+// 平均两个值变化时
+function averageChange() {
+    state.average01 = checkNumber(state.average01, 0, 59);
+    state.average02 = checkNumber(state.average02, 1, 59);
+    if (state.radioValue == 3) {
+        cron.value.min = averageTotal.value;
+    }
+}
+
+// checkbox值变化时
+function checkboxChange() {
+    if (state.radioValue == 4) {
+        cron.value.min = checkboxString.value;
+    }
+}
+
+// 计算两个周期值
+const cycleTotal = computed(() => {
+    return state.cycle01 + '-' + state.cycle02;
+});
+
+// 计算平均用到的值
+const averageTotal = computed(() => {
+    return state.average01 + '/' + state.average02;
+});
+
+// 计算勾选的checkbox值合集
+const checkboxString = computed(() => {
+    let str = state.checkboxList.join();
+    return str == '' ? '*' : str;
+});
+
+watch(
+    () => state.radioValue,
+    () => {
+        radioChange();
+    }
+);
+
+watch(cycleTotal, () => {
+    cycleChange();
+});
+
+watch(averageTotal, () => {
+    averageChange();
+});
+
+watch(checkboxString, () => {
+    checkboxChange();
+});
+
+const parse = () => {
+    //反解析
+    let ins = cron.value.min;
+    if (ins === '*') {
+        state.radioValue = 1;
+    } else if (ins.indexOf('-') > -1) {
+        state.radioValue = 2;
+        let indexArr = ins.split('-') as any;
+        isNaN(indexArr[0]) ? (state.cycle01 = 0) : (state.cycle01 = indexArr[0]);
+        state.cycle02 = indexArr[1];
+    } else if (ins.indexOf('/') > -1) {
+        state.radioValue = 3;
+        let indexArr = ins.split('/') as any;
+        isNaN(indexArr[0]) ? (state.average01 = 0) : (state.average01 = indexArr[0]);
+        state.average02 = indexArr[1];
+    } else {
+        state.radioValue = 4;
+        state.checkboxList = ins.split(',');
+    }
+};
+
+defineExpose({ parse });
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabMouth.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabMouth.vue
@@ -0,0 +1,163 @@
+<template>
+    <el-form size="small">
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="1"> 月，允许的通配符[, - * /] </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="2">
+                周期从
+                <el-input-number v-model="cycle01" :min="1" :max="12" /> - <el-input-number v-model="cycle02" :min="1" :max="12" /> 月
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="3">
+                从
+                <el-input-number v-model="average01" :min="1" :max="12" /> 月开始，每 <el-input-number v-model="average02" :min="1" :max="12" /> 月月执行一次
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <div class="flex-align-center w100">
+                <el-radio v-model="radioValue" :label="4" class="mr5"> 指定 </el-radio>
+                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" placeholder="可多选" multiple>
+                    <el-option v-for="item in 12" :key="item" :value="`${item}`">{{ item }}</el-option>
+                </el-select>
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, watch, reactive } from 'vue';
+import { checkNumber, CrontabValueObj } from './index';
+
+const cron = defineModel<CrontabValueObj>('cron', { required: true });
+
+const state = reactive({
+    radioValue: 1,
+    cycle01: 1,
+    cycle02: 2,
+    average01: 1,
+    average02: 1,
+    checkboxList: [] as any,
+});
+
+const { radioValue, cycle01, cycle02, average01, average02, checkboxList } = toRefs(state);
+
+// 单选按钮值变化时
+function radioChange() {
+    if (state.radioValue === 1) {
+        cron.value.mouth = '*';
+        cron.value.year = '*';
+    } else {
+        if (cron.value.day === '*') {
+            cron.value.day = '0';
+        }
+        if (cron.value.hour === '*') {
+            cron.value.hour = '0';
+        }
+        if (cron.value.min === '*') {
+            cron.value.min = '0';
+        }
+        if (cron.value.second === '*') {
+            cron.value.second = '0';
+        }
+    }
+    switch (state.radioValue) {
+        case 2:
+            cron.value.mouth = state.cycle01 + '-' + state.cycle02;
+            break;
+        case 3:
+            cron.value.mouth = state.average01 + '/' + state.average02;
+            break;
+        case 4:
+            cron.value.mouth = checkboxString.value;
+            break;
+    }
+}
+
+// 周期两个值变化时
+function cycleChange() {
+    state.cycle01 = checkNumber(state.cycle01, 1, 12);
+    state.cycle02 = checkNumber(state.cycle02, 1, 12);
+    if (state.radioValue == 2) {
+        cron.value.mouth = cycleTotal.value;
+    }
+}
+
+// 平均两个值变化时
+function averageChange() {
+    state.average01 = checkNumber(state.average01, 1, 12);
+    state.average02 = checkNumber(state.average02, 1, 12);
+    if (state.radioValue == 3) {
+        cron.value.mouth = averageTotal.value;
+    }
+}
+
+// checkbox值变化时
+function checkboxChange() {
+    if (state.radioValue == 4) {
+        cron.value.mouth = checkboxString.value;
+    }
+}
+
+// 计算两个周期值
+const cycleTotal = computed(() => {
+    return state.cycle01 + '-' + state.cycle02;
+});
+
+// 计算平均用到的值
+const averageTotal = computed(() => {
+    return state.average01 + '/' + state.average02;
+});
+
+// 计算勾选的checkbox值合集
+const checkboxString = computed(() => {
+    let str = state.checkboxList.join();
+    return str == '' ? '*' : str;
+});
+
+watch(
+    () => state.radioValue,
+    () => {
+        radioChange();
+    }
+);
+
+watch(cycleTotal, () => {
+    cycleChange();
+});
+
+watch(averageTotal, () => {
+    averageChange();
+});
+
+watch(checkboxString, () => {
+    checkboxChange();
+});
+
+const parse = () => {
+    //反解析
+    let ins = cron.value.mouth;
+    if (ins === '*') {
+        state.radioValue = 1;
+    } else if (ins.indexOf('-') > -1) {
+        state.radioValue = 2;
+        let indexArr = ins.split('-') as any;
+        isNaN(indexArr[0]) ? (state.cycle01 = 0) : (state.cycle01 = indexArr[0]);
+        state.cycle02 = indexArr[1];
+    } else if (ins.indexOf('/') > -1) {
+        state.radioValue = 3;
+        let indexArr = ins.split('/') as any;
+        isNaN(indexArr[0]) ? (state.average01 = 0) : (state.average01 = indexArr[0]);
+        state.average02 = indexArr[1];
+    } else {
+        state.radioValue = 4;
+        state.checkboxList = ins.split(',');
+    }
+};
+
+defineExpose({ parse });
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabResult.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabResult.vue
@@ -0,0 +1,588 @@
+<template>
+    <div class="popup-result">
+        <p class="title">最近5次运行时间</p>
+        <ul class="popup-result-scroll">
+            <template v-if="isShow">
+                <li v-for="item in resultList" :key="item">{{ item }}</li>
+            </template>
+            <li v-else>计算结果中...</li>
+        </ul>
+    </div>
+</template>
+
+<script lang="js" setup>
+import { toRefs, watch, onMounted, reactive } from 'vue';
+
+const props = defineProps({
+    ex: {
+        type: String,
+        required: true,
+    },
+});
+
+const state = reactive({
+    dayRule: '',
+    dayRuleSup: '',
+    dateArr: [],
+    resultList: [],
+    isShow: false,
+});
+
+const { resultList, isShow } = toRefs(state);
+
+watch(
+    () => props.ex,
+    () => {
+        expressionChange();
+    }
+);
+
+onMounted(() => {
+    expressionChange();
+});
+
+// 表达式值变化时，开始去计算结果
+function expressionChange() {
+    // 计算开始-隐藏结果
+    state.isShow = false;
+    // 获取规则数组[0秒、1分、2时、3日、4月、5星期、6年]
+    let ruleArr = props.ex.split(' ');
+    // 用于记录进入循环的次数
+    let nums = 0;
+    // 用于暂时存符号时间规则结果的数组
+    let resultArr = [];
+    // 获取当前时间精确至[年、月、日、时、分、秒]
+    let nTime = new Date();
+    let nYear = nTime.getFullYear();
+    let nMouth = nTime.getMonth() + 1;
+    let nDay = nTime.getDate();
+    let nHour = nTime.getHours();
+    let nMin = nTime.getMinutes();
+    let nSecond = nTime.getSeconds();
+    // 根据规则获取到近100年可能年数组、月数组等等
+    getSecondArr(ruleArr[0]);
+    getMinArr(ruleArr[1]);
+    getHourArr(ruleArr[2]);
+    getDayArr(ruleArr[3]);
+    getMouthArr(ruleArr[4]);
+    getWeekArr(ruleArr[5]);
+    getYearArr(ruleArr[6], nYear);
+    // 将获取到的数组赋值-方便使用
+    let sDate = state.dateArr[0];
+    let mDate = state.dateArr[1];
+    let hDate = state.dateArr[2];
+    let DDate = state.dateArr[3];
+    let MDate = state.dateArr[4];
+    let YDate = state.dateArr[5];
+    // 获取当前时间在数组中的索引
+    let sIdx = getIndex(sDate, nSecond);
+    let mIdx = getIndex(mDate, nMin);
+    let hIdx = getIndex(hDate, nHour);
+    let DIdx = getIndex(DDate, nDay);
+    let MIdx = getIndex(MDate, nMouth);
+    let YIdx = getIndex(YDate, nYear);
+    // 重置月日时分秒的函数(后面用的比较多)
+    const resetSecond = function () {
+        sIdx = 0;
+        nSecond = sDate[sIdx];
+    };
+    const resetMin = function () {
+        mIdx = 0;
+        nMin = mDate[mIdx];
+        resetSecond();
+    };
+    const resetHour = function () {
+        hIdx = 0;
+        nHour = hDate[hIdx];
+        resetMin();
+    };
+    const resetDay = function () {
+        DIdx = 0;
+        nDay = DDate[DIdx];
+        resetHour();
+    };
+    const resetMouth = function () {
+        MIdx = 0;
+        nMouth = MDate[MIdx];
+        resetDay();
+    };
+    // 如果当前年份不为数组中当前值
+    if (nYear !== YDate[YIdx]) {
+        resetMouth();
+    }
+    // 如果当前月份不为数组中当前值
+    if (nMouth !== MDate[MIdx]) {
+        resetDay();
+    }
+    // 如果当前“日”不为数组中当前值
+    if (nDay !== DDate[DIdx]) {
+        resetHour();
+    }
+    // 如果当前“时”不为数组中当前值
+    if (nHour !== hDate[hIdx]) {
+        resetMin();
+    }
+    // 如果当前“分”不为数组中当前值
+    if (nMin !== mDate[mIdx]) {
+        resetSecond();
+    }
+
+    // 循环年份数组
+    goYear: for (let Yi = YIdx; Yi < YDate.length; Yi++) {
+        let YY = YDate[Yi];
+        // 如果到达最大值时
+        if (nMouth > MDate[MDate.length - 1]) {
+            resetMouth();
+            continue;
+        }
+        // 循环月份数组
+        goMouth: for (let Mi = MIdx; Mi < MDate.length; Mi++) {
+            // 赋值、方便后面运算
+            let MM = MDate[Mi];
+            MM = MM < 10 ? '0' + MM : MM;
+            // 如果到达最大值时
+            if (nDay > DDate[DDate.length - 1]) {
+                resetDay();
+                if (Mi == MDate.length - 1) {
+                    resetMouth();
+                    continue goYear;
+                }
+                continue;
+            }
+            // 循环日期数组
+            goDay: for (let Di = DIdx; Di < DDate.length; Di++) {
+                // 赋值、方便后面运算
+                let DD = DDate[Di];
+                let thisDD = DD < 10 ? '0' + DD : DD;
+
+                // 如果到达最大值时
+                if (nHour > hDate[hDate.length - 1]) {
+                    resetHour();
+                    if (Di == DDate.length - 1) {
+                        resetDay();
+                        if (Mi == MDate.length - 1) {
+                            resetMouth();
+                            continue goYear;
+                        }
+                        continue goMouth;
+                    }
+                    continue;
+                }
+
+                // 判断日期的合法性，不合法的话也是跳出当前循环
+                if (
+                    checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true &&
+                    state.dayRule !== 'workDay' &&
+                    state.dayRule !== 'lastWeek' &&
+                    state.dayRule !== 'lastDay'
+                ) {
+                    resetDay();
+                    continue goMouth;
+                }
+                // 如果日期规则中有值时
+                if (state.dayRule == 'lastDay') {
+                    //如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
+
+                    if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+                        while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+                            DD--;
+
+                            thisDD = DD < 10 ? '0' + DD : DD;
+                        }
+                    }
+                } else if (state.dayRule == 'workDay') {
+                    //校验并调整如果是2月30号这种日期传进来时需调整至正常月底
+                    if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+                        while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+                            DD--;
+                            thisDD = DD < 10 ? '0' + DD : DD;
+                        }
+                    }
+                    // 获取达到条件的日期是星期X
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
+                    // 当星期日时
+                    if (thisWeek == 0) {
+                        //先找下一个日，并判断是否为月底
+                        DD++;
+                        thisDD = DD < 10 ? '0' + DD : DD;
+                        //判断下一日已经不是合法日期
+                        if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+                            DD -= 3;
+                        }
+                    } else if (thisWeek == 6) {
+                        //当星期6时只需判断不是1号就可进行操作
+                        if (state.dayRuleSup !== 1) {
+                            DD--;
+                        } else {
+                            DD += 2;
+                        }
+                    }
+                } else if (state.dayRule == 'weekDay') {
+                    //如果指定了是星期几
+                    //获取当前日期是属于星期几
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
+                    //校验当前星期是否在星期池（state.dayRuleSup）中
+                    if (Array.indexOf(state.dayRuleSup, thisWeek) < 0) {
+                        // 如果到达最大值时
+                        if (Di == DDate.length - 1) {
+                            resetDay();
+                            if (Mi == MDate.length - 1) {
+                                resetMouth();
+                                continue goYear;
+                            }
+                            continue goMouth;
+                        }
+                        continue;
+                    }
+                } else if (state.dayRule == 'assWeek') {
+                    //如果指定了是第几周的星期几
+                    //获取每月1号是属于星期几
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week');
+                    if (state.dayRuleSup[1] >= thisWeek) {
+                        DD = (state.dayRuleSup[0] - 1) * 7 + state.dayRuleSup[1] - thisWeek + 1;
+                    } else {
+                        DD = state.dayRuleSup[0] * 7 + state.dayRuleSup[1] - thisWeek + 1;
+                    }
+                } else if (state.dayRule == 'lastWeek') {
+                    //如果指定了每月最后一个星期几
+                    //校验并调整如果是2月30号这种日期传进来时需调整至正常月底
+                    if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+                        while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+                            DD--;
+                            thisDD = DD < 10 ? '0' + DD : DD;
+                        }
+                    }
+                    //获取月末最后一天是星期几
+                    let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week');
+                    //找到要求中最近的那个星期几
+                    if (state.dayRuleSup < thisWeek) {
+                        DD -= thisWeek - state.dayRuleSup;
+                    } else if (state.dayRuleSup > thisWeek) {
+                        DD -= 7 - (state.dayRuleSup - thisWeek);
+                    }
+                }
+                // 判断时间值是否小于10置换成“05”这种格式
+                DD = DD < 10 ? '0' + DD : DD;
+
+                // 循环“时”数组
+                goHour: for (let hi = hIdx; hi < hDate.length; hi++) {
+                    let hh = hDate[hi] < 10 ? '0' + hDate[hi] : hDate[hi];
+
+                    // 如果到达最大值时
+                    if (nMin > mDate[mDate.length - 1]) {
+                        resetMin();
+                        if (hi == hDate.length - 1) {
+                            resetHour();
+                            if (Di == DDate.length - 1) {
+                                resetDay();
+                                if (Mi == MDate.length - 1) {
+                                    resetMouth();
+                                    continue goYear;
+                                }
+                                continue goMouth;
+                            }
+                            continue goDay;
+                        }
+                        continue;
+                    }
+                    // 循环"分"数组
+                    goMin: for (let mi = mIdx; mi < mDate.length; mi++) {
+                        let mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi];
+
+                        // 如果到达最大值时
+                        if (nSecond > sDate[sDate.length - 1]) {
+                            resetSecond();
+                            if (mi == mDate.length - 1) {
+                                resetMin();
+                                if (hi == hDate.length - 1) {
+                                    resetHour();
+                                    if (Di == DDate.length - 1) {
+                                        resetDay();
+                                        if (Mi == MDate.length - 1) {
+                                            resetMouth();
+                                            continue goYear;
+                                        }
+                                        continue goMouth;
+                                    }
+                                    continue goDay;
+                                }
+                                continue goHour;
+                            }
+                            continue;
+                        }
+                        // 循环"秒"数组
+                        // eslint-disable-next-line no-unused-labels
+                        goSecond: for (let si = sIdx; si <= sDate.length - 1; si++) {
+                            let ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si];
+                            // 添加当前时间（时间合法性在日期循环时已经判断）
+                            if (MM !== '00' && DD !== '00') {
+                                resultArr.push(YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss);
+                                nums++;
+                            }
+                            //如果条数满了就退出循环
+                            if (nums == 5) break goYear;
+                            //如果到达最大值时
+                            if (si == sDate.length - 1) {
+                                resetSecond();
+                                if (mi == mDate.length - 1) {
+                                    resetMin();
+                                    if (hi == hDate.length - 1) {
+                                        resetHour();
+                                        if (Di == DDate.length - 1) {
+                                            resetDay();
+                                            if (Mi == MDate.length - 1) {
+                                                resetMouth();
+                                                continue goYear;
+                                            }
+                                            continue goMouth;
+                                        }
+                                        continue goDay;
+                                    }
+                                    continue goHour;
+                                }
+                                continue goMin;
+                            }
+                        } //goSecond
+                    } //goMin
+                } //goHour
+            } //goDay
+        } //goMouth
+    }
+    // 判断100年内的结果条数
+    if (resultArr.length == 0) {
+        state.resultList = ['没有达到条件的结果！'];
+    } else {
+        state.resultList = resultArr;
+        if (resultArr.length !== 5) {
+            state.resultList.push('最近100年内只有上面' + resultArr.length + '条结果！');
+        }
+    }
+    // 计算完成-显示结果
+    state.isShow = true;
+}
+//用于计算某位数字在数组中的索引
+function getIndex(arr, value) {
+    if (value <= arr[0] || value > arr[arr.length - 1]) {
+        return 0;
+    } else {
+        for (let i = 0; i < arr.length - 1; i++) {
+            if (value > arr[i] && value <= arr[i + 1]) {
+                return i + 1;
+            }
+        }
+    }
+}
+// 获取"年"数组
+function getYearArr(rule, year) {
+    state.dateArr[5] = getOrderArr(year, year + 100);
+    if (rule !== undefined) {
+        if (rule.indexOf('-') >= 0) {
+            state.dateArr[5] = getCycleArr(rule, year + 100, false);
+        } else if (rule.indexOf('/') >= 0) {
+            state.dateArr[5] = getAverageArr(rule, year + 100);
+        } else if (rule !== '*') {
+            state.dateArr[5] = getAssignArr(rule);
+        }
+    }
+}
+// 获取"月"数组
+function getMouthArr(rule) {
+    state.dateArr[4] = getOrderArr(1, 12);
+    if (rule.indexOf('-') >= 0) {
+        state.dateArr[4] = getCycleArr(rule, 12, false);
+    } else if (rule.indexOf('/') >= 0) {
+        state.dateArr[4] = getAverageArr(rule, 12);
+    } else if (rule !== '*') {
+        state.dateArr[4] = getAssignArr(rule);
+    }
+}
+// 获取"日"数组-主要为日期规则
+function getWeekArr(rule) {
+    //只有当日期规则的两个值均为“”时则表达日期是有选项的
+    if (state.dayRule == '' && state.dayRuleSup == '') {
+        if (rule.indexOf('-') >= 0) {
+            state.dayRule = 'weekDay';
+            state.dayRuleSup = getCycleArr(rule, 7, false);
+        } else if (rule.indexOf('#') >= 0) {
+            state.dayRule = 'assWeek';
+            let matchRule = rule.match(/[0-9]{1}/g);
+            state.dayRuleSup = [Number(matchRule[0]), Number(matchRule[1])];
+            state.dateArr[3] = [1];
+            if (state.dayRuleSup[1] == 7) {
+                state.dayRuleSup[1] = 0;
+            }
+        } else if (rule.indexOf('L') >= 0) {
+            state.dayRule = 'lastWeek';
+            state.dayRuleSup = Number(rule.match(/[0-9]{1,2}/g)[0]);
+            state.dateArr[3] = [31];
+            if (state.dayRuleSup == 7) {
+                state.dayRuleSup = 0;
+            }
+        } else if (rule !== '*' && rule !== '?') {
+            state.dayRule = 'weekDay';
+            state.dayRuleSup = getAssignArr(rule);
+        }
+        //如果weekDay时将7调整为0【week值0即是星期日】
+        if (state.dayRule == 'weekDay') {
+            for (let i = 0; i < state.dayRuleSup.length; i++) {
+                if (state.dayRuleSup[i] == 7) {
+                    state.dayRuleSup[i] = 0;
+                }
+            }
+        }
+    }
+}
+// 获取"日"数组-少量为日期规则
+function getDayArr(rule) {
+    state.dateArr[3] = getOrderArr(1, 31);
+    state.dayRule = '';
+    state.dayRuleSup = '';
+    if (rule.indexOf('-') >= 0) {
+        state.dateArr[3] = getCycleArr(rule, 31, false);
+        state.dayRuleSup = 'null';
+    } else if (rule.indexOf('/') >= 0) {
+        state.dateArr[3] = getAverageArr(rule, 31);
+        state.dayRuleSup = 'null';
+    } else if (rule.indexOf('W') >= 0) {
+        state.dayRule = 'workDay';
+        state.dayRuleSup = Number(rule.match(/[0-9]{1,2}/g)[0]);
+        state.dateArr[3] = [state.dayRuleSup];
+    } else if (rule.indexOf('L') >= 0) {
+        state.dayRule = 'lastDay';
+        state.dayRuleSup = 'null';
+        state.dateArr[3] = [31];
+    } else if (rule !== '*' && rule !== '?') {
+        state.dateArr[3] = getAssignArr(rule);
+        state.dayRuleSup = 'null';
+    } else if (rule == '*') {
+        state.dayRuleSup = 'null';
+    }
+}
+// 获取"时"数组
+function getHourArr(rule) {
+    state.dateArr[2] = getOrderArr(0, 23);
+    if (rule.indexOf('-') >= 0) {
+        state.dateArr[2] = getCycleArr(rule, 24, true);
+    } else if (rule.indexOf('/') >= 0) {
+        state.dateArr[2] = getAverageArr(rule, 23);
+    } else if (rule !== '*') {
+        state.dateArr[2] = getAssignArr(rule);
+    }
+}
+// 获取"分"数组
+function getMinArr(rule) {
+    state.dateArr[1] = getOrderArr(0, 59);
+    if (rule.indexOf('-') >= 0) {
+        state.dateArr[1] = getCycleArr(rule, 60, true);
+    } else if (rule.indexOf('/') >= 0) {
+        state.dateArr[1] = getAverageArr(rule, 59);
+    } else if (rule !== '*') {
+        state.dateArr[1] = getAssignArr(rule);
+    }
+}
+// 获取"秒"数组
+function getSecondArr(rule) {
+    state.dateArr[0] = getOrderArr(0, 59);
+    if (rule.indexOf('-') >= 0) {
+        state.dateArr[0] = getCycleArr(rule, 60, true);
+    } else if (rule.indexOf('/') >= 0) {
+        state.dateArr[0] = getAverageArr(rule, 59);
+    } else if (rule !== '*') {
+        state.dateArr[0] = getAssignArr(rule);
+    }
+}
+// 根据传进来的min-max返回一个顺序的数组
+function getOrderArr(min, max) {
+    let arr = [];
+    for (let i = min; i <= max; i++) {
+        arr.push(i);
+    }
+    return arr;
+}
+// 根据规则中指定的零散值返回一个数组
+function getAssignArr(rule) {
+    let arr = [];
+    let assiginArr = rule.split(',');
+    for (let i = 0; i < assiginArr.length; i++) {
+        arr[i] = Number(assiginArr[i]);
+    }
+    arr.sort(compare);
+    return arr;
+}
+// 根据一定算术规则计算返回一个数组
+function getAverageArr(rule, limit) {
+    let arr = [];
+    let agArr = rule.split('/');
+    let min = Number(agArr[0]);
+    let step = Number(agArr[1]);
+    while (min <= limit) {
+        arr.push(min);
+        min += step;
+    }
+    return arr;
+}
+// 根据规则返回一个具有周期性的数组
+function getCycleArr(rule, limit, status) {
+    //status--表示是否从0开始（则从1开始）
+    let arr = [];
+    let cycleArr = rule.split('-');
+    let min = Number(cycleArr[0]);
+    let max = Number(cycleArr[1]);
+    if (min > max) {
+        max += limit;
+    }
+    for (let i = min; i <= max; i++) {
+        let add = 0;
+        if (status == false && i % limit == 0) {
+            add = limit;
+        }
+        arr.push(Math.round((i % limit) + add));
+    }
+    arr.sort(compare);
+    return arr;
+}
+//比较数字大小（用于Array.sort）
+function compare(value1, value2) {
+    if (value2 - value1 > 0) {
+        return -1;
+    } else {
+        return 1;
+    }
+}
+// 格式化日期格式如：2017-9-19 18:04:33
+function formatDate(value, type) {
+    // 计算日期相关值
+    let time = typeof value == 'number' ? new Date(value) : value;
+    let Y = time.getFullYear();
+    let M = time.getMonth() + 1;
+    let D = time.getDate();
+    let h = time.getHours();
+    let m = time.getMinutes();
+    let s = time.getSeconds();
+    let week = time.getDay();
+    // 如果传递了type的话
+    if (type == undefined) {
+        return (
+            Y +
+            '-' +
+            (M < 10 ? '0' + M : M) +
+            '-' +
+            (D < 10 ? '0' + D : D) +
+            ' ' +
+            (h < 10 ? '0' + h : h) +
+            ':' +
+            (m < 10 ? '0' + m : m) +
+            ':' +
+            (s < 10 ? '0' + s : s)
+        );
+    } else if (type == 'week') {
+        return week;
+    }
+}
+// 检查日期是否存在
+function checkDate(value) {
+    let time = new Date(value);
+    let format = formatDate(time);
+    return value == format ? true : false;
+}
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabSecond.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabSecond.vue
@@ -0,0 +1,149 @@
+<template>
+    <el-form size="small">
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="1"> 秒，允许的通配符[, - * /] </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="2">
+                周期从
+                <el-input-number v-model="cycle01" :min="0" :max="60" /> - <el-input-number v-model="cycle02" :min="0" :max="60" /> 秒
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="3">
+                从
+                <el-input-number v-model="average01" :min="0" :max="60" /> 秒开始，每 <el-input-number v-model="average02" :min="0" :max="60" /> 秒执行一次
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <div class="flex-align-center w100">
+                <el-radio v-model="radioValue" :label="4" class="mr5"> 指定 </el-radio>
+                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" placeholder="可多选" multiple>
+                    <el-option v-for="item in 60" :key="item" :value="`${item - 1}`">{{ item - 1 }}</el-option>
+                </el-select>
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, watch, reactive } from 'vue';
+import { checkNumber, CrontabValueObj } from './index';
+
+const cron = defineModel<CrontabValueObj>('cron', { required: true });
+
+const state = reactive({
+    radioValue: 1,
+    cycle01: 1,
+    cycle02: 2,
+    average01: 0,
+    average02: 1,
+    checkboxList: [] as any,
+});
+
+const { radioValue, cycle01, cycle02, average01, average02, checkboxList } = toRefs(state);
+
+// 单选按钮值变化时
+function radioChange() {
+    switch (state.radioValue) {
+        case 1:
+            cron.value.second = '*';
+            cron.value.min = '*';
+            break;
+        case 2:
+            cron.value.second = state.cycle01 + '-' + state.cycle02;
+            break;
+        case 3:
+            cron.value.second = state.average01 + '/' + state.average02;
+            break;
+        case 4:
+            cron.value.second = checkboxString.value;
+            break;
+    }
+}
+// 周期两个值变化时
+function cycleChange() {
+    state.cycle01 = checkNumber(state.cycle01, 0, 59);
+    state.cycle02 = checkNumber(state.cycle02, 0, 59);
+    if (state.radioValue == 2) {
+        cron.value.second = cycleTotal.value;
+    }
+}
+
+// 平均两个值变化时
+function averageChange() {
+    state.average01 = checkNumber(state.average01, 0, 59);
+    state.average02 = checkNumber(state.average02, 1, 59);
+    if (state.radioValue == 3) {
+        cron.value.second = averageTotal.value;
+    }
+}
+
+// checkbox值变化时
+function checkboxChange() {
+    if (state.radioValue == 4) {
+        cron.value.second = checkboxString.value;
+    }
+}
+
+// 计算两个周期值
+const cycleTotal = computed(() => {
+    return state.cycle01 + '-' + state.cycle02;
+});
+
+// 计算平均用到的值
+const averageTotal = computed(() => {
+    return state.average01 + '/' + state.average02;
+});
+
+// 计算勾选的checkbox值合集
+const checkboxString = computed(() => {
+    let str = state.checkboxList.join();
+    return str == '' ? '*' : str;
+});
+
+watch(
+    () => state.radioValue,
+    () => {
+        radioChange();
+    }
+);
+
+watch(cycleTotal, () => {
+    cycleChange();
+});
+
+watch(averageTotal, () => {
+    averageChange();
+});
+
+watch(checkboxString, () => {
+    checkboxChange();
+});
+
+const parse = () => {
+    //反解析
+    let ins = cron.value.second;
+    if (ins === '*') {
+        state.radioValue = 1;
+    } else if (ins.indexOf('-') > -1) {
+        state.radioValue = 2;
+        let indexArr = ins.split('-') as any;
+        isNaN(indexArr[0]) ? (state.cycle01 = 0) : (state.cycle01 = indexArr[0]);
+        state.cycle02 = indexArr[1];
+    } else if (ins.indexOf('/') > -1) {
+        state.radioValue = 3;
+        let indexArr = ins.split('/') as any;
+        isNaN(indexArr[0]) ? (state.average01 = 0) : (state.average01 = indexArr[0]);
+        state.average02 = indexArr[1];
+    } else {
+        state.radioValue = 4;
+        state.checkboxList = ins.split(',');
+    }
+};
+
+defineExpose({ parse });
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabWeek.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabWeek.vue
@@ -0,0 +1,205 @@
+<template>
+    <el-form size="small">
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="1"> 周，允许的通配符[, - * / L #] </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="3">
+                周期从星期
+                <el-input-number v-model="cycle01" :min="1" :max="7" /> -
+                <el-input-number v-model="cycle02" :min="1" :max="7" />
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="4">
+                第
+                <el-input-number v-model="average01" :min="1" :max="4" /> 周的星期
+                <el-input-number v-model="average02" :min="1" :max="7" />
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio v-model="radioValue" :label="5">
+                本月最后一个星期
+                <el-input-number v-model="weekday" :min="1" :max="7" />
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <div class="flex-align-center w100">
+                <el-radio v-model="radioValue" :label="6" class="mr5"> 指定 </el-radio>
+                <el-select @click="radioValue = 6" class="w100" clearable v-model="checkboxList" placeholder="可多选" multiple>
+                    <el-option v-for="(item, index) of weekList" :label="item" :key="index" :value="`${index + 1}`">{{ item }}</el-option>
+                </el-select>
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, watch, reactive } from 'vue';
+import { checkNumber, CrontabValueObj } from './index';
+
+const cron = defineModel<CrontabValueObj>('cron', { required: true });
+
+const state = reactive({
+    radioValue: 2,
+    weekday: 1,
+    cycle01: 1,
+    cycle02: 2,
+    average01: 1,
+    average02: 1,
+    checkboxList: [] as any,
+    weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+});
+
+const { radioValue, cycle01, cycle02, average01, average02, checkboxList, weekday, weekList } = toRefs(state);
+
+// 单选按钮值变化时
+function radioChange() {
+    if (state.radioValue === 1) {
+        cron.value.week = '*';
+        cron.value.year = '*';
+    } else {
+        if (cron.value.mouth === '*') {
+            cron.value.mouth = '0';
+        }
+        if (cron.value.day === '*') {
+            cron.value.day = '0';
+        }
+        if (cron.value.hour === '*') {
+            cron.value.hour = '0';
+        }
+        if (cron.value.min === '*') {
+            cron.value.min = '0';
+        }
+        if (cron.value.second === '*') {
+            cron.value.second = '0';
+        }
+    }
+    switch (state.radioValue) {
+        case 2:
+            cron.value.week = '?';
+            break;
+        case 3:
+            cron.value.week = state.cycle01 + '-' + state.cycle02;
+            break;
+        case 4:
+            cron.value.week = state.average01 + '#' + state.average02;
+            break;
+        case 5:
+            cron.value.week = state.weekday + 'L';
+            break;
+        case 6:
+            cron.value.week = checkboxString.value;
+            break;
+    }
+}
+// 周期两个值变化时
+function cycleChange() {
+    state.cycle01 = checkNumber(state.cycle01, 1, 7);
+    state.cycle02 = checkNumber(state.cycle02, 1, 7);
+    if (state.radioValue == 3) {
+        cron.value.week = cycleTotal.value;
+    }
+}
+
+// 平均两个值变化时
+function averageChange() {
+    state.average01 = checkNumber(state.average01, 1, 4);
+    state.average02 = checkNumber(state.average02, 1, 7);
+    if (state.radioValue == 4) {
+        cron.value.week = averageTotal.value;
+    }
+}
+
+// checkbox值变化时
+function checkboxChange() {
+    if (state.radioValue == 6) {
+        cron.value.week = checkboxString.value;
+    }
+}
+
+// 计算两个周期值
+const cycleTotal = computed(() => {
+    return state.cycle01 + '-' + state.cycle02;
+});
+
+// 计算平均用到的值
+const averageTotal = computed(() => {
+    return state.average01 + '#' + state.average02;
+});
+
+// 计算勾选的checkbox值合集
+const checkboxString = computed(() => {
+    let str = state.checkboxList.join();
+    return str == '' ? '*' : str;
+});
+
+watch(
+    () => state.radioValue,
+    () => {
+        radioChange();
+    }
+);
+
+watch(cycleTotal, () => {
+    cycleChange();
+});
+
+watch(averageTotal, () => {
+    averageChange();
+});
+
+watch(checkboxString, () => {
+    checkboxChange();
+});
+
+watch(
+    () => state.weekday,
+    () => {
+        state.weekday = checkNumber(state.weekday, 1, 7);
+        if (state.radioValue == 5) {
+            cron.value.week = state.weekday + 'L';
+        }
+    }
+);
+
+const parse = () => {
+    //反解析
+    let value = cron.value.week;
+    if (!value) {
+        return;
+    }
+    if (value === '*') {
+        state.radioValue = 1;
+    } else if (value == '?') {
+        state.radioValue = 2;
+    } else if (value.indexOf('-') > -1) {
+        let indexArr = value.split('-') as any;
+        isNaN(indexArr[0]) ? (state.cycle01 = 0) : (state.cycle01 = indexArr[0]);
+        state.cycle02 = indexArr[1];
+        state.radioValue = 3;
+    } else if (value.indexOf('#') > -1) {
+        let indexArr = value.split('#') as any;
+        isNaN(indexArr[0]) ? (state.average01 = 1) : (state.average01 = indexArr[0]);
+        state.average02 = indexArr[1];
+        state.radioValue = 4;
+    } else if (value.indexOf('L') > -1) {
+        let indexArr = value.split('L') as any;
+        isNaN(indexArr[0]) ? (state.weekday = 1) : (state.weekday = indexArr[0]);
+        state.radioValue = 5;
+    } else {
+        state.checkboxList = value.split(',');
+        state.radioValue = 6;
+    }
+};
+
+defineExpose({ parse });
+</script>
--- a/mayfly_go_web/src/components/crontab/CrontabYear.vue
+++ b/mayfly_go_web/src/components/crontab/CrontabYear.vue
@@ -0,0 +1,159 @@
+<template>
+    <el-form size="small">
+        <el-form-item>
+            <el-radio :label="1" v-model="radioValue"> 不填，允许的通配符[, - * /] </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio :label="2" v-model="radioValue"> 每年 </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio :label="3" v-model="radioValue">
+                周期从
+                <el-input-number v-model="cycle01" :min="fullYear" /> -
+                <el-input-number v-model="cycle02" :min="fullYear" />
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <el-radio :label="4" v-model="radioValue">
+                从
+                <el-input-number v-model="average01" :min="fullYear" /> 年开始，每 <el-input-number v-model="average02" :min="fullYear" /> 年执行一次
+            </el-radio>
+        </el-form-item>
+
+        <el-form-item>
+            <div class="flex-align-center w100">
+                <el-radio v-model="radioValue" :label="5" class="mr5"> 指定 </el-radio>
+                <el-select @click="radioValue = 5" class="w100" clearable v-model="checkboxList" placeholder="可多选" multiple>
+                    <el-option v-for="item in 9" :key="item" :value="`${item - 1 + fullYear}`" :label="item - 1 + fullYear" />
+                </el-select>
+            </div>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="ts" setup>
+import { computed, toRefs, watch, onMounted, reactive } from 'vue';
+import { checkNumber, CrontabValueObj } from './index';
+
+const cron = defineModel<CrontabValueObj>('cron', { required: true });
+
+const state = reactive({
+    fullYear: 0,
+    radioValue: 1,
+    cycle01: 0,
+    cycle02: 0,
+    average01: 0,
+    average02: 1,
+    checkboxList: [] as any,
+});
+
+const { radioValue, cycle01, cycle02, average01, average02, checkboxList, fullYear } = toRefs(state);
+
+onMounted(() => {
+    // 仅获取当前年份
+    state.fullYear = Number(new Date().getFullYear());
+});
+
+// 单选按钮值变化时
+function radioChange() {
+    switch (state.radioValue) {
+        case 1:
+            cron.value.year = '';
+            break;
+        case 2:
+            cron.value.year = '*';
+            break;
+        case 3:
+            cron.value.year = state.cycle01 + '-' + state.cycle02;
+            break;
+        case 4:
+            cron.value.year = state.average01 + '/' + state.average02;
+            break;
+        case 5:
+            cron.value.year = checkboxString.value;
+            break;
+    }
+}
+
+// 周期两个值变化时
+function cycleChange() {
+    state.cycle01 = checkNumber(state.cycle01, state.fullYear, state.fullYear + 100);
+    state.cycle02 = checkNumber(state.cycle02, state.fullYear + 1, state.fullYear + 101);
+    if (state.radioValue == 3) {
+        cron.value.year = cycleTotal.value;
+    }
+}
+
+// 平均两个值变化时
+function averageChange() {
+    state.average01 = checkNumber(state.average01, state.fullYear, state.fullYear + 100);
+    state.average02 = checkNumber(state.average02, 1, 10);
+    if (state.radioValue == 4) {
+        cron.value.year = averageTotal.value;
+    }
+}
+
+// checkbox值变化时
+function checkboxChange() {
+    if (state.radioValue == 5) {
+        cron.value.year = checkboxString.value;
+    }
+}
+
+// 计算两个周期值
+const cycleTotal = computed(() => {
+    return state.cycle01 + '-' + state.cycle02;
+});
+
+// 计算平均用到的值
+const averageTotal = computed(() => {
+    return state.average01 + '/' + state.average02;
+});
+
+// 计算勾选的checkbox值合集
+const checkboxString = computed(() => {
+    let str = state.checkboxList.join();
+    return str == '' ? '*' : str;
+});
+
+watch(
+    () => state.radioValue,
+    () => {
+        radioChange();
+    }
+);
+
+watch(cycleTotal, () => {
+    cycleChange();
+});
+
+watch(averageTotal, () => {
+    averageChange();
+});
+
+watch(checkboxString, () => {
+    checkboxChange();
+});
+
+const parse = () => {
+    //反解析
+    let value = cron.value.year;
+    if (value == '') {
+        state.radioValue = 1;
+    } else if (value == '*') {
+        state.radioValue = 2;
+    } else if (value.indexOf('-') > -1) {
+        state.radioValue = 3;
+    } else if (value.indexOf('/') > -1) {
+        state.radioValue = 4;
+    } else {
+        state.checkboxList = value.split(',');
+        state.radioValue = 5;
+    }
+};
+
+defineExpose({ parse });
+</script>
--- a/mayfly_go_web/src/components/crontab/index.ts
+++ b/mayfly_go_web/src/components/crontab/index.ts
@@ -0,0 +1,21 @@
+// 表单选项的子组件校验数字格式
+export function checkNumber(value: any, minLimit: number, maxLimit: number) {
+    //检查必须为整数
+    value = Math.floor(value);
+    if (value < minLimit) {
+        value = minLimit;
+    } else if (value > maxLimit) {
+        value = maxLimit;
+    }
+    return value;
+}
+
+export interface CrontabValueObj {
+    second: string;
+    min: string;
+    hour: string;
+    day: string;
+    mouth: string;
+    week: string;
+    year: string;
+}
--- a/mayfly_go_web/src/components/drawer-header/DrawerHeader.vue
+++ b/mayfly_go_web/src/components/drawer-header/DrawerHeader.vue
@@ -0,0 +1,33 @@
+<template>
+    <el-page-header @back="props.back">
+        <template #content>
+            <span>{{ header }}</span>
+            <span v-if="resource && !hideResource">
+                -
+                <el-tooltip v-if="resource.length > 25" :content="resource" placement="bottom">
+                    <el-tag effect="dark" type="success">{{ resource.substring(0, 23) + '...' }}</el-tag>
+                </el-tooltip>
+                <el-tag v-else effect="dark" type="success">{{ resource }}</el-tag>
+            </span>
+            <el-divider v-if="slots.buttons" direction="vertical" />
+            <slot v-if="slots.buttons" name="buttons"></slot>
+        </template>
+        <template #extra>
+            <slot v-if="slots.extra" name="extra"></slot>
+        </template>
+    </el-page-header>
+</template>
+
+<script lang="ts" setup>
+import { useSlots } from 'vue';
+const slots = useSlots();
+
+defineOptions({ name: 'DrawerHeader' });
+
+const props = defineProps({
+    header: String,
+    back: Function,
+    resource: String,
+    hideResource: Boolean,
+});
+</script>
--- a/mayfly_go_web/src/components/dynamic-form/DynamicForm.vue
+++ b/mayfly_go_web/src/components/dynamic-form/DynamicForm.vue
@@ -1,10 +1,10 @@
 <template>
    <div class="dynamic-form">
-        <el-form v-bind="$attrs" ref="formRef" :model="formData" label-width="auto">
-            <el-form-item v-for="item in formItems as any" :key="item.name" :prop="item.model" :label="item.name" required>
-                <el-input v-if="!item.options" v-model="formData[item.model]" :placeholder="item.placeholder" autocomplete="off" clearable></el-input>
+        <el-form v-bind="$attrs" ref="formRef" :model="modelValue" label-width="auto">
+            <el-form-item v-for="item in props.formItems as any" :key="item.name" :prop="item.model" :label="item.name" :required="item.required ?? true">
+                <el-input v-if="!item.options" v-model="modelValue[item.model]" :placeholder="item.placeholder" autocomplete="off" clearable></el-input>

-                <el-select v-else v-model="formData[item.model]" :placeholder="item.placeholder" filterable autocomplete="off" clearable style="width: 100%">
+                <el-select v-else v-model="modelValue[item.model]" :placeholder="item.placeholder" filterable autocomplete="off" clearable style="width: 100%">
                    <el-option v-for="option in item.options.split(',')" :key="option" :label="option" :value="option" />
                </el-select>
            </el-form-item>
@@ -13,19 +13,15 @@
 </template>

 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core';
 import { ref } from 'vue';

 const props = defineProps({
    formItems: { type: Array },
-    modelValue: { type: Object },
 });

-const emit = defineEmits(['update:modelValue']);
-
 const formRef: any = ref();

-const formData: any = useVModel(props, 'modelValue', emit);
+const modelValue: any = defineModel();

 const validate = async (func: any) => {
    await formRef.value.validate(func);
--- a/mayfly_go_web/src/components/dynamic-form/DynamicFormDialog.vue
+++ b/mayfly_go_web/src/components/dynamic-form/DynamicFormDialog.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="form-dialog">
        <el-dialog @close="close" v-bind="$attrs" :title="title" v-model="dialogVisible" :width="width">
-            <dynamic-form ref="df" :form-items="formItems" v-model="formData" />
+            <dynamic-form ref="df" :form-items="props.formItems" v-model="formData" />

            <template #footer>
                <span>
@@ -18,22 +18,19 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import DynamicForm from './DynamicForm.vue';
-import { useVModel } from '@vueuse/core';

-const emit = defineEmits(['update:visible', 'update:modelValue', 'close', 'confirm']);
+const emit = defineEmits(['close', 'confirm']);

 const props = defineProps({
    title: { type: String },
-    visible: { type: Boolean },
    width: { type: [String, Number], default: '500px' },
    formItems: { type: Array },
-    modelValue: { type: Object },
 });

 const df: any = ref();

-const formData: any = useVModel(props, 'modelValue', emit);
-const dialogVisible: any = useVModel(props, 'visible', emit);
+const formData: any = defineModel('modelValue');
+const dialogVisible = defineModel<boolean>('visible', { default: false });

 const close = () => {
    emit('close');
--- a/mayfly_go_web/src/components/dynamic-form/DynamicFormEdit.vue
+++ b/mayfly_go_web/src/components/dynamic-form/DynamicFormEdit.vue
@@ -29,6 +29,12 @@
                </template>
            </el-table-column>

+            <el-table-column prop="required" label="必填" min-width="40px">
+                <template #default="scope">
+                    <el-checkbox v-model="scope.row['required']" />
+                </template>
+            </el-table-column>
+
            <el-table-column label="操作" wdith="20px">
                <template #default="scope">
                    <el-button type="danger" @click="deleteItem(scope.$index)" icon="delete" plain></el-button>
@@ -39,15 +45,7 @@
 </template>

 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core';
-
-const props = defineProps({
-    modelValue: { type: Array },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const formItems: any = useVModel(props, 'modelValue', emit);
+const formItems: any = defineModel('modelValue');

 const addItem = () => {
    formItems.value.push({});
--- a/mayfly_go_web/src/components/echarts/ECharts.vue
+++ b/mayfly_go_web/src/components/echarts/ECharts.vue
@@ -0,0 +1,86 @@
+<template>
+    <div id="echarts" ref="chartRef" :style="echartsStyle" />
+</template>
+
+<script setup lang="ts" name="ECharts">
+import { ref, onMounted, onBeforeUnmount, watch, computed, markRaw, nextTick } from 'vue';
+import { EChartsType, ECElementEvent } from 'echarts/core';
+import echarts, { ECOption } from './config';
+import { useDebounceFn, useEventListener } from '@vueuse/core';
+import { light } from './config/theme';
+// import { useThemeConfig } from '@/store/themeConfig';
+// import { storeToRefs } from 'pinia';
+
+interface Props {
+    option: ECOption;
+    renderer?: 'canvas' | 'svg';
+    resize?: boolean;
+    theme?: Object | string;
+    width?: number | string;
+    height?: number | string;
+    onClick?: (event: ECElementEvent) => any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    renderer: 'canvas',
+    theme: light as any,
+    resize: true,
+});
+
+const echartsStyle = computed(() => {
+    return props.width || props.height ? { height: props.height + 'px', width: props.width + 'px' } : { height: '100%', width: '100%' };
+});
+
+const chartRef = ref<HTMLDivElement | HTMLCanvasElement>();
+const chartInstance = ref<EChartsType>();
+
+const draw = () => {
+    if (chartInstance.value) {
+        chartInstance.value.setOption(props.option, { notMerge: true });
+    }
+};
+
+watch(props, () => {
+    draw();
+});
+
+const handleClick = (event: ECElementEvent) => props.onClick && props.onClick(event);
+
+const init = () => {
+    if (!chartRef.value) return;
+    chartInstance.value = echarts.getInstanceByDom(chartRef.value);
+
+    if (!chartInstance.value) {
+        chartInstance.value = markRaw(
+            echarts.init(chartRef.value, props.theme, {
+                renderer: props.renderer,
+            })
+        );
+        chartInstance.value.on('click', handleClick);
+        draw();
+    }
+};
+
+const resize = () => {
+    if (chartInstance.value && props.resize) {
+        chartInstance.value.resize({ animation: { duration: 300 } });
+    }
+};
+
+const debouncedResize = useDebounceFn(resize, 300, { maxWait: 800 });
+
+onMounted(() => {
+    nextTick(() => init());
+    useEventListener('resize', debouncedResize);
+});
+
+onBeforeUnmount(() => {
+    chartInstance.value?.dispose();
+});
+
+defineExpose({
+    getInstance: () => chartInstance.value,
+    resize,
+    draw,
+});
+</script>
--- a/mayfly_go_web/src/components/echarts/config/index.ts
+++ b/mayfly_go_web/src/components/echarts/config/index.ts
@@ -0,0 +1,67 @@
+import * as echarts from 'echarts/core';
+import { BarChart, LineChart, LinesChart, PieChart, ScatterChart, RadarChart, GaugeChart } from 'echarts/charts';
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    TransformComponent,
+    LegendComponent,
+    PolarComponent,
+    GeoComponent,
+    ToolboxComponent,
+    DataZoomComponent,
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import type {
+    BarSeriesOption,
+    LineSeriesOption,
+    LinesSeriesOption,
+    PieSeriesOption,
+    ScatterSeriesOption,
+    RadarSeriesOption,
+    GaugeSeriesOption,
+} from 'echarts/charts';
+import type { TitleComponentOption, TooltipComponentOption, GridComponentOption, DatasetComponentOption } from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+// import 'echarts-liquidfill';
+
+export type ECOption = ComposeOption<
+    | BarSeriesOption
+    | LineSeriesOption
+    | LinesSeriesOption
+    | PieSeriesOption
+    | RadarSeriesOption
+    | GaugeSeriesOption
+    | TitleComponentOption
+    | TooltipComponentOption
+    | GridComponentOption
+    | DatasetComponentOption
+    | ScatterSeriesOption
+>;
+
+echarts.use([
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    TransformComponent,
+    LegendComponent,
+    PolarComponent,
+    GeoComponent,
+    ToolboxComponent,
+    DataZoomComponent,
+    BarChart,
+    LineChart,
+    LinesChart,
+    PieChart,
+    ScatterChart,
+    RadarChart,
+    GaugeChart,
+    LabelLayout,
+    UniversalTransition,
+    CanvasRenderer,
+]);
+
+export default echarts;
--- a/mayfly_go_web/src/components/echarts/config/theme.js
+++ b/mayfly_go_web/src/components/echarts/config/theme.js
@@ -0,0 +1,151 @@
+const light = {
+    seriesCnt: '4',
+    backgroundColor: 'rgba(0,0,0,0)',
+    titleColor: '#008acd',
+    subtitleColor: '#aaaaaa',
+    textColorShow: false,
+    textColor: '#333',
+    markTextColor: '#eeeeee',
+    color: [
+        '#2ec7c9',
+        '#b6a2de',
+        '#5ab1ef',
+        '#ffb980',
+        '#d87a80',
+        '#8d98b3',
+        '#e5cf0d',
+        '#97b552',
+        '#95706d',
+        '#dc69aa',
+        '#07a2a4',
+        '#9a7fd1',
+        '#588dd5',
+        '#f5994e',
+        '#c05050',
+        '#59678c',
+        '#c9ab00',
+        '#7eb00a',
+        '#6f5553',
+        '#c14089',
+    ],
+    borderColor: '#ccc',
+    borderWidth: 0,
+    visualMapColor: ['#5ab1ef', '#e0ffff'],
+    legendTextColor: '#333333',
+    kColor: '#d87a80',
+    kColor0: '#2ec7c9',
+    kBorderColor: '#d87a80',
+    kBorderColor0: '#2ec7c9',
+    kBorderWidth: 1,
+    lineWidth: 2,
+    symbolSize: 3,
+    symbol: 'emptyCircle',
+    symbolBorderWidth: 1,
+    lineSmooth: true,
+    graphLineWidth: 1,
+    graphLineColor: '#aaaaaa',
+    mapLabelColor: '#d87a80',
+    mapLabelColorE: 'rgb(100,0,0)',
+    mapBorderColor: '#eeeeee',
+    mapBorderColorE: '#444',
+    mapBorderWidth: 0.5,
+    mapBorderWidthE: 1,
+    mapAreaColor: '#dddddd',
+    mapAreaColorE: 'rgba(254,153,78,1)',
+    axes: [
+        {
+            type: 'all',
+            name: '通用坐标轴',
+            axisLineShow: true,
+            axisLineColor: '#eeeeee',
+            axisTickShow: true,
+            axisTickColor: '#eeeeee',
+            axisLabelShow: true,
+            axisLabelColor: '#eeeeee',
+            splitLineShow: true,
+            splitLineColor: ['#aaaaaa'],
+            splitAreaShow: false,
+            splitAreaColor: ['#eeeeee'],
+        },
+        {
+            type: 'category',
+            name: '类目坐标轴',
+            axisLineShow: true,
+            axisLineColor: '#008acd',
+            axisTickShow: true,
+            axisTickColor: '#333',
+            axisLabelShow: true,
+            axisLabelColor: '#333',
+            splitLineShow: false,
+            splitLineColor: ['#eee'],
+            splitAreaShow: false,
+            splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+        {
+            type: 'value',
+            name: '数值坐标轴',
+            axisLineShow: true,
+            axisLineColor: '#008acd',
+            axisTickShow: true,
+            axisTickColor: '#333',
+            axisLabelShow: true,
+            axisLabelColor: '#333',
+            splitLineShow: true,
+            splitLineColor: ['#eee'],
+            splitAreaShow: true,
+            splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+        {
+            type: 'log',
+            name: '对数坐标轴',
+            axisLineShow: true,
+            axisLineColor: '#008acd',
+            axisTickShow: true,
+            axisTickColor: '#333',
+            axisLabelShow: true,
+            axisLabelColor: '#333',
+            splitLineShow: true,
+            splitLineColor: ['#eee'],
+            splitAreaShow: true,
+            splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+        {
+            type: 'time',
+            name: '时间坐标轴',
+            axisLineShow: true,
+            axisLineColor: '#008acd',
+            axisTickShow: true,
+            axisTickColor: '#333',
+            axisLabelShow: true,
+            axisLabelColor: '#333',
+            splitLineShow: true,
+            splitLineColor: ['#eee'],
+            splitAreaShow: false,
+            splitAreaColor: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+        },
+    ],
+    axisSeperateSetting: true,
+    toolboxColor: '#2ec7c9',
+    toolboxEmphasisColor: '#18a4a6',
+    tooltipAxisColor: '#008acd',
+    tooltipAxisWidth: '1',
+    timelineLineColor: '#008acd',
+    timelineLineWidth: 1,
+    timelineItemColor: '#008acd',
+    timelineItemColorE: '#a9334c',
+    timelineCheckColor: '#2ec7c9',
+    timelineCheckBorderColor: '#2ec7c9',
+    timelineItemBorderWidth: 1,
+    timelineControlColor: '#008acd',
+    timelineControlBorderColor: '#008acd',
+    timelineControlBorderWidth: 0.5,
+    timelineLabelColor: '#008acd',
+    datazoomBackgroundColor: 'rgba(47,69,84,0)',
+    datazoomDataColor: '#efefff',
+    datazoomFillColor: 'rgba(182,162,222,0.2)',
+    datazoomHandleColor: '#008acd',
+    datazoomHandleWidth: '100',
+    datazoomLabelColor: '#333333',
+};
+
+export { light };
--- a/mayfly_go_web/src/components/enumtag/EnumTag.vue
+++ b/mayfly_go_web/src/components/enumtag/EnumTag.vue
@@ -40,7 +40,7 @@ onMounted(() => {
 });

 const convert = (value: any) => {
-    const enumValue = EnumValue.getEnumByValue(Object.values(props.enums as any) as any, value) as any;
+    const enumValue = EnumValue.getEnumByValue(props.enums, value) as any;
    if (!enumValue) {
        state.enumLabel = '-';
        state.type = 'danger';
--- a/mayfly_go_web/src/components/monaco/MonacoEditor.vue
+++ b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5); height: 100%">
        <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-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage" filterable>
            <el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
        </el-select>
    </div>
@@ -294,17 +294,19 @@ const registeShell = () => {
 };

 const format = () => {
-    /*
-    触发自动格式化;
-   */
+    // 触发自动格式化;
    monacoEditorIns.trigger('', 'editor.action.formatDocument', '');
 };

+const focus = () => {
+    monacoEditorIns.focus();
+};
+
 const getEditor = () => {
    return monacoEditorIns;
 };

-defineExpose({ getEditor, format });
+defineExpose({ getEditor, format, focus });
 </script>

 <style lang="scss">
--- a/mayfly_go_web/src/components/monaco/MonacoEditorDialog.ts
+++ b/mayfly_go_web/src/components/monaco/MonacoEditorDialog.ts
@@ -0,0 +1,37 @@
+import { VNode, h, render } from 'vue';
+import MonacoEditorDialogComp from './MonacoEditorDialogComp.vue';
+
+export type MonacoEditorDialogProps = {
+    content: string;
+    title: string;
+    language: string;
+    height?: string;
+    width?: string;
+    confirmFn?: Function; // 点击确认的回调函数，入参editor value
+    cancelFn?: Function; // 点击取消 或 关闭弹窗的回调函数
+};
+
+const boxId = 'monaco-editor-dialog-id';
+
+let boxInstance: VNode;
+
+const MonacoEditorDialog = (props: MonacoEditorDialogProps): void => {
+    if (!boxInstance) {
+        const container = document.createElement('div');
+        container.id = boxId;
+        // 创建 虚拟dom
+        boxInstance = h(MonacoEditorDialogComp);
+        // 将虚拟dom渲染到 container dom 上
+        render(boxInstance, container);
+        // 最后将 container 追加到 body 上
+        document.body.appendChild(container);
+    }
+
+    const boxVue = boxInstance.component;
+    if (boxVue) {
+        // 调用open方法显示弹框，注意不能使用boxVue.ctx来调用组件函数（build打包后ctx会获取不到）
+        boxVue.exposed?.open(props);
+    }
+};
+
+export default MonacoEditorDialog;
--- a/mayfly_go_web/src/components/monaco/MonacoEditorDialogComp.vue
+++ b/mayfly_go_web/src/components/monaco/MonacoEditorDialogComp.vue
@@ -0,0 +1,136 @@
+<template>
+    <div>
+        <el-dialog :title="state.title" v-model="state.dialogVisible" :width="state.width" @close="cancel">
+            <monaco-editor ref="editorRef" :height="state.height" class="editor" :language="state.language" v-model="contentValue" can-change-mode />
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="cancel">取消</el-button>
+                    <el-button @click="confirm" type="primary">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, ref, reactive } from 'vue';
+import { ElDialog, ElButton, ElMessage } from 'element-plus';
+// import base style
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
+import { MonacoEditorDialogProps } from './MonacoEditorDialog';
+
+const editorRef: any = ref(null);
+
+const state = reactive({
+    dialogVisible: false,
+    height: '450px',
+    width: '800px',
+    contentValue: '',
+    title: '',
+    language: '',
+});
+
+let confirmFn: any;
+let cancelFn: any;
+
+const { contentValue } = toRefs(state);
+
+function compressHTML(html: string) {
+    return (
+        html
+            .replace(/[\r\n\t]+/g, ' ') // 移除换行符和制表符
+            // .replace(/<!--[\s\S]*?-->/g, '') // 移除注释
+            .replace(/\s{2,}/g, ' ') // 合并多个空格为一个空格
+            .replace(/>\s+</g, '><')
+    ); // 移除标签之间的空格
+}
+
+/**
+ * 确认按钮
+ */
+const confirm = async () => {
+    if (confirmFn) {
+        if (state.language === 'json') {
+            let val;
+            try {
+                val = JSON.parse(contentValue.value);
+                if (typeof val !== 'object') {
+                    ElMessage.error('请输入正确的json');
+                    return;
+                }
+            } catch (e) {
+                ElMessage.error('请输入正确的json');
+                return;
+            }
+
+            // 压缩json字符串
+            confirmFn(JSON.stringify(val));
+        } else if (state.language === 'html') {
+            // 压缩html字符串
+            confirmFn(compressHTML(contentValue.value));
+        } else {
+            confirmFn(contentValue.value);
+        }
+    }
+    state.dialogVisible = false;
+    setTimeout(() => {
+        state.contentValue = '';
+        state.title = '';
+    }, 200);
+};
+
+const cancel = () => {
+    state.dialogVisible = false;
+    // 没有执行成功，并且取消回调函数存在，则执行
+    cancelFn && cancelFn();
+    setTimeout(() => {
+        state.contentValue = '';
+        state.title = '';
+    }, 200);
+};
+
+const formatXML = function (xml: string, tab?: string) {
+    let formatted = '',
+        indent = '';
+    tab = tab || '    ';
+    xml.split(/>\s*</).forEach(function (node) {
+        if (node.match(/^\/\w/)) indent = indent.substring(tab!.length);
+        formatted += indent + '<' + node + '>\r\n';
+        if (node.match(/^<?\w[^>]*[^\/]$/)) indent += tab;
+    });
+    return formatted.substring(1, formatted.length - 3);
+};
+
+const open = (optionProps: MonacoEditorDialogProps) => {
+    confirmFn = optionProps.confirmFn;
+    cancelFn = optionProps.cancelFn;
+
+    const language = optionProps.language;
+    state.language = language;
+    state.title = optionProps.title;
+    if (optionProps.height) {
+        state.height = optionProps.height;
+    }
+
+    state.contentValue = optionProps.content;
+    // 格式化输出html;
+    if (language === 'html' || language == 'xml') {
+        state.contentValue = formatXML(optionProps.content);
+    }
+
+    setTimeout(() => {
+        editorRef.value?.focus();
+        editorRef.value?.format();
+    }, 300);
+
+    state.dialogVisible = true;
+};
+
+defineExpose({ open });
+</script>
+<style lang="scss" scoped>
+.editor {
+    font-size: 9pt;
+    font-weight: 600;
+}
+</style>
--- a/mayfly_go_web/src/components/pagetable/PageTable.vue
+++ b/mayfly_go_web/src/components/pagetable/PageTable.vue
@@ -1,14 +1,16 @@
 <template>
    <div>
-        <!-- 查询表单 -->
-        <SearchForm v-show="isShowSearch" :items="searchItems" v-model="queryForm_" :search="queryData" :reset="reset" :search-col="searchCol">
-            <!-- 遍历父组件传入的 solts 透传给子组件 -->
-            <template v-for="(_, key) in useSlots()" v-slot:[key]>
-                <slot :name="key"></slot>
-            </template>
-        </SearchForm>
+        <transition name="el-zoom-in-top">
+            <!-- 查询表单 -->
+            <SearchForm v-if="isShowSearch" :items="tableSearchItems" v-model="queryForm" :search="search" :reset="reset" :search-col="searchCol">
+                <!-- 遍历父组件传入的 solts 透传给子组件 -->
+                <template v-for="(_, key) in useSlots()" v-slot:[key]>
+                    <slot :name="key"></slot>
+                </template>
+            </SearchForm>
+        </transition>

-        <el-card>
+        <div class="card">
            <div class="table-main">
                <!-- 表格头部 操作按钮 -->
                <div class="table-header">
@@ -18,39 +20,84 @@

                    <div v-if="toolButton" class="header-button-ri">
                        <slot name="toolButton">
-                            <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" />
+                            <div class="tool-button">
+                                <!-- 简易单个搜索项 -->
+                                <div v-if="nowSearchItem" class="simple-search-form">
+                                    <el-dropdown v-if="searchItems?.length > 1">
+                                        <SvgIcon :size="16" name="CaretBottom" class="mr4 mt6 simple-search-form-btn" />
+                                        <template #dropdown>
+                                            <el-dropdown-menu>
+                                                <el-dropdown-item
+                                                    v-for="searchItem in searchItems"
+                                                    :key="searchItem.prop"
+                                                    @click="changeSimpleFormItem(searchItem)"
+                                                >
+                                                    {{ searchItem.label }}
+                                                </el-dropdown-item>
+                                            </el-dropdown-menu>
+                                        </template>
+                                    </el-dropdown>

-                            <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="isShowSearch = !isShowSearch" />
+                                    <div class="simple-search-form-label mt5">
+                                        <el-text truncated tag="b">{{ `${nowSearchItem?.label} : ` }}</el-text>
+                                    </div>

-                            <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 tableColumns" :key="index">
-                                    <el-checkbox v-model="item.show" :label="item.label" :true-label="true" :false-label="false" />
+                                    <el-form-item style="width: 200px" :key="nowSearchItem.prop">
+                                        <SearchFormItem
+                                            @keyup.enter.native="searchFormItemKeyUpEnter"
+                                            v-if="!nowSearchItem.slot"
+                                            :item="nowSearchItem"
+                                            v-model="queryForm[nowSearchItem.prop]"
+                                        />
+
+                                        <slot @keyup.enter.native="searchFormItemKeyUpEnter" v-else :name="nowSearchItem.slot"></slot>
+                                    </el-form-item>
                                </div>
-                                <template #reference>
-                                    <el-button icon="Operation" circle :size="props.size"></el-button>
-                                </template>
-                            </el-popover>
+
+                                <div>
+                                    <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="search" />
+
+                                    <!-- <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" /> -->
+
+                                    <el-button
+                                        v-if="showToolButton('search') && searchItems?.length > 1"
+                                        :icon="isShowSearch ? 'ArrowDown' : 'ArrowUp'"
+                                        circle
+                                        @click="isShowSearch = !isShowSearch"
+                                    />
+
+                                    <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 tableColumns" :key="index">
+                                            <el-checkbox v-model="item.show" :label="item.label" :true-value="true" :false-value="false" />
+                                        </div>
+                                        <template #reference>
+                                            <el-button icon="Operation" circle :size="props.size"></el-button>
+                                        </template>
+                                    </el-popover>
+                                </div>
+                            </div>
                        </slot>
                    </div>
                </div>

                <el-table
+                    ref="tableRef"
                    v-bind="$attrs"
                    :max-height="tableMaxHeight"
                    @selection-change="handleSelectionChange"
-                    :data="state.data"
+                    :data="tableData"
                    highlight-current-row
-                    v-loading="state.loading"
-                    :size="props.size"
+                    v-loading="loading"
+                    :size="props.size as any"
                    :border="border"
                >
-                    <el-table-column v-if="props.showSelection" type="selection" width="40" />
+                    <el-table-column v-if="props.showSelection" :selectable="selectable" type="selection" width="40" />

                    <template v-for="(item, index) in tableColumns">
                        <el-table-column
@@ -68,18 +115,18 @@
                        >
                            <!-- 插槽：预留功能 -->
                            <template #default="scope" v-if="item.slot">
-                                <slot :name="item.prop" :data="scope.row"></slot>
+                                <slot :name="item.slotName ? item.slotName : 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>
+                                <enum-tag :size="props.size" :enums="item.typeParam" :value="item.getValueByData(scope.row)"></enum-tag>
                            </template>

                            <template #default="scope" v-else>
                                <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
                                <el-popover
-                                    v-if="item.isBeautify && scope.row[item.prop]?.length > 35"
+                                    v-if="item.isBeautify && item.getValueByData(scope.row)?.length > 35"
                                    effect="light"
                                    trigger="click"
                                    placement="top"
@@ -90,7 +137,7 @@
                                    </template>
                                    <template #reference>
                                        <el-link
-                                            @click="formatText(scope.row[item.prop])"
+                                            @click="formatText(item.getValueByData(scope.row))"
                                            :underline="false"
                                            type="success"
                                            icon="MagicStick"
@@ -106,118 +153,145 @@
                </el-table>
            </div>

-            <el-row class="mt20" type="flex" justify="end">
+            <el-row v-if="props.pageable" class="mt20" type="flex" justify="end">
                <el-pagination
                    :small="props.size == 'small'"
-                    @current-change="handlePageChange"
-                    @size-change="handleSizeChange"
+                    @current-change="handlePageNumChange"
+                    @size-change="handlePageSizeChange"
                    style="text-align: right"
-                    layout="prev, pager, next, total, sizes, jumper"
-                    :total="state.total"
-                    v-model:current-page="queryForm_.pageNum"
-                    v-model:page-size="queryForm_.pageSize"
+                    layout="prev, pager, next, total, sizes"
+                    :total="total"
+                    v-model:current-page="queryForm.pageNum"
+                    v-model:page-size="queryForm.pageSize"
                    :page-sizes="pageSizes"
                />
            </el-row>
-        </el-card>
+        </div>
    </div>
 </template>

 <script lang="ts" setup>
-import { toRefs, watch, reactive, onMounted, Ref, ref, useSlots } from 'vue';
+import { toRefs, watch, reactive, onMounted, Ref, ref, useSlots, toValue } from 'vue';
 import { TableColumn } from './index';
 import EnumTag from '@/components/enumtag/EnumTag.vue';
 import { useThemeConfig } from '@/store/themeConfig';
 import { storeToRefs } from 'pinia';
-import { useVModel, useEventListener } from '@vueuse/core';
+import { useEventListener } from '@vueuse/core';
 import Api from '@/common/Api';
 import SearchForm from '@/components/SearchForm/index.vue';
 import { SearchItem } from '../SearchForm/index';
+import SearchFormItem from '../SearchForm/components/SearchFormItem.vue';
+import SvgIcon from '@/components/svgIcon/index.vue';
+import { usePageTable } from '@/hooks/usePageTable';
+import { ElTable } from 'element-plus';

-const emit = defineEmits(['update:queryForm', 'update:selectionData', 'pageChange']);
+const emit = defineEmits(['update:selectionData', 'pageChange']);

 export interface PageTableProps {
    size?: string;
-    showSelection?: boolean;
-    showSearch?: boolean; // 是否显示搜索表单
+    pageApi?: Api; // 请求表格数据的 api
    columns: TableColumn[]; // 列配置项  ==> 必传
+    showSelection?: boolean;
+    selectable?: (row: any) => boolean; // 是否可选
+    pageable?: boolean;
+    showSearch?: boolean; // 是否显示搜索表单
    data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
-    pageApi: Api; // 请求表格数据的 api
    lazy?: boolean; // 是否自动执行请求 api ==> 非必传（默认为false）
    beforeQueryFn?: (params: any) => any; // 执行查询时对查询参数进行处理，调整等
    dataHandlerFn?: (data: any) => any; // 数据处理回调函数，用于将请求回来的数据二次加工处理等
    searchItems?: SearchItem[];
-    queryForm?: any; // 查询表单参数 ==> 非必传（默认为{pageNum:1, pageSize: 10}）
    border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为false）
-    toolButton?: ('refresh' | 'setting' | 'search')[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
-    searchCol?: any; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+    toolButton?: ('setting' | 'search')[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+    searchCol?: any; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 } | number 如 3
 }

 // 接受父组件参数，配置默认值
 const props = withDefaults(defineProps<PageTableProps>(), {
    columns: () => [],
+    pageable: true,
    showSelection: false,
    lazy: false,
-    initParam: {},
-    queryForm: {
-        pageNum: 1,
-        pageSize: 0,
-    },
    border: false,
    toolButton: true,
    showSearch: false,
    searchItems: () => [],
-    searchCol: () => ({ xs: 1, sm: 3, md: 3, lg: 4, xl: 4 }),
+    searchCol: () => ({ xs: 1, sm: 3, md: 3, lg: 4, xl: 5 }),
 });

+// 查询表单参数 ==> 非必传（默认为{pageNum:1, pageSize: 10}）
+const queryForm: Ref<any> = defineModel('queryForm', {
+    default: {
+        pageNum: 1,
+        pageSize: 0,
+    },
+});
+
+// table 实例
+const tableRef = ref<InstanceType<typeof ElTable>>();
+
 // 接收 columns 并设置为响应式
 const tableColumns = reactive<TableColumn[]>(props.columns);

-const { themeConfig } = storeToRefs(useThemeConfig());
+// 接收 searchItems 并设置为响应式
+const tableSearchItems = reactive<SearchItem[]>(props.searchItems);

-const state = reactive({
-    pageSizes: [] as any, // 可选每页显示的数据量
-    isOpenMoreQuery: false,
-    defaultQueryCount: 2, // 默认显示的查询参数个数，展开后每行显示查询条件个数为该值加1。第一行用最后一列来占用按钮
-    loading: false,
-    data: [],
-    total: 0,
-    // 输入框宽度
-    inputWidth_: '200px' as any,
-    formatVal: '', // 格式化后的值
-    tableMaxHeight: '500px',
-});
+const { themeConfig } = storeToRefs(useThemeConfig());

 // 是否显示搜索模块
 const isShowSearch = ref(props.showSearch);

 // 控制 ToolButton 显示
-const showToolButton = (key: 'refresh' | 'setting' | 'search') => {
+const showToolButton = (key: 'setting' | 'search') => {
    return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
 };

-const { pageSizes, formatVal, tableMaxHeight } = toRefs(state);
+const nowSearchItem: Ref<SearchItem> = ref(null) as any;

-const queryForm_: Ref<any> = useVModel(props, 'queryForm', emit);
+/**
+ * 改变当前的搜索项
+ * @param searchItem 当前点击的搜索项
+ */
+const changeSimpleFormItem = (searchItem: SearchItem) => {
+    // 将之前的值置为空，避免因为只显示一个搜索项却搜索多个条件
+    queryForm.value[nowSearchItem.value.prop] = null;
+    nowSearchItem.value = searchItem;
+};

-watch(
-    () => state.data,
-    (newValue: any) => {
-        if (newValue && newValue.length > 0) {
-            props.columns.forEach((item) => {
-                if (item.autoWidth && item.show) {
-                    item.autoCalculateMinWidth(state.data);
-                }
-            });
-        }
-    }
+let { tableData, total, loading, search, reset, getTableData, handlePageNumChange, handlePageSizeChange } = usePageTable(
+    props.pageable,
+    props.pageApi,
+    queryForm,
+    props.beforeQueryFn,
+    props.dataHandlerFn
 );

+const state = reactive({
+    pageSizes: [] as any, // 可选每页显示的数据量
+    // 输入框宽度
+    formatVal: '', // 格式化后的值
+    tableMaxHeight: '500px',
+});
+
+const { pageSizes, formatVal, tableMaxHeight } = toRefs(state);
+
+watch(tableData, (newValue: any) => {
+    if (newValue && newValue.length > 0) {
+        props.columns.forEach((item) => {
+            if (item.autoWidth && item.show) {
+                item.autoCalculateMinWidth(tableData.value);
+            }
+        });
+    }
+});
+
+watch(isShowSearch, () => {
+    calcuTableHeight();
+});
+
 watch(
-    () => isShowSearch.value,
-    () => {
-        console.log('watch show sa');
-        calcuTableHeight();
+    () => props.data,
+    (newValue: any) => {
+        tableData = newValue;
    }
 );

@@ -225,7 +299,11 @@ onMounted(async () => {
    calcuTableHeight();
    useEventListener(window, 'resize', calcuTableHeight);

-    let pageSize = queryForm_.value.pageSize;
+    if (props.searchItems.length > 0) {
+        nowSearchItem.value = props.searchItems[0];
+    }
+
+    let pageSize = queryForm.value.pageSize;
    // 如果pageSize设为0，则使用系统全局配置的pageSize
    if (!pageSize) {
        pageSize = themeConfig.value.defaultListPageSize;
@@ -235,20 +313,25 @@ onMounted(async () => {
        }
    }

-    queryForm_.value.pageNum = 1;
-    queryForm_.value.pageSize = pageSize;
+    queryForm.value.pageNum = 1;
+    queryForm.value.pageSize = pageSize;
    state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4, pageSize * 5];

    if (!props.lazy) {
-        await reqPageApi();
+        await getTableData();
    }
 });

 const calcuTableHeight = () => {
-    const headerHeight = isShowSearch.value ? 320 : 240;
+    const headerHeight = isShowSearch.value ? 330 : 250;
    state.tableMaxHeight = window.innerHeight - headerHeight + 'px';
 };

+const searchFormItemKeyUpEnter = (event: any) => {
+    event.preventDefault();
+    search();
+};
+
 const formatText = (data: any) => {
    state.formatVal = '';
    try {
@@ -262,66 +345,14 @@ const handleSelectionChange = (val: any) => {
    emit('update:selectionData', val);
 };

-const reqPageApi = async () => {
-    try {
-        state.loading = true;
-
-        let qf = queryForm_.value;
-        if (props.beforeQueryFn) {
-            qf = await props.beforeQueryFn(qf);
-        }
-
-        const res = await props.pageApi?.request(qf);
-        if (!res) {
-            return;
-        }
-
-        state.total = res.total;
-        if (props.dataHandlerFn) {
-            state.data = await props.dataHandlerFn(res.list);
-        } else {
-            state.data = res.list;
-        }
-    } finally {
-        state.loading = false;
-    }
-};
-
-const handlePageChange = (val: number) => {
-    queryForm_.value.pageNum = val;
-    execQuery();
-};
-
-const handleSizeChange = () => {
-    changePageNum(1);
-    execQuery();
-};
-
-const queryData = () => {
-    changePageNum(1);
-    execQuery();
-};
-
-const reset = () => {
-    // 将查询参数绑定的值置空，并重新粗发查询接口
-    for (let qi of props.searchItems) {
-        queryForm_.value[qi.prop] = null;
-    }
-
-    changePageNum(1);
-    execQuery();
-};
-
-const changePageNum = (pageNum: number) => {
-    queryForm_.value.pageNum = pageNum;
-};
-
-const execQuery = async () => {
-    await reqPageApi();
+const getData = () => {
+    return toValue(tableData);
 };

 defineExpose({
-    search: execQuery,
+    tableRef: tableRef,
+    search: getTableData,
+    getData,
 });
 </script>
 <style scoped lang="scss">
@@ -342,6 +373,30 @@ defineExpose({

        .header-button-ri {
            float: right;
+
+            .tool-button {
+                display: flex;
+                justify-content: space-between;
+            }
+
+            .simple-search-form {
+                margin-right: 10px;
+                display: flex;
+                justify-content: space-between;
+
+                ::v-deep(.el-form-item__content > *) {
+                    width: 100% !important;
+                }
+
+                .simple-search-form-label {
+                    text-align: right;
+                    margin-right: 5px;
+                }
+
+                .simple-search-form-btn:hover {
+                    color: var(--el-color-primary);
+                }
+            }
        }

        .el-button {
@@ -404,9 +459,9 @@ defineExpose({
            border-radius: 50%;
        }
    }
-}

-::v-deep(.el-form-item__label) {
-    font-weight: bold;
+    ::v-deep(.el-form-item__label) {
+        font-weight: bold;
+    }
 }
 </style>
--- a/mayfly_go_web/src/components/pagetable/index.ts
+++ b/mayfly_go_web/src/components/pagetable/index.ts
@@ -1,5 +1,6 @@
 import EnumValue from '@/common/Enum';
 import { dateFormat } from '@/common/utils/date';
+import { getValueByPath } from '@/common/utils/object';
 import { getTextWidth } from '@/common/utils/string';

 export class TableColumn {
@@ -29,10 +30,15 @@ export class TableColumn {
    minWidth: number | string;

    /**
-     * 是否插槽，是的话插槽名则为prop属性名
+     * 是否为插槽，若slotName为空则插槽名为prop属性名
     */
    slot: boolean = false;

+    /**
+     * 插槽名，
+     */
+    slotName: string = '';
+
    showOverflowTooltip: boolean = true;

    sortable: boolean = false;
@@ -87,7 +93,7 @@ export class TableColumn {
        if (this.formatFunc) {
            return this.formatFunc(rowData, this.prop);
        }
-        return rowData[this.prop];
+        return getValueByPath(rowData, this.prop);
    }

    static new(prop: string, label: string): TableColumn {
@@ -121,7 +127,7 @@ export class TableColumn {

    /**
     * 使用标签类型展示该列（用于枚举值友好展示）
-     * @param param 枚举对象
+     * @param param 枚举对象, 如AccountStatusEnum
     * @returns this
     */
    typeTag(param: any): TableColumn {
@@ -144,8 +150,9 @@ export class TableColumn {
     * 标识该列为插槽
     * @returns this
     */
-    isSlot(): TableColumn {
+    isSlot(slotName: string = ''): TableColumn {
        this.slot = true;
+        this.slotName = slotName;
        return this;
    }

@@ -165,7 +172,7 @@ export class TableColumn {
     */
    isTime(): TableColumn {
        this.setFormatFunc((data: any, prop: string) => {
-            return dateFormat(data[prop]);
+            return dateFormat(getValueByPath(data, prop));
        });
        return this;
    }
@@ -176,7 +183,7 @@ export class TableColumn {
     */
    isEnum(enums: any): TableColumn {
        this.setFormatFunc((data: any, prop: string) => {
-            return EnumValue.getLabelByValue(enums, data[prop]);
+            return EnumValue.getLabelByValue(enums, getValueByPath(data, prop));
        });
        return this;
    }
@@ -218,7 +225,7 @@ export class TableColumn {
        // 获取该列中最长的数据(内容)
        for (let i = 0; i < tableData.length; i++) {
            let nowData = tableData[i];
-            let nowValue = nowData[prop];
+            let nowValue = getValueByPath(nowData, prop);
            if (!nowValue) {
                continue;
            }
--- a/mayfly_go_web/src/components/terminal-rdp/MachineRdp.vue
+++ b/mayfly_go_web/src/components/terminal-rdp/MachineRdp.vue
@@ -0,0 +1,480 @@
+<template>
+    <div>
+        <div ref="viewportRef" class="viewport" :style="{ width: state.size.width + 'px', height: state.size.height + 'px' }">
+            <div ref="displayRef" class="display" tabindex="0" />
+            <div class="btn-box">
+                <SvgIcon name="DocumentCopy" @click="openPaste" :size="20" class="pointer-icon mr10" title="剪贴板" />
+                <SvgIcon name="FolderOpened" @click="openFilesystem" :size="20" class="pointer-icon mr10" title="文件管理" />
+                <SvgIcon name="FullScreen" @click="state.fullscreen ? closeFullScreen() : openFullScreen()" :size="20" class="pointer-icon mr10" title="全屏" />
+
+                <el-dropdown>
+                    <SvgIcon name="Monitor" :size="20" class="pointer-icon mr10" title="发送快捷键" style="color: #fff" />
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="openSendKeyboard(['65507', '65513', '65535'])"> Ctrl + Alt + Delete </el-dropdown-item>
+                            <el-dropdown-item @click="openSendKeyboard(['65507', '65513', '65288'])"> Ctrl + Alt + Backspace </el-dropdown-item>
+                            <el-dropdown-item @click="openSendKeyboard(['65515', '100'])"> Windows + D </el-dropdown-item>
+                            <el-dropdown-item @click="openSendKeyboard(['65515', '101'])"> Windows + E </el-dropdown-item>
+                            <el-dropdown-item @click="openSendKeyboard(['65515', '114'])"> Windows + R </el-dropdown-item>
+                            <el-dropdown-item @click="openSendKeyboard(['65515'])"> Windows </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+
+                <SvgIcon name="Refresh" @click="connect(0, 0)" :size="20" class="pointer-icon mr10" title="重新连接" />
+            </div>
+            <clipboard-dialog ref="clipboardRef" v-model:visible="state.clipboardDialog.visible" @close="closePaste" @submit="onsubmitClipboard" />
+        </div>
+        <el-dialog destroy-on-close :title="state.filesystemDialog.title" v-model="state.filesystemDialog.visible" :close-on-click-modal="false" width="70%">
+            <machine-file
+                :machine-id="state.filesystemDialog.machineId"
+                :auth-cert-name="state.filesystemDialog.authCertName"
+                :protocol="state.filesystemDialog.protocol"
+                :file-id="state.filesystemDialog.fileId"
+                :path="state.filesystemDialog.path"
+            />
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import Guacamole from './guac/guacamole-common';
+import { getMachineRdpSocketUrl } from '@/views/ops/machine/api';
+import clipboard from './guac/clipboard';
+import { reactive, ref } from 'vue';
+import { TerminalStatus } from '@/components/terminal/common';
+import ClipboardDialog from '@/components/terminal-rdp/guac/ClipboardDialog.vue';
+import { TerminalExpose } from '@/components/terminal-rdp/index';
+import SvgIcon from '@/components/svgIcon/index.vue';
+import MachineFile from '@/views/ops/machine/file/MachineFile.vue';
+import { exitFullscreen, launchIntoFullscreen, unWatchFullscreenChange, watchFullscreenChange } from '@/components/terminal-rdp/guac/screen';
+import { useEventListener } from '@vueuse/core';
+import { debounce } from 'lodash';
+import { ClientState, TunnelState } from '@/components/terminal-rdp/guac/states';
+import { ElMessage } from 'element-plus';
+import { joinClientParams } from '@/common/request';
+
+const viewportRef = ref({} as any);
+const displayRef = ref({} as any);
+const clipboardRef = ref({} as any);
+
+const props = defineProps({
+    machineId: {
+        type: Number,
+        required: true,
+    },
+    authCert: {
+        type: String,
+        required: true,
+    },
+    clipboardList: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits(['statusChange']);
+
+const state = reactive({
+    client: null as any,
+    display: null as any,
+    displayElm: {} as any,
+    clipboard: {} as any,
+    keyboard: {} as any,
+    mouse: null as any,
+    touchpad: null as any,
+    errorMessage: '',
+    arguments: {},
+    status: TerminalStatus.NoConnected,
+    size: {
+        height: 710,
+        width: 1024,
+        force: false,
+    },
+    enableClipboard: true,
+    clipboardDialog: {
+        visible: false,
+    },
+    filesystemDialog: {
+        visible: false,
+        authCertName: '',
+        machineId: 0,
+        protocol: 1,
+        title: '',
+        fileId: 0,
+        path: '',
+    },
+    fullscreen: false,
+    beforeFullSize: {
+        height: 710,
+        width: 1024,
+    },
+});
+
+const installKeyboard = () => {
+    state.keyboard = new Guacamole.Keyboard(state.displayElm);
+    uninstallKeyboard();
+    state.keyboard.onkeydown = (keysym: any) => {
+        state.client.sendKeyEvent(1, keysym);
+    };
+    state.keyboard.onkeyup = (keysym: any) => {
+        state.client.sendKeyEvent(0, keysym);
+    };
+};
+const uninstallKeyboard = () => {
+    state.keyboard!.onkeydown = state.keyboard!.onkeyup = () => {};
+};
+
+const installMouse = () => {
+    state.mouse = new Guacamole.Mouse(state.displayElm);
+    // Hide software cursor when mouse leaves display
+    state.mouse.onmouseout = () => {
+        if (!state.display) return;
+        state.display.showCursor(false);
+    };
+    state.mouse.onmousedown = state.mouse.onmouseup = state.mouse.onmousemove = handleMouseState;
+};
+
+const installTouchpad = () => {
+    state.touchpad = new Guacamole.Mouse.Touchpad(state.displayElm);
+
+    state.touchpad.onmousedown =
+        state.touchpad.onmouseup =
+        state.touchpad.onmousemove =
+            (st: any) => {
+                // 记录按下时，光标所在位置
+                console.log(st);
+                handleMouseState(st, true);
+            };
+
+    // 记录单指按压时候手在屏幕的位置
+    state.displayElm.ontouchend = (event: TouchEvent) => {
+        console.log('end', event);
+        state.displayElm.ontouchend = () => {};
+    };
+};
+
+const setClipboard = (data: string) => {
+    clipboardRef.value.setValue(data);
+};
+
+const installClipboard = () => {
+    state.enableClipboard = clipboard.install(state.client) as any;
+    clipboard.installWatcher(props.clipboardList, setClipboard);
+    state.client.onclipboard = clipboard.onClipboard;
+};
+
+const installResize = () => {
+    // 在resize事件结束后300毫秒执行
+    useEventListener('resize', debounce(resize, 300));
+};
+
+const installDisplay = () => {
+    let { width, height, force } = state.size;
+    state.display = state.client.getDisplay();
+    const displayElm = displayRef.value;
+    displayElm.appendChild(state.display.getElement());
+    displayElm.addEventListener('contextmenu', (e: any) => {
+        e.stopPropagation();
+        if (e.preventDefault) {
+            e.preventDefault();
+        }
+        e.returnValue = false;
+    });
+    state.client.connect('width=' + width + '&height=' + height + '&force=' + force + '&' + joinClientParams());
+    window.onunload = () => state.client.disconnect();
+
+    // allows focusing on the display div so that keyboard doesn't always go to session
+    displayElm.onclick = () => {
+        displayElm.focus();
+    };
+    displayElm.onfocus = () => {
+        displayElm.className = 'focus';
+    };
+    displayElm.onblur = () => {
+        displayElm.className = '';
+    };
+
+    state.displayElm = displayElm;
+};
+
+const installClient = () => {
+    let tunnel = new Guacamole.WebSocketTunnel(getMachineRdpSocketUrl(props.authCert)) as any;
+    if (state.client) {
+        state.display?.scale(0);
+        uninstallKeyboard();
+        state.client.disconnect();
+    }
+
+    state.client = new Guacamole.Client(tunnel);
+
+    tunnel.onerror = (status: any) => {
+        // eslint-disable-next-line no-console
+        console.error(`Tunnel failed ${JSON.stringify(status)}`);
+        // state.connectionState = states.TUNNEL_ERROR;
+    };
+
+    tunnel.onstatechange = (st: any) => {
+        console.log('statechange', st);
+        state.status = st;
+        switch (st) {
+            case TunnelState.CONNECTING: // 'CONNECTING'
+                break;
+            case TunnelState.OPEN: // 'OPEN'
+                state.status = TerminalStatus.Connected;
+                emit('statusChange', TerminalStatus.Connected);
+                break;
+            case TunnelState.CLOSED: // 'CLOSED'
+                state.status = TerminalStatus.Disconnected;
+                emit('statusChange', TerminalStatus.Disconnected);
+                break;
+            case TunnelState.UNSTABLE: // 'UNSTABLE'
+                state.status = TerminalStatus.Error;
+                emit('statusChange', TerminalStatus.Error);
+                break;
+        }
+    };
+
+    state.client.onstatechange = (clientState: any) => {
+        console.log('clientState', clientState);
+        switch (clientState) {
+            case ClientState.IDLE:
+                console.log('连接空闲');
+                break;
+            case ClientState.CONNECTING:
+                console.log('连接中...');
+                break;
+            case ClientState.WAITING:
+                console.log('等待服务器响应...');
+                break;
+            case ClientState.CONNECTED:
+                console.log('连接成功...');
+                break;
+            // eslint-disable-next-line no-fallthrough
+            case ClientState.DISCONNECTING:
+                console.log('断开连接中...');
+                break;
+            case ClientState.DISCONNECTED:
+                console.log('已断开连接...');
+                break;
+        }
+    };
+
+    state.client.onerror = (error: any) => {
+        state.client.disconnect();
+        console.error(`Client error ${JSON.stringify(error)}`);
+        state.errorMessage = error.message;
+        // state.connectionState = states.CLIENT_ERROR;
+    };
+
+    state.client.onsync = () => {};
+
+    state.client.onargv = (stream: any, mimetype: any, name: any) => {
+        if (mimetype !== 'text/plain') return;
+
+        const reader = new Guacamole.StringReader(stream);
+
+        // Assemble received data into a single string
+        let value = '';
+        reader.ontext = (text: any) => {
+            value += text;
+        };
+
+        // Test mutability once stream is finished, storing the current value for the argument only if it is mutable
+        reader.onend = () => {
+            const stream = state.client.createArgumentValueStream('text/plain', name);
+            stream.onack = (status: any) => {
+                if (status.isError()) {
+                    // ignore reject
+                    return;
+                }
+                state.arguments[name] = value;
+            };
+        };
+    };
+};
+
+const resize = () => {
+    const elm = viewportRef.value;
+    if (!elm || !elm.offsetWidth) {
+        // resize is being called on the hidden window
+        return;
+    }
+
+    let box = elm.parentElement;
+
+    state.size.width = box.clientWidth;
+    state.size.height = box.clientHeight;
+
+    const width = parseInt(String(box.clientWidth));
+    const height = parseInt(String(box.clientHeight));
+
+    if (state.display.getWidth() !== width || state.display.getHeight() !== height) {
+        if (state.status !== TerminalStatus.Connected) {
+            connect(width, height);
+        } else {
+            state.client.sendSize(width, height);
+        }
+    }
+    // setting timeout so display has time to get the correct size
+    // setTimeout(() => {
+    //     const scale = Math.min(box.clientWidth / Math.max(state.display.getWidth(), 1), box.clientHeight / Math.max(state.display.getHeight(), 1));
+    //     state.display.scale(scale);
+    //     console.log(state.size, scale);
+    // }, 100);
+};
+
+const handleMouseState = (mouseState: any, showCursor = false) => {
+    state.client.getDisplay().showCursor(showCursor);
+
+    const scaledMouseState = Object.assign({}, mouseState, {
+        x: mouseState.x / state.display.getScale(),
+        y: mouseState.y / state.display.getScale(),
+    });
+    state.client.sendMouseState(scaledMouseState);
+};
+
+const connect = (width: number, height: number, force = false) => {
+    if (!width && !height) {
+        if (state.size && state.size.width && state.size.height) {
+            width = state.size.width;
+            height = state.size.height;
+        } else {
+            // 获取当前viewportRef宽高
+            width = viewportRef.value.clientWidth;
+            height = viewportRef.value.clientHeight;
+        }
+    }
+    state.size = { width, height, force };
+
+    installClient();
+    installDisplay();
+    installKeyboard();
+    installMouse();
+    installTouchpad();
+    installClipboard();
+    installResize();
+};
+
+const disconnect = () => {
+    uninstallKeyboard();
+    state.client?.disconnect();
+};
+
+const blur = () => {
+    uninstallKeyboard();
+};
+
+const focus = () => {};
+
+const openPaste = async () => {
+    state.clipboardDialog.visible = true;
+};
+
+const closePaste = async () => {
+    installKeyboard();
+};
+
+const onsubmitClipboard = (val: string) => {
+    state.clipboardDialog.visible = false;
+    installKeyboard();
+    clipboard.sendRemoteClipboard(state.client, val);
+};
+
+const openFilesystem = async () => {
+    state.filesystemDialog.protocol = 2;
+    state.filesystemDialog.machineId = props.machineId;
+    state.filesystemDialog.authCertName = props.authCert;
+    state.filesystemDialog.fileId = props.machineId;
+    state.filesystemDialog.path = '/';
+    state.filesystemDialog.title = `远程桌面文件管理`;
+    state.filesystemDialog.visible = true;
+};
+
+const openFullScreen = function () {
+    launchIntoFullscreen(viewportRef.value);
+    state.fullscreen = true;
+
+    // 记录原始尺寸
+    state.beforeFullSize = {
+        width: state.size.width,
+        height: state.size.height,
+    };
+
+    // 使用新的宽高重新连接
+    setTimeout(() => {
+        connect(viewportRef.value.clientWidth, viewportRef.value.clientHeight, false);
+    }, 500);
+
+    watchFullscreenChange(watchFullscreen);
+};
+
+function watchFullscreen(event: Event, isFull: boolean) {
+    if (!isFull) {
+        closeFullScreen();
+    }
+}
+
+const closeFullScreen = function () {
+    exitFullscreen();
+
+    state.fullscreen = false;
+
+    // 使用新的宽高重新连接
+    setTimeout(() => {
+        connect(state.beforeFullSize.width, state.beforeFullSize.height, false);
+    }, 500);
+
+    // 取消注册esc事件，退出全屏
+    unWatchFullscreenChange(watchFullscreen);
+};
+
+const openSendKeyboard = (keys: string[]) => {
+    if (!state.client) {
+        return;
+    }
+    for (let i = 0; i < keys.length; i++) {
+        state.client.sendKeyEvent(1, keys[i]);
+    }
+    for (let j = 0; j < keys.length; j++) {
+        state.client.sendKeyEvent(0, keys[j]);
+    }
+    ElMessage.success('发送组合键成功');
+};
+
+const exposes = {
+    connect,
+    disconnect,
+    init: connect,
+    close: disconnect,
+    fitTerminal: resize,
+    focus,
+    blur,
+    setRemoteClipboard: onsubmitClipboard,
+} as TerminalExpose;
+
+defineExpose(exposes);
+</script>
+
+<style lang="scss">
+.viewport {
+    position: relative;
+    width: 1024px;
+    min-height: 710px;
+    z-index: 1;
+}
+.display {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+.btn-box {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    padding: 5px 0 5px 10px;
+    background: #dddddd4a;
+    color: #fff;
+    border-radius: 3px;
+}
+</style>
--- a/mayfly_go_web/src/components/terminal-rdp/MachineRdpDialog.vue
+++ b/mayfly_go_web/src/components/terminal-rdp/MachineRdpDialog.vue
@@ -0,0 +1,137 @@
+<template>
+    <div class="rdpDialog" ref="dialogRef">
+        <el-dialog
+            v-model="dialogVisible"
+            :before-close="handleClose"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
+            :close-on-press-escape="false"
+            :show-close="false"
+            width="1024"
+            @open="connect()"
+        >
+            <template #header>
+                <div class="terminal-title-wrapper">
+                    <!-- 左侧 -->
+                    <div class="title-left-fixed">
+                        <!-- title信息 -->
+                        <div>
+                            {{ title }}
+                        </div>
+                    </div>
+
+                    <!-- 右侧 -->
+                    <div class="title-right-fixed">
+                        <el-popconfirm @confirm="connect(true)" title="确认重新连接?">
+                            <template #reference>
+                                <div class="mr10 pointer">
+                                    <el-tag v-if="state.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-popconfirm @confirm="handleClose" title="确认关闭?">
+                            <template #reference>
+                                <SvgIcon name="Close" class="pointer-icon" title="关闭" :size="20" />
+                            </template>
+                        </el-popconfirm>
+                    </div>
+                </div>
+            </template>
+
+            <machine-rdp ref="rdpRef" :machine-id="machineId" :auth-cert="authCert" @status-change="handleStatusChange" />
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, toRefs, watch } from 'vue';
+import MachineRdp from '@/components/terminal-rdp/MachineRdp.vue';
+import { TerminalStatus } from '@/components/terminal/common';
+import SvgIcon from '@/components/svgIcon/index.vue';
+
+const rdpRef = ref({} as any);
+const dialogRef = ref({} as any);
+
+const props = defineProps({
+    visible: { type: Boolean },
+    machineId: {
+        type: Number,
+        required: true,
+    },
+    authCert: {
+        type: String,
+        required: true,
+    },
+    title: { type: String },
+});
+
+const emit = defineEmits(['update:visible', 'cancel', 'update:machineId']);
+
+const state = reactive({
+    dialogVisible: false,
+    title: '',
+    status: TerminalStatus.NoConnected,
+});
+
+const { dialogVisible } = toRefs(state);
+
+watch(props, async (newValue: any) => {
+    const visible = newValue.visible;
+    state.dialogVisible = visible;
+    if (visible) {
+        state.title = newValue.title;
+    }
+});
+
+const connect = (force = false) => {
+    rdpRef.value?.disconnect();
+
+    let width = 1024;
+    let height = 710;
+    rdpRef.value?.connect(width, height, force);
+};
+
+const handleStatusChange = (status: TerminalStatus) => {
+    state.status = status;
+};
+
+/**
+ * 关闭取消按钮触发的事件
+ */
+const handleClose = () => {
+    emit('update:visible', false);
+    emit('update:machineId', null);
+    emit('cancel');
+    rdpRef.value?.disconnect();
+};
+</script>
+<style lang="scss">
+.rdpDialog {
+    .el-dialog {
+        padding: 0;
+        .el-dialog__header {
+            padding: 10px;
+        }
+    }
+
+    .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
+        max-height: 100% !important;
+        padding: 0 !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;
+        }
+    }
+}
+</style>
--- a/mayfly_go_web/src/components/terminal-rdp/guac/ClipboardDialog.vue
+++ b/mayfly_go_web/src/components/terminal-rdp/guac/ClipboardDialog.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="clipboard-dialog">
+        <el-dialog
+            v-model="dialogVisible"
+            title="请输入需要粘贴的文本"
+            :before-close="onclose"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            width="600"
+        >
+            <el-input v-model="state.modelValue" type="textarea" :rows="20" />
+
+            <template #footer>
+                <el-button type="primary" @click="onsubmit">确 定</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, toRefs, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+
+const props = defineProps({
+    visible: { type: Boolean },
+});
+
+const emits = defineEmits(['submit', 'close', 'update:visible']);
+
+const state = reactive({
+    dialogVisible: false,
+    modelValue: '',
+});
+
+const { dialogVisible } = toRefs(state);
+
+watch(props, async (newValue: any) => {
+    state.dialogVisible = newValue.visible;
+});
+
+const onclose = () => {
+    emits('update:visible', false);
+    emits('close');
+};
+
+const onsubmit = () => {
+    state.dialogVisible = false;
+    if (state.modelValue) {
+        ElMessage.success('发送剪贴板数据成功');
+        emits('submit', state.modelValue);
+    } else {
+        ElMessage.warning('请输入需要粘贴的文本');
+    }
+};
+
+const setValue = (val: string) => {
+    state.modelValue = val;
+};
+
+defineExpose({ setValue });
+</script>
+
+<style lang="scss">
+.clipboard-dialog {
+}
+</style>
--- a/mayfly_go_web/src/components/terminal-rdp/guac/clipboard.js
+++ b/mayfly_go_web/src/components/terminal-rdp/guac/clipboard.js
@@ -0,0 +1,147 @@
+import Guacamole from './guacamole-common';
+import { ElMessage } from 'element-plus';
+
+const clipboard = {};
+
+clipboard.install = (client) => {
+    if (!navigator.clipboard) {
+        return false;
+    }
+
+    clipboard.getLocalClipboard().then((data) => (clipboard.cache = data));
+
+    window.addEventListener('load', clipboard.update(client), true);
+    window.addEventListener('copy', clipboard.update(client));
+    window.addEventListener('cut', clipboard.update(client));
+    window.addEventListener(
+        'focus',
+        (e) => {
+            if (e.target === window) {
+                clipboard.update(client)();
+            }
+        },
+        true
+    );
+
+    return true;
+};
+
+clipboard.update = (client) => {
+    return () => {
+        clipboard.getLocalClipboard().then((data) => {
+            clipboard.cache = data;
+            clipboard.setRemoteClipboard(client);
+        });
+    };
+};
+
+clipboard.sendRemoteClipboard = (client, text) => {
+    clipboard.cache = {
+        type: 'text/plain',
+        data: text,
+    };
+
+    clipboard.setRemoteClipboard(client);
+};
+
+clipboard.setRemoteClipboard = (client) => {
+    if (!clipboard.cache) {
+        return;
+    }
+
+    let writer;
+
+    const stream = client.createClipboardStream(clipboard.cache.type);
+
+    if (typeof clipboard.cache.data === 'string') {
+        writer = new Guacamole.StringWriter(stream);
+        writer.sendText(clipboard.cache.data);
+        writer.sendEnd();
+
+        clipboard.appendClipboardList('up', clipboard.cache.data);
+    } else {
+        writer = new Guacamole.BlobWriter(stream);
+        writer.oncomplete = function clipboardSent() {
+            writer.sendEnd();
+        };
+        writer.sendBlob(clipboard.cache.data);
+    }
+};
+
+clipboard.getLocalClipboard = async () => {
+    // 获取本地剪贴板数据
+    if (navigator.clipboard && navigator.clipboard.readText) {
+        const text = await navigator.clipboard.readText();
+        return {
+            type: 'text/plain',
+            data: text,
+        };
+    } else {
+        ElMessage.warning('只有https才可以访问剪贴板');
+    }
+};
+
+clipboard.setLocalClipboard = async (data) => {
+    if (data.type === 'text/plain') {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(data.data);
+        }
+    }
+};
+
+// 获取到远程服务器剪贴板变动
+clipboard.onClipboard = (stream, mimetype) => {
+    let reader;
+
+    if (/^text\//.exec(mimetype)) {
+        reader = new Guacamole.StringReader(stream);
+
+        // Assemble received data into a single string
+        let data = '';
+        reader.ontext = (text) => {
+            data += text;
+        };
+
+        // Set clipboard contents once stream is finished
+        reader.onend = () => {
+            clipboard.setLocalClipboard({
+                type: mimetype,
+                data: data,
+            });
+
+            clipboard.setClipboardFn && typeof clipboard.setClipboardFn === 'function' && clipboard.setClipboardFn(data);
+
+            clipboard.appendClipboardList('down', data);
+        };
+    } else {
+        reader = new Guacamole.BlobReader(stream, mimetype);
+        reader.onend = () => {
+            clipboard.setLocalClipboard({
+                type: mimetype,
+                data: reader.getBlob(),
+            });
+        };
+    }
+};
+
+/***
+ * 注册剪贴板监听器，如果有本地或远程剪贴板变动，则会更新剪贴板列表
+ */
+clipboard.installWatcher = (clipboardList, setClipboardFn) => {
+    clipboard.clipboardList = clipboardList;
+    clipboard.setClipboardFn = setClipboardFn;
+};
+
+clipboard.appendClipboardList = (src, data) => {
+    clipboard.clipboardList = clipboard.clipboardList || [];
+    // 循环判断是否重复
+    for (let i = 0; i < clipboard.clipboardList.length; i++) {
+        if (clipboard.clipboardList[i].data === data) {
+            return;
+        }
+    }
+
+    clipboard.clipboardList.push({ type: 'text/plain', data, src });
+};
+
+export default clipboard;
--- a/mayfly_go_web/src/components/terminal-rdp/guac/guacamole-common.js
+++ b/mayfly_go_web/src/components/terminal-rdp/guac/guacamole-common.js
--- a/mayfly_go_web/src/components/terminal-rdp/guac/screen.js
+++ b/mayfly_go_web/src/components/terminal-rdp/guac/screen.js
@@ -0,0 +1,38 @@
+export function launchIntoFullscreen(element) {
+    if (element.requestFullscreen) {
+        element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+    }
+}
+export function exitFullscreen() {
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    }
+}
+
+export function watchFullscreenChange(callback) {
+    function onFullscreenChange(e) {
+        let isFull = (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) != null;
+        callback(e, isFull);
+    }
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    document.addEventListener('mozfullscreenchange', onFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', onFullscreenChange);
+    document.addEventListener('msfullscreenchange', onFullscreenChange);
+}
+
+export function unWatchFullscreenChange(callback) {
+    document.removeEventListener('fullscreenchange', callback);
+    document.removeEventListener('mozfullscreenchange', callback);
+    document.removeEventListener('webkitfullscreenchange', callback);
+    document.removeEventListener('msfullscreenchange', callback);
+}
--- a/mayfly_go_web/src/components/terminal-rdp/guac/states.js
+++ b/mayfly_go_web/src/components/terminal-rdp/guac/states.js
@@ -0,0 +1,78 @@
+export const ClientState = {
+    /**
+     * The client is idle, with no active connection.
+     *
+     * @type number
+     */
+    IDLE: 0,
+
+    /**
+     * The client is in the process of establishing a connection.
+     *
+     * @type {!number}
+     */
+    CONNECTING: 1,
+
+    /**
+     * The client is waiting on further information or a remote server to
+     * establish the connection.
+     *
+     * @type {!number}
+     */
+    WAITING: 2,
+
+    /**
+     * The client is actively connected to a remote server.
+     *
+     * @type {!number}
+     */
+    CONNECTED: 3,
+
+    /**
+     * The client is in the process of disconnecting from the remote server.
+     *
+     * @type {!number}
+     */
+    DISCONNECTING: 4,
+
+    /**
+     * The client has completed the connection and is no longer connected.
+     *
+     * @type {!number}
+     */
+    DISCONNECTED: 5,
+};
+
+export const TunnelState = {
+    /**
+     * A connection is in pending. It is not yet known whether connection was
+     * successful.
+     *
+     * @type {!number}
+     */
+    CONNECTING: 0,
+
+    /**
+     * Connection was successful, and data is being received.
+     *
+     * @type {!number}
+     */
+    OPEN: 1,
+
+    /**
+     * The connection is closed. Connection may not have been successful, the
+     * tunnel may have been explicitly closed by either side, or an error may
+     * have occurred.
+     *
+     * @type {!number}
+     */
+    CLOSED: 2,
+
+    /**
+     * The connection is open, but communication through the tunnel appears to
+     * be disrupted, and the connection may close as a result.
+     *
+     * @type {!number}
+     */
+    UNSTABLE: 3,
+};
--- a/mayfly_go_web/src/components/terminal-rdp/index.ts
+++ b/mayfly_go_web/src/components/terminal-rdp/index.ts
@@ -0,0 +1,11 @@
+export interface TerminalExpose {
+    /** 连接 */
+    init(width: number, height: number, force: boolean): void;
+
+    /** 短开连接 */
+    close(): void;
+
+    blur(): void;
+
+    focus(): void;
+}
--- a/mayfly_go_web/src/components/terminal/TerminalBody.vue
+++ b/mayfly_go_web/src/components/terminal/TerminalBody.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="terminal-body" :style="{ height, background: themeConfig.terminalBackground }">
+    <div id="terminal-body" :style="{ height }">
        <div ref="terminalRef" class="terminal" />

        <TerminalSearch ref="terminalSearchRef" :search-addon="state.addon.search" @close="focus" />
@@ -8,7 +8,7 @@

 <script lang="ts" setup>
 import 'xterm/css/xterm.css';
-import { Terminal } from 'xterm';
+import { Terminal, ITheme } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { SearchAddon } from 'xterm-addon-search';
 import { WebLinksAddon } from 'xterm-addon-web-links';
@@ -19,8 +19,16 @@ import { ref, nextTick, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
 import TerminalSearch from './TerminalSearch.vue';
 import { debounce } from 'lodash';
 import { TerminalStatus } from './common';
+import { useEventListener } from '@vueuse/core';
+import themes from './themes';
+import { TrzszFilter } from 'trzsz';

 const props = defineProps({
+    // mounted时，是否执行init方法
+    mountInit: {
+        type: Boolean,
+        default: true,
+    },
    /**
     * 初始化执行命令
     */
@@ -63,9 +71,9 @@ const state = reactive({
 });

 onMounted(() => {
-    nextTick(() => {
+    if (props.mountInit) {
        init();
-    });
+    }
 });

 watch(
@@ -75,6 +83,14 @@ watch(
    }
 );

+// 监听 themeConfig terminalTheme配置的变化
+watch(
+    () => themeConfig.value.terminalTheme,
+    () => {
+        term.options.theme = getTerminalTheme();
+    }
+);
+
 onBeforeUnmount(() => {
    close();
 });
@@ -84,6 +100,12 @@ function init() {
        console.log('重新连接...');
        close();
    }
+    nextTick(() => {
+        initTerm();
+    });
+}
+
+function initTerm() {
    term = new Terminal({
        fontSize: themeConfig.value.terminalFontSize || 15,
        fontWeight: themeConfig.value.terminalFontWeight || 'normal',
@@ -91,13 +113,10 @@ function init() {
        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,
+        fastScrollModifier: 'ctrl',
+        theme: getTerminalTheme(),
    });
+
    term.open(terminalRef.value);

    // 注册自适应组件
@@ -105,31 +124,12 @@ function init() {
    state.addon.fit = fitAddon;
    term.loadAddon(fitAddon);
    fitTerminal();
+    // 注册窗口大小监听器
+    useEventListener('resize', debounce(fitTerminal, 400));

-    // 注册搜索组件
-    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));
+    // 注册其他插件
+    loadAddon();

    // 注册自定义快捷键
    term.attachCustomKeyEventHandler((event: KeyboardEvent) => {
@@ -141,50 +141,25 @@ const onConnected = () => {

        return true;
    });
-
-    state.status = TerminalStatus.Connected;
-
-    // 注册窗口大小监听器
-    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) {
-        let socketUrl = `${props.socketUrl}&rows=${term.rows}&cols=${term.cols}`;
-        socket = new WebSocket(socketUrl);
+    if (!props.socketUrl) {
+        return;
    }
-
+    socket = new WebSocket(`${props.socketUrl}&rows=${term?.rows}&cols=${term?.cols}`);
    // 监听socket连接
    socket.onopen = () => {
-        onConnected();
+        // 注册心跳
+        pingInterval = setInterval(sendPing, 15000);
+        state.status = TerminalStatus.Connected;
+
+        focus();
+
+        // 如果有初始要执行的命令，则发送执行命令
+        if (props.cmd) {
+            sendCmd(props.cmd + ' \r');
+        }
    };

    // 监听socket错误信息
@@ -196,22 +171,96 @@ function initSocket() {

    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);
+function loadAddon() {
+    // 注册搜索组件
+    const searchAddon = new SearchAddon();
+    state.addon.search = searchAddon;
+    term.loadAddon(searchAddon);
+
+    // 注册 url link组件
+    const weblinks = new WebLinksAddon();
+    state.addon.weblinks = weblinks;
+    term.loadAddon(weblinks);
+
+    // 注册 trzsz
+    // initialize trzsz filter
+    const trzsz = new TrzszFilter({
+        // write the server output to the terminal
+        writeToTerminal: (data: any) => term.write(typeof data === 'string' ? data : new Uint8Array(data)),
+        // send the user input to the server
+        sendToServer: sendCmd,
+        // the terminal columns
+        terminalColumns: term.cols,
+        // there is a windows shell
+        isWindowsShell: false,
+    });
+
+    // let trzsz process the server output
+    socket?.addEventListener('message', (e) => trzsz.processServerOutput(e.data));
+    // let trzsz process the user input
+    term.onData((data) => trzsz.processTerminalInput(data));
+    term.onBinary((data) => trzsz.processBinaryInput(data));
+    term.onResize((size) => {
+        sendResize(size.cols, size.rows);
+        // tell trzsz the terminal columns has been changed
+        trzsz.setTerminalColumns(size.cols);
+    });
+    window.addEventListener('resize', () => state.addon.fit.fit());
+    // enable drag files or directories to upload
+    terminalRef.value.addEventListener('dragover', (event: Event) => event.preventDefault());
+    terminalRef.value.addEventListener('drop', (event: any) => {
+        event.preventDefault();
+        trzsz
+            .uploadFiles(event.dataTransfer.items)
+            .then(() => console.log('upload success'))
+            .catch((err: any) => console.log(err));
+    });
 }

+// 写入内容至终端
+const write2Term = (data: any) => {
+    term.write(data);
+};
+
+const writeln2Term = (data: any) => {
+    term.writeln(data);
+};
+
+const getTerminalTheme = () => {
+    const terminalTheme = themeConfig.value.terminalTheme;
+    // 如果不是自定义主题，则返回内置主题
+    if (terminalTheme != 'custom') {
+        return themes[terminalTheme];
+    }
+
+    // 自定义主题
+    return {
+        foreground: themeConfig.value.terminalForeground || '#7e9192', //字体
+        background: themeConfig.value.terminalBackground || '#002833', //背景色
+        cursor: themeConfig.value.terminalCursor || '#268F81', //设置光标
+        // cursorAccent: "red",  // 光标停止颜色
+    } as ITheme;
+};
+
+// 自适应终端
+const fitTerminal = () => {
+    state.addon.fit.fit();
+};
+
+const focus = () => {
+    setTimeout(() => term.focus(), 300);
+};
+
+const clear = () => {
+    term.clear();
+    term.clearSelection();
+    term.focus();
+};
+
 enum MsgType {
    Resize = 1,
    Data = 2,
@@ -219,29 +268,19 @@ enum MsgType {
 }

 const send = (msg: any) => {
-    state.status == TerminalStatus.Connected && socket.send(JSON.stringify(msg));
+    state.status == TerminalStatus.Connected && socket?.send(msg);
 };

 const sendResize = (cols: number, rows: number) => {
-    send({
-        type: MsgType.Resize,
-        Cols: cols,
-        Rows: rows,
-    });
+    send(`${MsgType.Resize}|${rows}|${cols}`);
 };

 const sendPing = () => {
-    send({
-        type: MsgType.Ping,
-        msg: 'ping',
-    });
+    send(`${MsgType.Ping}|ping`);
 };

 function sendCmd(key: any) {
-    send({
-        type: MsgType.Data,
-        msg: key,
-    });
+    send(`${MsgType.Data}|${key}`);
 }

 function closeSocket() {
@@ -266,20 +305,19 @@ const getStatus = (): TerminalStatus => {
    return state.status;
 };

-defineExpose({ init, fitTerminal, focus, clear, close, getStatus });
+defineExpose({ init, fitTerminal, focus, clear, close, getStatus, sendResize, write2Term, writeln2Term });
 </script>
 <style lang="scss">
 #terminal-body {
-    background: #212529;
    width: 100%;

    .terminal {
        width: 100%;
        height: 100%;

-        .xterm .xterm-viewport {
-            overflow-y: hidden;
-        }
+        // .xterm .xterm-viewport {
+        //     overflow-y: hidden;
+        // }
    }
 }
 </style>
--- a/mayfly_go_web/src/components/terminal/TerminalDialog.vue
+++ b/mayfly_go_web/src/components/terminal/TerminalDialog.vue
@@ -2,7 +2,7 @@
    <div>
        <div class="terminal-dialog-container" v-for="openTerminal of terminals" :key="openTerminal.terminalId">
            <el-dialog
-                title="终端"
+                title="SSH终端"
                v-model="openTerminal.visible"
                top="32px"
                class="terminal-dialog"
@@ -58,7 +58,7 @@
                        </div>
                    </div>
                </template>
-                <div class="terminal-wrapper" :style="{ height: `calc(100vh - ${openTerminal.fullscreen ? '47px' : '200px'})` }">
+                <div :style="{ height: `calc(100vh - ${openTerminal.fullscreen ? '49px' : '200px'})` }">
                    <TerminalBody
                        @status-change="terminalStatusChange(openTerminal.terminalId, $event)"
                        :ref="(el) => setTerminalRef(el, openTerminal.terminalId)"
@@ -92,7 +92,7 @@
 </template>

 <script lang="ts" setup>
-import { toRefs, reactive } from 'vue';
+import { reactive, toRefs } from 'vue';
 import TerminalBody from '@/components/terminal/TerminalBody.vue';
 import SvgIcon from '@/components/svgIcon/index.vue';
 import { TerminalStatus } from './common';
@@ -259,6 +259,10 @@ defineExpose({
        padding: 10px;
    }

+    .el-dialog {
+        padding: 1px 1px;
+    }
+
    // 取消body最大高度，否则全屏有问题
    .el-dialog__body {
        max-height: 100% !important;
--- a/mayfly_go_web/src/components/terminal/TerminalLog.vue
+++ b/mayfly_go_web/src/components/terminal/TerminalLog.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <el-drawer v-model="visible" :before-close="cancel" size="50%">
+            <template #header>
+                <DrawerHeader :header="props.title" :back="cancel">
+                    <template #extra>
+                        <EnumTag :enums="LogTypeEnum" :value="log?.type" class="mr20" />
+                    </template>
+                </DrawerHeader>
+            </template>
+
+            <el-descriptions class="mb10" :column="1" border v-if="extra">
+                <el-descriptions-item v-for="(value, key) in extra" :key="key" :span="1" :label="key">{{ value }}</el-descriptions-item>
+            </el-descriptions>
+
+            <TerminalBody class="mb10" ref="terminalRef" height="calc(100vh - 220px)" />
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import DrawerHeader from '@/components/drawer-header/DrawerHeader.vue';
+import TerminalBody from './TerminalBody.vue';
+import { logApi } from '../../views/system/api';
+import { LogTypeEnum } from '@/views/system/enums';
+import { useIntervalFn } from '@vueuse/core';
+import EnumTag from '@/components/enumtag/EnumTag.vue';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '日志',
+    },
+});
+
+const visible = defineModel<boolean>('visible', { default: false });
+const logId = defineModel<number>('logId', { default: 0 });
+
+const terminalRef: any = ref(null);
+const nowLine = ref(0);
+const log = ref({}) as any;
+
+const extra = computed(() => {
+    if (log.value?.extra) {
+        return JSON.parse(log.value.extra);
+    }
+    return null;
+});
+
+// 定时获取最新日志
+const { pause, resume } = useIntervalFn(() => {
+    writeLog();
+}, 500);
+
+watch(
+    () => logId.value,
+    (logId: number) => {
+        terminalRef.value?.clear();
+        if (!logId) {
+            return;
+        }
+        writeLog();
+    }
+);
+
+const cancel = () => {
+    visible.value = false;
+    logId.value = 0;
+    nowLine.value = 0;
+    pause();
+};
+
+const writeLog = async () => {
+    const log = await getLog();
+    if (!log) {
+        return;
+    }
+    writeLog2Term(log);
+
+    // 如果不是还在执行中的日志，则暂停轮询
+    if (log.type != LogTypeEnum.Running.value) {
+        pause();
+        return;
+    }
+    resume();
+};
+
+const writeLog2Term = (log: any) => {
+    if (!log) {
+        return;
+    }
+    const lines = log.resp.split('\n');
+    for (let line of lines.slice(nowLine.value)) {
+        nowLine.value += 1;
+        terminalRef.value?.writeln2Term(line);
+    }
+    terminalRef.value?.focus();
+};
+
+const getLog = async () => {
+    if (!logId.value) {
+        return;
+    }
+    const logRes = await logApi.detail.request({
+        id: logId.value,
+    });
+    log.value = logRes;
+    return logRes;
+};
+</script>
+
+<style lang="scss"></style>
--- a/mayfly_go_web/src/components/terminal/themes.js
+++ b/mayfly_go_web/src/components/terminal/themes.js
@@ -0,0 +1,92 @@
+export default {
+    dark: {
+        foreground: '#c7c7c7',
+        background: '#000000',
+        cursor: '#c7c7c7',
+        selectionBackground: '#686868',
+
+        black: '#000000',
+        brightBlack: '#676767',
+
+        red: '#c91b00',
+        brightRed: '#ff6d67',
+
+        green: '#00c200',
+        brightGreen: '#5ff967',
+
+        yellow: '#c7c400',
+        brightYellow: '#fefb67',
+
+        blue: '#0225c7',
+        brightBlue: '#6871ff',
+
+        magenta: '#c930c7',
+        brightMagenta: '#ff76ff',
+
+        cyan: '#00c5c7',
+        brightCyan: '#5ffdff',
+
+        white: '#c7c7c7',
+        brightWhite: '#fffefe',
+    },
+    light: {
+        foreground: '#000000',
+        background: '#fffefe',
+        cursor: '#000000',
+        selectionBackground: '#c7c7c7',
+
+        black: '#000000',
+        brightBlack: '#676767',
+
+        red: '#c91b00',
+        brightRed: '#ff6d67',
+
+        green: '#00c200',
+        brightGreen: '#5ff967',
+
+        yellow: '#c7c400',
+        brightYellow: '#fefb67',
+
+        blue: '#0225c7',
+        brightBlue: '#6871ff',
+
+        magenta: '#c930c7',
+        brightMagenta: '#ff76ff',
+
+        cyan: '#00c5c7',
+        brightCyan: '#5ffdff',
+
+        white: '#c7c7c7',
+        brightWhite: '#fffefe',
+    },
+    solarizedLight: {
+        foreground: '#657b83',
+        background: '#fdf6e3',
+        cursor: '#657b83',
+        selectionBackground: '#c7c7c7',
+
+        black: '#073642',
+        brightBlack: '#002b36',
+
+        red: '#dc322f',
+        brightRed: '#cb4b16',
+
+        green: '#859900',
+        brightGreen: '#586e75',
+
+        yellow: '#b58900',
+        brightYellow: '#657b83',
+
+        blue: '#268bd2',
+        brightBlue: '#839496',
+
+        magenta: '#d33682',
+        brightMagenta: '#6c71c4',
+
+        cyan: '#2aa198',
+        brightCyan: '#93a1a1',
+
+        white: '#eee8d5',
+        brightWhite: '#fdf6e3',
+    },
+};
--- a/mayfly_go_web/src/hooks/usePageTable.ts
+++ b/mayfly_go_web/src/hooks/usePageTable.ts
@@ -0,0 +1,121 @@
+import Api from '@/common/Api';
+import { reactive, toRefs, toValue } from 'vue';
+
+/**
+ * @description table 页面操作方法封装
+ * @param pageable 是否为分页获取
+ * @param {Api} api 获取表格数据 api  (必传)
+ * @param {Object} param 获取数据请求参数 (非必传，默认为{pageNum: 1, pageSize: 10})
+ * @param {Function} dataCallBack 对api请求返回的数据进行处理的回调方法 (非必传)
+ * */
+export const usePageTable = (
+    pageable: boolean = true,
+    api?: Api,
+    params: any = {
+        // 当前页数
+        pageNum: 1,
+        // 每页显示条数
+        pageSize: 10,
+    },
+    beforeQueryFn?: (params: any) => any,
+    dataCallBack?: (data: any) => any
+) => {
+    const state = reactive({
+        // 表格数据
+        tableData: [],
+        // 总数量
+        total: 0,
+        // 查询参数,包含分页参数
+        searchParams: params,
+        loading: false,
+    });
+
+    /**
+     * @description 获取表格数据
+     * @return void
+     * */
+    const getTableData = async () => {
+        if (!api) return;
+        try {
+            state.loading = true;
+            let sp = toValue(state.searchParams);
+            if (beforeQueryFn) {
+                sp = beforeQueryFn(sp);
+            }
+
+            let res = await api.request(sp);
+            res.list = res.list || [];
+            dataCallBack && (res = await dataCallBack(res));
+
+            if (pageable) {
+                state.tableData = res.list;
+                state.total = res.total;
+            } else {
+                state.tableData = res;
+            }
+        } finally {
+            state.loading = false;
+        }
+    };
+
+    const setPageNum = (pageNum: number) => {
+        if (!pageable) {
+            return;
+        }
+        state.searchParams.pageNum = pageNum;
+    };
+
+    /**
+     * @description 表格数据查询（pageNum = 1）
+     * @return void
+     * */
+    const search = () => {
+        setPageNum(1);
+        getTableData();
+    };
+
+    /**
+     * @description 表格数据重置（pageNum = 1）,除分页相关参数外其他查询参数置为空
+     * @return void
+     * */
+    const reset = () => {
+        setPageNum(1);
+        for (let prop of Object.keys(state.searchParams)) {
+            if (prop == 'pageNum' || prop == 'pageSize') {
+                continue;
+            }
+            state.searchParams[prop] = null;
+        }
+        getTableData();
+    };
+
+    /**
+     * @description 每页条数改变
+     * @param {Number} val 当前条数
+     * @return void
+     * */
+    const handlePageSizeChange = (val: number) => {
+        setPageNum(1);
+        state.searchParams.pageSize = val;
+        getTableData();
+    };
+
+    /**
+     * @description 当前页改变
+     * @param {Number} val 当前页
+     * @return void
+     * */
+    const handlePageNumChange = (val: number) => {
+        state.searchParams.pageNum = val;
+        getTableData();
+    };
+
+    return {
+        ...toRefs(state),
+        getTableData,
+        search,
+        reset,
+        handlePageSizeChange,
+        handlePageNumChange,
+    };
+};
--- a/mayfly_go_web/src/common/useRequest.ts
+++ b/mayfly_go_web/src/common/useRequest.ts
@@ -1,12 +1,13 @@
-import router from '../router';
-import { getClientId, getToken } from './utils/storage';
-import { templateResolve } from './utils/string';
+import router from '@/router';
+import { getClientId, getToken } from '@/common/utils/storage';
+import { templateResolve } from '@/common/utils/string';
 import { ElMessage } from 'element-plus';
 import { createFetch } from '@vueuse/core';
-import Api from './Api';
-import { Result, ResultEnum } from './request';
-import config from './config';
+import Api from '@/common/Api';
+import { Result, ResultEnum } from '@/common/request';
+import config from '@/common/config';
 import { unref } from 'vue';
+import { URL_401 } from '@/router/staticRouter';

 const baseUrl: string = config.baseApiUrl;

@@ -15,7 +16,7 @@ const useCustomFetch = createFetch({
    combination: 'chain',
    options: {
        immediate: false,
-        timeout: 60000,
+        timeout: 600000,
        // beforeFetch in pre-configured instance will only run when the newly spawned instance do not pass beforeFetch
        async beforeFetch({ options }) {
            const token = getToken();
@@ -25,6 +26,7 @@ const useCustomFetch = createFetch({
                headers.set('Authorization', token);
                headers.set('ClientId', getClientId());
            }
+            headers.set('Content-Type', 'application/json');
            options.headers = headers;

            return { options };
@@ -46,9 +48,6 @@ export function useApiFetch<T>(api: Api, params: any = null, reqOptions: Request
            }

            let paramsValue = unref(params);
-            if (api.beforeHandler) {
-                paramsValue = api.beforeHandler(paramsValue);
-            }

            let apiUrl = url;
            // 简单判断该url是否是restful风格
@@ -56,6 +55,10 @@ export function useApiFetch<T>(api: Api, params: any = null, reqOptions: Request
                apiUrl = templateResolve(apiUrl, paramsValue);
            }

+            if (api.beforeHandler) {
+                paramsValue = api.beforeHandler(paramsValue);
+            }
+
            if (paramsValue) {
                const method = options.method?.toLowerCase();
                // post和put使用json格式传参
@@ -95,6 +98,16 @@ export function useApiFetch<T>(api: Api, params: any = null, reqOptions: Request
                    return rejectPromise;
                }

+                const respStatus = uaf.response.value?.status;
+                if (respStatus == 404) {
+                    ElMessage.error('请求接口不存在');
+                    return rejectPromise;
+                }
+                if (respStatus == 500) {
+                    ElMessage.error('服务器响应异常');
+                    return rejectPromise;
+                }
+
                console.error(e);
                ElMessage.error('网络请求错误');
                return rejectPromise;
@@ -112,11 +125,12 @@ export function useApiFetch<T>(api: Api, params: any = null, reqOptions: Request
                return;
            }

-            // 如果提示没有权限，则移除token，使其重新登录
+            // 如果提示没有权限，则跳转至无权限页面
            if (result.code === ResultEnum.NO_PERMISSION) {
                router.push({
-                    path: '/401',
+                    path: URL_401,
                });
+                return Promise.reject(result);
            }

            // 如果返回的code不为成功，则会返回对应的错误msg，则直接统一通知即可。忽略登录超时或没有权限的提示（直接跳转至401页面）
--- a/mayfly_go_web/src/layout/component/main.vue
+++ b/mayfly_go_web/src/layout/component/main.vue
@@ -1,26 +1,22 @@
 <template>
    <el-main class="layout-main">
-        <el-scrollbar
-            class="layout-scrollbar"
-            ref="layoutScrollbarRef"
-            v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1"
-            :style="{ minHeight: `calc(100vh - ${state.headerHeight}` }"
-        >
+        <el-scrollbar ref="layoutScrollbarRef" v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1">
            <LayoutParentView />
-            <Footer v-if="themeConfig.isFooter" />
        </el-scrollbar>
-        <Link
-            :style="{ height: `calc(100vh - ${state.headerHeight}` }"
-            :meta="state.currentRouteMeta"
-            v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2"
-        />
+
+        <Link class="h100" :meta="state.currentRouteMeta" v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2" />
+
        <Iframes
-            :style="{ height: `calc(100vh - ${state.headerHeight}` }"
+            class="h100"
            :meta="state.currentRouteMeta"
            v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 1 && state.isShowLink"
            @getCurrentRouteMeta="onGetCurrentRouteMeta"
        />
    </el-main>
+
+    <el-footer v-if="themeConfig.isFooter">
+        <Footer />
+    </el-footer>
 </template>

 <script setup lang="ts" name="layoutMain">
--- a/mayfly_go_web/src/layout/footer/index.vue
+++ b/mayfly_go_web/src/layout/footer/index.vue
@@ -1,8 +1,7 @@
 <template>
-    <div class="layout-footer mt15" v-show="isDelayFooter">
+    <div class="layout-footer flex-all-center" v-show="isDelayFooter">
        <div class="layout-footer-warp">
-            <div>Made by mayfly with ❤️</div>
-            <div class="mt5">mayfly-go</div>
+            <div>Made by mayfly-go with ❤️</div>
        </div>
    </div>
 </template>
@@ -32,13 +31,14 @@ export default {

 <style scoped lang="scss">
 .layout-footer {
-    width: 100%;
-    display: flex;
-    &-warp {
-        margin: auto;
-        color: #9e9e9e;
-        text-align: center;
-        animation: logoAnimation 0.3s ease-in-out;
+    height: 30px;
+    background-color: var(--el-bg-color);
+    border-top: 1px solid var(--el-border-color-light);
+    .layout-footer-warp {
+        font-size: 14px;
+        color: var(--el-text-color-secondary);
+        text-decoration: none;
+        letter-spacing: 0.5px;
    }
 }
 </style>
--- a/mayfly_go_web/src/layout/logo/index.vue
+++ b/mayfly_go_web/src/layout/logo/index.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-        <img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
+        <img :src="themeConfig.logoIcon" class="layout-logo-medium-img" />
        <span>
            {{ `${themeConfig.globalTitle}` }}
            <sub
@@ -9,7 +9,7 @@
        </span>
    </div>
    <div class="layout-logo-size" v-else @click="onThemeConfigChange">
-        <img src="@/assets/image/logo.svg" class="layout-logo-size-img" />
+        <img :src="themeConfig.logoIcon" class="layout-logo-size-img" />
    </div>
 </template>

--- a/mayfly_go_web/src/layout/main/columns.vue
+++ b/mayfly_go_web/src/layout/main/columns.vue
@@ -15,23 +15,15 @@
    </el-container>
 </template>

-<script lang="ts">
+<script lang="ts" setup name="layoutColumns">
 import { computed } from 'vue';
 import Aside from '@/layout/component/aside.vue';
 import Header from '@/layout/component/header.vue';
 import Main from '@/layout/component/main.vue';
 import ColumnsAside from '@/layout/component/columnsAside.vue';
 import { useThemeConfig } from '@/store/themeConfig';
-export default {
-    name: 'layoutColumns',
-    components: { Aside, Header, Main, ColumnsAside },
-    setup() {
-        const isFixedHeader = computed(() => {
-            return useThemeConfig().themeConfig.isFixedHeader;
-        });
-        return {
-            isFixedHeader,
-        };
-    },
-};
+
+const isFixedHeader = computed(() => {
+    return useThemeConfig().themeConfig.isFixedHeader;
+});
 </script>
--- a/mayfly_go_web/src/layout/main/defaults.vue
+++ b/mayfly_go_web/src/layout/main/defaults.vue
@@ -12,32 +12,26 @@
    </el-container>
 </template>

-<script lang="ts">
+<script lang="ts" setup name="layoutDefaults">
 import { computed, getCurrentInstance, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import Aside from '@/layout/component/aside.vue';
 import Header from '@/layout/component/header.vue';
 import Main from '@/layout/component/main.vue';
 import { useThemeConfig } from '@/store/themeConfig';
-export default {
-    name: 'layoutDefaults',
-    components: { Aside, Header, Main },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const route = useRoute();
-        const isFixedHeader = computed(() => {
-            return useThemeConfig().themeConfig.isFixedHeader;
-        });
-        // 监听路由的变化
-        watch(
-            () => route.path,
-            () => {
-                proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
-            }
-        );
-        return {
-            isFixedHeader,
-        };
-    },
-};
+
+const { proxy } = getCurrentInstance() as any;
+const route = useRoute();
+const isFixedHeader = computed(() => {
+    return useThemeConfig().themeConfig.isFixedHeader;
+});
+// 监听路由的变化
+watch(
+    () => route.path,
+    () => {
+        try {
+            proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
+        } catch (e) {}
+    }
+);
 </script>
--- a/mayfly_go_web/src/layout/main/transverse.vue
+++ b/mayfly_go_web/src/layout/main/transverse.vue
@@ -6,11 +6,7 @@
    </el-container>
 </template>

-<script lang="ts">
+<script lang="ts" setup name="layoutTransverse">
 import Header from '@/layout/component/header.vue';
 import Main from '@/layout/component/main.vue';
-export default {
-    name: 'layoutTransverse',
-    components: { Header, Main },
-};
 </script>
--- a/mayfly_go_web/src/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/mayfly_go_web/src/layout/navBars/breadcrumb/breadcrumb.vue
@@ -1,18 +1,15 @@
 <template>
    <div class="layout-navbars-breadcrumb" v-show="themeConfig.isBreadcrumb">
-        <SvgIcon class="layout-navbars-breadcrumb-icon" :name="themeConfig.isCollapse ? 'expand' : 'fold'"
-            @click="onThemeConfigChange" />
+        <SvgIcon class="layout-navbars-breadcrumb-icon" :name="themeConfig.isCollapse ? 'expand' : 'fold'" @click="onThemeConfigChange" />
        <el-breadcrumb class="layout-navbars-breadcrumb-hide">
            <transition-group name="breadcrumb" mode="out-in">
                <el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="v.meta.title">
                    <span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
-                            v-if="themeConfig.isBreadcrumbIcon" />
+                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
                        {{ v.meta.title }}
                    </span>
                    <a v-else @click.prevent="onBreadcrumbClick(v)">
-                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
-                            v-if="themeConfig.isBreadcrumbIcon" />
+                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
                        {{ v.meta.title }}
                    </a>
                </el-breadcrumb-item>
--- a/mayfly_go_web/src/layout/navBars/breadcrumb/search.vue
+++ b/mayfly_go_web/src/layout/navBars/breadcrumb/search.vue
@@ -1,17 +1,22 @@
 <template>
    <div class="layout-search-dialog">
        <el-dialog v-model="state.isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
-            <el-autocomplete v-model="state.menuQuery" :fetch-suggestions="menuSearch" placeholder="菜单搜索"
-                prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect" @blur="onSearchBlur">
+            <el-autocomplete
+                v-model="state.menuQuery"
+                :fetch-suggestions="menuSearch"
+                placeholder="菜单搜索"
+                prefix-icon="el-icon-search"
+                ref="layoutMenuAutocompleteRef"
+                @select="onHandleSelect"
+                @blur="onSearchBlur"
+            >
                <template #prefix>
                    <el-icon class="el-input__icon">
                        <search />
                    </el-icon>
                </template>
                <template #default="{ item }">
-                    <div>
-                        <SvgIcon :name="item.meta.icon" class="mr5" />{{ item.meta.title }}
-                    </div>
+                    <div><SvgIcon :name="item.meta.icon" class="mr5" />{{ item.meta.title }}</div>
                </template>
            </el-autocomplete>
        </el-dialog>
@@ -23,7 +28,7 @@ import { reactive, ref, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useRoutesList } from '@/store/routesList';

-const layoutMenuAutocompleteRef: any = ref(null);;
+const layoutMenuAutocompleteRef: any = ref(null);
 const router = useRouter();
 const state: any = reactive({
    isShowSearch: false,
@@ -54,8 +59,7 @@ const menuSearch = (queryString: any, cb: any) => {
 const createFilter = (queryString: any) => {
    return (restaurant: any) => {
        return (
-            restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
-            restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
+            restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
        );
    };
 };
@@ -97,7 +101,7 @@ const onSearchBlur = () => {
    closeSearch();
 };

-defineExpose({openSearch})
+defineExpose({ openSearch });
 </script>

 <style scoped lang="scss">
--- a/mayfly_go_web/src/layout/navBars/breadcrumb/setings.vue
+++ b/mayfly_go_web/src/layout/navBars/breadcrumb/setings.vue
@@ -5,26 +5,39 @@
                <!-- 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-label">主题</div>
                    <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.terminalForeground" size="small" @change="onColorPickerChange('terminalForeground')">
-                        </el-color-picker>
+                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalTheme" size="small" style="width: 140px">
+                            <el-option v-for="(_, k) in themes" :key="k" :label="k" :value="k"> </el-option>
+                            <el-option label="自定义" value="custom"> </el-option>
+                        </el-select>
                    </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" @change="onColorPickerChange('terminalBackground')">
-                        </el-color-picker>
+                <template v-if="themeConfig.terminalTheme == 'custom'">
+                    <div class="layout-breadcrumb-seting-bar-flex mt10">
+                        <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" @change="onColorPickerChange('terminalForeground')">
+                            </el-color-picker>
+                        </div>
                    </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" @change="onColorPickerChange('terminalCursor')"> </el-color-picker>
+                    <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" @change="onColorPickerChange('terminalBackground')">
+                            </el-color-picker>
+                        </div>
                    </div>
-                </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                    <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" @change="onColorPickerChange('terminalCursor')">
+                            </el-color-picker>
+                        </div>
+                    </div>
+                </template>
+
+                <div class="layout-breadcrumb-seting-bar-flex mt10">
                    <div class="layout-breadcrumb-seting-bar-flex-label">字体大小</div>
                    <div class="layout-breadcrumb-seting-bar-flex-value">
                        <el-input-number
@@ -39,7 +52,7 @@
                        </el-input-number>
                    </div>
                </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex mt10">
                    <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" style="width: 90px">
@@ -418,6 +431,7 @@ import { useThemeConfig } from '@/store/themeConfig';
 import { getLightColor } from '@/common/utils/theme';
 import { setLocal, getLocal, removeLocal } from '@/common/utils/storage';
 import mittBus from '@/common/utils/mitt';
+import themes from '@/components/terminal/themes';

 const copyConfigBtnRef = ref();
 const { themeConfig } = storeToRefs(useThemeConfig());
@@ -596,7 +610,7 @@ const openDrawer = () => {
    themeConfig.value.isDrawer = true;
    nextTick(() => {
        // 初始化复制功能，防止点击两次才可以复制
-        onCopyConfigClick(copyConfigBtnRef.value.$el);
+        onCopyConfigClick(copyConfigBtnRef.value?.$el);
    });
 };
 // 触发 store 布局配置更新
@@ -615,6 +629,9 @@ const setLocalThemeConfigStyle = () => {
 };
 // 一键复制配置
 const onCopyConfigClick = (target: any) => {
+    if (!target) {
+        return;
+    }
    let copyThemeConfig = getLocal('themeConfig');
    copyThemeConfig.isDrawer = false;
    const clipboard = new ClipboardJS(target, {
@@ -690,6 +707,25 @@ defineExpose({ openDrawer });
 </script>

 <style scoped lang="scss">
+::v-deep(.el-drawer) {
+    --el-drawer-padding-primary: unset !important;
+
+    .el-drawer__header {
+        padding: 0 15px !important;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0 !important;
+        border-bottom: 1px solid var(--el-border-color);
+    }
+
+    .el-drawer__body {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+    }
+}
+
 .layout-breadcrumb-seting-bar {
    height: calc(100vh - 50px);
    padding: 0 15px;
--- a/mayfly_go_web/src/layout/navBars/breadcrumb/user.vue
+++ b/mayfly_go_web/src/layout/navBars/breadcrumb/user.vue
@@ -174,12 +174,7 @@ watch(preDark, (newValue) => {
 });

 const switchDark = () => {
-    themeConfig.value.isDark = isDark.value;
-    if (isDark.value) {
-        themeConfig.value.editorTheme = 'vs-dark';
-    } else {
-        themeConfig.value.editorTheme = 'vs';
-    }
+    themeConfigStore.switchDark(isDark.value);
    saveThemeConfig(themeConfig.value);
 };

--- a/mayfly_go_web/src/layout/navBars/tagsView/tagsView.vue
+++ b/mayfly_go_web/src/layout/navBars/tagsView/tagsView.vue
@@ -282,7 +282,11 @@ const onContextmenu = (v: any, e: any) => {
 const onTagsClick = (v: any, k: number) => {
    state.routePath = decodeURI(v.path);
    state.tagsRefsIndex = k;
-    router.push(v);
+    try {
+        router.push(v);
+    } catch (e) {
+        // skip
+    }
 };
 // 更新滚动条显示
 const updateScrollbar = () => {
--- a/mayfly_go_web/src/layout/navMenu/subItem.vue
+++ b/mayfly_go_web/src/layout/navMenu/subItem.vue
@@ -2,19 +2,19 @@
    <template v-for="val in chils">
        <el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
            <template #title>
-                <SvgIcon :name="val.meta.icon"/>
+                <SvgIcon :name="val.meta.icon" />
                <span>{{ val.meta.title }}</span>
            </template>
            <sub-item :chil="val.children" />
        </el-sub-menu>
        <el-menu-item :index="val.path" :key="val?.path" v-else>
            <template v-if="!val.meta.link || (val.meta.link && val.meta.linkType == 1)">
-                <SvgIcon :name="val.meta.icon"/>
+                <SvgIcon :name="val.meta.icon" />
                <span>{{ val.meta.title }}</span>
            </template>
            <template v-else>
                <a :href="val.meta.link" target="_blank">
-                    <SvgIcon :name="val.meta.icon"/>
+                    <SvgIcon :name="val.meta.icon" />
                    {{ val.meta.title }}
                </a>
            </template>
@@ -24,7 +24,6 @@

 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import SvgIcon from '@/components/svgIcon/index.vue';
 export default defineComponent({
    name: 'navMenuSubItem',
    props: {
--- a/mayfly_go_web/src/layout/routerView/iframes.vue
+++ b/mayfly_go_web/src/layout/routerView/iframes.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-scrollbar">
+    <div>
        <div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
            <iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
        </div>
@@ -7,7 +7,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, onBeforeMount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
+import { defineComponent, reactive, toRefs, onMounted, onBeforeMount, onUnmounted, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import mittBus from '@/common/utils/mitt';
 export default defineComponent({
--- a/mayfly_go_web/src/layout/routerView/link.vue
+++ b/mayfly_go_web/src/layout/routerView/link.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-scrollbar">
+    <div>
        <div class="layout-view-bg-white flex layout-view-link">
            <a :href="currentRouteMeta.link" target="_blank" class="flex-margin">{{ currentRouteMeta.title }}：{{ currentRouteMeta.link }}</a>
        </div>
--- a/mayfly_go_web/src/layout/routerView/parent.vue
+++ b/mayfly_go_web/src/layout/routerView/parent.vue
@@ -1,13 +1,11 @@
 <template>
-    <div class="h100">
-        <router-view v-slot="{ Component }">
-            <transition :name="setTransitionName" mode="out-in">
-                <keep-alive :include="getKeepAliveNames">
-                    <component :is="Component" :key="state.refreshRouterViewKey" class="w100" />
-                </keep-alive>
-            </transition>
-        </router-view>
-    </div>
+    <router-view v-slot="{ Component }">
+        <transition appear :name="setTransitionName" mode="out-in">
+            <keep-alive :include="getKeepAliveNames">
+                <component :is="Component" :key="state.refreshRouterViewKey" />
+            </keep-alive>
+        </transition>
+    </router-view>
 </template>

 <script lang="ts" setup name="layoutParentView">
--- a/mayfly_go_web/src/router/dynamicRouter.ts
+++ b/mayfly_go_web/src/router/dynamicRouter.ts
@@ -0,0 +1,164 @@
+import 'nprogress/nprogress.css';
+import { clearSession, getToken } from '@/common/utils/storage';
+import openApi from '@/common/openApi';
+import { useUserInfo } from '@/store/userInfo';
+import { useRoutesList } from '@/store/routesList';
+import { useKeepALiveNames } from '@/store/keepAliveNames';
+import router from '.';
+import { RouteRecordRaw } from 'vue-router';
+import { LAYOUT_ROUTE_NAME } from './staticRouter';
+
+/**
+ * 获取目录下的 .vue、.tsx 全部文件
+ * @method import.meta.glob
+ * @link 参考：https://cn.vitejs.dev/guide/features.html#json
+ */
+const viewsModules: Record<string, Function> = import.meta.glob(['../views/**/*.{vue,tsx}']);
+const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...viewsModules });
+
+// 后端控制路由：执行路由数据初始化
+export async function initBackendRoutes() {
+    const token = getToken(); // 获取浏览器缓存 token 值
+    if (!token) {
+        // 无 token 停止执行下一步
+        return false;
+    }
+    useUserInfo().setUserInfo({});
+    // 获取路由
+    let menuRoute = await getBackEndControlRoutes();
+
+    const cacheList: Array<string> = [];
+    // 处理路由（component）
+    const routes = backEndRouterConverter(menuRoute, (router: any) => {
+        // 可能为false时不存在isKeepAlive属性
+        if (!router.meta.isKeepAlive) {
+            router.meta.isKeepAlive = false;
+        }
+        if (router.meta.isKeepAlive) {
+            cacheList.push(router.name);
+        }
+    });
+
+    routes.forEach((item: any) => {
+        if (item.meta.isFull) {
+            // 菜单为全屏展示 (示例：数据大屏页面等)
+            router.addRoute(item as RouteRecordRaw);
+        } else {
+            // 要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样
+            router.addRoute(LAYOUT_ROUTE_NAME, item as RouteRecordRaw);
+        }
+    });
+
+    useKeepALiveNames().setCacheKeepAlive(cacheList);
+    useRoutesList().setRoutesList(routes);
+}
+
+// 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+export async function getBackEndControlRoutes() {
+    try {
+        const menuAndPermission = await openApi.getPermissions();
+        // 赋值权限码，用于控制按钮等
+        useUserInfo().userInfo.permissions = menuAndPermission.permissions;
+        return menuAndPermission.menus;
+    } catch (e: any) {
+        console.error('获取菜单权限信息失败', e);
+        clearSession();
+        throw e;
+    }
+}
+
+type RouterConvCallbackFunc = (router: any) => void;
+
+/**
+ * 后端控制路由，后端返回路由 转换为vue route
+ *
+ * @description routes参数配置简介
+ * @param code(path) ==> route.path -> 路由菜单访问路径
+ * @param name ==> title，路由标题 相当于route.meta.title
+ *
+ * @param meta ==> 路由菜单元信息
+ * @param meta.routeName ==> route.name -> 路由 name (对应页面组件 name, 可用作 KeepAlive 缓存标识 && 按钮权限筛选)
+ * @param meta.redirect ==> route.redirect -> 路由重定向地址
+ * @param meta.component ==> 文件路径
+ * @param meta.icon ==> 菜单和面包屑对应的图标
+ * @param meta.isHide ==> 是否在菜单中隐藏 (通常列表详情页需要隐藏)
+ * @param meta.isFull ==> 菜单是否全屏 (示例：数据大屏页面)
+ * @param meta.isAffix ==> 菜单是否固定在标签页中 (首页通常是固定项)
+ * @param meta.isKeepAlive ==> 当前路由是否缓存
+ * @param meta.linkType ==> 外链类型, 内嵌: 以iframe展示、外链: 新标签打开
+ * @param meta.link ==> 外链地址
+ * */
+export function backEndRouterConverter(routes: any, callbackFunc: RouterConvCallbackFunc = null as any, parentPath: string = '/') {
+    if (!routes) {
+        return [];
+    }
+
+    const routeItems = [];
+    for (let item of routes) {
+        if (!item.meta) {
+            return item;
+        }
+        // 将json字符串的meta转为对象
+        item.meta = JSON.parse(item.meta);
+
+        // 将meta.comoponet 解析为route.component
+        if (item.meta.component) {
+            item.component = dynamicImport(dynamicViewsModules, item.meta.component);
+            delete item.meta['component'];
+        }
+
+        let path = item.code;
+        // 如果不是以 / 开头，则路径需要拼接父路径
+        if (!path.startsWith('/')) {
+            path = parentPath + '/' + path;
+        }
+        item.path = path;
+        delete item['code'];
+
+        // route.meta.title == resource.name
+        item.meta.title = item.name;
+        delete item['name'];
+
+        // route.name == resource.meta.routeName
+        item.name = item.meta.routeName;
+        delete item.meta['routeName'];
+
+        // route.redirect == resource.meta.redirect
+        if (item.meta.redirect) {
+            item.redirect = item.meta.redirect;
+            delete item.meta['redirect'];
+        }
+        // 存在回调，则执行回调
+        callbackFunc && callbackFunc(item);
+        item.children && backEndRouterConverter(item.children, callbackFunc, item.path);
+        routeItems.push(item);
+    }
+
+    return routeItems;
+}
+
+/**
+ * 后端路由 component 转换函数
+ * @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
+ * @param component 当前要处理项 component
+ * @returns 返回处理成函数后的 component
+ */
+export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
+    const keys = Object.keys(dynamicViewsModules);
+    const matchKeys = keys.filter((key) => {
+        const k = key.replace(/..\/views|../, '');
+        return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+    });
+
+    if (matchKeys?.length === 1) {
+        return dynamicViewsModules[matchKeys[0]];
+    }
+
+    if (matchKeys?.length > 1) {
+        console.error('匹配到多个相似组件路径, 可添加后缀.vue或.tsx进行区分或者重命名组件名, 请调整...', matchKeys);
+        return null;
+    }
+
+    console.warn(`未匹配到[${component}]组件名对应的组件文件`);
+    return null;
+}
--- a/mayfly_go_web/src/router/index.ts
+++ b/mayfly_go_web/src/router/index.ts
@@ -1,30 +1,21 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
-import { clearSession, getToken } from '@/common/utils/storage';
+import { getToken } from '@/common/utils/storage';
 import { templateResolve } from '@/common/utils/string';
 import { NextLoading } from '@/common/utils/loading';
-import { dynamicRoutes, staticRoutes, pathMatch } from './route';
-import openApi from '@/common/openApi';
+import { staticRoutes, URL_LOGIN, URL_401, ROUTER_WHITE_LIST, errorRoutes } from './staticRouter';
 import syssocket from '@/common/syssocket';
 import pinia from '@/store/index';
 import { useThemeConfig } from '@/store/themeConfig';
 import { useUserInfo } from '@/store/userInfo';
 import { useRoutesList } from '@/store/routesList';
-import { useKeepALiveNames } from '@/store/keepAliveNames';
-
-/**
- * 获取目录下的 .vue、.tsx 全部文件
- * @method import.meta.glob
- * @link 参考：https://cn.vitejs.dev/guide/features.html#json
- */
-const viewsModules: any = import.meta.glob(['../views/**/*.{vue,tsx}']);
-const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...viewsModules });
+import { initBackendRoutes } from './dynamicRouter';

 // 添加静态路由
 const router = createRouter({
    history: createWebHashHistory(),
-    routes: staticRoutes,
+    routes: [...staticRoutes, ...errorRoutes],
 });

 // 前端控制路由：初始化方法，防止刷新时丢失
@@ -35,128 +26,15 @@ export function initAllFun() {
        return false;
    }
    useUserInfo().setUserInfo({});
-    router.addRoute(pathMatch); // 添加404界面
    resetRoute(); // 删除/重置路由
-    router.addRoute(dynamicRoutes[0]);
-
-    // 过滤权限菜单
-    useRoutesList().setRoutesList(dynamicRoutes[0].children);
-}
-
-// 后端控制路由：执行路由数据初始化
-export async function initBackEndControlRoutesFun() {
-    const token = getToken(); // 获取浏览器缓存 token 值
-    if (!token) {
-        // 无 token 停止执行下一步
-        return false;
-    }
-    useUserInfo().setUserInfo({});
-    // 获取路由
-    let menuRoute = await getBackEndControlRoutes();
-
-    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);
-
-    useRoutesList().setRoutesList(dynamicRoutes[0].children);
-}
-
-// 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
-export async function getBackEndControlRoutes() {
-    try {
-        const menuAndPermission = await openApi.getPermissions();
-        // 赋值权限码，用于控制按钮等
-        useUserInfo().userInfo.permissions = menuAndPermission.permissions;
-        return menuAndPermission.menus;
-    } catch (e: any) {
-        console.error(e);
-        return [];
-    }
-}
-
-type RouterConvCallbackFunc = (router: any) => void;
-
-// 后端控制路由，后端返回路由 转换为vue route
-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;
-        }
-        // 将json字符串的meta转为对象
-        item.meta = JSON.parse(item.meta);
-        // 将meta.comoponet 解析为route.component
-        if (item.meta.component) {
-            item.component = dynamicImport(dynamicViewsModules, item.meta.component);
-            delete item.meta['component'];
-        }
-        // route.path == resource.code
-        let path = item.code;
-        // 如果不是以 / 开头，则路径需要拼接父路径
-        if (!path.startsWith('/')) {
-            path = parentPath + '/' + path;
-        }
-        item.path = path;
-        delete item['code'];
-
-        // route.meta.title == resource.name
-        item.meta.title = item.name;
-        delete item['name'];
-
-        // route.name == resource.meta.routeName
-        item.name = item.meta.routeName;
-        delete item.meta['routeName'];
-
-        // route.redirect == resource.meta.redirect
-        if (item.meta.redirect) {
-            item.redirect = item.meta.redirect;
-            delete item.meta['redirect'];
-        }
-        // 存在回调，则执行回调
-        callbackFunc && callbackFunc(item);
-        item.children && backEndRouterConverter(item.children, callbackFunc, item.path);
-        return item;
-    });
-}
-
-/**
- * 后端路由 component 转换函数
- * @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
- * @param component 当前要处理项 component
- * @returns 返回处理成函数后的 component
- */
-export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
-    const keys = Object.keys(dynamicViewsModules);
-    const matchKeys = keys.filter((key) => {
-        const k = key.replace(/..\/views|../, '');
-        return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
-    });
-    if (matchKeys?.length === 1) {
-        const matchKey = matchKeys[0];
-        return dynamicViewsModules[matchKey];
-    }
-    if (matchKeys?.length > 1) {
-        return false;
-    }
+    // router.addRoute(dynamicRoutes[0]);
+    // // 过滤权限菜单
+    // useRoutesList().setRoutesList(dynamicRoutes[0].children);
 }

 // 删除/重置路由
 export function resetRoute() {
-    useRoutesList().routesList.forEach((route: any) => {
+    useRoutesList().routesList?.forEach((route: any) => {
        const { name } = route;
        router.hasRoute(name) && router.removeRoute(name);
    });
@@ -172,19 +50,17 @@ export async function initRouter() {
            initAllFun();
        } else if (isRequestRoutes) {
            // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
-            await initBackEndControlRoutesFun();
+            await initBackendRoutes();
        }
    } finally {
        NextLoading.done();
    }
 }

-let loadRouter = false;
-
 // 路由加载前
 router.beforeEach(async (to, from, next) => {
    NProgress.configure({ showSpinner: false });
-    if (to.meta.title) NProgress.start();
+    NProgress.start();

    // 如果有标题参数，则再原标题后加上参数来区别
    if (to.meta.titleRename && to.meta.title) {
@@ -192,39 +68,46 @@ router.beforeEach(async (to, from, next) => {
    }

    const token = getToken();
-    if ((to.path === '/login' || to.path == '/oauth2/callback') && !token) {
-        next();
-        NProgress.done();
-        return;
-    }
-    if (!token) {
-        next(`/login?redirect=${to.path}`);
-        clearSession();
-        resetRoute();
-        NProgress.done();

+    const toPath = to.path;
+    // 判断是访问登陆页，有token就在当前页面，没有token重置路由与用户信息到登陆页
+    if (toPath === URL_LOGIN) {
+        if (token) {
+            return next(from.fullPath);
+        }
+
+        resetRoute();
        syssocket.destory();
-        return;
+        return next();
    }
-    if (token && to.path === '/login') {
-        next('/');
-        NProgress.done();
-        return;
+
+    // 判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
+    if (ROUTER_WHITE_LIST.includes(toPath)) {
+        return next();
+    }
+
+    // 判断是否有token，没有重定向到 login 页面
+    if (!token) {
+        return next(`${URL_LOGIN}?redirect=${toPath}`);
    }

    // 终端不需要连接系统websocket消息
-    if (to.path != '/machine/terminal') {
+    if (to.path != '/machine/terminal' && to.path != '/machine/terminal-rdp') {
        syssocket.init();
    }

-    // 不存在路由（避免刷新页面找不到路由）并且未加载过（避免token过期，导致获取权限接口报权限不足，无限获取），则重新初始化路由
-    if (useRoutesList().routesList.length == 0 && !loadRouter) {
-        await initRouter();
-        loadRouter = true;
-        next({ path: to.path, query: to.query });
-    } else {
-        next();
+    // 不存在路由（避免刷新页面找不到路由），则重新初始化路由
+    if (useRoutesList().routesList?.length == 0) {
+        try {
+            // 可能token过期无法获取菜单权限信息等
+            await initRouter();
+        } catch (e) {
+            return next(`${URL_401}?redirect=${toPath}`);
+        }
+        return next({ path: toPath, query: to.query });
    }
+
+    next();
 });

 // 路由加载后
@@ -232,5 +115,13 @@ router.afterEach(() => {
    NProgress.done();
 });

+/**
+ * @description 路由跳转错误
+ * */
+router.onError((error) => {
+    NProgress.done();
+    console.warn('路由错误', error.message);
+});
+
 // 导出路由
 export default router;
--- a/mayfly_go_web/src/router/route.ts
+++ b/mayfly_go_web/src/router/route.ts
@@ -1,171 +0,0 @@
-import { RouteRecordRaw } from 'vue-router';
-import Layout from '@/layout/index.vue';
-
-// 定义动态路由
-export const dynamicRoutes = [
-    {
-        path: '/',
-        name: '/',
-        component: Layout,
-        redirect: '/home',
-        meta: {
-            isKeepAlive: true,
-        },
-        children: [],
-        //     children: [
-        //         {
-        //             path: '/home',
-        //             name: 'home',
-        //             component: () => import('@/views/home/index.vue'),
-        //             meta: {
-        //                 title: '首页',
-        //                 // iframe链接
-        //                 link: '',
-        //                 // 是否在菜单栏显示，默认显示
-        //                 isHide: false,
-        //                 isKeepAlive: true,
-        //                 // tag标签是否不可删除
-        //                 isAffix: true,
-        //                 // 是否为iframe
-        //                 isIframe: false,
-        //                 icon: 'el-icon-s-home',
-        //             },
-        //         },
-        //         {
-        //             path: '/sys',
-        //             name: 'Resource',
-        //             redirect: '/sys/resources',
-        //             meta: {
-        //                 title: '系统管理',
-        //                 // 资源code，用于校验用户是否拥有该资源权限
-        //                 code: 'sys',
-        //                 // isKeepAlive: true,
-        //                 icon: 'el-icon-monitor',
-        //             },
-        //             children: [
-        //                 {
-        //                     path: 'sys/resources',
-        //                     name: 'ResourceList',
-        //                     component: () => import('@/views/system/resource'),
-        //                     meta: {
-        //                         title: '资源管理',
-        //                         code: 'resource:list',
-        //                         isKeepAlive: true,
-        //                         icon: 'el-icon-menu',
-        //                     },
-        //                 },
-        //                 {
-        //                     path: 'sys/roles',
-        //                     name: 'RoleList',
-        //                     component: () => import('@/views/system/role'),
-        //                     meta: {
-        //                         title: '角色管理',
-        //                         code: 'role:list',
-        //                         isKeepAlive: true,
-        //                         icon: 'el-icon-menu',
-        //                     },
-        //                 },
-        //                 {
-        //                     path: 'sys/accounts',
-        //                     name: 'ResourceList',
-        //                     component: () => import('@/views/system/account'),
-        //                     meta: {
-        //                         title: '账号管理',
-        //                         code: 'account:list',
-        //                         isKeepAlive: true,
-        //                         icon: 'el-icon-menu',
-        //                     },
-        //                 },
-        //             ],
-        //         },
-        //         {
-        //             path: '/machine',
-        //             name: 'Machine',
-        //             redirect: '/machine/list',
-        //             meta: {
-        //                 title: '机器管理',
-        //                 // 资源code，用于校验用户是否拥有该资源权限
-        //                 code: 'machine',
-        //                 // isKeepAlive: true,
-        //                 icon: 'el-icon-monitor',
-        //             },
-        //             children: [
-        //                 {
-        //                     path: '/list',
-        //                     name: 'MachineList',
-        //                     component: () => import('@/views/ops/machine'),
-        //                     meta: {
-        //                         title: '机器列表',
-        //                         code: 'machine:list',
-        //                         isKeepAlive: true,
-        //                         icon: 'el-icon-menu',
-        //                     },
-        //                 },
-        //             ],
-        //         },
-        //         {
-        //             path: '/personal',
-        //             name: 'personal',
-        //             component: () => import('@/views/personal/index.vue'),
-        //             meta: {
-        //                 title: '个人中心',
-        //                 isKeepAlive: true,
-        //                 icon: 'el-icon-user',
-        //             },
-        //         },
-        //     ],
-    },
-];
-
-// 定义静态路由
-export const staticRoutes: Array<RouteRecordRaw> = [
-    {
-        path: '/login',
-        name: 'login',
-        component: () => import('@/views/login/index.vue'),
-        meta: {
-            title: '登录',
-        },
-    },
-    {
-        path: '/404',
-        name: 'notFound',
-        component: () => import('@/views/error/404.vue'),
-        meta: {
-            title: '找不到此页面',
-        },
-    },
-    {
-        path: '/401',
-        name: 'noPower',
-        component: () => import('@/views/error/401.vue'),
-        meta: {
-            title: '没有权限',
-        },
-    },
-    {
-        path: '/oauth2/callback',
-        name: 'oauth2Callback',
-        component: () => import('@/views/oauth/Oauth2Callback.vue'),
-        meta: {
-            title: 'oauth2回调',
-        },
-    },
-    {
-        path: '/machine/terminal',
-        name: 'machineTerminal',
-        component: () => import('@/views/ops/machine/SshTerminalPage.vue'),
-        meta: {
-            // 将路径 'xxx?name=名字' 里的name字段值替换到title里
-            title: '终端 | {name}',
-            // 是否根据query对标题名进行参数替换，即最终显示为‘终端_机器名’
-            titleRename: true,
-        },
-    },
-];
-
-// 定义404界面
-export const pathMatch = {
-    path: '/:path(.*)*',
-    redirect: '/404',
-};
--- a/mayfly_go_web/src/router/staticRouter.ts
+++ b/mayfly_go_web/src/router/staticRouter.ts
@@ -0,0 +1,93 @@
+import { RouteRecordRaw } from 'vue-router';
+
+export const URL_HOME: string = '/home';
+
+// 登录页地址（默认）
+export const URL_LOGIN: string = '/login';
+
+export const URL_401: string = '/401';
+
+export const URL_404: string = '/404';
+
+export const LAYOUT_ROUTE_NAME: string = 'layout';
+
+// 路由白名单地址（本地存在的路由 staticRouter.ts 中）
+export const ROUTER_WHITE_LIST: string[] = [URL_404, URL_401, '/oauth2/callback'];
+
+// 静态路由
+export const staticRoutes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        redirect: URL_HOME,
+    },
+    {
+        path: URL_LOGIN,
+        name: 'login',
+        component: () => import('@/views/login/index.vue'),
+        meta: {
+            title: '登录',
+        },
+    },
+    {
+        path: '/layout',
+        name: LAYOUT_ROUTE_NAME,
+        component: () => import('@/layout/index.vue'),
+        redirect: URL_HOME,
+        children: [],
+    },
+    {
+        path: '/oauth2/callback',
+        name: 'oauth2Callback',
+        component: () => import('@/views/oauth/Oauth2Callback.vue'),
+        meta: {
+            title: 'oauth2回调',
+        },
+    },
+    {
+        path: '/machine/terminal',
+        name: 'machineTerminal',
+        component: () => import('@/views/ops/machine/SshTerminalPage.vue'),
+        meta: {
+            // 将路径 'xxx?name=名字' 里的name字段值替换到title里
+            title: '终端 | {name}',
+            // 是否根据query对标题名进行参数替换，即最终显示为‘终端_机器名’
+            titleRename: true,
+        },
+    },
+    {
+        path: '/machine/terminal-rdp',
+        name: 'machineTerminalRdp',
+        component: () => import('@/views/ops/machine/RdpTerminalPage.vue'),
+        meta: {
+            // 将路径 'xxx?name=名字' 里的name字段值替换到title里
+            title: '终端 | {name}',
+            // 是否根据query对标题名进行参数替换，即最终显示为‘终端_机器名’
+            titleRename: true,
+        },
+    },
+];
+
+// 错误页面路由
+export const errorRoutes: Array<RouteRecordRaw> = [
+    {
+        path: URL_404,
+        name: 'notFound',
+        component: () => import('@/views/error/404.vue'),
+        meta: {
+            title: '找不到此页面',
+        },
+    },
+    {
+        path: URL_401,
+        name: 'noPower',
+        component: () => import('@/views/error/401.vue'),
+        meta: {
+            title: '没有权限',
+        },
+    },
+    // Resolve refresh page, route warnings
+    {
+        path: '/:pathMatch(.*)*',
+        component: () => import('@/views/error/404.vue'),
+    },
+];
--- a/mayfly_go_web/src/store/autoOpenResource.ts
+++ b/mayfly_go_web/src/store/autoOpenResource.ts
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 自动打开资源
+ */
+export const useAutoOpenResource = defineStore('autoOpenResource', {
+    state: () => ({
+        autoOpenResource: {
+            machineCodePath: '',
+            dbCodePath: '',
+            redisCodePath: '',
+            mongoCodePath: '',
+        },
+    }),
+    actions: {
+        setMachineCodePath(codePath: string) {
+            this.autoOpenResource.machineCodePath = codePath;
+        },
+        setDbCodePath(codePath: string) {
+            this.autoOpenResource.dbCodePath = codePath;
+        },
+        setRedisCodePath(codePath: string) {
+            this.autoOpenResource.redisCodePath = codePath;
+        },
+        setMongoCodePath(codePath: string) {
+            this.autoOpenResource.mongoCodePath = codePath;
+        },
+    },
+});
--- a/mayfly_go_web/src/store/routesList.ts
+++ b/mayfly_go_web/src/store/routesList.ts
@@ -11,7 +11,7 @@ export const useRoutesList = defineStore('routesList', {
        routesList: [],
    }),
    actions: {
-        async setRoutesList(data: Array<string>) {
+        async setRoutesList(data: Array<any>) {
            this.routesList = data;
        },
    },
--- a/mayfly_go_web/src/store/themeConfig.ts
+++ b/mayfly_go_web/src/store/themeConfig.ts
@@ -1,6 +1,12 @@
 import { defineStore } from 'pinia';
 import { dateFormat2 } from '@/common/utils/date';
 import { useUserInfo } from '@/store/userInfo';
+import { getSysStyleConfig } from '@/common/sysconfig';
+import { getLocal, getThemeConfig } from '@/common/utils/storage';
+
+// 系统默认logo图标，对应于@/assets/image/logo.svg
+const logoIcon =
+    'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjIxODU5MDA5NjA1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijk3MDkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODIwLjIwMzkyMiA4MTIuMTcyNTQ5SDY4NC42NzQ1MXYtNDUuMTc2NDcxaDExMi40MzkyMTVWMjc5LjA5MDE5Nkg2MzMuNDc0NTFsLTg1LjMzMzMzNCAyNzcuMDgyMzUzYy0zLjAxMTc2NSAxMC4wMzkyMTYtMTIuMDQ3MDU5IDE2LjA2Mjc0NS0yMi4wODYyNzQgMTYuMDYyNzQ1LTEwLjAzOTIxNiAwLTE5LjA3NDUxLTcuMDI3NDUxLTIxLjA4MjM1My0xNy4wNjY2NjdsLTcxLjI3ODQzMS0yODAuMDk0MTE3aC0xODAuNzA1ODgzVjc2Mi45ODAzOTJoMTIwLjQ3MDU4OXY0NS4xNzY0NzFIMjI5Ljg5ODAzOWMtMTIuMDQ3MDU5IDAtMjIuMDg2Mjc1LTEwLjAzOTIxNi0yMi4wODYyNzQtMjIuMDg2Mjc1VjI1Mi45ODgyMzVjMC0xMi4wNDcwNTkgMTAuMDM5MjE2LTIyLjA4NjI3NSAyMi4wODYyNzQtMjIuMDg2Mjc0SDQ1MS43NjQ3MDZjMTAuMDM5MjE2IDAgMTkuMDc0NTEgNy4wMjc0NTEgMjIuMDg2Mjc0IDE3LjA2NjY2Nmw1NS4yMTU2ODcgMjE4Ljg1NDkwMkw1OTUuMzI1NDkgMjUwLjk4MDM5MmMzLjAxMTc2NS05LjAzNTI5NCAxMi4wNDcwNTktMTYuMDYyNzQ1IDIxLjA4MjM1My0xNi4wNjI3NDVoMjAyLjc5MjE1N2MxMi4wNDcwNTkgMCAyMi4wODYyNzUgMTAuMDM5MjE2IDIyLjA4NjI3NSAyMi4wODYyNzV2NTMzLjA4MjM1M2MxLjAwMzkyMiAxMi4wNDcwNTktOS4wMzUyOTQgMjIuMDg2Mjc1LTIxLjA4MjM1MyAyMi4wODYyNzR6IG0wIDAiIGZpbGw9IiNlMjU4MTMiIHAtaWQ9Ijk3MTAiPjwvcGF0aD48cGF0aCBkPSJNNzMxLjg1ODgyNCA0MjUuNjYyNzQ1YzQuMDE1Njg2LTEyLjA0NzA1OS0yLjAwNzg0My0yNS4wOTgwMzktMTQuMDU0OTAyLTI5LjExMzcyNS0xMi4wNDcwNTktNC4wMTU2ODYtMjUuMDk4MDM5IDIuMDA3ODQzLTI5LjExMzcyNiAxNC4wNTQ5MDJMNTYzLjIgNzY2Ljk5NjA3OGgtNzMuMjg2Mjc1TDM3MS40NTA5OCA0MTAuNjAzOTIyYy00LjAxNTY4Ni0xMi4wNDcwNTktMTcuMDY2NjY3LTE4LjA3MDU4OC0yOC4xMDk4MDQtMTQuMDU0OTAyLTEyLjA0NzA1OSA0LjAxNTY4Ni0xOC4wNzA1ODggMTcuMDY2NjY3LTE0LjA1NDkwMSAyOC4xMDk4MDRsMTIzLjQ4MjM1MiAzNzEuNDUwOThjMy4wMTE3NjUgOS4wMzUyOTQgMTIuMDQ3MDU5IDE1LjA1ODgyNCAyMS4wODIzNTMgMTUuMDU4ODIzaDcyLjI4MjM1M2wtNTMuMjA3ODQzIDE2MC42Mjc0NTEgNDYuMTgwMzkyIDIuMDA3ODQ0IDE5Mi43NTI5NDItNTQ4LjE0MTE3N3oiIGZpbGw9IiMyYzJjMmMiIHAtaWQ9Ijk3MTEiPjwvcGF0aD48L3N2Zz4=';

 export const useThemeConfig = defineStore('themeConfig', {
    state: (): ThemeConfigState => ({
@@ -108,6 +114,7 @@ export const useThemeConfig = defineStore('themeConfig', {
            // 默认布局，可选 1、默认 defaults 2、经典 classic 3、横向 transverse 4、分栏 columns
            layout: 'classic',

+            terminalTheme: 'light',
            // ssh终端字体颜色
            terminalForeground: '#C5C8C6',
            // ssh终端背景色
@@ -130,7 +137,9 @@ export const useThemeConfig = defineStore('themeConfig', {
            // 网站主标题（菜单导航、浏览器当前网页标题）
            globalTitle: 'mayfly',
            // 网站副标题（登录页顶部文字）
-            globalViceTitle: 'mayfly',
+            globalViceTitle: 'mayfly-go',
+            // 网站logo icon, base64编码内容
+            logoIcon: logoIcon,
            // 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
            globalI18n: 'zh-cn',
            // 默认全局组件大小，可选值"<|large|default|small>"，默认 ''
@@ -142,19 +151,34 @@ export const useThemeConfig = defineStore('themeConfig', {
        },
    }),
    actions: {
-        // 设置布局配置
-        setThemeConfig(data: ThemeConfigState) {
-            this.themeConfig = data.themeConfig;
-        },
-        // 设置水印配置信息
-        setWatermarkConfig(useWatermarkConfig: any) {
-            this.themeConfig.watermarkText = [];
-            this.themeConfig.isWatermark = useWatermarkConfig.isUse;
-            if (!useWatermarkConfig.isUse) {
-                return;
+        initThemeConfig() {
+            // 获取缓存中的布局配置
+            const tc = getThemeConfig();
+            if (tc) {
+                this.themeConfig = tc;
+                document.documentElement.style.cssText = getLocal('themeConfigStyle');
            }
-            // 索引2为用户自定义水印信息
-            this.themeConfig.watermarkText[2] = useWatermarkConfig.content;
+
+            // 根据后台系统配置初始化
+            getSysStyleConfig().then((res) => {
+                if (res?.title) {
+                    this.themeConfig.globalTitle = res.title;
+                }
+                if (res?.viceTitle) {
+                    this.themeConfig.globalViceTitle = res.viceTitle;
+                }
+                if (res?.logoIcon) {
+                    this.themeConfig.logoIcon = res.logoIcon;
+                }
+
+                this.themeConfig.watermarkText = [];
+                this.themeConfig.isWatermark = res?.useWatermark;
+                if (!res?.useWatermark) {
+                    return;
+                }
+                // 索引2为用户自定义水印信息
+                this.themeConfig.watermarkText[2] = res.watermarkContent;
+            });
        },
        // 设置水印用户信息
        setWatermarkUser(del: boolean = false) {
@@ -169,5 +193,23 @@ export const useThemeConfig = defineStore('themeConfig', {
        setWatermarkNowTime() {
            this.themeConfig.watermarkText[1] = dateFormat2('yyyy-MM-dd HH:mm:ss', new Date());
        },
+        // 切换暗黑模式
+        switchDark(isDark: boolean) {
+            this.themeConfig.isDark = isDark;
+            // 切换编辑器主题
+            if (isDark) {
+                this.themeConfig.editorTheme = 'vs-dark';
+            } else {
+                this.themeConfig.editorTheme = 'vs';
+            }
+            // 如果终端主题不是自定义主题，则切换主题
+            if (this.themeConfig.terminalTheme != 'custom') {
+                if (isDark) {
+                    this.themeConfig.terminalTheme = 'dark';
+                } else {
+                    this.themeConfig.terminalTheme = 'light';
+                }
+            }
+        },
    },
 });
--- a/mayfly_go_web/src/theme/app.scss
+++ b/mayfly_go_web/src/theme/app.scss
@@ -35,7 +35,7 @@ body,
    width: 100%;
    height: 100%;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    font-weight: 450;
+    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-main-color);
@@ -70,8 +70,9 @@ body,
    }

    .layout-main {
-        padding: 0 !important;
-        overflow: hidden;
+        box-sizing: border-box;
+        padding: 10px 10px;
+        overflow-x: hidden;
        width: 100%;
        background-color: var(--bg-main-color);
    }
@@ -81,7 +82,7 @@ body,
    }

    .layout-view-bg-white {
-        background: white;
+        background: var(--bg-main-color);
        width: 100%;
        height: 100%;
        border-radius: 4px;
@@ -107,11 +108,6 @@ body,
        transition: width 0.3s ease;
    }

-    .layout-scrollbar {
-        @extend .el-scrollbar;
-        padding: 10px;
-    }
-
    .layout-mian-height-50 {
        height: calc(100vh - 50px);
    }
@@ -125,6 +121,11 @@ body,
    .layout-hide {
        display: none;
    }
+
+    .el-footer {
+        height: auto;
+        padding: 0;
+    }
 }

 /* element plus 全局样式
@@ -190,6 +191,23 @@ body,
    }
 }

+.flex-justify-between {
+    display: flex;
+    align-items: center; // 垂直方向水平居中
+    justify-content: space-between; // 使第一个子元素靠近父容器的起始位置，最后一个子元素靠近终止位置，而其他子元素均匀分布在它们之间
+}
+
+.flex-all-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-align-center {
+    display: flex;
+    align-items: center; // 垂直方向水平居中
+}
+
 /* 宽高 100%
 ------------------------------- */
 .w100 {
@@ -236,7 +254,7 @@ body,

 /* 字体大小全局样式
 ------------------------------- */
-@for $i from 10 through 32 {
+@for $i from 8 through 32 {
    .font#{$i} {
        font-size: #{$i}px !important;
    }
@@ -276,6 +294,10 @@ body,
    .pl#{$i} {
        padding-left: #{$i}px !important;
    }
+
+    .pd#{$i} {
+        padding: #{$i}px !important;
+    }
 }


@@ -335,12 +357,23 @@ body,
    user-select: none;
 }

-.toolbar {
-    width: 100%;
-    padding: 4px;
-    overflow: hidden;
-    line-height: 24px;
-    border: 1px solid var(--el-border-color-light, #ebeef5);
+/* custom card */
+.card {
+    box-sizing: border-box;
+    padding: 20px;
+    overflow-x: hidden;
+    background-color: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: 6px;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+
+/* content-box (常用内容盒子) */
+.content-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
 }

 .fl {
@@ -361,10 +394,6 @@ body,
    z-index: inherit !important;
 }

-.f12 {
-    font-size: 12px
-}
-
 .pointer {
    cursor: pointer;
 }
@@ -396,6 +425,7 @@ body,
 .default-theme.splitpanes--horizontal>.splitpanes__splitter {
    border-top: 1px solid var(--bg-main-color);
 }
+
 // 竖线样式
 .splitpanes.default-theme .splitpanes__splitter::before,
 .splitpanes.default-theme .splitpanes__splitter::after {
--- a/mayfly_go_web/src/theme/element.scss
+++ b/mayfly_go_web/src/theme/element.scss
@@ -7,335 +7,353 @@
 ------------------------------- */
 // 菜单搜索
 .el-autocomplete-suggestion__wrap {
-	max-height: 280px !important;
+    max-height: 280px !important;
 }

 /* Form 表单
 ------------------------------- */
 .el-form {
-	// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
-	.el-form-item:last-of-type {
-		margin-bottom: 0 !important;
-	}
-	// 修复行内表单最后一个 el-form-item 位置下移问题
-	&.el-form--inline {
-		.el-form-item--large.el-form-item:last-of-type {
-			margin-bottom: 22px !important;
-		}
-		.el-form-item--default.el-form-item:last-of-type,
-		.el-form-item--small.el-form-item:last-of-type {
-			margin-bottom: 18px !important;
-		}
-	}
-	// https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM
-	.el-form-item .el-form-item__label .el-icon {
-		margin-right: 0px;
-	}
+
+    // 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
+    .el-form-item:last-of-type {
+        margin-bottom: 0 !important;
+    }
+
+    // 修复行内表单最后一个 el-form-item 位置下移问题
+    &.el-form--inline {
+        .el-form-item--large.el-form-item:last-of-type {
+            margin-bottom: 22px !important;
+        }
+
+        .el-form-item--default.el-form-item:last-of-type,
+        .el-form-item--small.el-form-item:last-of-type {
+            margin-bottom: 18px !important;
+        }
+    }
+
+    // https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM
+    .el-form-item .el-form-item__label .el-icon {
+        margin-right: 0px;
+    }
 }

 /* Alert 警告
 ------------------------------- */
 .el-alert {
-	border: 1px solid;
+    border: 1px solid;
 }
+
 .el-alert__title {
-	word-break: break-all;
+    word-break: break-all;
 }

 /* Message 消息提示
 ------------------------------- */
 .el-message {
-	min-width: unset !important;
-	padding: 15px !important;
-	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.02);
+    min-width: unset !important;
+    padding: 15px !important;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.02);
 }

 /* NavMenu 导航菜单
 ------------------------------- */
 // 鼠标 hover 时颜色
 .el-menu-hover-bg-color {
-	background-color: var(--bg-menuBarActiveColor) !important;
+    background-color: var(--bg-menuBarActiveColor) !important;
 }
+
 // 默认样式修改
 .el-menu {
-	border-right: none !important;
-	width: 220px;
+    border-right: none !important;
+    width: 220px;
 }
+
 .el-menu-item {
-	height: 56px !important;
-	line-height: 56px !important;
+    height: 56px !important;
+    line-height: 56px !important;
 }
+
 .el-menu-item,
 .el-sub-menu__title {
-	color: var(--bg-menuBarColor);
+    color: var(--bg-menuBarColor);
 }
+
 // 修复点击左侧菜单折叠再展开时，宽度不跟随问题
 .el-menu--collapse {
-	width: 64px !important;
+    width: 64px !important;
 }
+
 // 外部链接时
 .el-menu-item a,
 .el-menu-item a:hover,
 .el-menu-item i,
 .el-sub-menu__title i {
-	color: inherit;
-	text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
+
 // 第三方图标字体间距/大小设置
 .el-menu-item .iconfont,
 .el-sub-menu .iconfont,
 .el-menu-item .fa,
 .el-sub-menu .fa {
-	@include generalIcon;
+    @include generalIcon;
 }
+
 // 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
 .el-menu-item.is-active,
 .el-sub-menu.is-active .el-sub-menu__title,
 .el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
-	@extend .el-menu-hover-bg-color;
+    @extend .el-menu-hover-bg-color;
 }
+
 .el-menu-item:hover {
-	@extend .el-menu-hover-bg-color;
+    @extend .el-menu-hover-bg-color;
 }
+
 .el-sub-menu.is-active.is-opened .el-sub-menu__title {
-	background-color: unset !important;
+    background-color: unset !important;
 }
+
 // 子级菜单背景颜色
 // .el-menu--inline {
 // 	background: var(--next-bg-menuBar-light-1);
 // }
 // 水平菜单、横向菜单折叠 a 标签
 .el-popper.is-dark a {
-	color: var(--el-color-white) !important;
-	text-decoration: none;
+    color: var(--el-color-white) !important;
+    text-decoration: none;
 }
+
 // 水平菜单、横向菜单折叠背景色
 .el-popper.is-pure.is-light {
-	// 水平菜单
-	.el-menu--vertical {
-		background: var(--bg-menuBar);
-		.el-sub-menu.is-active .el-sub-menu__title {
-			color: var(--el-menu-active-color);
-		}
-		.el-popper.is-pure.is-light {
-			.el-menu--vertical {
-				.el-sub-menu .el-sub-menu__title {
-					background-color: unset !important;
-					color: var(--bg-menuBarColor);
-				}
-				.el-sub-menu.is-active .el-sub-menu__title {
-					color: var(--el-menu-active-color);
-				}
-			}
-		}
-	}
-	// 横向菜单
-	.el-menu--horizontal {
-		background: var(--bg-topBar);
-		.el-menu-item,
-		.el-sub-menu {
-			height: 48px !important;
-			line-height: 48px !important;
-			color: var(--bg-topBarColor);
-			.el-sub-menu__title {
-				height: 48px !important;
-				line-height: 48px !important;
-				color: var(--bg-topBarColor);
-			}
-			.el-popper.is-pure.is-light {
-				.el-menu--horizontal {
-					.el-sub-menu .el-sub-menu__title {
-						background-color: unset !important;
-						color: var(--bg-topBarColor);
-					}
-					.el-sub-menu.is-active .el-sub-menu__title {
-						color: var(--el-menu-active-color);
-					}
-				}
-			}
-		}
-		.el-menu-item.is-active,
-		.el-sub-menu.is-active .el-sub-menu__title {
-			color: var(--el-menu-active-color);
-		}
-	}
+
+    // 水平菜单
+    .el-menu--vertical {
+        background: var(--bg-menuBar);
+
+        .el-sub-menu.is-active .el-sub-menu__title {
+            color: var(--el-menu-active-color);
+        }
+
+        .el-popper.is-pure.is-light {
+            .el-menu--vertical {
+                .el-sub-menu .el-sub-menu__title {
+                    background-color: unset !important;
+                    color: var(--bg-menuBarColor);
+                }
+
+                .el-sub-menu.is-active .el-sub-menu__title {
+                    color: var(--el-menu-active-color);
+                }
+            }
+        }
+    }
+
+    // 横向菜单
+    .el-menu--horizontal {
+        background: var(--bg-topBar);
+
+        .el-menu-item,
+        .el-sub-menu {
+            height: 48px !important;
+            line-height: 48px !important;
+            color: var(--bg-topBarColor);
+
+            .el-sub-menu__title {
+                height: 48px !important;
+                line-height: 48px !important;
+                color: var(--bg-topBarColor);
+            }
+
+            .el-popper.is-pure.is-light {
+                .el-menu--horizontal {
+                    .el-sub-menu .el-sub-menu__title {
+                        background-color: unset !important;
+                        color: var(--bg-topBarColor);
+                    }
+
+                    .el-sub-menu.is-active .el-sub-menu__title {
+                        color: var(--el-menu-active-color);
+                    }
+                }
+            }
+        }
+
+        .el-menu-item.is-active,
+        .el-sub-menu.is-active .el-sub-menu__title {
+            color: var(--el-menu-active-color);
+        }
+    }
 }
+
 // 横向菜单（经典、横向）布局
 .el-menu.el-menu--horizontal {
-	border-bottom: none !important;
-	width: 100% !important;
-	.el-menu-item,
-	.el-sub-menu__title {
-		height: 48px !important;
-		color: var(--bg-topBarColor);
-	}
-	.el-menu-item:not(.is-active):hover,
-	.el-sub-menu:not(.is-active):hover .el-sub-menu__title {
-		color: var(--bg-topBarColor);
-	}
+    border-bottom: none !important;
+    width: 100% !important;
+
+    .el-menu-item,
+    .el-sub-menu__title {
+        height: 48px !important;
+        color: var(--bg-topBarColor);
+    }
+
+    .el-menu-item:not(.is-active):hover,
+    .el-sub-menu:not(.is-active):hover .el-sub-menu__title {
+        color: var(--bg-topBarColor);
+    }
 }
+
 // 菜单收起时，图标不居中问题
 .el-menu--collapse {
-	.el-menu-item .iconfont,
-	.el-sub-menu .iconfont,
-	.el-menu-item .fa,
-	.el-sub-menu .fa {
-		margin-right: 0 !important;
-	}
-	.el-sub-menu__title {
-		padding-right: 0 !important;
-	}
+
+    .el-menu-item .iconfont,
+    .el-sub-menu .iconfont,
+    .el-menu-item .fa,
+    .el-sub-menu .fa {
+        margin-right: 0 !important;
+    }
+
+    .el-sub-menu__title {
+        padding-right: 0 !important;
+    }
 }

 /* Tabs 标签页
 ------------------------------- */
 .el-tabs__nav-wrap::after {
-	height: 1px !important;
+    height: 1px !important;
 }

 /* Dropdown 下拉菜单
 ------------------------------- */
 .el-dropdown-menu {
-	list-style: none !important; /*修复 Dropdown 下拉菜单样式问题 2022.03.04*/
-}
-.el-dropdown-menu .el-dropdown-menu__item {
-	white-space: nowrap;
-	&:not(.is-disabled):hover {
-		background-color: var(--el-dropdown-menuItem-hover-fill);
-		color: var(--el-dropdown-menuItem-hover-color);
-	}
+    list-style: none !important;
+    /*修复 Dropdown 下拉菜单样式问题 2022.03.04*/
 }

-/* Steps 步骤条
------------------------------- */
-.el-step__icon-inner {
-	font-size: 30px !important;
-	font-weight: 400 !important;
-}
-.el-step__title {
-	font-size: 14px;
+.el-dropdown-menu .el-dropdown-menu__item {
+    white-space: nowrap;
+
+    &:not(.is-disabled):hover {
+        background-color: var(--el-dropdown-menuItem-hover-fill);
+        color: var(--el-dropdown-menuItem-hover-color);
+    }
 }

 /* Dialog 对话框
 ------------------------------- */
 .el-overlay {
-	overflow: hidden;
-	.el-overlay-dialog {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: unset !important;
-		width: 100%;
-		height: 100%;
-		.el-dialog {
-			margin: 0 auto !important;
-			position: absolute;
-			.el-dialog__body {
-				padding: 20px !important;
-			}
-		}
-	}
+    overflow: hidden;
+
+    .el-overlay-dialog {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: unset !important;
+        width: 100%;
+        height: 100%;
+
+        .el-dialog {
+            margin: 0 auto !important;
+            position: absolute;
+
+            .el-dialog__body {
+                padding: 20px !important;
+            }
+        }
+    }
 }
+
 .el-dialog__body {
-	max-height: calc(90vh - 111px) !important;
-	overflow-y: auto;
-	overflow-x: hidden;
+    max-height: calc(90vh - 111px) !important;
+    overflow-y: auto;
+    overflow-x: hidden;
 }

 /* Card 卡片
 ------------------------------- */
 .el-card__header {
-	padding: 15px 20px;
+    padding: 15px 20px;
 }

 /* Table 表格 element plus 2.2.0 版本
 ------------------------------- */
 .el-table {
-	.el-button.is-text {
-		padding: 0;
-	}
+    .el-button.is-text {
+        padding: 0;
+    }
 }

 /* scrollbar
 ------------------------------- */
 .el-scrollbar__bar {
-	z-index: 4;
+    z-index: 4;
 }
+
 /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
 .el-scrollbar__wrap {
-	max-height: 100%;
+    max-height: 100%;
 }
+
 .el-select-dropdown .el-scrollbar__wrap {
-	overflow-x: scroll !important;
+    overflow-x: scroll !important;
 }
+
 /*修复Select 选择器高度问题*/
 .el-select-dropdown__wrap {
-	max-height: 274px !important;
+    max-height: 274px !important;
 }
+
 /*修复Cascader 级联选择器高度问题*/
 .el-cascader-menu__wrap.el-scrollbar__wrap {
-	height: 204px !important;
+    height: 204px !important;
 }
+
 /*用于界面高度自适应（main.vue），区分 scrollbar__view，防止其它使用 scrollbar 的地方出现滚动条消失*/
 .layout-container-view .el-scrollbar__view {
-	height: 100%;
+    height: 100%;
 }
+
 /*防止分栏布局二级菜单很多时，滚动条消失问题*/
 .layout-columns-warp .layout-aside .el-scrollbar__view {
-	height: unset !important;
+    height: unset !important;
 }

 /* Pagination 分页
 ------------------------------- */
 .el-pagination__editor {
-	margin-right: 8px;
+    margin-right: 8px;
 }
+
 /*深色模式时分页高亮问题*/
 .el-pagination.is-background .btn-next.is-active,
 .el-pagination.is-background .btn-prev.is-active,
 .el-pagination.is-background .el-pager li.is-active {
-	background-color: var(--el-color-primary) !important;
-	color: var(--el-color-white) !important;
-}
-
-/* Drawer 抽屉
------------------------------- */
-.el-drawer {
-	--el-drawer-padding-primary: unset !important;
-	.el-drawer__header {
-		padding: 0 15px !important;
-		height: 50px;
-		display: flex;
-		align-items: center;
-		margin-bottom: 0 !important;
-		border-bottom: 1px solid var(--el-border-color);
-		color: var(--el-text-color-primary);
-	}
-	.el-drawer__body {
-		width: 100%;
-		height: 100%;
-		overflow: auto;
-	}
+    background-color: var(--el-color-primary) !important;
+    color: var(--el-color-white) !important;
 }

 /* Breadcrumb 面包屑
 ------------------------------- */
 .el-breadcrumb__inner a:hover,
 .el-breadcrumb__inner.is-link:hover {
-	color: var(--el-color-primary);
+    color: var(--el-color-primary);
 }
+
 .el-breadcrumb__inner a,
 .el-breadcrumb__inner.is-link {
-	color: var(--bg-topBarColor);
-	font-weight: normal;
+    color: var(--bg-topBarColor);
+    font-weight: normal;
 }

 // el-tooltip使用自定义主题时的样式
 .el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
-  //   padding: 6px 12px;
+    //   padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
 }
+
 .el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
@@ -343,7 +361,9 @@


 .el-dialog {
-    border-radius: 6px; /* 设置圆角 */
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
+    border-radius: 6px;
+    /* 设置圆角 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    /* 添加轻微阴影效果 */
    border: 1px solid var(--el-border-color-lighter);
 }
--- a/mayfly_go_web/src/types/pinia.d.ts
+++ b/mayfly_go_web/src/types/pinia.d.ts
@@ -49,8 +49,10 @@ declare interface ThemeConfigState {
        isRequestRoutes: boolean;
        globalTitle: string;
        globalViceTitle: string;
+        logoIcon: string;
        globalI18n: string;
        globalComponentSize: string;
+        terminalTheme: string;
        terminalForeground: string;
        terminalBackground: string;
        terminalCursor: string;
--- a/mayfly_go_web/src/types/shim.d.ts
+++ b/mayfly_go_web/src/types/shim.d.ts
@@ -1,6 +1,6 @@
 // 申明外部 npm 插件模块
-declare module 'sql-formatter';
 declare module 'jsoneditor';
 declare module 'asciinema-player';
 declare module 'vue-grid-layout';
 declare module 'splitpanes';
+declare module 'uuid';
--- a/mayfly_go_web/src/views/error/401.vue
+++ b/mayfly_go_web/src/views/error/401.vue
@@ -19,16 +19,21 @@
 </template>

 <script lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { clearSession } from '@/common/utils/storage';
+import { URL_LOGIN } from '@/router/staticRouter';
+
 export default {
    name: '401',
    setup() {
        const router = useRouter();
+        const route = useRoute();
+
        const onSetAuth = () => {
            clearSession();
-            router.push('/login');
+            router.push({ path: URL_LOGIN, query: route.query });
        };
+
        return {
            onSetAuth,
        };
--- a/mayfly_go_web/src/views/flow/ProcdefEdit.vue
+++ b/mayfly_go_web/src/views/flow/ProcdefEdit.vue
@@ -0,0 +1,220 @@
+<template>
+    <div>
+        <el-drawer @open="initSort" :title="title" v-model="visible" :before-close="cancel" :destroy-on-close="true" :close-on-click-modal="false" size="40%">
+            <template #header>
+                <DrawerHeader :header="title" :back="cancel" />
+            </template>
+
+            <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
+                <el-form-item prop="name" label="名称">
+                    <el-input v-model.trim="form.name" placeholder="请输入流程名称" auto-complete="off" clearable></el-input>
+                </el-form-item>
+                <el-form-item prop="defKey" label="key">
+                    <el-input :disabled="form.id" v-model.trim="form.defKey" placeholder="请输入流程key" auto-complete="off" clearable></el-input>
+                </el-form-item>
+                <el-form-item prop="status" label="状态">
+                    <el-select v-model="form.status" placeholder="请选择状态">
+                        <el-option v-for="item in ProcdefStatus" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item prop="remark" label="备注">
+                    <el-input v-model.trim="form.remark" placeholder="备注" auto-complete="off" clearable></el-input>
+                </el-form-item>
+
+                <el-form-item ref="tagSelectRef" prop="codePaths" label="关联资源">
+                    <tag-tree-check height="300px" v-model="form.codePaths" :tag-type="[TagResourceTypeEnum.DbName.value, TagResourceTypeEnum.Redis.value]" />
+                </el-form-item>
+
+                <el-divider content-position="left">审批节点</el-divider>
+
+                <el-table ref="taskTableRef" :data="tasks" row-key="taskKey" stripe style="width: 100%">
+                    <el-table-column prop="name" label="名称" min-width="100px">
+                        <template #header>
+                            <el-button class="ml0" type="primary" circle size="small" icon="Plus" @click="addTask()"> </el-button>
+                            <span class="ml10">节点名称</span>
+                            <el-tooltip content="点击指定节点可进行拖拽排序" placement="top">
+                                <el-icon class="ml5">
+                                    <question-filled />
+                                </el-icon>
+                            </el-tooltip>
+                        </template>
+                        <template #default="scope">
+                            <el-input v-model="scope.row.name"> </el-input>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="userId" label="审核人员" min-width="150px" show-overflow-tooltip>
+                        <template #default="scope">
+                            <AccountSelectFormItem v-model="scope.row.userId" label="" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="60px">
+                        <template #default="scope">
+                            <el-link @click="deleteTask(scope.$index)" class="ml5" type="danger" icon="delete" plain></el-link>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-form>
+
+            <template #footer>
+                <div>
+                    <el-button @click="cancel()">取 消</el-button>
+                    <el-button type="primary" :loading="saveBtnLoading" @click="btnOk">确 定</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, watch, ref, nextTick } from 'vue';
+import { procdefApi } from './api';
+import { ElMessage } from 'element-plus';
+import DrawerHeader from '@/components/drawer-header/DrawerHeader.vue';
+import AccountSelectFormItem from '@/views/system/account/components/AccountSelectFormItem.vue';
+import Sortable from 'sortablejs';
+import { randomUuid } from '../../common/utils/string';
+import { ProcdefStatus } from './enums';
+import TagTreeCheck from '../ops/component/TagTreeCheck.vue';
+import { TagResourceTypeEnum } from '@/common/commonEnum';
+
+const props = defineProps({
+    data: {
+        type: [Boolean, Object],
+    },
+    title: {
+        type: String,
+    },
+});
+
+const visible = defineModel<boolean>('visible', { default: false });
+
+//定义事件
+const emit = defineEmits(['cancel', 'val-change']);
+
+const formRef: any = ref(null);
+const taskTableRef: any = ref(null);
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入流程名称',
+            trigger: ['change', 'blur'],
+        },
+    ],
+    defKey: [
+        {
+            required: true,
+            message: '请输入流程key',
+            trigger: ['change', 'blur'],
+        },
+    ],
+};
+
+const state = reactive({
+    tasks: [] as any,
+    form: {
+        id: null,
+        name: null,
+        defKey: null,
+        status: null,
+        remark: null,
+        // 流程的审批节点任务
+        tasks: '',
+        codePaths: [],
+    },
+    sortable: '' as any,
+});
+
+const { form, tasks } = toRefs(state);
+
+const { isFetching: saveBtnLoading, execute: saveFlowDefExec } = procdefApi.save.useApi(form);
+
+watch(props, (newValue: any) => {
+    if (newValue.data) {
+        state.form = { ...newValue.data };
+        state.form.codePaths = newValue.data.tags?.map((tag: any) => tag.codePath);
+        const tasks = JSON.parse(state.form.tasks);
+        tasks.forEach((t: any) => {
+            t.userId = Number.parseInt(t.userId);
+        });
+        state.tasks = tasks;
+    } else {
+        state.form = { status: ProcdefStatus.Enable.value } as any;
+        state.tasks = [];
+    }
+});
+
+const initSort = () => {
+    nextTick(() => {
+        const table = taskTableRef.value.$el.querySelector('table > tbody') as any;
+        state.sortable = Sortable.create(table, {
+            animation: 200,
+            //拖拽结束事件
+            onEnd: (evt) => {
+                const curRow = state.tasks.splice(evt.oldIndex, 1)[0];
+                state.tasks.splice(evt.newIndex, 0, curRow);
+            },
+        });
+    });
+};
+
+const addTask = () => {
+    state.tasks.push({ taskKey: randomUuid() });
+};
+
+const deleteTask = (idx: any) => {
+    state.tasks.splice(idx, 1);
+};
+
+const btnOk = async () => {
+    try {
+        await formRef.value.validate();
+    } catch (e: any) {
+        ElMessage.error('请正确填写信息');
+        return false;
+    }
+
+    const checkRes = checkTasks();
+    if (checkRes.err) {
+        ElMessage.error(checkRes.err);
+        return false;
+    }
+
+    state.form.tasks = JSON.stringify(checkRes.tasks);
+    await saveFlowDefExec();
+    ElMessage.success('操作成功');
+    emit('val-change', state.form);
+    //重置表单域
+    formRef.value.resetFields();
+    state.form = {} as any;
+};
+
+const checkTasks = () => {
+    if (state.tasks?.length == 0) {
+        return { err: '请完善审批节点任务' };
+    }
+
+    const tasks = [];
+    for (let i = 0; i < state.tasks.length; i++) {
+        const task = { ...state.tasks[i] };
+        if (!task.name || !task.userId) {
+            return { err: `请完善第${i + 1}个审批节点任务信息` };
+        }
+        // 转为字符串(方便后续万一需要调整啥的)
+        task.userId = `${task.userId}`;
+        if (!task.taskKey) {
+            task.taskKey = randomUuid();
+        }
+        tasks.push(task);
+    }
+
+    return { tasks: tasks };
+};
+
+const cancel = () => {
+    visible.value = false;
+    emit('cancel');
+};
+</script>
+<style lang="scss"></style>
--- a/mayfly_go_web/src/views/flow/ProcdefList.vue
+++ b/mayfly_go_web/src/views/flow/ProcdefList.vue
@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <page-table
+            ref="pageTableRef"
+            :page-api="procdefApi.list"
+            :search-items="searchItems"
+            v-model:query-form="query"
+            :show-selection="true"
+            v-model:selection-data="selectionData"
+            :columns="columns"
+        >
+            <template #tableHeader>
+                <el-button v-auth="perms.save" type="primary" icon="plus" @click="editFlowDef(false)">添加</el-button>
+                <el-button v-auth="perms.del" :disabled="state.selectionData.length < 1" @click="deleteProcdef()" type="danger" icon="delete">删除</el-button>
+            </template>
+
+            <template #tasks="{ data }">
+                <el-link @click="showProcdefTasks(data)" icon="view" type="primary" :underline="false"> </el-link>
+            </template>
+
+            <template #codePaths="{ data }">
+                <TagCodePath :path="data.tags?.map((tag: any) => tag.codePath)" />
+            </template>
+
+            <template #action="{ data }">
+                <el-button link v-if="actionBtns[perms.save]" @click="editFlowDef(data)" type="primary">编辑</el-button>
+            </template>
+        </page-table>
+
+        <el-dialog v-model="flowTasksDialog.visible" :title="flowTasksDialog.title">
+            <procdef-tasks :tasks="flowTasksDialog.tasks" />
+        </el-dialog>
+
+        <procdef-edit v-model:visible="flowDefEditor.visible" :title="flowDefEditor.title" v-model:data="flowDefEditor.data" @val-change="valChange()" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, reactive, onMounted, Ref } from 'vue';
+import { procdefApi } from './api';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn } from '@/components/pagetable';
+import { hasPerms } from '@/components/auth/auth';
+import { SearchItem } from '@/components/SearchForm';
+import ProcdefEdit from './ProcdefEdit.vue';
+import ProcdefTasks from './components/ProcdefTasks.vue';
+import { ProcdefStatus } from './enums';
+import TagCodePath from '../ops/component/TagCodePath.vue';
+
+const perms = {
+    save: 'flow:procdef:save',
+    del: 'flow:procdef:del',
+};
+
+const searchItems = [SearchItem.input('name', '名称'), SearchItem.input('defKey', 'key')];
+const columns = [
+    TableColumn.new('name', '名称'),
+    TableColumn.new('defKey', 'key'),
+    TableColumn.new('status', '状态').typeTag(ProcdefStatus),
+    TableColumn.new('remark', '备注'),
+    TableColumn.new('tasks', '审批节点').isSlot().alignCenter().setMinWidth(60),
+    TableColumn.new('codePaths', '关联资源').isSlot().setMinWidth('250px'),
+    TableColumn.new('creator', '创建账号'),
+    TableColumn.new('createTime', '创建时间').isTime(),
+];
+
+// 该用户拥有的的操作列按钮权限
+const actionBtns = hasPerms([perms.save, perms.del]);
+const actionColumn = TableColumn.new('action', '操作').isSlot().fixedRight().setMinWidth(160).noShowOverflowTooltip().alignCenter();
+
+const pageTableRef: Ref<any> = ref(null);
+const state = reactive({
+    /**
+     * 选中的数据
+     */
+    selectionData: [],
+    /**
+     * 查询条件
+     */
+    query: {
+        name: '',
+        pageNum: 1,
+        pageSize: 0,
+    },
+    flowDefEditor: {
+        title: '新建流程定义',
+        visible: false,
+        data: null as any,
+    },
+    flowTasksDialog: {
+        title: '',
+        visible: false,
+        tasks: '',
+    },
+});
+
+const { selectionData, query, flowDefEditor, flowTasksDialog } = toRefs(state);
+
+onMounted(() => {
+    if (Object.keys(actionBtns).length > 0) {
+        columns.push(actionColumn);
+    }
+});
+
+const search = async () => {
+    pageTableRef.value.search();
+};
+
+const showProcdefTasks = (procdef: any) => {
+    state.flowTasksDialog.tasks = procdef.tasks;
+    state.flowTasksDialog.title = procdef.name + '-审批节点';
+    state.flowTasksDialog.visible = true;
+};
+
+const editFlowDef = (data: any) => {
+    if (!data) {
+        state.flowDefEditor.data = null;
+        state.flowDefEditor.title = '新建流程定义';
+    } else {
+        state.flowDefEditor.data = data;
+        state.flowDefEditor.title = '编辑流程定义';
+    }
+    state.flowDefEditor.visible = true;
+};
+
+const valChange = () => {
+    state.flowDefEditor.visible = false;
+    search();
+};
+
+const deleteProcdef = async () => {
+    try {
+        await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(', ')}】的流程定义?`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        });
+        await procdefApi.del.request({ id: state.selectionData.map((x: any) => x.id).join(',') });
+        ElMessage.success('删除成功');
+        search();
+    } catch (err) {
+        //
+    }
+};
+</script>
+<style lang="scss"></style>
--- a/mayfly_go_web/src/views/flow/ProcinstDetail.vue
+++ b/mayfly_go_web/src/views/flow/ProcinstDetail.vue
@@ -0,0 +1,171 @@
+<template>
+    <div>
+        <el-drawer :title="props.title" v-model="visible" :before-close="cancel" size="40%" :close-on-click-modal="!props.instTaskId">
+            <template #header>
+                <DrawerHeader :header="title" :back="cancel" />
+            </template>
+
+            <div>
+                <el-divider content-position="left">流程信息</el-divider>
+                <el-descriptions :column="2" border>
+                    <el-descriptions-item label="流程名">{{ procinst.procdefName }}</el-descriptions-item>
+                    <el-descriptions-item label="业务">
+                        <enum-tag :enums="FlowBizType" :value="procinst.bizType"></enum-tag>
+                    </el-descriptions-item>
+
+                    <el-descriptions-item label="发起人">
+                        <AccountInfo :account-id="procinst.creatorId" :username="procinst.creator" />
+                        <!-- {{ procinst.creator }} -->
+                    </el-descriptions-item>
+                    <el-descriptions-item label="发起时间">{{ dateFormat(procinst.createTime) }}</el-descriptions-item>
+
+                    <div v-if="procinst.duration">
+                        <el-descriptions-item label="持续时间">{{ formatTime(procinst.duration) }}</el-descriptions-item>
+                        <el-descriptions-item label="结束时间">{{ dateFormat(procinst.endTime) }}</el-descriptions-item>
+                    </div>
+
+                    <el-descriptions-item label="流程状态">
+                        <enum-tag :enums="ProcinstStatus" :value="procinst.status"></enum-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="业务状态">
+                        <enum-tag :enums="ProcinstBizStatus" :value="procinst.bizStatus"></enum-tag>
+                    </el-descriptions-item>
+
+                    <el-descriptions-item label="备注">
+                        {{ procinst.remark }}
+                    </el-descriptions-item>
+                </el-descriptions>
+            </div>
+
+            <div>
+                <el-divider content-position="left">审批节点</el-divider>
+                <procdef-tasks :tasks="procinst?.procdef?.tasks" :procinst-tasks="procinst.procinstTasks" />
+            </div>
+
+            <div>
+                <el-divider content-position="left">业务信息</el-divider>
+                <component
+                    v-if="procinst.bizType"
+                    ref="keyValueRef"
+                    :is="bizComponents[procinst.bizType]"
+                    :biz-key="procinst.bizKey"
+                    :biz-form="procinst.bizForm"
+                >
+                </component>
+            </div>
+
+            <div v-if="props.instTaskId">
+                <el-divider content-position="left">审批表单</el-divider>
+                <el-form :model="form" label-width="auto">
+                    <el-form-item prop="status" label="结果" required>
+                        <el-select v-model="form.status" placeholder="请选择审批结果">
+                            <el-option :label="ProcinstTaskStatus.Pass.label" :value="ProcinstTaskStatus.Pass.value"> </el-option>
+                            <!-- <el-option :label="ProcinstTaskStatus.Back.label" :value="ProcinstTaskStatus.Back.value"> </el-option> -->
+                            <el-option :label="ProcinstTaskStatus.Reject.label" :value="ProcinstTaskStatus.Reject.value"> </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="remark" label="备注">
+                        <el-input v-model.trim="form.remark" placeholder="备注" type="textarea" clearable></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+
+            <template #footer v-if="props.instTaskId">
+                <div>
+                    <el-button @click="cancel()">取 消</el-button>
+                    <el-button type="primary" :loading="saveBtnLoading" @click="btnOk">确 定</el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, watch, defineAsyncComponent, shallowReactive } from 'vue';
+import { procinstApi } from './api';
+import { ElMessage } from 'element-plus';
+import DrawerHeader from '@/components/drawer-header/DrawerHeader.vue';
+import { FlowBizType, ProcinstBizStatus, ProcinstTaskStatus, ProcinstStatus } from './enums';
+import { dateFormat } from '@/common/utils/date';
+import ProcdefTasks from './components/ProcdefTasks.vue';
+import { formatTime } from '@/common/utils/format';
+import EnumTag from '@/components/enumtag/EnumTag.vue';
+import AccountInfo from '@/views/system/account/components/AccountInfo.vue';
+
+const DbSqlExecBiz = defineAsyncComponent(() => import('./flowbiz/DbSqlExecBiz.vue'));
+const RedisRunWriteCmdBiz = defineAsyncComponent(() => import('./flowbiz/RedisRunWriteCmdBiz.vue'));
+
+const props = defineProps({
+    procinstId: {
+        type: Number,
+    },
+    // 流程实例任务id（存在则展示审批相关信息）
+    instTaskId: {
+        type: Number,
+    },
+    title: {
+        type: String,
+    },
+});
+
+const visible = defineModel<boolean>('visible', { default: false });
+
+//定义事件
+const emit = defineEmits(['cancel', 'val-change']);
+
+// 业务组件
+const bizComponents = shallowReactive({
+    db_sql_exec_flow: DbSqlExecBiz,
+    redis_run_write_cmd_flow: RedisRunWriteCmdBiz,
+});
+
+const state = reactive({
+    procinst: {} as any,
+    tasks: [] as any,
+    form: {
+        status: ProcinstTaskStatus.Pass.value,
+        remark: '',
+    },
+    saveBtnLoading: false,
+    sortable: '' as any,
+});
+
+const { procinst, form, saveBtnLoading } = toRefs(state);
+
+watch(
+    () => props.procinstId,
+    async (newValue: any) => {
+        if (newValue) {
+            state.procinst = await procinstApi.detail.request({ id: newValue });
+        } else {
+            state.procinst = {};
+        }
+    }
+);
+
+const btnOk = async () => {
+    const status = state.form.status;
+    let api = procinstApi.completeTask;
+    if (status === ProcinstTaskStatus.Back.value) {
+        api = procinstApi.backTask;
+    } else if (status === ProcinstTaskStatus.Reject.value) {
+        api = procinstApi.rejectTask;
+    }
+
+    try {
+        state.saveBtnLoading = true;
+        await api.request({ id: props.instTaskId, remark: state.form.remark });
+        ElMessage.success('操作成功');
+        cancel();
+        emit('val-change');
+    } finally {
+        state.saveBtnLoading = false;
+    }
+};
+
+const cancel = () => {
+    visible.value = false;
+    emit('cancel');
+};
+</script>
+<style lang="scss"></style>
--- a/mayfly_go_web/src/views/flow/ProcinstList.vue
+++ b/mayfly_go_web/src/views/flow/ProcinstList.vue
@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <page-table
+            ref="pageTableRef"
+            :page-api="procinstApi.list"
+            :search-items="searchItems"
+            v-model:query-form="query"
+            v-model:selection-data="selectionData"
+            :columns="columns"
+        >
+            <template #tableHeader>
+                <!-- <el-button v-auth="perms.addAccount" type="primary" icon="plus" @click="editFlowDef(false)">添加</el-button> -->
+            </template>
+
+            <template #action="{ data }">
+                <el-button link @click="showProcinst(data)" type="primary">查看</el-button>
+
+                <el-popconfirm
+                    v-if="data.status == ProcinstStatus.Active.value || data.status == ProcinstStatus.Suspended.value"
+                    title="确认取消该流程?"
+                    width="160"
+                    @confirm="procinstCancel(data)"
+                >
+                    <template #reference>
+                        <el-button link type="warning">取消</el-button>
+                    </template>
+                </el-popconfirm>
+            </template>
+        </page-table>
+
+        <ProcinstDetail
+            v-model:visible="procinstDetail.visible"
+            :title="procinstDetail.title"
+            :procinst-id="procinstDetail.procinstId"
+            :inst-task-id="procinstDetail.instTaskId"
+            @val-change="valChange()"
+            @cancel="procinstDetail.procinstId = 0"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, reactive, Ref } from 'vue';
+import { procinstApi } from './api';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn } from '@/components/pagetable';
+import { SearchItem } from '@/components/SearchForm';
+import ProcinstDetail from './ProcinstDetail.vue';
+import { FlowBizType, ProcinstBizStatus, ProcinstStatus } from './enums';
+import { ElMessage } from 'element-plus';
+import { formatTime } from '@/common/utils/format';
+
+const searchItems = [
+    SearchItem.select('status', '流程状态').withEnum(ProcinstStatus),
+    SearchItem.select('bizType', '业务类型').withEnum(FlowBizType),
+    SearchItem.input('bizKey', '业务key'),
+];
+
+const columns = [
+    TableColumn.new('bizType', '业务').typeTag(FlowBizType),
+    TableColumn.new('remark', '备注'),
+    TableColumn.new('creator', '发起人'),
+    TableColumn.new('bizKey', '业务key'),
+    TableColumn.new('procdefName', '流程名'),
+    TableColumn.new('status', '流程状态').typeTag(ProcinstStatus),
+    TableColumn.new('bizStatus', '业务状态').typeTag(ProcinstBizStatus),
+    TableColumn.new('createTime', '发起时间').isTime(),
+    TableColumn.new('endTime', '结束时间').isTime(),
+    TableColumn.new('duration', '持续时间').setFormatFunc((data: any, prop: string) => {
+        const duration = data[prop];
+        if (!duration) {
+            return '';
+        }
+        return formatTime(duration);
+    }),
+    TableColumn.new('bizHandleRes', '业务处理结果'),
+    TableColumn.new('action', '操作').isSlot().fixedRight().setMinWidth(160).noShowOverflowTooltip().alignCenter(),
+];
+
+const pageTableRef: Ref<any> = ref(null);
+const state = reactive({
+    /**
+     * 选中的数据
+     */
+    selectionData: [],
+    /**
+     * 查询条件
+     */
+    query: {
+        status: null,
+        bizType: '',
+        pageNum: 1,
+        pageSize: 0,
+    },
+    procinstDetail: {
+        title: '查看流程',
+        visible: false,
+        procinstId: 0,
+        instTaskId: 0,
+    },
+});
+
+const { selectionData, query, procinstDetail } = toRefs(state);
+
+const search = async () => {
+    pageTableRef.value.search();
+};
+
+const procinstCancel = async (data: any) => {
+    await procinstApi.cancel.request({ id: data.id });
+    ElMessage.success('操作成功');
+    search();
+};
+
+const showProcinst = (data: any) => {
+    state.procinstDetail.procinstId = data.id;
+    state.procinstDetail.title = '流程查看';
+    state.procinstDetail.visible = true;
+};
+
+const valChange = () => {
+    state.procinstDetail.visible = false;
+    search();
+};
+</script>
+<style lang="scss"></style>
--- a/mayfly_go_web/src/views/flow/ProcinstTaskList.vue
+++ b/mayfly_go_web/src/views/flow/ProcinstTaskList.vue
@@ -0,0 +1,111 @@
+<template>
+    <div>
+        <page-table
+            ref="pageTableRef"
+            :page-api="procinstApi.tasks"
+            :search-items="searchItems"
+            v-model:query-form="query"
+            v-model:selection-data="selectionData"
+            :columns="columns"
+        >
+            <template #tableHeader>
+                <!-- <el-button v-auth="perms.addAccount" type="primary" icon="plus" @click="editFlowDef(false)">添加</el-button> -->
+            </template>
+
+            <template #action="{ data }">
+                <el-button link @click="showProcinst(data, false)" type="primary">查看</el-button>
+                <el-button v-if="data.status == ProcinstTaskStatus.Process.value" link @click="showProcinst(data, true)" type="primary">审核</el-button>
+            </template>
+        </page-table>
+
+        <ProcinstDetail
+            v-model:visible="procinstDetail.visible"
+            :title="procinstDetail.title"
+            :procinst-id="procinstDetail.procinstId"
+            :inst-task-id="procinstDetail.instTaskId"
+            @val-change="valChange()"
+            @cancel="procinstDetail.procinstId = 0"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRefs, reactive, Ref } from 'vue';
+import { procinstApi } from './api';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn } from '@/components/pagetable';
+import { SearchItem } from '@/components/SearchForm';
+import ProcinstDetail from './ProcinstDetail.vue';
+import { FlowBizType, ProcinstStatus, ProcinstTaskStatus } from './enums';
+import { formatTime } from '@/common/utils/format';
+
+const searchItems = [SearchItem.select('status', '任务状态').withEnum(ProcinstTaskStatus), SearchItem.select('bizType', '业务类型').withEnum(FlowBizType)];
+const columns = [
+    TableColumn.new('procinst.bizType', '业务').typeTag(FlowBizType),
+    TableColumn.new('procinst.remark', '备注'),
+    TableColumn.new('procinst.creator', '发起人'),
+    TableColumn.new('procinst.status', '流程状态').typeTag(ProcinstStatus),
+    TableColumn.new('status', '任务状态').typeTag(ProcinstTaskStatus),
+    TableColumn.new('procinst.bizKey', '业务key'),
+    TableColumn.new('procinst.procdefName', '流程名'),
+    TableColumn.new('taskName', '当前节点'),
+    TableColumn.new('procinst.createTime', '发起时间').isTime(),
+    TableColumn.new('createTime', '开始时间').isTime(),
+    TableColumn.new('endTime', '结束时间').isTime(),
+    TableColumn.new('duration', '持续时间').setFormatFunc((data: any, prop: string) => {
+        const duration = data[prop];
+        if (!duration) {
+            return '';
+        }
+        return formatTime(duration);
+    }),
+    TableColumn.new('action', '操作').isSlot().fixedRight().setMinWidth(160).noShowOverflowTooltip().alignCenter(),
+];
+
+const pageTableRef: Ref<any> = ref(null);
+const state = reactive({
+    /**
+     * 选中的数据
+     */
+    selectionData: [],
+    /**
+     * 查询条件
+     */
+    query: {
+        status: ProcinstTaskStatus.Process.value,
+        bizType: '',
+        pageNum: 1,
+        pageSize: 0,
+    },
+    procinstDetail: {
+        title: '查看流程',
+        visible: false,
+        procinstId: 0,
+        instTaskId: 0,
+    },
+});
+
+const { selectionData, query, procinstDetail } = toRefs(state);
+
+const search = async () => {
+    pageTableRef.value.search();
+};
+
+const showProcinst = (data: any, audit: boolean) => {
+    state.procinstDetail.procinstId = data.procinstId;
+    if (!audit) {
+        state.procinstDetail.instTaskId = 0;
+        state.procinstDetail.title = '流程查看';
+    } else {
+        state.procinstDetail.instTaskId = data.id;
+        state.procinstDetail.title = '流程审批';
+    }
+    state.procinstDetail.visible = true;
+};
+
+const valChange = () => {
+    state.procinstDetail.visible = false;
+    search();
+};
+</script>
+<style lang="scss"></style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
meilin.huang	05625bd8c1	feat: 1.8.3	2024-05-10 19:59:49 +08:00
meilin.huang	4afeac5fdd	refactor: 代码优化与数据库表列显示配置优化	2024-05-09 21:29:34 +08:00
meilin.huang	1d0e91f1af	refactor: 机器计划任务与流程定义关联至标签	2024-05-08 21:04:25 +08:00
Coder慌	cf5111a325	!118 修复空数组分隔异常 Merge pull request !118 from 蒋小小/N/A	2024-05-07 11:59:12 +00:00
meilin.huang	78957a8ebd	refactor: base.repo与app重构优化	2024-05-05 14:53:30 +08:00
meilin.huang	4ed892a656	feat: 文档更新与sqlite文件更新	2024-04-29 17:09:41 +08:00
meilin.huang	3486b07003	fix: 修复机器列表查询与放开vnc	2024-04-29 12:50:49 +08:00
meilin.huang	a5cd7caf19	refactor: base.repo与base.app精简优化	2024-04-29 12:29:56 +08:00
meilin.huang	f2c7ef78c0	refactor: 精简base.repo与base.app等	2024-04-28 23:45:57 +08:00
meilin.huang	653953ee76	feat: 机器新增命令过滤配置、首页功能完善（操作记录与快捷操作）	2024-04-27 01:35:21 +08:00
meilin.huang	a831614d5a	fix: sql脚本问题修复等	2024-04-23 11:35:45 +08:00
meilin.huang	ebe73e2f19	feat: 标签支持拖拽移动与机器支持执行命令查看	2024-04-21 19:35:58 +08:00
蒋小小	29fd5a25d2	修复空数组分隔异常 Signed-off-by: 蒋小小 <bwcx_jzy@163.com>	2024-04-20 17:33:19 +00:00
zongyangleo	44805ce580	!116 fix: 新版本问题修复 * fix: 新版本问题修复	2024-04-19 11:27:29 +00:00
meilin.huang	2a6d620830	fix: 问题修复	2024-04-18 20:50:14 +08:00
meilin.huang	01d3e1ad28	refactor: 数据库实例与凭证关联至标签&其他问题修复重构等	2024-04-17 21:28:28 +08:00
meilin.huang	f4162c38db	fix: 问题修复与redis密码迁移至凭证	2024-04-13 17:01:12 +08:00
zongyangleo	1a4626c24d	!115 fix: 新版本问题修复 * fix: 新版本问题修复	2024-04-12 14:39:08 +00:00
meilin.huang	d6eb9683d1	fix: 新版本问题修复	2024-04-12 20:30:28 +08:00
meilin.huang	e2b524dadb	feat: release1.8.0	2024-04-12 17:07:28 +08:00
zongyangleo	8998a21626	!114 feat：rdp优化，mssql迁移优化，term支持trzsz * fix: 合并代码 * refactor: rdp优化，mssql迁移优化，term支持trzsz	2024-04-12 07:53:42 +00:00
meilin.huang	abc015aec0	refactor: 数据库授权凭证迁移	2024-04-12 13:24:20 +08:00
meilin.huang	4ef8d27b1e	refactor: 授权凭证优化	2024-04-10 23:17:20 +08:00
meilin.huang	40b6e603fc	reafctor: 团队管理与授权凭证优化	2024-04-10 13:04:31 +08:00
meilin.huang	21498584b1	refactor: 初步提交全局授权凭证-资源多账号改造	2024-04-09 12:55:51 +08:00
meilin.huang	408bac09a1	refactor: 标签资源重构	2024-04-06 18:19:17 +08:00
zongyangleo	582d879a77	!112 feat: 机器管理支持ssh+rdp连接win服务器 * feat: rdp 文件管理 * feat: 机器管理支持ssh+rdp连接win服务器	2024-04-06 04:03:38 +00:00
meilin.huang	38ff5152e0	refactor: dbms优化	2024-03-29 21:40:26 +08:00
meilin.huang	d1d372e1bf	feat: 数据迁移新增实时日志&数据库游标遍历查询问题修复	2024-03-28 22:20:39 +08:00
Coder慌	5e4793433b	!111 refactor:获取表索引，默认过滤主键索引 Merge pull request !111 from zongyangleo/dev_0327_fix	2024-03-27 13:06:45 +00:00
zongyangleo	54ad19f97e	refactor:获取表索引，默认过滤主键索引	2024-03-27 08:26:12 +08:00
meilin.huang	fc166650b3	refactor: dbm重构等	2024-03-26 21:46:03 +08:00
zongyangleo	2acc295259	!110 feat: 支持各源数据库导出sql，数据库迁移部分bug修复 * feat: 各源数据库导出 * fix: 数据库迁移 bug修复	2024-03-26 09:05:28 +00:00
meilin.huang	4b3ed1310d	refactor: dbms	2024-03-21 20:28:24 +08:00
meilin.huang	b2cfd1517c	refactor: dbms与标签管理优化	2024-03-21 17:15:52 +08:00
zongyangleo	b13d27ccd6	!109 refactor：ddl生成方式重构，数据类型和长度重构，所有数据库迁移调试 * feat：同步sqlite全量sql * refactor：ddl生成方式重构，数据类型和长度重构，所有数据库迁移调试	2024-03-21 03:35:18 +00:00
meilin.huang	68e0088016	refactor: dbms优化	2024-03-18 12:25:40 +08:00
zongyangleo	bd1e83989d	!108 feat：支持不同源数据库迁移 * feat：支持不同源数据库迁移	2024-03-15 09:01:51 +00:00
meilin.huang	263dfa6be7	refactor: dbm包重构	2024-03-15 13:31:53 +08:00
meilin.huang	eb55f93864	refactor: dbm包重构	2024-03-11 20:04:20 +08:00
meilin.huang	8589105e44	feat: oracle支持服务名、数据库执行超时时间配置等	2024-03-07 17:26:11 +08:00
meilin.huang	986b187f0a	feat: v1.7.4	2024-03-04 20:33:04 +08:00
zongyangleo	008d34c453	!107 feat：支持修改表名、注释，oracle bug修复 * fix：修复oracle查询数据参数超过1000错误 ORA-01795 * feat：支持右键重命名表 * feat：支持修改表名、表注释	2024-03-04 11:32:04 +00:00
meilin.huang	49d3f988c9	feat: redis支持工单流程审批	2024-03-02 19:08:19 +08:00
zongyangleo	76475e807e	!106 feat：数据同步支持唯一键冲突策略 * refactor：sql同步 * fix: 表格右键导出菜单换行符修复 * feat：数据同步支持唯一键冲突策略	2024-03-01 04:03:03 +00:00
meilin.huang	f93231da61	feat: dbms新增支持工单流程审批	2024-02-29 22:12:50 +08:00
meilin.huang	bf75483a3c	refactor: 简化api层相关调用	2024-02-25 12:46:18 +08:00
meilin.huang	b56b0187cf	refactor: api层尽可能屏蔽gin框架相关代码	2024-02-24 16:30:29 +08:00
meilin.huang	7e7f02b502	refactor: 机器终端操作优化	2024-02-23 22:53:17 +08:00
meilin.huang	878985f7c5	refactor: 依赖版本升级等	2024-02-22 21:03:13 +08:00
meilin.huang	2133d9b737	fix: 终端操作col和row初始化问题修复	2024-02-18 18:42:25 +08:00
meilin.huang	d711a36749	feat: v1.7.3	2024-02-08 09:53:48 +08:00
meilin.huang	9dbf104ef1	refactor: 机器操作界面调整	2024-02-07 21:14:29 +08:00
zongyangleo	20eb06fb28	!101 feat: 新增机器操作菜单 * feat: 新增机器操作菜单	2024-02-07 06:37:59 +00:00
meilin.huang	9c20bdef39	Merge branch 'dev' of https://gitee.com/objs/mayfly-go into dev	2024-02-06 15:33:31 +08:00
zongyangleo	3fdd98a390	!99 feat: DBMS新增kingbaseES、vastbase，还有一些优化 * refactor: 重构机器列表展示 * fix：修复编辑表问题 * refactor: 优化下拉实例显示 * feat: DBMS新增kingbaseES(已测试postgres、oracle兼容模式) 、vastbase	2024-02-06 07:32:03 +00:00
meilin.huang	d4f456c0cf	Merge branch 'dev' of https://gitee.com/objs/mayfly-go into dev	2024-02-06 15:17:39 +08:00
kanzihuang	f2b6e15cf4	!100 定时清理数据库备份数据 * feat: 优化数据库 BINLOG 同步机制 * feat: 删除数据库实例前需删除关联的数据库备份与恢复任务 * refactor: 重构数据库备份与恢复模块 * feat: 定时清理数据库备份历史和本地 Binlog 文件 * feat: 压缩数据库备份文件	2024-02-06 07:16:56 +00:00
meilin.huang	6be0ea6aed	fix: dbms数据行编辑	2024-02-01 12:05:41 +08:00
meilin.huang	eee08be2cc	feat: 数据库支持编辑行数据	2024-01-31 20:41:41 +08:00
meilin.huang	252fc553f2	feat: v1.7.2	2024-01-31 12:53:27 +08:00
meilin.huang	ac2ceed3f9	refactor: code review	2024-01-30 21:56:49 +08:00
kanzihuang	3f828cc5b0	!96 删除数据库备份和恢复历史 * feat: 删除数据库备份历史 * refactor dbScheduler * feat: 从数据库备份历史中恢复数据库 * feat: 删除数据库恢复历史记录 * refactor dbScheuler	2024-01-30 13:12:43 +00:00
zongyangleo	fc1b9ef35d	!97 一些优化 * refactor: 重构表格分页组件，适配大数据量分页 * fix：定时任务修复 * feat: gaussdb单独提出来	2024-01-30 13:09:26 +00:00
meilin.huang	d0b71a1c40	refactor: dialect使用方式调整	2024-01-29 16:02:28 +08:00
meilin.huang	a743a6a05a	Merge branch 'master' into dev	2024-01-29 12:21:22 +08:00
zongyangleo	0e6b9713ce	!93 feat: DBMS支持mssql和一些功能优化 * feat: 表格+表格元数据缓存 * feat:跳板机支持多段跳 * fix: 所有数据库区分字段主键和自增 * feat: DBMS支持mssql * refactor: 去除无用的getter方法	2024-01-29 04:20:23 +00:00
meilin.huang	b9afbc764d	refactor: 去除无用的getter方法	2024-01-29 11:34:48 +08:00
meilin.huang	923e183a67	refactor: code review	2024-01-26 17:17:26 +08:00
meilin.huang	7e9a381641	refactor: 数据库meta使用注册方式，方便可插拔	2024-01-24 17:01:17 +08:00
zongyangleo	bed95254d0	!91 fix: oracle数据同步 bug * fix: oracle数据同步 bug	2024-01-24 08:29:16 +00:00
meilin.huang	e4d13f3377	refactor: 引入日志切割库、indexApi拆分等	2024-01-23 19:30:28 +08:00
Coder慌	d530365ef9	!90 fix: 依赖注入支持私有变量 Merge pull request !90 from kanzihuang/feat-db-bak	2024-01-23 09:02:37 +00:00
wanli	070d4ea104	fix: 依赖注入支持私有变量	2024-01-23 16:29:41 +08:00
zongyangleo	3fc86f0fae	!88 feat: dbms表支持右键菜单：删除表、编辑表、新建表、复制表 * feat: 支持复制表 * feat: dbms表支持右键菜单：删除表、编辑表、新建表	2024-01-23 04:08:02 +00:00
kanzihuang	3b77ab2727	!89 feat: 给数据库备份和恢复配置操作权限 * feat: 给数据库备份和恢复配置操作权限 * refactor: 数据库备份与恢复采用最新依赖注入机制	2024-01-23 04:06:08 +00:00
meilin.huang	76cb991282	fix: 数据同步更新时间展示等问题	2024-01-23 09:27:05 +08:00
meilin.huang	9efd20f1b9	refactor: ioc与系统初始化处理方式调整	2024-01-22 11:35:28 +08:00
kanzihuang	de5b9e46d3	!87 fix: 修复数据库备份与恢复问题 * feat: 修复数据库备份与恢复问题 * feat: 启用 BINLOG 支持全量备份和增量备份，未启用 BINLOG 仅支持全量备份 * feat: 数据库恢复后自动备份，避免数据丢失	2024-01-22 03:12:16 +00:00
meilin.huang	f27d3d200f	feat: 新增简易版ioc	2024-01-21 22:52:20 +08:00
meilin.huang	f4a64b96a9	feat: v1.7.1新增支持sqlite&oracle分页限制等问题修复	2024-01-19 21:33:37 +08:00
zongyangleo	9a59749763	!86 dbms支持sqlite和一些bug修复 * fix: 达梦数据库连接修复，以支持带特殊字符的密码和schema * fix: oracle bug修复 * feat: dbms支持sqlite * fix: dbms 修改字段名bug	2024-01-19 08:59:35 +00:00
kanzihuang	b017b902f8	!85 fix: 修复 BINLOG同步任务加载问题 * Merge branch 'dev' of gitee.com:dromara/mayfly-go into feat-db-bak * fix: 修复 BINLOG 同步任务加载问题	2024-01-19 00:40:44 +00:00
meilin.huang	7c53353c60	fix: sqlite数据问题时间类型问题修复等	2024-01-18 17:18:17 +08:00
meilin.huang	63f0615445	feat: v1.7.0	2024-01-17 17:02:15 +08:00
kanzihuang	94da6df33e	!84 fix: 修复数据库备份与恢复问题 * refactor dbScheduler * fix: 按团队名称检索团队 * feat: 创建数据库资源时支持全选数据库 * refactor dbScheduler * fix: 修复数据库备份与恢复问题	2024-01-17 08:37:22 +00:00
meilin.huang	cc3981d99c	fix: 数据库编辑导致标签关联删除修复、cron组件调整	2024-01-17 12:13:18 +08:00
meilin.huang	8332d9b354	feat: 新增cron组件、cron支持6位秒级别	2024-01-16 20:04:04 +08:00
meilin.huang	493925064c	feat: 机器定时删除终端操作记录	2024-01-15 20:51:41 +08:00
kanzihuang	c0232c4c75	fix: 修复数据库备份与恢复问题 (#85 ) * fix: 修复数据库备份与恢复问题 * fix: 修复数据库备份与恢复问题	2024-01-15 20:11:28 +08:00
zongyangleo	b873855b44	!82 feat: dbms支持oracle数据库 * fix：oracle bug修复 * feat: dbms支持oracle数据库	2024-01-15 11:55:59 +00:00
meilin.huang	9c524292f0	refactor: 数组比较方法优化等	2024-01-13 13:38:53 +08:00
meilin.huang	bfd346e65a	fix: 机器文件下载问题修复&dbm重构	2024-01-12 13:15:30 +08:00
meilin.huang	bc811cbd49	refactor: 数据同步编辑页优化等	2024-01-11 12:35:44 +08:00
kanzihuang	bbec3eca0d	feat: 实现数据库备份和恢复并发调度 (#84 )	2024-01-11 11:35:51 +08:00
meilin.huang	3857d674ba	refactor: 数据同步编辑页调整、echarts组件重构	2024-01-10 23:41:55 +08:00
meilin.huang	25b0ae4d2f	fix: model.FillBaseInfo遗漏调整完善等	2024-01-09 21:37:56 +08:00
meilin.huang	b7aa281611	refactor: code review	2024-01-09 17:31:21 +08:00
meilin.huang	3c89a285f5	feat: 数据库表格数据表头支持展示备注	2024-01-09 12:19:20 +08:00
Coder慌	d3d26c85c3	!81 fix: 数据同步相关bug修复 Merge pull request !81 from zongyangleo/dev_0109	2024-01-09 04:12:53 +00:00
刘宗洋	a764c4f974	fix: 数据同步相关bug修复	2024-01-09 10:35:13 +08:00
meilin.huang	af454f7d5d	refactor: 数据同步优化, base.App、base.Repo新增Save方法	2024-01-07 21:46:25 +08:00
meilin.huang	eea759e10e	refactor: code review	2024-01-06 22:36:50 +08:00
meilin.huang	e158422091	refactor: code review、数据库备份恢复支持ssh隧道操作	2024-01-05 22:16:38 +08:00
meilin.huang	5ada63d4a1	Merge branch 'dev' of https://gitee.com/objs/mayfly-go into dev	2024-01-05 20:51:50 +08:00
Coder慌	5ef35001cc	!80 fix: 字段映射大小写等问题 Merge pull request !80 from zongyangleo/dev_0105_table_sync_fix	2024-01-05 12:51:32 +00:00
kanzihuang	0be50f0995	feat: 新增数据库类型 mariadb, 分别为 mysql 和 mariadb 设置不同的数据库备份与恢复程序路径 (#81 )	2024-01-05 17:23:29 +08:00
刘宗洋	61e1b0ca70	fix: 字段映射大小写等问题	2024-01-05 14:43:51 +08:00
zongyangleo	85910bf440	!79 feat: 支持自定义数据定时同步 * fix: 达梦数据权限问题 * feat: 支持自定义数据定时同步	2024-01-05 05:31:32 +00:00
meilin.huang	7a7a7020b4	feat: 新增系统样式配置，支持改logo图标与标题	2024-01-05 12:09:12 +08:00
kanzihuang	ae3d2659aa	重构数据库备份与恢复模块 (#80 ) * fix: 保存 LastResult 时截断字符串过长部分，以避免数据库报错 * refactor: 新增 entity.DbTaskBase 和 persistence.dbTaskBase, 用于实现数据库备份和恢复任务处理相关部分 * fix: aeskey变更后，解密密码出现数组越界访问错误 * fix: 时间属性为零值时，保存到 mysql 数据库报错 * refactor db.infrastructure.service.scheduler * feat: 实现立即备份功能 * refactor db.infrastructure.service.db_instance * refactor: 从数据库中获取数据库备份目录、mysql文件路径等配置信息 * fix: 数据库备份和恢复问题 * fix: 修改 .gitignore 文件，忽略数据库备份目录和数据库程序目录	2024-01-05 08:55:34 +08:00
meilin.huang	76fd6675b5	refactor: code review	2023-12-29 16:48:15 +08:00
may-fly	664118a709	Merge pull request #78 from kanzihuang/feat-db-bak feat: 实现数据库备份与恢复	2023-12-29 08:57:57 +08:00
kanzihuang	e344722794	feat: 实现数据库备份与恢复	2023-12-29 08:30:10 +08:00
meilin.huang	1a7d425f60	refactor: 动态路由重构	2023-12-28 17:21:33 +08:00
meilin.huang	a0582192bf	refactor: code review	2023-12-27 19:55:36 +08:00
meilin.huang	4ac9f02d6a	refactor: code review	2023-12-26 22:31:51 +08:00
meilin.huang	7e0febef8f	refactor: 页面小优化	2023-12-25 17:43:42 +08:00
meilin.huang	94ed4b77d6	refactor: 单元格编辑优化	2023-12-22 17:04:06 +08:00
meilin.huang	2b419bca11	refactor: 数据库表支持editor编辑调整	2023-12-22 12:29:46 +08:00
meilin.huang	54a0f0b3c7	refactor: 数据库虚拟table卡顿优化	2023-12-22 00:47:01 +08:00
Coder慌	86bccc3b3d	!78 feat: 表格支持编辑json、xml数据 Merge pull request !78 from zongyangleo/dev_1221	2023-12-21 10:55:30 +00:00
刘宗洋	0e601b5033	feat: 表格支持编辑json、xml数据	2023-12-21 15:03:11 +08:00
meilin.huang	85d745fcee	feat: 数据库表单元格编辑封装	2023-12-21 13:07:02 +08:00
meilin.huang	550631c03b	refactor: 达梦ssh连接调整	2023-12-20 23:01:51 +08:00
Coder慌	f29a1560aa	!77 fix: 达梦支持ssh Merge pull request !77 from zongyangleo/dev_1220	2023-12-20 13:25:45 +00:00
刘宗洋	8c4c41cf0b	fix: 达梦支持ssh	2023-12-20 20:37:29 +08:00
meilin.huang	f5c90277b1	feat: 新增数据库版本查看	2023-12-20 17:29:16 +08:00
meilin.huang	2ae0cd7ab4	refactor: 数据库表操作界面优化	2023-12-19 19:23:33 +08:00
meilin.huang	1f6c14ee2f	refactor: 系统模块角色分配相关优化	2023-12-18 22:39:32 +08:00
meilin.huang	574d27f6da	refactor: PageTable优化	2023-12-17 14:38:53 +08:00
meilin.huang	7d62841783	refactor: rsa存储方式调整等	2023-12-17 01:43:38 +08:00
Coder慌	970d74bd70	!75 refactor: 表格日期组件大小调整 Merge pull request !75 from zongyangleo/dev_1216	2023-12-16 16:46:00 +00:00
刘宗洋	0c797f8da9	refactor: 表格日期组件大小调整	2023-12-16 23:10:38 +08:00
meilin.huang	68f8603c75	refactor: PageTable优化	2023-12-16 17:41:15 +08:00
meilin.huang	06bce33c48	refactor: 样式调整	2023-12-15 17:33:22 +08:00
Coder慌	f8837f28c3	!74 fix: 数据库查询结果日期格式化 Merge pull request !74 from zongyangleo/dev_1215_fix	2023-12-15 07:27:47 +00:00
刘宗洋	61aed08dde	fix: 数据库查询结果日期格式化	2023-12-15 15:21:54 +08:00
meilin.huang	a5a813f95f	refactor: sql执行列返回字段类型	2023-12-14 21:27:11 +08:00
meilin.huang	18cf2e54c4	refactor: 样式调整	2023-12-14 13:05:21 +08:00
Coder慌	5c72b1de57	!73 fix: 达梦ddl相关 Merge pull request !73 from zongyangleo/dev_1214	2023-12-14 01:30:10 +00:00
刘宗洋	6e44e90d67	fix: 达梦数据库ddl	2023-12-14 08:24:14 +08:00
Coder慌	0e699ba20e	!71 fix: 达梦数据库操作bug Merge pull request !71 from zongyangleo/dev_1213_1	2023-12-13 11:39:42 +00:00
刘宗洋	cf24c2671f	fix: 达梦数据库操作bug	2023-12-13 18:39:44 +08:00
meilin.huang	d3b99ec88d	Merge branch 'dev' of https://gitee.com/objs/mayfly-go into dev	2023-12-13 17:36:50 +08:00
meilin.huang	0b5ab090a4	refactor: 报错代码调整	2023-12-13 17:32:17 +08:00
Coder慌	454698286c	!70 fix: 达梦数据库大小写敏感问题 Merge pull request !70 from zongyangleo/dev_1213	2023-12-13 09:31:14 +00:00
刘宗洋	14e0aadbba	fix: 达梦数据库操作bug	2023-12-13 17:26:53 +08:00
meilin.huang	73986a834c	fix: 删除机器、数据库时关联的标签未删除	2023-12-13 14:01:13 +08:00