From 9097fa386687d077a480033d9978cfbd59e0e3a0 Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Fri, 15 Oct 2021 12:02:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E4=BF=AE=E5=A4=8Dvertical=20s?=
 =?UTF-8?q?ider=E8=87=AA=E9=80=82=E5=BA=94=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                | 208 +++++++++---------
 src/AppProvider.vue                           |  23 +-
 src/components/custom/ButtonTab/index.vue     |  15 +-
 .../ChromeTab/components/SvgRadiusBg.vue      |  17 +-
 src/components/custom/ChromeTab/index.vue     |   8 +-
 .../VerticalMixSider/components/MixMenu.vue   |   2 +-
 .../components/MixMenuDrawer.vue              |   4 +-
 .../GlobalTab/components/MultiTab/index.vue   |   3 +-
 .../components/DarkMode/index.vue             |   4 +-
 .../components/NavMode/components/NavType.vue |   4 +-
 .../components/common/GlobalLogo.vue          |   2 +-
 src/utils/common/color.ts                     |   9 +
 src/utils/common/index.ts                     |   2 +-
 src/utils/index.ts                            |   1 +
 src/views/dashboard/workbench/index.vue       |  56 +++--
 .../login/components/PwdLogin/index.vue       |   2 +-
 src/views/system/login/index.vue              |   2 +-
 windi.config.ts                               |   4 +-
 19 files changed, 227 insertions(+), 143 deletions(-)

diff --git a/package.json b/package.json
index 1ebb26c4..430c897f 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
     "dotenv": "^10.0.0",
-    "eslint": "^8.0.0",
+    "eslint": "^8.0.1",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.2",
@@ -74,7 +74,7 @@
     "vite": "^2.6.7",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-windicss": "^1.4.11",
-    "vue-tsc": "^0.28.3",
+    "vue-tsc": "^0.28.4",
     "vueuc": "^0.4.13",
     "windicss": "^3.1.9"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5c1e8228..028abc0a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,7 +30,7 @@ specifiers:
   cz-customizable: ^6.3.0
   dayjs: ^1.10.7
   dotenv: ^10.0.0
-  eslint: ^8.0.0
+  eslint: ^8.0.1
   eslint-config-airbnb-base: ^14.2.1
   eslint-config-prettier: ^8.3.0
   eslint-plugin-import: ^2.25.2
@@ -55,7 +55,7 @@ specifiers:
   vite-plugin-windicss: ^1.4.11
   vue: ^3.2.20
   vue-router: ^4.0.11
-  vue-tsc: ^0.28.3
+  vue-tsc: ^0.28.4
   vueuc: ^0.4.13
   windicss: ^3.1.9
 
@@ -79,8 +79,8 @@ devDependencies:
   '@iconify/vue': registry.nlark.com/@iconify/vue/3.0.0_vue@3.2.20
   '@types/chroma-js': registry.nlark.com/@types/chroma-js/2.1.3
   '@types/qs': registry.nlark.com/@types/qs/6.9.7
-  '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.0.0_d8f15b12d289fecfef32450ca1e4b77e
-  '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.0+typescript@4.4.4
+  '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.0.0_3b49a3094ddb22ccc5b4c2c2360792e0
+  '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.1+typescript@4.4.4
   '@vicons/antd': registry.nlark.com/@vicons/antd/0.11.0
   '@vicons/carbon': registry.nlark.com/@vicons/carbon/0.11.0
   '@vicons/fa': registry.nlark.com/@vicons/fa/0.11.0
@@ -91,18 +91,18 @@ devDependencies:
   '@vicons/tabler': registry.nlark.com/@vicons/tabler/0.11.0
   '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/1.9.3_vite@2.6.7
   '@vue/compiler-sfc': registry.npmmirror.com/@vue/compiler-sfc/3.2.20
-  '@vue/eslint-config-prettier': 6.0.0_2a213d29a7f7dca8d30992733d5451a0
-  '@vue/eslint-config-typescript': registry.npmmirror.com/@vue/eslint-config-typescript/8.0.0_397d49b4b5abc93f7164053ce18f06c9
+  '@vue/eslint-config-prettier': 6.0.0_25eba323c3088add261186b25106dbd0
+  '@vue/eslint-config-typescript': registry.npmmirror.com/@vue/eslint-config-typescript/8.0.0_567c2d4be752485c4cea80a96a29945e
   commitizen: registry.nlark.com/commitizen/4.2.4
   cz-conventional-changelog: registry.nlark.com/cz-conventional-changelog/3.3.0
   cz-customizable: registry.nlark.com/cz-customizable/6.3.0
   dotenv: registry.nlark.com/dotenv/10.0.0
-  eslint: registry.npmmirror.com/eslint/8.0.0
-  eslint-config-airbnb-base: 14.2.1_6b96620f3c208a79451effb9e91db827
-  eslint-config-prettier: registry.nlark.com/eslint-config-prettier/8.3.0_eslint@8.0.0
-  eslint-plugin-import: registry.npmmirror.com/eslint-plugin-import/2.25.2_eslint@8.0.0
-  eslint-plugin-prettier: registry.nlark.com/eslint-plugin-prettier/4.0.0_d9a06a67ccd5236c5645569c7624c2c9
-  eslint-plugin-vue: registry.npmmirror.com/eslint-plugin-vue/7.19.1_eslint@8.0.0
+  eslint: registry.npmmirror.com/eslint/8.0.1
+  eslint-config-airbnb-base: 14.2.1_0bad437c7dd0ba5835ba27f700b6b2a2
+  eslint-config-prettier: registry.nlark.com/eslint-config-prettier/8.3.0_eslint@8.0.1
+  eslint-plugin-import: registry.npmmirror.com/eslint-plugin-import/2.25.2_eslint@8.0.1
+  eslint-plugin-prettier: registry.nlark.com/eslint-plugin-prettier/4.0.0_15313026b01cdd263118061498e273ac
+  eslint-plugin-vue: registry.npmmirror.com/eslint-plugin-vue/7.19.1_eslint@8.0.1
   husky: registry.nlark.com/husky/7.0.2
   lint-staged: registry.npmmirror.com/lint-staged/11.2.3
   patch-package: registry.nlark.com/patch-package/6.4.7
