diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 5ebdcc9b9..5b29eb710 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -29,6 +29,7 @@
     "@vben-core/preferences": "workspace:*",
     "@vben-core/request": "workspace:*",
     "@vben-core/stores": "workspace:*",
+    "@vben/chart-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
@@ -37,7 +38,6 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/universal-ui": "workspace:*",
-    "@vben/chart-ui": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "ant-design-vue": "^4.2.3",
diff --git a/apps/web-antd/src/views/_essential/vben/about/index.vue b/apps/web-antd/src/views/_essential/vben/about/index.vue
index 6ae422f38..cf24d69a1 100644
--- a/apps/web-antd/src/views/_essential/vben/about/index.vue
+++ b/apps/web-antd/src/views/_essential/vben/about/index.vue
@@ -1,16 +1,9 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { Fallback } from '@vben/universal-ui';
 
-defineOptions({ name: 'About' });
-onMounted(() => {
-  // eslint-disable-next-line no-console
-  console.log('About');
-});
+defineOptions({ name: 'Menu1' });
 </script>
 
 <template>
-  <div>
-    about
-    <input class="bg-background border-border" />
-  </div>
+  <Fallback status="hello" />
 </template>
diff --git a/internal/lint-configs/eslint-config/package.json b/internal/lint-configs/eslint-config/package.json
index 254c7d83b..e1e069433 100644
--- a/internal/lint-configs/eslint-config/package.json
+++ b/internal/lint-configs/eslint-config/package.json
@@ -38,7 +38,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-i": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.15",
+    "eslint-plugin-jsdoc": "^48.4.0",
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-n": "^17.9.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json
index a7792245b..a44d4f9b5 100644
--- a/internal/tailwind-config/package.json
+++ b/internal/tailwind-config/package.json
@@ -45,7 +45,7 @@
     "tailwindcss": "^3.4.3"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.221",
+    "@iconify/json": "^2.2.222",
     "@iconify/tailwind": "^1.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts
index 00a7259bd..9e58310e4 100644
--- a/internal/tailwind-config/src/index.ts
+++ b/internal/tailwind-config/src/index.ts
@@ -62,55 +62,62 @@ export default {
         '3000': '3000ms',
       },
       borderRadius: {
-        lg: 'var(--radius-base)',
-        md: 'calc(var(--radius-base) - 2px)',
-        sm: 'calc(var(--radius-base) - 4px)',
-        xl: 'calc(var(--radius-base) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+        xl: 'calc(var(--radius) + 4px)',
       },
       colors: {
         accent: {
-          DEFAULT: 'hsl(var(--color-accent))',
-          foreground: 'hsl(var(--color-accent-foreground))',
-          hover: 'hsl(var(--color-accent-hover))',
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+          hover: 'hsl(var(--accent-hover))',
         },
-        background: 'hsl(var(--color-background) / <alpha-value>)',
-        // body: 'hsl(var(--color-body) / <alpha-value>)',
-        border: 'hsl(var(--color-border))',
+        background: 'hsl(var(--background))',
+        border: 'hsl(var(--border))',
         card: {
-          DEFAULT: 'hsl(var(--color-card))',
-          foreground: 'hsl(var(--color-card-foreground))',
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
         destructive: {
-          DEFAULT: 'hsl(var(--color-destructive))',
-          foreground: 'hsl(var(--color-destructive-foreground))',
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
-        foreground: 'hsl(var(--color-foreground) / <alpha-value>)',
+        foreground: 'hsl(var(--foreground) / <alpha-value>)',
         heavy: {
-          DEFAULT: 'hsl(var(--color-heavy) / <alpha-value>)',
-          foreground: 'hsl(var(--color-heavy-foreground) / <alpha-value>)',
+          DEFAULT: 'hsl(var(--heavy))',
+          foreground: 'hsl(var(--heavy-foreground))',
         },
         input: {
-          DEFAULT: 'hsl(var(--color-input))',
-          background: 'hsl(var(--color-input-background))',
+          DEFAULT: 'hsl(var(--input))',
+          background: 'hsl(var(--input-background))',
         },
         muted: {
-          DEFAULT: 'hsl(var(--color-muted))',
-          foreground: 'hsl(var(--color-muted-foreground))',
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
-        overlay: 'hsl(var(--color-overlay))',
+        overlay: 'hsl(var(--overlay))',
         popover: {
-          DEFAULT: 'hsl(var(--color-popover))',
-          foreground: 'hsl(var(--color-popover-foreground))',
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         primary: {
-          DEFAULT: 'hsl(var(--color-primary) / <alpha-value>)',
-          foreground: 'hsl(var(--color-primary-foreground) / <alpha-value>)',
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
         },
-        ring: 'hsl(var(--color-ring))',
+        ring: 'hsl(var(--ring))',
         secondary: {
-          DEFAULT: 'hsl(var(--color-secondary) / <alpha-value>)',
-          desc: 'hsl(var(--color-secondary-desc) / <alpha-value>)',
-          foreground: 'hsl(var(--color-secondary-foreground) / <alpha-value>)',
+          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+          desc: 'hsl(var(--secondary-desc) / <alpha-value>)',
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
         },
       },
       fontFamily: {
diff --git a/package.json b/package.json
index 56603542b..7bd4cd9df 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.5",
+    "@changesets/cli": "^2.27.6",
     "@ls-lint/ls-lint": "^2.2.3",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.8",
diff --git a/packages/@core/forward/preferences/src/constants.ts b/packages/@core/forward/preferences/src/constants.ts
index 116cb2d2c..110219880 100644
--- a/packages/@core/forward/preferences/src/constants.ts
+++ b/packages/@core/forward/preferences/src/constants.ts
@@ -9,9 +9,10 @@ export const COLOR_PRIMARY_RESETS = [
   'hsl(211 91% 39%)',
   'hsl(212 100% 45%)',
   'hsl(181 84% 32%)',
-  'hsl(230 99% 66%)',
+  'hsl(161 90% 43%)',
+  'hsl(231 98% 65%)',
   'hsl(245 82% 67%)',
-  'hsl(340 100% 68%)',
+  'hsl(347 77% 60%)',
 ];
 
 export const SUPPORT_LANGUAGES: Language[] = [
diff --git a/packages/@core/forward/preferences/src/preferences.ts b/packages/@core/forward/preferences/src/preferences.ts
index 2085b4953..0e63aa704 100644
--- a/packages/@core/forward/preferences/src/preferences.ts
+++ b/packages/@core/forward/preferences/src/preferences.ts
@@ -182,8 +182,7 @@ class PreferenceManager {
     if (preference.theme) {
       for (const [key, value] of Object.entries(preference.theme)) {
         if (['colorPrimary'].includes(key)) {
-          const cssVarKey = key.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
-          const cssVarValue = useCssVar(`--${cssVarKey}`);
+          const cssVarValue = useCssVar(`--primary`);
           cssVarValue.value = convertToHslCssVar(value);
         }
       }
diff --git a/packages/@core/shared/design-tokens/src/dark/index.css b/packages/@core/shared/design-tokens/src/dark/index.css
index 9cb97cef9..679b4755f 100644
--- a/packages/@core/shared/design-tokens/src/dark/index.css
+++ b/packages/@core/shared/design-tokens/src/dark/index.css
@@ -1,76 +1,68 @@
 :root.dark {
-  /* 基础背景颜色颜色 */
+  /* Default background color of <body />...etc */
+  --background: 220deg 13.04% 8%;
+  --foreground: 220 13% 91%;
 
-  --color-background: 220deg 13.04% 8%;
+  /* Background color for <Card /> */
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
 
-  /* 基础文本颜色 */
-  --color-foreground: 220 13% 91%;
+  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
+  --popover: 222.86deg 8.43% 16.27%;
+  --popover-foreground: 210 40% 98%;
+
+  /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
+  --muted: 220deg 6.82% 17.25%;
+  --muted-foreground: 215 20.2% 65.1%;
 
   /* 主题颜色 */
-  --color-primary: 211 91% 39%;
+  --primary: 211 91% 39%;
+  --primary-foreground: 0 0 98%;
 
-  /* 前景色，如按钮文本颜色 */
-  --color-primary-foreground: 0 0 98%;
+  /* Used for destructive actions such as <Button variant="destructive"> */
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 0 0 98%;
+
+  /* Used for success actions such as <message> */
+  --success: 144 57% 58%;
+  --success-foreground: 0 0 98%;
+
+  /* Used for warning actions such as <message> */
+  --warning: 42 84% 61%;
+  --warning-foreground: 0 0 98%;
 
   /* 颜色次要 */
-  --color-secondary: 240 5% 17%;
+  --secondary: 240 5% 17%;
+  --secondary-foreground: 0 0 98%;
 
-  /* 前景色，如按钮文本颜色 */
-  --color-secondary-foreground: 0 0 98%;
+  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
+  --accent: 0deg 0% 100% / 8%;
+  --accent-hover: 0deg 0% 100% / 12%;
+  --accent-foreground: 0 0 98%;
 
-  /* 次要文本颜色 */
-  --color-secondary-desc: 210 12.16% 70.98%;
+  /* Darker color */
+  --heavy: 0deg 0% 100% / 12%;
+  --heavy-foreground: var(--accent-foreground);
 
-  /* 普通颜色 */
+  /* Default border color */
+  --border: 0deg 0% 100% / 10%;
 
-  /* --color-accent: 240 3.7% 15.9%; */
+  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
+  --input: 0deg 0% 100% / 10%;
+  --input-placeholder: 218deg 11% 65%;
+  --input-background: 0deg 0% 100% / 5%;
 
-  /* --color-accent: 220deg 7.32% 16.08%; */
-  --color-accent: 0deg 0% 100% / 8%;
-  --color-accent-hover: 0deg 0% 100% / 12%;
-
-  /* 普通颜色前景色，如按钮文本颜色 */
-  --color-accent-foreground: 0 0 98%;
-
-  /* 破坏性颜色 */
-  --color-destructive: 0 63% 31%;
-
-  /* 破坏性颜色 */
-  --color-destructive-foreground: 0 86% 97%;
-  --color-muted: 220deg 6.82% 17.25%;
-  --color-muted-foreground: 215 20.2% 65.1%;
-  --color-heavy: 0deg 0% 100% / 12%;
-  --color-heavy-foreground: var(--color-accent-foreground);
-
-  /* 基础边框色 */
-  --color-border: 0deg 0% 100% / 10%;
-
-  /* --color-popover: 240 4% 29%; */
-  --color-popover: 222.86deg 8.43% 16.27%;
-  --color-popover-foreground: 210 40% 98%;
-  --color-card: 222.2 84% 4.9%;
-  --color-card-foreground: 210 40% 98%;
-
-  /* 基础文本边框色 */
-  --color-input: 0deg 0% 100% / 10%;
-
-  /* input placeholder 颜色 */
-  --color-input-placeholder: 218deg 11% 65%;
-
-  /* 基础文本背景色 */
-
-  /* --color-input-background: 216deg 5.38% 18.24%; */
-  --color-input-background: 0deg 0% 100% / 5%;
+  /* Used for focus ring */
+  --ring: 222.2 84% 4.9%;
 
   /* 遮罩颜色 */
-  --color-overlay: 0deg 0% 0% / 40%;
-  --color-ring: 222.2 84% 4.9%;
+  --overlay: 0deg 0% 0% / 40%;
 
   /* 基本文字大小 */
   --font-size-base: 16px;
 
   /* 基本圆角大小 */
-  --radius-base: 0.5rem;
+  --radius: 0.5rem;
 
   color-scheme: dark;
 }
diff --git a/packages/@core/shared/design-tokens/src/default/index.css b/packages/@core/shared/design-tokens/src/default/index.css
index 87d0c2c5f..e8aa11a0f 100644
--- a/packages/@core/shared/design-tokens/src/default/index.css
+++ b/packages/@core/shared/design-tokens/src/default/index.css
@@ -1,86 +1,86 @@
 /* https://gavin-yyc.github.io/colorconvert/ */
 :root {
-  --color-background: 0 0 100%;
+  /* Default background color of <body />...etc */
+  --background: 0 0 100%;
+  --foreground: 210 6% 21%;
 
-  /* 基础文本颜色 */
-  --color-foreground: 210 6% 21%;
+  /* Background color for <Card /> */
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
 
   /* 主题颜色 */
-  --color-primary: 211 91% 39%;
+  --primary: 211 91% 39%;
+  --primary-foreground: 0 0 98%;
 
-  /* 前景色，如按钮文本颜色 */
-  --color-primary-foreground: 0 0 98%;
+  /* Used for destructive actions such as <Button variant="destructive"> */
+  --destructive: 0 78% 68%;
+  --destructive-foreground: 0 0 98%;
 
-  /* 颜色次要 */
-  --color-secondary: 240 5% 96%;
+  /* Used for success actions such as <message> */
+  --success: 144 57% 58%;
+  --success-foreground: 0 0 98%;
 
-  /* 前景色，如按钮文本颜色 */
-  --color-secondary-foreground: 240 6% 10%;
+  /* Used for warning actions such as <message> */
+  --warning: 42 84% 61%;
+  --warning-foreground: 0 0 98%;
 
-  /* 次要文本颜色 */
-  --color-secondary-desc: 216.4 16.09% 34.12%;
+  /* Secondary colors for <Button /> */
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 6% 10%;
 
-  /* 普通颜色 */
-  --color-accent: 240 5% 96%;
-  --color-accent-hover: 200deg 10% 90%;
+  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
+  --accent: 240 5% 96%;
+  --accent-hover: 200deg 10% 90%;
+  --accent-foreground: 240 6% 10%;
 
-  /* 普通颜色前景色，如按钮文本颜色 */
-  --color-accent-foreground: 240 6% 10%;
+  /* Darker color */
+  --heavy: 192deg 9.43% 89.61%;
+  --heavy-foreground: var(--accent-foreground);
 
-  /* 破坏性颜色 */
-  --color-destructive: 0 77.78% 68.24%;
+  /* Default border color */
+  --border: 240 6% 90%;
 
-  /* 破坏性颜色 */
-  --color-destructive-foreground: 0 0 98%;
-  --color-muted: 210 40% 96.1%;
-  --color-muted-foreground: 215.4 16.3% 46.9%;
-  --color-heavy: 192deg 9.43% 89.61%;
-  --color-heavy-foreground: var(--color-accent-foreground);
-  --color-popover: 0 0% 100%;
-  --color-popover-foreground: 222.2 84% 4.9%;
-  --color-card: 0 0% 100%;
-  --color-card-foreground: 222.2 84% 4.9%;
+  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
+  --input: 240deg 5.88% 90%;
+  --input-placeholder: 217 10.6% 65%;
+  --input-background: 0 0 100%;
 
-  /* 基础边框色 */
-  --color-border: 240 6% 90%;
-
-  /* 基础文本边框色 */
-  --color-input: 240deg 5.88% 90%;
-
-  /* input placeholder 颜色 */
-  --color-input-placeholder: 217 10.6% 65%;
-
-  /* 基础文本背景色 */
-  --color-input-background: 0 0 100%;
-  --color-ring: 222.2 84% 4.9%;
+  /* Used for focus ring */
+  --ring: 222.2 84% 4.9%;
 
   /* 遮罩颜色 */
-  --color-overlay: 0deg 0% 0% / 40%;
-
-  /* dark */
-  --color-dark-foreground: 220 13% 91%;
-  --color-dark-border: 0deg 0% 100% / 10%;
-  --color-dark-accent: 0deg 0% 100% / 8%;
-  --color-dark-accent-hover: 0deg 0% 100% / 12%;
+  --overlay: 0deg 0% 0% / 40%;
 
   /* 基本文字大小 */
   --font-size-base: 16px;
 
-  /* 基本圆角大小 */
-  --radius-base: 0.5rem;
+  /* Border radius for card, input and buttons */
+  --radius: 0.5rem;
 
-  /* ======================================== */
+  /* 用于浅色主题下一些暗色主题的颜色 */
+  --dark-foreground: 220 13% 91%;
+  --dark-border: 0deg 0% 100% / 10%;
+  --dark-accent: 0deg 0% 100% / 8%;
+  --dark-accent-hover: 0deg 0% 100% / 12%;
 
   /* =============component & UI============= */
 
-  /* ======================================== */
-
   /* menu */
-  --color-menu-dark: 225deg 12% 13%;
-  --color-menu-dark-darken: 223deg 11% 10%;
-  --color-menu: 0deg 0% 100%;
-  --color-menu-darken: 0deg 0% 95%;
+  --menu: 0deg 0% 100%;
+  --menu-darken: 0deg 0% 95%;
 
-  accent-color: var(--color-primary);
+  /* menu-dark */
+  --menu-dark: 225deg 12% 13%;
+  --menu-dark-darken: 223deg 11% 10%;
+
+  accent-color: var(--primary);
   color-scheme: light;
 }
diff --git a/packages/@core/shared/design/src/index.css b/packages/@core/shared/design/src/index.css
deleted file mode 100644
index 931c8ecc8..000000000
--- a/packages/@core/shared/design/src/index.css
+++ /dev/null
@@ -1,327 +0,0 @@
-@charset "UTF-8";
-
-/** css 样式重置 */
-@import 'modern-normalize/modern-normalize.css';
-
-#app,
-.ant-app,
-body,
-html {
-  width: 100%;
-  height: 100%;
-  overscroll-behavior: none;
-}
-
-*,
-::after,
-::before {
-  @apply border-border;
-
-  box-sizing: border-box;
-  border-style: solid;
-  border-width: 0;
-}
-
-body.invert-mode {
-  @apply invert;
-}
-
-body.grayscale-mode {
-  @apply grayscale;
-}
-
-html {
-  @apply text-foreground bg-background;
-
-  font-variation-settings: normal;
-  text-size-adjust: 100%;
-  font-synthesis-weight: none;
-  scroll-behavior: smooth;
-  text-rendering: optimizelegibility;
-  -webkit-tap-highlight-color: transparent;
-}
-
-a,
-a:active,
-a:hover,
-a:link,
-a:visited {
-  color: inherit;
-  text-decoration: none;
-}
-
-::view-transition-new(root),
-::view-transition-old(root) {
-  mix-blend-mode: normal;
-  animation: none;
-}
-
-::view-transition-old(root) {
-  z-index: 1;
-}
-
-::view-transition-new(root) {
-  z-index: 2147483646;
-}
-
-html.dark::view-transition-old(root) {
-  z-index: 2147483646;
-}
-
-html.dark::view-transition-new(root) {
-  z-index: 1;
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-}
-
-input:-webkit-autofill {
-  border: none;
-  box-shadow: 0 0 0 1000px transparent inset;
-}
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  margin: 0;
-  appearance: none;
-}
-
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-
-.slide-up-move {
-  transition: transform 0.3s;
-}
-
-.slide-up-enter-from,
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(-15px);
-}
-
-.slide-down-enter-active,
-.slide-down-leave-active {
-  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-
-.slide-down-move {
-  transition: transform 0.3s;
-}
-
-.slide-down-enter-from,
-.slide-down-leave-to {
-  opacity: 0;
-  transform: translateY(15px);
-}
-
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-
-.slide-left-move {
-  transition: transform 0.3s;
-}
-
-.slide-left-enter-from,
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(-15px);
-}
-
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-
-.slide-right-move {
-  transition: transform 0.3s;
-}
-
-.slide-right-enter-from,
-.slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(15px);
-}
-
-.fade-transition-enter-active,
-.fade-transition-leave-active {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.fade-transition-enter-from,
-.fade-transition-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* fade-slide */
-.fade-slide-leave-active,
-.fade-slide-enter-active {
-  transition: all 0.3s;
-}
-
-.fade-slide-enter-from {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-slide-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.fade-down-enter-active,
-.fade-down-leave-active {
-  transition:
-    opacity 0.25s,
-    transform 0.3s;
-}
-
-.fade-down-enter-from {
-  opacity: 0;
-  transform: translateY(-10%);
-}
-
-.fade-down-leave-to {
-  opacity: 0;
-  transform: translateY(10%);
-}
-
-.fade-scale-leave-active,
-.fade-scale-enter-active {
-  transition: all 0.28s;
-}
-
-.fade-scale-enter-from {
-  opacity: 0;
-  transform: scale(1.2);
-}
-
-.fade-scale-leave-to {
-  opacity: 0;
-  transform: scale(0.8);
-}
-
-.fade-up-enter-active,
-.fade-up-leave-active {
-  transition:
-    opacity 0.2s,
-    transform 0.25s;
-}
-
-.fade-up-enter-from {
-  opacity: 0;
-  transform: translateY(10%);
-}
-
-.fade-up-leave-to {
-  opacity: 0;
-  transform: translateY(-10%);
-}
-
-@keyframes fade-slide {
-  0% {
-    opacity: 0;
-    transform: translateX(-30px);
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-}
-
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes fade-up {
-  0% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-}
-
-@keyframes fade-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-10%);
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-}
-
-.fade-slow {
-  animation: fade 3s infinite;
-}
-
-.fade-slide-slow {
-  animation: fade-slide 3s infinite;
-}
-
-.fade-up-slow {
-  animation: fade-up 3s infinite;
-}
-
-.fade-down-slow {
-  animation: fade-down 3s infinite;
-}
-
-.collapse-transition {
-  transition:
-    0.2s height ease-in-out,
-    0.2s padding-top ease-in-out,
-    0.2s padding-bottom ease-in-out;
-}
-
-.collapse-transition-leave-active,
-.collapse-transition-enter-active {
-  transition:
-    0.2s max-height ease-in-out,
-    0.2s padding-top ease-in-out,
-    0.2s margin-top ease-in-out;
-}
diff --git a/packages/@core/uikit/layout-ui/src/components/layout-footer.vue b/packages/@core/uikit/layout-ui/src/components/layout-footer.vue
index c3834a915..55e67b428 100644
--- a/packages/@core/uikit/layout-ui/src/components/layout-footer.vue
+++ b/packages/@core/uikit/layout-ui/src/components/layout-footer.vue
@@ -35,7 +35,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  backgroundColor: 'hsl(var(--color-background))',
+  backgroundColor: 'hsl(var(--background))',
   fixed: true,
   height: 32,
   show: true,
diff --git a/packages/@core/uikit/layout-ui/src/components/layout-header.vue b/packages/@core/uikit/layout-ui/src/components/layout-header.vue
index 218557a7e..058945841 100644
--- a/packages/@core/uikit/layout-ui/src/components/layout-header.vue
+++ b/packages/@core/uikit/layout-ui/src/components/layout-header.vue
@@ -60,7 +60,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  backgroundColor: 'hsl(var(--color-background))',
+  backgroundColor: 'hsl(var(--background))',
   // fixed: true,
   height: 60,
   isMixedNav: false,
diff --git a/packages/@core/uikit/layout-ui/src/components/layout-tabbar.vue b/packages/@core/uikit/layout-ui/src/components/layout-tabbar.vue
index 9f996ccef..7322ec8ad 100644
--- a/packages/@core/uikit/layout-ui/src/components/layout-tabbar.vue
+++ b/packages/@core/uikit/layout-ui/src/components/layout-tabbar.vue
@@ -15,7 +15,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  backgroundColor: 'hsl(var(--color-background))',
+  backgroundColor: 'hsl(var(--background))',
   fixed: true,
   height: 30,
 });
diff --git a/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-collapse-button.vue b/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
index 16b32315d..7fff2d226 100644
--- a/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
@@ -17,7 +17,7 @@ function handleCollapsed() {
 <template>
   <div
     :data-theme="theme"
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--color-dark-accent))] data-[theme=dark]:text-[hsl(var(--color-dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--color-dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--color-dark-foreground))]"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
     @click.stop="handleCollapsed"
   >
     <MdiMenuClose v-if="collapsed" />
diff --git a/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-fixed-button.vue b/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
index 33b5a3aea..fdff6bd80 100644
--- a/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/packages/@core/uikit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@@ -17,7 +17,7 @@ function toggleFixed() {
 <template>
   <div
     :data-theme="theme"
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--color-dark-accent))] data-[theme=dark]:text-[hsl(var(--color-dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--color-dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--color-dark-foreground))]"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300 data-[theme=dark]:bg-[hsl(var(--dark-accent))] data-[theme=dark]:text-[hsl(var(--dark-foreground)/60%)] data-[theme=dark]:hover:bg-[hsl(var(--dark-accent-hover))] data-[theme=dark]:hover:text-[hsl(var(--dark-foreground))]"
     @click="toggleFixed"
   >
     <MdiPinOff v-if="!expandOnHover" />
