diff --git a/apps/backend-mock/src/modules/menu/menu.controller.ts b/apps/backend-mock/src/modules/menu/menu.controller.ts
index 48456579..a8155365 100644
--- a/apps/backend-mock/src/modules/menu/menu.controller.ts
+++ b/apps/backend-mock/src/modules/menu/menu.controller.ts
@@ -96,7 +96,7 @@ export class MenuController {
               path: 'access',
               meta: {
                 icon: 'mdi:cloud-key-outline',
-                title: 'page.demos.access.backendControl',
+                title: 'page.demos.access.backendPermissions',
               },
               redirect: '/demos/access/page-control',
               children: [
diff --git a/apps/web-antd/src/forward/access.ts b/apps/web-antd/src/forward/access.ts
index 2f8016b6..661b79c2 100644
--- a/apps/web-antd/src/forward/access.ts
+++ b/apps/web-antd/src/forward/access.ts
@@ -1,7 +1,9 @@
-import type { GeneratorMenuAndRoutesOptions } from '@vben/access';
-import type { ComponentRecordType } from '@vben/types';
+import type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben/types';
 
-import { generateMenusAndRoutes } from '@vben/access';
+import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben-core/preferences';
 
 import { message } from 'ant-design-vue';
@@ -13,7 +15,7 @@ import { $t } from '#/locales';
 const forbiddenComponent = () =>
   import('#/views/_essential/fallback/forbidden.vue');
 
-async function generateAccess(options: GeneratorMenuAndRoutesOptions) {
+async function generateAccess(options: GenerateMenuAndRoutesOptions) {
   const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
 
   const layoutMap: ComponentRecordType = {
@@ -21,7 +23,7 @@ async function generateAccess(options: GeneratorMenuAndRoutesOptions) {
     IFrameView,
   };
 
-  return await generateMenusAndRoutes(preferences.app.accessMode, {
+  return await generateAccessible(preferences.app.accessMode, {
     ...options,
     fetchMenuListAsync: async () => {
       message.loading({
diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index 4b2a5fe5..d04c4323 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -3,8 +3,8 @@
     "demos": {
       "title": "Demos",
       "access": {
-        "frontendControl": "Frontend Control",
-        "backendControl": "Backend Control",
+        "frontendPermissions": "Frontend Permissions",
+        "backendPermissions": "Backend Permissions",
         "pageAccess": "Page Access",
         "buttonControl": "Button Control",
         "menuVisible403": "Menu Visible(403)",
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index 1d4016c0..040d467d 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -3,8 +3,8 @@
     "demos": {
       "title": "演示",
       "access": {
-        "frontendControl": "前端控制",
-        "backendControl": "后端控制",
+        "frontendPermissions": "前端权限",
+        "backendPermissions": "后端权限",
         "pageAccess": "页面访问",
         "buttonControl": "按钮控制",
         "menuVisible403": "菜单可见(403)",
diff --git a/apps/web-antd/src/router/routes/modules/demos.ts b/apps/web-antd/src/router/routes/modules/demos.ts
index 4d8c0e81..22409893 100644
--- a/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/apps/web-antd/src/router/routes/modules/demos.ts
@@ -19,7 +19,7 @@ const routes: RouteRecordRaw[] = [
       {
         meta: {
           icon: 'mdi:shield-key-outline',
-          title: $t('page.demos.access.frontendControl'),
+          title: $t('page.demos.access.frontendPermissions'),
         },
         name: 'Access',
         path: 'access',
diff --git a/apps/web-antd/src/views/dashboard/analytics/index.vue b/apps/web-antd/src/views/dashboard/analytics/index.vue
index b088219d..72025254 100644
--- a/apps/web-antd/src/views/dashboard/analytics/index.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TabsItem } from '@vben/types';
+import type { TabsOption } from '@vben/types';
 import type { AnalysisOverviewItem } from '@vben/universal-ui';
 
 import {
@@ -53,7 +53,7 @@ const overviewItems: AnalysisOverviewItem[] = [
   },
 ];
 
-const chartTabs: TabsItem[] = [
+const chartTabs: TabsOption[] = [
   {
     label: '流量趋势',
     value: 'trends',
diff --git a/apps/web-antd/src/views/demos/access/button-control.vue b/apps/web-antd/src/views/demos/access/button-control.vue
index 905002b9..4251efb0 100644
--- a/apps/web-antd/src/views/demos/access/button-control.vue
+++ b/apps/web-antd/src/views/demos/access/button-control.vue
@@ -3,7 +3,7 @@ import type { LoginAndRegisterParams } from '@vben/universal-ui';
 
 import { useRouter } from 'vue-router';
 
-import { CodeAccess, useAccess } from '@vben/access';
+import { AccessControl, useAccess } from '@vben/access';
 
 import { Button } from 'ant-design-vue';
 
@@ -59,9 +59,9 @@ async function changeAccount(role: string) {
 
     <div class="card-box mt-5 p-5 font-semibold">
       <div class="mb-3">
-        <span class="text-lg">当前账号:</span>
-        <span class="text-primary mx-4">
-          {{ accessStore.userRoles }}
+        <span class="text-lg">当前角色:</span>
+        <span class="text-primary mx-4 text-lg">
+          {{ accessStore.userRoles?.[0] }}
         </span>
       </div>
 
@@ -82,21 +82,40 @@ async function changeAccount(role: string) {
     </div>
 
     <div class="card-box mt-5 p-5 font-semibold">
-      <div class="mb-3 text-lg">组件形式控制</div>
-      <CodeAccess :value="['AC_100100']">
+      <div class="mb-3 text-lg">组件形式控制 - 权限码方式</div>
+      <AccessControl :value="['AC_100100']" type="code">
         <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
-      </CodeAccess>
-      <CodeAccess :value="['AC_100030']">
+      </AccessControl>
+      <AccessControl :value="['AC_100030']" type="code">
         <Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
-      </CodeAccess>
-      <CodeAccess :value="['AC_1000001']">
+      </AccessControl>
+      <AccessControl :value="['AC_1000001']" type="code">
         <Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
-      </CodeAccess>
-      <CodeAccess :value="['AC_100100', 'AC_100010']">
+      </AccessControl>
+      <AccessControl :value="['AC_100100', 'AC_100010']" type="code">
         <Button class="mr-4">
           Super & Admin 账号可见 ["AC_100100","AC_1000001"]
         </Button>
-      </CodeAccess>
+      </AccessControl>
+    </div>
+
+    <div
+      v-if="accessMode === 'frontend'"
+      class="card-box mt-5 p-5 font-semibold"
+    >
+      <div class="mb-3 text-lg">组件形式控制 - 用户角色方式</div>
+      <AccessControl :value="['super']">
+        <Button class="mr-4"> Super 角色可见 </Button>
+      </AccessControl>
+      <AccessControl :value="['admin']">
+        <Button class="mr-4"> Admin 角色可见 </Button>
+      </AccessControl>
+      <AccessControl :value="['user']">
+        <Button class="mr-4"> User 角色可见 </Button>
+      </AccessControl>
+      <AccessControl :value="['super', 'admin']">
+        <Button class="mr-4"> Super & Admin 角色可见 </Button>
+      </AccessControl>
     </div>
 
     <div class="card-box mt-5 p-5 font-semibold">
diff --git a/apps/web-antd/src/views/demos/access/index.vue b/apps/web-antd/src/views/demos/access/index.vue
index c78dcbbd..ac96d77a 100644
--- a/apps/web-antd/src/views/demos/access/index.vue
+++ b/apps/web-antd/src/views/demos/access/index.vue
@@ -69,7 +69,9 @@ async function handleToggleAccessMode() {
 
     <div class="card-box mt-5 p-5 font-semibold">
       <span class="text-lg">当前权限模式:</span>
-      <span class="text-primary mx-4">{{ accessMode }}</span>
+      <span class="text-primary mx-4">{{
+        accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
+      }}</span>
       <Button type="primary" @click="handleToggleAccessMode">
         切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
       </Button>
@@ -77,8 +79,8 @@ async function handleToggleAccessMode() {
     <div class="card-box mt-5 p-5 font-semibold">
       <div class="mb-3">
         <span class="text-lg">当前账号:</span>
-        <span class="text-primary mx-4">
-          {{ accessStore.userRoles }}
+        <span class="text-primary mx-4 text-lg">
+          {{ accessStore.userRoles?.[0] }}
         </span>
       </div>
 
diff --git a/apps/web-antd/src/views/demos/features/login-expired/index.vue b/apps/web-antd/src/views/demos/features/login-expired/index.vue
index 2421a959..6ac0b777 100644
--- a/apps/web-antd/src/views/demos/features/login-expired/index.vue
+++ b/apps/web-antd/src/views/demos/features/login-expired/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LoginExpiredModeType } from '@vben-core/preferences';
+import type { LoginExpiredModeType } from '@vben/types';
 
 import { preferences, updatePreferences } from '@vben-core/preferences';
 
diff --git a/package.json b/package.json
index 8d4bb8bd..773e8723 100644
--- a/package.json
+++ b/package.json
@@ -88,12 +88,6 @@
       "clsx": "^2.1.1",
       "vue": "^3.4.31"
     },
-    "peerDependencyRules": {
-      "allowedVersions": {
-        "eslint": "*",
-        " @typescript-eslint/eslint-plugin": "*"
-      }
-    },
     "neverBuiltDependencies": [
       "canvas",
       "node-gyp",
diff --git a/packages/@core/forward/helpers/package.json b/packages/@core/forward/helpers/package.json
index 07380e58..42ddabc7 100644
--- a/packages/@core/forward/helpers/package.json
+++ b/packages/@core/forward/helpers/package.json
@@ -36,6 +36,7 @@
     }
   },
   "dependencies": {
+    "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "vue-router": "^4.4.0"
   }
diff --git a/packages/business/access/src/generate-menu-and-routes/generate-menus.test.ts b/packages/@core/forward/helpers/src/generate-menus.test.ts
similarity index 100%
rename from packages/business/access/src/generate-menu-and-routes/generate-menus.test.ts
rename to packages/@core/forward/helpers/src/generate-menus.test.ts
diff --git a/packages/business/access/src/generate-menu-and-routes/generate-menus.ts b/packages/@core/forward/helpers/src/generate-menus.ts
similarity index 96%
rename from packages/business/access/src/generate-menu-and-routes/generate-menus.ts
rename to packages/@core/forward/helpers/src/generate-menus.ts
index 9ec9a792..7fb3aeac 100644
--- a/packages/business/access/src/generate-menu-and-routes/generate-menus.ts
+++ b/packages/@core/forward/helpers/src/generate-menus.ts
@@ -1,4 +1,4 @@
-import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben/types';
+import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
 import type { RouteRecordRaw, Router } from 'vue-router';
 
 import { mapTree } from '@vben-core/toolkit';
diff --git a/packages/business/access/src/generate-menu-and-routes/generate-routes-backend.ts b/packages/@core/forward/helpers/src/generate-routes-backend.ts
similarity index 86%
rename from packages/business/access/src/generate-menu-and-routes/generate-routes-backend.ts
rename to packages/@core/forward/helpers/src/generate-routes-backend.ts
index f6b5514e..b29e135f 100644
--- a/packages/business/access/src/generate-menu-and-routes/generate-routes-backend.ts
+++ b/packages/@core/forward/helpers/src/generate-routes-backend.ts
@@ -1,19 +1,17 @@
-import type {
-  ComponentRecordType,
-  RouteRecordStringComponent,
-} from '@vben/types';
 import type { RouteRecordRaw } from 'vue-router';
 
-import type { GeneratorMenuAndRoutesOptions } from '../types';
-
-import { $t } from '@vben-core/locales';
 import { mapTree } from '@vben-core/toolkit';
+import {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+  RouteRecordStringComponent,
+} from '@vben-core/typings';
 
 /**
  * 动态生成路由 - 后端方式
  */
 async function generateRoutesByBackend(
-  options: GeneratorMenuAndRoutesOptions,
+  options: GenerateMenuAndRoutesOptions,
 ): Promise<RouteRecordRaw[]> {
   const { fetchMenuListAsync, layoutMap = {}, pageMap = {} } = options;
 
@@ -65,11 +63,6 @@ function convertRoutes(
         ];
     }
 
-    // 国际化转化
-    if (route.meta?.title) {
-      route.meta.title = $t(route.meta.title);
-    }
-
     return route;
   });
 }
@@ -83,6 +76,7 @@ function normalizeViewPath(path: string): string {
     ? normalizedPath
     : `/${normalizedPath}`;
 
+  // TODO: 这里耦合了vben-admin的目录结构
   return viewPath.replace(/^\/views/, '');
 }
 export { generateRoutesByBackend };
diff --git a/packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.test.ts b/packages/@core/forward/helpers/src/generate-routes-frontend.test.ts
similarity index 100%
rename from packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.test.ts
rename to packages/@core/forward/helpers/src/generate-routes-frontend.test.ts
diff --git a/packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.ts b/packages/@core/forward/helpers/src/generate-routes-frontend.ts
similarity index 99%
rename from packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.ts
rename to packages/@core/forward/helpers/src/generate-routes-frontend.ts
index 328f0081..5c471f2a 100644
--- a/packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.ts
+++ b/packages/@core/forward/helpers/src/generate-routes-frontend.ts
@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import { filterTree, mapTree } from '@vben-core/toolkit';
+
 /**
  * 动态生成路由 - 前端方式
  */
diff --git a/packages/@core/forward/helpers/src/index.ts b/packages/@core/forward/helpers/src/index.ts
index c6e0e532..cdf82f34 100644
--- a/packages/@core/forward/helpers/src/index.ts
+++ b/packages/@core/forward/helpers/src/index.ts
@@ -1,2 +1,5 @@
 export * from './find-menu-by-path';
+export * from './generate-menus';
+export * from './generate-routes-backend';
+export * from './generate-routes-frontend';
 export * from './merge-route-modules';
diff --git a/packages/@core/forward/preferences/package.json b/packages/@core/forward/preferences/package.json
index f8b9604b..f27cf092 100644
--- a/packages/@core/forward/preferences/package.json
+++ b/packages/@core/forward/preferences/package.json
@@ -29,8 +29,6 @@
     }
   },
   "dependencies": {
-    "@vben-core/cache": "workspace:*",
-    "@vben-core/colorful": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
diff --git a/packages/@core/forward/preferences/src/constants.ts b/packages/@core/forward/preferences/src/constants.ts
index 9c2753fa..e86783cb 100644
--- a/packages/@core/forward/preferences/src/constants.ts
+++ b/packages/@core/forward/preferences/src/constants.ts
@@ -1,6 +1,7 @@
-import type { BuiltinThemeType } from '@vben-core/typings';
-
-import type { SupportedLanguagesType } from './types';
+import type {
+  BuiltinThemeType,
+  SupportedLanguagesType,
+} from '@vben-core/typings';
 
 interface Language {
   key: SupportedLanguagesType;
diff --git a/packages/@core/forward/preferences/src/preferences.test.ts b/packages/@core/forward/preferences/src/preferences.test.ts
index b2628808..5b003dca 100644
--- a/packages/@core/forward/preferences/src/preferences.test.ts
+++ b/packages/@core/forward/preferences/src/preferences.test.ts
@@ -5,17 +5,6 @@ import { PreferenceManager, isDarkTheme } from './preferences';
 
 describe('preferences', () => {
   let preferenceManager: PreferenceManager;
-  vi.mock('@vben-core/cache', () => {
-    return {
-      StorageManager: vi.fn().mockImplementation(() => {
-        return {
-          getItem: vi.fn(),
-          removeItem: vi.fn(),
-          setItem: vi.fn(),
-        };
-      }),
-    };
-  });
 
   // 模拟 window.matchMedia 方法
   vi.stubGlobal(
diff --git a/packages/@core/forward/preferences/src/preferences.ts b/packages/@core/forward/preferences/src/preferences.ts
index 8346ce8d..57e474d1 100644
--- a/packages/@core/forward/preferences/src/preferences.ts
+++ b/packages/@core/forward/preferences/src/preferences.ts
@@ -4,9 +4,12 @@ import type { Preferences } from './types';
 
 import { markRaw, reactive, readonly, watch } from 'vue';
 
-import { StorageManager } from '@vben-core/cache';
-import { generatorColorVariables } from '@vben-core/colorful';
-import { merge, updateCSSVariables } from '@vben-core/toolkit';
+import {
+  StorageManager,
+  generatorColorVariables,
+  merge,
+  updateCSSVariables,
+} from '@vben-core/toolkit';
 
 import {
   breakpointsTailwind,
diff --git a/packages/@core/forward/preferences/src/types.ts b/packages/@core/forward/preferences/src/types.ts
index 3638cac7..872966ab 100644
--- a/packages/@core/forward/preferences/src/types.ts
+++ b/packages/@core/forward/preferences/src/types.ts
@@ -1,28 +1,18 @@
 import type {
+  AccessModeType,
+  AuthPageLayoutType,
+  BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
   LayoutHeaderModeType,
   LayoutType,
+  LoginExpiredModeType,
+  NavigationStyleType,
+  PageTransitionType,
   SupportedLanguagesType,
   ThemeModeType,
 } from '@vben-core/typings';
 
-/**
- * 登录过期模式
- * 'modal' 弹窗模式 | 'page' 页面模式
- */
-type LoginExpiredModeType = 'modal' | 'page';
-
-type BreadcrumbStyleType = 'background' | 'normal';
-
-type AccessModeType = 'allow-all' | 'backend' | 'frontend';
-
-type NavigationStyleType = 'plain' | 'rounded';
-
-type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
-
-type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
-
 interface AppPreferences {
   /** 权限模式 */
   accessMode: AccessModeType;
@@ -236,28 +226,17 @@ interface Preferences {
 type PreferencesKeys = keyof Preferences;
 
 export type {
-  AccessModeType,
   AppPreferences,
-  AuthPageLayoutType,
   BreadcrumbPreferences,
-  BreadcrumbStyleType,
-  ContentCompactType,
   FooterPreferences,
   HeaderPreferences,
-  LayoutHeaderModeType,
-  LayoutType,
-  LoginExpiredModeType,
   LogoPreferences,
   NavigationPreferences,
-  NavigationStyleType,
-  PageTransitionType,
   Preferences,
   PreferencesKeys,
   ShortcutKeyPreferences,
   SidebarPreferences,
-  SupportedLanguagesType,
   TabbarPreferences,
-  ThemeModeType,
   ThemePreferences,
   TransitionPreferences,
   WidgetPreferences,
diff --git a/packages/@core/shared/cache/build.config.ts b/packages/@core/shared/cache/build.config.ts
deleted file mode 100644
index 97e572c5..00000000
--- a/packages/@core/shared/cache/build.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
-  clean: true,
-  declaration: true,
-  entries: ['src/index'],
-});
diff --git a/packages/@core/shared/cache/package.json b/packages/@core/shared/cache/package.json
deleted file mode 100644
index 06b5f429..00000000
--- a/packages/@core/shared/cache/package.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "name": "@vben-core/cache",
-  "version": "5.0.0",
-  "homepage": "https://github.com/vbenjs/vue-vben-admin",
-  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/cache"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm unbuild",
-    "stub": "pnpm unbuild --stub"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      }
-    }
-  },
-  "dependencies": {},
-  "devDependencies": {}
-}
diff --git a/packages/@core/shared/cache/tsconfig.json b/packages/@core/shared/cache/tsconfig.json
deleted file mode 100644
index f6860a32..00000000
--- a/packages/@core/shared/cache/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/@core/shared/colorful/build.config.ts b/packages/@core/shared/colorful/build.config.ts
deleted file mode 100644
index 97e572c5..00000000
--- a/packages/@core/shared/colorful/build.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
-  clean: true,
-  declaration: true,
-  entries: ['src/index'],
-});
diff --git a/packages/@core/shared/colorful/package.json b/packages/@core/shared/colorful/package.json
deleted file mode 100644
index 3ef525a7..00000000
--- a/packages/@core/shared/colorful/package.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "@vben-core/colorful",
-  "version": "5.0.0",
-  "homepage": "https://github.com/vbenjs/vue-vben-admin",
-  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/colorful"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm unbuild",
-    "stub": "pnpm unbuild --stub"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      }
-    }
-  },
-  "dependencies": {
-    "@ant-design/colors": "^7.1.0",
-    "@ctrl/tinycolor": "^4.1.0"
-  }
-}
diff --git a/packages/@core/shared/colorful/tsconfig.json b/packages/@core/shared/colorful/tsconfig.json
deleted file mode 100644
index f6860a32..00000000
--- a/packages/@core/shared/colorful/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/@core/shared/design-tokens/README.md b/packages/@core/shared/design-tokens/README.md
deleted file mode 100644
index 08848bc7..00000000
--- a/packages/@core/shared/design-tokens/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @vben-core/design-tokens
-
-用于维护全局所有的 css 变量，它由 vite 插件在全局注入，不需要手动引入
diff --git a/packages/@core/shared/design-tokens/package.json b/packages/@core/shared/design-tokens/package.json
deleted file mode 100644
index 4d160b15..00000000
--- a/packages/@core/shared/design-tokens/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "@vben-core/design-tokens",
-  "version": "5.0.0",
-  "homepage": "https://github.com/vbenjs/vue-vben-admin",
-  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/@vben-core/shared/design-tokens"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm vite build",
-    "dts": "vue-tsc --declaration --emitDeclarationOnly --declarationDir dist",
-    "prepublishOnly": "npm run build"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "main": "./dist/index.css",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.css"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "default": "./dist/index.mjs"
-      }
-    }
-  }
-}
diff --git a/packages/@core/shared/design-tokens/tsconfig.json b/packages/@core/shared/design-tokens/tsconfig.json
deleted file mode 100644
index f6860a32..00000000
--- a/packages/@core/shared/design-tokens/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/@core/shared/design-tokens/vite.config.mts b/packages/@core/shared/design-tokens/vite.config.mts
deleted file mode 100644
index 9a5f448e..00000000
--- a/packages/@core/shared/design-tokens/vite.config.mts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { defineConfig } from '@vben/vite-config';
-
-export default defineConfig();
diff --git a/packages/@core/shared/design-tokens/src/dark/index.css b/packages/@core/shared/design/src/design-tokens/dark/index.css
similarity index 100%
rename from packages/@core/shared/design-tokens/src/dark/index.css
rename to packages/@core/shared/design/src/design-tokens/dark/index.css
diff --git a/packages/@core/shared/design-tokens/src/default/index.css b/packages/@core/shared/design/src/design-tokens/default/index.css
similarity index 100%
rename from packages/@core/shared/design-tokens/src/default/index.css
rename to packages/@core/shared/design/src/design-tokens/default/index.css
diff --git a/packages/@core/shared/design-tokens/src/index.ts b/packages/@core/shared/design/src/design-tokens/index.ts
similarity index 100%
rename from packages/@core/shared/design-tokens/src/index.ts
rename to packages/@core/shared/design/src/design-tokens/index.ts
diff --git a/packages/@core/shared/design/src/index.ts b/packages/@core/shared/design/src/index.ts
index 92c72f83..cf0a69ef 100644
--- a/packages/@core/shared/design/src/index.ts
+++ b/packages/@core/shared/design/src/index.ts
@@ -1,5 +1,6 @@
 import './scss/index.scss';
 import './css/tailwind.css';
 import './css/nprogress.css';
+import './design-tokens';
 
 export {};
diff --git a/packages/@core/shared/toolkit/package.json b/packages/@core/shared/toolkit/package.json
index 2c32ff05..bfb64d7b 100644
--- a/packages/@core/shared/toolkit/package.json
+++ b/packages/@core/shared/toolkit/package.json
@@ -36,6 +36,8 @@
     }
   },
   "dependencies": {
+    "@ant-design/colors": "^7.1.0",
+    "@ctrl/tinycolor": "^4.1.0",
     "@vue/shared": "^3.4.31",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",
diff --git a/packages/@core/shared/cache/src/index.ts b/packages/@core/shared/toolkit/src/cache/index.ts
similarity index 100%
rename from packages/@core/shared/cache/src/index.ts
rename to packages/@core/shared/toolkit/src/cache/index.ts
diff --git a/packages/@core/shared/cache/src/storage-manager.test.ts b/packages/@core/shared/toolkit/src/cache/storage-manager.test.ts
similarity index 100%
rename from packages/@core/shared/cache/src/storage-manager.test.ts
rename to packages/@core/shared/toolkit/src/cache/storage-manager.test.ts
diff --git a/packages/@core/shared/cache/src/storage-manager.ts b/packages/@core/shared/toolkit/src/cache/storage-manager.ts
similarity index 100%
rename from packages/@core/shared/cache/src/storage-manager.ts
rename to packages/@core/shared/toolkit/src/cache/storage-manager.ts
diff --git a/packages/@core/shared/cache/src/types.ts b/packages/@core/shared/toolkit/src/cache/types.ts
similarity index 100%
rename from packages/@core/shared/cache/src/types.ts
rename to packages/@core/shared/toolkit/src/cache/types.ts
diff --git a/packages/@core/shared/colorful/src/utils.test.ts b/packages/@core/shared/toolkit/src/colorful/convert.test.ts
similarity index 99%
rename from packages/@core/shared/colorful/src/utils.test.ts
rename to packages/@core/shared/toolkit/src/colorful/convert.test.ts
index ccdc8039..886bb739 100644
--- a/packages/@core/shared/colorful/src/utils.test.ts
+++ b/packages/@core/shared/toolkit/src/colorful/convert.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { convertToHsl, convertToHslCssVar, isValidColor } from './utils';
+import { convertToHsl, convertToHslCssVar, isValidColor } from './convert';
 
 describe('color conversion functions', () => {
   it('should correctly convert color to HSL format', () => {
diff --git a/packages/@core/shared/colorful/src/utils.ts b/packages/@core/shared/toolkit/src/colorful/convert.ts
similarity index 100%
rename from packages/@core/shared/colorful/src/utils.ts
rename to packages/@core/shared/toolkit/src/colorful/convert.ts
diff --git a/packages/@core/shared/colorful/src/generator.ts b/packages/@core/shared/toolkit/src/colorful/generator.ts
similarity index 95%
rename from packages/@core/shared/colorful/src/generator.ts
rename to packages/@core/shared/toolkit/src/colorful/generator.ts
index d4ca892f..dd57f013 100644
--- a/packages/@core/shared/colorful/src/generator.ts
+++ b/packages/@core/shared/toolkit/src/colorful/generator.ts
@@ -1,6 +1,6 @@
 import { generate } from '@ant-design/colors';
 
-import { convertToHslCssVar } from './utils';
+import { convertToHslCssVar } from './convert';
 
 export * from '@ant-design/colors';
 
diff --git a/packages/@core/shared/colorful/src/index.ts b/packages/@core/shared/toolkit/src/colorful/index.ts
similarity index 51%
rename from packages/@core/shared/colorful/src/index.ts
rename to packages/@core/shared/toolkit/src/colorful/index.ts
index 8cb44f95..e1b74aa5 100644
--- a/packages/@core/shared/colorful/src/index.ts
+++ b/packages/@core/shared/toolkit/src/colorful/index.ts
@@ -1,2 +1,2 @@
+export * from './convert';
 export * from './generator';
-export * from './utils';
diff --git a/packages/@core/shared/toolkit/src/index.ts b/packages/@core/shared/toolkit/src/index.ts
index f57b2175..8d832ab6 100644
--- a/packages/@core/shared/toolkit/src/index.ts
+++ b/packages/@core/shared/toolkit/src/index.ts
@@ -1,4 +1,6 @@
+export * from './cache';
 export * from './cn';
+export * from './colorful';
 export * from './diff';
 export * from './dom';
 export * from './inference';
diff --git a/packages/@core/shared/typings/src/app.d.ts b/packages/@core/shared/typings/src/app.d.ts
index 66c30668..be2b6e9d 100644
--- a/packages/@core/shared/typings/src/app.d.ts
+++ b/packages/@core/shared/typings/src/app.d.ts
@@ -33,11 +33,33 @@ type ContentCompactType = 'compact' | 'wide';
 
 type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
 
+/**
+ * 登录过期模式
+ * 'modal' 弹窗模式 | 'page' 页面模式
+ */
+type LoginExpiredModeType = 'modal' | 'page';
+
+type BreadcrumbStyleType = 'background' | 'normal';
+
+type AccessModeType = 'allow-all' | 'backend' | 'frontend';
+
+type NavigationStyleType = 'plain' | 'rounded';
+
+type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
+
+type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
+
 export type {
+  AccessModeType,
+  AuthPageLayoutType,
+  BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
   LayoutHeaderModeType,
   LayoutType,
+  LoginExpiredModeType,
+  NavigationStyleType,
+  PageTransitionType,
   SupportedLanguagesType,
   ThemeModeType,
 };
diff --git a/packages/@core/shared/typings/src/basic.d.ts b/packages/@core/shared/typings/src/basic.d.ts
new file mode 100644
index 00000000..0c8591f5
--- /dev/null
+++ b/packages/@core/shared/typings/src/basic.d.ts
@@ -0,0 +1,33 @@
+interface BasicOption {
+  label: string;
+  value: string;
+}
+
+interface SelectOption extends BasicOption {}
+
+interface TabsOption extends BasicOption {}
+
+interface BasicUserInfo {
+  /**
+   * 头像
+   */
+  avatar: string;
+  /**
+   * 用户昵称
+   */
+  realName: string;
+  /**
+   * 用户角色
+   */
+  roles?: string[];
+  /**
+   * 用户id
+   */
+  userId: string;
+  /**
+   * 用户名
+   */
+  username: string;
+}
+
+export type { BasicOption, BasicUserInfo, SelectOption, TabsOption };
diff --git a/packages/@core/shared/typings/src/index.ts b/packages/@core/shared/typings/src/index.ts
index c46d868f..e7391f98 100644
--- a/packages/@core/shared/typings/src/index.ts
+++ b/packages/@core/shared/typings/src/index.ts
@@ -1,4 +1,5 @@
 export type * from './app';
+export * from './basic';
 export type * from './helper';
 export type * from './menu-record';
 export type * from './tabs';
diff --git a/packages/@core/shared/typings/src/vue-router.d.ts b/packages/@core/shared/typings/src/vue-router.d.ts
index dd35f2fc..1eb808d5 100644
--- a/packages/@core/shared/typings/src/vue-router.d.ts
+++ b/packages/@core/shared/typings/src/vue-router.d.ts
@@ -1,3 +1,7 @@
+import type { RouteRecordRaw, Router } from 'vue-router';
+
+import type { Component } from 'vue';
+
 interface RouteMeta {
   /**
    * 是否固定标签页
@@ -91,4 +95,27 @@ interface RouteMeta {
   title: string;
 }
 
-export type { RouteMeta };
+// 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
+type RouteRecordStringComponent<T = string> = {
+  children?: RouteRecordStringComponent<T>[];
+  component: T;
+} & Omit<RouteRecordRaw, 'children' | 'component'>;
+
+type ComponentRecordType = Record<string, () => Promise<Component>>;
+
+interface GenerateMenuAndRoutesOptions {
+  fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
+  forbiddenComponent?: RouteRecordRaw['component'];
+  layoutMap?: ComponentRecordType;
+  pageMap?: ComponentRecordType;
+  roles?: string[];
+  router: Router;
+  routes: RouteRecordRaw[];
+}
+
+export type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+  RouteMeta,
+  RouteRecordStringComponent,
+};
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 33a70f13..28d1c29f 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "@radix-icons/vue": "^1.0.0",
-    "@vben-core/colorful": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue b/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
index c75aea16..e793481a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
@@ -3,7 +3,7 @@ import type { MenuRecordBadgeRaw } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { isValidColor } from '@vben-core/colorful';
+import { isValidColor } from '@vben-core/toolkit';
 
 import BadgeDot from './menu-badge-dot.vue';
 
diff --git a/packages/business/access/package.json b/packages/business/access/package.json
index e3ec49b5..2f346b7f 100644
--- a/packages/business/access/package.json
+++ b/packages/business/access/package.json
@@ -37,14 +37,11 @@
     }
   },
   "dependencies": {
-    "@vben-core/locales": "workspace:*",
+    "@vben-core/helpers": "workspace:*",
     "@vben-core/preferences": "workspace:*",
     "@vben-core/stores": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0"
-  },
-  "devDependencies": {
-    "@vben/types": "workspace:*"
+    "@vben-core/typings": "workspace:*",
+    "vue": "^3.4.31"
   }
 }
diff --git a/packages/business/access/src/access-control.vue b/packages/business/access/src/access-control.vue
new file mode 100644
index 00000000..42b09e6a
--- /dev/null
+++ b/packages/business/access/src/access-control.vue
@@ -0,0 +1,43 @@
+<!--
+ Access control component for fine-grained access control.
+-->
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAccess } from './use-access';
+
+interface Props {
+  /**
+   * 通过什么方式来控制组件，如果是 role，则传入角色，如果是 code，则传入权限码
+   * @default 'role'
+   */
+  type?: 'code' | 'role';
+
+  /**
+   * Specified codes is visible
+   * @default []
+   */
+  value?: string[];
+}
+
+defineOptions({
+  name: 'AccessControl',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'role',
+  value: () => [],
+});
+
+const { hasAuthByCodes, hasAuthByRoles } = useAccess();
+
+const hasAuth = computed(() => {
+  const { type, value } = props;
+  return type === 'role' ? hasAuthByRoles(value) : hasAuthByCodes(value);
+});
+</script>
+
+<template>
+  <slot v-if="!value"></slot>
+  <slot v-else-if="hasAuth"></slot>
+</template>
diff --git a/packages/business/access/src/code-access.vue b/packages/business/access/src/code-access.vue
deleted file mode 100644
index 1163a42a..00000000
--- a/packages/business/access/src/code-access.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
- Access control component for fine-grained access control.
--->
-<script lang="ts" setup>
-import { useAccess } from './use-access';
-
-interface Props {
-  /**
-   * Specified codes is visible
-   * @default []
-   */
-  value?: string[];
-}
-
-defineOptions({
-  name: 'CodeAccess',
-});
-
-withDefaults(defineProps<Props>(), {
-  value: () => [],
-});
-
-const { hasAuthByCodes } = useAccess();
-</script>
-
-<template>
-  <slot v-if="!value"></slot>
-  <slot v-else-if="hasAuthByCodes(value)"></slot>
-</template>
diff --git a/packages/business/access/src/generate-menu-and-routes/index.ts b/packages/business/access/src/generate-accessible.ts
similarity index 50%
rename from packages/business/access/src/generate-menu-and-routes/index.ts
rename to packages/business/access/src/generate-accessible.ts
index bc27734f..4dc83bb3 100644
--- a/packages/business/access/src/generate-menu-and-routes/index.ts
+++ b/packages/business/access/src/generate-accessible.ts
@@ -1,17 +1,18 @@
-import type { AccessModeType } from '@vben-core/preferences';
-import type { RouteRecordRaw } from 'vue-router';
-
-import type { GeneratorMenuAndRoutesOptions } from '../types';
+import type {
+  AccessModeType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben-core/typings';
 
+import {
+  generateMenus,
+  generateRoutesByBackend,
+  generateRoutesByFrontend,
+} from '@vben-core/helpers';
 import { cloneDepp } from '@vben-core/toolkit';
 
-import { generateMenus } from './generate-menus';
-import { generateRoutesByBackend } from './generate-routes-backend';
-import { generateRoutesByFrontend } from './generate-routes-frontend';
-
-async function generateMenusAndRoutes(
+async function generateAccessible(
   mode: AccessModeType,
-  options: GeneratorMenuAndRoutesOptions,
+  options: GenerateMenuAndRoutesOptions,
 ) {
   const { router } = options;
 
@@ -25,7 +26,7 @@ async function generateMenusAndRoutes(
   });
 
   // 生成菜单
-  const accessibleMenus = await generateMenus1(mode, accessibleRoutes, options);
+  const accessibleMenus = await generateMenus(accessibleRoutes, options.router);
 
   return { accessibleMenus, accessibleRoutes };
 }
@@ -36,7 +37,7 @@ async function generateMenusAndRoutes(
  */
 async function generateRoutes(
   mode: AccessModeType,
-  options: GeneratorMenuAndRoutesOptions,
+  options: GenerateMenuAndRoutesOptions,
 ) {
   const { forbiddenComponent, roles, routes } = options;
 
@@ -61,22 +62,4 @@ async function generateRoutes(
   }
 }
 
-async function generateMenus1(
-  mode: AccessModeType,
-  routes: RouteRecordRaw[],
-  options: GeneratorMenuAndRoutesOptions,
-) {
-  const { router } = options;
-  switch (mode) {
-    case 'allow-all':
-    case 'frontend':
-    case 'backend': {
-      return await generateMenus(routes, router);
-    }
-    default: {
-      return [];
-    }
-  }
-}
-
-export { generateMenusAndRoutes };
+export { generateAccessible };
diff --git a/packages/business/access/src/index.ts b/packages/business/access/src/index.ts
index 7301aeb5..1f857fc9 100644
--- a/packages/business/access/src/index.ts
+++ b/packages/business/access/src/index.ts
@@ -1,5 +1,3 @@
-export { default as CodeAccess } from './code-access.vue';
-export * from './generate-menu-and-routes';
-export { default as RoleAccess } from './role-access.vue';
-export type * from './types';
+export { default as AccessControl } from './access-control.vue';
+export * from './generate-accessible';
 export * from './use-access';
diff --git a/packages/business/access/src/role-access.vue b/packages/business/access/src/role-access.vue
deleted file mode 100644
index 4b833242..00000000
--- a/packages/business/access/src/role-access.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
- Access control component for fine-grained access control.
--->
-<script lang="ts" setup>
-import { useAccess } from './use-access';
-
-interface Props {
-  /**
-   * Specified role is visible
-   * @default []
-   */
-  value?: string[];
-}
-
-defineOptions({
-  name: 'RoleAccess',
-});
-
-withDefaults(defineProps<Props>(), {
-  value: undefined,
-});
-
-const { hasAuthByRoles } = useAccess();
-</script>
-
-<template>
-  <slot v-if="!value"></slot>
-  <slot v-else-if="hasAuthByRoles(value)"></slot>
-</template>
diff --git a/packages/business/access/src/types.ts b/packages/business/access/src/types.ts
deleted file mode 100644
index 9030910c..00000000
--- a/packages/business/access/src/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type {
-  ComponentRecordType,
-  RouteRecordStringComponent,
-} from '@vben/types';
-import type { RouteRecordRaw, Router } from 'vue-router';
-
-interface GeneratorMenuAndRoutesOptions {
-  fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
-  forbiddenComponent?: RouteRecordRaw['component'];
-  layoutMap?: ComponentRecordType;
-  pageMap?: ComponentRecordType;
-  roles?: string[];
-  router: Router;
-  routes: RouteRecordRaw[];
-}
-
-export type { GeneratorMenuAndRoutesOptions };
diff --git a/packages/business/access/tsconfig.json b/packages/business/access/tsconfig.json
index b5f44daf..ce1a891f 100644
--- a/packages/business/access/tsconfig.json
+++ b/packages/business/access/tsconfig.json
@@ -1,9 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@vben/tsconfig/web.json",
-  "compilerOptions": {
-    "types": ["@vben/types/global"]
-  },
   "include": ["src"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/business/layouts/package.json b/packages/business/layouts/package.json
index 1d8eb241..ddae48d8 100644
--- a/packages/business/layouts/package.json
+++ b/packages/business/layouts/package.json
@@ -37,7 +37,6 @@
     }
   },
   "dependencies": {
-    "@vben-core/colorful": "workspace:*",
     "@vben-core/helpers": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/layout-ui": "workspace:*",
@@ -48,12 +47,9 @@
     "@vben-core/stores": "workspace:*",
     "@vben-core/tabs-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
+    "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "vue": "^3.4.31",
     "vue-router": "^4.4.0"
-  },
-  "devDependencies": {
-    "@vben-core/typings": "workspace:*",
-    "@vben/types": "workspace:*"
   }
 }
diff --git a/packages/business/layouts/src/basic/tabbar/use-tabs.ts b/packages/business/layouts/src/basic/tabbar/use-tabs.ts
index 4823e26f..2948349f 100644
--- a/packages/business/layouts/src/basic/tabbar/use-tabs.ts
+++ b/packages/business/layouts/src/basic/tabbar/use-tabs.ts
@@ -126,6 +126,19 @@ function useTabs() {
       disabled || !isCurrentTab || tabs.length - affixTabs.length <= 1;
 
     const menus: IContextMenuItem[] = [
+      {
+        handler: async () => {
+          if (!contentIsMaximize.value) {
+            await router.push(tab.fullPath);
+          }
+          updateContentScreen(!contentIsMaximize.value);
+        },
+        icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
+        key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
+        text: contentIsMaximize.value
+          ? $t('preferences.tabbar.contextMenu.restoreMaximize')
+          : $t('preferences.tabbar.contextMenu.maximize'),
+      },
       {
         disabled: !isCurrentTab,
         handler: async () => {
@@ -166,22 +179,10 @@ function useTabs() {
         },
         icon: IcRoundTableView,
         key: 'open-in-new-window',
+        separator: true,
         text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
       },
-      {
-        handler: async () => {
-          if (!contentIsMaximize.value) {
-            await router.push(tab.fullPath);
-          }
-          updateContentScreen(!contentIsMaximize.value);
-        },
-        icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
-        key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
-        separator: true,
-        text: contentIsMaximize.value
-          ? $t('preferences.tabbar.contextMenu.restoreMaximize')
-          : $t('preferences.tabbar.contextMenu.maximize'),
-      },
+
       {
         disabled: closeLeftDisabled,
         handler: async () => {
diff --git a/packages/business/layouts/src/widgets/breadcrumb.vue b/packages/business/layouts/src/widgets/breadcrumb.vue
index 2d570afa..62f78ce0 100644
--- a/packages/business/layouts/src/widgets/breadcrumb.vue
+++ b/packages/business/layouts/src/widgets/breadcrumb.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BreadcrumbStyleType } from '@vben-core/preferences';
 import type { IBreadcrumb } from '@vben-core/shadcn-ui';
+import type { BreadcrumbStyleType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
diff --git a/packages/business/layouts/src/widgets/color-toggle.vue b/packages/business/layouts/src/widgets/color-toggle.vue
index b147cca0..00a1713b 100644
--- a/packages/business/layouts/src/widgets/color-toggle.vue
+++ b/packages/business/layouts/src/widgets/color-toggle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BuiltinThemeType } from '@vben/types';
+import type { BuiltinThemeType } from '@vben-core/typings';
 
 import { IcRoundColorLens } from '@vben-core/iconify';
 import {
diff --git a/packages/business/layouts/src/widgets/global-search/global-search.vue b/packages/business/layouts/src/widgets/global-search/global-search.vue
index d0c68cc6..7356f9ab 100644
--- a/packages/business/layouts/src/widgets/global-search/global-search.vue
+++ b/packages/business/layouts/src/widgets/global-search/global-search.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MenuRecordRaw } from '@vben/types';
+import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
diff --git a/packages/business/layouts/src/widgets/global-search/search-panel.vue b/packages/business/layouts/src/widgets/global-search/search-panel.vue
index da0f9d89..45e6f725 100644
--- a/packages/business/layouts/src/widgets/global-search/search-panel.vue
+++ b/packages/business/layouts/src/widgets/global-search/search-panel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MenuRecordRaw } from '@vben/types';
+import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/packages/business/layouts/src/widgets/language-toggle.vue b/packages/business/layouts/src/widgets/language-toggle.vue
index 3646c312..ed026665 100644
--- a/packages/business/layouts/src/widgets/language-toggle.vue
+++ b/packages/business/layouts/src/widgets/language-toggle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SupportedLanguagesType } from '@vben/types';
+import type { SupportedLanguagesType } from '@vben-core/typings';
 
 import { IcBaselineLanguage } from '@vben-core/iconify';
 import { loadLocaleMessages } from '@vben-core/locales';
diff --git a/packages/business/layouts/src/widgets/layout-toggle.vue b/packages/business/layouts/src/widgets/layout-toggle.vue
index b7be708f..0371096d 100644
--- a/packages/business/layouts/src/widgets/layout-toggle.vue
+++ b/packages/business/layouts/src/widgets/layout-toggle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AuthPageLayoutType } from '@vben-core/preferences';
 import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
+import type { AuthPageLayoutType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/general/general.vue b/packages/business/layouts/src/widgets/preferences/blocks/general/general.vue
index 1e3e3572..d463850a 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/general/general.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/general/general.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { $t } from '@vben-core/locales';
 import { SUPPORT_LANGUAGES } from '@vben-core/preferences';
@@ -14,7 +14,7 @@ defineOptions({
 const appLocale = defineModel<string>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
 
-const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
+const localeItems: SelectOption[] = SUPPORT_LANGUAGES.map((item) => ({
   label: item.text,
   value: item.key,
 }));
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/input-item.vue b/packages/business/layouts/src/widgets/preferences/blocks/input-item.vue
index 5f21943f..ab35e968 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/input-item.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/input-item.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
@@ -13,7 +13,7 @@ defineOptions({
 withDefaults(
   defineProps<{
     disabled?: boolean;
-    items?: SelectListItem[];
+    items?: SelectOption[];
     placeholder?: string;
   }>(),
   {
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue b/packages/business/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue
index 0e8c057f..10c94727 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
@@ -20,7 +20,7 @@ const breadcrumbStyleType = defineModel<string>('breadcrumbStyleType');
 const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
 const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
 
-const typeItems: SelectListItem[] = [
+const typeItems: SelectOption[] = [
   { label: $t('preferences.normal'), value: 'normal' },
   { label: $t('preferences.breadcrumb.background'), value: 'background' },
 ];
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/layout/header.vue b/packages/business/layouts/src/widgets/preferences/blocks/layout/header.vue
index 3b0a60f8..877ffd8e 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/header.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/header.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
+import type { LayoutHeaderModeType, SelectOption } from '@vben-core/typings';
 
 import { $t } from '@vben-core/locales';
 
@@ -15,7 +15,7 @@ defineProps<{ disabled: boolean }>();
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 
-const localeItems: SelectListItem[] = [
+const localeItems: SelectOption[] = [
   {
     label: $t('preferences.header.modeStatic'),
     value: 'static',
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/layout/layout.vue b/packages/business/layouts/src/widgets/preferences/blocks/layout/layout.vue
index f747d964..2f07ebf5 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/layout.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/layout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LayoutType } from '@vben/types';
+import type { LayoutType } from '@vben-core/typings';
 
 import { type Component, computed } from 'vue';
 
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/layout/navigation.vue b/packages/business/layouts/src/widgets/preferences/blocks/layout/navigation.vue
index f4cfb1c3..b028dabe 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/navigation.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/navigation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { $t } from '@vben-core/locales';
 
@@ -16,7 +16,7 @@ const navigationStyleType = defineModel<string>('navigationStyleType');
 const navigationSplit = defineModel<boolean>('navigationSplit');
 const navigationAccordion = defineModel<boolean>('navigationAccordion');
 
-const stylesItems: SelectListItem[] = [
+const stylesItems: SelectOption[] = [
   { label: $t('preferences.rounded'), value: 'rounded' },
   { label: $t('preferences.plain'), value: 'plain' },
 ];
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/number-field-item.vue b/packages/business/layouts/src/widgets/preferences/blocks/number-field-item.vue
index 9529a31e..317f2eba 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/number-field-item.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/number-field-item.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
@@ -20,7 +20,7 @@ defineOptions({
 withDefaults(
   defineProps<{
     disabled?: boolean;
-    items?: SelectListItem[];
+    items?: SelectOption[];
     placeholder?: string;
   }>(),
   {
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/select-item.vue b/packages/business/layouts/src/widgets/preferences/blocks/select-item.vue
index a946dd7d..46e65056 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/select-item.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/select-item.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
@@ -20,7 +20,7 @@ defineOptions({
 withDefaults(
   defineProps<{
     disabled?: boolean;
-    items?: SelectListItem[];
+    items?: SelectOption[];
     placeholder?: string;
   }>(),
   {
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/theme/builtin.vue b/packages/business/layouts/src/widgets/preferences/blocks/theme/builtin.vue
index a8734b48..b3946a1e 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { BuiltinThemeType } from '@vben/types';
+import type { BuiltinThemeType } from '@vben-core/typings';
 
 import { computed, ref } from 'vue';
 
-import { TinyColor, convertToHsl } from '@vben-core/colorful';
 import { MdiEditBoxOutline } from '@vben-core/iconify';
 import { $t } from '@vben-core/locales';
 import {
   BUILT_IN_THEME_PRESETS,
   type BuiltinThemePreset,
 } from '@vben-core/preferences';
+import { TinyColor, convertToHsl } from '@vben-core/toolkit';
 
 defineOptions({
   name: 'PreferenceBuiltinTheme',
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/theme/theme.vue b/packages/business/layouts/src/widgets/preferences/blocks/theme/theme.vue
index b3999a4d..358483df 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/theme/theme.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/theme/theme.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ThemeModeType } from '@vben-core/preferences';
+import type { ThemeModeType } from '@vben-core/typings';
 
 import type { Component } from 'vue';
 
diff --git a/packages/business/layouts/src/widgets/preferences/blocks/toggle-item.vue b/packages/business/layouts/src/widgets/preferences/blocks/toggle-item.vue
index d0209e8f..96414e80 100644
--- a/packages/business/layouts/src/widgets/preferences/blocks/toggle-item.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/toggle-item.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
 
@@ -7,7 +7,7 @@ defineOptions({
   name: 'PreferenceToggleItem',
 });
 
-withDefaults(defineProps<{ disabled?: boolean; items: SelectListItem[] }>(), {
+withDefaults(defineProps<{ disabled?: boolean; items: SelectOption[] }>(), {
   disabled: false,
   items: () => [],
 });
diff --git a/packages/business/layouts/src/widgets/preferences/preferences-sheet.vue b/packages/business/layouts/src/widgets/preferences/preferences-sheet.vue
index 9a29de27..691ab679 100644
--- a/packages/business/layouts/src/widgets/preferences/preferences-sheet.vue
+++ b/packages/business/layouts/src/widgets/preferences/preferences-sheet.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import type { SegmentedItem } from '@vben-core/shadcn-ui';
 import type {
+  BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
   LayoutHeaderModeType,
   LayoutType,
+  NavigationStyleType,
   SupportedLanguagesType,
   ThemeModeType,
-} from '@vben/types';
-import type {
-  BreadcrumbStyleType,
-  NavigationStyleType,
-} from '@vben-core/preferences';
-import type { SegmentedItem } from '@vben-core/shadcn-ui';
+} from '@vben-core/typings';
 
 import { computed, ref } from 'vue';
 
diff --git a/packages/business/layouts/src/widgets/preferences/preferences.vue b/packages/business/layouts/src/widgets/preferences/preferences.vue
index 94e961ff..4d8b9603 100644
--- a/packages/business/layouts/src/widgets/preferences/preferences.vue
+++ b/packages/business/layouts/src/widgets/preferences/preferences.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
+import { loadLocaleMessages } from '@vben-core/locales';
 import { preferences, updatePreferences } from '@vben-core/preferences';
 import { capitalizeFirstLetter } from '@vben-core/toolkit';
 
@@ -29,8 +30,14 @@ const listen = computed(() => {
   for (const [key, value] of Object.entries(preferences)) {
     if (typeof value === 'object') {
       for (const subKey of Object.keys(value)) {
-        result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (val: any) =>
+        result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (
+          val: any,
+        ) => {
           updatePreferences({ [key]: { [subKey]: val } });
+          if (key === 'app' && subKey === 'locale') {
+            loadLocaleMessages(val);
+          }
+        };
       }
     } else {
       result[key] = value;
diff --git a/packages/business/layouts/src/widgets/theme-toggle/theme-toggle.vue b/packages/business/layouts/src/widgets/theme-toggle/theme-toggle.vue
index 51c214f3..64d453a2 100644
--- a/packages/business/layouts/src/widgets/theme-toggle/theme-toggle.vue
+++ b/packages/business/layouts/src/widgets/theme-toggle/theme-toggle.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { ThemeModeType } from '@vben-core/typings';
+
 import {
   IcRoundMotionPhotosAuto,
   IcRoundWbSunny,
@@ -6,7 +8,6 @@ import {
 } from '@vben-core/iconify';
 import { $t } from '@vben-core/locales';
 import {
-  type ThemeModeType,
   preferences,
   updatePreferences,
   usePreferences,
diff --git a/packages/business/layouts/src/widgets/user-dropdown/user-dropdown.vue b/packages/business/layouts/src/widgets/user-dropdown/user-dropdown.vue
index b171d53b..fafbe725 100644
--- a/packages/business/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/business/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AnyFunction } from '@vben/types';
+import type { AnyFunction } from '@vben-core/typings';
 
 import type { Component } from 'vue';
 import { computed, ref } from 'vue';
diff --git a/packages/business/universal-ui/src/dashboard/analysis/analysis-charts-tabs.vue b/packages/business/universal-ui/src/dashboard/analysis/analysis-charts-tabs.vue
index dc4da659..9ec6707e 100644
--- a/packages/business/universal-ui/src/dashboard/analysis/analysis-charts-tabs.vue
+++ b/packages/business/universal-ui/src/dashboard/analysis/analysis-charts-tabs.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { TabsItem } from '@vben/types';
+import type { TabsOption } from '@vben/types';
 
 import { computed } from 'vue';
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
 
 interface Props {
-  tabs: TabsItem[];
+  tabs: TabsOption[];
 }
 
 defineOptions({
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 25d78931..638e903d 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -42,12 +42,7 @@
       }
     }
   },
-  "peerDependencies": {
-    "@vben-core/design": "workspace:*",
-    "@vben-core/design-tokens": "workspace:*"
-  },
   "dependencies": {
-    "@vben-core/design": "workspace:*",
-    "@vben-core/design-tokens": "workspace:*"
+    "@vben-core/design": "workspace:*"
   }
 }
diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts
index 9cc38ffd..b375456c 100644
--- a/packages/styles/src/index.ts
+++ b/packages/styles/src/index.ts
@@ -1,2 +1 @@
 import '@vben-core/design';
-import '@vben-core/design-tokens';
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 4057e932..1e266c47 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1,4 +1,2 @@
-export type * from './router';
-export type * from './ui';
 export type * from './user';
 export type * from '@vben-core/typings';
diff --git a/packages/types/src/router.ts b/packages/types/src/router.ts
deleted file mode 100644
index 9b9b0923..00000000
--- a/packages/types/src/router.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import type { Component } from 'vue';
-
-// 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
-type RouteRecordStringComponent<T = string> = {
-  children?: RouteRecordStringComponent<T>[];
-  component: T;
-} & Omit<RouteRecordRaw, 'children' | 'component'>;
-
-type ComponentRecordType = Record<string, () => Promise<Component>>;
-
-export type { ComponentRecordType, RouteRecordStringComponent };
diff --git a/packages/types/src/ui.d.ts b/packages/types/src/ui.d.ts
deleted file mode 100644
index 7ce62990..00000000
--- a/packages/types/src/ui.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-interface SelectListItem {
-  label: string;
-  value: string;
-}
-
-interface TabsItem {
-  label: string;
-  value: string;
-}
-
-export type { SelectListItem, TabsItem };
diff --git a/packages/types/src/user.d.ts b/packages/types/src/user.d.ts
index 7f093353..44dc5b4a 100644
--- a/packages/types/src/user.d.ts
+++ b/packages/types/src/user.d.ts
@@ -1,9 +1,7 @@
+import type { BasicUserInfo } from '@vben-core/typings';
+
 /** 用户信息 */
-interface UserInfo {
-  /**
-   * 头像
-   */
-  avatar: string;
+interface UserInfo extends BasicUserInfo {
   /**
    * 用户描述
    */
@@ -12,26 +10,11 @@ interface UserInfo {
    * 首页地址
    */
   homePath: string;
-  /**
-   * 用户昵称
-   */
-  realName: string;
-  /**
-   * 用户角色信息
-   */
-  roles: string[];
+
   /**
    * accessToken
    */
   token: string;
-  /**
-   * 用户id
-   */
-  userId: string;
-  /**
-   * 用户名
-   */
-  username: string;
 }
 
 export type { UserInfo };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0cfd99a..77314fbd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -559,6 +559,9 @@ importers:
 
   packages/@core/forward/helpers:
     dependencies:
+      '@vben-core/toolkit':
+        specifier: workspace:*
+        version: link:../../shared/toolkit
       '@vben-core/typings':
         specifier: workspace:*
         version: link:../../shared/typings
@@ -568,12 +571,6 @@ importers:
 
   packages/@core/forward/preferences:
     dependencies:
-      '@vben-core/cache':
-        specifier: workspace:*
-        version: link:../../shared/cache
-      '@vben-core/colorful':
-        specifier: workspace:*
-        version: link:../../shared/colorful
       '@vben-core/toolkit':
         specifier: workspace:*
         version: link:../../shared/toolkit
@@ -642,25 +639,12 @@ importers:
         specifier: ^9.13.1
         version: 9.13.1(vue@3.4.31(typescript@5.5.3))
 
-  packages/@core/shared/cache: {}
-
-  packages/@core/shared/colorful:
-    dependencies:
-      '@ant-design/colors':
-        specifier: ^7.1.0
-        version: 7.1.0
-      '@ctrl/tinycolor':
-        specifier: ^4.1.0
-        version: 4.1.0
-
   packages/@core/shared/design:
     dependencies:
       modern-normalize:
         specifier: ^2.0.0
         version: 2.0.0
 
-  packages/@core/shared/design-tokens: {}
-
   packages/@core/shared/iconify:
     dependencies:
       '@iconify/vue':
@@ -672,6 +656,12 @@ importers:
 
   packages/@core/shared/toolkit:
     dependencies:
+      '@ant-design/colors':
+        specifier: ^7.1.0
+        version: 7.1.0
+      '@ctrl/tinycolor':
+        specifier: ^4.1.0
+        version: 4.1.0
       '@vue/shared':
         specifier: ^3.4.31
         version: 3.4.31
@@ -757,9 +747,6 @@ importers:
       '@radix-icons/vue':
         specifier: ^1.0.0
         version: 1.0.0(vue@3.4.31(typescript@5.5.3))
-      '@vben-core/colorful':
-        specifier: workspace:*
-        version: link:../../shared/colorful
       '@vben-core/iconify':
         specifier: workspace:*
         version: link:../../shared/iconify
@@ -808,9 +795,9 @@ importers:
 
   packages/business/access:
     dependencies:
-      '@vben-core/locales':
+      '@vben-core/helpers':
         specifier: workspace:*
-        version: link:../../@core/locales
+        version: link:../../@core/forward/helpers
       '@vben-core/preferences':
         specifier: workspace:*
         version: link:../../@core/forward/preferences
@@ -820,16 +807,12 @@ importers:
       '@vben-core/toolkit':
         specifier: workspace:*
         version: link:../../@core/shared/toolkit
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../@core/shared/typings
       vue:
         specifier: ^3.4.31
         version: 3.4.31(typescript@5.5.3)
-      vue-router:
-        specifier: ^4.4.0
-        version: 4.4.0(vue@3.4.31(typescript@5.5.3))
-    devDependencies:
-      '@vben/types':
-        specifier: workspace:*
-        version: link:../../types
 
   packages/business/chart-ui:
     dependencies:
@@ -848,9 +831,6 @@ importers:
 
   packages/business/layouts:
     dependencies:
-      '@vben-core/colorful':
-        specifier: workspace:*
-        version: link:../../@core/shared/colorful
       '@vben-core/helpers':
         specifier: workspace:*
         version: link:../../@core/forward/helpers
@@ -881,6 +861,9 @@ importers:
       '@vben-core/toolkit':
         specifier: workspace:*
         version: link:../../@core/shared/toolkit
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../@core/shared/typings
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.31(typescript@5.5.3))
@@ -890,13 +873,6 @@ importers:
       vue-router:
         specifier: ^4.4.0
         version: 4.4.0(vue@3.4.31(typescript@5.5.3))
-    devDependencies:
-      '@vben-core/typings':
-        specifier: workspace:*
-        version: link:../../@core/shared/typings
-      '@vben/types':
-        specifier: workspace:*
-        version: link:../../types
 
   packages/business/universal-ui:
     dependencies:
@@ -945,9 +921,6 @@ importers:
       '@vben-core/design':
         specifier: workspace:*
         version: link:../@core/shared/design
-      '@vben-core/design-tokens':
-        specifier: workspace:*
-        version: link:../@core/shared/design-tokens
 
   packages/types:
     dependencies:
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index a415ffdc..554c019b 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -64,22 +64,10 @@
       "name": "@vben-core/locales",
       "path": "packages/@core/locales",
     },
-    {
-      "name": "@vben-core/cache",
-      "path": "packages/@core/shared/cache",
-    },
-    {
-      "name": "@vben-core/colorful",
-      "path": "packages/@core/shared/colorful",
-    },
     {
       "name": "@vben-core/design",
       "path": "packages/@core/shared/design",
     },
-    {
-      "name": "@vben-core/design-tokens",
-      "path": "packages/@core/shared/design-tokens",
-    },
     {
       "name": "@vben-core/iconify",
       "path": "packages/@core/shared/iconify",