@@ -116,22 +116,22 @@ devDependencies:
   vite: registry.npmmirror.com/vite/2.6.7_sass@1.43.2
   vite-plugin-html: registry.npmmirror.com/vite-plugin-html/2.1.1_vite@2.6.7
   vite-plugin-windicss: registry.npmmirror.com/vite-plugin-windicss/1.4.11_vite@2.6.7
-  vue-tsc: registry.npmmirror.com/vue-tsc/0.28.3_typescript@4.4.4
+  vue-tsc: registry.npmmirror.com/vue-tsc/0.28.4_typescript@4.4.4
   vueuc: registry.npmmirror.com/vueuc/0.4.13_vue@3.2.20
   windicss: registry.npmmirror.com/windicss/3.1.9
 
 packages:
 
-  /@vue/eslint-config-prettier/6.0.0_2a213d29a7f7dca8d30992733d5451a0:
+  /@vue/eslint-config-prettier/6.0.0_25eba323c3088add261186b25106dbd0:
     resolution: {integrity: sha1-rVkSswj0rkaEWOAqKwXbC50kZwA=, tarball: '@vue/eslint-config-prettier/download/@vue/eslint-config-prettier-6.0.0.tgz'}
     peerDependencies:
       eslint: '>= 5.0.0'
       eslint-plugin-prettier: ^3.1.0
       prettier: '>= 1.13.0'
     dependencies:
-      eslint: registry.npmmirror.com/eslint/8.0.0
-      eslint-config-prettier: registry.nlark.com/eslint-config-prettier/6.15.0_eslint@8.0.0
-      eslint-plugin-prettier: registry.nlark.com/eslint-plugin-prettier/4.0.0_d9a06a67ccd5236c5645569c7624c2c9
+      eslint: registry.npmmirror.com/eslint/8.0.1
+      eslint-config-prettier: registry.nlark.com/eslint-config-prettier/6.15.0_eslint@8.0.1
+      eslint-plugin-prettier: registry.nlark.com/eslint-plugin-prettier/4.0.0_15313026b01cdd263118061498e273ac
       prettier: registry.nlark.com/prettier/2.4.1
     dev: true
 
@@ -271,7 +271,7 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: true
 
-  /eslint-config-airbnb-base/14.2.1_6b96620f3c208a79451effb9e91db827:
+  /eslint-config-airbnb-base/14.2.1_0bad437c7dd0ba5835ba27f700b6b2a2:
     resolution: {integrity: sha1-ii6zhFXcWjElUBk7MZza7vBCzR4=, tarball: eslint-config-airbnb-base/download/eslint-config-airbnb-base-14.2.1.tgz}
     engines: {node: '>= 6'}
     peerDependencies:
@@ -279,8 +279,8 @@ packages:
       eslint-plugin-import: ^2.22.1
     dependencies:
       confusing-browser-globals: registry.nlark.com/confusing-browser-globals/1.0.10
-      eslint: registry.npmmirror.com/eslint/8.0.0
-      eslint-plugin-import: registry.npmmirror.com/eslint-plugin-import/2.25.2_eslint@8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
+      eslint-plugin-import: registry.npmmirror.com/eslint-plugin-import/2.25.2_eslint@8.0.1
       object.assign: 4.1.2
       object.entries: registry.nlark.com/object.entries/1.1.4
     dev: true
@@ -2128,7 +2128,7 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  registry.nlark.com/eslint-config-prettier/6.15.0_eslint@8.0.0:
+  registry.nlark.com/eslint-config-prettier/6.15.0_eslint@8.0.1:
     resolution: {integrity: sha1-f5P2y31FqS8VN6cOzAY2bhrG/tk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/eslint-config-prettier/download/eslint-config-prettier-6.15.0.tgz?cache=0&sync_timestamp=1619273822093&other_urls=https%3A%2F%2Fregistry.nlark.com%2Feslint-config-prettier%2Fdownload%2Feslint-config-prettier-6.15.0.tgz}
     id: registry.nlark.com/eslint-config-prettier/6.15.0
     name: eslint-config-prettier
@@ -2137,11 +2137,11 @@ packages:
     peerDependencies:
       eslint: '>=3.14.1'
     dependencies:
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       get-stdin: 6.0.0
     dev: true
 
-  registry.nlark.com/eslint-config-prettier/8.3.0_eslint@8.0.0:
+  registry.nlark.com/eslint-config-prettier/8.3.0_eslint@8.0.1:
     resolution: {integrity: sha1-90cbILb+ipqSVMxoRFQgKIai3Xo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/eslint-config-prettier/download/eslint-config-prettier-8.3.0.tgz?cache=0&sync_timestamp=1619273822093&other_urls=https%3A%2F%2Fregistry.nlark.com%2Feslint-config-prettier%2Fdownload%2Feslint-config-prettier-8.3.0.tgz}
     id: registry.nlark.com/eslint-config-prettier/8.3.0
     name: eslint-config-prettier
@@ -2150,7 +2150,7 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
     dev: true
 
   registry.nlark.com/eslint-import-resolver-node/0.3.6:
@@ -2162,7 +2162,7 @@ packages:
       resolve: registry.nlark.com/resolve/1.20.0
     dev: true
 
-  registry.nlark.com/eslint-plugin-prettier/4.0.0_d9a06a67ccd5236c5645569c7624c2c9:
+  registry.nlark.com/eslint-plugin-prettier/4.0.0_15313026b01cdd263118061498e273ac:
     resolution: {integrity: sha1-i5nR5LiySnYkcrRWeZICNhnLmOA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/eslint-plugin-prettier/download/eslint-plugin-prettier-4.0.0.tgz}
     id: registry.nlark.com/eslint-plugin-prettier/4.0.0
     name: eslint-plugin-prettier
@@ -2176,8 +2176,8 @@ packages:
       eslint-config-prettier:
         optional: true
     dependencies:
-      eslint: registry.npmmirror.com/eslint/8.0.0
-      eslint-config-prettier: registry.nlark.com/eslint-config-prettier/8.3.0_eslint@8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
+      eslint-config-prettier: registry.nlark.com/eslint-config-prettier/8.3.0_eslint@8.0.1
       prettier: registry.nlark.com/prettier/2.4.1
       prettier-linter-helpers: 1.0.0
     dev: true