diff --git a/packages/@core/uikit/layout-ui/src/vben-layout.vue b/packages/@core/uikit/layout-ui/src/vben-layout.vue
index 3d74b369b..f6619ce78 100644
--- a/packages/@core/uikit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/uikit/layout-ui/src/vben-layout.vue
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
   // footerBackgroundColor: '#fff',
   footerFixed: true,
   footerHeight: 32,
-  // headerBackgroundColor: 'hsl(var(--color-background))',
+  // headerBackgroundColor: 'hsl(var(--background))',
   headerHeight: 50,
   headerHeightOffset: 10,
   headerHidden: false,
@@ -48,7 +48,7 @@ const props = withDefaults(defineProps<Props>(), {
   sidebarTheme: 'dark',
   sidebarWidth: 180,
   tabbarEnable: true,
-  // tabsBackgroundColor: 'hsl(var(--color-background))',
+  // tabsBackgroundColor: 'hsl(var(--background))',
   tabsHeight: 36,
   zIndex: 200,
 });
@@ -213,17 +213,15 @@ const sidebarFace = computed(() => {
 
   if (isDark) {
     backgroundColor = isSidebarMixedNav.value
-      ? 'hsl(var(--color-menu-dark-darken))'
-      : 'hsl(var(--color-menu-dark))';
+      ? 'hsl(var(--menu-dark-darken))'
+      : 'hsl(var(--menu-dark))';
   } else {
     backgroundColor = isSidebarMixedNav.value
-      ? 'hsl(var(--color-menu-darken))'
-      : 'hsl(var(--color-menu))';
+      ? 'hsl(var(--menu-darken))'
+      : 'hsl(var(--menu))';
   }
 
-  extraBackgroundColor = isDark
-    ? 'hsl(var(--color-menu-dark))'
-    : 'hsl(var(--color-menu))';
+  extraBackgroundColor = isDark ? 'hsl(var(--menu-dark))' : 'hsl(var(--menu))';
 
   return {
     backgroundColor,
diff --git a/packages/@core/uikit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/uikit/menu-ui/src/components/normal-menu/normal-menu.vue
index 9284e2034..7ccded816 100644
--- a/packages/@core/uikit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/uikit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -78,7 +78,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
 
   @include is('dark') {
     .#{$namespace}-normal-menu__item {
-      color: hsl(var(--color-dark-foreground) / 80%);
+      color: hsl(var(--dark-foreground) / 80%);
     }
   }
 
@@ -92,7 +92,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
     // max-height: 64px;
     padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
     margin: var(--menu-item-margin-y) var(--menu-item-margin-x);
-    color: hsl(var(--color-foreground) / 90%);
+    color: hsl(var(--foreground) / 90%);
     cursor: pointer;
     border-radius: var(--menu-item-radius);
     transition:
@@ -103,20 +103,20 @@ function handleMouseenter(menu: MenuRecordRaw) {
 
     @include is('active') {
       font-weight: 700;
-      color: hsl(var(--color-primary-foreground));
-      background-color: hsl(var(--color-primary));
+      color: hsl(var(--primary-foreground));
+      background-color: hsl(var(--primary));
 
       .#{$namespace}-normal-menu__name {
-        color: hsl(var(--color-primary-foreground));
+        color: hsl(var(--primary-foreground));
       }
 
       .#{$namespace}-normal-menu__icon {
-        color: hsl(var(--color-primary-foreground));
+        color: hsl(var(--primary-foreground));
       }
     }
 
     &:not(.is-active):hover {
-      color: hsl(var(--color-foreground));
+      color: hsl(var(--foreground));
       background-color: hsl(var(--menu-dark-background));
     }
 
@@ -130,7 +130,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
   @include is('dark') {
     .#{$namespace}-normal-menu__item {
       &:not(.is-active):hover {
-        color: hsl(var(--color-primary-foreground));
+        color: hsl(var(--primary-foreground));
         background-color: hsl(var(--menu-dark-background));
       }
     }
diff --git a/packages/@core/uikit/menu-ui/src/styles/index.scss b/packages/@core/uikit/menu-ui/src/styles/index.scss
index d089f29c1..ed8384585 100644
--- a/packages/@core/uikit/menu-ui/src/styles/index.scss
+++ b/packages/@core/uikit/menu-ui/src/styles/index.scss
@@ -22,33 +22,33 @@
   --menu-light-background: 192deg 1% 93%;
 
   &.is-dark {
-    --menu-background-color: hsl(var(--color-menu-dark));
-    // --menu-submenu-opened-background-color: hsl(var(--color-menu-opened-dark));
+    --menu-background-color: hsl(var(--menu-dark));
+    // --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
     --menu-item-background-color: var(--menu-background-color);
-    --menu-item-color: hsl(var(--color-dark-foreground) / 80%);
-    --menu-item-hover-color: hsl(var(--color-primary-foreground));
+    --menu-item-color: hsl(var(--dark-foreground) / 80%);
+    --menu-item-hover-color: hsl(var(--primary-foreground));
     --menu-item-hover-background-color: hsl(var(--menu-dark-background));
-    --menu-item-active-color: hsl(var(--color-primary-foreground));
-    --menu-item-active-background-color: hsl(var(--color-primary));
-    --menu-submenu-hover-color: hsl(var(--color-dark-foreground));
+    --menu-item-active-color: hsl(var(--primary-foreground));
+    --menu-item-active-background-color: hsl(var(--primary));
+    --menu-submenu-hover-color: hsl(var(--dark-foreground));
     --menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
-    --menu-submenu-active-color: hsl(var(--color-dark-foreground));
+    --menu-submenu-active-color: hsl(var(--dark-foreground));
     --menu-submenu-active-background-color: transparent;
     --menu-submenu-background-color: var(--menu-background-color);
   }
 
   &.is-light {
-    --menu-background-color: hsl(var(--color-menu));
-    // --menu-submenu-opened-background-color: hsl(var(--color-menu-opened));
+    --menu-background-color: hsl(var(--menu));
+    // --menu-submenu-opened-background-color: hsl(var(--menu-opened));
     --menu-item-background-color: var(--menu-background-color);
-    --menu-item-color: hsl(var(--color-foreground));
+    --menu-item-color: hsl(var(--foreground));
     --menu-item-hover-color: var(--menu-item-color);
     --menu-item-hover-background-color: hsl(var(--menu-light-background));
-    --menu-item-active-color: hsl(var(--color-primary-foreground));
-    --menu-item-active-background-color: hsl(var(--color-primary));
-    --menu-submenu-hover-color: hsl(var(--color-primary));
+    --menu-item-active-color: hsl(var(--primary-foreground));
+    --menu-item-active-background-color: hsl(var(--primary));
+    --menu-submenu-hover-color: hsl(var(--primary));
     --menu-submenu-hover-background-color: hsl(var(--menu-light-background));
-    --menu-submenu-active-color: hsl(var(--color-primary));
+    --menu-submenu-active-color: hsl(var(--primary));
     --menu-submenu-active-background-color: transparent;
     --menu-submenu-background-color: var(--menu-background-color);
   }
@@ -79,24 +79,24 @@
     --menu-background-color: transparent;
 
     &.is-dark {
-      --menu-item-hover-color: var(--color-foreground);
+      --menu-item-hover-color: var(--foreground);
       --menu-item-hover-background-color: hsl(var(--menu-dark-background));
-      --menu-item-active-color: hsl(var(--color-foreground));
+      --menu-item-active-color: hsl(var(--foreground));
       --menu-item-active-background-color: hsl(var(--menu-dark-background));
-      --menu-submenu-active-color: hsl(var(--color-foreground));
+      --menu-submenu-active-color: hsl(var(--foreground));
       --menu-submenu-active-background-color: hsl(var(--menu-dark-background));
-      --menu-submenu-hover-color: hsl(var(--color-foreground));
+      --menu-submenu-hover-color: hsl(var(--foreground));
       --menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
     }
 
     &.is-light {
-      --menu-item-active-color: hsl(var(--color-foreground));
+      --menu-item-active-color: hsl(var(--foreground));
       --menu-item-active-background-color: hsl(var(--menu-light-background));
       --menu-item-hover-background-color: hsl(var(--menu-light-background));
-      --menu-item-hover-color: hsl(var(--color-primary));
-      --menu-submenu-hover-color: hsl(var(--color-primary));
+      --menu-item-hover-color: hsl(var(--primary));
+      --menu-submenu-hover-color: hsl(var(--primary));
       --menu-submenu-hover-background-color: hsl(var(--menu-light-background));
-      --menu-submenu-active-color: hsl(var(--color-foreground));
+      --menu-submenu-active-color: hsl(var(--foreground));
       --menu-submenu-active-background-color: hsl(var(--menu-light-background));
     }
   }
