diff --git a/build/generate/generateModifyVars.ts b/build/generate/generateModifyVars.ts
index 6357763d..b27d33d6 100644
--- a/build/generate/generateModifyVars.ts
+++ b/build/generate/generateModifyVars.ts
@@ -1,36 +1,18 @@
 import { resolve } from 'node:path'
-import { getThemeVariables } from 'ant-design-vue/dist/theme'
 import { generateAntColors, primaryColor } from '../config/themeConfig'
 
 /**
  * less global variable
  */
-export function generateModifyVars(dark = false) {
+export function generateModifyVars() {
   const palettes = generateAntColors(primaryColor)
-  const primary = palettes[5]
 
   const primaryColorObj: Record<string, string> = {}
 
   for (let index = 0; index < 10; index++)
     primaryColorObj[`primary-${index + 1}`] = palettes[index]
 
-  const modifyVars = getThemeVariables({ dark })
   return {
-    ...modifyVars,
-    // Used for global import to avoid the need to import each style file separately
-    // reference:  Avoid repeated references
-    'hack': `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
-    'primary-color': primary,
-    ...primaryColorObj,
-    'info-color': primary,
-    'processing-color': primary,
-    'success-color': '#55D187', //  Success color
-    'error-color': '#ED6F6F', //  False color
-    'warning-color': '#EFBD47', //   Warning color
-    // 'border-color-base': '#EEEEEE',
-    'font-size-base': '14px', //  Main font size
-    'border-radius-base': '2px', //  Component/float fillet
-    'link-color': primary, //   Link color
-    'app-content-background': '#fafafa', //   Link color
+    hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
   }
 }
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 6f68764f..ebcfa24d 100644
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@@ -9,9 +9,7 @@ import { presetTypography, presetUno } from 'unocss'
 import { configPwaConfig } from './pwa'
 import { configHtmlPlugin } from './html'
 import { configCompressPlugin } from './compress'
-import { configStyleImportPlugin } from './styleImport'
 import { configVisualizerConfig } from './visualizer'
-import { configThemePlugin } from './theme'
 import { configSvgIconsPlugin } from './svgSprite'
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
@@ -45,13 +43,8 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig())
 
-  // vite-plugin-vben-theme
-  vitePlugins.push(configThemePlugin(isBuild))
-
   // The following plugins only work in the production environment
   if (isBuild) {
-    // vite-plugin-style-import
-    vitePlugins.push(configStyleImportPlugin(isBuild))
     // rollup-plugin-gzip
     vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE))
 
diff --git a/build/vite/plugin/styleImport.ts b/build/vite/plugin/styleImport.ts
deleted file mode 100644
index ca2d39ec..00000000
--- a/build/vite/plugin/styleImport.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- *  Introduces component library styles on demand.
- * https://github.com/xingyuv/vite-plugin-style-import
- */
-import { createStyleImportPlugin } from 'vite-plugin-style-import'
-
-export function configStyleImportPlugin(_isBuild: boolean) {
-  if (!_isBuild)
-    return []
-
-  const styleImportPlugin = createStyleImportPlugin({
-    libs: [
-      {
-        libraryName: 'ant-design-vue',
-        esModule: true,
-        resolveStyle: (name) => {
-          // 这里是无需额外引入样式文件的“子组件”列表
-          const ignoreList = [
-            'anchor-link',
-            'sub-menu',
-            'menu-item',
-            'menu-divider',
-            'menu-item-group',
-            'breadcrumb-item',
-            'breadcrumb-separator',
-            'form-item',
-            'step',
-            'select-option',
-            'select-opt-group',
-            'card-grid',
-            'card-meta',
-            'collapse-panel',
-            'descriptions-item',
-            'list-item',
-            'list-item-meta',
-            'table-column',
-            'table-column-group',
-            'tab-pane',
-            'tab-content',
-            'timeline-item',
-            'tree-node',
-            'skeleton-input',
-            'skeleton-avatar',
-            'skeleton-title',
-            'skeleton-paragraph',
-            'skeleton-image',
-            'skeleton-button',
-          ]
-          // 这里是需要额外引入样式的子组件列表
-          // 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失
-          const replaceList = {
-            'textarea': 'input',
-            'typography-text': 'typography',
-            'typography-title': 'typography',
-            'typography-paragraph': 'typography',
-            'typography-link': 'typography',
-            'dropdown-button': 'dropdown',
-            'input-password': 'input',
-            'input-search': 'input',
-            'input-group': 'input',
-            'radio-group': 'radio',
-            'checkbox-group': 'checkbox',
-            'layout-sider': 'layout',
-            'layout-content': 'layout',
-            'layout-footer': 'layout',
-            'layout-header': 'layout',
-            'month-picker': 'date-picker',
-            'range-picker': 'date-picker',
-            'image-preview-group': 'image',
-          }
-
-          return ignoreList.includes(name)
-            ? ''
-            : replaceList.hasOwnProperty(name)
-              ? `ant-design-vue/es/${replaceList[name]}/style/index`
-              : `ant-design-vue/es/${name}/style/index`
-        },
-      },
-    ],
-  })
-  return styleImportPlugin
-}
diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts
deleted file mode 100644
index 9eef9fb7..00000000
--- a/build/vite/plugin/theme.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Vite plugin for website theme color switching
- * https://github.com/xingyuv/vite-vue-plugin-theme
- */
-import path from 'node:path'
-import type { PluginOption } from 'vite'
-import { antdDarkThemePlugin, mixDarken, mixLighten, tinycolor, viteThemePlugin } from 'vite-vue-plugin-theme'
-import { generateColors, getThemeColors } from '../../config/themeConfig'
-import { generateModifyVars } from '../../generate/generateModifyVars'
-
-export function configThemePlugin(isBuild: boolean): PluginOption[] {
-  const colors = generateColors({
-    mixDarken,
-    mixLighten,
-    tinycolor,
-  })
-  const plugin = [
-    viteThemePlugin({
-      resolveSelector: (s) => {
-        s = s.trim()
-        switch (s) {
-          case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
-            return '.ant-steps-item-icon > .ant-steps-icon'
-          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)':
-          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover':
-          case '.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active':
-            return s
-          case '.ant-steps-item-icon > .ant-steps-icon':
-            return s
-          case '.ant-select-item-option-selected:not(.ant-select-item-option-disabled)':
-            return s
-          default:
-            if (s.indexOf('.ant-btn') >= -1) {
-              // 按钮被重新定制过，需要过滤掉class防止覆盖
-              return s
-            }
-        }
-        return s.startsWith('[data-theme') ? s : `[data-theme] ${s}`
-      },
-      colorVariables: [...getThemeColors(), ...colors],
-    }),
-    antdDarkThemePlugin({
-      preloadFiles: [
-        path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.less'),
-        // path.resolve(process.cwd(), 'node_modules/ant-design-vue/dist/antd.dark.less'),
-        path.resolve(process.cwd(), 'src/design/index.less'),
-      ],
-      filter: id => (isBuild ? !id.endsWith('antd.less') : true),
-      // extractCss: false,
-      darkModifyVars: {
-        ...generateModifyVars(true),
-        'text-color': '#c9d1d9',
-        'primary-1': 'rgb(255 255 255 / 8%)',
-        'text-color-base': '#c9d1d9',
-        'component-background': '#151515',
-        'heading-color': 'rgb(255 255 255 / 65%)',
-        // black: '#0e1117',
-        // #8b949e
-        'text-color-secondary': '#8b949e',
-        'border-color-base': '#303030',
-        // 'border-color-split': '#30363d',
-        'item-active-bg': '#111b26',
-        'app-content-background': '#1e1e1e',
-        'tree-node-selected-bg': '#11263c',
-
-        'alert-success-border-color': '#274916',
-        'alert-success-bg-color': '#162312',
-        'alert-success-icon-color': '#49aa19',
-        'alert-info-border-color': '#153450',
-        'alert-info-bg-color': '#111b26',
-        'alert-info-icon-color': '#177ddc',
-        'alert-warning-border-color': '#594214',
-        'alert-warning-bg-color': '#2b2111',
-        'alert-warning-icon-color': '#d89614',
-        'alert-error-border-color': '#58181c',
-        'alert-error-bg-color': '#2a1215',
-        'alert-error-icon-color': '#a61d24',
-      },
-    }),
-  ]
-
-  return plugin as unknown as PluginOption[]
-}
diff --git a/package.json b/package.json
index 0b918f56..9b4b6a70 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "@vue/runtime-core": "^3.3.4",
     "@vueuse/core": "^10.2.1",
     "@zxcvbn-ts/core": "^3.0.3",
-    "ant-design-vue": "^3.2.20",
+    "ant-design-vue": "^4.0.0",
     "axios": "^1.4.0",
     "codemirror": "^5.65.3",
     "cron-parser": "^4.8.1",
@@ -135,10 +135,8 @@
     "vite-plugin-progress": "^0.0.7",
     "vite-plugin-purge-icons": "^0.9.2",
     "vite-plugin-pwa": "^0.16.4",
-    "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-vue-plugin-html": "^1.0.2",
-    "vite-vue-plugin-theme": "^1.0.2",
     "vue-eslint-parser": "^9.3.1",
     "vue-tsc": "^1.8.8"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84f7961d..277614c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ dependencies:
     specifier: ^3.0.3
     version: 3.0.3
   ant-design-vue:
-    specifier: ^3.2.20
-    version: 3.2.20(vue@3.3.4)
+    specifier: ^4.0.0
+    version: 4.0.0(vue@3.3.4)
   axios:
     specifier: ^1.4.0
     version: 1.4.0(debug@4.3.4)
@@ -268,18 +268,12 @@ devDependencies:
   vite-plugin-pwa:
     specifier: ^0.16.4
     version: 0.16.4(vite@4.4.7)(workbox-build@7.0.0)(workbox-window@7.0.0)
-  vite-plugin-style-import:
-    specifier: ^2.0.0
-    version: 2.0.0(vite@4.4.7)
   vite-plugin-svg-icons:
     specifier: ^2.0.1
     version: 2.0.1(vite@4.4.7)
   vite-vue-plugin-html:
     specifier: ^1.0.2
     version: 1.0.2(rollup@3.27.0)(vite@4.4.7)
-  vite-vue-plugin-theme:
-    specifier: ^1.0.2
-    version: 1.0.2(vite@4.4.7)
   vue-eslint-parser:
     specifier: ^9.3.1
     version: 9.3.1(eslint@8.46.0)
@@ -1845,6 +1839,14 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /@emotion/hash@0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: false
+
+  /@emotion/unitless@0.8.1:
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+    dev: false
+
   /@esbuild-kit/cjs-loader@2.4.2:
     resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==}
     dependencies:
@@ -2691,14 +2693,6 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/pluginutils@4.2.1:
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /@rollup/pluginutils@5.0.2(rollup@3.27.0):
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
@@ -2871,10 +2865,6 @@ packages:
       '@types/node': 20.4.5
     dev: true
 
-  /@types/tinycolor2@1.4.3:
-    resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
-    dev: true
-
   /@types/trusted-types@2.0.3:
     resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
     dev: true
@@ -3574,8 +3564,8 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /ant-design-vue@3.2.20(vue@3.3.4):
-    resolution: {integrity: sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==}
+  /ant-design-vue@4.0.0(vue@3.3.4):
+    resolution: {integrity: sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       vue: '>=3.2.0'
@@ -3584,9 +3574,12 @@ packages:
       '@ant-design/icons-vue': 6.1.0(vue@3.3.4)
       '@babel/runtime': 7.21.0
       '@ctrl/tinycolor': 3.6.0
+      '@emotion/hash': 0.9.1
+      '@emotion/unitless': 0.8.1
       '@simonwep/pickr': 1.8.2
       array-tree-filter: 2.1.0
       async-validator: 4.2.5
+      csstype: 3.1.2
       dayjs: 1.11.9
       dom-align: 1.12.4
       dom-scroll-into-view: 2.0.1
@@ -3595,6 +3588,8 @@ packages:
       resize-observer-polyfill: 1.5.1
       scroll-into-view-if-needed: 2.2.31
       shallow-equal: 1.2.1
+      stylis: 4.3.0
+      throttle-debounce: 5.0.0
       vue: 3.3.4
       vue-types: 3.0.2(vue@3.3.4)
       warning: 4.0.3
@@ -3946,14 +3941,6 @@ packages:
     resolution: {integrity: sha512-ewDad7+D2vlyy+E4UJuVfiBsU69IL+8oVmTuZnH5Q6CIUbxNfI50uVpRHbUPDD6SUaN2o0Lh4DhTrvLG/Tn1yg==}
     dev: true
 
-  /capital-case@1.0.4:
-    resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
-    dependencies:
-      no-case: 3.0.4
-      tslib: 2.6.0
-      upper-case-first: 2.0.2
-    dev: true
-
   /cfb@1.2.2:
     resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
     engines: {node: '>=0.8'}
@@ -4000,23 +3987,6 @@ packages:
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
     dev: true
 
-  /change-case@4.1.2:
-    resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
-    dependencies:
-      camel-case: 4.1.2
-      capital-case: 1.0.4
-      constant-case: 3.0.4
-      dot-case: 3.0.4
-      header-case: 2.0.4
-      no-case: 3.0.4
-      param-case: 3.0.4
-      pascal-case: 3.1.2
-      path-case: 3.0.4
-      sentence-case: 3.0.4
-      snake-case: 3.0.4
-      tslib: 2.5.0
-    dev: true
-
   /character-entities-legacy@1.1.4:
     resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
     dev: true
@@ -4244,18 +4214,6 @@ packages:
     engines: {node: ^14.18.0 || >=16.10.0}
     dev: true
 
-  /console@0.7.2:
-    resolution: {integrity: sha512-+JSDwGunA4MTEgAV/4VBKwUHonP8CzJ/6GIuwPi6acKFqFfHUdSGCm89ZxZ5FfGWdZfkdgAroy5bJ5FSeN/t4g==}
-    dev: true
-
-  /constant-case@3.0.4:
-    resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
-    dependencies:
-      no-case: 3.0.4
-      tslib: 2.6.0
-      upper-case: 2.0.2
-    dev: true
-
   /conventional-changelog-angular@5.0.13:
     resolution: {integrity: sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==}
     engines: {node: '>=10'}
@@ -4859,10 +4817,6 @@ packages:
       which-typed-array: 1.1.9
     dev: true
 
-  /es-module-lexer@0.9.3:
-    resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
-    dev: true
-
   /es-set-tostringtag@2.0.1:
     resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
     engines: {node: '>= 0.4'}
@@ -4881,10 +4835,6 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
-  /esbuild-plugin-alias@0.2.1:
-    resolution: {integrity: sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==}
-    dev: true
-
   /esbuild@0.17.19:
     resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
     engines: {node: '>=12'}
@@ -5936,13 +5886,6 @@ packages:
     hasBin: true
     dev: true
 
-  /header-case@2.0.4:
-    resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
-    dependencies:
-      capital-case: 1.0.4
-      tslib: 2.6.0
-    dev: true
-
   /hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
@@ -7476,13 +7419,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /path-case@3.0.4:
-    resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
-    dependencies:
-      dot-case: 3.0.4
-      tslib: 2.6.0
-    dev: true
-
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -8209,14 +8145,6 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /sentence-case@3.0.4:
-    resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
-    dependencies:
-      no-case: 3.0.4
-      tslib: 2.6.0
-      upper-case-first: 2.0.2
-    dev: true
-
   /serialize-javascript@4.0.0:
     resolution: {integrity: sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==}
     dependencies:
@@ -8309,13 +8237,6 @@ packages:
       is-fullwidth-code-point: 4.0.0
     dev: true
 
-  /snake-case@3.0.4:
-    resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
-    dependencies:
-      dot-case: 3.0.4
-      tslib: 2.6.0
-    dev: true
-
   /snapdragon-node@2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
     engines: {node: '>=0.10.0'}
@@ -8726,6 +8647,10 @@ packages:
       - supports-color
     dev: true
 
+  /stylis@4.3.0:
+    resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==}
+    dev: false
+
   /supports-color@2.0.0:
     resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
     engines: {node: '>=0.8.0'}
@@ -8849,6 +8774,11 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /throttle-debounce@5.0.0:
+    resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
+    engines: {node: '>=12.22'}
+    dev: false
+
   /through2@4.0.2:
     resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
     dependencies:
@@ -8859,10 +8789,6 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
-  /tinycolor2@1.6.0:
-    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
-    dev: true
-
   /tinymce@5.10.7:
     resolution: {integrity: sha512-9UUjaO0R7FxcFo0oxnd1lMs7H+D0Eh+dDVo5hKbVe1a+VB0nit97vOqlinj+YwgoBDt6/DSCUoWqAYlLI8BLYA==}
     dev: false
@@ -9207,18 +9133,6 @@ packages:
       picocolors: 1.0.0
     dev: true
 
-  /upper-case-first@2.0.2:
-    resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
-    dependencies:
-      tslib: 2.6.0
-    dev: true
-
-  /upper-case@2.0.2:
-    resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
-    dependencies:
-      tslib: 2.6.0
-    dev: true
-
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
@@ -9335,21 +9249,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-style-import@2.0.0(vite@4.4.7):
-    resolution: {integrity: sha512-qtoHQae5dSUQPo/rYz/8p190VU5y19rtBaeV7ryLa/AYAU/e9CG89NrN/3+k7MR8mJy/GPIu91iJ3zk9foUOSA==}
-    peerDependencies:
-      vite: '>=2.0.0'
-    dependencies:
-      '@rollup/pluginutils': 4.2.1
-      change-case: 4.1.2
-      console: 0.7.2
-      es-module-lexer: 0.9.3
-      fs-extra: 10.1.0
-      magic-string: 0.25.9
-      pathe: 0.2.0
-      vite: 4.4.7(@types/node@20.4.5)(less@4.1.3)(terser@5.19.2)
-    dev: true
-
   /vite-plugin-svg-icons@2.0.1(vite@4.4.7):
     resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
     peerDependencies:
@@ -9390,24 +9289,6 @@ packages:
       - rollup
     dev: true
 
-  /vite-vue-plugin-theme@1.0.2(vite@4.4.7):
-    resolution: {integrity: sha512-zaB0hfdz1VyFncNoJ/6Y8PqThqBm4zhCidc/qdV5/XgsGCm/6HMNRFmnjvHHkBL7VK687bFQSaxEB+cXerfKwA==}
-    peerDependencies:
-      vite: '>=4.3.0'
-    dependencies:
-      '@types/node': 20.4.5
-      '@types/tinycolor2': 1.4.3
-      clean-css: 5.3.2
-      debug: 4.3.4
-      esbuild: 0.17.19
-      esbuild-plugin-alias: 0.2.1
-      picocolors: 1.0.0
-      tinycolor2: 1.6.0
-      vite: 4.4.7(@types/node@20.4.5)(less@4.1.3)(terser@5.19.2)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vite@4.4.7(@types/node@20.4.5)(less@4.1.3)(terser@5.19.2):
     resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/src/App.vue b/src/App.vue
index e9c1d841..7fb1ec10 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,24 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import 'dayjs/locale/zh-cn'
+
 import { ConfigProvider } from 'ant-design-vue'
+import { storeToRefs } from 'pinia'
+
 import { AppProvider } from '@/components/Application'
 import { useTitle } from '@/hooks/web/useTitle'
 import { useLocale } from '@/locales/useLocale'
 import { useAppStore } from '@/store/modules/app'
 
-import 'dayjs/locale/zh-cn'
-
 // support Multi-language
 const { getAntdLocale } = useLocale()
-
 const appStore = useAppStore()
-
-const componentSize = computed(() => appStore.getComponentSize)
-
+const { themeConfig } = storeToRefs(appStore)
 // Listening to page changes and dynamically changing site titles
 useTitle()
 </script>
 
 <template>
-  <ConfigProvider :locale="getAntdLocale" :component-size="componentSize">
+  <ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
     <AppProvider>
       <RouterView />
     </AppProvider>
diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue
index e6e93c9d..c40adf3c 100644
--- a/src/components/Application/src/AppLogo.vue
+++ b/src/components/Application/src/AppLogo.vue
@@ -61,10 +61,6 @@ function goHome() {
     padding-left: 20px;
   }
 
-  &.light &__title {
-    color: @primary-color;
-  }
-
   &.dark &__title {
     color: @white;
   }
diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue
index 45f8b03e..dbf22af5 100644
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -235,8 +235,6 @@ function handleClose() {
 
       &--active {
         color: #fff;
-        background-color: @primary-color;
-
         .@{prefix-cls}-list__item-enter {
           opacity: 1;
         }
diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
index d6484d78..65526225 100644
--- a/src/components/Basic/src/BasicHelp.vue
+++ b/src/components/Basic/src/BasicHelp.vue
@@ -99,10 +99,6 @@ export default defineComponent({
   color: @text-color-help-dark;
   cursor: pointer;
 
-  &:hover {
-    color: @primary-color;
-  }
-
   &__wrap {
     p {
       margin-bottom: 0;
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
index 46f11de8..2c02d9b9 100644
--- a/src/components/Basic/src/BasicTitle.vue
+++ b/src/components/Basic/src/BasicTitle.vue
@@ -67,7 +67,6 @@ const getClass = computed(() => [
     height: 16px;
     margin-right: 4px;
     content: '';
-    background-color: @primary-color;
   }
 
   &-help {
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index 2fd23eed..eeec2a95 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -93,7 +93,7 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-collapse-container';
 
 .@{prefix-cls} {
-  background-color: @component-background;
+  // background-color: @component-background;
   border-radius: 2px;
   transition: all 0.3s ease-in-out;
 
diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue
index 633654f3..ce6ec1d5 100644
--- a/src/components/Drawer/src/BasicDrawer.vue
+++ b/src/components/Drawer/src/BasicDrawer.vue
@@ -167,16 +167,10 @@ function handleOk() {
     overflow: hidden;
   }
 
-  .ant-drawer-close {
-    &:hover {
-      color: @error-color;
-    }
-  }
-
   .ant-drawer-body {
     height: calc(100% - @header-height);
     padding: 0;
-    background-color: @component-background;
+    // background-color: @component-background;
 
     .scrollbar__wrap {
       padding: 16px !important;
@@ -197,7 +191,7 @@ function handleOk() {
     width: 100%;
     height: @detail-header-height;
     padding: 0;
-    border-top: 1px solid @border-color-base;
+    border-top: 1px solid;
   }
 
   .ant-drawer-title {
diff --git a/src/components/Drawer/src/components/DrawerFooter.vue b/src/components/Drawer/src/components/DrawerFooter.vue
index e0816b22..6a80d05d 100644
--- a/src/components/Drawer/src/components/DrawerFooter.vue
+++ b/src/components/Drawer/src/components/DrawerFooter.vue
@@ -63,7 +63,7 @@ function handleClose() {
   width: 100%;
   padding: 0 12px 0 20px;
   text-align: right;
-  background-color: @component-background;
+  // background-color: @component-background;
   border-top: 1px solid @border-color-base;
 
   > * {
diff --git a/src/components/Drawer/src/components/DrawerHeader.vue b/src/components/Drawer/src/components/DrawerHeader.vue
index 5d8f2bbd..adce20a8 100644
--- a/src/components/Drawer/src/components/DrawerHeader.vue
+++ b/src/components/Drawer/src/components/DrawerHeader.vue
@@ -51,10 +51,6 @@ function handleClose() {
   &__back {
     padding: 0 12px;
     cursor: pointer;
-
-    &:hover {
-      color: @primary-color;
-    }
   }
 
   &__twrap {
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue b/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
index 099317fd..535c8427 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue
@@ -90,10 +90,6 @@ ul {
 
     &:hover {
       position: relative;
-      color: @primary-color;
-      border: 1px solid @primary-color;
-      // z-index: 1;
-      box-shadow: 0 2px 6px @primary-color;
     }
   }
 }
diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue b/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
index 706c63cd..f1505ac8 100644
--- a/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
+++ b/src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue
@@ -124,10 +124,6 @@ export default defineComponent({
       color: #ccc;
     }
 
-    &:hover {
-      color: @primary-color;
-    }
-
     > span {
       padding-left: 2px;
       font-size: 14px;
diff --git a/src/components/FormDesign/src/components/VFormDesign/styles/drag.less b/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
index e0176767..8a489108 100644
--- a/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
+++ b/src/components/FormDesign/src/components/VFormDesign/styles/drag.less
@@ -23,7 +23,6 @@
         width: 100%;
         height: 5px;
         content: "";
-        background-color: @primary-color;
       }
     }
 
@@ -35,10 +34,6 @@
       overflow: hidden;
       transition: all 0.3s;
 
-      &:hover {
-        background-color: @primary-hover-bg-color;
-      }
-
       // 选择时 start
       &::before {
         position: absolute;
@@ -47,12 +42,10 @@
         width: 100%;
         height: 5px;
         content: "";
-        background-color: @primary-color;
         transition: all 0.3s;
       }
 
       &.active {
-        background-color: @primary-hover-bg-color;
         outline-offset: 0;
 
         &::before {
@@ -89,7 +82,6 @@
         bottom: 2px;
         font-size: 14px;
         // z-index: 999;
-        color: @primary-color;
       }
 
       .copy,
@@ -116,13 +108,11 @@
 
       .copy {
         right: 30px;
-        background-color: @primary-color;
         border-radius: 0 0 0 8px;
       }
 
       .delete {
         right: 0;
-        background-color: @primary-color;
       }
     }
 
diff --git a/src/components/Modal/src/components/ModalClose.vue b/src/components/Modal/src/components/ModalClose.vue
index 7641795f..105b1214 100644
--- a/src/components/Modal/src/components/ModalClose.vue
+++ b/src/components/Modal/src/components/ModalClose.vue
@@ -84,16 +84,6 @@ function handleFullScreen(e: Event) {
   & span:nth-child(1) {
     display: inline-block;
     padding: 10px;
-
-    &:hover {
-      color: @primary-color;
-    }
-  }
-
-  & span:last-child {
-    &:hover {
-      color: @error-color;
-    }
   }
 }
 </style>
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
index 07180662..798c0698 100644
--- a/src/components/Modal/src/index.less
+++ b/src/components/Modal/src/index.less
@@ -83,27 +83,11 @@
     }
   }
 
-  &-confirm-confirm.error .ant-modal-confirm-body > .anticon {
-    color: @error-color;
-  }
-
   &-confirm-btns {
     .ant-btn:last-child {
       margin-right: 0;
     }
   }
-
-  &-confirm-info {
-    .ant-modal-confirm-body > .anticon {
-      color: @warning-color;
-    }
-  }
-
-  &-confirm-confirm.success {
-    .ant-modal-confirm-body > .anticon {
-      color: @success-color;
-    }
-  }
 }
 
 .ant-modal-confirm .ant-modal-body {
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index beb171f0..f7211bef 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -152,9 +152,9 @@ watch(
     }
   }
 
-  &-content-bg {
-    background-color: @component-background;
-  }
+  // &-content-bg {
+  //   background-color: @component-background;
+  // }
 
   &--dense {
     .@{prefix-cls}-content {
diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less
index 0600adec..76635b9e 100644
--- a/src/components/SimpleMenu/src/components/menu.less
+++ b/src/components/SimpleMenu/src/components/menu.less
@@ -14,7 +14,6 @@
     display: block;
     width: 2px;
     content: "";
-    background-color: @primary-color;
   }
 }
 
@@ -62,7 +61,6 @@
 
         &-selected {
           color: #fff;
-          background-color: @primary-color !important;
         }
       }
     }
@@ -72,15 +70,8 @@
       .@{menu-prefix-cls}-submenu-title {
         color: @text-color-base;
 
-        &:hover {
-          color: @primary-color;
-        }
-
         &-selected {
           z-index: 2;
-          color: @primary-color;
-          background-color: fade(@primary-color, 10);
-
           .light-border();
         }
       }
@@ -110,8 +101,6 @@
       background-color: #fff;
 
       .@{menu-prefix-cls}-submenu-active {
-        color: @primary-color !important;
-
         &-border {
           .light-border();
         }
@@ -161,10 +150,6 @@
       white-space: nowrap;
       cursor: pointer;
 
-      &:hover {
-        color: @primary-color;
-      }
-
       .@{menu-prefix-cls}-tooltip {
         width: calc(100% - 0px);
         padding: 12px 0;
@@ -218,21 +203,14 @@
     &-light&-vertical &-item {
       &-active:not(.@{menu-prefix-cls}-submenu) {
         z-index: 2;
-        color: @primary-color;
-        background-color: fade(@primary-color, 10);
-
         .light-border();
       }
-      &-active.@{menu-prefix-cls}-submenu {
-        color: @primary-color;
-      }
     }
 
     &-light&-vertical&-collapse {
       > li.@{menu-prefix-cls}-item-active,
       .@{menu-prefix-cls}-submenu-active {
         position: relative;
-        background-color: fade(@primary-color, 5);
 
         &::after {
           display: none;
@@ -245,7 +223,6 @@
           width: 3px;
           height: 100%;
           content: "";
-          background-color: @primary-color;
         }
       }
     }
@@ -255,7 +232,6 @@
       color: @menu-dark-subsidiary-color;
       &-active:not(.@{menu-prefix-cls}-submenu) {
         color: #fff !important;
-        background-color: @primary-color !important;
       }
 
       &:hover {
@@ -277,7 +253,6 @@
           width: 3px;
           height: 100%;
           content: "";
-          background-color: @primary-color;
         }
 
         .@{menu-prefix-cls}-submenu-collapse {
diff --git a/src/components/SimpleMenu/src/index.less b/src/components/SimpleMenu/src/index.less
index e0d2d21a..d1dca486 100644
--- a/src/components/SimpleMenu/src/index.less
+++ b/src/components/SimpleMenu/src/index.less
@@ -59,21 +59,5 @@
       padding: 0;
       border-radius: 50%;
     }
-
-    &--primary {
-      background-color: @primary-color;
-    }
-
-    &--error {
-      background-color: @error-color;
-    }
-
-    &--success {
-      background-color: @success-color;
-    }
-
-    &--warn {
-      background-color: @warning-color;
-    }
   }
 }
diff --git a/src/components/StrengthMeter/src/StrengthMeter.vue b/src/components/StrengthMeter/src/StrengthMeter.vue
index 7fef1b8b..b9f8f7eb 100644
--- a/src/components/StrengthMeter/src/StrengthMeter.vue
+++ b/src/components/StrengthMeter/src/StrengthMeter.vue
@@ -98,31 +98,6 @@ watch(
       transition:
         width 0.5s ease-in-out,
         background 0.25s;
-
-      &[data-score='0'] {
-        width: 20%;
-        background-color: darken(@error-color, 10%);
-      }
-
-      &[data-score='1'] {
-        width: 40%;
-        background-color: @error-color;
-      }
-
-      &[data-score='2'] {
-        width: 60%;
-        background-color: @warning-color;
-      }
-
-      &[data-score='3'] {
-        width: 80%;
-        background-color: fade(@success-color, 50%);
-      }
-
-      &[data-score='4'] {
-        width: 100%;
-        background-color: @success-color;
-      }
     }
   }
 }
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index ad4a48ad..db37d389 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -329,7 +329,7 @@ emit('register', tableAction, formActions)
 
   &-row__striped {
     td {
-      background-color: @app-content-background;
+      // background-color: @app-content-background;
     }
   }
 
diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index 622fc89d..10c84a06 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -475,7 +475,6 @@ export default defineComponent({
 .edit-cell-rule-popover {
   .ant-popover-inner-content {
     padding: 4px 8px;
-    color: @error-color;
     // border: 1px solid @error-color;
     border-radius: 2px;
   }
@@ -497,10 +496,6 @@ export default defineComponent({
   &__icon {
     &:hover {
       transform: scale(1.2);
-
-      svg {
-        color: @primary-color;
-      }
     }
   }
 
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index 254b4b45..95e1511e 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -406,10 +406,6 @@ function updateSortOption(column: BasicColumn) {
 
     .ant-checkbox-wrapper {
       width: 100%;
-
-      &:hover {
-        color: @primary-color;
-      }
     }
   }
 
@@ -418,11 +414,6 @@ function updateSortOption(column: BasicColumn) {
     color: rgb(0 0 0 / 45%);
     cursor: pointer;
 
-    &.active,
-    &:hover {
-      color: @primary-color;
-    }
-
     &.disabled {
       color: @disabled-color;
       cursor: not-allowed;
diff --git a/src/design/ant/btn.less b/src/design/ant/btn.less
deleted file mode 100644
index ee493fec..00000000
--- a/src/design/ant/btn.less
+++ /dev/null
@@ -1,286 +0,0 @@
-// button reset
-.ant-btn {
-  &-link:hover,
-  &-link:focus,
-  &-link:active {
-    border-color: transparent !important;
-  }
-
-  &-primary {
-    color: @white;
-    background-color: @button-primary-color;
-
-    &:hover,
-    &:focus {
-      color: @white;
-      background-color: @button-primary-hover-color;
-    }
-  }
-
-  /* stylelint-disable-next-line selector-not-notation */
-  &-primary:not(&-background-ghost):not([disabled]) {
-    color: @white;
-  }
-
-  &-default {
-    color: @button-cancel-color;
-    background-color: @button-cancel-bg-color;
-    border-color: @button-cancel-border-color;
-
-    &:hover,
-    &:focus {
-      color: @button-cancel-hover-color;
-      background-color: @button-cancel-hover-bg-color;
-      border-color: @button-cancel-hover-border-color;
-    }
-    //
-    //&[disabled],
-    //&[disabled]:hover {
-    //  color: fade(@button-cancel-color, 40%) !important;
-    //  background: fade(@button-cancel-bg-color, 40%) !important;
-    //  border-color: fade(@button-cancel-border-color, 40%) !important;
-    //}
-  }
-
-  [data-theme="light"] &.ant-btn-link.is-disabled {
-    color: rgb(0 0 0 / 25%);
-    text-shadow: none;
-    cursor: not-allowed !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    box-shadow: none;
-  }
-
-  [data-theme="dark"] &.ant-btn-link.is-disabled {
-    color: rgb(255 255 255 / 25%) !important;
-    text-shadow: none;
-    cursor: not-allowed !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    box-shadow: none;
-  }
-
-  // color: @white;
-
-  &-success.ant-btn-link:not([disabled="disabled"]) {
-    color: @button-success-color;
-
-    &:hover,
-    &:focus {
-      color: @button-success-hover-color;
-      border-color: transparent;
-    }
-
-    &:active {
-      color: @button-success-active-color;
-    }
-  }
-
-  &-success.ant-btn-link.ant-btn-loading,
-  &-warning.ant-btn-link.ant-btn-loading,
-  &-error.ant-btn-link.ant-btn-loading,
-  &-background-ghost.ant-btn-link.ant-btn-loading,
-  &.ant-btn-link.ant-btn-loading {
-    &::before {
-      background: transparent;
-    }
-  }
-
-  &-success:not(.ant-btn-link, .is-disabled) {
-    color: @white;
-    background-color: @button-success-color;
-    border-color: @button-success-color;
-    //border-width: 0;
-
-    &:hover,
-    &:focus {
-      color: @white;
-      background-color: @button-success-hover-color;
-      border-color: @button-success-hover-color;
-    }
-
-    &:active {
-      background-color: @button-success-active-color;
-      border-color: @button-success-active-color;
-    }
-  }
-
-  &-warning.ant-btn-link:not([disabled="disabled"]) {
-    color: @button-warn-color;
-
-    &:hover,
-    &:focus {
-      color: @button-warn-hover-color;
-      border-color: transparent;
-    }
-
-    &:active {
-      color: @button-warn-active-color;
-    }
-  }
-
-  &-warning:not(.ant-btn-link, .is-disabled) {
-    color: @white;
-    background-color: @button-warn-color;
-    border-color: @button-warn-color;
-    //border-width: 0;
-
-    &:hover,
-    &:focus {
-      color: @white;
-      background-color: @button-warn-hover-color;
-      border-color: @button-warn-hover-color;
-    }
-
-    &:active {
-      background-color: @button-warn-active-color;
-      border-color: @button-warn-active-color;
-    }
-
-    //&[disabled],
-    //&[disabled]:hover {
-    //  color: @white;
-    //  background-color: fade(@button-warn-color, 40%);
-    //  border-color: fade(@button-warn-color, 40%);
-    //}
-  }
-
-  &-error.ant-btn-link:not([disabled="disabled"]) {
-    color: @button-error-color;
-
-    &:hover,
-    &:focus {
-      color: @button-error-hover-color;
-      border-color: transparent;
-    }
-
-    &:active {
-      color: @button-error-active-color;
-    }
-  }
-
-  &-error:not(.ant-btn-link, .is-disabled) {
-    color: @white;
-    background-color: @button-error-color;
-    border-color: @button-error-color;
-    //border-width: 0;
-
-    &:hover,
-    &:focus {
-      color: @white;
-      background-color: @button-error-hover-color;
-      border-color: @button-error-hover-color;
-    }
-
-    &:active {
-      background-color: @button-error-active-color;
-      border-color: @button-error-active-color;
-    }
-
-    //&[disabled],
-    //&[disabled]:hover {
-    //  color: @white;
-    //  background-color: fade(@button-error-color, 40%);
-    //  border-color: fade(@button-error-color, 40%);
-    //}
-  }
-
-  &-background-ghost {
-    background-color: transparent !important;
-    border-width: 1px;
-
-    &[disabled],
-    &[disabled]:hover {
-      color: fade(@white, 40%) !important;
-      background-color: transparent !important;
-      border-color: fade(@white, 40%) !important;
-    }
-  }
-
-  &-dashed&-background-ghost,
-  &-default&-background-ghost {
-    color: @button-ghost-color;
-    border-color: @button-ghost-color;
-
-    &:hover,
-    &:focus {
-      color: @button-ghost-hover-color;
-      border-color: @button-ghost-hover-color;
-    }
-
-    &:active {
-      color: @button-ghost-active-color;
-      border-color: @button-ghost-active-color;
-    }
-
-    &[disabled],
-    &[disabled]:hover {
-      color: fade(@white, 40%) !important;
-      border-color: fade(@white, 40%) !important;
-    }
-  }
-
-  &-background-ghost&-success:not(.ant-btn-link) {
-    color: @button-success-color;
-    background-color: transparent;
-    border-color: @button-success-color;
-    border-width: 1px;
-
-    &:hover,
-    &:focus {
-      color: @button-success-hover-color !important;
-      border-color: @button-success-hover-color;
-    }
-
-    &:active {
-      color: @button-success-active-color;
-      border-color: @button-success-active-color;
-    }
-  }
-
-  &-background-ghost&-warning:not(.ant-btn-link) {
-    color: @button-warn-color;
-    background-color: transparent;
-    border-color: @button-warn-color;
-    border-width: 1px;
-
-    &:hover,
-    &:focus {
-      color: @button-warn-hover-color !important;
-      border-color: @button-warn-hover-color;
-    }
-
-    &:active {
-      color: @button-warn-active-color;
-      border-color: @button-warn-active-color;
-    }
-  }
-
-  &-background-ghost&-error:not(.ant-btn-link) {
-    color: @button-error-color;
-    background-color: transparent;
-    border-color: @button-error-color;
-    border-width: 1px;
-
-    &:hover,
-    &:focus {
-      color: @button-error-hover-color !important;
-      border-color: @button-error-hover-color;
-    }
-
-    &:active {
-      color: @button-error-active-color;
-      border-color: @button-error-active-color;
-    }
-  }
-
-  &-ghost.ant-btn-link:not([disabled="disabled"]) {
-    color: @button-ghost-color;
-
-    &:hover,
-    &:focus {
-      color: @button-ghost-hover-color;
-      border-color: transparent;
-    }
-  }
-}
diff --git a/src/design/ant/index.less b/src/design/ant/index.less
deleted file mode 100644
index a4037519..00000000
--- a/src/design/ant/index.less
+++ /dev/null
@@ -1,67 +0,0 @@
-@import "./pagination.less";
-@import "./input.less";
-@import "./btn.less";
-
-.ant-image-preview-root {
-  img {
-    display: unset;
-  }
-}
-
-span.anticon:not(.app-iconify) {
-  vertical-align: 0.125em !important;
-}
-
-.ant-back-top {
-  right: 20px;
-  bottom: 20px;
-}
-
-.collapse-container__body {
-  > .ant-descriptions {
-    margin-left: 6px;
-  }
-}
-
-.ant-image-preview-operations {
-  background-color: rgb(0 0 0 / 30%);
-}
-
-.ant-popover {
-  &-content {
-    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-  }
-}
-
-// =================================
-// ==============modal message======
-// =================================
-.modal-icon-warning {
-  color: @warning-color !important;
-}
-
-.modal-icon-success {
-  color: @success-color !important;
-}
-
-.modal-icon-error {
-  color: @error-color !important;
-}
-
-.modal-icon-info {
-  color: @primary-color !important;
-}
-
-.ant-checkbox-checked .ant-checkbox-inner::after,
-.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
-  border-top: 0 !important;
-  border-left: 0 !important;
-}
-
-.ant-form-item-control-input-content {
-  > div {
-    > div {
-      max-width: 100%;
-    }
-  }
-}
diff --git a/src/design/ant/input.less b/src/design/ant/input.less
deleted file mode 100644
index 5fdabf1c..00000000
--- a/src/design/ant/input.less
+++ /dev/null
@@ -1,27 +0,0 @@
-@import (reference) "../color.less";
-
-// input
-.ant-input {
-  &-number,
-  &-number-group-wrapper {
-    width: 100% !important;
-    min-width: 110px;
-    max-width: 100%;
-  }
-}
-
-.ant-input-affix-wrapper .ant-input-suffix {
-  right: 9px;
-}
-
-.ant-input-clear-icon {
-  margin-right: 5px;
-}
-
-.ant-input-affix-wrapper-textarea-with-clear-btn {
-  padding: 0 !important;
-
-  textarea.ant-input {
-    padding: 4px;
-  }
-}
diff --git a/src/design/ant/pagination.less b/src/design/ant/pagination.less
deleted file mode 100644
index 7c05a74d..00000000
--- a/src/design/ant/pagination.less
+++ /dev/null
@@ -1,96 +0,0 @@
-html[data-theme="dark"] {
-  .ant-pagination {
-    &.mini {
-      .ant-pagination-prev,
-      .ant-pagination-next,
-      .ant-pagination-item {
-        background-color: rgb(255 255 255 / 4%) !important;
-
-        a {
-          color: #8b949e !important;
-        }
-      }
-
-      .ant-select-arrow {
-        color: @text-color-secondary !important;
-      }
-
-      .ant-pagination-item-active {
-        background-color: @primary-color !important;
-        border: none;
-        border-radius: none !important;
-
-        a {
-          color: @white !important;
-        }
-      }
-    }
-  }
-}
-
-.ant-pagination {
-  &.mini {
-    .ant-pagination-prev,
-    .ant-pagination-next {
-      font-size: 12px;
-      color: @text-color-base;
-      border: 1px solid;
-    }
-
-    .ant-pagination-prev:hover,
-    .ant-pagination-next:hover,
-    .ant-pagination-item:focus,
-    .ant-pagination-item:hover {
-      a {
-        color: @primary-color;
-      }
-    }
-
-    .ant-pagination-prev,
-    .ant-pagination-next,
-    .ant-pagination-item {
-      margin: 0 4px !important;
-      background-color: #f4f4f5 !important;
-      border: none;
-      border-radius: none !important;
-
-      a {
-        margin-top: 1px;
-        color: #606266;
-      }
-
-      &:last-child {
-        margin-right: 0 !important;
-      }
-    }
-
-    .ant-pagination-item-active {
-      background-color: @primary-color !important;
-      border: none;
-      border-radius: none !important;
-
-      a {
-        color: @white !important;
-      }
-    }
-
-    .ant-pagination-options {
-      margin-left: 12px;
-    }
-
-    .ant-pagination-options-quick-jumper input {
-      height: 22px;
-      margin: 0 6px;
-      line-height: 22px;
-      text-align: center;
-    }
-
-    .ant-select-arrow {
-      color: @border-color-shallow-dark;
-    }
-  }
-
-  &-disabled {
-    display: none !important;
-  }
-}
diff --git a/src/design/ant/table.less b/src/design/ant/table.less
deleted file mode 100644
index 2e3a8194..00000000
--- a/src/design/ant/table.less
+++ /dev/null
@@ -1,76 +0,0 @@
-@prefix-cls: ~"@{namespace}-basic-table";
-
-// fix table unnecessary scrollbar
-.@{prefix-cls} {
-  .hide-scrollbar-y {
-    .ant-spin-nested-loading {
-      .ant-spin-container {
-        .ant-table {
-          .ant-table-content {
-            .ant-table-scroll {
-              .ant-table-hide-scrollbar {
-                overflow-y: auto !important;
-              }
-
-              .ant-table-body {
-                overflow-y: auto !important;
-              }
-            }
-
-            .ant-table-fixed-right {
-              .ant-table-body-outer {
-                .ant-table-body-inner {
-                  overflow-y: auto !important;
-                }
-              }
-            }
-
-            .ant-table-fixed-left {
-              .ant-table-body-outer {
-                .ant-table-body-inner {
-                  overflow-y: auto !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .hide-scrollbar-x {
-    .ant-spin-nested-loading {
-      .ant-spin-container {
-        .ant-table {
-          .ant-table-content {
-            .ant-table-scroll {
-              .ant-table-hide-scrollbar {
-                //overflow-x: auto !important;
-              }
-
-              .ant-table-body {
-                overflow: auto !important;
-              }
-            }
-
-            .ant-table-fixed-right {
-              .ant-table-body-outer {
-                .ant-table-body-inner {
-                  overflow-x: auto !important;
-                }
-              }
-            }
-
-            .ant-table-fixed-left {
-              .ant-table-body-outer {
-                .ant-table-body-inner {
-                  overflow-x: auto !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/design/color.less b/src/design/color.less
index 9d2138c4..b8b125f1 100644
--- a/src/design/color.less
+++ b/src/design/color.less
@@ -10,10 +10,38 @@ html {
   --sider-dark-lighten-bg-color: #273352;
 }
 
+@font-size-base: 14;
+
 @white: #fff;
 
+@black: #000;
+
 @content-bg: #f4f7f9;
 
+@text-color: fade(@black, 85%);
+
+@text-color-secondary: fade(@black, 45%);
+
+@text-color-inverse: @white;
+
+@icon-color: inherit;
+
+@icon-color-hover: fade(@black, 75%);
+
+@component-background: #fff;
+
+@component-background-dark: fade(@black, 75%);
+
+@layout-body-background: #f0f2f5;
+
+@modal-mask-bg: fade(@black, 45%);
+
+@disabled-color: fade(#000, 25%);
+
+@background-color-light: hsv(0, 0, 98%);
+
+@item-hover-bg: #f5f5f5;
+
 // :export {
 //   name: "less";
 //   mainColor: @mainColor;
@@ -24,6 +52,7 @@ html {
 // =================================
 // ==============border-color=======
 // =================================
+@border-color-base: #fff;
 
 // Dark-dark
 @border-color-dark: #b6b7b9;
@@ -83,9 +112,6 @@ html {
 // =================================
 // ==============link============
 // =================================
-@link-hover-color: @primary-color;
-@link-active-color: darken(@primary-color, 10%);
-
 // =================================
 // ==============Text color-=============
 // =================================
@@ -107,32 +133,13 @@ html {
 // ==============button=============
 // =================================
 
-@button-primary-color: @primary-color;
-@button-primary-hover-color: lighten(@primary-color, 5%);
-@button-primary-active-color: darken(@primary-color, 5%);
-
 @button-ghost-color: @white;
 @button-ghost-hover-color: lighten(@white, 10%);
 @button-ghost-hover-bg-color: #e1ebf6;
 @button-ghost-active-color: darken(@white, 10%);
 
-@button-success-color: @success-color;
-@button-success-hover-color: lighten(@success-color, 10%);
-@button-success-active-color: darken(@success-color, 10%);
-
-@button-warn-color: @warning-color;
-@button-warn-hover-color: lighten(@warning-color, 10%);
-@button-warn-active-color: darken(@warning-color, 10%);
-
-@button-error-color: @error-color;
-@button-error-hover-color: lighten(@error-color, 10%);
-@button-error-active-color: darken(@error-color, 10%);
-
 @button-cancel-color: @text-color-call-out;
+
 @button-cancel-bg-color: @white;
 @button-cancel-border-color: @border-color-shallow-dark;
 
-// Mouse over
-@button-cancel-hover-color: @primary-color;
-@button-cancel-hover-bg-color: @white;
-@button-cancel-hover-border-color: @primary-color;
diff --git a/src/design/index.less b/src/design/index.less
index c08b62a0..4b7b8fc6 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -1,7 +1,7 @@
 @import "transition/index.less";
 @import "var/index.less";
 @import "public.less";
-@import "ant/index.less";
+// @import "ant/index.less";
 @import "./theme.less";
 @import "./entry.css";
 
diff --git a/src/design/public.less b/src/design/public.less
index 644bfab2..3e0c6bbf 100644
--- a/src/design/public.less
+++ b/src/design/public.less
@@ -45,7 +45,6 @@
     z-index: 99999;
     width: 100%;
     height: 2px;
-    background-color: @primary-color;
     opacity: 0.75;
   }
 }
diff --git a/src/layouts/default/feature/index.vue b/src/layouts/default/feature/index.vue
index d34bc8cc..9d584508 100644
--- a/src/layouts/default/feature/index.vue
+++ b/src/layouts/default/feature/index.vue
@@ -1,30 +1,27 @@
 <script lang="ts" setup>
+import { FloatButton } from 'ant-design-vue'
 import { computed, unref } from 'vue'
-import { BackTop } from 'ant-design-vue'
-
-import { useRootSetting } from '@/hooks/setting/useRootSetting'
-import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
-import { useDesign } from '@/hooks/web/useDesign'
-import { useUserStoreWithOut } from '@/store/modules/user'
 
 import { SettingButtonPositionEnum } from '@/enums/appEnum'
+import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
+import { useRootSetting } from '@/hooks/setting/useRootSetting'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useUserStoreWithOut } from '@/store/modules/user'
 import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
-
 import SessionTimeoutLogin from '@/views/base/login/SessionTimeoutLogin.vue'
 
 defineOptions({ name: 'LayoutFeatures' })
-
 const LayoutLockPage = createAsyncComponent(() => import('@/views/base/lock/index.vue'))
-
 const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))
 
-const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting()
+const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent }
+    = useRootSetting()
+
+const getTarget = () => document.body
 const userStore = useUserStoreWithOut()
 const { prefixCls } = useDesign('setting-drawer-feature')
 const { getShowHeader } = useHeaderSetting()
 
-const getTarget = () => document.body
-
 const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)
 
 const getIsFixedSettingDrawer = computed(() => {
@@ -42,31 +39,30 @@ const getIsFixedSettingDrawer = computed(() => {
 
 <template>
   <LayoutLockPage />
-  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
+  <FloatButton.BackTop v-if="getUseOpenBackTop" :target="getTarget" />
   <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
   <SessionTimeoutLogin v-if="getIsSessionTimeout" />
 </template>
 
 <style lang="less">
-@prefix-cls: ~'@{namespace}-setting-drawer-feature';
+  @prefix-cls: ~'@{namespace}-setting-drawer-feature';
 
-.@{prefix-cls} {
-  position: absolute;
-  top: 45%;
-  right: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  color: @white;
-  cursor: pointer;
-  background-color: @primary-color;
-  border-radius: 6px 0 0 6px;
+  .@{prefix-cls} {
+    position: absolute;
+    top: 45%;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    color: @white;
+    cursor: pointer;
+    border-radius: 6px 0 0 6px;
 
-  svg {
-    width: 1em;
-    height: 1em;
+    svg {
+      width: 1em;
+      height: 1em;
+    }
   }
-}
 </style>
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
index ef7e30f5..4a701fdd 100644
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -163,10 +163,6 @@ function getIcon(route) {
 
       a {
         color: rgb(0 0 0 / 65%);
-
-        &:hover {
-          color: @primary-color;
-        }
       }
     }
 
diff --git a/src/layouts/default/header/index.less b/src/layouts/default/header/index.less
index 18620595..682867a8 100644
--- a/src/layouts/default/header/index.less
+++ b/src/layouts/default/header/index.less
@@ -3,6 +3,11 @@
 @breadcrumb-prefix-cls: ~"@{namespace}-layout-breadcrumb";
 @logo-prefix-cls: ~"@{namespace}-app-logo";
 
+.ant-layout .ant-layout-header {
+  height: 48px !important;
+  padding-inline: 10px;
+}
+
 .@{header-prefix-cls} {
   display: flex;
   align-items: center;
@@ -120,7 +125,7 @@
       }
 
       .ant-badge-dot {
-        top: 10px;
+        top: 14px;
         right: 2px;
       }
     }
diff --git a/src/layouts/default/index.vue b/src/layouts/default/index.vue
index 5ec9049b..306a26f9 100644
--- a/src/layouts/default/index.vue
+++ b/src/layouts/default/index.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import { computed, unref } from 'vue'
 import { Layout } from 'ant-design-vue'
+import { computed, unref } from 'vue'
 
-import LayoutHeader from './header/index.vue'
 import LayoutContent from './content/index.vue'
-import LayoutSideBar from './sider/index.vue'
+import LayoutHeader from './header/index.vue'
 import LayoutMultipleHeader from './header/MultipleHeader.vue'
-import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
-
+import LayoutSideBar from './sider/index.vue'
 import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+import { useAppInject } from '@/hooks/web/useAppInject'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useLockPage } from '@/hooks/web/useLockPage'
-
-import { useAppInject } from '@/hooks/web/useAppInject'
+import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
 
 defineOptions({ name: 'DefaultLayout' })
+
 const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'))
 const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'))
 
@@ -52,22 +51,17 @@ const layoutClass = computed(() => {
 </template>
 
 <style lang="less">
-@prefix-cls: ~'@{namespace}-default-layout';
+  @prefix-cls: ~'@{namespace}-default-layout';
 
-.@{prefix-cls} {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100%;
-  background-color: @content-bg;
-
-  > .ant-layout {
-    min-height: 100%;
-  }
-
-  &-main {
+  .@{prefix-cls} {
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    margin-left: 1px;
+    min-height: 100%;
+
+    &-main {
+      width: 100%;
+      margin-left: 1px;
+    }
   }
-}
 </style>
diff --git a/src/layouts/default/setting/components/ThemeColorPicker.vue b/src/layouts/default/setting/components/ThemeColorPicker.vue
index 5f90ea30..8b38fc46 100644
--- a/src/layouts/default/setting/components/ThemeColorPicker.vue
+++ b/src/layouts/default/setting/components/ThemeColorPicker.vue
@@ -66,8 +66,6 @@ function handleClick(color: string) {
     }
 
     &--active {
-      border: 1px solid lighten(@primary-color, 10%);
-
       svg {
         display: inline-block;
         margin: 0 0 3px 3px;
diff --git a/src/layouts/default/setting/components/TypePicker.vue b/src/layouts/default/setting/components/TypePicker.vue
index f590185c..7db4e48d 100644
--- a/src/layouts/default/setting/components/TypePicker.vue
+++ b/src/layouts/default/setting/components/TypePicker.vue
@@ -152,7 +152,6 @@ const { prefixCls } = useDesign('setting-menu-type-picker')
     &:hover,
     &--active {
       padding: 12px;
-      border: 2px solid @primary-color;
 
       &::before,
       &::after {
diff --git a/src/layouts/default/sider/DragBar.vue b/src/layouts/default/sider/DragBar.vue
index 082ef962..d0088baf 100644
--- a/src/layouts/default/sider/DragBar.vue
+++ b/src/layouts/default/sider/DragBar.vue
@@ -52,7 +52,6 @@ const getClass = computed(() => {
   }
 
   &:hover {
-    background-color: @primary-color;
     box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
   }
 }
diff --git a/src/layouts/default/sider/LayoutSider.vue b/src/layouts/default/sider/LayoutSider.vue
index d4e3f4e7..f6e23bf6 100644
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -103,7 +103,7 @@ const getTrigger = h(LayoutTrigger)
   z-index: @layout-sider-fixed-z-index;
 
   &--fixed {
-    position: fixed;
+    position: fixed !important;
     top: 0;
     left: 0;
     height: 100%;
diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
index bf88b2e2..9bc87b4a 100644
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -331,7 +331,7 @@ export default defineComponent({
   position: fixed;
   top: 0;
   left: 0;
-  z-index: @layout-mix-sider-fixed-z-index;
+  // z-index: @layout-mix-sider-fixed-z-index;
   height: 100%;
   overflow: hidden;
   background-color: @sider-dark-bg-color;
@@ -372,7 +372,6 @@ export default defineComponent({
         color: rgb(0 0 0 / 65%);
 
         &--active {
-          color: @primary-color;
           background-color: unset;
         }
       }
@@ -458,7 +457,6 @@ export default defineComponent({
           width: 3px;
           height: 100%;
           content: '';
-          background-color: @primary-color;
         }
       }
     }
@@ -511,7 +509,6 @@ export default defineComponent({
       height: @header-height;
       // margin-left: -6px;
       font-size: 18px;
-      color: @primary-color;
       border-bottom: 1px solid rgb(238 238 238);
       opacity: 0;
       transition: unset;
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index 6283709b..db691ed0 100644
--- a/src/layouts/default/tabs/index.less
+++ b/src/layouts/default/tabs/index.less
@@ -1,6 +1,7 @@
 @prefix-cls: ~"@{namespace}-multiple-tabs";
 
 html[data-theme="dark"] {
+  // background-color: @component-background-dark;
   .@{prefix-cls} {
     .ant-tabs-tab {
       border-bottom: none !important;
@@ -18,6 +19,7 @@ html[data-theme="dark"] {
 }
 
 html[data-theme="light"] {
+  background-color: @component-background;
   .@{prefix-cls} {
     .ant-tabs-tab:not(.ant-tabs-tab-active) {
       border: none !important;
@@ -34,7 +36,6 @@ html[data-theme="light"] {
   z-index: 10;
   height: @multiple-height;
   line-height: @multiple-height;
-  background-color: @component-background;
   box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
 
   .ant-tabs-small {
@@ -46,7 +47,7 @@ html[data-theme="light"] {
       height: @multiple-height;
       padding-left: 10px;
       margin: 0;
-      background-color: @component-background;
+      // background-color: @component-background;
       border: 0;
       box-shadow: none;
 
@@ -62,17 +63,17 @@ html[data-theme="light"] {
         padding: 0 16px;
         margin: 0 -14px 0 0 !important;
         line-height: @multiple-height;
-        color: @text-color-base;
-        background-color: @component-background;
+        // color: @text-color-base;
+        // background-color: @component-background;
         border-radius: 8px 8px 0 0;
         /* stylelint-disable-next-line function-url-quotes */
         mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
         transition: padding 0.3s;
         mask-size: 100% 100%;
 
-        .ant-tabs-tab-btn {
-          color: @text-color-base;
-        }
+        // .ant-tabs-tab-btn {
+        //   color: @text-color-base;
+        // }
 
         &:hover {
           z-index: 2;
@@ -140,18 +141,9 @@ html[data-theme="light"] {
         z-index: 3;
         padding: 0 16px;
         font-weight: inherit;
-        color: @primary-color !important;
         background: #d4ebff;
         border: 0;
 
-        span {
-          color: @primary-color !important;
-        }
-
-        .ant-tabs-tab-btn {
-          color: @primary-color;
-        }
-
         .ant-tabs-tab-remove .anticon-close {
           opacity: 1;
 
@@ -162,7 +154,6 @@ html[data-theme="light"] {
 
         svg {
           width: inherit;
-          fill: @primary-color;
         }
       }
     }
@@ -210,7 +201,7 @@ html[data-theme="light"] {
       width: 36px;
       height: @multiple-height;
       line-height: @multiple-height;
-      color: @text-color-secondary;
+      // color: @text-color-secondary;
       text-align: center;
       cursor: pointer;
       border-left: 1px solid @border-color-base;
diff --git a/src/logics/theme/dark.ts b/src/logics/theme/dark.ts
index f3a50622..c9f3325f 100644
--- a/src/logics/theme/dark.ts
+++ b/src/logics/theme/dark.ts
@@ -1,23 +1,12 @@
-import { darkCssIsReady, loadDarkThemeCss } from 'vite-vue-plugin-theme/es/client'
-import { addClass, hasClass, removeClass } from '@/utils/domUtils'
+import { useDark, useToggle } from '@vueuse/core'
 
-export async function updateDarkTheme(mode: string | null = 'light') {
-  const htmlRoot = document.getElementById('htmlRoot')
-  if (!htmlRoot)
-    return
+const isDark = useDark({
+  attribute: 'data-theme',
+  valueDark: 'dark',
+  valueLight: 'light',
+})
+const toggleDark = useToggle(isDark)
 
-  const hasDarkClass = hasClass(htmlRoot, 'dark')
-  if (mode === 'dark') {
-    if (import.meta.env.PROD && !darkCssIsReady)
-      await loadDarkThemeCss()
-
-    htmlRoot.setAttribute('data-theme', 'dark')
-    if (!hasDarkClass)
-      addClass(htmlRoot, 'dark')
-  }
-  else {
-    htmlRoot.setAttribute('data-theme', 'light')
-    if (hasDarkClass)
-      removeClass(htmlRoot, 'dark')
-  }
+export function updateDarkTheme(mode: string | null = 'light') {
+  toggleDark(mode === 'dark')
 }
diff --git a/src/logics/theme/index.ts b/src/logics/theme/index.ts
index dfd3a3c1..d8e80b77 100644
--- a/src/logics/theme/index.ts
+++ b/src/logics/theme/index.ts
@@ -1,16 +1 @@
-import { replaceStyleVariables } from 'vite-vue-plugin-theme/es/client'
-import { mixDarken, mixLighten, tinycolor } from 'vite-vue-plugin-theme/es/colorUtils'
-import { generateColors, getThemeColors } from '../../../build/config/themeConfig'
-
-export async function changeTheme(color: string) {
-  const colors = generateColors({
-    mixDarken,
-    mixLighten,
-    tinycolor,
-    color,
-  })
-
-  return await replaceStyleVariables({
-    colorVariables: [...getThemeColors(color), ...colors],
-  })
-}
+export async function changeTheme(_color: string) {}
diff --git a/src/main.ts b/src/main.ts
index bc0e97ce..bcb2c125 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,11 @@
 import 'uno.css'
-import '@/design/index.less'
+import 'ant-design-vue/dist/reset.css'
+import './design/index.less'
 
 // Register icon sprite
 import 'virtual:svg-icons-register'
 import { createApp } from 'vue'
 import App from './App.vue'
-import { isDevMode } from './utils/env'
 import { initAppConfigStore } from '@/logics/initAppConfig'
 import { setupErrorHandle } from '@/logics/error-handle'
 import { router, setupRouter } from '@/router'
@@ -17,10 +17,6 @@ import { registerGlobComp } from '@/components/registerGlobComp'
 
 import '@/utils/tongji'
 
-if (isDevMode())
-  import('ant-design-vue/dist/antd.less')
-// 百度统计
-
 async function bootstrap() {
   const app = createApp(App)
 
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 9b682502..7e301697 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,4 +1,7 @@
 import { defineStore } from 'pinia'
+import { theme as antdTheme } from 'ant-design-vue/es'
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context'
+import { reactive } from 'vue'
 import type { AppSizeType, HeaderSetting, MenuSetting, MultiTabsSetting, ProjectConfig, TransitionSetting } from '@/types/config'
 import type { BeforeMiniState } from '@/types/store'
 
@@ -13,6 +16,7 @@ import { deepMerge } from '@/utils'
 
 interface AppState {
   darkMode?: ThemeEnum
+  themeConfig: ThemeConfig
   // Page loading status
   pageLoading: boolean
   // project config
@@ -25,6 +29,13 @@ let timeId: TimeoutHandle
 export const useAppStore = defineStore('app', {
   state: (): AppState => ({
     darkMode: undefined,
+    themeConfig: {
+      algorithm: antdTheme.defaultAlgorithm,
+      token: {
+        colorBgContainer: '#fff',
+      },
+      components: {},
+    },
     pageLoading: false,
     projectConfig: Persistent.getLocal(PROJ_CFG_KEY),
     beforeMiniInfo: {},
@@ -69,8 +80,38 @@ export const useAppStore = defineStore('app', {
 
     setDarkMode(mode: ThemeEnum): void {
       this.darkMode = mode
+      console.info(mode)
+      this.setThemeConfig()
       localStorage.setItem(APP_DARK_MODE_KEY_, mode)
     },
+    setThemeConfig(color?: string): void {
+      console.info(this.darkMode)
+      let themeConfig = reactive<ThemeConfig>({
+        algorithm: antdTheme.defaultAlgorithm,
+        token: {
+          colorBgContainer: '#fff',
+          colorPrimary: color || (this.projectConfig
+            ? this.projectConfig.themeColor
+            : '#1890ff'),
+        },
+        components: {},
+      })
+
+      if (this.darkMode === 'dark') {
+        themeConfig = {
+          algorithm: antdTheme.darkAlgorithm,
+          token: {
+            colorBgContainer: 'rgb(36, 37, 37)',
+            colorPrimary: color || (this.projectConfig
+              ? this.projectConfig.themeColor
+              : '#1890ff'),
+          },
+          components: {},
+        }
+      }
+      console.info(themeConfig)
+      this.themeConfig = themeConfig
+    },
 
     setBeforeMiniInfo(state: BeforeMiniState): void {
       this.beforeMiniInfo = state
diff --git a/src/views/base/lock/LockPage.vue b/src/views/base/lock/LockPage.vue
index 981eff84..0f584106 100644
--- a/src/views/base/lock/LockPage.vue
+++ b/src/views/base/lock/LockPage.vue
@@ -211,7 +211,6 @@ function handleShowForm(show = false) {
     &__err-msg {
       display: inline-block;
       margin-top: 10px;
-      color: @error-color;
     }
 
     &__footer {
diff --git a/src/views/base/login/Login.vue b/src/views/base/login/Login.vue
index 49f3d9de..364687e6 100644
--- a/src/views/base/login/Login.vue
+++ b/src/views/base/login/Login.vue
@@ -174,10 +174,6 @@ html[data-theme='dark'] {
       font-size: 22px;
       color: #888;
       cursor: pointer;
-
-      &:hover {
-        color: @primary-color;
-      }
     }
   }
 
diff --git a/src/views/base/login/sso.vue b/src/views/base/login/sso.vue
index 5b0e121f..a707333c 100644
--- a/src/views/base/login/sso.vue
+++ b/src/views/base/login/sso.vue
@@ -166,10 +166,6 @@ html[data-theme='dark'] {
       font-size: 22px;
       color: #888;
       cursor: pointer;
-
-      &:hover {
-        color: @primary-color;
-      }
     }
   }