@@ -2211,7 +2211,7 @@ packages:
       eslint-visitor-keys: registry.nlark.com/eslint-visitor-keys/1.3.0
     dev: true
 
-  registry.nlark.com/eslint-utils/3.0.0_eslint@8.0.0:
+  registry.nlark.com/eslint-utils/3.0.0_eslint@8.0.1:
     resolution: {integrity: sha1-iuuvrOc0W7M1WdsKHxOh0tSMNnI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/eslint-utils/download/eslint-utils-3.0.0.tgz}
     id: registry.nlark.com/eslint-utils/3.0.0
     name: eslint-utils
@@ -2220,7 +2220,7 @@ packages:
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       eslint-visitor-keys: registry.nlark.com/eslint-visitor-keys/2.1.0
     dev: true
 
@@ -4695,7 +4695,7 @@ packages:
       vue: registry.npmmirror.com/vue/3.2.20
     dev: false
 
-  registry.nlark.com/vue-eslint-parser/7.10.0_eslint@8.0.0:
+  registry.nlark.com/vue-eslint-parser/7.10.0_eslint@8.0.1:
     resolution: {integrity: sha1-6k5LEP0QqjXIp5rHg0iNirzSm+g=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vue-eslint-parser/download/vue-eslint-parser-7.10.0.tgz}
     id: registry.nlark.com/vue-eslint-parser/7.10.0
     name: vue-eslint-parser
@@ -4705,7 +4705,7 @@ packages:
       eslint: '>=5.0.0'
     dependencies:
       debug: registry.nlark.com/debug/4.3.2
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       eslint-scope: registry.nlark.com/eslint-scope/5.1.1
       eslint-visitor-keys: registry.nlark.com/eslint-visitor-keys/1.3.0
       espree: registry.nlark.com/espree/6.2.1
@@ -5042,10 +5042,10 @@ packages:
       chalk: registry.nlark.com/chalk/4.1.2
     dev: true
 
-  registry.npmmirror.com/@eslint/eslintrc/1.0.2:
-    resolution: {integrity: sha1-YESIT3+TxOzC0WlMdIbM6R7490Y=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@eslint/eslintrc/download/@eslint/eslintrc-1.0.2.tgz}
+  registry.npmmirror.com/@eslint/eslintrc/1.0.3:
+    resolution: {integrity: sha1-QfCMWXAlYF9nIlHcxOi+ZrXtc2Y=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@eslint/eslintrc/download/@eslint/eslintrc-1.0.3.tgz?cache=0&sync_timestamp=1634180518979&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40eslint%2Feslintrc%2Fdownload%2F%40eslint%2Feslintrc-1.0.3.tgz}
     name: '@eslint/eslintrc'
-    version: 1.0.2
+    version: 1.0.3
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: registry.nlark.com/ajv/6.12.6
@@ -5127,7 +5127,7 @@ packages:
     name: '@types/node'
     version: 16.6.2
 
-  registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.0.0_d8f15b12d289fecfef32450ca1e4b77e:
+  registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.0.0_3b49a3094ddb22ccc5b4c2c2360792e0:
     resolution: {integrity: sha1-7MfMadHm80K+tuqc+fvALJeiEqw=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-5.0.0.tgz}
     id: registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.0.0
     name: '@typescript-eslint/eslint-plugin'
@@ -5141,11 +5141,11 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/experimental-utils': registry.npmmirror.com/@typescript-eslint/experimental-utils/5.0.0_eslint@8.0.0+typescript@4.4.4
-      '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.0+typescript@4.4.4
+      '@typescript-eslint/experimental-utils': registry.npmmirror.com/@typescript-eslint/experimental-utils/5.0.0_eslint@8.0.1+typescript@4.4.4
+      '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.1+typescript@4.4.4
       '@typescript-eslint/scope-manager': registry.npmmirror.com/@typescript-eslint/scope-manager/5.0.0
       debug: registry.nlark.com/debug/4.3.2
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       functional-red-black-tree: registry.nlark.com/functional-red-black-tree/1.0.1
       ignore: registry.nlark.com/ignore/5.1.8
       regexpp: registry.nlark.com/regexpp/3.2.0
@@ -5156,7 +5156,7 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmmirror.com/@typescript-eslint/experimental-utils/5.0.0_eslint@8.0.0+typescript@4.4.4:
+  registry.npmmirror.com/@typescript-eslint/experimental-utils/5.0.0_eslint@8.0.1+typescript@4.4.4:
     resolution: {integrity: sha1-x9fmdEPfuf2TpdBg+3LJ6bVji7w=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-5.0.0.tgz}
     id: registry.npmmirror.com/@typescript-eslint/experimental-utils/5.0.0
     name: '@typescript-eslint/experimental-utils'
@@ -5169,15 +5169,15 @@ packages:
       '@typescript-eslint/scope-manager': registry.npmmirror.com/@typescript-eslint/scope-manager/5.0.0
       '@typescript-eslint/types': registry.npmmirror.com/@typescript-eslint/types/5.0.0
       '@typescript-eslint/typescript-estree': registry.npmmirror.com/@typescript-eslint/typescript-estree/5.0.0_typescript@4.4.4
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       eslint-scope: registry.nlark.com/eslint-scope/5.1.1
-      eslint-utils: registry.nlark.com/eslint-utils/3.0.0_eslint@8.0.0
+      eslint-utils: registry.nlark.com/eslint-utils/3.0.0_eslint@8.0.1
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.0+typescript@4.4.4:
+  registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.1+typescript@4.4.4:
     resolution: {integrity: sha1-UNG+Lg3vgtc+hjzOunSu6smXNZI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@typescript-eslint/parser/download/@typescript-eslint/parser-5.0.0.tgz}
     id: registry.npmmirror.com/@typescript-eslint/parser/5.0.0
     name: '@typescript-eslint/parser'