@@ -316,7 +316,7 @@
       .#{$namespace}-sub-menu-content,
       .#{$namespace}-menu-item {
         &.is-active {
-          color: hsl(var(--color-primary-foreground)) !important;
+          color: hsl(var(--primary-foreground)) !important;
           background: var(--menu-item-active-background-color) !important;
         }
       }
diff --git a/packages/@core/uikit/shadcn-ui/package.json b/packages/@core/uikit/shadcn-ui/package.json
index c341c4de7..d96623ce1 100644
--- a/packages/@core/uikit/shadcn-ui/package.json
+++ b/packages/@core/uikit/shadcn-ui/package.json
@@ -48,7 +48,7 @@
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "class-variance-authority": "^0.7.0",
-    "radix-vue": "^1.8.4",
+    "radix-vue": "^1.8.5",
     "vue": "^3.4.30",
     "vue-sonner": "^1.1.3"
   }
diff --git a/packages/@core/uikit/shadcn-ui/src/components/logo/logo.vue b/packages/@core/uikit/shadcn-ui/src/components/logo/logo.vue
index d09564a40..aa2cfbdb2 100644
--- a/packages/@core/uikit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/uikit/shadcn-ui/src/components/logo/logo.vue
@@ -66,7 +66,7 @@ const logoClass = computed(() => {
       />
       <span
         v-if="!collapse"
-        class="text-primary truncate text-nowrap group-[.dark]:text-[hsl(var(--color-dark-foreground))]"
+        class="text-primary truncate text-nowrap group-[.dark]:text-[hsl(var(--dark-foreground))]"
       >
         {{ text }}
         <!-- <span class="text-primary ml-1 align-super text-[smaller]">Pro</span> -->
diff --git a/packages/@core/uikit/shadcn-ui/src/components/segmented/segmented.vue b/packages/@core/uikit/shadcn-ui/src/components/segmented/segmented.vue
index dcb430d4c..84a672209 100644
--- a/packages/@core/uikit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/packages/@core/uikit/shadcn-ui/src/components/segmented/segmented.vue
@@ -22,6 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
   tabs: () => [],
 });
 
+const activeTab = defineModel<string>();
+
 const getDefaultValue = computed(() => {
   return props.defaultValue || props.tabs[0]?.value;
 });
