From ead3b0d0d85d76b0f77ecb4bc1438a58957f3805 Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Wed, 13 Sep 2023 19:54:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=95=8C=E9=9D=A2=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=9A=97=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/package.json                    |   4 +-
 .../src/components/monaco/MonacoEditor.vue    |   2 +-
 .../src/components/pagetable/PageTable.vue    |   8 +-
 .../components/terminal/TerminalDialog.vue    |  12 +-
 mayfly_go_web/src/main.ts                     |   1 +
 mayfly_go_web/src/store/themeConfig.ts        |   6 +-
 mayfly_go_web/src/theme/app.scss              |  49 +-
 mayfly_go_web/src/theme/base.scss             |   1 -
 mayfly_go_web/src/theme/common/var.scss       | 129 ---
 mayfly_go_web/src/theme/dark.scss             |  27 +
 mayfly_go_web/src/theme/element.scss          | 979 +++---------------
 mayfly_go_web/src/theme/index.scss            |   1 +
 mayfly_go_web/src/theme/loading.scss          |   2 +-
 mayfly_go_web/src/theme/media/scrollbar.scss  |   6 +-
 .../src/theme/mixins/element-mixins.scss      |  34 -
 mayfly_go_web/src/theme/mixins/function.scss  |   5 -
 .../theme/mixins/{mixins.scss => index.scss}  |  14 +-
 mayfly_go_web/src/types/pinia.d.ts            |   9 +-
 mayfly_go_web/src/views/home/Home.vue         |  22 +-
 .../views/layout/component/columnsAside.vue   |  19 +-
 mayfly_go_web/src/views/layout/logo/index.vue |   8 +-
 .../views/layout/navBars/breadcrumb/index.vue |   3 +-
 .../layout/navBars/breadcrumb/setings.vue     | 219 ++--
 .../views/layout/navBars/breadcrumb/user.vue  |  34 +-
 .../layout/navBars/breadcrumb/userNews.vue    |   8 +-
 .../layout/navBars/tagsView/tagsView.vue      |  52 +-
 mayfly_go_web/src/views/login/index.vue       |   4 +-
 .../src/views/ops/component/TagTree.vue       |  10 +-
 mayfly_go_web/src/views/ops/db/SqlExec.vue    |  11 +-
 .../src/views/ops/db/component/tab/Query.vue  |   2 +-
 .../src/views/ops/machine/ScriptManage.vue    |   2 -
 .../views/ops/machine/file/MachineFile.vue    |   2 +-
 .../src/views/ops/mongo/MongoDataOp.vue       |  16 +-
 .../src/views/ops/redis/DataOperation.vue     |  12 +-
 .../src/views/ops/redis/FormatViewer.vue      |   2 +-
 mayfly_go_web/src/views/personal/index.vue    |   8 +-
 mayfly_go_web/yarn.lock                       |  16 +-
 server/config.yml.example                     |   2 +-
 38 files changed, 502 insertions(+), 1239 deletions(-)
 delete mode 100644 mayfly_go_web/src/theme/common/var.scss
 create mode 100644 mayfly_go_web/src/theme/dark.scss
 delete mode 100644 mayfly_go_web/src/theme/mixins/element-mixins.scss
 delete mode 100644 mayfly_go_web/src/theme/mixins/function.scss
 rename mayfly_go_web/src/theme/mixins/{mixins.scss => index.scss} (78%)

diff --git a/mayfly_go_web/package.json b/mayfly_go_web/package.json
index 9721ee52..040f39b5 100644
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -15,11 +15,11 @@
     "countup.js": "^2.7.0",
     "cropperjs": "^1.5.11",
     "echarts": "^5.4.0",
-    "element-plus": "^2.3.8",
+    "element-plus": "^2.3.12",
     "jsencrypt": "^3.3.1",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "monaco-editor": "^0.41.0",
+    "monaco-editor": "^0.43.0",
     "monaco-sql-languages": "^0.11.0",
     "monaco-themes": "^0.4.4",
     "nprogress": "^0.2.0",
diff --git a/mayfly_go_web/src/components/monaco/MonacoEditor.vue b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
index 147ed959..0b1bc7f2 100644
--- a/mayfly_go_web/src/components/monaco/MonacoEditor.vue
+++ b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="monaco-editor" style="border: 1px solid #ccc">
+    <div class="monaco-editor" style="border: 1px solid var(--el-border-color-light, #ebeef5)">
         <div class="monaco-editor-content" ref="monacoTextarea" :style="{ height: height }"></div>
         <el-select v-if="canChangeMode" class="code-mode-select" v-model="languageMode" @change="changeLanguage">
             <el-option v-for="mode in languageArr" :key="mode.value" :label="mode.label" :value="mode.value"> </el-option>
diff --git a/mayfly_go_web/src/components/pagetable/PageTable.vue b/mayfly_go_web/src/components/pagetable/PageTable.vue
index 3332c449..bbf8091d 100644
--- a/mayfly_go_web/src/components/pagetable/PageTable.vue
+++ b/mayfly_go_web/src/components/pagetable/PageTable.vue
@@ -145,13 +145,7 @@
                                 width="600px"
                             >
                                 <template #default>
-                                    <el-input
-                                        input-style="color: black;"
-                                        :autosize="{ minRows: 3, maxRows: 15 }"
-                                        disabled
-                                        v-model="formatVal"
-                                        type="textarea"
-                                    />
+                                    <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
                                 </template>
                                 <template #reference>
                                     <el-link