@@ -5194,7 +5194,7 @@ packages:
       '@typescript-eslint/types': registry.npmmirror.com/@typescript-eslint/types/5.0.0
       '@typescript-eslint/typescript-estree': registry.npmmirror.com/@typescript-eslint/typescript-estree/5.0.0_typescript@4.4.4
       debug: registry.nlark.com/debug/4.3.2
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       typescript: registry.npmmirror.com/typescript/4.4.4
     transitivePeerDependencies:
       - supports-color
@@ -5263,19 +5263,19 @@ packages:
       vite: registry.npmmirror.com/vite/2.6.7_sass@1.43.2
     dev: true
 
-  registry.npmmirror.com/@volar/code-gen/0.28.3:
-    resolution: {integrity: sha1-456PrMlWHmrJBtbzobvgfnV638I=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/code-gen/download/@volar/code-gen-0.28.3.tgz}
+  registry.npmmirror.com/@volar/code-gen/0.28.4:
+    resolution: {integrity: sha1-ozf+RudF1tpUNsK95WRbEggD1lw=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/code-gen/download/@volar/code-gen-0.28.4.tgz}
     name: '@volar/code-gen'
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.3
-      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.28.3
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.4
+      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.28.4
     dev: true
 
-  registry.npmmirror.com/@volar/html2pug/0.28.3:
-    resolution: {integrity: sha1-I8euUdMDCA00HFgDNwfYta6JOBs=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/html2pug/download/@volar/html2pug-0.28.3.tgz}
+  registry.npmmirror.com/@volar/html2pug/0.28.4:
+    resolution: {integrity: sha1-R1rLgx3I1ZJzfyVoLj5Wnsaq4mg=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/html2pug/download/@volar/html2pug-0.28.4.tgz}
     name: '@volar/html2pug'
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
       domelementtype: registry.nlark.com/domelementtype/2.2.0
       domhandler: registry.nlark.com/domhandler/4.2.2
@@ -5283,30 +5283,30 @@ packages:
       pug: registry.nlark.com/pug/3.0.2
     dev: true
 
-  registry.npmmirror.com/@volar/shared/0.28.3:
-    resolution: {integrity: sha1-gqIC715qXfOtlEnlgjzo/NVQ7Wk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/shared/download/@volar/shared-0.28.3.tgz}
+  registry.npmmirror.com/@volar/shared/0.28.4:
+    resolution: {integrity: sha1-97144WqS+D5zKWfjNoiG7vjnal0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/shared/download/@volar/shared-0.28.4.tgz}
     name: '@volar/shared'
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
       upath: registry.nlark.com/upath/2.0.1
       vscode-jsonrpc: registry.npmmirror.com/vscode-jsonrpc/8.0.0-next.2
       vscode-uri: registry.nlark.com/vscode-uri/3.0.2
     dev: true
 
-  registry.npmmirror.com/@volar/source-map/0.28.3:
-    resolution: {integrity: sha1-PKIuLq5hlXJvPQRyMoRdUIhPnYc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/source-map/download/@volar/source-map-0.28.3.tgz}
+  registry.npmmirror.com/@volar/source-map/0.28.4:
+    resolution: {integrity: sha1-PJVdJ25Y3cwbFQJJ3ryxoWifiJI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/source-map/download/@volar/source-map-0.28.4.tgz}
     name: '@volar/source-map'
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.3
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.4
     dev: true
 
-  registry.npmmirror.com/@volar/transforms/0.28.3:
-    resolution: {integrity: sha1-dr75Cu9JlD7kURatbnP/ji8frsc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/transforms/download/@volar/transforms-0.28.3.tgz}
+  registry.npmmirror.com/@volar/transforms/0.28.4:
+    resolution: {integrity: sha1-VvW1gX4CRv5IOVBd7bluwvGdQ2U=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@volar/transforms/download/@volar/transforms-0.28.4.tgz}
     name: '@volar/transforms'
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.3
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.4
       vscode-languageserver: registry.npmmirror.com/vscode-languageserver/8.0.0-next.2
     dev: true
 
@@ -5371,7 +5371,7 @@ packages:
     version: 6.0.0-beta.19
     dev: false
 
-  registry.npmmirror.com/@vue/eslint-config-typescript/8.0.0_397d49b4b5abc93f7164053ce18f06c9:
+  registry.npmmirror.com/@vue/eslint-config-typescript/8.0.0_567c2d4be752485c4cea80a96a29945e:
     resolution: {integrity: sha1-56WqDN9fXVngX36jEOiVSkm4/EE=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/eslint-config-typescript/download/@vue/eslint-config-typescript-8.0.0.tgz?cache=0&sync_timestamp=1634109955383&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Feslint-config-typescript%2Fdownload%2F%40vue%2Feslint-config-typescript-8.0.0.tgz}
     id: registry.npmmirror.com/@vue/eslint-config-typescript/8.0.0
     name: '@vue/eslint-config-typescript'
@@ -5383,11 +5383,11 @@ packages:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
       eslint-plugin-vue: ^7.17.0
     dependencies:
-      '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.0.0_d8f15b12d289fecfef32450ca1e4b77e
-      '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.0+typescript@4.4.4
-      eslint: registry.npmmirror.com/eslint/8.0.0
-      eslint-plugin-vue: registry.npmmirror.com/eslint-plugin-vue/7.19.1_eslint@8.0.0
-      vue-eslint-parser: registry.nlark.com/vue-eslint-parser/7.10.0_eslint@8.0.0
+      '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.0.0_3b49a3094ddb22ccc5b4c2c2360792e0
+      '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.0.0_eslint@8.0.1+typescript@4.4.4
+      eslint: registry.npmmirror.com/eslint/8.0.1
+      eslint-plugin-vue: registry.npmmirror.com/eslint-plugin-vue/7.19.1_eslint@8.0.1
+      vue-eslint-parser: registry.nlark.com/vue-eslint-parser/7.10.0_eslint@8.0.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5823,7 +5823,7 @@ packages:
       pkg-dir: registry.npmmirror.com/pkg-dir/2.0.0
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-import/2.25.2_eslint@8.0.0:
+  registry.npmmirror.com/eslint-plugin-import/2.25.2_eslint@8.0.1:
     resolution: {integrity: sha1-s7kWDv3bcC/BY2ZZ5xuh0Qrb6ek=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-import/download/eslint-plugin-import-2.25.2.tgz}
     id: registry.npmmirror.com/eslint-plugin-import/2.25.2
     name: eslint-plugin-import