@@ -40,7 +42,7 @@ const tabsIndicatorStyle = computed(() => {
 </script>
 
 <template>
-  <Tabs :default-value="getDefaultValue">
+  <Tabs v-model="activeTab" :default-value="getDefaultValue">
     <TabsList :style="tabsStyle" class="bg-accent relative grid w-full">
       <TabsIndicator :style="tabsIndicatorStyle" />
       <template v-for="tab in tabs" :key="tab.value">
diff --git a/packages/@core/uikit/shadcn-ui/src/components/ui/sonner/Sonner.vue b/packages/@core/uikit/shadcn-ui/src/components/ui/sonner/Sonner.vue
index 2976460d4..7029fab9f 100644
--- a/packages/@core/uikit/shadcn-ui/src/components/ui/sonner/Sonner.vue
+++ b/packages/@core/uikit/shadcn-ui/src/components/ui/sonner/Sonner.vue
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<ToasterProps>(), {
 <!-- <style scoped>
 :deep([data-sonner-toaster][data-theme='dark']),
 :deep([data-sonner-toaster][data-theme='light']) {
-  --normal-bg: hsl(var(--color-background));
+  --normal-bg: hsl(var(--background));
   --normal-border: theme('colors.border');
   --normal-text: theme('colors.popover.foreground');
   --border-radius: theme('borderRadius.md');
diff --git a/packages/@core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss b/packages/@core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss
index 0c70a5785..f46ba5a87 100644
--- a/packages/@core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss
+++ b/packages/@core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss
@@ -1,12 +1,12 @@
 @import '@vben-core/design/global';
 
 @include b('chrome-tabs') {
-  --tabs-background: hsl(var(--color-background));
+  --tabs-background: hsl(var(--background));
   --tabs-gap: 7px;
-  --tabs-divider: hsl(var(--color-border));
-  --tabs-hover: hsl(var(--color-heavy));
-  --tabs-active-background: hsl(var(--color-primary) / 100%);
-  --tabs-active: hsl(var(--color-primary-foreground));
+  --tabs-divider: hsl(var(--border));
+  --tabs-hover: hsl(var(--heavy));
+  --tabs-active-background: hsl(var(--primary) / 100%);
+  --tabs-active: hsl(var(--primary-foreground));
 
   position: relative;
   width: 100%;
@@ -26,7 +26,7 @@
   display: flex;
   align-items: center;
   height: 100%;
-  color: hsl(var(--color-muted-foreground));
+  color: hsl(var(--muted-foreground));
   cursor: pointer;
   user-select: none;
 
@@ -81,7 +81,7 @@
     transform: translateY(-50%);
 
     // &:hover {
-    //   background-color: hsl(var(--color-accent));
+    //   background-color: hsl(var(--accent));
     // }
   }
 
@@ -94,7 +94,7 @@
     transition: all 0.15s ease;
 
     &:hover {
-      color: hsl(var(--color-foreground));
+      color: hsl(var(--foreground));
       transform: scale(1.05);
     }
   }
diff --git a/packages/business/chart-ui/package.json b/packages/business/chart-ui/package.json
index 7d3a47711..08c863dba 100644
--- a/packages/business/chart-ui/package.json
+++ b/packages/business/chart-ui/package.json
@@ -42,7 +42,7 @@
   "dependencies": {
     "@vben-core/preferences": "workspace:*",
     "echarts": "^5.5.0",
-    "vue": "^3.4.29"
+    "vue": "^3.4.30"
   },
   "devDependencies": {
     "@vben/types": "workspace:*"
diff --git a/packages/business/universal-ui/package.json b/packages/business/universal-ui/package.json
index 63db3c9cf..315a99133 100644
--- a/packages/business/universal-ui/package.json
+++ b/packages/business/universal-ui/package.json
@@ -45,10 +45,10 @@
     "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
+    "@vben/chart-ui": "workspace:*",
     "@vben/locales": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
-    "@vben/chart-ui": "workspace:*",
     "qrcode": "^1.5.3",
     "vue": "^3.4.30",
     "vue-router": "^4.4.0"
diff --git a/packages/business/universal-ui/src/fallback/icons/icon-403.vue b/packages/business/universal-ui/src/fallback/icons/icon-403.vue
index 4ce12100d..e3908673b 100644
--- a/packages/business/universal-ui/src/fallback/icons/icon-403.vue
+++ b/packages/business/universal-ui/src/fallback/icons/icon-403.vue
@@ -80,7 +80,7 @@
     <circle
       cx="281.3585"
       cy="285.71051"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       r="51.12006"
       transform="translate(-26.58509 542.54478) rotate(-85.26884)"
     />
diff --git a/packages/business/universal-ui/src/fallback/icons/icon-404.vue b/packages/business/universal-ui/src/fallback/icons/icon-404.vue
index 31eb0a900..385cf6a5e 100644
--- a/packages/business/universal-ui/src/fallback/icons/icon-404.vue
+++ b/packages/business/universal-ui/src/fallback/icons/icon-404.vue
@@ -56,7 +56,7 @@
       fill="#f2f2f2"
       transform="translate(-169.93432 -164.42601)"
     />
-    <circle cx="649.24878" cy="51" fill="hsl(var(--color-primary))" r="51" />
+    <circle cx="649.24878" cy="51" fill="hsl(var(--primary))" r="51" />
     <path
       d="M911.21851,176.29639c-24.7168-3.34094-52.93512,10.01868-59.34131,34.12353a21.59653,21.59653,0,0,0-41.09351,2.10871l2.82972,2.02667a372.27461,372.27461,0,0,0,160.65881-.72638C957.07935,195.76,935.93537,179.63727,911.21851,176.29639Z"
       fill="#f0f0f0"
@@ -74,22 +74,22 @@
     />
     <path
       d="M432.92309,584.266a6.72948,6.72948,0,0,0-1.7-2.67,6.42983,6.42983,0,0,0-.92-.71c-2.61-1.74-6.51-2.13-8.99,0a5.81012,5.81012,0,0,0-.69.71q-1.11,1.365-2.28,2.67c-1.28,1.46-2.59,2.87-3.96,4.24-.39.38-.78.77-1.18,1.15-.23.23-.46.45-.69.67-.88.84-1.78,1.65-2.69,2.45-.48.43-.96.85-1.45,1.26-.73.61-1.46,1.22-2.2,1.81-.07.05-.14.1-.21.16-.02.01-.03.03-.05.04-.01,0-.02,0-.03.02a.17861.17861,0,0,0-.07.05c-.22.15-.37.25-.48.34.04-.01995.08-.05.12-.07-.18.14-.37.28-.55.42-1.75,1.29-3.54,2.53-5.37,3.69a99.21022,99.21022,0,0,1-14.22,7.55c-.33.13-.67.27-1.01.4a85.96993,85.96993,0,0,1-40.85,6.02q-2.13008-.165-4.26-.45c-1.64-.24-3.27-.53-4.89-.86a97.93186,97.93186,0,0,1-18.02-5.44,118.65185,118.65185,0,0,1-20.66-12.12c-1-.71-2.01-1.42-3.02-2.11,1.15-2.82,2.28-5.64,3.38-8.48.55-1.37,1.08-2.74,1.6-4.12,4.09-10.63,7.93-21.36,11.61-32.13q5.58-16.365,10.53-32.92.51-1.68.99-3.36,2.595-8.745,4.98-17.53c.15-.56994.31-1.12994.45-1.7q.68994-2.52,1.35-5.04c1-3.79-1.26-8.32-5.24-9.23a7.63441,7.63441,0,0,0-9.22,5.24c-.43,1.62-.86,3.23-1.3,4.85q-3.165,11.74494-6.66,23.41-.51,1.68-1.02,3.36-7.71,25.41-16.93,50.31-1.11,3.015-2.25,6.01c-.37.98-.74,1.96-1.12,2.94-.73,1.93-1.48,3.86-2.23,5.79-.43006,1.13-.87006,2.26-1.31,3.38-.29.71-.57,1.42-.85,2.12a41.80941,41.80941,0,0,0-8.81-2.12l-.48-.06a27.397,27.397,0,0,0-7.01.06,23.91419,23.91419,0,0,0-17.24,10.66c-4.77,7.51-4.71,18.25,1.98,24.63,6.89,6.57,17.32,6.52,25.43,2.41a28.35124,28.35124,0,0,0,10.52-9.86,50.56939,50.56939,0,0,0,2.74-4.65c.21.14.42.28.63.43.8.56,1.6,1.13,2.39,1.69a111.73777,111.73777,0,0,0,14.51,8.91,108.35887,108.35887,0,0,0,34.62,10.47c.27.03.53.07.8.1,1.33.17,2.67.3,4.01.41a103.78229,103.78229,0,0,0,55.58-11.36q2.175-1.125,4.31-2.36,3.315-1.92,6.48-4.08c1.15-.78,2.27-1.57,3.38-2.4a101.04244,101.04244,0,0,0,13.51-11.95q2.35491-2.475,4.51-5.11005a8.0612,8.0612,0,0,0,2.2-5.3A7.5644,7.5644,0,0,0,432.92309,584.266Zm-165.59,23.82c.21-.15.42-.31.62-.47C267.89312,607.766,267.60308,607.936,267.33312,608.086Zm3.21-3.23c-.23.26-.44.52-.67.78a23.36609,23.36609,0,0,1-2.25,2.2c-.11.1-.23.2-.35.29a.00976.00976,0,0,0-.01.01,3.80417,3.80417,0,0,0-.42005.22q-.645.39-1.31994.72a17.00459,17.00459,0,0,1-2.71.75,16.79925,16.79925,0,0,1-2.13.02h-.02a14.82252,14.82252,0,0,1-1.45-.4c-.24-.12-.47-.25994-.7-.4-.09-.08-.17005-.16-.22-.21a2.44015,2.44015,0,0,1-.26995-.29.0098.0098,0,0,0-.01-.01c-.11005-.2-.23005-.4-.34-.6a.031.031,0,0,1-.01-.02c-.08-.25-.15-.51-.21-.77a12.51066,12.51066,0,0,1,.01-1.37,13.4675,13.4675,0,0,1,.54-1.88,11.06776,11.06776,0,0,1,.69-1.26c.02-.04.12-.2.23-.38.01-.01.01-.01.01-.02.15-.17.3-.35.46-.51.27-.3.56-.56.85-.83a18.02212,18.02212,0,0,1,1.75-1.01,19.48061,19.48061,0,0,1,2.93-.79,24.98945,24.98945,0,0,1,4.41.04,30.30134,30.30134,0,0,1,4.1,1.01,36.94452,36.94452,0,0,1-2.77,4.54C270.6231,604.746,270.58312,604.806,270.54308,604.856Zm-11.12-3.29a2.18029,2.18029,0,0,1-.31.38995A1.40868,1.40868,0,0,1,259.42309,601.566Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M402.86309,482.136q-.13494,4.71-.27,9.42-.285,10.455-.59,20.92-.315,11.775-.66,23.54-.165,6.07507-.34,12.15-.465,16.365-.92,32.72c-.03,1.13-.07,2.25-.1,3.38q-.225,8.11506-.45,16.23-.255,8.805-.5,17.61-.18,6.59994-.37,13.21-1.34994,47.895-2.7,95.79a7.64844,7.64844,0,0,1-7.5,7.5,7.56114,7.56114,0,0,1-7.5-7.5q.75-26.94,1.52-53.88.675-24.36,1.37-48.72.225-8.025.45-16.06.345-12.09.68-24.18c.03-1.13.07-2.25.1-3.38.02-.99.05-1.97.08-2.96q.66-23.475,1.32-46.96.27-9.24.52-18.49.3-10.545.6-21.08c.09-3.09.17005-6.17.26-9.26a7.64844,7.64844,0,0,1,7.5-7.5A7.56116,7.56116,0,0,1,402.86309,482.136Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M814.29118,484.2172a893.23753,893.23753,0,0,1-28.16112,87.94127c-3.007,7.94641-6.08319,15.877-9.3715,23.71185l.75606-1.7916a54.58274,54.58274,0,0,1-5.58953,10.61184q-.22935.32119-.46685.63642,1.16559-1.49043.4428-.589c-.25405.30065-.5049.60219-.7676.89546a23.66436,23.66436,0,0,1-2.2489,2.20318q-.30139.25767-.61188.5043l.93783-.729c-.10884.25668-.87275.59747-1.11067.74287a18.25362,18.25362,0,0,1-2.40479,1.21853l1.7916-.75606a19.0859,19.0859,0,0,1-4.23122,1.16069l1.9938-.26791a17.02055,17.02055,0,0,1-4.29785.046l1.99379.2679a14.0022,14.0022,0,0,1-3.40493-.917l1.79159.75606a12.01175,12.01175,0,0,1-1.67882-.89614c-.27135-.17688-1.10526-.80852-.01487.02461,1.13336.86595.14562.07434-.08763-.15584-.19427-.19171-.36962-.4-.55974-.595-.88208-.90454.99637,1.55662.39689.49858a18.18179,18.18179,0,0,1-.87827-1.63672l.75606,1.7916a11.92493,11.92493,0,0,1-.728-2.65143l.26791,1.9938a13.65147,13.65147,0,0,1-.00316-3.40491l-.2679,1.9938a15.96371,15.96371,0,0,1,.99486-3.68011l-.75606,1.7916a16.72914,16.72914,0,0,1,1.17794-2.29848,6.72934,6.72934,0,0,1,.72851-1.0714c.04915.01594-1.26865,1.51278-.56937.757.1829-.19767.354-.40592.539-.602.29617-.31382.61354-.60082.92561-.89791,1.04458-.99442-1.46188.966-.25652.17907a19.0489,19.0489,0,0,1,2.74925-1.49923l-1.79159.75606a20.31136,20.31136,0,0,1,4.99523-1.33984l-1.9938.2679a25.62828,25.62828,0,0,1,6.46062.07647l-1.9938-.2679a33.21056,33.21056,0,0,1,7.89178,2.2199l-1.7916-.75606c5.38965,2.31383,10.16308,5.74926,14.928,9.118a111.94962,111.94962,0,0,0,14.50615,8.9065,108.38849,108.38849,0,0,0,34.62226,10.47371,103.93268,103.93268,0,0,0,92.58557-36.75192,8.07773,8.07773,0,0,0,2.1967-5.3033,7.63232,7.63232,0,0,0-2.1967-5.3033c-2.75154-2.52586-7.94926-3.239-10.6066,0a95.63575,95.63575,0,0,1-8.10664,8.72692q-2.01736,1.914-4.14232,3.70983-1.21364,1.02588-2.46086,2.01121c-.3934.31081-1.61863,1.13807.26309-.19744-.43135.30614-.845.64036-1.27058.95478a99.26881,99.26881,0,0,1-20.33215,11.56478l1.79159-.75606a96.8364,96.8364,0,0,1-24.17119,6.62249l1.99379-.2679a97.64308,97.64308,0,0,1-25.75362-.03807l1.99379.2679a99.79982,99.79982,0,0,1-24.857-6.77027l1.7916.75607a116.02515,116.02515,0,0,1-21.7364-12.59112,86.87725,86.87725,0,0,0-11.113-6.99417,42.8238,42.8238,0,0,0-14.43784-4.38851c-9.43884-1.11076-19.0571,2.56562-24.24624,10.72035-4.77557,7.50482-4.71394,18.24362,1.97369,24.62519,6.8877,6.5725,17.31846,6.51693,25.43556,2.40567,7.81741-3.95946,12.51288-12.18539,15.815-19.94186,7.43109-17.45514,14.01023-35.31364,20.1399-53.263q9.09651-26.63712,16.49855-53.81332.91661-3.36581,1.80683-6.73869c1.001-3.78869-1.26094-8.32-5.23829-9.22589a7.63317,7.63317,0,0,0-9.22589,5.23829Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M889.12382,482.13557l-2.69954,95.79311-2.68548,95.29418-1.5185,53.88362a7.56465,7.56465,0,0,0,7.5,7.5,7.64923,7.64923,0,0,0,7.5-7.5l2.69955-95.79311,2.68548-95.29418,1.51849-53.88362a7.56465,7.56465,0,0,0-7.5-7.5,7.64923,7.64923,0,0,0-7.5,7.5Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
@@ -99,87 +99,52 @@
     />
     <path
       d="M615.30309,668.566a63.05854,63.05854,0,0,1-20.05,33.7c-.74.64-1.48,1.26-2.25,1.87q-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43l-.27.03-.19-1.64-.76-6.64a37.623,37.623,0,0,1-3.3-32.44c2.64-7.12,7.42-13.41,12.12-19.65,6.49-8.62,12.8-17.14,13.03-27.65a60.54415,60.54415,0,0,1,7.9,13.33,16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32a63.99025,63.99025,0,0,1,2.45,12.18A61.18851,61.18851,0,0,1,615.30309,668.566Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M648.50311,642.356c-5.9,4.29-9.35,10.46-12.03,17.26a16.62776,16.62776,0,0,0-7.17,4.58c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39-2.68,8.04-5.14,16.36-9.88,23.15a36.98942,36.98942,0,0,1-12.03,10.91,38.49166,38.49166,0,0,1-4.02,1.99q-7.62.585-14.95,1.25-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43q-.015-.825,0-1.65a63.30382,63.30382,0,0,1,15.25-39.86c.45-.52.91-1.03,1.38-1.54a61.7925,61.7925,0,0,1,16.81-12.7A62.65425,62.65425,0,0,1,648.50311,642.356Z"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M589.16308,699.526l-1.15,3.4-.58,1.73c-1.53.14-3.04.29-4.54.43l-.27.03c-1.66.17-3.31.34-4.96.51-.43-.5-.86-1.01-1.28-1.53a62.03045,62.03045,0,0,1,8.07-87.11c-1.32,6.91.22,13.53,2.75,20.1-.27.11-.53.22-.78.34a16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32q.705.075,1.41.15c.07.15.13.29.2.44,2.85,6.18,5.92,12.39,7.65,18.83a43.66591,43.66591,0,0,1,1.02,4.91A37.604,37.604,0,0,1,589.16308,699.526Z"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M689.82123,554.48655c-8.60876-16.79219-21.94605-30.92088-37.63219-41.30357a114.2374,114.2374,0,0,0-52.5626-18.37992q-3.69043-.33535-7.399-.39281c-2.92141-.04371-46.866,12.63176-61.58712,22.98214a114.29462,114.29462,0,0,0-35.333,39.527,102.49972,102.49972,0,0,0-12.12557,51.6334,113.56387,113.56387,0,0,0,14.70268,51.47577,110.47507,110.47507,0,0,0,36.44425,38.74592C549.66655,708.561,565.07375,734.51,583.1831,735.426c18.24576.923,39.05418-23.55495,55.6951-30.98707a104.42533,104.42533,0,0,0,41.72554-34.005,110.24964,110.24964,0,0,0,19.599-48.94777c2.57368-18.08313,1.37415-36.73271-4.80123-54.01627a111.85969,111.85969,0,0,0-5.58024-12.9833c-1.77961-3.50519-6.996-4.7959-10.26142-2.69063a7.67979,7.67979,0,0,0-2.69064,10.26142q1.56766,3.08773,2.91536,6.27758l-.75606-1.7916a101.15088,101.15088,0,0,1,6.87641,25.53816l-.26791-1.99379a109.2286,109.2286,0,0,1-.06613,28.68252l.26791-1.9938a109.73379,109.73379,0,0,1-7.55462,27.67419l.75606-1.79159a104.212,104.212,0,0,1-6.67151,13.09835q-1.92308,3.18563-4.08062,6.22159c-.63172.8881-1.28287,1.761-1.939,2.63114-.85625,1.13555,1.16691-1.48321.28228-.36941-.15068.18972-.30049.3801-.45182.5693q-.68121.85165-1.3818,1.68765a93.61337,93.61337,0,0,1-10.17647,10.38359q-1.36615,1.19232-2.77786,2.33115c-.46871.37832-.932.77269-1.42079,1.12472.01861-.0134,1.57956-1.19945.65556-.511-.2905.21644-.57851.43619-.86961.65184q-2.90994,2.1558-5.97433,4.092a103.48509,103.48509,0,0,1-14.75565,7.7131l1.7916-.75606a109.21493,109.21493,0,0,1-27.59663,7.55154l1.9938-.26791a108.15361,108.15361,0,0,1-28.58907.0506l1.99379.2679a99.835,99.835,0,0,1-25.09531-6.78448l1.79159.75607a93.64314,93.64314,0,0,1-13.41605-6.99094q-3.17437-2-6.18358-4.24743c-.2862-.21359-.56992-.43038-.855-.64549-.9155-.69088.65765.50965.67021.51787a19.16864,19.16864,0,0,1-1.535-1.22469q-1.45353-1.18358-2.86136-2.4218a101.98931,101.98931,0,0,1-10.49319-10.70945q-1.21308-1.43379-2.37407-2.91054c-.33524-.4263-.9465-1.29026.40424.5289-.17775-.23939-.36206-.47414-.54159-.71223q-.64657-.85751-1.27568-1.72793-2.203-3.048-4.18787-6.24586a109.29037,109.29037,0,0,1-7.8054-15.10831l.75606,1.7916a106.58753,106.58753,0,0,1-7.34039-26.837l.26791,1.9938a97.86589,97.86589,0,0,1-.04843-25.63587l-.2679,1.9938A94.673,94.673,0,0,1,505.27587,570.55l-.75606,1.7916a101.55725,101.55725,0,0,1,7.19519-13.85624q2.0655-3.32328,4.37767-6.4847.52528-.71832,1.06244-1.42786c.324-.4279,1.215-1.49333-.30537.38842.14906-.18449.29252-.37428.43942-.56041q1.26882-1.60756,2.59959-3.1649A107.40164,107.40164,0,0,1,530.772,536.21508q1.47408-1.29171,2.99464-2.52906.6909-.56218,1.39108-1.11284c.18664-.14673.37574-.29073.56152-.43858-1.99743,1.58953-.555.43261-.10157.09288q3.13393-2.34833,6.43534-4.46134a103.64393,103.64393,0,0,1,15.38655-8.10791l-1.7916.75606c7.76008-3.25839,42.14086-10.9492,48.394-10.10973l-1.99379-.26791A106.22471,106.22471,0,0,1,628.768,517.419l-1.7916-.75606a110.31334,110.31334,0,0,1,12.6002,6.32922q3.04344,1.78405,5.96742,3.76252,1.38351.93658,2.73809,1.915.677.48917,1.34626.98885c.24789.185.49386.37253.74135.558,1.03924.779-1.43148-1.1281-.34209-.26655a110.84261,110.84261,0,0,1,10.36783,9.2532q2.401,2.445,4.63686,5.04515,1.14659,1.33419,2.24643,2.70757c.36436.45495,1.60506,2.101.08448.08457.37165.49285.74744.98239,1.11436,1.47884a97.97718,97.97718,0,0,1,8.39161,13.53807c1.79317,3.49775,6.98675,4.80186,10.26142,2.69064A7.67666,7.67666,0,0,0,689.82123,554.48655Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M602.43116,676.88167a3.77983,3.77983,0,0,1-2.73939-6.55137c.09531-.37882.16368-.65085.259-1.02968q-.05115-.12366-.1029-.24717c-3.47987-8.29769-25.685,14.83336-26.645,22.63179a30.029,30.029,0,0,0,.52714,10.32752A120.39223,120.39223,0,0,1,562.77838,652.01a116.20247,116.20247,0,0,1,.72078-12.96332q.59712-5.293,1.65679-10.51055a121.78667,121.78667,0,0,1,24.1515-51.61646c6.87378.38364,12.898-.66348,13.47967-13.98532.10346-2.36972,1.86113-4.42156,2.24841-6.756-.65621.08607-1.32321.13985-1.97941.18285-.20444.0107-.41958.02149-.624.03228l-.07709.00346a3.745,3.745,0,0,1-3.07566-6.10115q.425-.52305.85054-1.04557c.43036-.53793.87143-1.06507,1.30171-1.60292a1.865,1.865,0,0,0,.13986-.16144c.49494-.61322.98971-1.21564,1.48465-1.82885a10.82911,10.82911,0,0,0-3.55014-3.43169c-4.95941-2.90463-11.80146-.89293-15.38389,3.59313-3.59313,4.486-4.27083,10.77947-3.023,16.3843a43.39764,43.39764,0,0,0,6.003,13.3828c-.269.34429-.54872.67779-.81765,1.02209a122.57366,122.57366,0,0,0-12.79359,20.2681c1.0163-7.93863-11.41159-36.60795-16.21776-42.68052-5.773-7.29409-17.61108-4.11077-18.62815,5.13562q-.01476.13428-.02884.26849,1.07082.60411,2.0964,1.28237a5.12707,5.12707,0,0,1-2.06713,9.33031l-.10452.01613c-9.55573,13.64367,21.07745,49.1547,28.74518,41.18139a125.11045,125.11045,0,0,0-6.73449,31.69282,118.66429,118.66429,0,0,0,.08607,19.15986l-.03231-.22593C558.90163,648.154,529.674,627.51374,521.139,629.233c-4.91675.99041-9.75952.76525-9.01293,5.72484q.01788.11874.03635.2375a34.4418,34.4418,0,0,1,3.862,1.86105q1.07082.60423,2.09639,1.28237a5.12712,5.12712,0,0,1-2.06712,9.33039l-.10464.01606c-.07528.01079-.13987.02157-.21507.03237-4.34967,14.96631,27.90735,39.12,47.5177,31.43461h.01081a125.07484,125.07484,0,0,0,8.402,24.52806H601.679c.10765-.3335.20443-.67779.3013-1.01129a34.102,34.102,0,0,1-8.30521-.49477c2.22693-2.73257,4.45377-5.48664,6.6807-8.21913a1.86122,1.86122,0,0,0,.13986-.16135c1.12956-1.39849,2.26992-2.78627,3.39948-4.18476l.00061-.00173a49.95232,49.95232,0,0,0-1.46367-12.72495Zm-34.37066-67.613.0158-.02133-.0158.04282Zm-6.64832,59.93237-.25822-.58084c.01079-.41957.01079-.83914,0-1.26942,0-.11845-.0215-.23672-.0215-.35508.09678.74228.18285,1.48464.29042,2.22692Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
-    <circle cx="95.24878" cy="439" fill="hsl(var(--color-foreground))" r="11" />
-    <circle
-      cx="227.24878"
-      cy="559"
-      fill="hsl(var(--color-foreground))"
-      r="11"
-    />
-    <circle
-      cx="728.24878"
-      cy="559"
-      fill="hsl(var(--color-foreground))"
-      r="11"
-    />
-    <circle
-      cx="755.24878"
-      cy="419"
-      fill="hsl(var(--color-foreground))"
-      r="11"
-    />
-    <circle
-      cx="723.24878"
-      cy="317"
-      fill="hsl(var(--color-foreground))"
-      r="11"
-    />
+    <circle cx="95.24878" cy="439" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="227.24878" cy="559" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="728.24878" cy="559" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="755.24878" cy="419" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="723.24878" cy="317" fill="hsl(var(--foreground))" r="11" />
     <path
       d="M434.1831,583.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,434.1831,583.426Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
-    <circle
-      cx="484.24878"
-      cy="349"
-      fill="hsl(var(--color-foreground))"
-      r="11"
-    />
+    <circle cx="484.24878" cy="349" fill="hsl(var(--foreground))" r="11" />
     <path
       d="M545.1831,513.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,545.1831,513.426Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
     <path
       d="M403.1831,481.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,403.1831,481.426Z"
-      fill="hsl(var(--color-foreground))"
+      fill="hsl(var(--foreground))"
       transform="translate(-169.93432 -164.42601)"
     />
-    <circle
-      cx="599.24878"
-      cy="443"
-      fill="hsl(var(--color-foreground))"
-      r="11"
-    />
-    <circle
-      cx="426.24878"
-      cy="338"
-      fill="hsl(var(--color-foreground))"
-      r="16"
-    />
+    <circle cx="599.24878" cy="443" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="426.24878" cy="338" fill="hsl(var(--foreground))" r="16" />
     <path
       d="M1028.875,735.26666l-857.75.30733a1.19068,1.19068,0,1,1,0-2.38136l857.75-.30734a1.19069,1.19069,0,0,1,0,2.38137Z"
       fill="#cacaca"
diff --git a/packages/business/universal-ui/src/fallback/icons/icon-500.vue b/packages/business/universal-ui/src/fallback/icons/icon-500.vue
index 93778d33d..97326b7c6 100644
--- a/packages/business/universal-ui/src/fallback/icons/icon-500.vue
+++ b/packages/business/universal-ui/src/fallback/icons/icon-500.vue
@@ -15,12 +15,12 @@
     />
     <path
       d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-31.39089 -100.5)"
     />
     <path
       d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-31.39089 -100.5)"
     />
     <path
diff --git a/packages/business/universal-ui/src/fallback/icons/icon-hello.vue b/packages/business/universal-ui/src/fallback/icons/icon-hello.vue
index ee91c4f7e..e511c43c0 100644
--- a/packages/business/universal-ui/src/fallback/icons/icon-hello.vue
+++ b/packages/business/universal-ui/src/fallback/icons/icon-hello.vue
@@ -19,7 +19,7 @@
     />
     <path
       d="M521.13449,410.50552a1.49881,1.49881,0,0,1-1.49822,1.49822H419.40273a20.52615,20.52615,0,0,1,0-41.05229H519.63627a1.49827,1.49827,0,1,1,0,2.99653H419.40273a17.52964,17.52964,0,0,0,0,35.05924H519.63627A1.49883,1.49883,0,0,1,521.13449,410.50552Z"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-110.33661 -237.5817)"
     />
     <path
@@ -129,7 +129,7 @@
     />
     <path
       d="M485.83027,319.97947v11.2367a2.33383,2.33383,0,0,1-2.4628,2.16532h-8.8589V317.81415h8.8589A2.33383,2.33383,0,0,1,485.83027,319.97947Z"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-110.33661 -237.5817)"
     />
     <path