diff --git a/mayfly_go_web/src/components/terminal/TerminalDialog.vue b/mayfly_go_web/src/components/terminal/TerminalDialog.vue
index a3df8f61..64f5ab55 100644
--- a/mayfly_go_web/src/components/terminal/TerminalDialog.vue
+++ b/mayfly_go_web/src/components/terminal/TerminalDialog.vue
@@ -288,18 +288,18 @@ defineExpose({
     }
 
     .terminal-status-error {
-        box-shadow: 0 3px 4px var(--color-danger);
-        border-color: var(--color-danger);
+        box-shadow: 0 3px 4px var(--el-color-danger);
+        border-color: var(--el-color-danger);
     }
 
     .terminal-status-no-connect {
-        box-shadow: 0 3px 4px var(--color-warning);
-        border-color: var(--color-warning);
+        box-shadow: 0 3px 4px var(--el-color-warning);
+        border-color: var(--el-color-warning);
     }
 
     .terminal-status-success {
-        box-shadow: 0 3px 4px var(--color-success);
-        border-color: var(--color-success);
+        box-shadow: 0 3px 4px var(--el-color-success);
+        border-color: var(--el-color-success);
     }
 
     .el-card__body {
diff --git a/mayfly_go_web/src/main.ts b/mayfly_go_web/src/main.ts
index abcf1a7e..4c064598 100644
--- a/mayfly_go_web/src/main.ts
+++ b/mayfly_go_web/src/main.ts
@@ -9,6 +9,7 @@ import { registElSvgIcon } from '@/common/utils/svgIcons';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import { ElMessage } from 'element-plus';
 
diff --git a/mayfly_go_web/src/store/themeConfig.ts b/mayfly_go_web/src/store/themeConfig.ts
index 80011c84..997e0db3 100644
--- a/mayfly_go_web/src/store/themeConfig.ts
+++ b/mayfly_go_web/src/store/themeConfig.ts
@@ -24,13 +24,13 @@ export const useThemeConfig = defineStore('themeConfig', {
             // 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             topBar: '#ffffff',
             // 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-            menuBar: '#545c64',
+            menuBar: '#FFFFFF',
             // 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             columnsMenuBar: '#545c64',
             // 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             topBarColor: '#606266',
             // 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
-            menuBarColor: '#eaeaea',
+            menuBarColor: '#606266',
             // 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
             columnsMenuBarColor: '#e6e6e6',
             // 是否开启顶栏背景颜色渐变
@@ -81,6 +81,8 @@ export const useThemeConfig = defineStore('themeConfig', {
             isSortableTagsView: true,
             // 是否开启 Footer 底部版权信息
             isFooter: false,
+            // 是否暗模式
+            isDark: false,
             // 是否开启灰色模式
             isGrayscale: false,
             // 是否开启色弱模式
diff --git a/mayfly_go_web/src/theme/app.scss b/mayfly_go_web/src/theme/app.scss
index ad237bb5..3a1b8256 100644
--- a/mayfly_go_web/src/theme/app.scss
+++ b/mayfly_go_web/src/theme/app.scss
@@ -7,6 +7,23 @@
     outline: none !important;
 }
 
+:root {
+	--color-white: #ffffff;
+	--bg-main-color: #f8f8f8;
+	--bg-color: #f5f5ff;
+	--border-color-light: #f1f2f3;
+	--el-color-primary-lighter: #ecf5ff;
+	--color-success-lighter: #f0f9eb;
+	--color-warning-lighter: #fdf6ec;
+	--color-danger-lighter: #fef0f0;
+	--color-dark-hover: #0000001a;
+	--color-menu-hover: rgba(0, 0, 0, 0.2);
+	--color-user-hover: rgba(0, 0, 0, 0.04);
+	--color-seting-main: #e9eef3;
+	--color-seting-aside: #d3dce6;
+	--color-seting-header: #b3c0d1;
+}
+
 html,
 body,
 #app {
@@ -18,7 +35,7 @@ body,
     font-weight: 450;
     -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: transparent;
-    background-color: #f8f8f8;
+    background-color: var(--bg-main-color);
     font-size: 14px;
     overflow: hidden;
     position: relative;
@@ -53,7 +70,7 @@ body,
         padding: 0 !important;
         overflow: hidden;
         width: 100%;
-        background-color: #f8f8f8;
+        background-color: var(--bg-main-color);
     }
 
     .el-scrollbar {
@@ -65,11 +82,11 @@ body,
         width: 100%;
         height: 100%;
         border-radius: 4px;
-        border: 1px solid #ebeef5;
+        border: 1px solid var(--el-border-color-light, #ebeef5);
     }
 
     .layout-el-aside-br-color {
-        border-right: 1px solid rgb(238, 238, 238);
+        border-right: 1px solid var(--el-border-color-light, #ebeef5);
     }
 
     .layout-aside-width-default {
@@ -116,7 +133,7 @@ body,
         display: flex;
         align-items: center;
         margin-bottom: 0 !important;
-        border-bottom: 1px solid rgb(230, 230, 230);
+        border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
     }
 
     .el-divider {
@@ -128,7 +145,7 @@ body,
 ------------------------------- */
 #nprogress {
     .bar {
-        background: var(--color-primary) !important;
+        background: var(--el-color-primary) !important;
         z-index: 9999999 !important;
     }
 }
@@ -195,23 +212,23 @@ body,
 /* 颜色值
 ------------------------------- */
 .color-primary {
-    color: var(--color-primary);
+    color: var(--el-color-primary);
 }
 
 .color-success {
-    color: var(--color-success);
+    color: var(--el-color-success);
 }
 
 .color-warning {
-    color: var(--color-warning);
+    color: var(--el-color-warning);
 }
 
 .color-danger {
-    color: var(--color-danger);
+    color: var(--el-color-danger);
 }
 
 .color-info {
-    color: var(--color-info);
+    color: var(--el-color-info);
 }
 
 /* 字体大小全局样式
@@ -262,17 +279,17 @@ body,
 ::-webkit-scrollbar {
     width: 4px;
     height: 8px;
-    background-color: #F5F5F5;
+    background-color: var(--el-border-color-light, #ebeef5);
 }
 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    background-color: #F5F5F5;
+    background-color: var(--el-border-color-light, #ebeef5);
 }
 
 ::-webkit-scrollbar-thumb {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-    background-color: #F5F5F5;
+    background-color: var(--el-border-color-light, #ebeef5);
 }
 
 .el-menu .fa {
@@ -318,10 +335,8 @@ body,
 .toolbar {
     width: 100%;
     padding: 6px;
-    background-color: #ffffff;
     overflow: hidden;
     line-height: 32px;
-    border: 1px solid #e6ebf5;
 }
 
 .fl {
@@ -355,5 +370,5 @@ body,
     transition: color 0.3s;
 }
 .pointer-icon:hover {
-    color: var(--color-primary); /* 鼠标移动到图标时的颜色 */
+    color: var(--el-color-primary); /* 鼠标移动到图标时的颜色 */
 }
\ No newline at end of file
diff --git a/mayfly_go_web/src/theme/base.scss b/mayfly_go_web/src/theme/base.scss
index ed9216fa..62bc3fc2 100644
--- a/mayfly_go_web/src/theme/base.scss
+++ b/mayfly_go_web/src/theme/base.scss
@@ -1,2 +1 @@
 @import 'common/transition.scss';
-@import 'common/var.scss';
diff --git a/mayfly_go_web/src/theme/common/var.scss b/mayfly_go_web/src/theme/common/var.scss
deleted file mode 100644
index 549e061e..00000000
--- a/mayfly_go_web/src/theme/common/var.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
-* scss 怎么动态创建变量
-* 本来想用 @function，@for 好像不可以动态创建
-* 2020.12.19 lyt 记录
-**/
-
-/* 定义初始颜色
-------------------------------- */
-$--color-primary: #409eff !default;
-$--color-whites: #ffffff !default;
-$--color-blacks: #000000 !default;
-$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
-$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
-$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
-$--color-primary-light-4: mix($--color-whites, $--color-primary, 40%) !default;
-$--color-primary-light-5: mix($--color-whites, $--color-primary, 50%) !default;
-$--color-primary-light-6: mix($--color-whites, $--color-primary, 60%) !default;
-$--color-primary-light-7: mix($--color-whites, $--color-primary, 70%) !default;
-$--color-primary-light-8: mix($--color-whites, $--color-primary, 80%) !default;
-$--color-primary-light-9: mix($--color-whites, $--color-primary, 90%) !default;
-$--color-success: #67c23a !default;
-$--color-success-light-1: mix($--color-whites, $--color-success, 10%) !default;
-$--color-success-light-2: mix($--color-whites, $--color-success, 20%) !default;
-$--color-success-light-3: mix($--color-whites, $--color-success, 30%) !default;
-$--color-success-light-4: mix($--color-whites, $--color-success, 40%) !default;
-$--color-success-light-5: mix($--color-whites, $--color-success, 50%) !default;
-$--color-success-light-6: mix($--color-whites, $--color-success, 60%) !default;
-$--color-success-light-7: mix($--color-whites, $--color-success, 70%) !default;
-$--color-success-light-8: mix($--color-whites, $--color-success, 80%) !default;
-$--color-success-light-9: mix($--color-whites, $--color-success, 90%) !default;
-$--color-info: #909399 !default;
-$--color-info-light-1: mix($--color-whites, $--color-info, 10%) !default;
-$--color-info-light-2: mix($--color-whites, $--color-info, 20%) !default;
-$--color-info-light-3: mix($--color-whites, $--color-info, 30%) !default;
-$--color-info-light-4: mix($--color-whites, $--color-info, 40%) !default;
-$--color-info-light-5: mix($--color-whites, $--color-info, 50%) !default;
-$--color-info-light-6: mix($--color-whites, $--color-info, 60%) !default;
-$--color-info-light-7: mix($--color-whites, $--color-info, 70%) !default;
-$--color-info-light-8: mix($--color-whites, $--color-info, 80%) !default;
-$--color-info-light-9: mix($--color-whites, $--color-info, 90%) !default;
-$--color-warning: #e6a23c !default;
-$--color-warning-light-1: mix($--color-whites, $--color-warning, 10%) !default;
-$--color-warning-light-2: mix($--color-whites, $--color-warning, 20%) !default;
-$--color-warning-light-3: mix($--color-whites, $--color-warning, 30%) !default;
-$--color-warning-light-4: mix($--color-whites, $--color-warning, 40%) !default;
-$--color-warning-light-5: mix($--color-whites, $--color-warning, 50%) !default;
-$--color-warning-light-6: mix($--color-whites, $--color-warning, 60%) !default;
-$--color-warning-light-7: mix($--color-whites, $--color-warning, 70%) !default;
-$--color-warning-light-8: mix($--color-whites, $--color-warning, 80%) !default;
-$--color-warning-light-9: mix($--color-whites, $--color-warning, 90%) !default;
-$--color-danger: #f56c6c !default;
-$--color-danger-light-1: mix($--color-whites, $--color-danger, 10%) !default;
-$--color-danger-light-2: mix($--color-whites, $--color-danger, 20%) !default;
-$--color-danger-light-3: mix($--color-whites, $--color-danger, 30%) !default;
-$--color-danger-light-4: mix($--color-whites, $--color-danger, 40%) !default;
-$--color-danger-light-5: mix($--color-whites, $--color-danger, 50%) !default;
-$--color-danger-light-6: mix($--color-whites, $--color-danger, 60%) !default;
-$--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default;
-$--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
-$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
-$--bg-topBar: #ffffff;
-$--bg-menuBar: #545c64;
-$--bg-columnsMenuBar: #545c64;
-$--bg-topBarColor: #606266;
-$--bg-menuBarColor: #eaeaea;
-$--bg-columnsMenuBarColor: #e6e6e6;
-
-/* 赋值给:root
-------------------------------- */
-:root {
-	--color-primary: #{$--color-primary};
-	--color-whites: #{$--color-whites};
-	--color-blacks: #{$--color-blacks};
-	--color-primary-light-1: #{$--color-primary-light-1};
-	--color-primary-light-2: #{$--color-primary-light-2};
-	--color-primary-light-3: #{$--color-primary-light-3};
-	--color-primary-light-4: #{$--color-primary-light-4};
-	--color-primary-light-5: #{$--color-primary-light-5};
-	--color-primary-light-6: #{$--color-primary-light-6};
-	--color-primary-light-7: #{$--color-primary-light-7};
-	--color-primary-light-8: #{$--color-primary-light-8};
-	--color-primary-light-9: #{$--color-primary-light-9};
-	--color-success: #{$--color-success};
-	--color-success-light-1: #{$--color-success-light-1};
-	--color-success-light-2: #{$--color-success-light-2};
-	--color-success-light-3: #{$--color-success-light-3};
-	--color-success-light-4: #{$--color-success-light-4};
-	--color-success-light-5: #{$--color-success-light-5};
-	--color-success-light-6: #{$--color-success-light-6};
-	--color-success-light-7: #{$--color-success-light-7};
-	--color-success-light-8: #{$--color-success-light-8};
-	--color-success-light-9: #{$--color-success-light-9};
-	--color-info: #{$--color-info};
-	--color-info-light-1: #{$--color-info-light-1};
-	--color-info-light-2: #{$--color-info-light-2};
-	--color-info-light-3: #{$--color-info-light-3};
-	--color-info-light-4: #{$--color-info-light-4};
-	--color-info-light-5: #{$--color-info-light-5};
-	--color-info-light-6: #{$--color-info-light-6};
-	--color-info-light-7: #{$--color-info-light-7};
-	--color-info-light-8: #{$--color-info-light-8};
-	--color-info-light-9: #{$--color-info-light-9};
-	--color-warning: #{$--color-warning};
-	--color-warning-light-1: #{$--color-warning-light-1};
-	--color-warning-light-2: #{$--color-warning-light-2};
-	--color-warning-light-3: #{$--color-warning-light-3};
-	--color-warning-light-4: #{$--color-warning-light-4};
-	--color-warning-light-5: #{$--color-warning-light-5};
-	--color-warning-light-6: #{$--color-warning-light-6};
-	--color-warning-light-7: #{$--color-warning-light-7};
-	--color-warning-light-8: #{$--color-warning-light-8};
-	--color-warning-light-9: #{$--color-warning-light-9};
-	--color-danger: #{$--color-danger};
-	--color-danger-light-1: #{$--color-danger-light-1};
-	--color-danger-light-2: #{$--color-danger-light-2};
-	--color-danger-light-3: #{$--color-danger-light-3};
-	--color-danger-light-4: #{$--color-danger-light-4};
-	--color-danger-light-5: #{$--color-danger-light-5};
-	--color-danger-light-6: #{$--color-danger-light-6};
-	--color-danger-light-7: #{$--color-danger-light-7};
-	--color-danger-light-8: #{$--color-danger-light-8};
-	--color-danger-light-9: #{$--color-danger-light-9};
-	--bg-topBar: #{$--bg-topBar};
-	--bg-menuBar: #{$--bg-menuBar};
-	--bg-columnsMenuBar: #{$--bg-columnsMenuBar};
-	--bg-topBarColor: #{$--bg-topBarColor};
-	--bg-menuBarColor: #{$--bg-menuBarColor};
-	--bg-columnsMenuBarColor: #{$--bg-columnsMenuBarColor};
-}
diff --git a/mayfly_go_web/src/theme/dark.scss b/mayfly_go_web/src/theme/dark.scss
new file mode 100644
index 00000000..9bf3d336
--- /dev/null
+++ b/mayfly_go_web/src/theme/dark.scss
@@ -0,0 +1,27 @@
+html.dark {
+    // 变量(自定义时，只需修改这里的值)
+	--next-bg-main: #1f1f1f;
+	--next-color-white: #ffffff;
+	--next-color-disabled: #191919;
+	--next-color-bar: #dadada;
+	--next-color-primary: #303030;
+	--next-border-color: #424242;
+	--next-border-black: #333333;
+	--next-border-columns: #2a2a2a;
+	--next-color-seting: #505050;
+	--next-text-color-regular: #9b9da1;
+	--next-text-color-placeholder: #7a7a7a;
+	--next-color-hover: #3c3c3c;
+	--next-color-hover-rgba: rgba(0, 0, 0, 0.3);
+
+    /* 自定义深色背景颜色 */
+    // root
+	--bg-main-color: var(--next-bg-main) !important;
+	--bg-topBar: var(--next-color-disabled) !important;
+	--bg-topBarColor: var(--next-color-bar) !important;
+	--bg-menuBar: var(--next-color-disabled) !important;
+	--bg-menuBarColor: var(--next-color-bar) !important;
+	--bg-menuBarActiveColor: var(--next-color-hover-rgba) !important;
+	--bg-columnsMenuBar: var(--next-color-disabled) !important;
+	--bg-columnsMenuBarColor: var(--next-color-bar) !important;
+  }
\ No newline at end of file
diff --git a/mayfly_go_web/src/theme/element.scss b/mayfly_go_web/src/theme/element.scss
index b6431d3f..ae35661f 100644
--- a/mayfly_go_web/src/theme/element.scss
+++ b/mayfly_go_web/src/theme/element.scss
@@ -1,141 +1,13 @@
-@import 'mixins/function.scss';
-@import 'mixins/element-mixins.scss';
-@import 'mixins/mixins.scss';
+@import 'mixins/index.scss';
 
 /* Button 按钮
 ------------------------------- */
-// text
-.el-button--text {
-	color: set-color(primary);
-	&:focus,
-	&:hover {
-		color: set-color(primary-light-3);
-	}
-}
-.el-button--text:active {
-	color: set-color(primary-light-3);
-}
-// default
-.el-button--default:hover,
-.el-button--default:focus {
-	@include Button(primary, primary-light-8, primary-light-6);
-}
-.el-button--default.is-plain:hover,
-.el-button--default.is-plain:focus {
-	@include Button(primary, whites, primary-light-1);
-}
-.el-button--default:active {
-	@include Button(primary, whites, primary-light-1);
-}
-// primary
-.el-button--primary {
-	@include Button(whites, primary, primary);
-	&:hover,
-	&:focus {
-		@include Button(whites, primary-light-3, primary-light-3);
-	}
-}
-.el-button--primary.is-plain {
-	@include Button(primary, primary-light-8, primary-light-6);
-	&:hover,
-	&:focus {
-		@include Button(whites, primary, primary);
-	}
-}
-.el-button--primary.is-disabled,
-.el-button--primary.is-disabled:active,
-.el-button--primary.is-disabled:focus,
-.el-button--primary.is-disabled:hover {
-	@include Button(whites, primary-light-7, primary-light-7);
-}
-.el-button--primary.is-active,
-.el-button--primary:active {
-	@include Button(whites, primary, primary);
-}
-// success
-.el-button--success {
-	@include Button(whites, success, success);
-	&:hover,
-	&:focus {
-		@include Button(whites, success-light-3, success-light-3);
-	}
-}
-.el-button--success.is-plain {
-	@include Button(success, success-light-8, success-light-6);
-	&:hover,
-	&:focus {
-		@include Button(whites, success, success);
-	}
-}
-.el-button--success.is-active,
-.el-button--success:active {
-	@include Button(whites, success, success);
-}
-// info
-.el-button--info {
-	@include Button(whites, info, info);
-	&:hover,
-	&:focus {
-		@include Button(whites, info-light-3, info-light-3);
-	}
-}
-.el-button--info.is-plain {
-	@include Button(info, info-light-8, info-light-6);
-	&:hover,
-	&:focus {
-		@include Button(whites, info, info);
-	}
-}
-.el-button--info.is-active,
-.el-button--info:active {
-	@include Button(whites, info, info);
-}
-// warning
-.el-button--warning {
-	@include Button(whites, warning, warning);
-	&:hover,
-	&:focus {
-		@include Button(whites, warning-light-3, warning-light-3);
-	}
-}
-.el-button--warning.is-plain {
-	@include Button(warning, warning-light-8, warning-light-6);
-	&:hover,
-	&:focus {
-		@include Button(whites, warning, warning);
-	}
-}
-.el-button--warning.is-active,
-.el-button--warning:active {
-	@include Button(whites, warning, warning);
-}
-// danger
-.el-button--danger {
-	@include Button(whites, danger, danger);
-	&:hover,
-	&:focus {
-		@include Button(whites, danger-light-3, danger-light-3);
-	}
-}
-.el-button--danger.is-plain {
-	@include Button(danger, danger-light-8, danger-light-6);
-	&:hover,
-	&:focus {
-		@include Button(whites, danger, danger);
-	}
-}
-.el-button--danger.is-active,
-.el-button--danger:active {
-	@include Button(whites, danger, danger);
-}
 // 第三方字体图标大小
+.el-button:not(.is-circle) i.el-icon,
 .el-button i.iconfont,
-.el-button i.fa {
-	font-size: 14px !important;
-	margin-right: 5px;
-}
-.el-button--medium i.iconfont,
-.el-button--medium i.fa {
+.el-button i.fa,
+.el-button--default i.iconfont,
+.el-button--default i.fa {
 	font-size: 14px !important;
 	margin-right: 5px;
 }
@@ -144,569 +16,76 @@
 	font-size: 12px !important;
 	margin-right: 5px;
 }
-.el-button--mini i.iconfont,
-.el-button--mini i.fa {
-	font-size: 12px !important;
-	margin-right: 5px;
-}
-
-/* Radio 单选框
-------------------------------- */
-.el-radio__input.is-checked + .el-radio__label,
-.el-radio-button__inner:hover {
-	color: set-color(primary);
-}
-.el-radio__input.is-checked .el-radio__inner {
-	@include RadioCheckbox(primary);
-}
-.el-radio-button__orig-radio:checked + .el-radio-button__inner {
-	color: set-color(whites);
-	@include RadioCheckbox(primary);
-	box-shadow: -1px 0 0 0 set-color(primary);
-}
-.el-radio.is-bordered.is-checked,
-.el-radio__inner:hover {
-	border-color: set-color(primary);
-}
-
-/* Checkbox 多选框
-------------------------------- */
-.el-checkbox__input.is-checked + .el-checkbox__label,
-.el-checkbox-button__inner:hover {
-	color: set-color(primary);
-}
-.el-checkbox__input.is-checked .el-checkbox__inner {
-	@include RadioCheckbox(primary);
-}
-.el-checkbox__input.is-focus .el-checkbox__inner,
-.el-checkbox__inner:hover,
-.el-checkbox.is-bordered.is-checked,
-.el-checkbox-button.is-focus .el-checkbox-button__inner {
-	border-color: set-color(primary);
-}
-.el-checkbox-button.is-checked .el-checkbox-button__inner {
-	color: set-color(whites);
-	@include RadioCheckbox(primary);
-	box-shadow: -1px 0 0 0 set-color(primary);
-}
-.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
-	border-left-color: set-color(primary);
-}
-.el-checkbox__input.is-checked .el-checkbox__inner,
-.el-checkbox__input.is-indeterminate .el-checkbox__inner {
-	background-color: set-color(primary);
-	border-color: set-color(primary);
-}
 
 /* Input 输入框、InputNumber 计数器
 ------------------------------- */
-.el-input__inner:focus,
-.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
-.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
-.el-textarea__inner:focus {
-	border-color: set-color(primary);
-}
-.el-input-number__increase:hover,
-.el-input-number__decrease:hover {
-	color: set-color(primary);
-}
 // 菜单搜索
 .el-autocomplete-suggestion__wrap {
 	max-height: 280px !important;
 }
 
-/* Select 选择器
-------------------------------- */
-.el-range-editor.is-active,
-.el-range-editor.is-active:hover,
-.el-select .el-input.is-focus .el-input__inner,
-.el-select .el-input__inner:focus {
-	border-color: set-color(primary);
-}
-.el-select-dropdown__item.selected {
-	color: set-color(primary);
-}
-
-/* Cascader 级联选择器
-------------------------------- */
-.el-cascader .el-input .el-input__inner:focus,
-.el-cascader .el-input.is-focus .el-input__inner {
-	border-color: set-color(primary);
-}
-.el-cascader-node.in-active-path,
-.el-cascader-node.is-active,
-.el-cascader-node.is-selectable.in-checked-path {
-	color: set-color(primary);
-}
-
-/* Slider 滑块
-------------------------------- */
-.el-slider__bar {
-	background-color: set-color(primary);
-}
-.el-slider__button {
-	border-color: set-color(primary);
-}
-
-/* TimePicker 时间选择器
-------------------------------- */
-.el-time-panel__btn.confirm,
-.el-time-spinner__arrow:hover {
-	color: set-color(primary);
-}
-
-/* DatePicker 日期选择器
-------------------------------- */
-.el-date-table td.today span,
-.el-date-table td.available:hover,
-.el-date-picker__header-label.active,
-.el-date-picker__header-label:hover,
-.el-picker-panel__icon-btn:hover,
-.el-year-table td.today .cell,
-.el-year-table td .cell:hover,
-.el-year-table td.current:not(.disabled) .cell,
-.el-month-table td .cell:hover,
-.el-month-table td.today .cell,
-.el-month-table td.current:not(.disabled) .cell,
-.el-picker-panel__shortcut:hover {
-	color: set-color(primary);
-}
-.el-date-table td.current:not(.disabled) span,
-.el-date-table td.selected span {
-	color: set-color(whites);
-	background-color: set-color(primary);
-}
-.el-date-table td.end-date span,
-.el-date-table td.start-date span {
-	background-color: set-color(primary);
-}
-.el-date-table td.in-range div,
-.el-date-table td.in-range div:hover,
-.el-date-table.is-week-mode .el-date-table__row.current div,
-.el-date-table.is-week-mode .el-date-table__row:hover div,
-.el-date-table td.selected div {
-	background-color: set-color(primary-light-9);
-}
-
-/* Upload 上传
-------------------------------- */
-.el-upload-list__item.is-success .el-upload-list__item-name:focus,
-.el-upload-list__item.is-success .el-upload-list__item-name:hover,
-.el-upload-list__item .el-icon-close-tip,
-.el-upload-dragger .el-upload__text em {
-	color: set-color(primary);
-}
-.el-upload--picture-card:hover,
-.el-upload:focus {
-	color: set-color(primary);
-	border-color: set-color(primary);
-}
-.el-upload-dragger:hover,
-.el-upload:focus .el-upload-dragger {
-	border-color: set-color(primary);
-}
-
-/* Transfer 穿梭框
-------------------------------- */
-.el-transfer-panel__item:hover {
-	color: set-color(primary);
-}
-
 /* Form 表单
 ------------------------------- */
 .el-form {
+	// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
 	.el-form-item:last-of-type {
 		margin-bottom: 0 !important;
 	}
-}
-
-/* Table 表格
-------------------------------- */
-.el-table .descending .sort-caret.descending {
-	border-top-color: set-color(primary);
-}
-.el-table .ascending .sort-caret.ascending {
-	border-bottom-color: set-color(primary);
-}
-
-/* Tag 标签
-------------------------------- */
-// primary
-.el-tag {
-	@include Tag(primary, primary-light-8, primary-light-6);
-}
-.el-tag .el-tag__close {
-	color: set-color(primary);
-	&:hover {
-		@include TagDark(whites, primary);
+	// 修复行内表单最后一个 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;
+		}
 	}
-}
-.el-tag--dark {
-	@include TagDark(whites, primary);
-}
-.el-tag--dark .el-tag__close {
-	color: set-color(whites);
-	&:hover {
-		background-color: set-color(primary-light-3);
+	// https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM
+	.el-form-item .el-form-item__label .el-icon {
+		margin-right: 0px;
 	}
 }
-.el-tag--plain {
-	@include Tag(primary, whites, primary-light-3);
-}
-// success
-.el-tag.el-tag--success {
-	@include Tag(success, success-light-8, success-light-6);
-}
-.el-tag.el-tag--success .el-tag__close {
-	color: set-color(success);
-	&:hover {
-		@include TagDark(whites, success);
-	}
-}
-.el-tag--dark.el-tag--success {
-	@include TagDark(whites, success);
-}
-.el-tag--dark.el-tag--success .el-tag__close {
-	color: set-color(whites);
-	&:hover {
-		background-color: set-color(success-light-3);
-	}
-}
-.el-tag--plain.el-tag--success {
-	@include Tag(success, whites, success-light-3);
-}
-// info
-.el-tag.el-tag--info {
-	@include Tag(info, info-light-8, info-light-6);
-}
-.el-tag.el-tag--info .el-tag__close {
-	color: set-color(info);
-	&:hover {
-		@include TagDark(whites, info);
-	}
-}
-.el-tag--dark.el-tag--info {
-	@include TagDark(whites, info);
-}
-.el-tag--dark.el-tag--info .el-tag__close {
-	color: set-color(whites);
-	&:hover {
-		background-color: set-color(info-light-3);
-	}
-}
-.el-tag--plain.el-tag--info {
-	@include Tag(info, whites, info-light-3);
-}
-// warning
-.el-tag.el-tag--warning {
-	@include Tag(warning, warning-light-8, warning-light-6);
-}
-.el-tag.el-tag--warning .el-tag__close {
-	color: set-color(warning);
-	&:hover {
-		@include TagDark(whites, warning);
-	}
-}
-.el-tag--dark.el-tag--warning {
-	@include TagDark(whites, warning);
-}
-.el-tag--dark.el-tag--warning .el-tag__close {
-	color: set-color(whites);
-	&:hover {
-		background-color: set-color(warning-light-3);
-	}
-}
-.el-tag--plain.el-tag--warning {
-	@include Tag(warning, whites, warning-light-3);
-}
-// danger
-.el-tag.el-tag--danger {
-	@include Tag(danger, danger-light-8, danger-light-6);
-}
-.el-tag.el-tag--danger .el-tag__close {
-	color: set-color(danger);
-	&:hover {
-		@include TagDark(whites, danger);
-	}
-}
-.el-tag--dark.el-tag--danger {
-	@include TagDark(whites, danger);
-}
-.el-tag--dark.el-tag--danger .el-tag__close {
-	color: set-color(whites);
-	&:hover {
-		background-color: set-color(danger-light-3);
-	}
-}
-.el-tag--plain.el-tag--danger {
-	@include Tag(danger, whites, danger-light-3);
-}
-
-/* Progress 进度条
-------------------------------- */
-// primary
-.el-progress-bar__inner {
-	background-color: set-color(primary) !important;
-}
-// success
-.el-progress.is-success .el-progress-bar__inner {
-	background-color: set-color(success) !important;
-}
-.el-progress.is-success .el-progress__text {
-	color: set-color(success) !important;
-}
-// warning
-.el-progress.is-warning .el-progress-bar__inner {
-	background-color: set-color(warning) !important;
-}
-.el-progress.is-warning .el-progress__text {
-	color: set-color(warning) !important;
-}
-// danger
-.el-badge__content,
-.el-progress.is-exception .el-progress-bar__inner {
-	background-color: set-color(danger) !important;
-}
-.el-progress.is-exception .el-progress__text {
-	color: set-color(danger) !important;
-}
-
-/* Pagination 分页
-------------------------------- */
-.el-pager li.active,
-.el-pager li:hover,
-.el-pagination button:hover,
-.el-pagination.is-background .el-pager li:not(.disabled):hover {
-	color: set-color(primary);
-}
-.el-pagination__sizes .el-input .el-input__inner:hover {
-	border-color: set-color(primary);
-}
-.el-pagination.is-background .el-pager li:not(.disabled).active {
-	background-color: set-color(primary);
-	color: set-color(whites);
-}
-
-/* Badge 标记
-------------------------------- */
-// primary
-.el-badge__content--primary {
-	background-color: set-color(primary);
-}
-// success
-.el-badge__content--success {
-	background-color: set-color(success);
-}
-// warning
-.el-badge__content--warning {
-	background-color: set-color(warning);
-}
-// danger
-.el-badge__content--danger {
-	background-color: set-color(danger);
-}
-// info
-.el-badge__content--info {
-	background-color: set-color(info);
-}
-
-/* Result 结果
-------------------------------- */
-// success
-.el-result .icon-success {
-	fill: set-color(success);
-}
-// warning
-.el-result .icon-warning {
-	fill: set-color(warning);
-}
-// error
-.el-result .icon-error {
-	fill: set-color(danger);
-}
-// info
-.el-result .icon-info {
-	fill: set-color(info);
-}
 
 /* Alert 警告
 ------------------------------- */
-// success
-.el-alert--success.is-light {
-	@include Alert(success, success-light-9, success-light-7);
-}
-.el-alert--success.is-dark {
-	@include Alert(whites, success, success-light-7);
-}
-.el-alert--success.is-light .el-alert__description {
-	color: set-color(success);
-}
-// warning
-.el-alert--warning.is-light {
-	@include Alert(warning, warning-light-9, warning-light-7);
-}
-.el-alert--warning.is-dark {
-	@include Alert(whites, warning, warning-light-7);
-}
-.el-alert--warning.is-light .el-alert__description {
-	color: set-color(warning);
-}
-// info
-.el-alert--info.is-light {
-	@include Alert(info, info-light-9, info-light-7);
-}
-.el-alert--info.is-dark {
-	@include Alert(whites, info, info-light-7);
-}
-.el-alert--info.is-light .el-alert__description {
-	color: set-color(info);
-}
-// error
-.el-alert--error.is-light {
-	@include Alert(danger, danger-light-9, danger-light-7);
-}
-.el-alert--error.is-dark {
-	@include Alert(whites, danger, danger-light-7);
-}
-.el-alert--error.is-light .el-alert__description {
-	color: set-color(danger);
+.el-alert {
+	border: 1px solid;
 }
 .el-alert__title {
 	word-break: break-all;
 }
 
-/* Loading 加载
-------------------------------- */
-.el-loading-spinner .path {
-	stroke: set-color(primary);
-}
-.el-loading-spinner .el-loading-text,
-.el-loading-spinner i {
-	color: set-color(primary);
-}
-
 /* Message 消息提示
 ------------------------------- */
-// default/info
 .el-message {
-	background-color: set-color(info-light-9);
-	border-color: set-color(info-light-8);
 	min-width: unset !important;
 	padding: 15px !important;
-}
-.el-message .el-message__content,
-.el-message .el-icon-info {
-	color: set-color(info);
-}
-// success
-.el-message--success {
-	background-color: set-color(success-light-9);
-	border-color: set-color(success-light-8);
-}
-.el-message--success .el-message__content,
-.el-message .el-icon-success {
-	color: set-color(success);
-}
-// warning
-.el-message--warning {
-	background-color: set-color(warning-light-9);
-	border-color: set-color(warning-light-8);
-}
-.el-message--warning .el-message__content,
-.el-message .el-icon-warning {
-	color: set-color(warning);
-}
-// error
-.el-message--error {
-	background-color: set-color(danger-light-9);
-	border-color: set-color(danger-light-8);
-}
-.el-message--error .el-message__content,
-.el-message .el-icon-error {
-	color: set-color(danger);
-}
-
-/* MessageBox 弹框
-------------------------------- */
-.el-message-box__headerbtn:focus .el-message-box__close,
-.el-message-box__headerbtn:hover .el-message-box__close {
-	color: set-color(primary);
-}
-// success
-.el-message-box__status.el-icon-success {
-	color: set-color(success);
-}
-// info
-.el-message-box__status.el-icon-info {
-	color: set-color(info);
-}
-// warning
-.el-message-box__status.el-icon-warning {
-	color: set-color(warning);
-}
-// error
-.el-message-box__status.el-icon-error {
-	color: set-color(danger);
-}
-
-/* Notification 通知
-------------------------------- */
-// success
-.el-notification .el-icon-success {
-	color: set-color(success);
-}
-// info
-.el-notification .el-icon-info {
-	color: set-color(info);
-}
-// warning
-.el-notification .el-icon-warning {
-	color: set-color(warning);
-}
-// error
-.el-notification .el-icon-error {
-	color: set-color(danger);
+	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;
+}
 // 默认样式修改
 .el-menu {
 	border-right: none !important;
 	width: 220px;
 }
-// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
-.el-menu--collapse {
-	width: 64px !important;
+.el-menu-item {
+	height: 56px !important;
+	line-height: 56px !important;
 }
 .el-menu-item,
 .el-sub-menu__title {
-	height: 50px !important;
-	line-height: 50px !important;
 	color: var(--bg-menuBarColor);
-	transition: none !important;
 }
-// horizontal 水平方向时
-.el-menu--horizontal > .el-menu-item.is-active,
-.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
-	border-bottom: 3px solid !important;
-	border-bottom-color: set-color(primary);
-	color: set-color(primary) !important;
-}
-.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
-.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-sub-menu:focus .el-sub-menu__title,
-.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title,
-.el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
-	color: set-color(primary) !important;
-}
-.el-menu.el-menu--horizontal {
-	border-bottom: none !important;
-}
-.el-menu--horizontal > .el-menu-item,
-.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
-	color: var(--bg-topBarColor);
+// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
+.el-menu--collapse {
+	width: 64px !important;
 }
 // 外部链接时
 .el-menu-item a,
@@ -716,142 +95,133 @@
 	color: inherit;
 	text-decoration: none;
 }
-.el-menu-item a {
-	width: 86%;
-	display: inline-block;
+// 第三方图标字体间距/大小设置
+.el-menu-item .iconfont,
+.el-sub-menu .iconfont,
+.el-menu-item .fa,
+.el-sub-menu .fa {
+	@include generalIcon;
 }
-// 默认 hover 时
-.el-menu-item:hover,
-.el-sub-menu__title:hover {
-	color: set-color(primary) !important;
-	background-color: transparent !important;
-	i {
-		color: set-color(primary);
-	}
-}
-// 高亮时/菜单收起时
+// 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
 .el-menu-item.is-active,
-.el-menu--collapse .el-sub-menu.is-active i {
-	color: set-color(primary);
+.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;
 }
-.el-active-extend {
-	color: var(--color-whites) !important;
-	background-color: set-color(primary) !important;
-	i {
-		color: var(--color-whites) !important;
-	}
+.el-menu-item:hover {
+	@extend .el-menu-hover-bg-color;
 }
-#add-is-active {
-	@extend .el-active-extend;
-	&:hover {
-		@extend .el-active-extend;
-	}
+.el-sub-menu.is-active.is-opened .el-sub-menu__title {
+	background-color: unset !important;
 }
-// 菜单收起时且是a链接
+// 子级菜单背景颜色
+// .el-menu--inline {
+// 	background: var(--next-bg-menuBar-light-1);
+// }
+// 水平菜单、横向菜单折叠 a 标签
 .el-popper.is-dark a {
-	color: var(--color-whites) !important;
+	color: var(--el-color-white) !important;
 	text-decoration: none;
 }
-// 菜单收起时鼠标经过背景颜色/字体颜色
-.el-popper.is-light {
+// 水平菜单、横向菜单折叠背景色
+.el-popper.is-pure.is-light {
+	// 水平菜单
 	.el-menu--vertical {
-		.el-menu {
-			background: var(--bg-menuBar);
+		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,
+		background: var(--next-bg-topBar);
 		.el-menu-item,
-		.el-sub-menu__title {
+		.el-sub-menu {
+			height: 48px !important;
+			line-height: 48px !important;
 			color: var(--bg-topBarColor);
-			background: var(--bg-topBar);
+			.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-item .iconfont,
-// .el-sub-menu .iconfont {
-// 	@include generalIcon;
-// }
-// .el-menu-item .fa,
-// .el-sub-menu .fa {
-// 	@include generalIcon;
-// }
-// element plus 本身字体图标
-.el-sub-menu .el-icon {
-	font-size: 14px !important;
+// 横向菜单（经典、横向）布局
+.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);
+	}
 }
-// 去掉离开浏览器时，菜单的默认高亮
-.el-menu-item:focus {
-	background-color: transparent !important;
+// 菜单收起时，图标不居中问题
+.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;
+	}
 }
 
 /* Tabs 标签页
 ------------------------------- */
-.el-tabs__item.is-active,
-.el-tabs__item:hover,
-.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
-.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
-	color: set-color(primary);
-}
-.el-tabs__active-bar {
-	background-color: set-color(primary);
-}
 .el-tabs__nav-wrap::after {
 	height: 1px !important;
 }
 
-/* Breadcrumb 面包屑
-------------------------------- */
-.el-breadcrumb__inner a:hover,
-.el-breadcrumb__inner.is-link:hover {
-	color: set-color(primary);
-}
-.el-breadcrumb__inner a,
-.el-breadcrumb__inner.is-link {
-	color: var(--bg-topBarColor);
-	font-weight: normal;
-}
-
 /* Dropdown 下拉菜单
 ------------------------------- */
-.el-dropdown-menu__item:focus,
-.el-dropdown-menu__item:not(.is-disabled):hover {
-	color: set-color(primary);
-	background-color: set-color(primary-light-9);
+.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);
+	}
 }
 
 /* Steps 步骤条
 ------------------------------- */
-// default
-.el-step__title.is-finish,
-.el-step__description.is-finish,
-.el-step__head.is-finish {
-	color: set-color(primary);
-}
-.el-step__head.is-finish {
-	border-color: set-color(primary);
-}
-// success
-.el-step__title.is-success,
-.el-step__head.is-success {
-	color: set-color(success);
-}
-.el-step__head.is-success {
-	border-color: set-color(success);
-}
-// error
-.el-step__title.is-error,
-.el-step__head.is-error {
-	color: set-color(danger);
-}
-.el-step__head.is-error {
-	border-color: set-color(danger);
-}
 .el-step__icon-inner {
 	font-size: 30px !important;
 	font-weight: 400 !important;
@@ -862,10 +232,6 @@
 
 /* Dialog 对话框
 ------------------------------- */
-.el-dialog__headerbtn:focus .el-dialog__close,
-.el-dialog__headerbtn:hover .el-dialog__close {
-	color: set-color(primary);
-}
 .el-overlay {
 	overflow: hidden;
 	.el-overlay-dialog {
@@ -896,46 +262,11 @@
 	padding: 15px 20px;
 }
 
-/* Timeline 时间线
+/* Table 表格 element plus 2.2.0 版本
 ------------------------------- */
-// primary
-.el-timeline-item__node--primary {
-	background-color: set-color(primary);
-}
-// success
-.el-timeline-item__node--success {
-	background-color: set-color(success);
-}
-// warning
-.el-timeline-item__node--warning {
-	background-color: set-color(warning);
-}
-// danger
-.el-timeline-item__node--danger {
-	background-color: set-color(danger);
-}
-// info
-.el-timeline-item__node--info {
-	background-color: set-color(info);
-}
-
-/* Calendar 日历
-------------------------------- */
-.el-calendar-table td.is-today {
-	color: set-color(primary);
-	background-color: set-color(primary-light-9);
-}
-.el-calendar-table .el-calendar-day:hover,
-.el-calendar-table td.is-selected {
-	background-color: set-color(primary-light-9);
-}
-
-/* Backtop 回到顶部
-------------------------------- */
-.el-backtop {
-	color: set-color(primary);
-	&:hover {
-		background-color: set-color(primary-light-9);
+.el-table {
+	.el-button.is-text {
+		padding: 0;
 	}
 }
 
@@ -944,9 +275,42 @@
 .el-scrollbar__bar {
 	z-index: 4;
 }
+/*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
+.el-scrollbar__wrap {
+	max-height: 100%;
+}
 .el-select-dropdown .el-scrollbar__wrap {
 	overflow-x: scroll !important;
 }
+/*修复Select 选择器高度问题*/
+.el-select-dropdown__wrap {
+	max-height: 274px !important;
+}
+/*修复Cascader 级联选择器高度问题*/
+.el-cascader-menu__wrap.el-scrollbar__wrap {
+	height: 204px !important;
+}
+/*用于界面高度自适应（main.vue），区分 scrollbar__view，防止其它使用 scrollbar 的地方出现滚动条消失*/
+.layout-container-view .el-scrollbar__view {
+	height: 100%;
+}
+/*防止分栏布局二级菜单很多时，滚动条消失问题*/
+.layout-columns-warp .layout-aside .el-scrollbar__view {
+	height: unset !important;
+}
+
+/* Pagination 分页
+------------------------------- */
+.el-pagination__editor {
+	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 抽屉
 ------------------------------- */
@@ -958,7 +322,8 @@
 		display: flex;
 		align-items: center;
 		margin-bottom: 0 !important;
-		border-bottom: 1px solid rgb(230, 230, 230);
+		border-bottom: 1px solid var(--el-border-color);
+		color: var(--el-text-color-primary);
 	}
 	.el-drawer__body {
 		width: 100%;
@@ -966,17 +331,17 @@
 		overflow: auto;
 	}
 }
-.el-drawer-fade-enter-active .el-drawer.rtl {
-	animation: rtl-drawer-animation 0.3s ease-in reverse !important;
+
+/* Breadcrumb 面包屑
+------------------------------- */
+.el-breadcrumb__inner a:hover,
+.el-breadcrumb__inner.is-link:hover {
+	color: var(--el-color-primary);
 }
-.el-drawer-fade-leave-active .el-drawer.rtl {
-	animation: rtl-drawer-animation 0.3s ease !important;
-}
-.el-drawer-fade-enter-active .el-drawer.ltr {
-	animation: ltr-drawer-animation 0.3s ease-in reverse !important;
-}
-.el-drawer-fade-leave-active .el-drawer.ltr {
-	animation: ltr-drawer-animation 0.3s ease !important;
+.el-breadcrumb__inner a,
+.el-breadcrumb__inner.is-link {
+	color: var(--bg-topBarColor);
+	font-weight: normal;
 }
 
 // el-tooltip使用自定义主题时的样式
diff --git a/mayfly_go_web/src/theme/index.scss b/mayfly_go_web/src/theme/index.scss
index 6a9e9fe2..ec6c0168 100644
--- a/mayfly_go_web/src/theme/index.scss
+++ b/mayfly_go_web/src/theme/index.scss
@@ -4,4 +4,5 @@
 @import './element.scss';
 @import './media/media.scss';
 @import './waves.scss';
+@import './dark.scss';
 @import './iconSelector.scss';
\ No newline at end of file
diff --git a/mayfly_go_web/src/theme/loading.scss b/mayfly_go_web/src/theme/loading.scss
index 663bde04..c28c7b9d 100644
--- a/mayfly_go_web/src/theme/loading.scss
+++ b/mayfly_go_web/src/theme/loading.scss
@@ -15,7 +15,7 @@
 .loading-next .loading-next-box-warp .loading-next-box-item {
 	width: 33.333333%;
 	height: 33.333333%;
-	background: var(--color-primary);
+	background: var(--el-color-primary);
 	float: left;
 	animation: loading-next-animation 1.2s infinite ease;
 	border-radius: 1px;
diff --git a/mayfly_go_web/src/theme/media/scrollbar.scss b/mayfly_go_web/src/theme/media/scrollbar.scss
index b63b3725..cbba0434 100644
--- a/mayfly_go_web/src/theme/media/scrollbar.scss
+++ b/mayfly_go_web/src/theme/media/scrollbar.scss
@@ -9,7 +9,7 @@
 		height: 3px !important;
 	}
 	::-webkit-scrollbar-track-piece {
-		background-color: #f8f8f8;
+		background-color: var(--bg-main-color);
 	}
 	// 滚动条的设置
 	::-webkit-scrollbar-thumb {
@@ -40,7 +40,7 @@
 		height: 7px;
 	}
 	::-webkit-scrollbar-track-piece {
-		background-color: #f8f8f8;
+		background-color: var(--bg-main-color);
 	}
 	// 滚动条的设置
 	::-webkit-scrollbar-thumb {
@@ -53,4 +53,4 @@
 	::-webkit-scrollbar-thumb:hover {
 		background-color: rgba(144, 147, 153, 0.5);
 	}
-}
+}
\ No newline at end of file
diff --git a/mayfly_go_web/src/theme/mixins/element-mixins.scss b/mayfly_go_web/src/theme/mixins/element-mixins.scss
deleted file mode 100644
index 81611e63..00000000
--- a/mayfly_go_web/src/theme/mixins/element-mixins.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/* Button 按钮
-------------------------------- */
-@mixin Button($main, $c1, $c2) {
-	color: set-color($main);
-	background: set-color($c1);
-	border-color: set-color($c2);
-}
-
-/* Radio 单选框、Checkbox 多选框
-------------------------------- */
-@mixin RadioCheckbox($name) {
-	background-color: set-color($name);
-	border-color: set-color($name);
-}
-
-/* Tag 标签
-------------------------------- */
-@mixin Tag($main, $c1, $c2) {
-	color: set-color($main);
-	background-color: set-color($c1);
-	border-color: set-color($c2);
-}
-@mixin TagDark($main, $c1) {
-	color: set-color($main);
-	background-color: set-color($c1);
-}
-
-/* Alert 警告
-------------------------------- */
-@mixin Alert($main, $c1, $c2) {
-	color: set-color($main);
-	background: set-color($c1);
-	border: 1px solid set-color($c2);
-}
diff --git a/mayfly_go_web/src/theme/mixins/function.scss b/mayfly_go_web/src/theme/mixins/function.scss
deleted file mode 100644
index ed27a8f7..00000000
--- a/mayfly_go_web/src/theme/mixins/function.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-/* 颜色调用函数
-------------------------------- */
-@function set-color($key) {
-	@return var(--color-#{$key});
-}
diff --git a/mayfly_go_web/src/theme/mixins/mixins.scss b/mayfly_go_web/src/theme/mixins/index.scss
similarity index 78%
rename from mayfly_go_web/src/theme/mixins/mixins.scss
rename to mayfly_go_web/src/theme/mixins/index.scss
index f98f101f..c06599a3 100644
--- a/mayfly_go_web/src/theme/mixins/mixins.scss
+++ b/mayfly_go_web/src/theme/mixins/index.scss
@@ -1,3 +1,15 @@
+/* 第三方图标字体间距/大小设置
+------------------------------- */
+@mixin generalIcon {
+	font-size: 14px !important;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 5px;
+	width: 24px;
+	text-align: center;
+	justify-content: center;
+}
+
 /* 文本不换行
 ------------------------------- */
 @mixin text-no-wrap() {
@@ -41,4 +53,4 @@
 	&::-webkit-scrollbar-thumb:hover {
 		background-color: #bbb;
 	}
-}
+}
\ No newline at end of file
diff --git a/mayfly_go_web/src/types/pinia.d.ts b/mayfly_go_web/src/types/pinia.d.ts
index b4e767a8..2bf34c74 100644
--- a/mayfly_go_web/src/types/pinia.d.ts
+++ b/mayfly_go_web/src/types/pinia.d.ts
@@ -1,5 +1,5 @@
 declare interface UserInfoState<T = any> {
-    userInfo: any
+    userInfo: any;
 }
 
 declare interface ThemeConfigState {
@@ -37,6 +37,7 @@ declare interface ThemeConfigState {
         isCacheTagsView: boolean;
         isSortableTagsView: boolean;
         isFooter: boolean;
+        isDark: boolean;
         isGrayscale: boolean;
         isInvert: boolean;
         isWartermark: boolean;
@@ -61,8 +62,8 @@ declare interface ThemeConfigState {
 
 // TagsView 路由列表
 declare interface TagsViewRoutesState<T = any> {
-	tagsViewRoutes: T[];
-	isTagsViewCurrenFull: Boolean;
+    tagsViewRoutes: T[];
+    isTagsViewCurrenFull: Boolean;
 }
 
 // 路由列表
@@ -74,4 +75,4 @@ declare interface RoutesListState {
 declare interface KeepAliveNamesState {
     keepAliveNames: string[];
     cachedViews: string[];
-}
\ No newline at end of file
+}
diff --git a/mayfly_go_web/src/views/home/Home.vue b/mayfly_go_web/src/views/home/Home.vue
index 6419c74b..6af2ceed 100644
--- a/mayfly_go_web/src/views/home/Home.vue
+++ b/mayfly_go_web/src/views/home/Home.vue
@@ -7,8 +7,7 @@
                         <img :src="userInfo.photo" />
                         <div class="home-card-first-right ml15">
                             <div class="flex-margin">
-                                <div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}`
-                                }}</div>
+                                <div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}` }}</div>
                             </div>
                         </div>
                     </div>
@@ -31,7 +30,7 @@
 import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
 // import * as echarts from 'echarts';
 import { CountUp } from 'countup.js';
-import { formatAxis } from '@/common/utils/format.ts';
+import { formatAxis } from '@/common/utils/format';
 import { indexApi } from './api';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -65,9 +64,7 @@ const state = reactive({
     ],
 });
 
-const {
-    topCardItemList,
-} = toRefs(state)
+const { topCardItemList } = toRefs(state);
 
 // 当前时间提示语
 const currentTime = computed(() => {
@@ -179,8 +176,8 @@ onMounted(() => {
     }
 
     .home-card-first {
-        background: white;
-        border: 1px solid #ebeef5;
+        background: var(--bg-main-color);
+        border: 1px solid var(--el-border-color-light, #ebeef5);
         display: flex;
         align-items: center;
 
@@ -188,7 +185,7 @@ onMounted(() => {
             width: 60px;
             height: 60px;
             border-radius: 100%;
-            border: 2px solid var(--color-primary-light-5);
+            border: 2px solid var(--el-color-primary-light-5);
         }
 
         .home-card-first-right {
@@ -247,7 +244,8 @@ onMounted(() => {
             .home-dynamic-item-left {
                 text-align: right;
 
-                .home-dynamic-item-left-time1 {}
+                .home-dynamic-item-left-time1 {
+                }
 
                 .home-dynamic-item-left-time2 {
                     font-size: 13px;
@@ -262,7 +260,7 @@ onMounted(() => {
                 position: relative;
 
                 i {
-                    color: var(--color-primary);
+                    color: var(--el-color-primary);
                     font-size: 12px;
                     position: absolute;
                     top: 1px;
@@ -284,7 +282,7 @@ onMounted(() => {
                         border-radius: 100%;
                         padding: 3px 2px 2px;
                         text-align: center;
-                        color: var(--color-primary);
+                        color: var(--el-color-primary);
                     }
                 }
 
diff --git a/mayfly_go_web/src/views/layout/component/columnsAside.vue b/mayfly_go_web/src/views/layout/component/columnsAside.vue
index 0e799aa4..9f030436 100644
--- a/mayfly_go_web/src/views/layout/component/columnsAside.vue
+++ b/mayfly_go_web/src/views/layout/component/columnsAside.vue
@@ -2,11 +2,18 @@
     <div class="layout-columns-aside">
         <el-scrollbar>
             <ul>
-                <li v-for="(v, k) in state.columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" :ref="
-                    (el) => {
-                        if (el) columnsAsideOffsetTopRefs[k] = el;
-                    }
-                " :class="{ 'layout-columns-active': state.liIndex === k }" :title="v.meta.title">
+                <li
+                    v-for="(v, k) in state.columnsAsideList"
+                    :key="k"
+                    @click="onColumnsAsideMenuClick(v, k)"
+                    :ref="
+                        (el) => {
+                            if (el) columnsAsideOffsetTopRefs[k] = el;
+                        }
+                    "
+                    :class="{ 'layout-columns-active': state.liIndex === k }"
+                    :title="v.meta.title"
+                >
                     <div class="layout-columns-aside-li-box" v-if="!v.meta.link || (v.meta.link && v.meta.linkType == 1)">
                         <i :class="v.meta.icon"></i>
                         <div class="layout-columns-aside-li-box-title font12">
@@ -166,7 +173,7 @@ onBeforeRouteUpdate((to) => {
         }
 
         .columns-round {
-            background: var(--color-primary);
+            background: var(--el-color-primary);
             color: #ffffff;
             position: absolute;
             left: 50%;
diff --git a/mayfly_go_web/src/views/layout/logo/index.vue b/mayfly_go_web/src/views/layout/logo/index.vue
index f8e83be6..54235c80 100644
--- a/mayfly_go_web/src/views/layout/logo/index.vue
+++ b/mayfly_go_web/src/views/layout/logo/index.vue
@@ -3,7 +3,9 @@
         <img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
         <span>
             {{ `${themeConfig.globalTitle}` }}
-            <sub><span style="font-size: 10px;color:goldenrod">{{ ` ${config.version}` }}</span></sub>
+            <sub
+                ><span style="font-size: 10px; color: goldenrod">{{ ` ${config.version}` }}</span></sub
+            >
         </span>
     </div>
     <div class="layout-logo-size" v-else @click="onThemeConfigChange">
@@ -41,14 +43,14 @@ const onThemeConfigChange = () => {
     align-items: center;
     justify-content: center;
     box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
-    color: var(--color-primary);
+    color: var(--el-color-primary);
     font-size: 16px;
     cursor: pointer;
     animation: logoAnimation 0.3s ease-in-out;
 
     &:hover {
         span {
-            color: var(--color-primary-light-2);
+            color: var(--el-color-primary-light-2);
         }
     }
 
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue
index 95cd1cec..e9104be6 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue
@@ -20,7 +20,6 @@ import Logo from '@/views/layout/logo/index.vue';
 import Horizontal from '@/views/layout/navMenu/horizontal.vue';
 import mittBus from '@/common/utils/mitt';
 
-
 const { themeConfig } = storeToRefs(useThemeConfig());
 const { routesList } = storeToRefs(useRoutesList());
 const route = useRoute();
@@ -106,6 +105,6 @@ onUnmounted(() => {
     padding-right: 15px;
     background: var(--bg-topBar);
     overflow: hidden;
-    border-bottom: 1px solid #f1f2f3;
+    border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
 }
 </style>
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
index 5561ff39..2c35d83f 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
@@ -1,47 +1,48 @@
 <template>
     <div class="layout-breadcrumb-seting">
-        <el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
-            @close="onDrawerClose">
+        <el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px" @close="onDrawerClose">
             <el-scrollbar class="layout-breadcrumb-seting-bar">
                 <!-- ssh终端主题 -->
                 <el-divider content-position="left">终端主题</el-divider>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.terminalForeground" size="small"
-                            @change="onColorPickerChange('terminalForeground')">
+                        <el-color-picker v-model="themeConfig.terminalForeground" size="small" @change="onColorPickerChange('terminalForeground')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">背景颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.terminalBackground" size="small"
-                            @change="onColorPickerChange('terminalBackground')">
+                        <el-color-picker v-model="themeConfig.terminalBackground" size="small" @change="onColorPickerChange('terminalBackground')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">cursor颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.terminalCursor" size="small"
-                            @change="onColorPickerChange('terminalCursor')">
-                        </el-color-picker>
+                        <el-color-picker v-model="themeConfig.terminalCursor" size="small" @change="onColorPickerChange('terminalCursor')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体大小</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-input-number v-model="themeConfig.terminalFontSize" controls-position="right" :min="12"
-                            :max="24" @change="setLocalThemeConfig" size="small" style="width: 90px">
+                        <el-input-number
+                            v-model="themeConfig.terminalFontSize"
+                            controls-position="right"
+                            :min="12"
+                            :max="24"
+                            @change="setLocalThemeConfig"
+                            size="small"
+                            style="width: 90px"
+                        >
                         </el-input-number>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体粗细</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small"
-                            style="width: 90px">
+                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small" style="width: 90px">
                             <el-option label="normal" value="normal"> </el-option>
                             <el-option label="bold" value="bold"> </el-option>
                         </el-select>
@@ -52,8 +53,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">主题</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small"
-                            style="width: 130px">
+                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small" style="width: 130px">
                             <el-option label="vs" value="vs"> </el-option>
                             <el-option label="vs-dark" value="vs-dark"> </el-option>
                             <el-option label="SolarizedLight" value="SolarizedLight"> </el-option>
@@ -66,36 +66,31 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.primary" size="small"
-                            @change="onColorPickerChange('primary')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.primary" size="small" @change="onColorPickerChange('primary')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">success</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.success" size="small"
-                            @change="onColorPickerChange('success')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.success" size="small" @change="onColorPickerChange('success')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">info</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')">
-                        </el-color-picker>
+                        <el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.warning" size="small"
-                            @change="onColorPickerChange('warning')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.warning" size="small" @change="onColorPickerChange('warning')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')">
-                        </el-color-picker>
+                        <el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')"> </el-color-picker>
                     </div>
                 </div>
 
@@ -104,46 +99,37 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.topBar" size="small"
-                            @change="onBgColorPickerChange('topBar')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.menuBar" size="small"
-                            @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.columnsMenuBar" size="small"
-                            @change="onBgColorPickerChange('columnsMenuBar')">
-                        </el-color-picker>
+                        <el-color-picker v-model="themeConfig.columnsMenuBar" size="small" @change="onBgColorPickerChange('columnsMenuBar')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.topBarColor" size="small"
-                            @change="onBgColorPickerChange('topBarColor')">
-                        </el-color-picker>
+                        <el-color-picker v-model="themeConfig.topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.menuBarColor" size="small"
-                            @change="onBgColorPickerChange('menuBarColor')">
-                        </el-color-picker>
+                        <el-color-picker v-model="themeConfig.menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small"
-                            @change="onBgColorPickerChange('columnsMenuBarColor')">
+                        <el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small" @change="onBgColorPickerChange('columnsMenuBarColor')">
                         </el-color-picker>
                     </div>
                 </div>
@@ -162,15 +148,13 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt14">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景渐变</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isColumnsMenuBarColorGradual"
-                            @change="onColumnsMenuBarGradualChange"></el-switch>
+                        <el-switch v-model="themeConfig.isColumnsMenuBarColorGradual" @change="onColumnsMenuBarGradualChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt14">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isMenuBarColorHighlight"
-                            @change="onMenuBarHighlightChange"></el-switch>
+                        <el-switch v-model="themeConfig.isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
                     </div>
                 </div>
 
@@ -194,12 +178,10 @@
                         <el-switch v-model="themeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15"
-                    :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
+                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'"
-                            @change="onClassicSplitMenuChange">
+                        <el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'" @change="onClassicSplitMenuChange">
                         </el-switch>
                     </div>
                 </div>
@@ -212,8 +194,15 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt11">
                     <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-input-number v-model="themeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
-                            @change="setLocalThemeConfig" size="small" style="width: 90px">
+                        <el-input-number
+                            v-model="themeConfig.lockScreenTime"
+                            controls-position="right"
+                            :min="0"
+                            :max="9999"
+                            @change="setLocalThemeConfig"
+                            size="small"
+                            style="width: 90px"
+                        >
                         </el-input-number>
                     </div>
                 </div>
@@ -226,12 +215,14 @@
                         <el-switch v-model="themeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15"
-                    :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
+                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启Breadcrumb</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="themeConfig.isBreadcrumb" :disabled="themeConfig.layout === 'transverse'"
-                            @change="onIsBreadcrumbChange"></el-switch>
+                        <el-switch
+                            v-model="themeConfig.isBreadcrumb"
+                            :disabled="themeConfig.layout === 'transverse'"
+                            @change="onIsBreadcrumbChange"
+                        ></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
@@ -288,8 +279,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px"
-                            @change="setLocalThemeConfig">
+                        <el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
                             <el-option label="风格1" value="tags-style-one"></el-option>
                             <el-option label="风格2" value="tags-style-two"></el-option>
                             <el-option label="风格3" value="tags-style-three"></el-option>
@@ -299,8 +289,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px"
-                            @change="setLocalThemeConfig">
+                        <el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
                             <el-option label="slide-right" value="slide-right"></el-option>
                             <el-option label="slide-left" value="slide-left"></el-option>
                             <el-option label="opacitys" value="opacitys"></el-option>
@@ -310,8 +299,7 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small"
-                            style="width: 90px" @change="setLocalThemeConfig">
+                        <el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small" style="width: 90px" @change="setLocalThemeConfig">
                             <el-option label="圆角" value="columns-round"></el-option>
                             <el-option label="卡片" value="columns-card"></el-option>
                         </el-select>
@@ -323,16 +311,14 @@
                 <div class="layout-drawer-content-flex">
                     <!-- defaults 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
-                        <section class="el-container el-circular"
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
+                        <section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
                             <aside class="el-aside" style="width: 20px"></aside>
                             <section class="el-container is-vertical">
                                 <header class="el-header" style="height: 10px"></header>
                                 <main class="el-main"></main>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">默认</p>
                             </div>
@@ -340,8 +326,7 @@
                     </div>
                     <!-- classic 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('classic')">
-                        <section class="el-container is-vertical el-circular"
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
+                        <section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
                             <header class="el-header" style="height: 10px"></header>
                             <section class="el-container">
                                 <aside class="el-aside" style="width: 20px"></aside>
@@ -350,8 +335,7 @@
                                 </section>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">经典</p>
                             </div>
@@ -359,8 +343,7 @@
                     </div>
                     <!-- transverse 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
-                        <section class="el-container is-vertical el-circular"
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
+                        <section class="el-container is-vertical el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
                             <header class="el-header" style="height: 10px"></header>
                             <section class="el-container">
                                 <section class="el-container is-vertical">
@@ -368,8 +351,7 @@
                                 </section>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">横向</p>
                             </div>
@@ -377,8 +359,7 @@
                     </div>
                     <!-- columns 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('columns')">
-                        <section class="el-container el-circular"
-                            :class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
+                        <section class="el-container el-circular" :class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
                             <aside class="el-aside-dark" style="width: 10px"></aside>
                             <aside class="el-aside" style="width: 20px"></aside>
                             <section class="el-container is-vertical">
@@ -386,8 +367,7 @@
                                 <main class="el-main"></main>
                             </section>
                         </section>
-                        <div class="layout-tips-warp"
-                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
+                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">分栏</p>
                             </div>
@@ -395,10 +375,15 @@
                     </div>
                 </div>
                 <div class="copy-config">
-                    <el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false">
-                    </el-alert>
-                    <el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
-                        ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
+                    <el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false"> </el-alert>
+                    <el-button
+                        size="small"
+                        class="copy-config-btn"
+                        icon="el-icon-document-copy"
+                        type="primary"
+                        ref="copyConfigBtnRef"
+                        @click="onCopyConfigClick($event.target)"
+                        >一键复制配置
                     </el-button>
                 </div>
             </el-scrollbar>
@@ -412,8 +397,8 @@ import { ElMessage } from 'element-plus';
 import ClipboardJS from 'clipboard';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
-import { getLightColor } from '@/common/utils/theme.ts';
-import { setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
+import { getLightColor } from '@/common/utils/theme';
+import { setLocal, getLocal, removeLocal } from '@/common/utils/storage';
 import mittBus from '@/common/utils/mitt';
 
 const copyConfigBtnRef = ref();
@@ -428,7 +413,7 @@ const onColorPickerChange = (color: string) => {
 const setPropertyFun = (color: string, targetVal: any) => {
     document.documentElement.style.setProperty(color, targetVal);
     for (let i = 1; i <= 9; i++) {
-        document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10));
+        document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10) as any);
     }
 };
 // 2、菜单 / 顶栏
@@ -449,11 +434,7 @@ const onMenuBarGradualChange = () => {
 };
 // 2、菜单 / 顶栏 --> 分栏菜单背景渐变
 const onColumnsMenuBarGradualChange = () => {
-    setGraduaFun(
-        '.layout-container .layout-columns-aside',
-        themeConfig.value.isColumnsMenuBarColorGradual,
-        themeConfig.value.columnsMenuBar
-    );
+    setGraduaFun('.layout-container .layout-columns-aside', themeConfig.value.isColumnsMenuBarColorGradual, themeConfig.value.columnsMenuBar);
 };
 // 2、菜单 / 顶栏 --> 背景渐变函数
 const setGraduaFun = (el: string, bool: boolean, color: string) => {
@@ -522,17 +503,14 @@ const onSortableTagsViewChange = () => {
     mittBus.emit('openOrCloseSortable');
     setLocalThemeConfig();
 };
-// 4、界面显示 --> 灰色模式/色弱模式
+// 4、界面显示 --> 暗模式/灰色模式/色弱模式
 const onAddFilterChange = (attr: string) => {
     if (attr === 'grayscale') {
         if (themeConfig.value.isGrayscale) themeConfig.value.isInvert = false;
     } else {
         if (themeConfig.value.isInvert) themeConfig.value.isGrayscale = false;
     }
-    const cssAttr =
-        attr === 'grayscale'
-            ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})`
-            : `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
+    const cssAttr = attr === 'grayscale' ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})` : `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
     const appEle: any = document.querySelector('#app');
     appEle.setAttribute('style', `filter: ${cssAttr}`);
     setLocalThemeConfig();
@@ -549,49 +527,37 @@ const onSetLayout = (layout: string) => {
 };
 // 设置布局切换，重置主题样式
 const initSetLayoutChange = () => {
+    // themeConfig.value.menuBar = '#FFFFFF';
+    // themeConfig.value.menuBarColor = '#606266';
+    // themeConfig.value.topBar = '#ffffff';
+    // themeConfig.value.topBarColor = '#606266';
+
     if (themeConfig.value.layout === 'classic') {
         themeConfig.value.isShowLogo = true;
         themeConfig.value.isBreadcrumb = true;
         themeConfig.value.isCollapse = false;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBar = '#FFFFFF';
-        themeConfig.value.menuBarColor = '#606266';
-        themeConfig.value.topBar = '#ffffff';
-        themeConfig.value.topBarColor = '#606266';
-        initLayoutChangeFun();
     } else if (themeConfig.value.layout === 'transverse') {
         themeConfig.value.isShowLogo = true;
         themeConfig.value.isBreadcrumb = false;
         themeConfig.value.isCollapse = false;
-        themeConfig.value.isTagsview = false;
+        themeConfig.value.isTagsview = true;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBarColor = '#FFFFFF';
-        themeConfig.value.topBar = '#545c64';
-        themeConfig.value.topBarColor = '#FFFFFF';
-        initLayoutChangeFun();
     } else if (themeConfig.value.layout === 'columns') {
         themeConfig.value.isShowLogo = true;
         themeConfig.value.isBreadcrumb = true;
         themeConfig.value.isCollapse = false;
         themeConfig.value.isTagsview = true;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBar = '#FFFFFF';
-        themeConfig.value.menuBarColor = '#606266';
-        themeConfig.value.topBar = '#ffffff';
-        themeConfig.value.topBarColor = '#606266';
-        initLayoutChangeFun();
     } else {
         themeConfig.value.isShowLogo = false;
         themeConfig.value.isBreadcrumb = true;
         themeConfig.value.isCollapse = false;
         themeConfig.value.isTagsview = true;
         themeConfig.value.isClassicSplitMenu = false;
-        themeConfig.value.menuBar = '#545c64';
-        themeConfig.value.menuBarColor = '#eaeaea';
-        themeConfig.value.topBar = '#FFFFFF';
-        themeConfig.value.topBarColor = '#606266';
-        initLayoutChangeFun();
     }
+
+    initLayoutChangeFun();
 };
 // 设置布局切换函数
 const initLayoutChangeFun = () => {
@@ -660,6 +626,7 @@ onMounted(() => {
             onMenuBarHighlightChange();
             themeConfig.value.isCollapse = false;
         });
+
         window.addEventListener('load', () => {
             // 刷新页面时，设置了值，直接取缓存中的值进行初始化
             setTimeout(() => {
@@ -691,7 +658,7 @@ onMounted(() => {
                 }
                 // // 语言国际化
                 // if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
-            }, 1100);
+            }, 100);
         });
     });
 });
@@ -701,7 +668,7 @@ onUnmounted(() => {
     mittBus.off('layoutMobileResize');
 });
 
-defineExpose({openDrawer})
+defineExpose({ openDrawer });
 </script>
 
 <style scoped lang="scss">
@@ -767,7 +734,7 @@ defineExpose({openDrawer})
 
             .drawer-layout-active {
                 border: 1px solid;
-                border-color: var(--color-primary);
+                border-color: var(--el-color-primary);
             }
 
             .layout-tips-warp,
@@ -778,7 +745,7 @@ defineExpose({openDrawer})
                 top: 50%;
                 transform: translate(-50%, -50%);
                 border: 1px solid;
-                border-color: var(--color-primary-light-4);
+                border-color: var(--el-color-primary-light-4);
                 border-radius: 100%;
                 padding: 4px;
 
@@ -788,7 +755,7 @@ defineExpose({openDrawer})
                     height: 30px;
                     z-index: 9;
                     border: 1px solid;
-                    border-color: var(--color-primary-light-4);
+                    border-color: var(--el-color-primary-light-4);
                     border-radius: 100%;
 
                     .layout-tips-txt {
@@ -799,7 +766,7 @@ defineExpose({openDrawer})
                         line-height: 1;
                         letter-spacing: 2px;
                         white-space: nowrap;
-                        color: var(--color-primary-light-4);
+                        color: var(--el-color-primary-light-4);
                         text-align: center;
                         transform: rotate(30deg);
                         left: -1px;
@@ -813,14 +780,14 @@ defineExpose({openDrawer})
 
             .layout-tips-warp-active {
                 border: 1px solid;
-                border-color: var(--color-primary);
+                border-color: var(--el-color-primary);
 
                 .layout-tips-box {
                     border: 1px solid;
-                    border-color: var(--color-primary);
+                    border-color: var(--el-color-primary);
 
                     .layout-tips-txt {
-                        color: var(--color-primary) !important;
+                        color: var(--el-color-primary) !important;
                         background-color: #e9eef3 !important;
                     }
                 }
@@ -830,20 +797,20 @@ defineExpose({openDrawer})
                 .el-circular {
                     transition: all 0.3s ease-in-out;
                     border: 1px solid;
-                    border-color: var(--color-primary);
+                    border-color: var(--el-color-primary);
                 }
 
                 .layout-tips-warp {
                     transition: all 0.3s ease-in-out;
-                    border-color: var(--color-primary);
+                    border-color: var(--el-color-primary);
 
                     .layout-tips-box {
                         transition: inherit;
-                        border-color: var(--color-primary);
+                        border-color: var(--el-color-primary);
 
                         .layout-tips-txt {
                             transition: inherit;
-                            color: var(--color-primary) !important;
+                            color: var(--el-color-primary) !important;
                             background-color: #e9eef3 !important;
                         }
                     }
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue
index 20498980..f4067305 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue
@@ -1,6 +1,16 @@
 <template>
     <div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
-        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+        <div class="layout-navbars-breadcrumb-user-icon">
+            <el-switch
+                @change="switchDark(state.isDark)"
+                v-model="state.isDark"
+                active-action-icon="Moon"
+                inactive-action-icon="Sunny"
+                style="--el-switch-off-color: #c4c9c4; --el-switch-on-color: #2c2c2c"
+                class="dark-icon"
+            />
+        </div>
+        <!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
             <div class="layout-navbars-breadcrumb-user-icon">
                 <el-icon title="组件大小">
                     <plus />
@@ -13,7 +23,7 @@
                     <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
                 </el-dropdown-menu>
             </template>
-        </el-dropdown>
+        </el-dropdown> -->
         <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
             <el-icon title="菜单搜索">
                 <search />
@@ -65,7 +75,7 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUser">
-import { ref, computed, reactive, onMounted } from 'vue';
+import { ref, computed, reactive, onMounted, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import screenfull from 'screenfull';
@@ -82,6 +92,7 @@ import openApi from '@/common/openApi';
 const router = useRouter();
 const searchRef = ref();
 const state = reactive({
+    isDark: false,
     isScreenfull: false,
     isShowUserNewsPopover: false,
     disabledI18n: 'zh-cn',
@@ -152,6 +163,19 @@ const onHandleCommandClick = (path: string) => {
     }
 };
 
+const switchDark = (isDark: boolean) => {
+    themeConfig.value.isDark = isDark;
+    setLocal('themeConfig', themeConfig.value);
+    const body = document.documentElement as HTMLElement;
+    if (isDark) {
+        body.setAttribute('class', 'dark');
+        themeConfig.value.editorTheme = 'vs-dark';
+    } else {
+        body.setAttribute('class', '');
+        themeConfig.value.editorTheme = 'SolarizedLight';
+    }
+};
+
 // // 菜单搜索点击
 const onSearchClick = () => {
     searchRef.value.openSearch();
@@ -188,6 +212,10 @@ const initComponentSize = () => {
 // 页面加载时
 onMounted(() => {
     if (getLocal('themeConfig')) {
+        const isDark = themeConfig.value.isDark;
+        state.isDark = isDark;
+        switchDark(isDark);
+
         initComponentSize();
     }
 });
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/userNews.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/userNews.vue
index b60f7904..c08f5dec 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/userNews.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/userNews.vue
@@ -39,9 +39,7 @@ export default {
             state.newsList = [];
         };
         // 前往通知中心点击
-        const toMsgCenter = () => {
-            
-        };
+        const toMsgCenter = () => {};
         return {
             onAllReadClick,
             toMsgCenter,
@@ -62,7 +60,7 @@ export default {
         height: 35px;
         align-items: center;
         .head-box-btn {
-            color: var(--color-primary);
+            color: var(--el-color-primary);
             font-size: 13px;
             cursor: pointer;
             opacity: 0.8;
@@ -90,7 +88,7 @@ export default {
     }
     .foot-box {
         height: 35px;
-        color: var(--color-primary);
+        color: var(--el-color-primary);
         font-size: 13px;
         cursor: pointer;
         opacity: 0.8;
diff --git a/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue b/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue
index af48c8ab..ae526410 100644
--- a/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue
@@ -2,29 +2,43 @@
     <div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': themeConfig.layout === 'classic' }">
         <el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
             <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
-                <li v-for="(v, k) in state.tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
-                    :class="{ 'is-active': isActive(v) }" @contextmenu.prevent="onContextmenu(v, $event)"
-                    @click="onTagsClick(v, k)" :ref="
+                <li
+                    v-for="(v, k) in state.tagsViewList"
+                    :key="k"
+                    class="layout-navbars-tagsview-ul-li"
+                    :data-name="v.name"
+                    :class="{ 'is-active': isActive(v) }"
+                    @contextmenu.prevent="onContextmenu(v, $event)"
+                    @click="onTagsClick(v, k)"
+                    :ref="
                         (el) => {
                             if (el) tagsRefs[k] = el;
                         }
-                    ">
-                    <SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14"
-                        v-if="isActive(v)" />
-                    <SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont"
-                        v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
+                    "
+                >
+                    <SvgIcon name="iconfont icon-tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)" />
+                    <SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
                     <span>{{ v.meta.title }}</span>
                     <template v-if="isActive(v)">
-                        <SvgIcon name="RefreshRight" class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
-                            @click.stop="refreshCurrentTagsView($route.fullPath)" />
-                        <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
+                        <SvgIcon
+                            name="RefreshRight"
+                            class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
+                            @click.stop="refreshCurrentTagsView($route.fullPath)"
+                        />
+                        <SvgIcon
+                            name="Close"
+                            class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
                             v-if="!v.meta.isAffix"
-                            @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
+                            @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
+                        />
                     </template>
 
-                    <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
+                    <SvgIcon
+                        name="Close"
+                        class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
                         v-if="!v.meta.isAffix"
-                        @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
+                        @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
+                    />
                 </li>
             </ul>
         </el-scrollbar>
@@ -106,8 +120,8 @@ const addTagsView = (path: string, to: any = null) => {
             return false;
         }
     }
-    
-    const tagView = { ...to }
+
+    const tagView = { ...to };
     // 防止Converting circular structure to JSON错误
     tagView.matched = null;
     tagView.redirectedFrom = null;
@@ -135,7 +149,7 @@ const closeCurrentTagsView = (path: string) => {
                     let next;
                     // 最后一个且高亮时
                     if (state.tagsViewList.length === k) {
-                        next = k !== arr.length ? arr[k] : arr[arr.length - 1]
+                        next = k !== arr.length ? arr[k] : arr[arr.length - 1];
                     } else {
                         next = arr[k];
                     }
@@ -366,8 +380,8 @@ onBeforeRouteUpdate((to) => {
 
 <style scoped lang="scss">
 .layout-navbars-tagsview {
-    background-color: var(--el-color-white);
-    border-bottom: 1px solid var(--next-border-color-light);
+    background-color: var(--bg-main-color);
+    border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
     position: relative;
     z-index: 4;
 
diff --git a/mayfly_go_web/src/views/login/index.vue b/mayfly_go_web/src/views/login/index.vue
index 6e393834..ccb077be 100644
--- a/mayfly_go_web/src/views/login/index.vue
+++ b/mayfly_go_web/src/views/login/index.vue
@@ -107,7 +107,7 @@ const oauth2Login = () => {
         display: flex;
         align-items: center;
         font-size: 20px;
-        color: var(--color-primary);
+        color: var(--el-color-primary);
         letter-spacing: 2px;
         width: 90%;
         transform: translateX(-50%);
@@ -121,7 +121,7 @@ const oauth2Login = () => {
         left: 50%;
         transform: translate(-50%, -50%) translate3d(0, 0, 0);
         background-color: rgba(255, 255, 255, 0.99);
-        box-shadow: 0 2px 12px 0 var(--color-primary-light-5);
+        box-shadow: 0 2px 12px 0 var(--el-color-primary-light-5);
         border-radius: 4px;
         transition: height 0.2s linear;
         height: 490px;
diff --git a/mayfly_go_web/src/views/ops/component/TagTree.vue b/mayfly_go_web/src/views/ops/component/TagTree.vue
index 33eaf1f6..c7e77e81 100644
--- a/mayfly_go_web/src/views/ops/component/TagTree.vue
+++ b/mayfly_go_web/src/views/ops/component/TagTree.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="instances-box">
+    <div class="tag-tree">
         <el-row type="flex" justify="space-between">
             <el-col :span="24" class="el-scrollbar flex-auto" style="overflow: auto">
                 <el-input v-model="filterText" placeholder="输入关键字->搜索已展开节点信息" clearable size="small" class="mb5" />
@@ -92,7 +92,7 @@ onMounted(async () => {
 });
 
 const setHeight = () => {
-    state.height = window.innerHeight - 147 + 'px';
+    state.height = window.innerHeight - 157 + 'px';
 };
 
 watch(filterText, (val) => {
@@ -168,11 +168,13 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
-.instances-box {
+<style lang="scss" scoped>
+.tag-tree {
     overflow: 'auto';
     position: relative;
 
+    border: 1px solid var(--el-border-color-light, #ebeef5);
+
     .el-tree {
         display: inline-block;
         min-width: 100%;
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 93f28270..6b467316 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-row>
+        <el-row class="mb5">
             <el-col :span="4">
                 <el-button type="primary" icon="plus" @click="addQueryTab({ id: nowDbInst.id, dbs: nowDbInst.databases.split(' ') }, state.db)" size="small"
                     >新建查询</el-button
@@ -23,7 +23,7 @@
             </el-col>
         </el-row>
         <el-row type="flex">
-            <el-col :span="4" style="border-left: 1px solid #eee; margin-top: 10px">
+            <el-col :span="4">
                 <tag-tree
                     ref="tagTreeRef"
                     @node-click="nodeClick"
@@ -64,7 +64,7 @@
                 </tag-tree>
             </el-col>
             <el-col :span="20">
-                <el-container id="data-exec" style="border-left: 1px solid #eee; margin-top: 10px">
+                <el-container id="data-exec" class="mt10">
                     <el-tabs @tab-remove="onRemoveTab" @tab-change="onTabChange" style="width: 100%" v-model="state.activeName">
                         <el-tab-pane closable v-for="dt in state.tabs.values()" :key="dt.key" :label="dt.key" :name="dt.key">
                             <table-data
@@ -458,11 +458,6 @@ const reloadTables = (nodeKey: string) => {
     text-align: center;
 }
 
-.el-tabs__header {
-    padding: 0 10px;
-    background-color: #fff;
-}
-
 #data-exec {
     min-height: calc(100vh - 155px);
 
diff --git a/mayfly_go_web/src/views/ops/db/component/tab/Query.vue b/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
index ba95cb4c..99d15fbc 100644
--- a/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
+++ b/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
@@ -902,7 +902,7 @@ select * from invisit v where`.match(/(join|from)\s+(\w*-?\w*\.?\w+)\s*(as)?\s*(
 .sqlEditor {
     font-size: 8pt;
     font-weight: 600;
-    border: 1px solid #ccc;
+    border: 1px solid var(--el-border-color-light, #ebeef5);
 }
 
 .update_field_active {
diff --git a/mayfly_go_web/src/views/ops/machine/ScriptManage.vue b/mayfly_go_web/src/views/ops/machine/ScriptManage.vue
index 319facb9..839b2bd8 100644
--- a/mayfly_go_web/src/views/ops/machine/ScriptManage.vue
+++ b/mayfly_go_web/src/views/ops/machine/ScriptManage.vue
@@ -8,8 +8,6 @@
             :show-close="true"
             :before-close="handleClose"
             width="55%"
-            draggable
-            append-to-body
         >
             <page-table
                 ref="pageTableRef"
diff --git a/mayfly_go_web/src/views/ops/machine/file/MachineFile.vue b/mayfly_go_web/src/views/ops/machine/file/MachineFile.vue
index 47e380b0..143168af 100755
--- a/mayfly_go_web/src/views/ops/machine/file/MachineFile.vue
+++ b/mayfly_go_web/src/views/ops/machine/file/MachineFile.vue
@@ -22,7 +22,7 @@
             >
                 <el-table-column type="selection" width="30" />
 
-                <el-table-column prop="name" label="名称" show-overflow-tooltip>
+                <el-table-column prop="name" label="名称">
                     <template #header>
                         <div class="machine-file-table-header">
                             <div>
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
index aa029417..fc1f0cbf 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
@@ -35,31 +35,31 @@
             </el-col>
 
             <el-col :span="20">
-                <div id="mongo-tab" style="border: 1px solid #eee; margin-top: 1px">
+                <div id="mongo-tab" class="ml5" style="border: 1px solid var(--el-border-color-light, #ebeef5); margin-top: 1px">
                     <el-row v-if="nowColl">
                         <el-descriptions :column="10" size="small" border>
                             <!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
 
                             <el-descriptions-item label="ns" label-align="right">
-                                {{ nowColl.stats.ns }}
+                                {{ nowColl.stats?.ns }}
                             </el-descriptions-item>
                             <el-descriptions-item label="count" label-align="right">
-                                {{ nowColl.stats.count }}
+                                {{ nowColl.stats?.count }}
                             </el-descriptions-item>
                             <el-descriptions-item label="avgObjSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.avgObjSize) }}
+                                {{ formatByteSize(nowColl.stats?.avgObjSize) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="size" label-align="right">
-                                {{ formatByteSize(nowColl.stats.size) }}
+                                {{ formatByteSize(nowColl.stats?.size) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="totalSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.totalSize) }}
+                                {{ formatByteSize(nowColl.stats?.totalSize) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="storageSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.storageSize) }}
+                                {{ formatByteSize(nowColl.stats?.storageSize) }}
                             </el-descriptions-item>
                             <el-descriptions-item label="freeStorageSize" label-align="right">
-                                {{ formatByteSize(nowColl.stats.freeStorageSize) }}
+                                {{ formatByteSize(nowColl.stats?.freeStorageSize) }}
                             </el-descriptions-item>
                         </el-descriptions>
                     </el-row>
diff --git a/mayfly_go_web/src/views/ops/redis/DataOperation.vue b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
index debd25d7..7a0fbac5 100644
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -3,7 +3,7 @@
         <el-row>
             <el-col :span="4">
                 <el-row type="flex" justify="space-between">
-                    <el-col :span="24" class="el-scrollbar flex-auto">
+                    <el-col :span="24" class="flex-auto">
                         <tag-tree @node-click="nodeClick" :load="loadNode">
                             <template #prefix="{ data }">
                                 <span v-if="data.type == NodeType.Redis">
@@ -85,7 +85,13 @@
                     </el-row>
 
                     <el-tree
-                        :style="{ maxHeight: state.keyTreeHeight, height: state.keyTreeHeight, overflow: 'auto', border: '1px solid #e1f3d8' }"
+                        :style="{
+                            maxHeight: state.keyTreeHeight,
+                            height: state.keyTreeHeight,
+                            overflow: 'auto',
+                            border: '1px solid var(--el-border-color-light, #ebeef5)',
+                            marginLeft: '5px',
+                        }"
                         ref="keyTreeRef"
                         :highlight-current="true"
                         :data="keyTreeData"
@@ -244,7 +250,7 @@ onMounted(async () => {
 });
 
 const setHeight = () => {
-    state.keyTreeHeight = window.innerHeight - 177 + 'px';
+    state.keyTreeHeight = window.innerHeight - 174 + 'px';
 };
 
 /**
diff --git a/mayfly_go_web/src/views/ops/redis/FormatViewer.vue b/mayfly_go_web/src/views/ops/redis/FormatViewer.vue
index edb2dc9d..ef5f37f8 100644
--- a/mayfly_go_web/src/views/ops/redis/FormatViewer.vue
+++ b/mayfly_go_web/src/views/ops/redis/FormatViewer.vue
@@ -93,7 +93,7 @@ defineExpose({ getContent });
 
 /*outline same with text viewer's .el-textarea__inner*/
 .format-viewer-container .text-formated-container {
-    border: 1px solid #dcdfe6;
+    border: 1px solid var(--el-border-color-light, #ebeef5);
     padding: 5px 10px;
     border-radius: 4px;
     clear: both;
diff --git a/mayfly_go_web/src/views/personal/index.vue b/mayfly_go_web/src/views/personal/index.vue
index b4940184..97029232 100644
--- a/mayfly_go_web/src/views/personal/index.vue
+++ b/mayfly_go_web/src/views/personal/index.vue
@@ -294,7 +294,7 @@ const getMsgTypeDesc = (type: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '../../theme/mixins/mixins.scss';
+@import '../../theme/mixins/index.scss';
 
 .personal {
     .personal-user {
@@ -359,7 +359,7 @@ const getMsgTypeDesc = (type: number) => {
             font-size: 13px;
 
             &:hover {
-                color: var(--color-primary);
+                color: var(--el-color-primary);
                 cursor: pointer;
             }
         }
@@ -383,7 +383,7 @@ const getMsgTypeDesc = (type: number) => {
                     }
 
                     & a:hover {
-                        color: var(--color-primary);
+                        color: var(--el-color-primary);
                         cursor: pointer;
                     }
                 }
@@ -447,7 +447,7 @@ const getMsgTypeDesc = (type: number) => {
                 left: 0;
                 top: 50%;
                 transform: translateY(-50%);
-                background: var(--color-primary);
+                background: var(--el-color-primary);
             }
         }
 
diff --git a/mayfly_go_web/yarn.lock b/mayfly_go_web/yarn.lock
index fabe6e81..75632f5b 100644
--- a/mayfly_go_web/yarn.lock
+++ b/mayfly_go_web/yarn.lock
@@ -804,10 +804,10 @@ echarts@^5.4.0:
     tslib "2.3.0"
     zrender "5.4.0"
 
-element-plus@^2.3.8:
-  version "2.3.8"
-  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.8.tgz#46032abe1a712abfb65932f146ee19281312a9cf"
-  integrity sha512-yHQR0/tG2LvPkpGUt7Te/hPmP2XW/BytBNUbx+EFO54VnGCOE3upmQcVffNp1PLgwg9sthYDXontUWpnpmLPJw==
+element-plus@^2.3.12:
+  version "2.3.12"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.12.tgz#d3c91d0c701b2b3e67d06a351cb0c42dcc46460e"
+  integrity sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.0.6"
@@ -1414,10 +1414,10 @@ mitt@^3.0.1:
   resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
-monaco-editor@^0.41.0:
-  version "0.41.0"
-  resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.41.0.tgz#2ba31e5af7e3ae93ac5d7467ec2772ef9b3d967f"
-  integrity sha512-1o4olnZJsiLmv5pwLEAmzHTE/5geLKQ07BrGxlF4Ri/AXAc2yyDGZwHjiTqD8D/ROKUZmwMA28A+yEowLNOEcA==
+monaco-editor@^0.43.0:
+  version "0.43.0"
+  resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.43.0.tgz#cb02a8d23d1249ad00b7cffe8bbecc2ac09d4baf"
+  integrity sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q==
 
 monaco-sql-languages@^0.11.0:
   version "0.11.0"
diff --git a/server/config.yml.example b/server/config.yml.example
index 929884d5..88106c0b 100644
--- a/server/config.yml.example
+++ b/server/config.yml.example
@@ -1,7 +1,7 @@
 server:
   # debug release test
   model: release
-  port: 8888
+  port: 18888
   cors: true
   tls:
     enable: false