@@ -5836,7 +5836,7 @@ packages:
       array.prototype.flat: registry.npmmirror.com/array.prototype.flat/1.2.5
       debug: registry.nlark.com/debug/2.6.9
       doctrine: registry.nlark.com/doctrine/2.1.0
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       eslint-import-resolver-node: registry.nlark.com/eslint-import-resolver-node/0.3.6
       eslint-module-utils: registry.npmmirror.com/eslint-module-utils/2.7.0
       has: registry.nlark.com/has/1.0.3
@@ -5848,7 +5848,7 @@ packages:
       tsconfig-paths: registry.nlark.com/tsconfig-paths/3.11.0
     dev: true
 
-  registry.npmmirror.com/eslint-plugin-vue/7.19.1_eslint@8.0.0:
+  registry.npmmirror.com/eslint-plugin-vue/7.19.1_eslint@8.0.1:
     resolution: {integrity: sha1-Q1+yznEoQqlTCyjqy4g2gOjqpPM=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint-plugin-vue/download/eslint-plugin-vue-7.19.1.tgz?cache=0&sync_timestamp=1633513913072&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.19.1.tgz}
     id: registry.npmmirror.com/eslint-plugin-vue/7.19.1
     name: eslint-plugin-vue
@@ -5857,23 +5857,23 @@ packages:
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0-0
     dependencies:
-      eslint: registry.npmmirror.com/eslint/8.0.0
+      eslint: registry.npmmirror.com/eslint/8.0.1
       eslint-utils: registry.nlark.com/eslint-utils/2.1.0
       natural-compare: registry.nlark.com/natural-compare/1.4.0
       semver: registry.nlark.com/semver/6.3.0
-      vue-eslint-parser: registry.nlark.com/vue-eslint-parser/7.10.0_eslint@8.0.0
+      vue-eslint-parser: registry.nlark.com/vue-eslint-parser/7.10.0_eslint@8.0.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  registry.npmmirror.com/eslint/8.0.0:
-    resolution: {integrity: sha1-LC0KxjU3VWZ6yQyf9KnBMV5D/P8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint/download/eslint-8.0.0.tgz}
+  registry.npmmirror.com/eslint/8.0.1:
+    resolution: {integrity: sha1-NhDn/koFwhVGaVFcpgg1p2oZ9wA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eslint/download/eslint-8.0.1.tgz}
     name: eslint
-    version: 8.0.0
+    version: 8.0.1
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint/eslintrc': registry.npmmirror.com/@eslint/eslintrc/1.0.2
+      '@eslint/eslintrc': registry.npmmirror.com/@eslint/eslintrc/1.0.3
       '@humanwhocodes/config-array': registry.npmmirror.com/@humanwhocodes/config-array/0.6.0
       ajv: registry.nlark.com/ajv/6.12.6
       chalk: registry.nlark.com/chalk/4.1.2
@@ -5883,7 +5883,7 @@ packages:
       enquirer: registry.nlark.com/enquirer/2.3.6
       escape-string-regexp: registry.nlark.com/escape-string-regexp/4.0.0
       eslint-scope: registry.nlark.com/eslint-scope/6.0.0
-      eslint-utils: registry.nlark.com/eslint-utils/3.0.0_eslint@8.0.0
+      eslint-utils: registry.nlark.com/eslint-utils/3.0.0_eslint@8.0.1
       eslint-visitor-keys: registry.nlark.com/eslint-visitor-keys/3.0.0
       espree: registry.nlark.com/espree/9.0.0
       esquery: registry.nlark.com/esquery/1.4.0
@@ -6623,42 +6623,42 @@ packages:
       vscode-languageserver-protocol: registry.nlark.com/vscode-languageserver-protocol/3.17.0-next.8
     dev: true
 
-  registry.npmmirror.com/vscode-pug-languageservice/0.28.3:
-    resolution: {integrity: sha1-RXPi16Gs7K4RpeiT3HaKyzPooJ8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-pug-languageservice/download/vscode-pug-languageservice-0.28.3.tgz}
+  registry.npmmirror.com/vscode-pug-languageservice/0.28.4:
+    resolution: {integrity: sha1-nljLZlxBfXESHbjSi7IwUv4RK5I=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-pug-languageservice/download/vscode-pug-languageservice-0.28.4.tgz}
     name: vscode-pug-languageservice
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
-      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.28.3
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.3
-      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.28.3
-      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.28.3
+      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.28.4
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.4
+      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.28.4
+      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.28.4
       pug-lexer: registry.nlark.com/pug-lexer/5.0.1
       pug-parser: registry.nlark.com/pug-parser/6.0.0
       vscode-languageserver: registry.npmmirror.com/vscode-languageserver/8.0.0-next.2
     dev: true
 
-  registry.npmmirror.com/vscode-typescript-languageservice/0.28.3:
-    resolution: {integrity: sha1-HqyNRCptO1N5MZRALUdZ9Wli7H8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-typescript-languageservice/download/vscode-typescript-languageservice-0.28.3.tgz}
+  registry.npmmirror.com/vscode-typescript-languageservice/0.28.4:
+    resolution: {integrity: sha1-Ezjj0yYH7u52uptA4EGGeUKGy/M=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-typescript-languageservice/download/vscode-typescript-languageservice-0.28.4.tgz}
     name: vscode-typescript-languageservice
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.3
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.4
       semver: registry.nlark.com/semver/7.3.5
       upath: registry.nlark.com/upath/2.0.1
       vscode-languageserver: registry.npmmirror.com/vscode-languageserver/8.0.0-next.2
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.1
     dev: true
 
-  registry.npmmirror.com/vscode-vue-languageservice/0.28.3:
-    resolution: {integrity: sha1-afjGY2lOjQsmc0Uph7QUVypatWU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-vue-languageservice/download/vscode-vue-languageservice-0.28.3.tgz}
+  registry.npmmirror.com/vscode-vue-languageservice/0.28.4:
+    resolution: {integrity: sha1-CS+k/iJnvOosx5K5UBI5d69ZseA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vscode-vue-languageservice/download/vscode-vue-languageservice-0.28.4.tgz}
     name: vscode-vue-languageservice