@@ -184,7 +184,7 @@
     />
     <path
       d="M775.77611,417.286l27.24571-.33963,3.44882-.04668,55.43253-.69843s15.05312-14.3609,28.16068-29.1465l-1.83719-13.28833A54.29159,54.29159,0,0,0,870.023,340.1519C851.24988,352.696,840.363,377.52559,840.363,377.52559l-34.37018,8.22071-3.43848.82227-21.35608,5.10326Z"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-110.33661 -237.5817)"
     />
     <path
@@ -245,12 +245,12 @@
     />
     <path
       d="M992.25627,323.052l-53.551,59.4744s-25.60913-8.19816-45.41466-17.08624l-8.8977-27.32787a54.34329,54.34329,0,0,1-2.60112-19.66442c27.45606-7.306,59.391,19.87863,59.391,19.87863l40.08517-31.39877Z"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-110.33661 -237.5817)"
     />
     <path
       d="M867.301,465.6169c-9.554-3.30029-19.43312-6.71277-30.08912-7.99385l-.45773-.05533.12632-.443c11.03073-38.7308,8.27761-63.50657,2.87195-100.72306a37.59072,37.59072,0,0,1,21.5483-39.50121l.06542-.02958,30.43436-1.93391.06935-.00423,22.13437,6.50989a15.18313,15.18313,0,0,1,10.86724,14.83111c-.23987,12.23937.26868,25.9043.80711,40.37114,1.20787,32.45569,2.45686,66.01647-4.63045,87.79166l-.03718.11412-.09462.07416a36.09883,36.09883,0,0,1-23.08086,8.10758C887.90057,472.73235,877.76186,469.23034,867.301,465.6169Z"
-      fill="hsl(var(--color-primary))"
+      fill="hsl(var(--primary))"
       transform="translate(-110.33661 -237.5817)"
     />
     <path
diff --git a/packages/business/universal-ui/src/fallback/icons/icon-offline.vue b/packages/business/universal-ui/src/fallback/icons/icon-offline.vue
index 9ee634ac0..9e50b19b4 100644
--- a/packages/business/universal-ui/src/fallback/icons/icon-offline.vue
+++ b/packages/business/universal-ui/src/fallback/icons/icon-offline.vue
@@ -13,7 +13,7 @@
         fill="#3f3d56"
       />
       <polygon
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary))"
         points="349.16196 249.18644 355.16196 288.18642 443.16196 276.18642 434.66196 230.6195 349.16196 249.18644"
       />
       <rect
@@ -73,7 +73,7 @@
         <circle
           cx="333.2486"
           cy="323.64455"
-          fill="hsl(var(--color-primary))"
+          fill="hsl(var(--primary))"
           r="85"
         />
         <g>