-    version: 0.28.3
+    version: 0.28.4
     dependencies:
-      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.28.3
-      '@volar/html2pug': registry.npmmirror.com/@volar/html2pug/0.28.3
-      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.3
-      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.28.3
-      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.28.3
+      '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.28.4
+      '@volar/html2pug': registry.npmmirror.com/@volar/html2pug/0.28.4
+      '@volar/shared': registry.npmmirror.com/@volar/shared/0.28.4
+      '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.28.4
+      '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.28.4
       '@vscode/emmet-helper': registry.npmmirror.com/@vscode/emmet-helper/2.8.1
       '@vue/compiler-dom': registry.npmmirror.com/@vue/compiler-dom/3.2.20
       '@vue/reactivity': registry.npmmirror.com/@vue/reactivity/3.2.20
@@ -6670,21 +6670,21 @@ packages:
       vscode-json-languageservice: registry.npmmirror.com/vscode-json-languageservice/4.1.8
       vscode-languageserver: registry.npmmirror.com/vscode-languageserver/8.0.0-next.2
       vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.1
-      vscode-pug-languageservice: registry.npmmirror.com/vscode-pug-languageservice/0.28.3
-      vscode-typescript-languageservice: registry.npmmirror.com/vscode-typescript-languageservice/0.28.3
+      vscode-pug-languageservice: registry.npmmirror.com/vscode-pug-languageservice/0.28.4
+      vscode-typescript-languageservice: registry.npmmirror.com/vscode-typescript-languageservice/0.28.4
     dev: true
 
-  registry.npmmirror.com/vue-tsc/0.28.3_typescript@4.4.4:
-    resolution: {integrity: sha1-86yTAd2VSE9TxHr3i/dncCSUkIQ=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-tsc/download/vue-tsc-0.28.3.tgz}
-    id: registry.npmmirror.com/vue-tsc/0.28.3
+  registry.npmmirror.com/vue-tsc/0.28.4_typescript@4.4.4:
+    resolution: {integrity: sha1-4msDhhyBlt+N21bTe7t6YqxFOFY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-tsc/download/vue-tsc-0.28.4.tgz}
+    id: registry.npmmirror.com/vue-tsc/0.28.4
     name: vue-tsc
-    version: 0.28.3
+    version: 0.28.4
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
       typescript: registry.npmmirror.com/typescript/4.4.4
-      vscode-vue-languageservice: registry.npmmirror.com/vscode-vue-languageservice/0.28.3
+      vscode-vue-languageservice: registry.npmmirror.com/vscode-vue-languageservice/0.28.4
     dev: true
 
   registry.npmmirror.com/vue/3.2.20:
diff --git a/src/AppProvider.vue b/src/AppProvider.vue
index f547abb0..d2be252f 100644
--- a/src/AppProvider.vue
+++ b/src/AppProvider.vue
@@ -33,8 +33,29 @@ import {
 } from 'naive-ui';
 import { AppProviderContent } from '@/components';
 import { useThemeStore } from '@/store';
+import { addColorAlpha } from '@/utils';
 
 const theme = useThemeStore();
 const dark = computed(() => (theme.darkMode ? darkTheme : undefined));
+
+const primary = computed(() => theme.themeColor);
+const primaryWithAlpha = computed(() => {
+  const alpha = theme.darkMode ? 0.15 : 0.1;
+  return addColorAlpha(primary.value, alpha);
+});
 </script>
-<style scoped></style>
+<style>
+/* 全局与主题颜色相关 */
+.g_text-primary {
+  color: v-bind(primary);
+}
+.g_bg-primary {
+  background-color: v-bind(primary);
+}
+.g_bg-primary_active {
+  background-color: v-bind(primaryWithAlpha);
+}
+.g_border-primary {
+  border-color: v-bind(primary);
+}
+</style>
diff --git a/src/components/custom/ButtonTab/index.vue b/src/components/custom/ButtonTab/index.vue
index 46c3e23c..a806229c 100644
--- a/src/components/custom/ButtonTab/index.vue
+++ b/src/components/custom/ButtonTab/index.vue
@@ -20,7 +20,7 @@
       <slot></slot>
     </span>
     <div v-if="closable" class="pl-10px">
-      <icon-close :is-primary="active || isHover" :primary-color="primaryColor" @click="handleClose" />
+      <icon-close :is-primary="isActive || isHover" :primary-color="primaryColor" @click="handleClose" />
     </div>
   </div>
 </template>
@@ -32,7 +32,7 @@ import { IconClose } from '@/components';
 import { shallowColor } from '@/utils';
 
 const props = defineProps({
-  active: {
+  isActive: {
     type: Boolean,
     default: false
   },
@@ -43,6 +43,10 @@ const props = defineProps({
   closable: {
     type: Boolean,
     default: true
+  },
+  darkMode: {
+    type: Boolean,
+    default: false
   }
 });
 const emit = defineEmits(['close']);
@@ -56,11 +60,12 @@ function handleClose(e: MouseEvent) {
 
 const buttonStyle = computed(() => {
   const style: { [key: string]: string } = {};
-  if (props.active || isHover.value) {
+  if (props.isActive || isHover.value) {
     style.color = props.primaryColor;
     style.borderColor = shallowColor(props.primaryColor, 0.3);
-    if (props.active) {
-      style.backgroundColor = shallowColor(props.primaryColor, 0.1);
+    if (props.isActive) {
+      const alpha = props.darkMode ? 0.15 : 0.1;
+      style.backgroundColor = shallowColor(props.primaryColor, alpha);
     }
   }
   return style;
diff --git a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
index 5e51e71d..c022fa1e 100644
--- a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
+++ b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
@@ -11,11 +11,16 @@
         <rect width="100%" height="100%" x="0"></rect>
       </clipPath>
     </defs>
-    <!-- 修改为50%防止重叠颜色不一致 -->
+    <svg width="50%" height="100%">
+      <use xlink:href="#geometry-left" width="214" height="36" :fill="foregorund"></use>
+    </svg>
     <svg width="50%" height="100%">
       <use xlink:href="#geometry-left" width="214" height="36" :fill="fill"></use>
     </svg>
     <g transform="scale(-1, 1)">
+      <svg width="50%" height="100%" x="-100%" y="0">
+        <use xlink:href="#geometry-right" width="214" height="36" :fill="foregorund"></use>
+      </svg>
       <svg width="50%" height="100%" x="-100%" y="0">
         <use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
       </svg>
@@ -25,6 +30,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { shallowColor } from '@/utils';
 
 /** 填充的背景颜色： [默认颜色, 暗黑主题颜色] */
 type FillColor = [string, string];
@@ -38,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  primaryColor: {
+    type: String,
+    default: '#409EFF'
+  },
   darkMode: {
     type: Boolean,
     default: false
@@ -45,9 +55,9 @@ const props = defineProps({
 });
 
 const defaultColor: FillColor = ['#fff', '#18181c'];
-const activeColor: FillColor = ['#eef6ff', '#1e3044'];
 const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
 
+const foregorund = computed(() => defaultColor[Number(props.darkMode)]);
 const fill = computed(() => {
   const index = Number(props.darkMode);
   let color = defaultColor[index];
@@ -55,7 +65,8 @@ const fill = computed(() => {
     color = hoverColor[index];
   }
   if (props.isActive) {
-    color = activeColor[index];
+    const alpha = props.darkMode ? 0.15 : 0.1;
+    color = shallowColor(props.primaryColor, alpha);
   }
   return color;
 });
diff --git a/src/components/custom/ChromeTab/index.vue b/src/components/custom/ChromeTab/index.vue
index b7380ea3..7ae91b58 100644
--- a/src/components/custom/ChromeTab/index.vue
+++ b/src/components/custom/ChromeTab/index.vue
@@ -6,7 +6,13 @@
     @mouseleave="setFalse"
   >
     <div class="absolute-lb w-full h-full overflow-hidden">
-      <svg-radius-bg class="w-full h-full" :is-active="isActive" :is-hover="isHover" :dark-mode="darkMode" />
+      <svg-radius-bg
+        class="w-full h-full"
+        :is-active="isActive"
+        :is-hover="isHover"
+        :dark-mode="darkMode"
+        :primary-color="primaryColor"
+      />
     </div>
     <span class="relative z-2">
       <slot></slot>
diff --git a/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenu.vue b/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenu.vue
index ad84c422..1ea6ab30 100644
--- a/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenu.vue
+++ b/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenu.vue
@@ -2,7 +2,7 @@
   <div class="mb-6px px-4px cursor-pointer" @mouseenter="setTrue" @mouseleave="setFalse">
     <div
       class="flex-center flex-col py-12px rounded-2px"
-      :class="{ 'text-primary bg-primary bg-opacity-10': isActive, 'text-primary': isHover }"
+      :class="{ 'g_text-primary g_bg-primary_active': isActive, 'g_text-primary': isHover }"
     >
       <component :is="icon" :class="[isMini ? 'text-16px' : 'text-20px']" />
       <p
diff --git a/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue b/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
index 287e330d..92370aae 100644
--- a/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
+++ b/src/layouts/BasicLayout/components/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
@@ -10,12 +10,12 @@
       duration-300
       ease-in-out
       bg-white
-      dark:bg-[#18181c]
+      dark:bg-dark
     "
     :style="{ width: showDrawer ? theme.menuStyle.width + 'px' : '0px' }"
   >
     <header class="header-height flex-y-center justify-between">
-      <h2 class="pl-8px text-16px text-primary font-bold">{{ title }}</h2>
+      <h2 class="pl-8px text-16px g_text-primary font-bold">{{ title }}</h2>
       <div class="px-8px text-16px text-gray-600 cursor-pointer" @click="toggleFixedMixMenu">
         <icon-mdi:pin-off v-if="app.menu.fixedMix" />
         <icon-mdi:pin v-else />
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
index b31f44ba..cc676f0d 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
@@ -4,6 +4,7 @@
       v-for="item in app.multiTab.routes"
       :key="item.path"
       :is-active="app.multiTab.activeRoute === item.fullPath"
+      :primary-color="theme.themeColor"
       :closable="item.name !== ROUTE_HOME.name"
       :dark-mode="theme.darkMode"
       @click="handleClickTab(item.fullPath)"
@@ -18,7 +19,7 @@
       v-for="item in app.multiTab.routes"
       :key="item.path"
       class="mr-10px"
-      :active="app.multiTab.activeRoute === item.fullPath"
+      :is-active="app.multiTab.activeRoute === item.fullPath"
       :primary-color="theme.themeColor"
       :closable="item.name !== ROUTE_HOME.name"
       :dark-mode="theme.darkMode"
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode/index.vue
index cf91a1f6..96a4d3f1 100644
--- a/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode/index.vue
+++ b/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode/index.vue
@@ -3,10 +3,10 @@
   <div class="flex-center">
     <n-switch :value="theme.darkMode" @update:value="handleDarkMode">
       <template #checked>
-        <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+        <icon-mdi-white-balance-sunny class="text-14px g_text-primary" />
       </template>
       <template #unchecked>
-        <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+        <icon-mdi-moon-waning-crescent class="text-14px g_text-primary" />
       </template>
     </n-switch>
   </div>
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue
index e377d2f1..720d0c69 100644
--- a/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue
+++ b/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="border-2px rounded-6px cursor-pointer hover:border-primary"
-    :class="[checked ? 'border-primary' : 'border-transparent']"
+    class="border-2px rounded-6px cursor-pointer hover:g_border-primary"
+    :class="[checked ? 'g_border-primary' : 'border-transparent']"
   >
     <n-tooltip :placement="activeConfig.placement" trigger="hover">
       <template #trigger>
diff --git a/src/layouts/BasicLayout/components/common/GlobalLogo.vue b/src/layouts/BasicLayout/components/common/GlobalLogo.vue
index bb8465e4..11650857 100644
--- a/src/layouts/BasicLayout/components/common/GlobalLogo.vue
+++ b/src/layouts/BasicLayout/components/common/GlobalLogo.vue
@@ -1,7 +1,7 @@
 <template>
   <a href="/" class="logo-height nowrap-hidden flex-center cursor-pointer">
     <system-logo class="w-32px h-32px" :color="primaryColor" />
-    <h2 v-show="showTitle" class="pl-8px text-16px font-bold" :style="{ color: primaryColor }">{{ title }}</h2>
+    <h2 v-show="showTitle" class="g_text-primary pl-8px text-16px font-bold">{{ title }}</h2>
   </a>
 </template>
 
diff --git a/src/utils/common/color.ts b/src/utils/common/color.ts
index 26dace54..81d1fb4e 100644
--- a/src/utils/common/color.ts
+++ b/src/utils/common/color.ts
@@ -23,3 +23,12 @@ export function shallowColor(color: string, alpha: number = 0.5) {
 export function darkenColor(color: string) {
   return chroma(color).darken(0.5).hex();
 }
+
+/**
+ * 给颜色加透明度
+ * @param color - 颜色
+ * @param alpha - 透明度
+ */
+export function addColorAlpha(color: string, alpha: number) {
+  return chroma(color).alpha(alpha).hex();
+}
diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts
index 44140e76..2268bd44 100644
--- a/src/utils/common/index.ts
+++ b/src/utils/common/index.ts
@@ -12,6 +12,6 @@ export {
   isMap
 } from './typeof';
 
-export { brightenColor, shallowColor, darkenColor } from './color';
+export { brightenColor, shallowColor, darkenColor, addColorAlpha } from './color';
 
 export { dynamicIconRender } from './icon';
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 4d58100d..68c3c1b9 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -24,6 +24,7 @@ export {
   brightenColor,
   shallowColor,
   darkenColor,
+  addColorAlpha,
   dynamicIconRender
 } from './common';
 
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index 45cad523..05a75178 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -1,18 +1,46 @@
 <template>
   <div>
-    <n-spin class="flex-y-center flex-col" :show="loading">
-      <n-gradient-text type="primary" size="32">工作台</n-gradient-text>
-      <n-space>
-        <n-button>Default</n-button>
-        <n-button type="primary">Primary</n-button>
-        <n-button type="info">Info</n-button>
-        <n-button type="success">Success</n-button>
-        <n-button type="warning">Warning</n-button>
-        <n-button type="error">Error</n-button>
-      </n-space>
-      <n-space>
-        <n-tag>Tag</n-tag>
-        <n-tag type="primary">Primary Tag</n-tag>
+    <n-spin :show="loading">
+      <n-space :vertical="true">
+        <div>
+          <n-gradient-text type="primary" size="32">GradientText</n-gradient-text>
+          <n-space>
+            <n-gradient-text>Default</n-gradient-text>
+            <n-gradient-text type="primary">Primary</n-gradient-text>
+            <n-gradient-text type="info">Info</n-gradient-text>
+            <n-gradient-text type="success">Success</n-gradient-text>
+            <n-gradient-text type="warning">Warning</n-gradient-text>
+            <n-gradient-text type="error">Error</n-gradient-text>
+          </n-space>
+        </div>
+        <div>
+          <n-gradient-text type="primary" size="32">Button</n-gradient-text>
+          <n-space>
+            <n-button>Default</n-button>
+            <n-button type="primary">Primary</n-button>
+            <n-button type="info">Info</n-button>
+            <n-button type="success">Success</n-button>
+            <n-button type="warning">Warning</n-button>
+            <n-button type="error">Error</n-button>
+          </n-space>
+        </div>
+        <n-gradient-text type="primary" size="32">Tag</n-gradient-text>
+        <n-space>
+          <n-tag>Tag</n-tag>
+          <n-tag type="primary">Primary</n-tag>
+          <n-tag type="info">Info</n-tag>
+          <n-tag type="success">Success</n-tag>
+          <n-tag type="warning">Warning</n-tag>
+          <n-tag type="error">Error</n-tag>
+        </n-space>
+        <div>
+          <n-gradient-text type="primary" size="32">Switch | Checkbox | Radio</n-gradient-text>
+          <n-space>
+            <n-switch :default-value="true" />
+            <n-checkbox :default-checked="true" />
+            <n-radio :default-checked="true" />
+          </n-space>
+        </div>
       </n-space>
     </n-spin>
   </div>
@@ -20,7 +48,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { NGradientText, NSpace, NButton, NSpin, NTag } from 'naive-ui';
+import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio } from 'naive-ui';
 
 const loading = ref(true);
 
diff --git a/src/views/system/login/components/PwdLogin/index.vue b/src/views/system/login/components/PwdLogin/index.vue
index 084d245b..7bc8a996 100644
--- a/src/views/system/login/components/PwdLogin/index.vue
+++ b/src/views/system/login/components/PwdLogin/index.vue
@@ -10,7 +10,7 @@
       <n-space :vertical="true" size="large">
         <div class="flex-y-center justify-between">
           <n-checkbox v-model:checked="rememberMe">记住我</n-checkbox>
-          <span class="text-primary cursor-pointer" @click="toCurrentLogin('reset-pwd')">忘记密码？</span>
+          <span class="g_text-primary cursor-pointer" @click="toCurrentLogin('reset-pwd')">忘记密码？</span>
         </div>
         <n-button type="primary" size="large" :block="true" :round="true" @click="handleSubmit">确定</n-button>
         <div class="flex-y-center justify-between">
diff --git a/src/views/system/login/index.vue b/src/views/system/login/index.vue
index 5f563219..1d7744d2 100644
--- a/src/views/system/login/index.vue
+++ b/src/views/system/login/index.vue
@@ -9,7 +9,7 @@
       </header>
       <main class="pt-24px">
         <div v-for="item in modules" v-show="module === item.key" :key="item.key">
-          <h3 class="text-18px text-primary font-medium">{{ item.label }}</h3>
+          <h3 class="text-18px g_text-primary font-medium">{{ item.label }}</h3>
           <component :is="item.component" />
         </div>
       </main>
diff --git a/windi.config.ts b/windi.config.ts
index a464fd54..7e237077 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -39,7 +39,9 @@ export default defineConfig({
         info,
         success,
         warning,
-        error
+        error,
+        light: '#ffffff',
+        dark: '#18181c'
       },
       transitionProperty: ['width', 'height', 'background', 'background-color']
     }