diff --git a/packages/business/universal-ui/src/global-search/global-search.vue b/packages/business/universal-ui/src/global-search/global-search.vue
index 26dec0110..f32b8eba5 100644
--- a/packages/business/universal-ui/src/global-search/global-search.vue
+++ b/packages/business/universal-ui/src/global-search/global-search.vue
@@ -75,7 +75,7 @@ if (props.enableShortcutKey) {
           </span>
           <span
             v-if="enableShortcutKey"
-            class="bg-background border-foreground/50 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
+            class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
           >
             {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
             <kbd>K</kbd>
diff --git a/packages/business/universal-ui/src/preferences/blocks/layout/footer.vue b/packages/business/universal-ui/src/preferences/blocks/layout/footer.vue
index a5ff3484b..be1617430 100644
--- a/packages/business/universal-ui/src/preferences/blocks/layout/footer.vue
+++ b/packages/business/universal-ui/src/preferences/blocks/layout/footer.vue
@@ -13,9 +13,9 @@ const footerFixed = defineModel<boolean>('footerFixed');
 
 <template>
   <SwitchItem v-model="footerEnable">
-    {{ $t('preferences.footer-visible') }}
+    {{ $t('preferences.footer.visible') }}
   </SwitchItem>
   <SwitchItem v-model="footerFixed" :disabled="!footerEnable">
-    {{ $t('preferences.footer-fixed') }}
+    {{ $t('preferences.footer.fixed') }}
   </SwitchItem>
 </template>
diff --git a/packages/business/universal-ui/src/preferences/blocks/layout/header.vue b/packages/business/universal-ui/src/preferences/blocks/layout/header.vue
index 4bcbb692a..a6b78fa8a 100644
--- a/packages/business/universal-ui/src/preferences/blocks/layout/header.vue
+++ b/packages/business/universal-ui/src/preferences/blocks/layout/header.vue
@@ -17,19 +17,19 @@ const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 
 const localeItems: SelectListItem[] = [
   {
-    label: $t('preferences.header-mode-static'),
+    label: $t('preferences.header.mode-static'),
     value: 'static',
   },
   {
-    label: $t('preferences.header-mode-fixed'),
+    label: $t('preferences.header.mode-fixed'),
     value: 'fixed',
   },
   {
-    label: $t('preferences.header-mode-auto'),
+    label: $t('preferences.header.mode-auto'),
     value: 'auto',
   },
   {
-    label: $t('preferences.header-mode-auto-scroll'),
+    label: $t('preferences.header.mode-auto-scroll'),
     value: 'auto-scroll',
   },
 ];
diff --git a/packages/business/universal-ui/src/preferences/blocks/theme/color.vue b/packages/business/universal-ui/src/preferences/blocks/theme/color.vue
index 12f20f56d..9869e325e 100644
--- a/packages/business/universal-ui/src/preferences/blocks/theme/color.vue
+++ b/packages/business/universal-ui/src/preferences/blocks/theme/color.vue
@@ -70,12 +70,12 @@ watchEffect(() => {
       >
         <div
           :style="{ backgroundColor: color }"
-          class="h-6 w-6 rounded-md"
+          class="h-5 w-5 rounded-md"
         ></div>
       </div>
     </template>
     <div :style="inputStyle" class="outline-box p-2" @click="selectColor">
-      <div class="flex-center bg-accent relative h-6 w-6 rounded-md">
+      <div class="flex-center bg-accent relative h-5 w-5 rounded-md">
         <MdiEditBoxOutline class="absolute z-10" />
         <input
           ref="colorInput"
diff --git a/packages/business/universal-ui/src/preferences/icons/content-compact.vue b/packages/business/universal-ui/src/preferences/icons/content-compact.vue
index b58c65498..a1bcefdc0 100644
--- a/packages/business/universal-ui/src/preferences/icons/content-compact.vue
+++ b/packages/business/universal-ui/src/preferences/icons/content-compact.vue
@@ -20,7 +20,7 @@
       />
       <rect
         id="svg_8"
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary))"
         height="9.07027"
         stroke="null"
         width="104.07934"
diff --git a/packages/business/universal-ui/src/preferences/icons/header-nav.vue b/packages/business/universal-ui/src/preferences/icons/header-nav.vue
index f7a78e438..18158b3a7 100644
--- a/packages/business/universal-ui/src/preferences/icons/header-nav.vue
+++ b/packages/business/universal-ui/src/preferences/icons/header-nav.vue
@@ -20,7 +20,7 @@
       />
       <rect
         id="svg_8"
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary))"
         height="9.07027"
         stroke="null"
         width="104.07934"
diff --git a/packages/business/universal-ui/src/preferences/icons/mixed-nav.vue b/packages/business/universal-ui/src/preferences/icons/mixed-nav.vue
index d230b2698..d194383f0 100644
--- a/packages/business/universal-ui/src/preferences/icons/mixed-nav.vue
+++ b/packages/business/universal-ui/src/preferences/icons/mixed-nav.vue
@@ -20,7 +20,7 @@
       />
       <rect
         id="svg_8"
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary))"
         height="9.07027"
         stroke="null"
         width="104.07934"
diff --git a/packages/business/universal-ui/src/preferences/icons/sidebar-mixed-nav.vue b/packages/business/universal-ui/src/preferences/icons/sidebar-mixed-nav.vue
index 6288b09e5..8fc0ba406 100644
--- a/packages/business/universal-ui/src/preferences/icons/sidebar-mixed-nav.vue
+++ b/packages/business/universal-ui/src/preferences/icons/sidebar-mixed-nav.vue
@@ -21,7 +21,7 @@
       <path
         id="svg_2"
         d="m-3.37838,3.7543a1.93401,4.02457 0 0 1 1.93401,-4.02457l11.3488,0l0,66.40541l-11.3488,0a1.93401,4.02457 0 0 1 -1.93401,-4.02457l0,-58.35627z"
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary))"
         stroke="null"
       />
       <rect
diff --git a/packages/business/universal-ui/src/preferences/icons/sidebar-nav.vue b/packages/business/universal-ui/src/preferences/icons/sidebar-nav.vue
index d95bbb5d1..83ff3998d 100644
--- a/packages/business/universal-ui/src/preferences/icons/sidebar-nav.vue
+++ b/packages/business/universal-ui/src/preferences/icons/sidebar-nav.vue
@@ -19,7 +19,7 @@
       <path
         id="svg_2"
         d="m-3.37838,3.61916a4.4919,4.02457 0 0 1 4.4919,-4.02457l26.35848,0l0,66.40541l-26.35848,0a4.4919,4.02457 0 0 1 -4.4919,-4.02457l0,-58.35627z"
-        fill="hsl(var(--color-primary))"
+        fill="hsl(var(--primary))"
         stroke="null"
       />
       <rect
diff --git a/packages/business/universal-ui/src/preferences/preferences.vue b/packages/business/universal-ui/src/preferences/preferences.vue
index e33edea95..d4874e3fa 100644
--- a/packages/business/universal-ui/src/preferences/preferences.vue
+++ b/packages/business/universal-ui/src/preferences/preferences.vue
@@ -12,7 +12,7 @@ import type {
 } from '@vben-core/preferences';
 import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import { $t } from '@vben/locales';
 import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/iconify';
@@ -124,6 +124,8 @@ const {
 } = usePreferences();
 const { copy } = useClipboard();
 
+const activeTab = ref('general');
+
 const tabs = computed((): SegmentedItem[] => {
   return [
     {
@@ -176,8 +178,8 @@ function handleReset() {
   <div class="z-100 fixed right-0 top-1/2">
     <VbenSheet
       v-model:open="openPreferences"
-      :description="$t('preferences.preferences-subtitle')"
-      :title="$t('preferences.preferences')"
+      :description="$t('preferences.subtitle')"
+      :title="$t('preferences.name')"
     >
       <template #trigger>
         <Trigger />
@@ -197,7 +199,7 @@ function handleReset() {
       </template>
 
       <div class="p-4 pt-4">
-        <VbenSegmented :tabs="tabs" default-value="general">
+        <VbenSegmented v-model="activeTab" :tabs="tabs">
           <template #appearance>
             <Block :title="$t('preferences.theme')">
               <Theme
@@ -235,7 +237,7 @@ function handleReset() {
               />
             </Block>
 
-            <Block :title="$t('preferences.header')">
+            <Block :title="$t('preferences.header.name')">
               <Header
                 v-model:headerEnable="headerEnable"
                 v-model:headerMode="headerMode"
@@ -272,7 +274,7 @@ function handleReset() {
                 v-model:tabbar-show-icon="tabbarShowIcon"
               />
             </Block>
-            <Block :title="$t('preferences.footer')">
+            <Block :title="$t('preferences.footer.name')">
               <Footer
                 v-model:footer-enable="footerEnable"
                 v-model:footer-fixed="footerFixed"
diff --git a/packages/business/universal-ui/src/preferences/trigger.vue b/packages/business/universal-ui/src/preferences/trigger.vue
index 83b968748..8d8569cd4 100644
--- a/packages/business/universal-ui/src/preferences/trigger.vue
+++ b/packages/business/universal-ui/src/preferences/trigger.vue
@@ -11,7 +11,7 @@ defineOptions({
 
 <template>
   <VbenButton
-    :title="$t('preferences.preferences')"
+    :title="$t('preferences.name')"
     class="bg-primary flex-col-center h-12 w-12 cursor-pointer rounded-l-lg rounded-r-none border-none"
   >
     <IconSetting class="duration-3000 animate-spin text-2xl" />
diff --git a/packages/business/universal-ui/src/theme-toggle/theme-button.vue b/packages/business/universal-ui/src/theme-toggle/theme-button.vue
index 0127cef16..f4393463c 100644
--- a/packages/business/universal-ui/src/theme-toggle/theme-button.vue
+++ b/packages/business/universal-ui/src/theme-toggle/theme-button.vue
@@ -96,7 +96,7 @@ function toggleTheme(event: MouseEvent) {
       <mask
         id="theme-toggle-moon"
         :class="e('moon')"
-        fill="hsl(var(--color-foreground)/80%)"
+        fill="hsl(var(--foreground)/80%)"
         stroke="none"
       >
         <rect fill="white" height="100%" width="100%" x="0" y="0" />
@@ -135,18 +135,18 @@ function toggleTheme(event: MouseEvent) {
   }
 
   @include e('sun') {
-    fill: hsl(var(--color-foreground) / 80%);
+    fill: hsl(var(--foreground) / 80%);
     stroke: none;
     transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
     transform-origin: center center;
 
     &:hover > svg > & {
-      fill: hsl(var(--color-foreground));
+      fill: hsl(var(--foreground));
     }
   }
 
   @include e('sun-beams') {
-    stroke: hsl(var(--color-foreground) / 80%);
+    stroke: hsl(var(--foreground) / 80%);
     stroke-width: 2px;
     transition:
       transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
@@ -154,7 +154,7 @@ function toggleTheme(event: MouseEvent) {
     transform-origin: center center;
 
     &:hover > svg > & {
-      stroke: hsl(var(--color-foreground));
+      stroke: hsl(var(--foreground));
     }
   }
 
@@ -188,7 +188,7 @@ function toggleTheme(event: MouseEvent) {
     @include b('theme-toggle') {
       &__moon,
       &__sun {
-        fill: hsl(var(--color-foreground));
+        fill: hsl(var(--foreground));
       }
     }
   }
diff --git a/packages/business/universal-ui/src/user-dropdown/user-dropdown.vue b/packages/business/universal-ui/src/user-dropdown/user-dropdown.vue
index eb7833b37..e83fd6275 100644
--- a/packages/business/universal-ui/src/user-dropdown/user-dropdown.vue
+++ b/packages/business/universal-ui/src/user-dropdown/user-dropdown.vue
@@ -175,7 +175,7 @@ if (enableShortcutKey.value) {
         @click="handleOpenPreference"
       >
         <IcRoundSettingsSuggest class="mr-2 size-5" />
-        {{ $t('preferences.preferences') }}
+        {{ $t('preferences.name') }}
         <DropdownMenuShortcut v-if="enablePreferencesShortcutKey">
           {{ altView }} ,
         </DropdownMenuShortcut>
diff --git a/packages/locales/src/langs/en-US.yaml b/packages/locales/src/langs/en-US.yaml
index 4cc926fd3..33049cf48 100644
--- a/packages/locales/src/langs/en-US.yaml
+++ b/packages/locales/src/langs/en-US.yaml
@@ -118,8 +118,9 @@ page:
     page: Exception Page
 
 preferences:
-  preferences: Preferences
-  preferences-subtitle: Customize Preferences & Preview in Real Time
+  name: Preferences
+  subtitle: Customize Preferences & Preview in Real Time
+  reset-tip: The data has changed, click to reset
   theme: Theme
   ai-assistant: Ai Assistant
   appearance: Appearance
@@ -179,17 +180,18 @@ preferences:
   tabs: Tabs
   tabs-icon: Display Tabbar Icon
   mode: Mode
-  header: Header
-  header-visible: Display Header
-  header-mode-static: Static
-  header-mode-fixed: Fixed
-  header-mode-auto: Auto hide/display
-  header-mode-auto-scroll: Scroll hide/display
-  footer: Footer
-  footer-fixed: Fixed at the bottom
-  footer-visible: Display Footer
   logo-visible: Display Logo
-  reset-tip: The data has changed, click to reset
+  header:
+    name: Header
+    visible: Display Header
+    mode-static: Static
+    mode-fixed: Fixed
+    mode-auto: Auto hide/display
+    mode-auto-scroll: Scroll hide/display
+  footer:
+    name: Footer
+    visible: Fixed at the bottom
+    fixed: Display Footer
   shortcut-keys:
     title: Shortcut Keys
     global: Global
diff --git a/packages/locales/src/langs/zh-CN.yaml b/packages/locales/src/langs/zh-CN.yaml
index a33bba32f..121810593 100644
--- a/packages/locales/src/langs/zh-CN.yaml
+++ b/packages/locales/src/langs/zh-CN.yaml
@@ -117,8 +117,9 @@ page:
     page: 异常页面
 
 preferences:
-  preferences: 偏好设置
-  preferences-subtitle: 自定义偏好设置 & 实时预览
+  name: 偏好设置
+  subtitle: 自定义偏好设置 & 实时预览
+  reset-tip: 数据有变化，点击可进行重置
   theme: 主题
   appearance: 外观
   theme-color: 主题色
@@ -178,17 +179,18 @@ preferences:
   tabs: 标签栏
   tabs-icon: 显示标签栏图标
   mode: 模式
-  header: 顶栏
-  header-mode-static: 静止
-  header-mode-fixed: 固定
-  header-mode-auto: 自动隐藏和显示
-  header-mode-auto-scroll: 滚动隐藏和显示
-  header-visible: 显示顶栏
-  footer: 底栏
-  footer-visible: 显示底栏
-  footer-fixed: 固定在底部
   logo-visible: 显示 Logo
-  reset-tip: 数据有变化，点击可进行重置
+  header:
+    name: 顶栏
+    mode-static: 静止
+    mode-fixed: 固定
+    mode-auto: 自动隐藏和显示
+    mode-auto-scroll: 滚动隐藏和显示
+    visible: 显示顶栏
+  footer:
+    name: 底栏
+    visible: 显示底栏
+    fixed: 固定在底部
   shortcut-keys:
     title: 快捷键
     global: 全局
diff --git a/packages/styles/src/common/nprogress.css b/packages/styles/src/common/nprogress.css
index 781b5386e..29907b514 100644
--- a/packages/styles/src/common/nprogress.css
+++ b/packages/styles/src/common/nprogress.css
@@ -22,8 +22,8 @@
   width: 100px;
   height: 100%;
   box-shadow:
-    0 0 10px hsl(var(--color-primary)),
-    0 0 5px hsl(var(--color-primary));
+    0 0 10px hsl(var(--primary)),
+    0 0 5px hsl(var(--primary));
   opacity: 1;
   transform: rotate(3deg) translate(0, -4px);
 }
@@ -42,8 +42,8 @@
   width: 18px;
   height: 18px;
   border: solid 2px transparent;
-  border-top-color: hsl(var(--color-primary));
-  border-left-color: hsl(var(--color-primary));
+  border-top-color: hsl(var(--primary));
+  border-left-color: hsl(var(--primary));
   border-radius: 50%;
   animation: nprogress-spinner 400ms linear infinite;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0407bbf2e..abd6acd10 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,8 +17,8 @@ importers:
         specifier: ^0.5.0
         version: 0.5.0(encoding@0.1.13)
       '@changesets/cli':
-        specifier: ^2.27.5
-        version: 2.27.5
+        specifier: ^2.27.6
+        version: 2.27.6
       '@ls-lint/ls-lint':
         specifier: ^2.2.3
         version: 2.2.3
@@ -112,6 +112,9 @@ importers:
       '@vben-core/stores':
         specifier: workspace:*
         version: link:../../packages/@core/forward/stores
+      '@vben/chart-ui':
+        specifier: workspace:*
+        version: link:../../packages/business/chart-ui
       '@vben/constants':
         specifier: workspace:*
         version: link:../../packages/constants
@@ -211,8 +214,8 @@ importers:
         specifier: ^2.29.1
         version: 2.29.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0)(typescript@5.5.2))(eslint@8.57.0)
       eslint-plugin-jsdoc:
-        specifier: ^48.2.15
-        version: 48.2.15(eslint@8.57.0)
+        specifier: ^48.4.0
+        version: 48.4.0(eslint@8.57.0)
       eslint-plugin-jsonc:
         specifier: ^2.16.0
         version: 2.16.0(eslint@8.57.0)
@@ -347,8 +350,8 @@ importers:
   internal/tailwind-config:
     dependencies:
       '@iconify/json':
-        specifier: ^2.2.221
-        version: 2.2.221
+        specifier: ^2.2.222
+        version: 2.2.222
       '@iconify/tailwind':
         specifier: ^1.1.1
         version: 1.1.1
@@ -491,7 +494,7 @@ importers:
     dependencies:
       '@vben-core/cache':
         specifier: workspace:*
-        version: link:../../shared/chche
+        version: link:../../shared/cache
       '@vben-core/toolkit':
         specifier: workspace:*
         version: link:../../shared/toolkit
@@ -542,7 +545,7 @@ importers:
         specifier: ^4.4.0
         version: 4.4.0(vue@3.4.30(typescript@5.5.2))
 
-  packages/@core/shared/chche: {}
+  packages/@core/shared/cache: {}
 
   packages/@core/shared/design:
     dependencies:
@@ -661,8 +664,8 @@ importers:
         specifier: ^0.7.0
         version: 0.7.0
       radix-vue:
-        specifier: ^1.8.4
-        version: 1.8.4(vue@3.4.30(typescript@5.5.2))
+        specifier: ^1.8.5
+        version: 1.8.5(vue@3.4.30(typescript@5.5.2))
       vue:
         specifier: ^3.4.30
         version: 3.4.30(typescript@5.5.2)
@@ -691,6 +694,25 @@ importers:
         specifier: ^3.4.30
         version: 3.4.30(typescript@5.5.2)
 
+  packages/business/chart-ui:
+    dependencies:
+      '@vben-core/design':
+        specifier: workspace:*
+        version: link:../../@core/shared/design
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../../@core/forward/preferences
+      echarts:
+        specifier: ^5.5.0
+        version: 5.5.0
+      vue:
+        specifier: ^3.4.30
+        version: 3.4.30(typescript@5.5.2)
+    devDependencies:
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../types
+
   packages/business/layouts:
     dependencies:
       '@vben-core/helpers':
@@ -754,6 +776,9 @@ importers:
       '@vben-core/toolkit':
         specifier: workspace:*
         version: link:../../@core/shared/toolkit
+      '@vben/chart-ui':
+        specifier: workspace:*
+        version: link:../chart-ui
       '@vben/locales':
         specifier: workspace:*
         version: link:../../locales
@@ -1692,8 +1717,8 @@ packages:
   '@changesets/changelog-github@0.5.0':
     resolution: {integrity: sha512-zoeq2LJJVcPJcIotHRJEEA2qCqX0AQIeFE+L21L8sRLPVqDhSXY8ZWAt2sohtBpFZkBwu+LUwMSKRr2lMy3LJA==}
 
-  '@changesets/cli@2.27.5':
-    resolution: {integrity: sha512-UVppOvzCjjylBenFcwcZNG5IaZ8jsIaEVraV/pbXgukYNb0Oqa0d8UWb0LkYzA1Bf1HmUrOfccFcRLheRuA7pA==}
+  '@changesets/cli@2.27.6':
+    resolution: {integrity: sha512-PB7KS5JkCQ4WSXlnfThn8CXAHVwYxFdZvYTimhi12fls/tzj9iimUhKsYwkrKSbw1AiVlGCZtihj5Wkt6siIjA==}
     hasBin: true
 
   '@changesets/config@3.0.1':
@@ -2751,8 +2776,8 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@iconify/json@2.2.221':
-    resolution: {integrity: sha512-pCyE3Z3kOq2OmYm80nnyTrYdDzGKIyzNwM5+ABL1gguOTslhu4QBZUO+o5gMiolh3eywcOd8CgN00uBWVHbzyg==}
+  '@iconify/json@2.2.222':
+    resolution: {integrity: sha512-7Q3wTaWCOk/npMrH1fyy37noARUBTb3B6daGr23+CiNCrTpV3byH+d5LEqPPVi+RT369IEKEcE8+s5MFN1hcOg==}
 
   '@iconify/tailwind@1.1.1':
     resolution: {integrity: sha512-4mmA//qjZigv7D4KlqcVSYTqfRIJzyts2/lSCAJfCL0rVMIE76+ifJnaE5jxCo1+nYGBF8FsFo0qFOs+sX4EnA==}
@@ -3783,18 +3808,10 @@ packages:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
 
-  array.prototype.flat@1.3.2:
-    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
-    engines: {node: '>= 0.4'}
-
   arraybuffer.prototype.slice@1.0.3:
     resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
     engines: {node: '>= 0.4'}
 
-  arrify@1.0.1:
-    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
-    engines: {node: '>=0.10.0'}
-
   arrify@2.0.1:
     resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
     engines: {node: '>=8'}
@@ -3895,9 +3912,6 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  breakword@1.0.6:
-    resolution: {integrity: sha512-yjxDAYyK/pBvws9H4xKYpLDpYKEH6CzrBPAuXq3x18I+c/2MkVtT3qAr7Oloi6Dss9qNhPVueAAVU1CSeNDIXw==}
-
   browserslist@4.23.1:
     resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -3957,10 +3971,6 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  camelcase-keys@6.2.2:
-    resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
-    engines: {node: '>=8'}
-
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -4085,10 +4095,6 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
-  clone@1.0.4:
-    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
-    engines: {node: '>=0.8'}
-
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -4401,19 +4407,6 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  csv-generate@3.4.3:
-    resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}
-
-  csv-parse@4.16.3:
-    resolution: {integrity: sha512-cO1I/zmz4w2dcKHVvpCr7JVRu8/FymG5OEpmvsZYlccYolPBLoVGKUHgNoc4ZGkFeFlWGEDmMyBM+TTqRdW/wg==}
-
-  csv-stringify@5.6.5:
-    resolution: {integrity: sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==}
-
-  csv@5.5.3:
-    resolution: {integrity: sha512-QTaY0XjjhTQOdguARF0lGKm5/mEq9PD9/VhZZegHDIBq2tQwgNpHc3dneD4mGo2iJs+fTKv5Bp0fZ+BRuY3Z0g==}
-    engines: {node: '>= 0.1.90'}
-
   cz-git@1.9.3:
     resolution: {integrity: sha512-v7+vYOparImLLo6J5tAsi/cz+EAK7FI/TDnemi11xgEax4k+ZVqxsmkiEc68n+MJLp1l5THhB2KTDhjpW+ellg==}
     engines: {node: '>=v12.20.0'}
@@ -4481,10 +4474,6 @@ packages:
       supports-color:
         optional: true
 
-  decamelize-keys@1.1.1:
-    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
-    engines: {node: '>=0.10.0'}
-
   decamelize@1.2.0:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
@@ -4519,9 +4508,6 @@ packages:
     resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
     engines: {node: '>=18'}
 
-  defaults@1.0.4:
-    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
-
   defer-to-connect@2.0.1:
     resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
     engines: {node: '>=10'}
@@ -4655,6 +4641,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  echarts@5.5.0:
+    resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
+
   editorconfig@1.0.4:
     resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
     engines: {node: '>=14'}
@@ -4745,9 +4734,6 @@ packages:
     resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==}
     engines: {node: '>= 0.4'}
 
-  es-shim-unscopables@1.0.2:
-    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
-
   es-to-primitive@1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
@@ -4850,8 +4836,8 @@ packages:
     peerDependencies:
       eslint: ^7.2.0 || ^8
 
-  eslint-plugin-jsdoc@48.2.15:
-    resolution: {integrity: sha512-ScHhf9thOoJQ4dXpS+nJXTfNfslG8NBtzQ165PiXWIyGlJcAmkiEeTIEAlIcLA7uztJF7zRiuiKIqOBX4JpVzw==}
+  eslint-plugin-jsdoc@48.4.0:
+    resolution: {integrity: sha512-xBUxuAx03cKoEA7y+MYSUdwyN8AJyZHbAJ257sOFXgVgCScm574S4zEYJpBoARwaCu4chhCbvA+gdm+00whlxA==}
     engines: {node: '>=18'}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -5378,19 +5364,12 @@ packages:
     resolution: {integrity: sha512-9qxd8BQK0tZJ3cRUW0Yn2q6P/9h+bgz/4UYuscpdxPz6851NNBA1IwoYDRHDpKzCqmr1UHlGHcp5+0WzpY9F7A==}
     engines: {node: ^14.13.1 || >=16.0.0}
 
-  grapheme-splitter@1.0.4:
-    resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
-
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
   h3@1.11.1:
     resolution: {integrity: sha512-AbaH6IDnZN6nmbnJOH72y3c5Wwh9P97soSVdGSBbcDACRdkC0FEWf25pzx4f/NuOCK6quHmW18yF2Wx+G4Zi1A==}
 
-  hard-rejection@2.1.0:
-    resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
-    engines: {node: '>=6'}
-
   has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
 
@@ -5694,10 +5673,6 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
-  is-plain-obj@1.1.0:
-    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
-    engines: {node: '>=0.10.0'}
-
   is-plain-object@3.0.1:
     resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
     engines: {node: '>=0.10.0'}
@@ -5905,10 +5880,6 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
-  kleur@4.1.5:
-    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
-    engines: {node: '>=6'}
-
   known-css-properties@0.31.0:
     resolution: {integrity: sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==}
 
@@ -6073,14 +6044,6 @@ packages:
     resolution: {integrity: sha512-EsS89h6l4vbfJEtBZnENTOFk8mCRpY5ru36Xe5bcX1KYIli2mkSHqoFsp5O1wMDvTJJzxe/4THpCTtygjeeGWQ==}
     engines: {node: '>= 10'}
 
-  map-obj@1.0.1:
-    resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
-    engines: {node: '>=0.10.0'}
-
-  map-obj@4.3.0:
-    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
-    engines: {node: '>=8'}
-
   map-stream@0.1.0:
     resolution: {integrity: sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==}
 
@@ -6104,10 +6067,6 @@ packages:
     resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
     engines: {node: '>=18'}
 
-  meow@6.1.1:
-    resolution: {integrity: sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==}
-    engines: {node: '>=8'}
-
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -6182,10 +6141,6 @@ packages:
     resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minimist-options@4.1.0:
-    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
-    engines: {node: '>= 6'}
-
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
@@ -6235,10 +6190,6 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  mixme@0.5.10:
-    resolution: {integrity: sha512-5H76ANWinB1H3twpJ6JY8uvAtpmFvHNArpilJAjXRKXSDDLPIMoZArw5SH0q9z+lLs8IrMw7Q2VWpWimFKFT1Q==}
-    engines: {node: '>= 8.0.0'}
-
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -6519,6 +6470,10 @@ packages:
     resolution: {integrity: sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==}
     engines: {node: '>=8'}
 
+  parse-imports@2.1.0:
+    resolution: {integrity: sha512-JQWgmK2o4w8leUkZeZPatWdAny6vXGU/3siIUvMF6J2rDCud9aTt8h/px9oZJ6U3EcfhngBJ635uPFI0q0VAeA==}
+    engines: {node: '>= 18'}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -7216,16 +7171,12 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  quick-lru@4.0.1:
-    resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
-    engines: {node: '>=8'}
-
   quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
-  radix-vue@1.8.4:
-    resolution: {integrity: sha512-Pc8BKFQouARED1Lb7/s18Fxny3ZodET5fyXLorW5zf/BiUDQv9gk7NZEYv9sU3uldSvpO3JLLChd0q2repBdGw==}
+  radix-vue@1.8.5:
+    resolution: {integrity: sha512-aWRa/tc5EHS2U4h8YTovRtwSMt+Sbk4QRekNTpkshCWlq353mpGBsp0ME/4seOxWn7JKze8NA3pDx/AQuH2tMw==}
     peerDependencies:
       vue: ^3.4.30
 
@@ -7261,10 +7212,6 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
-
   refa@0.12.1:
     resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -7599,6 +7546,9 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  slashes@3.0.12:
+    resolution: {integrity: sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==}
+
   slice-ansi@4.0.0:
     resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
     engines: {node: '>=10'}
@@ -7615,11 +7565,6 @@ packages:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
-  smartwrap@2.0.2:
-    resolution: {integrity: sha512-vCsKNQxb7PnCNd2wY1WClWifAc2lwqsG8OaswpJkVJsvMGcnEntdTCDajZCkk93Ay1U3t/9puJmb525Rg5MZBA==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
@@ -7706,9 +7651,6 @@ packages:
   stream-combiner@0.0.4:
     resolution: {integrity: sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==}
 
-  stream-transform@2.1.3:
-    resolution: {integrity: sha512-9GHUiM5hMiCi6Y03jD2ARC1ettBXkQBoQAe7nJsPknnI0ow10aXjTnew8QtYQmLjzn974BnmWEAJgCY6ZP1DeQ==}
-
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -7903,6 +7845,10 @@ packages:
     resolution: {integrity: sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  synckit@0.9.0:
+    resolution: {integrity: sha512-7RnqIMq572L8PeEzKeBINYEJDDxpcH8JEgLwUqBd3TkofhFRbkq4QLR0u+36avGAhCRbk2nnmjcW9SE531hPDg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
@@ -8030,10 +7976,6 @@ packages:
     resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
     engines: {node: '>=18'}
 
-  trim-newlines@3.0.1:
-    resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
-    engines: {node: '>=8'}
-
   ts-api-utils@1.3.0:
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
@@ -8057,14 +7999,12 @@ packages:
       '@swc/wasm':
         optional: true
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
 
-  tty-table@4.2.3:
-    resolution: {integrity: sha512-Fs15mu0vGzCrj8fmJNP7Ynxt5J7praPXqFN0leZeZBXJwkMxv9cb2D454k1ltrtUSJbZ4yH4e0CynsHLxmUfFA==}
-    engines: {node: '>=8.0.0'}
-    hasBin: true
-
   turbo-darwin-64@2.0.4:
     resolution: {integrity: sha512-x9mvmh4wudBstML8Z8IOmokLWglIhSfhQwnh2gBCSqabgVBKYvzl8Y+i+UCNPxheCGTgtsPepTcIaKBIyFIcvw==}
     cpu: [x64]
@@ -8107,10 +8047,6 @@ packages:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
 
-  type-fest@0.13.1:
-    resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
-    engines: {node: '>=10'}
-
   type-fest@0.16.0:
     resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
     engines: {node: '>=10'}
@@ -8546,9 +8482,6 @@ packages:
     resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==}
     engines: {node: '>=10.13.0'}
 
-  wcwidth@1.0.1:
-    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
-
   web-streams-polyfill@3.3.3:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
@@ -8815,6 +8748,9 @@ packages:
     engines: {node: '>=8.0.0'}
     hasBin: true
 
+  zrender@5.5.0:
+    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
+
   zx@7.2.3:
     resolution: {integrity: sha512-QODu38nLlYXg/B/Gw7ZKiZrvPkEsjPN3LQ5JFXM7h0JvwhEdPNNl+4Ao1y4+o3CLNiDUNcwzQYZ4/Ko7kKzCMA==}
     engines: {node: '>= 16.0.0'}
@@ -9880,7 +9816,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/cli@2.27.5':
+  '@changesets/cli@2.27.6':
     dependencies:
       '@babel/runtime': 7.24.7
       '@changesets/apply-release-plan': 7.0.3
@@ -9906,7 +9842,7 @@ snapshots:
       external-editor: 3.1.0
       fs-extra: 7.0.1
       human-id: 1.0.2
-      meow: 6.1.1
+      mri: 1.2.0
       outdent: 0.5.0
       p-limit: 2.3.0
       preferred-pm: 3.1.3
@@ -9914,7 +9850,6 @@ snapshots:
       semver: 7.6.2
       spawndamnit: 2.0.0
       term-size: 2.2.1
-      tty-table: 4.2.3
 
   '@changesets/config@3.0.1':
     dependencies:
@@ -10865,7 +10800,7 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@iconify/json@2.2.221':
+  '@iconify/json@2.2.222':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
@@ -12168,13 +12103,6 @@ snapshots:
 
   array-union@2.1.0: {}
 
-  array.prototype.flat@1.3.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
-
   arraybuffer.prototype.slice@1.0.3:
     dependencies:
       array-buffer-byte-length: 1.0.1
@@ -12186,8 +12114,6 @@ snapshots:
       is-array-buffer: 3.0.4
       is-shared-array-buffer: 1.0.3
 
-  arrify@1.0.1: {}
-
   arrify@2.0.1: {}
 
   assertion-error@2.0.1: {}
@@ -12299,10 +12225,6 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  breakword@1.0.6:
-    dependencies:
-      wcwidth: 1.0.1
-
   browserslist@4.23.1:
     dependencies:
       caniuse-lite: 1.0.30001636
@@ -12381,12 +12303,6 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
-  camelcase-keys@6.2.2:
-    dependencies:
-      camelcase: 5.3.1
-      map-obj: 4.3.0
-      quick-lru: 4.0.1
-
   camelcase@5.3.1: {}
 
   camelcase@6.3.0: {}
@@ -12541,8 +12457,6 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
-  clone@1.0.4: {}
-
   clsx@2.1.1: {}
 
   color-convert@1.9.3:
@@ -12911,19 +12825,6 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  csv-generate@3.4.3: {}
-
-  csv-parse@4.16.3: {}
-
-  csv-stringify@5.6.5: {}
-
-  csv@5.5.3:
-    dependencies:
-      csv-generate: 3.4.3
-      csv-parse: 4.16.3
-      csv-stringify: 5.6.5
-      stream-transform: 2.1.3
-
   cz-git@1.9.3: {}
 
   czg@1.9.3: {}
@@ -12973,11 +12874,6 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
-  decamelize-keys@1.1.1:
-    dependencies:
-      decamelize: 1.2.0
-      map-obj: 1.0.1
-
   decamelize@1.2.0: {}
 
   decimal.js@10.4.3: {}
@@ -13001,10 +12897,6 @@ snapshots:
       bundle-name: 4.1.0
       default-browser-id: 5.0.0
 
-  defaults@1.0.4:
-    dependencies:
-      clone: 1.0.4
-
   defer-to-connect@2.0.1: {}
 
   define-data-property@1.1.4:
@@ -13145,6 +13037,11 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  echarts@5.5.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.5.0
+
   editorconfig@1.0.4:
     dependencies:
       '@one-ini/wasm': 0.1.1
@@ -13268,10 +13165,6 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  es-shim-unscopables@1.0.2:
-    dependencies:
-      hasown: 2.0.2
-
   es-to-primitive@1.2.1:
     dependencies:
       is-callable: 1.2.7
@@ -13436,7 +13329,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsdoc@48.2.15(eslint@8.57.0):
+  eslint-plugin-jsdoc@48.4.0(eslint@8.57.0):
     dependencies:
       '@es-joy/jsdoccomment': 0.43.1
       are-docs-informative: 0.0.2
@@ -13445,8 +13338,10 @@ snapshots:
       escape-string-regexp: 4.0.0
       eslint: 8.57.0
       esquery: 1.5.0
+      parse-imports: 2.1.0
       semver: 7.6.2
       spdx-expression-parse: 4.0.0
+      synckit: 0.9.0
     transitivePeerDependencies:
       - supports-color
 
@@ -14085,8 +13980,6 @@ snapshots:
       rotated-array-set: 3.0.0
       short-tree: 3.0.0
 
-  grapheme-splitter@1.0.4: {}
-
   graphemer@1.4.0: {}
 
   h3@1.11.1:
@@ -14104,8 +13997,6 @@ snapshots:
     transitivePeerDependencies:
       - uWebSockets.js
 
-  hard-rejection@2.1.0: {}
-
   has-bigints@1.0.2: {}
 
   has-flag@3.0.0: {}
@@ -14371,8 +14262,6 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
-  is-plain-obj@1.1.0: {}
-
   is-plain-object@3.0.1: {}
 
   is-plain-object@5.0.0: {}
@@ -14568,8 +14457,6 @@ snapshots:
 
   kleur@3.0.3: {}
 
-  kleur@4.1.5: {}
-
   known-css-properties@0.31.0: {}
 
   kolorist@1.8.0: {}
@@ -14749,10 +14636,6 @@ snapshots:
       - bluebird
       - supports-color
 
-  map-obj@1.0.1: {}
-
-  map-obj@4.3.0: {}
-
   map-stream@0.1.0: {}
 
   mark.js@8.11.1: {}
@@ -14767,20 +14650,6 @@ snapshots:
 
   meow@13.2.0: {}
 
-  meow@6.1.1:
-    dependencies:
-      '@types/minimist': 1.2.5
-      camelcase-keys: 6.2.2
-      decamelize-keys: 1.1.1
-      hard-rejection: 2.1.0
-      minimist-options: 4.1.0
-      normalize-package-data: 2.5.0
-      read-pkg-up: 7.0.1
-      redent: 3.0.0
-      trim-newlines: 3.0.1
-      type-fest: 0.13.1
-      yargs-parser: 18.1.3
-
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -14838,12 +14707,6 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimist-options@4.1.0:
-    dependencies:
-      arrify: 1.0.1
-      is-plain-obj: 1.1.0
-      kind-of: 6.0.3
-
   minimist@1.2.8: {}
 
   minipass-collect@1.0.2:
@@ -14889,8 +14752,6 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mixme@0.5.10: {}
-
   mkdirp@1.0.4: {}
 
   mkdist@1.5.1(sass@1.77.6)(typescript@5.5.2)(vue-tsc@2.0.22(typescript@5.5.2)):
@@ -15162,6 +15023,11 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-imports@2.1.0:
+    dependencies:
+      es-module-lexer: 1.5.3
+      slashes: 3.0.12
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -15792,11 +15658,9 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  quick-lru@4.0.1: {}
-
   quick-lru@5.1.1: {}
 
-  radix-vue@1.8.4(vue@3.4.30(typescript@5.5.2)):
+  radix-vue@1.8.5(vue@3.4.30(typescript@5.5.2)):
     dependencies:
       '@floating-ui/dom': 1.6.5
       '@floating-ui/vue': 1.0.6(vue@3.4.30(typescript@5.5.2))
@@ -15856,11 +15720,6 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  redent@3.0.0:
-    dependencies:
-      indent-string: 4.0.0
-      strip-indent: 3.0.0
-
   refa@0.12.1:
     dependencies:
       '@eslint-community/regexpp': 4.10.1
@@ -16186,6 +16045,8 @@ snapshots:
 
   slash@5.1.0: {}
 
+  slashes@3.0.12: {}
+
   slice-ansi@4.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -16204,15 +16065,6 @@ snapshots:
 
   smart-buffer@4.2.0: {}
 
-  smartwrap@2.0.2:
-    dependencies:
-      array.prototype.flat: 1.3.2
-      breakword: 1.0.6
-      grapheme-splitter: 1.0.4
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-      yargs: 15.4.1
-
   smob@1.5.0: {}
 
   socks-proxy-agent@5.0.1:
@@ -16295,10 +16147,6 @@ snapshots:
     dependencies:
       duplexer: 0.1.2
 
-  stream-transform@2.1.3:
-    dependencies:
-      mixme: 0.5.10
-
   string-argv@0.3.2: {}
 
   string-width@4.2.3:
@@ -16553,6 +16401,11 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.6.3
 
+  synckit@0.9.0:
+    dependencies:
+      '@pkgr/core': 0.1.1
+      tslib: 2.6.3
+
   tabbable@6.2.0: {}
 
   table@6.8.2:
@@ -16703,8 +16556,6 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  trim-newlines@3.0.1: {}
-
   ts-api-utils@1.3.0(typescript@5.5.2):
     dependencies:
       typescript: 5.5.2
@@ -16730,17 +16581,9 @@ snapshots:
       yn: 3.1.1
     optional: true
 
-  tslib@2.6.3: {}
+  tslib@2.3.0: {}
 
-  tty-table@4.2.3:
-    dependencies:
-      chalk: 4.1.2
-      csv: 5.5.3
-      kleur: 4.1.5
-      smartwrap: 2.0.2
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-      yargs: 17.7.2
+  tslib@2.6.3: {}
 
   turbo-darwin-64@2.0.4:
     optional: true
@@ -16775,8 +16618,6 @@ snapshots:
 
   type-detect@4.0.8: {}
 
-  type-fest@0.13.1: {}
-
   type-fest@0.16.0: {}
 
   type-fest@0.20.2: {}
@@ -17333,10 +17174,6 @@ snapshots:
       graceful-fs: 4.2.11
     optional: true
 
-  wcwidth@1.0.1:
-    dependencies:
-      defaults: 1.0.4
-
   web-streams-polyfill@3.3.3: {}
 
   webidl-conversions@3.0.1: {}
@@ -17690,6 +17527,10 @@ snapshots:
     optionalDependencies:
       commander: 9.5.0
 
+  zrender@5.5.0:
+    dependencies:
+      tslib: 2.3.0
+
   zx@7.2.3:
     dependencies:
       '@types/fs-extra': 11.0.4
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index ab91a7e6a..11294ad31 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -96,6 +96,10 @@
       "name": "@vben-core/tabs-ui",
       "path": "packages/@core/uikit/tabs-ui",
     },
+    {
+      "name": "@vben/chart-ui",
+      "path": "packages/business/chart-ui",
+    },
     {
       "name": "@vben/layouts",
       "path": "packages/business/layouts",