diff --git a/apps/antd-view/package.json b/apps/antd-view/package.json
index d4175345..5479fc2f 100644
--- a/apps/antd-view/package.json
+++ b/apps/antd-view/package.json
@@ -22,14 +22,14 @@
     "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/stores": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/preference": "workspace:*",
-    "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
@@ -37,6 +37,7 @@
     "ant-design-vue": "^4.2.1",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
+    "pinia": "2.1.7",
     "vue": "3.4.27",
     "vue-router": "^4.3.2"
   },
diff --git a/apps/antd-view/src/app.vue b/apps/antd-view/src/app.vue
index b73e7fd2..692545e0 100644
--- a/apps/antd-view/src/app.vue
+++ b/apps/antd-view/src/app.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import 'dayjs/locale/zh-cn';
 
+import { preferences, usePreferences } from '@vben-core/preferences';
+
 import { GlobalProvider } from '@vben/common-ui';
-import { preference, usePreference } from '@vben/preference';
 import { ConfigProvider, theme } from 'ant-design-vue';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
@@ -12,21 +13,20 @@ defineOptions({ name: 'App' });
 
 dayjs.locale(zhCN.locale);
 
-const { isDark } = usePreference();
+const { isDark } = usePreferences();
 
 const tokenTheme = computed(() => {
-  const { colorPrimary, compact } = preference;
   const algorithms = isDark.value
     ? [theme.darkAlgorithm]
     : [theme.defaultAlgorithm];
 
   // antd 紧凑模式算法
-  if (compact) {
+  if (preferences.app.compact) {
     algorithms.push(theme.compactAlgorithm);
   }
   return {
     algorithms,
-    token: { colorPrimary },
+    token: { colorPrimary: preferences.theme.colorPrimary },
   };
 });
 </script>
diff --git a/apps/antd-view/src/bootstrap.ts b/apps/antd-view/src/bootstrap.ts
index 8917f6b7..14ebe828 100644
--- a/apps/antd-view/src/bootstrap.ts
+++ b/apps/antd-view/src/bootstrap.ts
@@ -1,8 +1,9 @@
 import '@vben/styles';
 
+import { preferences } from '@vben-core/preferences';
+
+import { setupStore } from '@/store';
 import { setupI18n } from '@vben/locales';
-import { preference } from '@vben/preference';
-import { setupStore } from '@vben/stores';
 import { createApp } from 'vue';
 
 import App from './app.vue';
@@ -12,7 +13,7 @@ async function bootstrap(namespace: string) {
   const app = createApp(App);
 
   // 国际化 i18n 配置
-  await setupI18n(app, { defaultLocale: preference.locale });
+  await setupI18n(app, { defaultLocale: preferences.app.locale });
 
   // 配置 pinia-store
   await setupStore(app, { namespace });
diff --git a/apps/antd-view/src/layouts/basic.vue b/apps/antd-view/src/layouts/basic.vue
index 996113ac..031b5395 100644
--- a/apps/antd-view/src/layouts/basic.vue
+++ b/apps/antd-view/src/layouts/basic.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import type { NotificationItem } from '@vben/common-ui';
 
+import { preferences } from '@vben-core/preferences';
+import { useAccessStore } from '@vben-core/stores';
+
 import { Notification, UserDropdown } from '@vben/common-ui';
 import { IcRoundCreditScore, MdiDriveDocument, MdiGithub } from '@vben/icons';
 import { BasicLayout } from '@vben/layouts';
 import { $t } from '@vben/locales';
-import { preference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -93,7 +94,7 @@ function handleNoticeClear() {
   <BasicLayout>
     <template #user-dropdown>
       <UserDropdown
-        :avatar="preference.defaultAvatar"
+        :avatar="preferences.app.defaultAvatar"
         :menus="menus"
         text="Vben Admin"
         description="ann.vben@gmail.com"
diff --git a/apps/antd-view/src/layouts/index.ts b/apps/antd-view/src/layouts/index.ts
index 23d79d6e..b9056f30 100644
--- a/apps/antd-view/src/layouts/index.ts
+++ b/apps/antd-view/src/layouts/index.ts
@@ -2,7 +2,7 @@ const BasicLayout = () => import('./basic.vue');
 
 const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
 
-const AuthPageLayout = () =>
-  import('@vben/layouts').then((m) => m.AuthPageLayout);
+const AuthPageLayoutType = () =>
+  import('@vben/layouts').then((m) => m.AuthPageLayoutType);
 
-export { AuthPageLayout, BasicLayout, IFrameView };
+export { AuthPageLayoutType, BasicLayout, IFrameView };
diff --git a/apps/antd-view/src/main.ts b/apps/antd-view/src/main.ts
index cd1e3b20..0841a8bb 100644
--- a/apps/antd-view/src/main.ts
+++ b/apps/antd-view/src/main.ts
@@ -1,18 +1,20 @@
-import { setupPreference } from '@vben/preference';
+import { preferencesManager } from '@vben-core/preferences';
 
-import { overridesPreference } from './preference';
+import { overridesPreferences } from './preferences';
 
 /**
  * 应用初始化完成之后再进行页面加载渲染
  */
 async function initApplication() {
+  // name用于指定项目唯一标识
+  // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
   const env = import.meta.env.PROD ? 'prod' : 'dev';
   const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${env}`;
 
   // app偏好设置初始化
-  await setupPreference({
+  await preferencesManager.initPreferences({
     namespace,
-    overrides: overridesPreference,
+    overrides: overridesPreferences,
   });
 
   import('./bootstrap').then((m) => m.bootstrap(namespace));
diff --git a/apps/antd-view/src/preference.ts b/apps/antd-view/src/preference.ts
deleted file mode 100644
index c214720e..00000000
--- a/apps/antd-view/src/preference.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { Preference } from '@vben/types';
-
-/**
- * @description 项目配置文件
- * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
- */
-export const overridesPreference: Partial<Preference> = {};
diff --git a/apps/antd-view/src/preferences.ts b/apps/antd-view/src/preferences.ts
new file mode 100644
index 00000000..415ba5b9
--- /dev/null
+++ b/apps/antd-view/src/preferences.ts
@@ -0,0 +1,11 @@
+import type { DeepPartial, Preferences } from '@vben/types';
+
+/**
+ * @description 项目配置文件
+ * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ */
+export const overridesPreferences: DeepPartial<Preferences> = {
+  app: {
+    name: 'Vben Admin',
+  },
+};
diff --git a/apps/antd-view/src/router/guard/access.ts b/apps/antd-view/src/router/guard/access.ts
index 7f56c248..dbdf6571 100644
--- a/apps/antd-view/src/router/guard/access.ts
+++ b/apps/antd-view/src/router/guard/access.ts
@@ -1,9 +1,9 @@
 import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben/types';
 
+import { useAccessStore } from '@vben-core/stores';
 import type { RouteRecordRaw, Router } from 'vue-router';
 
 import { LOGIN_PATH } from '@vben/constants';
-import { useAccessStore } from '@vben/stores';
 import { filterTree, mapTree, traverseTreeValues } from '@vben/utils';
 
 import { dynamicRoutes } from '@/router/routes';
diff --git a/apps/antd-view/src/router/guard/index.ts b/apps/antd-view/src/router/guard/index.ts
index 492dde95..9dd074fc 100644
--- a/apps/antd-view/src/router/guard/index.ts
+++ b/apps/antd-view/src/router/guard/index.ts
@@ -1,7 +1,7 @@
+import { preferences } from '@vben-core/preferences';
 import type { Router } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { preference } from '@vben/preference';
 import { startProgress, stopProgress } from '@vben/utils';
 import { useTitle } from '@vueuse/core';
 
@@ -17,7 +17,7 @@ function configCommonGuard(router: Router) {
 
   router.beforeEach(async (to) => {
     // 页面加载进度条
-    if (preference.pageProgress) {
+    if (preferences.transition.progress) {
       startProgress();
     }
     to.meta.loaded = loadedPaths.has(to.path);
@@ -29,14 +29,14 @@ function configCommonGuard(router: Router) {
     loadedPaths.add(to.path);
 
     // 关闭页面加载进度条
-    if (preference.pageProgress) {
+    if (preferences.transition.progress) {
       stopProgress();
     }
 
     // 动态修改标题
-    if (preference.dynamicTitle) {
+    if (preferences.app.dynamicTitle) {
       const { title } = to.meta;
-      useTitle(`${$t(title)} - ${preference.appName}`);
+      useTitle(`${$t(title)} - ${preferences.app.name}`);
     }
   });
 }
diff --git a/apps/antd-view/src/router/routes/_essential.ts b/apps/antd-view/src/router/routes/_essential.ts
index 9382dc23..ad7de17c 100644
--- a/apps/antd-view/src/router/routes/_essential.ts
+++ b/apps/antd-view/src/router/routes/_essential.ts
@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { AuthPageLayout } from '@/layouts';
+import { AuthPageLayoutType } from '@/layouts';
 import { Fallback } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
@@ -9,7 +9,7 @@ import Login from '@/views/_essential/authentication/login.vue';
 /** 基本路由，这些路由是必须存在的 */
 const essentialRoutes: RouteRecordRaw[] = [
   {
-    component: AuthPageLayout,
+    component: AuthPageLayoutType,
     meta: {
       title: 'Authentication',
     },
diff --git a/apps/antd-view/src/router/routes/modules/vben.ts b/apps/antd-view/src/router/routes/modules/vben.ts
index 2f5515f1..bb180a92 100644
--- a/apps/antd-view/src/router/routes/modules/vben.ts
+++ b/apps/antd-view/src/router/routes/modules/vben.ts
@@ -1,15 +1,15 @@
+import { preferences } from '@vben-core/preferences';
 import type { RouteRecordRaw } from 'vue-router';
 
 import { BasicLayout, IFrameView } from '@/layouts';
 import { VBEN_GITHUB_URL } from '@vben/constants';
 import { $t } from '@vben/locales/helper';
-import { preference } from '@vben/preference';
 
 export const vbenRoutes: RouteRecordRaw[] = [
   {
     component: BasicLayout,
     meta: {
-      icon: preference.logo,
+      icon: preferences.logo.source,
       title: 'Vben',
     },
     name: 'AboutLayout',
diff --git a/apps/antd-view/src/services/request.ts b/apps/antd-view/src/services/request.ts
index 83c3f8f6..4a1d19a9 100644
--- a/apps/antd-view/src/services/request.ts
+++ b/apps/antd-view/src/services/request.ts
@@ -2,7 +2,8 @@
  * 该文件可自行根据业务逻辑进行调整
  */
 
-import { useAccessStore } from '@vben/stores';
+import { useAccessStore } from '@vben-core/stores';
+
 import { message } from 'ant-design-vue';
 import axios, {
   AxiosError,
diff --git a/apps/antd-view/src/store/index.ts b/apps/antd-view/src/store/index.ts
new file mode 100644
index 00000000..f1fca6ae
--- /dev/null
+++ b/apps/antd-view/src/store/index.ts
@@ -0,0 +1,16 @@
+import type { InitStoreOptions } from '@vben-core/stores';
+
+import { initStore } from '@vben-core/stores';
+
+import type { App } from 'vue';
+
+/**
+ * @zh_CN 初始化pinia
+ * @param app vue app 实例
+ */
+async function setupStore(app: App, options: InitStoreOptions) {
+  const pinia = await initStore(options);
+  app.use(pinia);
+}
+
+export { setupStore };
diff --git a/apps/antd-view/src/store/modules/example.test.ts b/apps/antd-view/src/store/modules/example.test.ts
new file mode 100644
index 00000000..830c6f9d
--- /dev/null
+++ b/apps/antd-view/src/store/modules/example.test.ts
@@ -0,0 +1,24 @@
+import { createPinia, setActivePinia } from 'pinia';
+import {
+  //  beforeEach,
+  describe,
+  // expect,
+  it,
+} from 'vitest';
+
+// import { useAccessStore } from '../modules/access';
+
+describe('useCounterStore', () => {
+  it('app Name with test', () => {
+    setActivePinia(createPinia());
+    // let referenceStore = usePreferencesStore();
+
+    // beforeEach(() => {
+    //   referenceStore = usePreferencesStore();
+    // });
+
+    // expect(referenceStore.appName).toBe('vben-admin');
+    // referenceStore.setAppName('vbenAdmin');
+    // expect(referenceStore.getAppName).toBe('vbenAdmin');
+  });
+});
diff --git a/apps/antd-view/src/store/modules/example.ts b/apps/antd-view/src/store/modules/example.ts
new file mode 100644
index 00000000..6e714435
--- /dev/null
+++ b/apps/antd-view/src/store/modules/example.ts
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  actions: {
+    increment() {
+      this.count++;
+    },
+  },
+  getters: {
+    double: (state) => state.count * 2,
+  },
+  state: () => ({ count: 0 }),
+});
diff --git a/apps/antd-view/src/views/_essential/authentication/login.vue b/apps/antd-view/src/views/_essential/authentication/login.vue
index 4453fbee..5b7e7479 100644
--- a/apps/antd-view/src/views/_essential/authentication/login.vue
+++ b/apps/antd-view/src/views/_essential/authentication/login.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import type { LoginAndRegisterParams } from '@vben/common-ui';
 
+import { useAccessStore } from '@vben-core/stores';
+
 import { getUserInfo, userLogin } from '@/services';
 import { AuthenticationLogin } from '@vben/common-ui';
 import { useRequest } from '@vben/hooks';
 import { $t } from '@vben/locales';
-import { useAccessStore } from '@vben/stores';
 import { notification } from 'ant-design-vue';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/internal/lint-configs/eslint-config/package.json b/internal/lint-configs/eslint-config/package.json
index 0e1a652d..bc6b95dd 100644
--- a/internal/lint-configs/eslint-config/package.json
+++ b/internal/lint-configs/eslint-config/package.json
@@ -33,7 +33,7 @@
     "eslint-plugin-command": "^0.2.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.3.0",
+    "@eslint/js": "^9.4.0",
     "@types/eslint": "^8.56.10",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
@@ -54,6 +54,6 @@
     "eslint-plugin-vue": "^9.26.0",
     "globals": "^15.3.0",
     "jsonc-eslint-parser": "^2.4.0",
-    "vue-eslint-parser": "^9.4.2"
+    "vue-eslint-parser": "^9.4.3"
   }
 }
diff --git a/internal/lint-configs/prettier-config/package.json b/internal/lint-configs/prettier-config/package.json
index dba63e8c..9f2c499f 100644
--- a/internal/lint-configs/prettier-config/package.json
+++ b/internal/lint-configs/prettier-config/package.json
@@ -31,7 +31,7 @@
     }
   },
   "dependencies": {
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.6.0"
+    "prettier": "3.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.1"
   }
 }
diff --git a/internal/lint-configs/stylelint-config/package.json b/internal/lint-configs/stylelint-config/package.json
index 037a7cda..454e8ab7 100644
--- a/internal/lint-configs/stylelint-config/package.json
+++ b/internal/lint-configs/stylelint-config/package.json
@@ -39,7 +39,7 @@
     "postcss": "^8.4.38",
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.2.5",
+    "prettier": "3.3.0",
     "stylelint": "^16.6.1",
     "stylelint-config-recommended": "^14.0.0",
     "stylelint-config-recommended-scss": "^14.0.0",
diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json
index 39f63950..4824e0ac 100644
--- a/internal/node-utils/package.json
+++ b/internal/node-utils/package.json
@@ -36,7 +36,7 @@
     "consola": "^3.2.3",
     "find-up": "^7.0.0",
     "pkg-types": "^1.1.1",
-    "prettier": "^3.2.5",
+    "prettier": "3.3.0",
     "rimraf": "^5.0.7",
     "zx": "^7.2.3"
   }
diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json
index a949a3aa..55c7c4ce 100644
--- a/internal/vite-config/package.json
+++ b/internal/vite-config/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@types/html-minifier-terser": "^7.0.2",
     "@vben/node-utils": "workspace:*",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "dayjs": "^1.11.11",
     "dotenv": "^16.4.5",
diff --git a/package.json b/package.json
index 31dbbfdc..7d22ad1a 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@changesets/cli": "^2.27.5",
     "@ls-lint/ls-lint": "^2.2.3",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.13.0",
     "@vben/commitlint-config": "workspace:*",
     "@vben/eslint-config": "workspace:*",
     "@vben/lint-staged-config": "workspace:*",
diff --git a/packages/@vben-core/README.md b/packages/@vben-core/README.md
index 0ee2c7b4..c6298923 100644
--- a/packages/@vben-core/README.md
+++ b/packages/@vben-core/README.md
@@ -1,3 +1,3 @@
 # @vben-core
 
-系统一些比较基础的SDK和UI组件库，请勿将任何业务逻辑和业务包放在这里。
+系统一些比较基础的SDK和UI组件库，该目录后续可能会迁移出去或者发布到npm，请勿将任何业务逻辑和业务包放在该目录。
diff --git a/packages/@vben-core/forward/README.md b/packages/@vben-core/forward/README.md
new file mode 100644
index 00000000..73320218
--- /dev/null
+++ b/packages/@vben-core/forward/README.md
@@ -0,0 +1,3 @@
+# @vben-core/forward
+
+该目录内的包，可直接被app所引用
diff --git a/packages/preference/build.config.ts b/packages/@vben-core/forward/preferences/build.config.ts
similarity index 100%
rename from packages/preference/build.config.ts
rename to packages/@vben-core/forward/preferences/build.config.ts
diff --git a/packages/preference/package.json b/packages/@vben-core/forward/preferences/package.json
similarity index 82%
rename from packages/preference/package.json
rename to packages/@vben-core/forward/preferences/package.json
index aee74467..a90b7e5f 100644
--- a/packages/preference/package.json
+++ b/packages/@vben-core/forward/preferences/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vben/preference",
+  "name": "@vben-core/preferences",
   "version": "1.0.0",
   "type": "module",
   "license": "MIT",
@@ -7,7 +7,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/preference"
+    "directory": "packages/@vben-core/preferences"
   },
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "scripts": {
@@ -32,6 +32,8 @@
     }
   },
   "dependencies": {
+    "@vben-core/cache": "workspace:*",
+    "@vben-core/helpers": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.10.0",
diff --git a/packages/@vben-core/forward/preferences/src/config.ts b/packages/@vben-core/forward/preferences/src/config.ts
new file mode 100644
index 00000000..da936866
--- /dev/null
+++ b/packages/@vben-core/forward/preferences/src/config.ts
@@ -0,0 +1,77 @@
+import type { Preferences } from './types';
+
+const defaultPreferences: Preferences = {
+  app: {
+    authPageLayout: 'panel-right',
+    colorGrayMode: false,
+    colorWeakMode: false,
+    compact: false,
+    contentCompact: 'wide',
+    copyright: 'Copyright © 2024 Vben Admin PRO',
+    defaultAvatar:
+      'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/avatar-v1.webp',
+    dynamicTitle: true,
+    isMobile: false,
+    layout: 'side-nav',
+    locale: 'zh-CN',
+    name: 'Vben Admin Pro',
+    semiDarkMenu: true,
+    showPreference: true,
+    themeMode: 'dark',
+  },
+  breadcrumb: {
+    enable: true,
+    hideOnlyOne: false,
+    showHome: false,
+    showIcon: true,
+    styleType: 'normal',
+  },
+  footer: {
+    enable: true,
+    fixed: true,
+  },
+  header: {
+    enable: true,
+    hidden: false,
+    mode: 'fixed',
+  },
+  logo: {
+    enable: true,
+    source:
+      'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/logo-v1.webp',
+  },
+  navigation: {
+    accordion: true,
+    split: true,
+    styleType: 'rounded',
+  },
+
+  shortcutKeys: { enable: true },
+  sidebar: {
+    collapse: false,
+    collapseShowTitle: true,
+    enable: true,
+    expandOnHover: true,
+    extraCollapse: true,
+    hidden: false,
+    width: 240,
+  },
+
+  tabbar: {
+    enable: true,
+    keepAlive: true,
+    showIcon: true,
+  },
+
+  theme: {
+    colorPrimary: 'hsl(211 91% 39%)',
+  },
+
+  transition: {
+    enable: true,
+    name: 'fade-slide',
+    progress: true,
+  },
+};
+
+export { defaultPreferences };
diff --git a/packages/@vben-core/forward/preferences/src/constants.ts b/packages/@vben-core/forward/preferences/src/constants.ts
new file mode 100644
index 00000000..5e4b679b
--- /dev/null
+++ b/packages/@vben-core/forward/preferences/src/constants.ts
@@ -0,0 +1,26 @@
+import type { LocaleSupportType } from './types';
+
+interface Language {
+  key: LocaleSupportType;
+  text: string;
+}
+
+export const COLOR_PRIMARY_RESETS = [
+  'hsl(211 91% 39%)',
+  'hsl(212 100% 45%)',
+  'hsl(181 84% 32%)',
+  'hsl(230 99% 66%)',
+  'hsl(245 82% 67%)',
+  'hsl(340 100% 68%)',
+];
+
+export const SUPPORT_LANGUAGES: Language[] = [
+  {
+    key: 'zh-CN',
+    text: '简体中文',
+  },
+  {
+    key: 'en-US',
+    text: 'English',
+  },
+];
diff --git a/packages/@vben-core/forward/preferences/src/index.ts b/packages/@vben-core/forward/preferences/src/index.ts
new file mode 100644
index 00000000..75305555
--- /dev/null
+++ b/packages/@vben-core/forward/preferences/src/index.ts
@@ -0,0 +1,32 @@
+import type { Flatten } from '@vben-core/typings';
+
+import { preferencesManager } from './preferences';
+
+import type { Preferences } from './types';
+
+// 偏好设置（带有层级关系）
+const preferences: Preferences = preferencesManager.getPreferences();
+
+// 扁平化后的偏好设置
+const flatPreferences: Flatten<Preferences> =
+  preferencesManager.getFlatPreferences();
+
+// 更新偏好设置
+const updatePreferences =
+  preferencesManager.updatePreferences.bind(preferencesManager);
+
+// 重置偏好设置
+const resetPreferences =
+  preferencesManager.resetPreferences.bind(preferencesManager);
+
+export {
+  flatPreferences,
+  preferences,
+  preferencesManager,
+  resetPreferences,
+  updatePreferences,
+};
+
+export * from './constants';
+export type * from './types';
+export * from './use-preferences';
diff --git a/packages/@vben-core/forward/preferences/src/preferences.ts b/packages/@vben-core/forward/preferences/src/preferences.ts
new file mode 100644
index 00000000..27f71732
--- /dev/null
+++ b/packages/@vben-core/forward/preferences/src/preferences.ts
@@ -0,0 +1,289 @@
+import type {
+  DeepPartial,
+  Flatten,
+  FlattenObjectKeys,
+} from '@vben-core/typings';
+
+import { StorageManager } from '@vben-core/cache';
+import { flattenObject, toNestedObject } from '@vben-core/helpers';
+import { convertToHslCssVar, merge } from '@vben-core/toolkit';
+
+import {
+  breakpointsTailwind,
+  useBreakpoints,
+  useCssVar,
+  useDebounceFn,
+} from '@vueuse/core';
+import { markRaw, reactive, watch } from 'vue';
+
+import { defaultPreferences } from './config';
+
+import type { Preferences } from './types';
+
+const STORAGE_KEY = 'preferences';
+
+interface initialOptions {
+  namespace: string;
+  overrides?: DeepPartial<Preferences>;
+}
+
+function isDarkTheme(theme: string) {
+  let dark = theme === 'dark';
+  if (theme === 'auto') {
+    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  return dark;
+}
+
+class PreferenceManager {
+  private cache: StorageManager<Preferences> | null = null;
+  private flattenedState: Flatten<Preferences>;
+  private initialPreferences: Preferences = defaultPreferences;
+  private isInitialized: boolean = false;
+  private savePreferences: (preference: Preferences) => void;
+  private state: Preferences = reactive<Preferences>({
+    ...this.loadPreferences(),
+  });
+  constructor() {
+    this.cache = new StorageManager();
+    this.flattenedState = reactive(flattenObject(this.state));
+
+    this.savePreferences = useDebounceFn(
+      (preference: Preferences) => this._savePreferences(preference),
+      100,
+    );
+  }
+
+  /**
+   * 保存偏好设置
+   * @param {Preferences} preference - 需要保存的偏好设置
+   */
+  private _savePreferences(preference: Preferences) {
+    this.cache?.setItem(STORAGE_KEY, preference);
+  }
+
+  /**
+   * 处理更新的键值
+   * 根据更新的键值执行相应的操作。
+   *
+   * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
+   */
+  private handleUpdates(updates: DeepPartial<Preferences>) {
+    const themeUpdates = updates.theme || {};
+    const appUpdates = updates.app || {};
+
+    if (themeUpdates.colorPrimary) {
+      this.updateCssVar(this.state);
+    }
+
+    if (appUpdates.themeMode) {
+      this.updateTheme(this.state);
+    }
+
+    if (appUpdates.colorGrayMode || appUpdates.colorWeakMode) {
+      this.updateColorMode(this.state);
+    }
+  }
+
+  /**
+   * 加载偏好设置
+   * 从缓存中加载偏好设置。如果缓存中没有找到对应的偏好设置，则返回默认偏好设置。
+   * @returns {Preferences} 加载的偏好设置
+   */
+  private loadPreferences(): Preferences {
+    const savedPreferences = this.cache?.getItem(STORAGE_KEY);
+    return savedPreferences || { ...defaultPreferences };
+  }
+  /**
+   * 监听状态和系统偏好设置的变化。
+   */
+  private setupWatcher() {
+    if (this.isInitialized) {
+      return;
+    }
+
+    const debounceWaterState = useDebounceFn(() => {
+      const newFlattenedState = flattenObject(this.state);
+      for (const k in newFlattenedState) {
+        const key = k as FlattenObjectKeys<Preferences>;
+        this.flattenedState[key] = newFlattenedState[key];
+      }
+      this.savePreferences(this.state);
+    }, 16);
+
+    const debounceWaterFlattenedState = useDebounceFn(
+      (val: Flatten<Preferences>) => {
+        this.updateState(val);
+        this.savePreferences(this.state);
+      },
+      16,
+    );
+
+    // 监听 state 的变化
+    watch(this.state, debounceWaterState, { deep: true });
+
+    // 监听 flattenedState 的变化并触发 set 方法
+    watch(this.flattenedState, debounceWaterFlattenedState, { deep: true });
+
+    // 监听断点，判断是否移动端
+    const breakpoints = useBreakpoints(breakpointsTailwind);
+    const isMobile = breakpoints.smaller('md');
+    watch(
+      () => isMobile.value,
+      (val) => {
+        this.updatePreferences({
+          app: { isMobile: val },
+        });
+      },
+      { immediate: true },
+    );
+
+    // 监听系统主题偏好设置变化
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', ({ matches: isDark }) => {
+        this.updatePreferences({
+          app: { themeMode: isDark ? 'dark' : 'light' },
+        });
+        this.updateTheme(this.state);
+      });
+  }
+
+  /**
+   * 更新页面颜色模式（灰色、色弱）
+   * @param preference
+   */
+  private updateColorMode(preference: Preferences) {
+    if (preference.app) {
+      const { colorGrayMode, colorWeakMode } = preference.app;
+      const body = document.body;
+      const COLOR_WEAK = 'invert-mode';
+      const COLOR_GRAY = 'grayscale-mode';
+      colorWeakMode
+        ? body.classList.add(COLOR_WEAK)
+        : body.classList.remove(COLOR_WEAK);
+      colorGrayMode
+        ? body.classList.add(COLOR_GRAY)
+        : body.classList.remove(COLOR_GRAY);
+    }
+  }
+
+  /**
+   * 更新 CSS 变量
+   * @param  preference - 当前偏好设置对象，它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。
+   */
+  private updateCssVar(preference: Preferences) {
+    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}`);
+          cssVarValue.value = convertToHslCssVar(value);
+        }
+      }
+    }
+  }
+
+  /**
+   *  更新状态
+   * 将新的扁平对象转换为嵌套对象，并与当前状态合并。
+   * @param {FlattenObject<Preferences>} newValue - 新的扁平对象
+   */
+  private updateState(newValue: Flatten<Preferences>) {
+    const nestObj = toNestedObject(newValue, 2);
+    Object.assign(this.state, merge(nestObj, this.state));
+  }
+
+  /**
+   * 更新主题
+   * @param preferences - 当前偏好设置对象，它的主题值将被用来设置文档的主题。
+   */
+  private updateTheme(preferences: Preferences) {
+    // 当修改到颜色变量时，更新 css 变量
+    const root = document.documentElement;
+    if (root) {
+      const themeMode = preferences?.app?.themeMode;
+      if (!themeMode) {
+        return;
+      }
+      const dark = isDarkTheme(themeMode);
+      root.classList.toggle('dark', dark);
+    }
+  }
+
+  public getFlatPreferences() {
+    return this.flattenedState;
+  }
+
+  public getInitialPreferences() {
+    return this.initialPreferences;
+  }
+
+  public getPreferences() {
+    return this.state;
+  }
+
+  /**
+   * 覆盖偏好设置
+   * @param overrides - 要覆盖的偏好设置
+   * @param namespace - 命名空间
+   */
+  public async initPreferences({ namespace, overrides }: initialOptions) {
+    // 是否初始化过
+    if (this.isInitialized) {
+      return;
+    }
+    // 初始化存储管理器
+    this.cache = new StorageManager({ prefix: namespace });
+    // 合并初始偏好设置
+    this.initialPreferences = merge({}, overrides, defaultPreferences);
+
+    // 加载并合并当前存储的偏好设置
+    const mergedPreference = merge({}, this.loadPreferences(), overrides);
+
+    // 更新偏好设置
+    this.updatePreferences(mergedPreference);
+
+    this.setupWatcher();
+    // 标记为已初始化
+    this.isInitialized = true;
+  }
+
+  /**
+   * 重置偏好设置
+   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
+   *
+   * @example
+   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
+   * 当前 state 为 { theme: 'dark', language: 'fr' }
+   * this.resetPreferences();
+   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
+   * 并且 localStorage 中的对应项将被移除
+   */
+  resetPreferences() {
+    // 将状态重置为初始偏好设置
+    Object.assign(this.state, this.initialPreferences);
+    // 保存重置后的偏好设置
+    this.savePreferences(this.state);
+    // 从存储中移除偏好设置项
+    this.cache?.removeItem(STORAGE_KEY);
+  }
+
+  /**
+   * 更新偏好设置
+   * @param updates - 要更新的偏好设置
+   */
+  public updatePreferences(updates: DeepPartial<Preferences>) {
+    const mergedState = merge(updates, markRaw(this.state));
+
+    Object.assign(this.state, mergedState);
+    Object.assign(this.flattenedState, flattenObject(this.state));
+
+    // 根据更新的键值执行相应的操作
+    this.handleUpdates(updates);
+    this.savePreferences(this.state);
+  }
+}
+
+const preferencesManager = new PreferenceManager();
+export { isDarkTheme, preferencesManager };
diff --git a/packages/@vben-core/forward/preferences/src/types.ts b/packages/@vben-core/forward/preferences/src/types.ts
new file mode 100644
index 00000000..81930555
--- /dev/null
+++ b/packages/@vben-core/forward/preferences/src/types.ts
@@ -0,0 +1,189 @@
+import type {
+  ContentCompactType,
+  LayoutHeaderModeType,
+  LayoutType,
+  LocaleSupportType,
+  ThemeModeType,
+} from '@vben-core/typings';
+
+type BreadcrumbStyleType = 'background' | 'normal';
+
+type NavigationStyleType = 'plain' | 'rounded';
+
+type PageTransitionType = 'fade-slide';
+
+type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
+
+interface AppPreferences {
+  /** 登录注册页面布局 */
+  authPageLayout: AuthPageLayoutType;
+  /** 是否开启灰色模式 */
+  colorGrayMode: boolean;
+  /** 是否开启色弱模式 */
+  colorWeakMode: boolean;
+  /** 是否开启紧凑模式 */
+  compact: boolean;
+  /** 是否开启内容紧凑模式 */
+  contentCompact: ContentCompactType;
+  /** 页脚Copyright */
+  copyright: string;
+  // /** 应用默认头像 */
+  defaultAvatar: string;
+  // /** 开启动态标题 */
+  dynamicTitle: boolean;
+  /** 是否移动端 */
+  isMobile: boolean;
+  /** 布局方式 */
+  layout: LayoutType;
+  /** 支持的语言 */
+  locale: LocaleSupportType;
+  /** 应用名 */
+  name: string;
+  /** 是否开启半深色菜单（只在theme='light'时生效） */
+  semiDarkMenu: boolean;
+  /** 是否显示偏好设置 */
+  showPreference: boolean;
+  /** 当前主题 */
+  themeMode: ThemeModeType;
+}
+
+interface BreadcrumbPreferences {
+  /** 面包屑是否启用 */
+  enable: boolean;
+  /** 面包屑是否只有一个时隐藏 */
+  hideOnlyOne: boolean;
+  /** 面包屑首页图标是否可见 */
+  showHome: boolean;
+  /** 面包屑图标是否可见 */
+  showIcon: boolean;
+  /** 面包屑风格 */
+  styleType: BreadcrumbStyleType;
+}
+
+interface FooterPreferences {
+  /** 底栏是否可见 */
+  enable: boolean;
+  /** 底栏是否固定 */
+  fixed: boolean;
+}
+
+interface HeaderPreferences {
+  /** 顶栏是否启用 */
+  enable: boolean;
+  /** 顶栏是否隐藏,css-隐藏 */
+  hidden: boolean;
+  /** header显示模式 */
+  mode: LayoutHeaderModeType;
+}
+
+interface LogoPreferences {
+  /** logo是否可见 */
+  enable: boolean;
+  /** logo地址 */
+  source: string;
+}
+
+interface NavigationPreferences {
+  /** 导航菜单手风琴模式 */
+  accordion: boolean;
+  /** 导航菜单是否切割，只在 layout=mixed-nav 生效 */
+  split: boolean;
+  /** 导航菜单风格 */
+  styleType: NavigationStyleType;
+}
+
+interface SidebarPreferences {
+  /** 侧边栏是否折叠 */
+  collapse: boolean;
+  /** 侧边栏折叠时，是否显示title */
+  collapseShowTitle: boolean;
+  /** 侧边栏是否可见 */
+  enable: boolean;
+  /** 菜单自动展开状态 */
+  expandOnHover: boolean;
+  /** 侧边栏扩展区域是否折叠 */
+  extraCollapse: boolean;
+  /** 侧边栏是否隐藏 - css */
+  hidden: boolean;
+  /** 侧边栏宽度 */
+  width: number;
+}
+
+interface ShortcutKeyPreferences {
+  /** 是否启用快捷键-全局 */
+  enable: boolean;
+}
+
+interface TabbarPreferences {
+  /** 是否开启多标签页 */
+  enable: boolean;
+  /** 开启标签页缓存功能 */
+  keepAlive: boolean;
+  /** 是否开启多标签页图标 */
+  showIcon: boolean;
+}
+
+interface ThemePreferences {
+  /** 主题色 */
+  colorPrimary: string;
+}
+
+interface TransitionPreferences {
+  /** 页面切换动画是否启用 */
+  enable: boolean;
+  /** 页面切换动画 */
+  name: PageTransitionType;
+  /** 是否开启页面加载进度动画 */
+  progress: boolean;
+}
+
+interface Preferences {
+  /** 全局配置 */
+  app: AppPreferences;
+  /** 顶栏配置 */
+  breadcrumb: BreadcrumbPreferences;
+  /** 底栏配置 */
+  footer: FooterPreferences;
+  /** 面包屑配置 */
+  header: HeaderPreferences;
+  /** logo配置 */
+  logo: LogoPreferences;
+  /** 导航配置 */
+  navigation: NavigationPreferences;
+  /** 快捷键配置 */
+  shortcutKeys: ShortcutKeyPreferences;
+  /** 侧边栏配置 */
+  sidebar: SidebarPreferences;
+  /** 标签页配置 */
+  tabbar: TabbarPreferences;
+  /** 主题配置 */
+  theme: ThemePreferences;
+  /** 动画配置 */
+  transition: TransitionPreferences;
+}
+
+type PreferencesKeys = keyof Preferences;
+
+export type {
+  AppPreferences,
+  AuthPageLayoutType,
+  BreadcrumbPreferences,
+  BreadcrumbStyleType,
+  ContentCompactType,
+  FooterPreferences,
+  HeaderPreferences,
+  LayoutHeaderModeType,
+  LayoutType,
+  LocaleSupportType,
+  LogoPreferences,
+  NavigationPreferences,
+  PageTransitionType,
+  Preferences,
+  PreferencesKeys,
+  ShortcutKeyPreferences,
+  SidebarPreferences,
+  TabbarPreferences,
+  ThemeModeType,
+  ThemePreferences,
+  TransitionPreferences,
+};
diff --git a/packages/preference/src/use-preference.ts b/packages/@vben-core/forward/preferences/src/use-preferences.ts
similarity index 56%
rename from packages/preference/src/use-preference.ts
rename to packages/@vben-core/forward/preferences/src/use-preferences.ts
index 17592f34..5b4ff90b 100644
--- a/packages/preference/src/use-preference.ts
+++ b/packages/@vben-core/forward/preferences/src/use-preferences.ts
@@ -2,28 +2,26 @@ import { diff } from '@vben-core/toolkit';
 
 import { computed } from 'vue';
 
-import {
-  initialPreference,
-  isDarkTheme,
-  currentPreference as preference,
-} from './preference';
+import { isDarkTheme, preferencesManager } from './preferences';
 
-function usePreference() {
+function usePreferences() {
+  const preferences = preferencesManager.getPreferences();
+  const flatPreferences = preferencesManager.getFlatPreferences();
+  const initialPreferences = preferencesManager.getInitialPreferences();
   /**
    * @zh_CN 计算偏好设置的变化
    */
   const diffPreference = computed(() => {
-    return diff(initialPreference.value, preference);
+    return diff(initialPreferences, preferences);
   });
 
   /**
    * @zh_CN 判断是否为暗黑模式
-   * @param  preference - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
+   * @param  preferences - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
    * @returns 如果主题为暗黑模式，返回 true，否则返回 false。
    */
   const isDark = computed(() => {
-    const theme = preference.theme;
-    return isDarkTheme(theme);
+    return isDarkTheme(flatPreferences.appThemeMode);
   });
 
   const theme = computed(() => {
@@ -34,33 +32,39 @@ function usePreference() {
    * @zh_CN 布局方式
    */
   const layout = computed(() =>
-    preference.isMobile ? 'side-nav' : preference.layout,
+    flatPreferences.appIsMobile ? 'side-nav' : flatPreferences.appLayout,
   );
 
   /**
    * @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
    */
-  const isFullContent = computed(() => preference.layout === 'full-content');
+  const isFullContent = computed(
+    () => flatPreferences.appLayout === 'full-content',
+  );
 
   /**
    * @zh_CN 是否侧边导航模式
    */
-  const isSideNav = computed(() => preference.layout === 'side-nav');
+  const isSideNav = computed(() => flatPreferences.appLayout === 'side-nav');
 
   /**
    * @zh_CN 是否侧边混合模式
    */
-  const isSideMixedNav = computed(() => preference.layout === 'side-mixed-nav');
+  const isSideMixedNav = computed(
+    () => flatPreferences.appLayout === 'side-mixed-nav',
+  );
 
   /**
    * @zh_CN 是否为头部导航模式
    */
-  const isHeaderNav = computed(() => preference.layout === 'header-nav');
+  const isHeaderNav = computed(
+    () => flatPreferences.appLayout === 'header-nav',
+  );
 
   /**
    * @zh_CN 是否为混合导航模式
    */
-  const isMixedNav = computed(() => preference.layout === 'mixed-nav');
+  const isMixedNav = computed(() => flatPreferences.appLayout === 'mixed-nav');
 
   /**
    * @zh_CN 是否包含侧边导航模式
@@ -74,28 +78,28 @@ function usePreference() {
    * 在tabs可见以及开启keep-alive的情况下才开启
    */
   const keepAlive = computed(
-    () => preference.keepAlive && preference.tabsVisible,
+    () => flatPreferences.tabbarKeepAlive && flatPreferences.tabbarEnable,
   );
 
   /**
    * @zh_CN 登录注册页面布局是否为左侧
    */
   const authPanelLeft = computed(() => {
-    return preference.authPageLayout === 'panel-left';
+    return flatPreferences.appAuthPageLayout === 'panel-left';
   });
 
   /**
    * @zh_CN 登录注册页面布局是否为左侧
    */
   const authPanelRight = computed(() => {
-    return preference.authPageLayout === 'panel-right';
+    return flatPreferences.appAuthPageLayout === 'panel-right';
   });
 
   /**
    * @zh_CN 登录注册页面布局是否为中间
    */
   const authPanelCenter = computed(() => {
-    return preference.authPageLayout === 'panel-center';
+    return flatPreferences.appAuthPageLayout === 'panel-center';
   });
 
   return {
@@ -116,4 +120,4 @@ function usePreference() {
   };
 }
 
-export { usePreference };
+export { usePreferences };
diff --git a/packages/preference/tsconfig.json b/packages/@vben-core/forward/preferences/tsconfig.json
similarity index 100%
rename from packages/preference/tsconfig.json
rename to packages/@vben-core/forward/preferences/tsconfig.json
diff --git a/packages/@vben-core/forward/request/.gitkeep b/packages/@vben-core/forward/request/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/stores/build.config.ts b/packages/@vben-core/forward/stores/build.config.ts
similarity index 100%
rename from packages/stores/build.config.ts
rename to packages/@vben-core/forward/stores/build.config.ts
diff --git a/packages/stores/package.json b/packages/@vben-core/forward/stores/package.json
similarity index 93%
rename from packages/stores/package.json
rename to packages/@vben-core/forward/stores/package.json
index 6112ca9f..f9c2d240 100644
--- a/packages/stores/package.json
+++ b/packages/@vben-core/forward/stores/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vben/stores",
+  "name": "@vben-core/stores",
   "version": "1.0.0",
   "type": "module",
   "license": "MIT",
@@ -7,7 +7,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "packages/stores"
+    "directory": "packages/@vben-core/stores"
   },
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "scripts": {
diff --git a/packages/stores/shim-pinia.d.ts b/packages/@vben-core/forward/stores/shim-pinia.d.ts
similarity index 100%
rename from packages/stores/shim-pinia.d.ts
rename to packages/@vben-core/forward/stores/shim-pinia.d.ts
diff --git a/packages/stores/src/index.ts b/packages/@vben-core/forward/stores/src/index.ts
similarity index 100%
rename from packages/stores/src/index.ts
rename to packages/@vben-core/forward/stores/src/index.ts
diff --git a/packages/stores/src/modules/access.test.ts b/packages/@vben-core/forward/stores/src/modules/access.test.ts
similarity index 83%
rename from packages/stores/src/modules/access.test.ts
rename to packages/@vben-core/forward/stores/src/modules/access.test.ts
index c4fb1aaa..ad0ebb1c 100644
--- a/packages/stores/src/modules/access.test.ts
+++ b/packages/@vben-core/forward/stores/src/modules/access.test.ts
@@ -11,10 +11,10 @@ import {
 describe('useAccessStore', () => {
   it('app Name with test', () => {
     setActivePinia(createPinia());
-    // let referenceStore = usePreferenceStore();
+    // let referenceStore = usePreferencesStore();
 
     // beforeEach(() => {
-    //   referenceStore = usePreferenceStore();
+    //   referenceStore = usePreferencesStore();
     // });
 
     // expect(referenceStore.appName).toBe('vben-admin');
diff --git a/packages/stores/src/modules/access.ts b/packages/@vben-core/forward/stores/src/modules/access.ts
similarity index 100%
rename from packages/stores/src/modules/access.ts
rename to packages/@vben-core/forward/stores/src/modules/access.ts
diff --git a/packages/stores/src/modules/index.ts b/packages/@vben-core/forward/stores/src/modules/index.ts
similarity index 100%
rename from packages/stores/src/modules/index.ts
rename to packages/@vben-core/forward/stores/src/modules/index.ts
diff --git a/packages/stores/src/modules/tabs.ts b/packages/@vben-core/forward/stores/src/modules/tabs.ts
similarity index 100%
rename from packages/stores/src/modules/tabs.ts
rename to packages/@vben-core/forward/stores/src/modules/tabs.ts
diff --git a/packages/stores/src/setup.ts b/packages/@vben-core/forward/stores/src/setup.ts
similarity index 50%
rename from packages/stores/src/setup.ts
rename to packages/@vben-core/forward/stores/src/setup.ts
index fe233cbf..84d69355 100644
--- a/packages/stores/src/setup.ts
+++ b/packages/@vben-core/forward/stores/src/setup.ts
@@ -1,10 +1,8 @@
-import type { App } from 'vue';
-
 import { createPinia } from 'pinia';
 
-interface SetupStoreOptions {
+interface InitStoreOptions {
   /**
-   * @zh_CN 应用名,由于 @vben/stores 是公用的，后续可能有多个app，为了防止多个app缓存冲突，可在这里配置应用名
+   * @zh_CN 应用名,由于 @vben-core/stores 是公用的，后续可能有多个app，为了防止多个app缓存冲突，可在这里配置应用名
    * 应用名将被用于持久化的前缀
    */
   namespace: string;
@@ -12,20 +10,21 @@ interface SetupStoreOptions {
 
 /**
  * @zh_CN 初始化pinia
- * @param app vue app 实例
  */
-async function setupStore(app: App, options: SetupStoreOptions) {
+async function initStore(options: InitStoreOptions) {
   const { createPersistedState } = await import('pinia-plugin-persistedstate');
   const pinia = createPinia();
   const { namespace } = options;
   pinia.use(
     createPersistedState({
       // key $appName-$store.id
-      key: (storeKey) => `__${namespace}-${storeKey}__`,
+      key: (storeKey) => `${namespace}-${storeKey}`,
       storage: localStorage,
     }),
   );
-  app.use(pinia);
+  return pinia;
 }
 
-export { setupStore };
+export { initStore };
+
+export type { InitStoreOptions };
diff --git a/packages/stores/tsconfig.json b/packages/@vben-core/forward/stores/tsconfig.json
similarity index 100%
rename from packages/stores/tsconfig.json
rename to packages/@vben-core/forward/stores/tsconfig.json
diff --git a/packages/@vben-core/helpers/build.config.ts b/packages/@vben-core/helpers/build.config.ts
new file mode 100644
index 00000000..97e572c5
--- /dev/null
+++ b/packages/@vben-core/helpers/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/packages/@vben-core/helpers/package.json b/packages/@vben-core/helpers/package.json
new file mode 100644
index 00000000..0de0542f
--- /dev/null
+++ b/packages/@vben-core/helpers/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@vben-core/helpers",
+  "version": "1.0.0",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/helpers"
+  },
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "imports": {
+    "#*": "./src/*"
+  },
+  "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": {
+    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/typings": "workspace:*"
+  }
+}
diff --git a/packages/@vben-core/helpers/src/index.ts b/packages/@vben-core/helpers/src/index.ts
new file mode 100644
index 00000000..1c19a111
--- /dev/null
+++ b/packages/@vben-core/helpers/src/index.ts
@@ -0,0 +1 @@
+export * from './object';
diff --git a/packages/@vben-core/helpers/src/object.test.ts b/packages/@vben-core/helpers/src/object.test.ts
new file mode 100644
index 00000000..bccbe350
--- /dev/null
+++ b/packages/@vben-core/helpers/src/object.test.ts
@@ -0,0 +1,245 @@
+import { describe, expect, it } from 'vitest';
+
+import { flattenObject, toCamelCase, toNestedObject } from './object';
+
+describe('toCamelCase', () => {
+  it('should return the key if parentKey is empty', () => {
+    expect(toCamelCase('child', '')).toBe('child');
+  });
+
+  it('should combine parentKey and key in camel case', () => {
+    expect(toCamelCase('child', 'parent')).toBe('parentChild');
+  });
+
+  it('should handle empty key and parentKey', () => {
+    expect(toCamelCase('', '')).toBe('');
+  });
+
+  it('should handle key with capital letters', () => {
+    expect(toCamelCase('Child', 'parent')).toBe('parentChild');
+    expect(toCamelCase('Child', 'Parent')).toBe('ParentChild');
+  });
+});
+
+describe('flattenObject', () => {
+  it('should flatten a nested object correctly', () => {
+    const nestedObject = {
+      language: 'en',
+      notifications: {
+        email: true,
+        push: {
+          sound: true,
+          vibration: false,
+        },
+      },
+      theme: 'light',
+    };
+
+    const expected = {
+      language: 'en',
+      notificationsEmail: true,
+      notificationsPushSound: true,
+      notificationsPushVibration: false,
+      theme: 'light',
+    };
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle empty objects', () => {
+    const nestedObject = {};
+    const expected = {};
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle objects with primitive values', () => {
+    const nestedObject = {
+      active: true,
+      age: 30,
+      name: 'Alice',
+    };
+
+    const expected = {
+      active: true,
+      age: 30,
+      name: 'Alice',
+    };
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle objects with null values', () => {
+    const nestedObject = {
+      user: {
+        age: null,
+        name: null,
+      },
+    };
+
+    const expected = {
+      userAge: null,
+      userName: null,
+    };
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle nested empty objects', () => {
+    const nestedObject = {
+      a: {},
+      b: { c: {} },
+    };
+
+    const expected = {};
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle arrays within objects', () => {
+    const nestedObject = {
+      hobbies: ['reading', 'gaming'],
+      name: 'Alice',
+    };
+
+    const expected = {
+      hobbies: ['reading', 'gaming'],
+      name: 'Alice',
+    };
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+  it('should flatten objects with nested arrays correctly', () => {
+    const nestedObject = {
+      person: {
+        hobbies: ['reading', 'gaming'],
+        name: 'Alice',
+      },
+    };
+
+    const expected = {
+      personHobbies: ['reading', 'gaming'],
+      personName: 'Alice',
+    };
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle objects with undefined values', () => {
+    const nestedObject = {
+      user: {
+        age: undefined,
+        name: 'Alice',
+      },
+    };
+
+    const expected = {
+      userAge: undefined,
+      userName: 'Alice',
+    };
+
+    const result = flattenObject(nestedObject);
+    expect(result).toEqual(expected);
+  });
+});
+
+describe('toNestedObject', () => {
+  it('should convert flat object to nested object with level 1', () => {
+    const flatObject = {
+      anotherKeyExample: 2,
+      commonAppName: 1,
+      someOtherKey: 3,
+    };
+
+    const expectedNestedObject = {
+      anotherKeyExample: 2,
+      commonAppName: 1,
+      someOtherKey: 3,
+    };
+
+    expect(toNestedObject(flatObject, 1)).toEqual(expectedNestedObject);
+  });
+
+  it('should convert flat object to nested object with level 2', () => {
+    const flatObject = {
+      appAnotherKeyExample: 2,
+      appCommonName: 1,
+      appSomeOtherKey: 3,
+    };
+
+    const expectedNestedObject = {
+      app: {
+        anotherKeyExample: 2,
+        commonName: 1,
+        someOtherKey: 3,
+      },
+    };
+
+    expect(toNestedObject(flatObject, 2)).toEqual(expectedNestedObject);
+  });
+
+  it('should convert flat object to nested object with level 3', () => {
+    const flatObject = {
+      appAnotherKeyExampleValue: 2,
+      appCommonNameKey: 1,
+      appSomeOtherKeyItem: 3,
+    };
+
+    const expectedNestedObject = {
+      app: {
+        another: {
+          keyExampleValue: 2,
+        },
+        common: {
+          nameKey: 1,
+        },
+        some: {
+          otherKeyItem: 3,
+        },
+      },
+    };
+
+    expect(toNestedObject(flatObject, 3)).toEqual(expectedNestedObject);
+  });
+
+  it('should handle empty object', () => {
+    const flatObject = {};
+
+    const expectedNestedObject = {};
+
+    expect(toNestedObject(flatObject, 1)).toEqual(expectedNestedObject);
+  });
+
+  it('should handle single key object', () => {
+    const flatObject = {
+      singleKey: 1,
+    };
+
+    const expectedNestedObject = {
+      singleKey: 1,
+    };
+
+    expect(toNestedObject(flatObject, 1)).toEqual(expectedNestedObject);
+  });
+
+  it('should handle complex keys', () => {
+    const flatObject = {
+      anotherComplexKeyWithParts: 2,
+      complexKeyWithMultipleParts: 1,
+    };
+
+    const expectedNestedObject = {
+      anotherComplexKeyWithParts: 2,
+      complexKeyWithMultipleParts: 1,
+    };
+
+    expect(toNestedObject(flatObject, 1)).toEqual(expectedNestedObject);
+  });
+});
diff --git a/packages/@vben-core/helpers/src/object.ts b/packages/@vben-core/helpers/src/object.ts
new file mode 100644
index 00000000..35f7b128
--- /dev/null
+++ b/packages/@vben-core/helpers/src/object.ts
@@ -0,0 +1,164 @@
+import type { Flatten } from '@vben-core/typings';
+
+import {
+  capitalizeFirstLetter,
+  toLowerCaseFirstLetter,
+} from '@vben-core/toolkit';
+
+/**
+ *  生成驼峰命名法的键名
+ * @param key
+ * @param parentKey
+ */
+function toCamelCase(key: string, parentKey: string): string {
+  if (!parentKey) {
+    return key;
+  }
+  return parentKey + key.charAt(0).toUpperCase() + key.slice(1);
+}
+
+/**
+ * 将嵌套对象扁平化
+ * @param obj - 需要扁平化的对象
+ * @param parentKey - 父键名，用于递归时拼接键名
+ * @param result - 存储结果的对象
+ * @returns 扁平化后的对象
+ *
+ * 示例：
+ * const nestedObj = {
+ *   user: {
+ *     name: 'Alice',
+ *     address: {
+ *       city: 'Wonderland',
+ *       zip: '12345'
+ *     }
+ *   },
+ *   items: [
+ *     { id: 1, name: 'Item 1' },
+ *     { id: 2, name: 'Item 2' }
+ *   ],
+ *   active: true
+ * };
+ * const flatObj = flattenObject(nestedObj);
+ * console.log(flatObj);
+ * 输出:
+ * {
+ *   userName: 'Alice',
+ *   userAddressCity: 'Wonderland',
+ *   userAddressZip: '12345',
+ *   items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' } ],
+ *   active: true
+ * }
+ */
+function flattenObject<T extends Record<string, any>>(
+  obj: T,
+  parentKey: string = '',
+  result: Record<string, any> = {},
+): Flatten<T> {
+  Object.keys(obj).forEach((key) => {
+    const newKey = parentKey
+      ? `${parentKey}${capitalizeFirstLetter(key)}`
+      : key;
+    const value = obj[key];
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      flattenObject(value, newKey, result);
+    } else {
+      result[newKey] = value;
+    }
+  });
+  return result as Flatten<T>;
+}
+
+/**
+ * 将扁平对象转换为嵌套对象。
+ *
+ * @template T - 输入对象值的类型
+ * @param {Record<string, T>} obj - 要转换的扁平对象
+ * @param {number} level - 嵌套的层级
+ * @returns {T} 嵌套对象
+ *
+ * @example
+ * 将扁平对象转换为嵌套对象，嵌套层级为 1
+ * const flatObject = {
+ *   'commonAppName': 1,
+ *   'anotherKeyExample': 2,
+ *   'someOtherKey': 3
+ * };
+ * const nestedObject = toNestedObject(flatObject, 1);
+ * console.log(nestedObject);
+ * 输出:
+ * {
+ *   commonAppName: 1,
+ *   anotherKeyExample: 2,
+ *   someOtherKey: 3
+ * }
+ *
+ * @example
+ * 将扁平对象转换为嵌套对象，嵌套层级为 2
+ * const flatObject = {
+ *   'appCommonName': 1,
+ *   'appAnotherKeyExample': 2,
+ *   'appSomeOtherKey': 3
+ * };
+ * const nestedObject = toNestedObject(flatObject, 2);
+ * console.log(nestedObject);
+ * 输出:
+ * {
+ *   app: {
+ *     commonName: 1,
+ *     anotherKeyExample: 2,
+ *     someOtherKey: 3
+ *   }
+ * }
+ */
+
+function toNestedObject<T>(obj: Record<string, T>, level: number): T {
+  const result: any = {};
+
+  for (const key in obj) {
+    const keys = key.split(/(?=[A-Z])/);
+    // 将驼峰式分割为数组;
+    let current = result;
+
+    for (let i = 0; i < keys.length; i++) {
+      const lowerKey = keys[i].toLowerCase();
+      if (i === level - 1) {
+        const remainingKeys = keys.slice(i).join(''); // 保留后续部分作为键的一部分
+        current[toLowerCaseFirstLetter(remainingKeys)] = obj[key];
+        break;
+      } else {
+        current[lowerKey] = current[lowerKey] || {};
+        current = current[lowerKey];
+      }
+    }
+  }
+
+  return result as T;
+}
+
+export { flattenObject, toCamelCase, toNestedObject };
+
+// 定义递归类型，用于推断扁平化后的对象类型
+// 限制递归深度的辅助类型
+// type FlattenDepth<
+//   T,
+//   Depth extends number,
+//   CurrentDepth extends number[] = [],
+// > = {
+//   [K in keyof T as CurrentDepth['length'] extends Depth
+//     ? K
+//     : T[K] extends object
+//       ? `${CurrentDepth['length'] extends 0 ? Uncapitalize<K & string> : Capitalize<K & string>}${keyof FlattenDepth<T[K], Depth, [...CurrentDepth, 1]> extends string ? Capitalize<keyof FlattenDepth<T[K], Depth, [...CurrentDepth, 1]>> : ''}`
+//       : `${CurrentDepth['length'] extends 0 ? Uncapitalize<K & string> : Capitalize<K & string>}`]: CurrentDepth['length'] extends Depth
+//     ? T[K]
+//     : T[K] extends object
+//       ? FlattenDepth<T[K], Depth, [...CurrentDepth, 1]>[keyof FlattenDepth<
+//           T[K],
+//           Depth,
+//           [...CurrentDepth, 1]
+//         >]
+//       : T[K];
+// };
+
+// type Flatten<T, Depth extends number = 4> = FlattenDepth<T, Depth>;
diff --git a/packages/@vben-core/helpers/tsconfig.json b/packages/@vben-core/helpers/tsconfig.json
new file mode 100644
index 00000000..03b23c68
--- /dev/null
+++ b/packages/@vben-core/helpers/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "include": ["src"]
+}
diff --git a/packages/@vben-core/shared/chche/src/index.ts b/packages/@vben-core/shared/chche/src/index.ts
index 5fe5d857..8c44d7f1 100644
--- a/packages/@vben-core/shared/chche/src/index.ts
+++ b/packages/@vben-core/shared/chche/src/index.ts
@@ -1 +1 @@
-export * from './storage-cache';
+export * from './storage-manager';
diff --git a/packages/@vben-core/shared/chche/src/storage-cache.test.ts b/packages/@vben-core/shared/chche/src/storage-cache.test.ts
deleted file mode 100644
index b10909b9..00000000
--- a/packages/@vben-core/shared/chche/src/storage-cache.test.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { StorageCache } from './storage-cache';
-
-describe('storageCache', () => {
-  let localStorageCache: StorageCache;
-  let sessionStorageCache: StorageCache;
-
-  beforeEach(() => {
-    localStorageCache = new StorageCache('prefix_', 'localStorage');
-    sessionStorageCache = new StorageCache('prefix_', 'sessionStorage');
-    localStorage.clear();
-    sessionStorage.clear();
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should set and get an item with prefix in localStorage', () => {
-    localStorageCache.setItem('testKey', 'testValue');
-    const value = localStorageCache.getItem<string>('testKey');
-    expect(value).toBe('testValue');
-    expect(localStorage.getItem('prefix_testKey')).not.toBeNull();
-  });
-
-  it('should set and get an item with prefix in sessionStorage', () => {
-    sessionStorageCache.setItem('testKey', 'testValue');
-    const value = sessionStorageCache.getItem<string>('testKey');
-    expect(value).toBe('testValue');
-    expect(sessionStorage.getItem('prefix_testKey')).not.toBeNull();
-  });
-
-  it('should return null for expired item in localStorage', () => {
-    localStorageCache.setItem('testKey', 'testValue', 1 / 60); // 1 second expiry
-    vi.advanceTimersByTime(2000); // Fast-forward 2 seconds
-    const value = localStorageCache.getItem<string>('testKey');
-    expect(value).toBeNull();
-  });
-
-  it('should return null for expired item in sessionStorage', () => {
-    sessionStorageCache.setItem('testKey', 'testValue', 1 / 60); // 1 second expiry
-    vi.advanceTimersByTime(2000); // Fast-forward 2 seconds
-    const value = sessionStorageCache.getItem<string>('testKey');
-    expect(value).toBeNull();
-  });
-
-  it('should remove an item with prefix in localStorage', () => {
-    localStorageCache.setItem('testKey', 'testValue');
-    localStorageCache.removeItem('testKey');
-    const value = localStorageCache.getItem<string>('testKey');
-    expect(value).toBeNull();
-    expect(localStorage.getItem('prefix_testKey')).toBeNull();
-  });
-
-  it('should remove an item with prefix in sessionStorage', () => {
-    sessionStorageCache.setItem('testKey', 'testValue');
-    sessionStorageCache.removeItem('testKey');
-    const value = sessionStorageCache.getItem<string>('testKey');
-    expect(value).toBeNull();
-    expect(sessionStorage.getItem('prefix_testKey')).toBeNull();
-  });
-
-  it('should clear all items in localStorage', () => {
-    localStorageCache.setItem('testKey1', 'testValue1');
-    localStorageCache.setItem('testKey2', 'testValue2');
-    localStorageCache.clear();
-    expect(localStorageCache.length()).toBe(0);
-  });
-
-  it('should clear all items in sessionStorage', () => {
-    sessionStorageCache.setItem('testKey1', 'testValue1');
-    sessionStorageCache.setItem('testKey2', 'testValue2');
-    sessionStorageCache.clear();
-    expect(sessionStorageCache.length()).toBe(0);
-  });
-
-  it('should return correct length in localStorage', () => {
-    localStorageCache.setItem('testKey1', 'testValue1');
-    localStorageCache.setItem('testKey2', 'testValue2');
-    expect(localStorageCache.length()).toBe(2);
-  });
-
-  it('should return correct length in sessionStorage', () => {
-    sessionStorageCache.setItem('testKey1', 'testValue1');
-    sessionStorageCache.setItem('testKey2', 'testValue2');
-    expect(sessionStorageCache.length()).toBe(2);
-  });
-
-  it('should return correct key by index in localStorage', () => {
-    localStorageCache.setItem('testKey1', 'testValue1');
-    localStorageCache.setItem('testKey2', 'testValue2');
-    expect(localStorageCache.key(0)).toBe('prefix_testKey1');
-    expect(localStorageCache.key(1)).toBe('prefix_testKey2');
-  });
-
-  it('should return correct key by index in sessionStorage', () => {
-    sessionStorageCache.setItem('testKey1', 'testValue1');
-    sessionStorageCache.setItem('testKey2', 'testValue2');
-    expect(sessionStorageCache.key(0)).toBe('prefix_testKey1');
-    expect(sessionStorageCache.key(1)).toBe('prefix_testKey2');
-  });
-});
diff --git a/packages/@vben-core/shared/chche/src/storage-cache.ts b/packages/@vben-core/shared/chche/src/storage-cache.ts
deleted file mode 100644
index 294b47d5..00000000
--- a/packages/@vben-core/shared/chche/src/storage-cache.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import type { IStorageCache, StorageType, StorageValue } from './types';
-
-class StorageCache implements IStorageCache {
-  protected prefix: string;
-  protected storage: Storage;
-
-  constructor(prefix: string = '', storageType: StorageType = 'localStorage') {
-    this.prefix = prefix;
-    this.storage =
-      storageType === 'localStorage' ? localStorage : sessionStorage;
-  }
-
-  // 获取带前缀的键名
-  private getFullKey(key: string): string {
-    return this.prefix + key;
-  }
-
-  // 获取项之后的钩子方法
-  protected afterGetItem<T>(_key: string, _value: T | null): void {}
-
-  // 设置项之后的钩子方法
-  protected afterSetItem<T>(
-    _key: string,
-    _value: T,
-    _expiryInMinutes?: number,
-  ): void {}
-
-  // 获取项之前的钩子方法
-  protected beforeGetItem(_key: string): void {}
-
-  // 设置项之前的钩子方法
-  protected beforeSetItem<T>(
-    _key: string,
-    _value: T,
-    _expiryInMinutes?: number,
-  ): void {}
-
-  /**
-   * 清空存储
-   */
-  clear(): void {
-    try {
-      this.storage.clear();
-    } catch (error) {
-      console.error('Error clearing storage', error);
-    }
-  }
-
-  /**
-   * 获取存储项
-   * @param key 存储键
-   * @returns 存储值或 null
-   */
-  getItem<T>(key: string): T | null {
-    const fullKey = this.getFullKey(key);
-    this.beforeGetItem(fullKey);
-
-    let value: T | null = null;
-    try {
-      const item = this.storage.getItem(fullKey);
-      if (item) {
-        const storageValue: StorageValue<T> = JSON.parse(item);
-        if (storageValue.expiry && storageValue.expiry < Date.now()) {
-          this.storage.removeItem(fullKey);
-        } else {
-          value = storageValue.data;
-        }
-      }
-    } catch (error) {
-      console.error('Error getting item from storage', error);
-    }
-
-    this.afterGetItem(fullKey, value);
-    return value;
-  }
-
-  /**
-   * 获取存储中的键
-   * @param index 键的索引
-   * @returns 存储键或 null
-   */
-  key(index: number): null | string {
-    try {
-      return this.storage.key(index);
-    } catch (error) {
-      console.error('Error getting key from storage', error);
-      return null;
-    }
-  }
-
-  /**
-   * 获取存储项的数量
-   * @returns 存储项的数量
-   */
-  length(): number {
-    try {
-      return this.storage.length;
-    } catch (error) {
-      console.error('Error getting storage length', error);
-      return 0;
-    }
-  }
-
-  /**
-   * 删除存储项
-   * @param key 存储键
-   */
-  removeItem(key: string): void {
-    const fullKey = this.getFullKey(key);
-    try {
-      this.storage.removeItem(fullKey);
-    } catch (error) {
-      console.error('Error removing item from storage', error);
-    }
-  }
-
-  /**
-   * 设置存储项
-   * @param key 存储键
-   * @param value 存储值
-   * @param expiryInMinutes 过期时间（分钟）
-   */
-  setItem<T>(key: string, value: T, expiryInMinutes?: number): void {
-    const fullKey = this.getFullKey(key);
-    this.beforeSetItem(fullKey, value, expiryInMinutes);
-
-    const now = Date.now();
-    const expiry = expiryInMinutes ? now + expiryInMinutes * 60_000 : null;
-
-    const storageValue: StorageValue<T> = {
-      data: value,
-      expiry,
-    };
-
-    try {
-      this.storage.setItem(fullKey, JSON.stringify(storageValue));
-    } catch (error) {
-      console.error('Error setting item in storage', error);
-    }
-
-    this.afterSetItem(fullKey, value, expiryInMinutes);
-  }
-}
-
-export { StorageCache };
diff --git a/packages/@vben-core/shared/chche/src/storage-manager.test.ts b/packages/@vben-core/shared/chche/src/storage-manager.test.ts
new file mode 100644
index 00000000..b56d49e0
--- /dev/null
+++ b/packages/@vben-core/shared/chche/src/storage-manager.test.ts
@@ -0,0 +1,130 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { StorageManager } from './storage-manager';
+
+describe('storageManager', () => {
+  let storageManager: StorageManager<{ age: number; name: string }>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    localStorage.clear();
+    storageManager = new StorageManager<{ age: number; name: string }>({
+      prefix: 'test_',
+    });
+  });
+
+  it('should set and get an item', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should return default value if item does not exist', () => {
+    const user = storageManager.getItem('nonexistent', {
+      age: 0,
+      name: 'Default User',
+    });
+    expect(user).toEqual({ age: 0, name: 'Default User' });
+  });
+
+  it('should remove an item', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    storageManager.removeItem('user');
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should clear all items with the prefix', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' });
+    storageManager.clear();
+    expect(storageManager.getItem('user1')).toBeNull();
+    expect(storageManager.getItem('user2')).toBeNull();
+  });
+
+  it('should clear expired items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    vi.advanceTimersByTime(1001); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should not clear non-expired items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 10_000); // 10秒过期
+    vi.advanceTimersByTime(5000); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should handle JSON parse errors gracefully', () => {
+    localStorage.setItem('test_user', '{ invalid JSON }');
+    const user = storageManager.getItem('user', {
+      age: 0,
+      name: 'Default User',
+    });
+    expect(user).toEqual({ age: 0, name: 'Default User' });
+  });
+  it('should return null for non-existent items without default value', () => {
+    const user = storageManager.getItem('nonexistent');
+    expect(user).toBeNull();
+  });
+
+  it('should overwrite existing items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user', { age: 25, name: 'Jane Doe' });
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 25, name: 'Jane Doe' });
+  });
+
+  it('should handle items without expiry correctly', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    vi.advanceTimersByTime(5000);
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should remove expired items when accessed', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    vi.advanceTimersByTime(1001); // 快进时间
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should not remove non-expired items when accessed', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 10_000); // 10秒过期
+    vi.advanceTimersByTime(5000); // 快进时间
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should handle multiple items with different expiry times', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' }, 2000); // 2秒过期
+    vi.advanceTimersByTime(1500); // 快进时间
+    storageManager.clearExpiredItems();
+    const user1 = storageManager.getItem('user1');
+    const user2 = storageManager.getItem('user2');
+    expect(user1).toBeNull();
+    expect(user2).toEqual({ age: 25, name: 'Jane Doe' });
+  });
+
+  it('should handle items with no expiry', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    vi.advanceTimersByTime(10_000); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should clear all items correctly', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' });
+    storageManager.clear();
+    const user1 = storageManager.getItem('user1');
+    const user2 = storageManager.getItem('user2');
+    expect(user1).toBeNull();
+    expect(user2).toBeNull();
+  });
+});
diff --git a/packages/@vben-core/shared/chche/src/storage-manager.ts b/packages/@vben-core/shared/chche/src/storage-manager.ts
new file mode 100644
index 00000000..e2732e49
--- /dev/null
+++ b/packages/@vben-core/shared/chche/src/storage-manager.ts
@@ -0,0 +1,118 @@
+type StorageType = 'localStorage' | 'sessionStorage';
+
+interface StorageManagerOptions {
+  prefix?: string;
+  storageType?: StorageType;
+}
+
+interface StorageItem<T> {
+  expiry?: number;
+  value: T;
+}
+
+class StorageManager<T> {
+  private prefix: string;
+  private storage: Storage;
+
+  constructor({
+    prefix = '',
+    storageType = 'localStorage',
+  }: StorageManagerOptions = {}) {
+    this.prefix = prefix;
+    this.storage =
+      storageType === 'localStorage'
+        ? window.localStorage
+        : window.sessionStorage;
+  }
+
+  /**
+   * 获取完整的存储键
+   * @param key 原始键
+   * @returns 带前缀的完整键
+   */
+  private getFullKey(key: string): string {
+    return `${this.prefix}-${key}`;
+  }
+
+  /**
+   * 清除所有带前缀的存储项
+   */
+  clear(): void {
+    const keysToRemove: string[] = [];
+    for (let i = 0; i < this.storage.length; i++) {
+      const key = this.storage.key(i);
+      if (key && key.startsWith(this.prefix)) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach((key) => this.storage.removeItem(key));
+  }
+
+  /**
+   * 清除所有过期的存储项
+   */
+  clearExpiredItems(): void {
+    for (let i = 0; i < this.storage.length; i++) {
+      const key = this.storage.key(i);
+      if (key && key.startsWith(this.prefix)) {
+        const shortKey = key.replace(this.prefix, '');
+        this.getItem(shortKey); // 调用 getItem 方法检查并移除过期项
+      }
+    }
+  }
+
+  /**
+   * 获取存储项
+   * @param key 键
+   * @param defaultValue 当项不存在或已过期时返回的默认值
+   * @returns 值，如果项已过期或解析错误则返回默认值
+   */
+  getItem(key: string, defaultValue: T | null = null): T | null {
+    const fullKey = this.getFullKey(key);
+    const itemStr = this.storage.getItem(fullKey);
+    if (!itemStr) {
+      return defaultValue;
+    }
+
+    try {
+      const item: StorageItem<T> = JSON.parse(itemStr);
+      if (item.expiry && Date.now() > item.expiry) {
+        this.storage.removeItem(fullKey);
+        return defaultValue;
+      }
+      return item.value;
+    } catch (error) {
+      console.error(`Error parsing item with key "${fullKey}":`, error);
+      this.storage.removeItem(fullKey); // 如果解析失败，删除该项
+      return defaultValue;
+    }
+  }
+
+  /**
+   * 移除存储项
+   * @param key 键
+   */
+  removeItem(key: string): void {
+    const fullKey = this.getFullKey(key);
+    this.storage.removeItem(fullKey);
+  }
+
+  /**
+   * 设置存储项
+   * @param key 键
+   * @param value 值
+   * @param ttl 存活时间（毫秒）
+   */
+  setItem(key: string, value: T, ttl?: number): void {
+    const fullKey = this.getFullKey(key);
+    const expiry = ttl ? Date.now() + ttl : undefined;
+    const item: StorageItem<T> = { expiry, value };
+    try {
+      this.storage.setItem(fullKey, JSON.stringify(item));
+    } catch (error) {
+      console.error(`Error setting item with key "${fullKey}":`, error);
+    }
+  }
+}
+
+export { StorageManager };
diff --git a/packages/@vben-core/shared/design/src/tailwind.css b/packages/@vben-core/shared/design/src/tailwind.css
index 7f0c3eb2..0016ccab 100644
--- a/packages/@vben-core/shared/design/src/tailwind.css
+++ b/packages/@vben-core/shared/design/src/tailwind.css
@@ -18,7 +18,7 @@
   }
 
   .outline-box {
-    @apply outline-border relative  cursor-pointer rounded-md p-1 outline outline-1;
+    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
 
     &::after {
       @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[''];
diff --git a/packages/@vben-core/shared/toolkit/src/index.ts b/packages/@vben-core/shared/toolkit/src/index.ts
index 106460dd..73977b3b 100644
--- a/packages/@vben-core/shared/toolkit/src/index.ts
+++ b/packages/@vben-core/shared/toolkit/src/index.ts
@@ -3,6 +3,7 @@ export * from './date';
 export * from './diff';
 export * from './hash';
 export * from './inference';
+export * from './letter';
 export * from './merge';
 export * from './namespace';
 export * from './nprogress';
diff --git a/packages/@vben-core/shared/toolkit/src/letter.test.ts b/packages/@vben-core/shared/toolkit/src/letter.test.ts
new file mode 100644
index 00000000..15a1423a
--- /dev/null
+++ b/packages/@vben-core/shared/toolkit/src/letter.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+
+import { capitalizeFirstLetter, toLowerCaseFirstLetter } from './letter';
+
+// 编写测试用例
+describe('capitalizeFirstLetter', () => {
+  it('should capitalize the first letter of a string', () => {
+    expect(capitalizeFirstLetter('hello')).toBe('Hello');
+    expect(capitalizeFirstLetter('world')).toBe('World');
+  });
+
+  it('should handle empty strings', () => {
+    expect(capitalizeFirstLetter('')).toBe('');
+  });
+
+  it('should handle single character strings', () => {
+    expect(capitalizeFirstLetter('a')).toBe('A');
+    expect(capitalizeFirstLetter('b')).toBe('B');
+  });
+
+  it('should not change the case of other characters', () => {
+    expect(capitalizeFirstLetter('hElLo')).toBe('HElLo');
+  });
+});
+
+describe('toLowerCaseFirstLetter', () => {
+  it('should convert the first letter to lowercase', () => {
+    expect(toLowerCaseFirstLetter('CommonAppName')).toBe('commonAppName');
+    expect(toLowerCaseFirstLetter('AnotherKeyExample')).toBe(
+      'anotherKeyExample',
+    );
+  });
+
+  it('should return the same string if the first letter is already lowercase', () => {
+    expect(toLowerCaseFirstLetter('alreadyLowerCase')).toBe('alreadyLowerCase');
+  });
+
+  it('should handle empty strings', () => {
+    expect(toLowerCaseFirstLetter('')).toBe('');
+  });
+
+  it('should handle single character strings', () => {
+    expect(toLowerCaseFirstLetter('A')).toBe('a');
+    expect(toLowerCaseFirstLetter('a')).toBe('a');
+  });
+
+  it('should handle strings with only one uppercase letter', () => {
+    expect(toLowerCaseFirstLetter('A')).toBe('a');
+  });
+
+  it('should handle strings with special characters', () => {
+    expect(toLowerCaseFirstLetter('!Special')).toBe('!Special');
+    expect(toLowerCaseFirstLetter('123Number')).toBe('123Number');
+  });
+});
diff --git a/packages/@vben-core/shared/toolkit/src/letter.ts b/packages/@vben-core/shared/toolkit/src/letter.ts
new file mode 100644
index 00000000..7b257c8a
--- /dev/null
+++ b/packages/@vben-core/shared/toolkit/src/letter.ts
@@ -0,0 +1,20 @@
+/**
+ * 将字符串的首字母大写
+ * @param string
+ */
+function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+/**
+ * 将字符串的首字母转换为小写。
+ *
+ * @param str 要转换的字符串
+ * @returns 首字母小写的字符串
+ */
+function toLowerCaseFirstLetter(str: string): string {
+  if (!str) return str; // 如果字符串为空，直接返回
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+
+export { capitalizeFirstLetter, toLowerCaseFirstLetter };
diff --git a/packages/@vben-core/shared/typings/src/app.ts b/packages/@vben-core/shared/typings/src/app.ts
new file mode 100644
index 00000000..0f94746c
--- /dev/null
+++ b/packages/@vben-core/shared/typings/src/app.ts
@@ -0,0 +1,22 @@
+type LocaleSupportType = 'en-US' | 'zh-CN';
+
+type LayoutType =
+  | 'full-content'
+  | 'header-nav'
+  | 'mixed-nav'
+  | 'side-mixed-nav'
+  | 'side-nav';
+
+type ThemeModeType = 'auto' | 'dark' | 'light';
+
+type ContentCompactType = 'compact' | 'wide';
+
+type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
+
+export type {
+  ContentCompactType,
+  LayoutHeaderModeType,
+  LayoutType,
+  LocaleSupportType,
+  ThemeModeType,
+};
diff --git a/packages/@vben-core/shared/typings/src/flatten.d.ts b/packages/@vben-core/shared/typings/src/flatten.d.ts
new file mode 100644
index 00000000..d6546580
--- /dev/null
+++ b/packages/@vben-core/shared/typings/src/flatten.d.ts
@@ -0,0 +1,40 @@
+// `Prev` 类型用于表示递归深度的递减。它是一个元组，其索引代表了递归的层数，通过索引访问可以得到减少后的层数。
+// 例如，Prev[3] 等于 2，表示递归深度从 3 减少到 2。
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...0[]];
+
+// `FlattenDepth` 类型用于将一个嵌套的对象类型“展平”，同时考虑到了递归的深度。
+// 它接受三个泛型参数：T（要处理的类型），Prefix（属性名前缀，默认为空字符串），Depth（递归深度，默认为3）。
+// 如果当前深度（Depth）为 0，则停止递归并返回 `never`。否则，如果属性值是对象类型，则递归调用 `FlattenDepth` 并递减深度。
+// 对于非对象类型的属性，将其直接映射到结果类型中，并根据前缀构造属性名。
+
+type FlattenDepth<T, Prefix extends string = '', Depth extends number = 4> = {
+  [K in keyof T]: T[K] extends object
+    ? Depth extends 0
+      ? never
+      : FlattenDepth<
+          T[K],
+          `${Prefix}${K extends string ? (Prefix extends '' ? K : Capitalize<K>) : ''}`,
+          Prev[Depth]
+        >
+    : {
+        [P in `${Prefix}${K extends string ? (Prefix extends '' ? K : Capitalize<K>) : ''}`]: T[K];
+      };
+}[keyof T] extends infer O
+  ? { [P in keyof O]: O[P] }
+  : never;
+
+// `UnionToIntersection` 类型用于将一个联合类型转换为交叉类型。
+// 这个类型通过条件类型和类型推断的方式来实现。它先尝试将输入类型（U）映射为一个函数类型，
+// 然后通过推断这个函数类型的返回类型（infer I），最终得到一个交叉类型。
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I,
+) => void
+  ? I
+  : never;
+
+type Flatten<T> = UnionToIntersection<FlattenDepth<T>>;
+
+type FlattenObject<T> = FlattenDepth<T>;
+type FlattenObjectKeys<T> = keyof FlattenObject<T>;
+
+export type { Flatten, FlattenObject, FlattenObjectKeys, UnionToIntersection };
diff --git a/packages/@vben-core/shared/typings/src/index.ts b/packages/@vben-core/shared/typings/src/index.ts
index 50d7a310..db31fdba 100644
--- a/packages/@vben-core/shared/typings/src/index.ts
+++ b/packages/@vben-core/shared/typings/src/index.ts
@@ -1,5 +1,6 @@
 export type * from './access';
+export type * from './app';
+export type * from './flatten';
 export type * from './menu-record';
-export type * from './preference';
 export type * from './tabs';
 export type * from './tools';
diff --git a/packages/@vben-core/shared/typings/src/preference.ts b/packages/@vben-core/shared/typings/src/preference.ts
deleted file mode 100644
index 21f475fb..00000000
--- a/packages/@vben-core/shared/typings/src/preference.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-type LayoutType =
-  | 'full-content'
-  | 'header-nav'
-  | 'mixed-nav'
-  | 'side-mixed-nav'
-  | 'side-nav';
-
-type BreadcrumbStyle = 'background' | 'normal';
-
-type NavigationStyle = 'plain' | 'rounded';
-
-type ThemeType = 'auto' | 'dark' | 'light';
-
-type ContentCompactType = 'compact' | 'wide';
-
-type LayoutHeaderMode = 'auto' | 'auto-scroll' | 'fixed' | 'static';
-
-type PageTransitionType = 'fade-slide';
-
-type AuthPageLayout = 'panel-center' | 'panel-left' | 'panel-right';
-
-type SupportLocale = 'en-US' | 'zh-CN';
-
-interface Language {
-  key: SupportLocale;
-  text: string;
-}
-
-interface Preference {
-  /** 应用名 */
-  appName: string;
-  /** 登录注册页面布局 */
-  authPageLayout: AuthPageLayout;
-  /** 面包屑是否只有一个时隐藏 */
-  breadcrumbHideOnlyOne: boolean;
-  /** 面包屑首页图标是否可见 */
-  breadcrumbHome: boolean;
-  /** 面包屑图标是否可见 */
-  breadcrumbIcon: boolean;
-  /** 面包屑类型 */
-  breadcrumbStyle: BreadcrumbStyle;
-  /** 面包屑是否可见 */
-  breadcrumbVisible: boolean;
-  /** 是否开启灰色模式 */
-  colorGrayMode: boolean;
-  /** 主题色 */
-  colorPrimary: string;
-  /** 是否开启色弱模式 */
-  colorWeakMode: boolean;
-  /** 是否开启紧凑模式 */
-  compact: boolean;
-  /** 是否开启内容紧凑模式 */
-  contentCompact: ContentCompactType;
-  /** 页脚Copyright */
-  copyright: string;
-  /** 应用默认头像 */
-  defaultAvatar: string;
-  /** 开启动态标题 */
-  dynamicTitle: boolean;
-  /** 页脚是否固定 */
-  footerFixed: boolean;
-  /** 页脚是否可见 */
-  footerVisible: boolean;
-  /** 顶栏是否隐藏 */
-  headerHidden: boolean;
-  /** header显示模式 */
-  headerMode: LayoutHeaderMode;
-  /** 顶栏是否可见 */
-  headerVisible: boolean;
-  /** 是否移动端 */
-  isMobile: boolean;
-  /** 开启标签页缓存功能 */
-  keepAlive: boolean;
-  /** 布局方式 */
-  layout: LayoutType;
-  /** 支持的语言 */
-  locale: SupportLocale;
-  /** 应用Logo */
-  logo: string;
-  /** logo是否可见 */
-  logoVisible: boolean;
-  /** 导航菜单手风琴模式 */
-  navigationAccordion: boolean;
-  /** 导航菜单是否切割，只在 layout=mixed-nav 生效 */
-  navigationSplit: boolean;
-  /** 导航菜单风格 */
-  navigationStyle: NavigationStyle;
-  /** 是否开启页面加载进度条 */
-  pageProgress: boolean;
-  /** 页面切换动画 */
-  pageTransition: PageTransitionType;
-  /** 页面切换动画是否启用 */
-  pageTransitionEnable: boolean;
-  /** 是否开启半深色菜单（只在theme='light'时生效） */
-  semiDarkMenu: boolean;
-  /** 是否启用快捷键 */
-  shortcutKeys: boolean;
-  /** 是否显示偏好设置 */
-  showPreference: boolean;
-  /** 侧边栏是否折叠 */
-  sideCollapse: boolean;
-  /** 侧边栏折叠时，是否显示title */
-  sideCollapseShowTitle: boolean;
-  /** 菜单自动展开状态 */
-  sideExpandOnHover: boolean;
-  /** 侧边栏扩展区域是否折叠 */
-  sideExtraCollapse: boolean;
-  /** 侧边栏是否隐藏 */
-  sideHidden: boolean;
-  /** 侧边栏是否可见 */
-  sideVisible: boolean;
-  /** 侧边栏宽度 */
-  sideWidth: number;
-  /** 是否开启多标签页图标 */
-  tabsIcon: boolean;
-  /** 是否开启多标签页 */
-  tabsVisible: boolean;
-  /** 当前主题 */
-  theme: ThemeType;
-}
-
-// 这些属性是静态的，不会随着用户的操作而改变
-interface StaticPreference {
-  /** 主题色预设 */
-  colorPrimaryPresets: string[];
-  /** 支持的语言 */
-  supportLanguages: Language[];
-}
-
-type PreferenceKeys = keyof Preference;
-
-export type {
-  AuthPageLayout,
-  BreadcrumbStyle,
-  ContentCompactType,
-  LayoutHeaderMode,
-  LayoutType,
-  PageTransitionType,
-  Preference,
-  PreferenceKeys,
-  StaticPreference,
-  SupportLocale,
-  ThemeType,
-};
diff --git a/packages/@vben-core/uikit/layout-ui/src/vben-layout.ts b/packages/@vben-core/uikit/layout-ui/src/vben-layout.ts
index 00eb6176..10c92802 100644
--- a/packages/@vben-core/uikit/layout-ui/src/vben-layout.ts
+++ b/packages/@vben-core/uikit/layout-ui/src/vben-layout.ts
@@ -1,8 +1,8 @@
 import type {
   ContentCompactType,
-  LayoutHeaderMode,
+  LayoutHeaderModeType,
   LayoutType,
-  ThemeType,
+  ThemeModeType,
 } from '@vben-core/typings';
 
 interface VbenLayoutProps {
@@ -86,7 +86,7 @@ interface VbenLayoutProps {
    * header 显示模式
    * @default 'fixed'
    */
-  headerMode?: LayoutHeaderMode;
+  headerMode?: LayoutHeaderModeType;
   /**
    * header是否显示
    * @default true
@@ -146,7 +146,7 @@ interface VbenLayoutProps {
    * 侧边栏
    * @default dark
    */
-  sideTheme?: ThemeType;
+  sideTheme?: ThemeModeType;
   /**
    * 侧边栏是否可见
    * @default true
diff --git a/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue b/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue
index 4c9b6249..93e23354 100644
--- a/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue
+++ b/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue
@@ -460,7 +460,7 @@ function handleOpenMenu() {
 
 <template>
   <div class="relative flex min-h-full w-full">
-    <slot name="preference"></slot>
+    <slot name="preferences"></slot>
     <slot name="floating-button-group"></slot>
     <LayoutSide
       v-if="sideVisibleState"
diff --git a/packages/@vben-core/uikit/menu-ui/src/interface/index.ts b/packages/@vben-core/uikit/menu-ui/src/interface/index.ts
index c88186e0..9e985bf1 100644
--- a/packages/@vben-core/uikit/menu-ui/src/interface/index.ts
+++ b/packages/@vben-core/uikit/menu-ui/src/interface/index.ts
@@ -1,4 +1,4 @@
-import type { MenuRecordBadgeRaw, ThemeType } from '@vben-core/typings';
+import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
 
 import type { Ref } from 'vue';
 
@@ -46,7 +46,7 @@ interface MenuProps {
    * @zh_CN 菜单主题
    * @default dark
    */
-  theme?: ThemeType;
+  theme?: ThemeModeType;
 }
 
 interface SubMenuProps extends MenuRecordBadgeRaw {
diff --git a/packages/@vben-core/uikit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue b/packages/@vben-core/uikit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue
index 443fe124..542a69ee 100644
--- a/packages/@vben-core/uikit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/packages/@vben-core/uikit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -16,7 +16,7 @@ const props = withDefaults(
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn('hover:text-foreground  transition-colors', props.class)"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
   >
     <slot></slot>
   </Primitive>
diff --git a/packages/@vben-core/uikit/shadcn-ui/src/components/ui/popover/PopoverContent.vue b/packages/@vben-core/uikit/shadcn-ui/src/components/ui/popover/PopoverContent.vue
index f8d3f7eb..d5ed08f5 100644
--- a/packages/@vben-core/uikit/shadcn-ui/src/components/ui/popover/PopoverContent.vue
+++ b/packages/@vben-core/uikit/shadcn-ui/src/components/ui/popover/PopoverContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2  w-72 rounded-md border p-4 shadow-md outline-none',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-72 rounded-md border p-4 shadow-md outline-none',
           props.class,
         )
       "
diff --git a/packages/README.md b/packages/README.md
new file mode 100644
index 00000000..c3edcbd9
--- /dev/null
+++ b/packages/README.md
@@ -0,0 +1 @@
+# packages
diff --git a/packages/business/common-ui/package.json b/packages/business/common-ui/package.json
index 3e5d5579..fb74a311 100644
--- a/packages/business/common-ui/package.json
+++ b/packages/business/common-ui/package.json
@@ -46,10 +46,10 @@
   "dependencies": {
     "@vben-core/design": "workspace:*",
     "@vben-core/iconify": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/preference": "workspace:*",
     "@vueuse/core": "^10.10.0",
     "@vueuse/integrations": "^10.10.0",
     "qrcode": "^1.5.3",
diff --git a/packages/business/common-ui/src/authentication/color-toggle.vue b/packages/business/common-ui/src/authentication/color-toggle.vue
index d43fba8f..daba3df8 100644
--- a/packages/business/common-ui/src/authentication/color-toggle.vue
+++ b/packages/business/common-ui/src/authentication/color-toggle.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { IcRoundColorLens } from '@vben-core/iconify';
-import { VbenIconButton } from '@vben-core/shadcn-ui';
-
 import {
-  preference,
-  staticPreference,
-  updatePreference,
-} from '@vben/preference';
+  COLOR_PRIMARY_RESETS,
+  preferences,
+  updatePreferences,
+} from '@vben-core/preferences';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
   name: 'AuthenticationColorToggle',
 });
 
 function handleUpdate(value: string) {
-  updatePreference({
-    colorPrimary: value,
+  updatePreferences({
+    theme: {
+      colorPrimary: value,
+    },
   });
 }
 </script>
@@ -24,10 +25,7 @@ function handleUpdate(value: string) {
     <div
       class="ease-ou flex w-0 overflow-hidden transition-all duration-500 group-hover:w-48"
     >
-      <template
-        v-for="color in staticPreference.colorPrimaryPresets"
-        :key="color"
-      >
+      <template v-for="color in COLOR_PRIMARY_RESETS" :key="color">
         <VbenIconButton
           class="flex-center flex-shrink-0"
           @click="handleUpdate(color)"
@@ -35,7 +33,9 @@ function handleUpdate(value: string) {
           <div
             class="relative h-3.5 w-3.5 rounded-[2px] before:absolute before:left-0.5 before:top-0.5 before:h-2.5 before:w-2.5 before:rounded-[2px] before:border before:border-gray-900 before:opacity-0 before:transition-all before:duration-150 before:content-[''] hover:scale-110"
             :class="[
-              preference.colorPrimary === color ? `before:opacity-100` : '',
+              preferences.theme.colorPrimary === color
+                ? `before:opacity-100`
+                : '',
             ]"
             :style="{ backgroundColor: color }"
           ></div>
diff --git a/packages/business/common-ui/src/authentication/layout-toggle.vue b/packages/business/common-ui/src/authentication/layout-toggle.vue
index 2d91cb98..1feee130 100644
--- a/packages/business/common-ui/src/authentication/layout-toggle.vue
+++ b/packages/business/common-ui/src/authentication/layout-toggle.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import type { AuthPageLayout } from '@vben/types';
 import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
 
 import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
+import { preferences, usePreferences } from '@vben-core/preferences';
 import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
 
 import { $t } from '@vben/locales';
-import { preference, updatePreference, usePreference } from '@vben/preference';
 import { computed } from 'vue';
 
 defineOptions({
   name: 'AuthenticationLayoutToggle',
-  // inheritAttrs: false,
 });
 
 const menus = computed((): VbenDropdownMenuItem[] => [
@@ -32,20 +30,13 @@ const menus = computed((): VbenDropdownMenuItem[] => [
   },
 ]);
 
-function handleUpdate(value: string) {
-  updatePreference({
-    authPageLayout: value as AuthPageLayout,
-  });
-}
-
-const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
+const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
 </script>
 
 <template>
   <VbenDropdownRadioMenu
+    v-model="preferences.app.authPageLayout"
     :menus="menus"
-    :model-value="preference.authPageLayout"
-    @update:model-value="handleUpdate"
   >
     <VbenIconButton>
       <MdiDockRight v-if="authPanelRight" class="size-5" />
diff --git a/packages/business/common-ui/src/index.ts b/packages/business/common-ui/src/index.ts
index 6806ec79..c3c0e869 100644
--- a/packages/business/common-ui/src/index.ts
+++ b/packages/business/common-ui/src/index.ts
@@ -4,7 +4,7 @@ export * from './global-provider';
 export * from './global-search';
 export * from './language-toggle';
 export * from './notification';
-export * from './preference';
+export * from './preferences';
 export * from './spinner';
 export * from './theme-toggle';
 export * from './user-dropdown';
diff --git a/packages/business/common-ui/src/language-toggle/language-toggle.vue b/packages/business/common-ui/src/language-toggle/language-toggle.vue
index eb5ff7f2..a187759e 100644
--- a/packages/business/common-ui/src/language-toggle/language-toggle.vue
+++ b/packages/business/common-ui/src/language-toggle/language-toggle.vue
@@ -1,26 +1,28 @@
 <script setup lang="ts">
-import type { SupportLocale } from '@vben/types';
+import type { LocaleSupportType } from '@vben/types';
 
 import { IcBaselineLanguage } from '@vben-core/iconify';
+import {
+  SUPPORT_LANGUAGES,
+  preferences,
+  updatePreferences,
+} from '@vben-core/preferences';
 import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
 
 import { loadLocaleMessages } from '@vben/locales';
-import {
-  preference,
-  staticPreference,
-  updatePreference,
-} from '@vben/preference';
 
 defineOptions({
   name: 'LanguageToggle',
 });
 
-const menus = staticPreference.supportLanguages;
+const menus = SUPPORT_LANGUAGES;
 
 async function handleUpdate(value: string) {
-  const locale = value as SupportLocale;
-  updatePreference({
-    locale,
+  const locale = value as LocaleSupportType;
+  updatePreferences({
+    app: {
+      locale,
+    },
   });
   // 更改预览
   await loadLocaleMessages(locale);
@@ -31,7 +33,7 @@ async function handleUpdate(value: string) {
   <div>
     <VbenDropdownRadioMenu
       :menus="menus"
-      :model-value="preference.locale"
+      :model-value="preferences.app.locale"
       @update:model-value="handleUpdate"
     >
       <VbenIconButton>
diff --git a/packages/business/common-ui/src/preference/index.ts b/packages/business/common-ui/src/preference/index.ts
deleted file mode 100644
index 5713cc01..00000000
--- a/packages/business/common-ui/src/preference/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as PreferenceWidget } from './preference-widget.vue';
diff --git a/packages/business/common-ui/src/preference/preference-widget.vue b/packages/business/common-ui/src/preference/preference-widget.vue
deleted file mode 100644
index 19d11073..00000000
--- a/packages/business/common-ui/src/preference/preference-widget.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts" setup>
-import type { PreferenceKeys, SupportLocale } from '@vben/types';
-
-import { loadLocaleMessages } from '@vben/locales';
-import {
-  preference,
-  staticPreference,
-  updatePreference,
-} from '@vben/preference';
-
-import Preference from './preference.vue';
-
-function handleUpdate(key: PreferenceKeys, value: boolean | string) {
-  updatePreference({
-    [key]: value,
-  });
-}
-
-function updateLocale(value: string) {
-  const locale = value as SupportLocale;
-  updatePreference({
-    locale,
-  });
-  // 更改预览
-  loadLocaleMessages(locale);
-}
-</script>
-<template>
-  <Preference
-    :color-primary-presets="staticPreference.colorPrimaryPresets"
-    :breadcrumb-visible="preference.breadcrumbVisible"
-    :breadcrumb-style="preference.breadcrumbStyle"
-    :color-gray-mode="preference.colorGrayMode"
-    :breadcrumb-icon="preference.breadcrumbIcon"
-    :color-primary="preference.colorPrimary"
-    :color-weak-mode="preference.colorWeakMode"
-    :content-compact="preference.contentCompact"
-    :breadcrumb-home="preference.breadcrumbHome"
-    :side-collapse="preference.sideCollapse"
-    :layout="preference.layout"
-    :semi-dark-menu="preference.semiDarkMenu"
-    :side-visible="preference.sideVisible"
-    :footer-visible="preference.footerVisible"
-    :tabs-visible="preference.tabsVisible"
-    :header-visible="preference.headerVisible"
-    :footer-fixed="preference.footerFixed"
-    :header-mode="preference.headerMode"
-    :theme="preference.theme"
-    :dynamic-title="preference.dynamicTitle"
-    :breadcrumb-hide-only-one="preference.breadcrumbHideOnlyOne"
-    :page-transition="preference.pageTransition"
-    :page-progress="preference.pageProgress"
-    :tabs-icon="preference.tabsIcon"
-    :locale="preference.locale"
-    :navigation-accordion="preference.navigationAccordion"
-    :navigation-style="preference.navigationStyle"
-    :shortcut-keys="preference.shortcutKeys"
-    :navigation-split="preference.navigationSplit"
-    :side-collapse-show-title="preference.sideCollapseShowTitle"
-    :page-transition-enable="preference.pageTransitionEnable"
-    @update:shortcut-keys="(value) => handleUpdate('shortcutKeys', value)"
-    @update:navigation-style="(value) => handleUpdate('navigationStyle', value)"
-    @update:navigation-accordion="
-      (value) => handleUpdate('navigationAccordion', value)
-    "
-    @update:navigation-split="(value) => handleUpdate('navigationSplit', value)"
-    @update:dynamic-title="(value) => handleUpdate('dynamicTitle', value)"
-    @update:tabs-icon="(value) => handleUpdate('tabsIcon', value)"
-    @update:side-collapse="(value) => handleUpdate('sideCollapse', value)"
-    @update:locale="updateLocale"
-    @update:header-visible="(value) => handleUpdate('headerVisible', value)"
-    @update:side-visible="(value) => handleUpdate('sideVisible', value)"
-    @update:footer-visible="(value) => handleUpdate('footerVisible', value)"
-    @update:tabs-visible="(value) => handleUpdate('tabsVisible', value)"
-    @update:header-mode="(value) => handleUpdate('headerMode', value)"
-    @update:footer-fixed="(value) => handleUpdate('footerFixed', value)"
-    @update:breadcrumb-visible="
-      (value) => handleUpdate('breadcrumbVisible', value)
-    "
-    @update:breadcrumb-hide-only-one="
-      (value) => handleUpdate('breadcrumbHideOnlyOne', value)
-    "
-    @update:side-collapse-show-title="
-      (value) => handleUpdate('sideCollapseShowTitle', value)
-    "
-    @update:breadcrumb-home="(value) => handleUpdate('breadcrumbHome', value)"
-    @update:breadcrumb-icon="(value) => handleUpdate('breadcrumbIcon', value)"
-    @update:breadcrumb-style="(value) => handleUpdate('breadcrumbStyle', value)"
-    @update:page-transition-enable="
-      (value) => handleUpdate('pageTransitionEnable', value)
-    "
-    @update:color-gray-mode="(value) => handleUpdate('colorGrayMode', value)"
-    @update:page-transition="(value) => handleUpdate('pageTransition', value)"
-    @update:page-progress="(value) => handleUpdate('pageProgress', value)"
-    @update:color-primary="(value) => handleUpdate('colorPrimary', value)"
-    @update:color-weak-mode="(value) => handleUpdate('colorWeakMode', value)"
-    @update:content-compact="(value) => handleUpdate('contentCompact', value)"
-    @update:layout="(value) => handleUpdate('layout', value)"
-    @update:semi-dark-menu="(value) => handleUpdate('semiDarkMenu', value)"
-    @update:theme="(value) => handleUpdate('theme', value)"
-  />
-</template>
diff --git a/packages/business/common-ui/src/preference/use-open-preference.ts b/packages/business/common-ui/src/preference/use-open-preference.ts
deleted file mode 100644
index a8ebae2b..00000000
--- a/packages/business/common-ui/src/preference/use-open-preference.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ref } from 'vue';
-
-const openPreference = ref(false);
-
-function useOpenPreference() {
-  function handleOpenPreference() {
-    openPreference.value = true;
-  }
-
-  return {
-    handleOpenPreference,
-    openPreference,
-  };
-}
-
-export { useOpenPreference };
diff --git a/packages/business/common-ui/src/preference/blocks/block.vue b/packages/business/common-ui/src/preferences/blocks/block.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/block.vue
rename to packages/business/common-ui/src/preferences/blocks/block.vue
diff --git a/packages/business/common-ui/src/preference/blocks/general/animation.vue b/packages/business/common-ui/src/preferences/blocks/general/animation.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/general/animation.vue
rename to packages/business/common-ui/src/preferences/blocks/general/animation.vue
diff --git a/packages/business/common-ui/src/preference/blocks/general/general.vue b/packages/business/common-ui/src/preferences/blocks/general/general.vue
similarity index 79%
rename from packages/business/common-ui/src/preference/blocks/general/general.vue
rename to packages/business/common-ui/src/preferences/blocks/general/general.vue
index 29c4e45f..8d983446 100644
--- a/packages/business/common-ui/src/preference/blocks/general/general.vue
+++ b/packages/business/common-ui/src/preferences/blocks/general/general.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { SelectListItem } from '@vben/types';
 
+import { SUPPORT_LANGUAGES } from '@vben-core/preferences';
+
 import { $t } from '@vben/locales';
-import { staticPreference } from '@vben/preference';
 
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
@@ -15,12 +16,10 @@ const locale = defineModel<string>('locale');
 const dynamicTitle = defineModel<boolean>('dynamicTitle');
 const shortcutKeys = defineModel<boolean>('shortcutKeys');
 
-const localeItems: SelectListItem[] = staticPreference.supportLanguages.map(
-  (item) => ({
-    label: item.text,
-    value: item.key,
-  }),
-);
+const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
+  label: item.text,
+  value: item.key,
+}));
 </script>
 
 <template>
diff --git a/packages/business/common-ui/src/preference/blocks/index.ts b/packages/business/common-ui/src/preferences/blocks/index.ts
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/index.ts
rename to packages/business/common-ui/src/preferences/blocks/index.ts
diff --git a/packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue b/packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/breadcrumb.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue
diff --git a/packages/business/common-ui/src/preference/blocks/layout/content.vue b/packages/business/common-ui/src/preferences/blocks/layout/content.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/content.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/content.vue
diff --git a/packages/business/common-ui/src/preference/blocks/layout/footer.vue b/packages/business/common-ui/src/preferences/blocks/layout/footer.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/footer.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/footer.vue
diff --git a/packages/business/common-ui/src/preference/blocks/layout/header.vue b/packages/business/common-ui/src/preferences/blocks/layout/header.vue
similarity index 87%
rename from packages/business/common-ui/src/preference/blocks/layout/header.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/header.vue
index de44b933..92d08468 100644
--- a/packages/business/common-ui/src/preference/blocks/layout/header.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/header.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LayoutHeaderMode, SelectListItem } from '@vben/types';
+import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
 
 import { $t } from '@vben/locales';
 
@@ -13,7 +13,7 @@ defineOptions({
 defineProps<{ disabled: boolean }>();
 
 const headerVisible = defineModel<boolean>('headerVisible');
-const headerMode = defineModel<LayoutHeaderMode>('headerMode');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 
 const localeItems: SelectListItem[] = [
   {
diff --git a/packages/business/common-ui/src/preference/blocks/layout/interface-control.vue b/packages/business/common-ui/src/preferences/blocks/layout/interface-control.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/interface-control.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/interface-control.vue
diff --git a/packages/business/common-ui/src/preference/blocks/layout/layout.vue b/packages/business/common-ui/src/preferences/blocks/layout/layout.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/layout.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/layout.vue
diff --git a/packages/business/common-ui/src/preference/blocks/layout/navigation.vue b/packages/business/common-ui/src/preferences/blocks/layout/navigation.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/navigation.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/navigation.vue
diff --git a/packages/business/common-ui/src/preference/blocks/layout/sidebar.vue b/packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/sidebar.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue
diff --git a/packages/business/common-ui/src/preference/blocks/layout/tabs.vue b/packages/business/common-ui/src/preferences/blocks/layout/tabs.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/layout/tabs.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/tabs.vue
diff --git a/packages/business/common-ui/src/preference/blocks/select-item.vue b/packages/business/common-ui/src/preferences/blocks/select-item.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/select-item.vue
rename to packages/business/common-ui/src/preferences/blocks/select-item.vue
diff --git a/packages/business/common-ui/src/preference/blocks/switch-item.vue b/packages/business/common-ui/src/preferences/blocks/switch-item.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/switch-item.vue
rename to packages/business/common-ui/src/preferences/blocks/switch-item.vue
diff --git a/packages/business/common-ui/src/preference/blocks/theme/color-mode.vue b/packages/business/common-ui/src/preferences/blocks/theme/color-mode.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/theme/color-mode.vue
rename to packages/business/common-ui/src/preferences/blocks/theme/color-mode.vue
diff --git a/packages/business/common-ui/src/preference/blocks/theme/color.vue b/packages/business/common-ui/src/preferences/blocks/theme/color.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/theme/color.vue
rename to packages/business/common-ui/src/preferences/blocks/theme/color.vue
diff --git a/packages/business/common-ui/src/preference/blocks/theme/theme.vue b/packages/business/common-ui/src/preferences/blocks/theme/theme.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/theme/theme.vue
rename to packages/business/common-ui/src/preferences/blocks/theme/theme.vue
diff --git a/packages/business/common-ui/src/preference/blocks/toggle-item.vue b/packages/business/common-ui/src/preferences/blocks/toggle-item.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/blocks/toggle-item.vue
rename to packages/business/common-ui/src/preferences/blocks/toggle-item.vue
diff --git a/packages/business/common-ui/src/preference/icons/content-compact.vue b/packages/business/common-ui/src/preferences/icons/content-compact.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/content-compact.vue
rename to packages/business/common-ui/src/preferences/icons/content-compact.vue
diff --git a/packages/business/common-ui/src/preference/icons/full-content.vue b/packages/business/common-ui/src/preferences/icons/full-content.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/full-content.vue
rename to packages/business/common-ui/src/preferences/icons/full-content.vue
diff --git a/packages/business/common-ui/src/preference/icons/header-nav.vue b/packages/business/common-ui/src/preferences/icons/header-nav.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/header-nav.vue
rename to packages/business/common-ui/src/preferences/icons/header-nav.vue
diff --git a/packages/business/common-ui/src/preference/icons/index.ts b/packages/business/common-ui/src/preferences/icons/index.ts
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/index.ts
rename to packages/business/common-ui/src/preferences/icons/index.ts
diff --git a/packages/business/common-ui/src/preference/icons/mixed-nav.vue b/packages/business/common-ui/src/preferences/icons/mixed-nav.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/mixed-nav.vue
rename to packages/business/common-ui/src/preferences/icons/mixed-nav.vue
diff --git a/packages/business/common-ui/src/preference/icons/setting.vue b/packages/business/common-ui/src/preferences/icons/setting.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/setting.vue
rename to packages/business/common-ui/src/preferences/icons/setting.vue
diff --git a/packages/business/common-ui/src/preference/icons/side-mixed-nav.vue b/packages/business/common-ui/src/preferences/icons/side-mixed-nav.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/side-mixed-nav.vue
rename to packages/business/common-ui/src/preferences/icons/side-mixed-nav.vue
diff --git a/packages/business/common-ui/src/preference/icons/side-nav.vue b/packages/business/common-ui/src/preferences/icons/side-nav.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/icons/side-nav.vue
rename to packages/business/common-ui/src/preferences/icons/side-nav.vue
diff --git a/packages/business/common-ui/src/preferences/index.ts b/packages/business/common-ui/src/preferences/index.ts
new file mode 100644
index 00000000..ba811513
--- /dev/null
+++ b/packages/business/common-ui/src/preferences/index.ts
@@ -0,0 +1 @@
+export { default as PreferencesWidget } from './preferences-widget.vue';
diff --git a/packages/business/common-ui/src/preferences/preferences-widget.vue b/packages/business/common-ui/src/preferences/preferences-widget.vue
new file mode 100644
index 00000000..59035a56
--- /dev/null
+++ b/packages/business/common-ui/src/preferences/preferences-widget.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { LocaleSupportType } from '@vben/types';
+
+import {
+  COLOR_PRIMARY_RESETS,
+  flatPreferences,
+  updatePreferences,
+} from '@vben-core/preferences';
+
+import { loadLocaleMessages } from '@vben/locales';
+
+import Preferences from './preferences.vue';
+
+function updateLocale(value: string) {
+  const locale = value as LocaleSupportType;
+  updatePreferences({
+    app: { locale },
+  });
+  // 更改预览
+  loadLocaleMessages(locale);
+}
+</script>
+<template>
+  <Preferences
+    v-model:breadcrumb-visible="flatPreferences.breadcrumbEnable"
+    v-model:breadcrumb-style="flatPreferences.breadcrumbStyleType"
+    v-model:color-gray-mode="flatPreferences.appColorGrayMode"
+    v-model:breadcrumb-icon="flatPreferences.breadcrumbShowIcon"
+    v-model:color-primary="flatPreferences.themeColorPrimary"
+    v-model:color-weak-mode="flatPreferences.appColorWeakMode"
+    v-model:content-compact="flatPreferences.appContentCompact"
+    v-model:breadcrumb-home="flatPreferences.breadcrumbShowHome"
+    v-model:side-collapse="flatPreferences.sidebarCollapse"
+    v-model:layout="flatPreferences.appLayout"
+    v-model:semi-dark-menu="flatPreferences.appSemiDarkMenu"
+    v-model:side-visible="flatPreferences.sidebarEnable"
+    v-model:footer-visible="flatPreferences.footerEnable"
+    v-model:tabs-visible="flatPreferences.tabbarEnable"
+    v-model:header-visible="flatPreferences.headerEnable"
+    v-model:header-mode="flatPreferences.headerMode"
+    v-model:footer-fixed="flatPreferences.footerFixed"
+    v-model:theme="flatPreferences.appThemeMode"
+    v-model:dynamic-title="flatPreferences.appDynamicTitle"
+    v-model:breadcrumb-hide-only-one="flatPreferences.breadcrumbHideOnlyOne"
+    v-model:page-transition="flatPreferences.transitionName"
+    v-model:page-progress="flatPreferences.transitionProgress"
+    v-model:tabs-icon="flatPreferences.tabbarShowIcon"
+    v-model:navigation-accordion="flatPreferences.navigationAccordion"
+    v-model:navigation-style="flatPreferences.navigationStyleType"
+    v-model:shortcut-keys="flatPreferences.shortcutKeysEnable"
+    v-model:navigation-split="flatPreferences.navigationSplit"
+    v-model:page-transition-enable="flatPreferences.transitionEnable"
+    v-model:side-collapse-show-title="flatPreferences.sidebarCollapseShowTitle"
+    :color-primary-presets="COLOR_PRIMARY_RESETS"
+    :locale="flatPreferences.appLocale"
+    @update:locale="updateLocale"
+  />
+</template>
diff --git a/packages/business/common-ui/src/preference/preference.vue b/packages/business/common-ui/src/preferences/preferences.vue
similarity index 95%
rename from packages/business/common-ui/src/preference/preference.vue
rename to packages/business/common-ui/src/preferences/preferences.vue
index 0cfc3463..17ef7382 100644
--- a/packages/business/common-ui/src/preference/preference.vue
+++ b/packages/business/common-ui/src/preferences/preferences.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import type { LayoutHeaderMode, LayoutType } from '@vben/types';
+import type { LayoutHeaderModeType, LayoutType } from '@vben/types';
 import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/iconify';
+import {
+  preferences,
+  resetPreferences,
+  usePreferences,
+} from '@vben-core/preferences';
 import {
   VbenButton,
   VbenIconButton,
@@ -12,7 +17,6 @@ import {
 } from '@vben-core/shadcn-ui';
 
 import { $t } from '@vben/locales';
-import { preference, resetPreference, usePreference } from '@vben/preference';
 import { useClipboard } from '@vueuse/core';
 import { computed } from 'vue';
 
@@ -33,7 +37,7 @@ import {
   ThemeColor,
 } from './blocks';
 import Trigger from './trigger.vue';
-import { useOpenPreference } from './use-open-preference';
+import { useOpenPreferences } from './use-open-preferences';
 
 withDefaults(defineProps<{ colorPrimaryPresets: string[] }>(), {
   colorPrimaryPresets: () => [],
@@ -67,7 +71,7 @@ const tabsVisible = defineModel<boolean>('tabsVisible');
 const tabsIcon = defineModel<boolean>('tabsIcon');
 // const logoVisible = defineModel<boolean>('logoVisible');
 const headerVisible = defineModel<boolean>('headerVisible');
-const headerMode = defineModel<LayoutHeaderMode>('headerMode');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 const footerVisible = defineModel<boolean>('footerVisible');
 const footerFixed = defineModel<boolean>('footerFixed');
 
@@ -79,7 +83,7 @@ const {
   isSideMixedNav,
   isSideMode,
   isSideNav,
-} = usePreference();
+} = usePreferences();
 const { copy } = useClipboard();
 
 const tabs = computed((): SegmentedItem[] => {
@@ -108,11 +112,11 @@ const showBreadcrumbConfig = computed(() => {
     !isFullContent.value &&
     !isMixedNav.value &&
     !isHeaderNav.value &&
-    preference.headerVisible
+    preferences.header.enable
   );
 });
 
-const { openPreference } = useOpenPreference();
+const { openPreferences } = useOpenPreferences();
 
 async function handleCopy() {
   await copy(JSON.stringify(diffPreference.value, null, 2));
@@ -124,7 +128,7 @@ function handleReset() {
   if (!diffPreference.value) {
     return;
   }
-  resetPreference();
+  resetPreferences();
   toast($t('preference.reset-success'));
 }
 </script>
@@ -132,7 +136,7 @@ function handleReset() {
 <template>
   <div class="z-100 fixed right-0 top-1/3">
     <VbenSheet
-      v-model:open="openPreference"
+      v-model:open="openPreferences"
       :description="$t('preference.preferences-subtitle')"
       :title="$t('preference.preferences')"
     >
diff --git a/packages/business/common-ui/src/preference/trigger.vue b/packages/business/common-ui/src/preferences/trigger.vue
similarity index 100%
rename from packages/business/common-ui/src/preference/trigger.vue
rename to packages/business/common-ui/src/preferences/trigger.vue
diff --git a/packages/business/common-ui/src/preferences/use-open-preferences.ts b/packages/business/common-ui/src/preferences/use-open-preferences.ts
new file mode 100644
index 00000000..eb9d847c
--- /dev/null
+++ b/packages/business/common-ui/src/preferences/use-open-preferences.ts
@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+
+const openPreferences = ref(false);
+
+function useOpenPreferences() {
+  function handleOpenPreference() {
+    openPreferences.value = true;
+  }
+
+  return {
+    handleOpenPreference,
+    openPreferences,
+  };
+}
+
+export { useOpenPreferences };
diff --git a/packages/business/common-ui/src/theme-toggle/theme-toggle.vue b/packages/business/common-ui/src/theme-toggle/theme-toggle.vue
index b6e74f5e..8b761228 100644
--- a/packages/business/common-ui/src/theme-toggle/theme-toggle.vue
+++ b/packages/business/common-ui/src/theme-toggle/theme-toggle.vue
@@ -4,6 +4,11 @@ import {
   IcRoundWbSunny,
   MdiMoonAndStars,
 } from '@vben-core/iconify';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben-core/preferences';
 import {
   ToggleGroup,
   ToggleGroupItem,
@@ -11,7 +16,6 @@ import {
 } from '@vben-core/shadcn-ui';
 
 import { $t } from '@vben/locales';
-import { preference, updatePreference, usePreference } from '@vben/preference';
 
 import ThemeButton from './theme-button.vue';
 
@@ -24,10 +28,12 @@ withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
 });
 
 function handleChange(isDark: boolean) {
-  updatePreference({ theme: isDark ? 'dark' : 'light' });
+  updatePreferences({
+    app: { themeMode: isDark ? 'dark' : 'light' },
+  });
 }
 
-const { isDark } = usePreference();
+const { isDark } = usePreferences();
 
 const PRESETS = [
   {
@@ -58,7 +64,7 @@ const PRESETS = [
         />
       </template>
       <ToggleGroup
-        :model-value="preference.theme"
+        :model-value="preferences.app.themeMode"
         type="single"
         variant="outline"
         class="gap-2"
diff --git a/packages/business/common-ui/src/user-dropdown/user-dropdown.vue b/packages/business/common-ui/src/user-dropdown/user-dropdown.vue
index d051c1a1..30bb88ea 100644
--- a/packages/business/common-ui/src/user-dropdown/user-dropdown.vue
+++ b/packages/business/common-ui/src/user-dropdown/user-dropdown.vue
@@ -2,6 +2,7 @@
 import type { AnyFunction } from '@vben/types';
 
 import { IcRoundLogout, IcRoundSettingsSuggest } from '@vben-core/iconify';
+import { preferences } from '@vben-core/preferences';
 import {
   Badge,
   DropdownMenu,
@@ -20,11 +21,10 @@ import { isWindowsOs } from '@vben-core/toolkit';
 import type { Component } from 'vue';
 
 import { $t } from '@vben/locales';
-import { preference } from '@vben/preference';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { computed, ref } from 'vue';
 
-import { useOpenPreference } from '../preference/use-open-preference';
+import { useOpenPreferences } from '../preferences/use-open-preferences';
 
 interface Props {
   /**
@@ -72,12 +72,12 @@ const emit = defineEmits<{ logout: [] }>();
 const openPopover = ref(false);
 const openDialog = ref(false);
 
-const { handleOpenPreference } = useOpenPreference();
+const { handleOpenPreference } = useOpenPreferences();
 
 const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
 
 const shortcutKeys = computed(() => {
-  return props.enableShortcutKey && preference.shortcutKeys;
+  return props.enableShortcutKey && preferences.shortcutKeys.enable;
 });
 
 function handleLogout() {
@@ -161,7 +161,7 @@ if (shortcutKeys.value) {
       </DropdownMenuItem>
       <DropdownMenuSeparator />
       <DropdownMenuItem
-        v-if="preference"
+        v-if="preferences.shortcutKeys.enable"
         class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
         @click="handleOpenPreference"
       >
diff --git a/packages/business/layouts/package.json b/packages/business/layouts/package.json
index 79d39e87..ea0dca23 100644
--- a/packages/business/layouts/package.json
+++ b/packages/business/layouts/package.json
@@ -44,13 +44,13 @@
     "@vben-core/iconify": "workspace:*",
     "@vben-core/layout-ui": "workspace:*",
     "@vben-core/menu-ui": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/stores": "workspace:*",
     "@vben-core/tabs-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/preference": "workspace:*",
-    "@vben/stores": "workspace:*",
     "vue": "3.4.27",
     "vue-router": "^4.3.2"
   },
diff --git a/packages/business/layouts/src/authentication/authentication.vue b/packages/business/layouts/src/authentication/authentication.vue
index adfe126a..6e754597 100644
--- a/packages/business/layouts/src/authentication/authentication.vue
+++ b/packages/business/layouts/src/authentication/authentication.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { preferences, usePreferences } from '@vben-core/preferences';
+
 import { $t } from '@vben/locales';
-import { preference, usePreference } from '@vben/preference';
+import { computed } from 'vue';
 
 import AuthenticationFromView from './from-view.vue';
 import SloganIcon from './icons/slogan.vue';
@@ -10,7 +12,8 @@ defineOptions({
   name: 'Authentication',
 });
 
-const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
+const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
+const appName = computed(() => preferences.app.name);
 </script>
 
 <template>
@@ -33,13 +36,13 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
         "
       >
         <img
-          :alt="preference.appName"
-          :src="preference.logo"
+          :alt="appName"
+          :src="preferences.logo.source"
           :width="42"
           class="mr-2"
         />
         <p class="text-xl font-medium">
-          {{ preference.appName }}
+          {{ appName }}
         </p>
       </div>
     </div>
@@ -48,10 +51,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
         class="absolute inset-0 h-full w-full bg-[var(--color-authentication)]"
       >
         <div class="flex-col-center mr-20 h-full">
-          <SloganIcon
-            :alt="preference.appName"
-            class="animate-float h-64 w-2/5"
-          />
+          <SloganIcon :alt="appName" class="animate-float h-64 w-2/5" />
           <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
             {{ $t('authentication.layout-title') }}
           </div>
diff --git a/packages/business/layouts/src/authentication/from-view.vue b/packages/business/layouts/src/authentication/from-view.vue
index 27ef5dba..095982bd 100644
--- a/packages/business/layouts/src/authentication/from-view.vue
+++ b/packages/business/layouts/src/authentication/from-view.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { preference } from '@vben/preference';
+import { preferences } from '@vben-core/preferences';
 
 import Toolbar from './toolbar.vue';
 
@@ -28,7 +28,7 @@ defineOptions({
     <div
       class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
     >
-      {{ preference.copyright }}
+      {{ preferences.app.copyright }}
     </div>
   </div>
 </template>
diff --git a/packages/business/layouts/src/authentication/index.ts b/packages/business/layouts/src/authentication/index.ts
index 6c684d11..19249a5f 100644
--- a/packages/business/layouts/src/authentication/index.ts
+++ b/packages/business/layouts/src/authentication/index.ts
@@ -1 +1 @@
-export { default as AuthPageLayout } from './authentication.vue';
+export { default as AuthPageLayoutType } from './authentication.vue';
diff --git a/packages/business/layouts/src/basic/content/content.vue b/packages/business/layouts/src/basic/content/content.vue
index 3d6a6ac5..7359fc29 100644
--- a/packages/business/layouts/src/basic/content/content.vue
+++ b/packages/business/layouts/src/basic/content/content.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
+import { preferences, usePreferences } from '@vben-core/preferences';
+import { storeToRefs, useTabsStore } from '@vben-core/stores';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
-import { preference, usePreference } from '@vben/preference';
-import { storeToRefs, useTabsStore } from '@vben/stores';
-
 import { IFrameRouterView } from '../../iframe';
 
 defineOptions({ name: 'LayoutContent' });
 
-const { keepAlive } = usePreference();
+const { keepAlive } = usePreferences();
 
 const tabsStore = useTabsStore();
 const { getCacheTabs, getExcludeTabs, renderRouteView } =
@@ -17,15 +16,15 @@ const { getCacheTabs, getExcludeTabs, renderRouteView } =
 // 页面切换动画
 function getTransitionName(route: RouteLocationNormalizedLoaded) {
   // 如果偏好设置未设置，则不使用动画
-  const { keepAlive, pageTransition, pageTransitionEnable, tabsVisible } =
-    preference;
-  if (!pageTransition || !pageTransitionEnable) {
+  const { tabbar, transition } = preferences;
+  const transitionName = transition.name;
+  if (!transitionName || !transition.enable) {
     return;
   }
 
   // 标签页未启用或者未开启缓存，则使用全局配置动画
-  if (!tabsVisible || !keepAlive) {
-    return pageTransition;
+  if (!tabbar.enable || !keepAlive) {
+    return transitionName;
   }
 
   // 如果页面已经加载过，则不使用动画
@@ -34,7 +33,7 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
   }
   // 已经打开且已经加载过的页面不使用动画
   const inTabs = getCacheTabs.value.includes(route.name as string);
-  return inTabs && route.meta.loaded ? undefined : pageTransition;
+  return inTabs && route.meta.loaded ? undefined : transitionName;
 }
 </script>
 
diff --git a/packages/business/layouts/src/basic/header/header.vue b/packages/business/layouts/src/basic/header/header.vue
index 3069cc97..dd3dcc19 100644
--- a/packages/business/layouts/src/basic/header/header.vue
+++ b/packages/business/layouts/src/basic/header/header.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { preferences } from '@vben-core/preferences';
 import { VbenFullScreen } from '@vben-core/shadcn-ui';
+import { useAccessStore } from '@vben-core/stores';
 
 import { GlobalSearch, LanguageToggle, ThemeToggle } from '@vben/common-ui';
-import { preference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
 
 interface Props {
   /**
@@ -33,7 +33,7 @@ const accessStore = useAccessStore();
   <div class="flex h-full min-w-0 flex-shrink-0 items-center">
     <GlobalSearch
       class="mr-4"
-      :enable-shortcut-key="preference.shortcutKeys"
+      :enable-shortcut-key="preferences.shortcutKeys.enable"
       :menus="accessStore.getAccessMenus"
     />
     <ThemeToggle class="mr-2" />
diff --git a/packages/business/layouts/src/basic/layout.vue b/packages/business/layouts/src/basic/layout.vue
index 46fb2fbe..07548f77 100644
--- a/packages/business/layouts/src/basic/layout.vue
+++ b/packages/business/layouts/src/basic/layout.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
 import { VbenAdminLayout } from '@vben-core/layout-ui';
+import {
+  flatPreferences,
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben-core/preferences';
 import {
   VbenBackTop,
   // VbenFloatingButtonGroup,
@@ -8,9 +14,8 @@ import {
 import { mapTree } from '@vben-core/toolkit';
 import { MenuRecordRaw } from '@vben-core/typings';
 
-import { PreferenceWidget } from '@vben/common-ui';
+import { PreferencesWidget } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { preference, updatePreference, usePreference } from '@vben/preference';
 import { computed } from 'vue';
 
 import { LayoutContent } from './content';
@@ -29,27 +34,24 @@ import { Breadcrumb } from './widgets';
 defineOptions({ name: 'BasicLayout' });
 
 const { isDark, isHeaderNav, isMixedNav, isSideMixedNav, layout } =
-  usePreference();
+  usePreferences();
 
 const headerMenuTheme = computed(() => {
   return isDark.value ? 'dark' : 'light';
 });
 
 const theme = computed(() => {
-  const dark = isDark.value || preference.semiDarkMenu;
+  const dark = isDark.value || preferences.app.semiDarkMenu;
   return dark ? 'dark' : 'light';
 });
 
 const logoClass = computed(() => {
-  return preference.sideCollapseShowTitle &&
-    preference.sideCollapse &&
-    !isMixedNav.value
-    ? 'mx-auto'
-    : '';
+  const { collapse, collapseShowTitle } = preferences.sidebar;
+  return collapseShowTitle && collapse && !isMixedNav.value ? 'mx-auto' : '';
 });
 
 const isMenuRounded = computed(() => {
-  return preference.navigationStyle === 'rounded';
+  return preferences.navigation.styleType === 'rounded';
 });
 
 const logoCollapse = computed(() => {
@@ -57,12 +59,12 @@ const logoCollapse = computed(() => {
     return false;
   }
 
-  const { isMobile, sideCollapse } = preference;
+  const { appIsMobile, sidebarCollapse } = flatPreferences;
 
-  if (!sideCollapse && isMobile) {
+  if (!sidebarCollapse && appIsMobile) {
     return false;
   }
-  return sideCollapse || isSideMixedNav.value;
+  return sidebarCollapse || isSideMixedNav.value;
 });
 
 const showHeaderNav = computed(() => {
@@ -101,40 +103,36 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
 <template>
   <VbenAdminLayout
     v-model:side-extra-visible="extraVisible"
-    :side-collapse-show-title="preference.sideCollapseShowTitle"
-    :side-collapse="preference.sideCollapse"
-    :side-extra-collapse="preference.sideExtraCollapse"
-    :content-compact="preference.contentCompact"
-    :is-mobile="preference.isMobile"
+    v-model:side-collapse="flatPreferences.sidebarCollapse"
+    v-model:side-expand-on-hover="flatPreferences.sidebarExpandOnHover"
+    v-model:side-extra-collapse="flatPreferences.sidebarExtraCollapse"
+    :side-collapse-show-title="preferences.sidebar.collapseShowTitle"
+    :content-compact="preferences.app.contentCompact"
+    :is-mobile="preferences.app.isMobile"
     :layout="layout"
-    :header-mode="preference.headerMode"
-    :footer-fixed="preference.footerFixed"
-    :side-semi-dark="preference.semiDarkMenu"
+    :header-mode="preferences.header.mode"
+    :footer-fixed="preferences.footer.fixed"
+    :side-semi-dark="preferences.app.semiDarkMenu"
     :side-theme="theme"
-    :side-hidden="preference.sideHidden"
+    :side-hidden="preferences.sidebar.hidden"
     :side-visible="sideVisible"
-    :footer-visible="preference.footerVisible"
-    :header-visible="preference.headerVisible"
-    :header-hidden="preference.headerHidden"
-    :side-width="preference.sideWidth"
-    :tabs-visible="preference.tabsVisible"
-    :side-expand-on-hover="preference.sideExpandOnHover"
+    :footer-visible="preferences.footer.enable"
+    :header-visible="preferences.header.enable"
+    :header-hidden="preferences.header.hidden"
+    :side-width="preferences.sidebar.width"
+    :tabs-visible="preferences.tabbar.enable"
     @side-mouse-leave="handleSideMouseLeave"
-    @update:side-collapse="
-      (value: boolean) => updatePreference('sideCollapse', value)
-    "
-    @update:side-extra-collapse="
-      (value: boolean) => updatePreference('sideExtraCollapse', value)
-    "
     @update:side-visible="
-      (value: boolean) => updatePreference('sideVisible', value)
-    "
-    @update:side-expand-on-hover="
-      (value: boolean) => updatePreference('sideExpandOnHover', value)
+      (value: boolean) =>
+        updatePreferences({
+          sidebar: {
+            enable: value,
+          },
+        })
     "
   >
-    <template v-if="preference.showPreference" #preference>
-      <PreferenceWidget />
+    <template v-if="preferences.app.showPreference" #preferences>
+      <PreferencesWidget />
     </template>
 
     <template #floating-button-group>
@@ -146,10 +144,10 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #logo>
       <VbenLogo
         :collapse="logoCollapse"
-        :src="preference.logo"
-        :text="preference.appName"
+        :src="preferences.logo.source"
+        :text="preferences.app.name"
         :theme="showHeaderNav ? headerMenuTheme : theme"
-        :alt="preference.appName"
+        :alt="preferences.app.name"
         :class="logoClass"
       />
     </template>
@@ -157,14 +155,14 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #header>
       <LayoutHeader :theme="theme">
         <template
-          v-if="!showHeaderNav && preference.breadcrumbVisible"
+          v-if="!showHeaderNav && preferences.breadcrumb.enable"
           #breadcrumb
         >
           <Breadcrumb
-            :hide-when-only-one="preference.breadcrumbHideOnlyOne"
-            :type="preference.breadcrumbStyle"
-            :show-icon="preference.breadcrumbIcon"
-            :show-home="preference.breadcrumbHome"
+            :hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
+            :type="preferences.breadcrumb.styleType"
+            :show-icon="preferences.breadcrumb.showIcon"
+            :show-home="preferences.breadcrumb.showHome"
           />
         </template>
         <template v-if="showHeaderNav" #menu>
@@ -190,10 +188,10 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #menu>
       <LayoutMenu
         mode="vertical"
-        :accordion="preference.navigationAccordion"
+        :accordion="preferences.navigation.accordion"
         :rounded="isMenuRounded"
-        :collapse-show-title="preference.sideCollapseShowTitle"
-        :collapse="preference.sideCollapse"
+        :collapse-show-title="preferences.sidebar.collapseShowTitle"
+        :collapse="preferences.sidebar.collapse"
         :theme="theme"
         :menus="wrapperMenus(sideMenus)"
         :default-active="sideActive"
@@ -203,7 +201,7 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #mixed-menu>
       <LayoutMixedMenu
         :rounded="isMenuRounded"
-        :collapse="!preference.sideCollapseShowTitle"
+        :collapse="!preferences.sidebar.collapseShowTitle"
         :active-path="extraActiveMenu"
         :theme="theme"
         @select="handleMixedMenuSelect"
@@ -214,30 +212,30 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <!-- 侧边额外区域 -->
     <template #side-extra>
       <LayoutExtraMenu
-        :accordion="preference.navigationAccordion"
+        :accordion="preferences.navigation.accordion"
         :rounded="isMenuRounded"
         :menus="wrapperMenus(extraMenus)"
-        :collapse="preference.sideExtraCollapse"
+        :collapse="preferences.sidebar.extraCollapse"
         :theme="theme"
       />
     </template>
     <template #side-extra-title>
       <VbenLogo
-        v-if="preference.logoVisible"
-        :text="preference.appName"
+        v-if="preferences.logo.enable"
+        :text="preferences.app.name"
         :theme="theme"
-        :alt="preference.appName"
+        :alt="preferences.app.name"
       />
     </template>
 
     <template #tabs>
       <LayoutTabs
-        v-if="preference.tabsVisible"
-        :show-icon="preference.tabsIcon"
+        v-if="preferences.tabbar.enable"
+        :show-icon="preferences.tabbar.showIcon"
       />
     </template>
     <template #tabs-toolbar>
-      <LayoutTabsToolbar v-if="preference.tabsVisible" />
+      <LayoutTabsToolbar v-if="preferences.tabbar.enable" />
     </template>
 
     <!-- 主体内容 -->
@@ -245,9 +243,9 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
       <LayoutContent />
     </template>
     <!-- 页脚 -->
-    <template v-if="preference.footerVisible" #footer>
-      <LayoutFooter v-if="preference.copyright">
-        {{ preference.copyright }}
+    <template v-if="preferences.footer.enable" #footer>
+      <LayoutFooter v-if="preferences.app.copyright">
+        {{ preferences.app.copyright }}
       </LayoutFooter>
     </template>
   </VbenAdminLayout>
diff --git a/packages/business/layouts/src/basic/menu/mixed-menu.vue b/packages/business/layouts/src/basic/menu/mixed-menu.vue
index 764c6181..32396c3f 100644
--- a/packages/business/layouts/src/basic/menu/mixed-menu.vue
+++ b/packages/business/layouts/src/basic/menu/mixed-menu.vue
@@ -3,8 +3,8 @@ import type { NormalMenuProps } from '@vben-core/menu-ui';
 import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { NormalMenu } from '@vben-core/menu-ui';
+import { useAccessStore } from '@vben-core/stores';
 
-import { useAccessStore } from '@vben/stores';
 import { computed, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 
diff --git a/packages/business/layouts/src/basic/menu/use-extra-menu.ts b/packages/business/layouts/src/basic/menu/use-extra-menu.ts
index f147cb1d..e1c22f1c 100644
--- a/packages/business/layouts/src/basic/menu/use-extra-menu.ts
+++ b/packages/business/layouts/src/basic/menu/use-extra-menu.ts
@@ -1,7 +1,8 @@
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { preference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
+import { preferences } from '@vben-core/preferences';
+import { useAccessStore } from '@vben-core/stores';
+
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -46,7 +47,7 @@ function useExtraMenu() {
     extraMenus.value = rootMenu?.children ?? [];
     extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
 
-    if (preference.sideExpandOnHover) {
+    if (preferences.sidebar.expandOnHover) {
       extraVisible.value = extraMenus.value.length > 0;
     }
   };
@@ -55,7 +56,7 @@ function useExtraMenu() {
    * 侧边菜单鼠标移出事件
    */
   const handleSideMouseLeave = () => {
-    if (preference.sideExpandOnHover) {
+    if (preferences.sidebar.expandOnHover) {
       return;
     }
     extraVisible.value = false;
@@ -69,7 +70,7 @@ function useExtraMenu() {
   };
 
   const handleMenuMouseEnter = (menu: MenuRecordRaw) => {
-    if (!preference.sideExpandOnHover) {
+    if (!preferences.sidebar.expandOnHover) {
       const { findMenu } = findRootMenuByPath(menus.value, menu.path);
       extraMenus.value = findMenu?.children ?? [];
       extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
diff --git a/packages/business/layouts/src/basic/menu/use-mixed-menu.ts b/packages/business/layouts/src/basic/menu/use-mixed-menu.ts
index 1f56fc40..a4cd70c8 100644
--- a/packages/business/layouts/src/basic/menu/use-mixed-menu.ts
+++ b/packages/business/layouts/src/basic/menu/use-mixed-menu.ts
@@ -1,7 +1,8 @@
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { preference, usePreference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
+import { preferences, usePreferences } from '@vben-core/preferences';
+import { useAccessStore } from '@vben-core/stores';
+
 import { computed, onBeforeMount, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -15,17 +16,18 @@ function useMixedMenu() {
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
 
-  const { isMixedNav } = usePreference();
+  const { isMixedNav } = usePreferences();
 
   const needSplit = computed(
-    () => preference.navigationSplit && isMixedNav.value,
+    () => preferences.navigation.split && isMixedNav.value,
   );
 
   const sideVisible = computed(() => {
+    const enableSidebar = preferences.sidebar.enable;
     if (needSplit.value) {
-      return preference.sideVisible && splitSideMenus.value.length > 0;
+      return enableSidebar && splitSideMenus.value.length > 0;
     }
-    return preference.sideVisible;
+    return enableSidebar;
   });
   const menus = computed(() => accessStore.getAccessMenus);
 
diff --git a/packages/business/layouts/src/basic/tabs/tabs-toolbar.vue b/packages/business/layouts/src/basic/tabs/tabs-toolbar.vue
index c8e92cc8..00c66b10 100644
--- a/packages/business/layouts/src/basic/tabs/tabs-toolbar.vue
+++ b/packages/business/layouts/src/basic/tabs/tabs-toolbar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { preferences, updatePreferences } from '@vben-core/preferences';
 import { TabsMore, TabsScreen } from '@vben-core/tabs-ui';
 
-import { preference, updatePreference } from '@vben/preference';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -16,9 +16,13 @@ const menus = computed(() => {
 });
 
 function handleScreenChange(screen: boolean) {
-  updatePreference({
-    headerHidden: !!screen,
-    sideHidden: !!screen,
+  updatePreferences({
+    header: {
+      hidden: !!screen,
+    },
+    sidebar: {
+      hidden: !!screen,
+    },
   });
 }
 </script>
@@ -27,7 +31,7 @@ function handleScreenChange(screen: boolean) {
   <div class="flex-center h-full">
     <TabsMore :menus="menus" />
     <TabsScreen
-      :screen="preference.sideHidden && preference.sideHidden"
+      :screen="preferences.sidebar.hidden"
       @change="handleScreenChange"
       @update:screen="handleScreenChange"
     />
diff --git a/packages/business/layouts/src/basic/tabs/use-tabs.ts b/packages/business/layouts/src/basic/tabs/use-tabs.ts
index 5531a1e0..acf67cc5 100644
--- a/packages/business/layouts/src/basic/tabs/use-tabs.ts
+++ b/packages/business/layouts/src/basic/tabs/use-tabs.ts
@@ -11,6 +11,7 @@ import {
   MdiPin,
   MdiPinOff,
 } from '@vben-core/iconify';
+import { storeToRefs, useAccessStore, useTabsStore } from '@vben-core/stores';
 import { filterTree } from '@vben-core/toolkit';
 import type {
   RouteLocationNormalized,
@@ -18,7 +19,6 @@ import type {
 } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { storeToRefs, useAccessStore, useTabsStore } from '@vben/stores';
 import { computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
diff --git a/packages/business/layouts/src/basic/widgets/breadcrumb.vue b/packages/business/layouts/src/basic/widgets/breadcrumb.vue
index e5a604a0..e5cbb09c 100644
--- a/packages/business/layouts/src/basic/widgets/breadcrumb.vue
+++ b/packages/business/layouts/src/basic/widgets/breadcrumb.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import type { BreadcrumbStyleType } from '@vben-core/preferences';
 import type { IBreadcrumb } from '@vben-core/shadcn-ui';
 
 import { VbenBackgroundBreadcrumb, VbenBreadcrumb } from '@vben-core/shadcn-ui';
-import { BreadcrumbStyle } from '@vben-core/typings';
 
 import { $t } from '@vben/locales';
 import { computed } from 'vue';
@@ -12,7 +12,7 @@ interface Props {
   hideWhenOnlyOne?: boolean;
   showHome?: boolean;
   showIcon?: boolean;
-  type?: BreadcrumbStyle;
+  type?: BreadcrumbStyleType;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/packages/business/layouts/src/iframe/iframe-router-view.vue b/packages/business/layouts/src/iframe/iframe-router-view.vue
index 76e8e7e5..7af78c45 100644
--- a/packages/business/layouts/src/iframe/iframe-router-view.vue
+++ b/packages/business/layouts/src/iframe/iframe-router-view.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { preferences } from '@vben-core/preferences';
+import { useTabsStore } from '@vben-core/stores';
+
 import { Spinner } from '@vben/common-ui';
-import { preference } from '@vben/preference';
-import { useTabsStore } from '@vben/stores';
 import { computed, ref } from 'vue';
 import { type RouteLocationNormalized, useRoute } from 'vue-router';
 
@@ -11,8 +12,10 @@ const spinning = ref(true);
 const tabsStore = useTabsStore();
 const route = useRoute();
 
+const enableTabbar = computed(() => preferences.tabbar.enable);
+
 const iframeRoutes = computed(() => {
-  if (!preference.tabsVisible) {
+  if (!enableTabbar.value) {
     return route.meta.iframeSrc ? [route] : [];
   }
   const tabs = tabsStore.getTabs.filter((tab) => !!tab.meta?.iframeSrc);
@@ -45,7 +48,7 @@ function canRender(tabItem: RouteLocationNormalized) {
     return false;
   }
 
-  if (!preference.tabsVisible) {
+  if (!enableTabbar.value) {
     return routeShow(tabItem);
   }
 
diff --git a/packages/locales/package.json b/packages/locales/package.json
index 587f44ae..581e5757 100644
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -50,6 +50,7 @@
   },
   "dependencies": {
     "@intlify/core-base": "^9.13.1",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "vue": "3.4.27",
     "vue-i18n": "^9.13.1"
diff --git a/packages/locales/src/i18n.ts b/packages/locales/src/i18n.ts
index a1347f9c..24f79c87 100644
--- a/packages/locales/src/i18n.ts
+++ b/packages/locales/src/i18n.ts
@@ -1,4 +1,4 @@
-import type { SupportLocale } from '@vben-core/typings';
+import type { LocaleSupportType } from '@vben-core/typings';
 
 import type { Locale } from 'vue-i18n';
 
@@ -44,7 +44,7 @@ function setI18nLanguage(locale: Locale) {
  * Load locale messages
  * @param lang
  */
-async function loadLocaleMessages(lang: SupportLocale) {
+async function loadLocaleMessages(lang: LocaleSupportType) {
   if (unref(i18n.global.locale) === lang) {
     return setI18nLanguage(lang);
   }
diff --git a/packages/locales/src/langs/en-US.yaml b/packages/locales/src/langs/en-US.yaml
index 901bdf7f..694f4685 100644
--- a/packages/locales/src/langs/en-US.yaml
+++ b/packages/locales/src/langs/en-US.yaml
@@ -145,7 +145,7 @@ preference:
   page-progress: Loading progress bar
   page-transition: Page transition animation
   copy: Copy Preferences
-  copy-success: Copy successful. Please replace in `src/preference.ts` of the app
+  copy-success: Copy successful. Please replace in `src/preferences.ts` of the app
   reset-success: Preferences reset successfully
   sidebar: Sidebar
   side-visible: Display Sidebar
diff --git a/packages/locales/src/langs/zh-CN.yaml b/packages/locales/src/langs/zh-CN.yaml
index 1c71d120..137a2a47 100644
--- a/packages/locales/src/langs/zh-CN.yaml
+++ b/packages/locales/src/langs/zh-CN.yaml
@@ -144,7 +144,7 @@ preference:
   page-progress: 加载进度条
   page-transition: 页面切换动画
   copy: 复制偏好设置
-  copy-success: 拷贝成功，请在 app 下的 `src/preference.ts`内进行覆盖
+  copy-success: 拷贝成功，请在 app 下的 `src/preferences.ts`内进行覆盖
   reset-success: 重置偏好设置成功
   sidebar: 侧边栏
   side-visible: 显示侧边栏
diff --git a/packages/locales/src/typing.ts b/packages/locales/src/typing.ts
index f434b3d8..f67de5b9 100644
--- a/packages/locales/src/typing.ts
+++ b/packages/locales/src/typing.ts
@@ -1,4 +1,4 @@
-import type { SupportLocale } from '@vben-core/typings';
+import type { LocaleSupportType } from '@vben-core/typings';
 
 type ImportLocaleFn = () => Promise<{ default: Record<string, string> }>;
 
@@ -7,7 +7,7 @@ interface LocaleSetupOptions {
    * Default language
    * @default zh-CN
    */
-  defaultLocale?: SupportLocale;
+  defaultLocale?: LocaleSupportType;
 }
 
-export type { ImportLocaleFn, LocaleSetupOptions, SupportLocale };
+export type { ImportLocaleFn, LocaleSetupOptions, LocaleSupportType };
diff --git a/packages/preference/src/cache.ts b/packages/preference/src/cache.ts
deleted file mode 100644
index 9ef526ad..00000000
--- a/packages/preference/src/cache.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Preference } from '@vben-core/typings';
-
-class PreferenceCache {
-  cachePrefix: string;
-  constructor(cachePrefix: string) {
-    this.cachePrefix = cachePrefix;
-  }
-
-  /**
-   * 从 localStorage 中获取偏好设置
-   * @returns  返回从 localStorage 中获取的偏好设置，如果没有获取到，则返回默认偏好设置。
-   */
-  get(defaultValue: Preference): Preference {
-    let cache = defaultValue;
-    try {
-      cache = JSON.parse(localStorage.getItem(this.getCacheKey()) || '');
-    } catch {
-      return defaultValue;
-    }
-    return cache;
-  }
-
-  /**
-   * 获取偏好设置的缓存键
-   */
-  getCacheKey(name: string = 'preference') {
-    return `__${this.cachePrefix}-${name}__`;
-  }
-
-  /**
-   * 从 localStorage 中移除偏好设置
-   */
-  remove() {
-    localStorage.removeItem(this.getCacheKey());
-    localStorage.removeItem(this.getCacheKey('locale'));
-    localStorage.removeItem(this.getCacheKey('theme'));
-  }
-
-  /**
-   * 将当前偏好设置持久化到 localStorage
-   */
-  set(preference: Preference) {
-    localStorage.setItem(this.getCacheKey(), JSON.stringify(preference));
-    // 额外存储一份主题、语言
-    localStorage.setItem(this.getCacheKey('locale'), preference.locale);
-    localStorage.setItem(this.getCacheKey('theme'), preference.theme);
-  }
-
-  /**
-   * 设置偏好设置的缓存前缀
-   * @param prefix - 前缀
-   */
-  setCachePrefix(prefix: string) {
-    this.cachePrefix = prefix;
-  }
-}
-
-export type PreferenceCacheType = PreferenceCache;
-export { PreferenceCache };
diff --git a/packages/preference/src/config.ts b/packages/preference/src/config.ts
deleted file mode 100644
index 4d7e29c8..00000000
--- a/packages/preference/src/config.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { Preference, StaticPreference } from '@vben-core/typings';
-
-const defaultPreference: Preference = {
-  appName: 'Vben Admin Pro',
-  authPageLayout: 'panel-right',
-  breadcrumbHideOnlyOne: false,
-  breadcrumbHome: false,
-  breadcrumbIcon: true,
-  breadcrumbStyle: 'normal',
-  breadcrumbVisible: true,
-  colorGrayMode: false,
-  colorPrimary: 'hsl(211 91% 39%)',
-  colorWeakMode: false,
-  compact: false,
-  contentCompact: 'wide',
-  copyright: 'Copyright © 2024 Vben Admin PRO',
-  defaultAvatar:
-    'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/avatar-v1.webp',
-  dynamicTitle: true,
-  footerFixed: true,
-  footerVisible: true,
-  headerHidden: false,
-  headerMode: 'fixed',
-  headerVisible: true,
-  isMobile: false,
-  keepAlive: true,
-  layout: 'side-nav',
-  locale: 'zh-CN',
-  logo: 'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/logo-v1.webp',
-  logoVisible: true,
-  navigationAccordion: true,
-  navigationSplit: true,
-  navigationStyle: 'rounded',
-  pageProgress: true,
-  pageTransition: 'fade-slide',
-  pageTransitionEnable: true,
-  semiDarkMenu: true,
-  shortcutKeys: true,
-  showPreference: true,
-  sideCollapse: false,
-  sideCollapseShowTitle: true,
-  sideExpandOnHover: true,
-  sideExtraCollapse: true,
-  sideHidden: false,
-  sideVisible: true,
-  sideWidth: 240,
-  tabsIcon: true,
-  tabsVisible: true,
-  theme: 'dark',
-};
-
-/**
- * 静态偏好设置,这些配置不会被用户修改
- */
-const staticPreference: StaticPreference = {
-  colorPrimaryPresets: [
-    'hsl(211 91% 39%)',
-    'hsl(212 100% 45%)',
-    'hsl(181 84% 32%)',
-    'hsl(230 99% 66%)',
-    'hsl(245 82% 67%)',
-    'hsl(340 100% 68%)',
-  ],
-  supportLanguages: [
-    {
-      key: 'zh-CN',
-      text: '简体中文',
-    },
-    {
-      key: 'en-US',
-      text: 'English',
-    },
-  ],
-};
-
-export { defaultPreference, staticPreference };
diff --git a/packages/preference/src/index.ts b/packages/preference/src/index.ts
deleted file mode 100644
index 1c26efd0..00000000
--- a/packages/preference/src/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Preference } from '@vben-core/typings';
-
-import { readonly } from 'vue';
-
-import {
-  currentPreference,
-  resetPreference,
-  updatePreference,
-} from './preference';
-
-export { staticPreference } from './config';
-
-// 只读偏好设置
-const preference: Readonly<Preference> = readonly(currentPreference);
-
-export * from './setup';
-
-export { preference, resetPreference, updatePreference };
-export * from './use-preference';
diff --git a/packages/preference/src/preference.ts b/packages/preference/src/preference.ts
deleted file mode 100644
index cc954cd0..00000000
--- a/packages/preference/src/preference.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import type {
-  DeepPartial,
-  Preference,
-  PreferenceKeys,
-} from '@vben-core/typings';
-
-import { convertToHslCssVar, merge } from '@vben-core/toolkit';
-
-import type { Ref } from 'vue';
-
-import { breakpointsTailwind, useBreakpoints, useCssVar } from '@vueuse/core';
-import { markRaw, reactive, ref, watch } from 'vue';
-
-import { defaultPreference } from './config';
-
-import type { PreferenceCacheType } from './cache';
-
-/**
- * 当前偏好设置
- */
-const currentPreference: Preference = reactive(defaultPreference);
-/**
- * 当前偏好设置原始值
- */
-const initialPreference: Ref<Preference> = ref(defaultPreference);
-
-let preferenceCache: PreferenceCacheType;
-
-/**
- * 是否监听过系统设置变化
- */
-let isRegisterListen = false;
-
-function updatePreference(key: keyof Preference, value: boolean | string): void;
-function updatePreference(
-  preference: DeepPartial<Preference>,
-  value?: undefined,
-): void;
-
-/**
- * 更新偏好设置
- * @param  preference - 一个部分偏好设置对象，它将被合并到当前偏好设置中。
- */
-function updatePreference(preference: any, value: any) {
-  if (typeof preference === 'string') {
-    updatePreference({ [preference]: value }, value);
-  } else {
-    const updateKeys = Object.keys(preference) as PreferenceKeys[];
-
-    const mergePreference = merge(preference, markRaw(currentPreference));
-
-    Object.assign(currentPreference, mergePreference);
-
-    // 当修改到颜色变量时，更新 css 变量
-    if (updateKeys.includes('colorPrimary')) {
-      updateCssVar(currentPreference);
-    }
-
-    // 更新主题
-    if (updateKeys.includes('theme')) {
-      updateTheme(currentPreference);
-    }
-
-    // 更新页面颜色模式（灰色、色弱）
-    if (
-      updateKeys.includes('colorGrayMode') ||
-      updateKeys.includes('colorWeakMode')
-    ) {
-      updateColorMode(currentPreference);
-    }
-
-    preferenceCache.set(currentPreference);
-  }
-}
-
-/**
- * 更新 CSS 变量
- * @param  preference - 当前偏好设置对象，它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。
- */
-function updateCssVar(preference: Preference) {
-  for (const [key, value] of Object.entries(preference)) {
-    if (['colorPrimary'].includes(key)) {
-      const cssVarKey = key.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
-      const cssVarValue = useCssVar(`--${cssVarKey}`);
-      cssVarValue.value = convertToHslCssVar(value);
-    }
-  }
-}
-
-/**
- * 更新主题
- * @param preference - 当前偏好设置对象，它的主题值将被用来设置文档的主题。
- */
-function updateTheme(preference: Preference) {
-  // 当修改到颜色变量时，更新 css 变量
-  const root = document.documentElement;
-  if (root) {
-    const dark = isDarkTheme(preference.theme);
-    root.classList.toggle('dark', dark);
-  }
-
-  // 只需要监听一次即可
-  listenOnce(preference);
-}
-
-/**
- * 更新页面颜色模式（灰色、色弱）
- * @param preference
- */
-function updateColorMode(preference: Preference) {
-  const { colorGrayMode, colorWeakMode } = preference;
-  const body = document.body;
-  const COLOR_WEAK = 'invert-mode';
-  const COLOR_GRAY = 'grayscale-mode';
-  colorWeakMode
-    ? body.classList.add(COLOR_WEAK)
-    : body.classList.remove(COLOR_WEAK);
-  colorGrayMode
-    ? body.classList.add(COLOR_GRAY)
-    : body.classList.remove(COLOR_GRAY);
-}
-
-/**
- * 1. 监听系统主题偏好设置变化
- * 2. 监听断点，判断是否移动端
- * @param preference - 当前偏好设置对象，当系统主题偏好变化时，它的主题值会被更新。
- */
-function listenOnce(preference: Preference) {
-  if (isRegisterListen) {
-    return;
-  }
-  isRegisterListen = true;
-  // 监听系统主题偏好设置变化
-  window
-    .matchMedia('(prefers-color-scheme: dark)')
-    .addEventListener('change', ({ matches: isDark }) => {
-      preference.theme = isDark ? 'dark' : 'light';
-      updateTheme(preference);
-    });
-
-  // 监听断点，判断是否移动端
-  const breakpoints = useBreakpoints(breakpointsTailwind);
-  const isMobile = breakpoints.smaller('md');
-  watch(
-    () => isMobile.value,
-    (val) => {
-      currentPreference.isMobile = val;
-    },
-    { immediate: true },
-  );
-}
-
-/**
- * 重置偏好设置
- * 偏好设置将被重置为初始值，并从 localStorage 中移除。
- */
-function resetPreference() {
-  Object.assign(currentPreference, initialPreference.value);
-  updatePreference(currentPreference);
-  preferenceCache.remove();
-}
-
-/**
- * 配置当前app默认的偏好配置
- * @param overrides
- */
-function overridesPreference(
-  overrides: DeepPartial<Preference>,
-  cache: PreferenceCacheType,
-) {
-  preferenceCache = cache;
-  /**
-   * 重置状态时用到的原始值
-   */
-  initialPreference.value = merge(overrides, defaultPreference);
-  const mergedPreference = merge(
-    overrides,
-    preferenceCache.get(defaultPreference),
-  );
-  updatePreference(mergedPreference);
-}
-
-function isDarkTheme(theme: string) {
-  let dark = theme === 'dark';
-  if (theme === 'auto') {
-    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  }
-  return dark;
-}
-
-export {
-  currentPreference,
-  initialPreference,
-  isDarkTheme,
-  overridesPreference,
-  resetPreference,
-  updatePreference,
-};
diff --git a/packages/preference/src/setup.ts b/packages/preference/src/setup.ts
deleted file mode 100644
index 88770a2f..00000000
--- a/packages/preference/src/setup.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { DeepPartial, Preference } from '@vben-core/typings';
-
-import { PreferenceCache } from './cache';
-import { overridesPreference } from './preference';
-
-interface SetupPreferenceOptions {
-  /**
-   * @zh_CN 应用名,由于 @vben/preference 是公用的，后续可能有多个app，为了防止多个app缓存冲突，可在这里配置应用名
-   * 应用名将被用于持久化的前缀
-   */
-  namespace: string;
-  /**
-   * @zh_CN app自行覆盖偏好设置
-   */
-  overrides?: DeepPartial<Preference>;
-}
-
-async function setupPreference(options: SetupPreferenceOptions) {
-  const { namespace, overrides = {} } = options;
-  const cache = new PreferenceCache(namespace);
-  overridesPreference(overrides, cache);
-}
-
-export { setupPreference };
-
-export type { SetupPreferenceOptions };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca86d9f2..10b253e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,8 +23,8 @@ importers:
         specifier: ^21.1.7
         version: 21.1.7
       '@types/node':
-        specifier: ^20.12.13
-        version: 20.12.13
+        specifier: ^20.13.0
+        version: 20.13.0
       '@vben/commitlint-config':
         specifier: workspace:*
         version: link:internal/lint-configs/commitlint-config
@@ -84,16 +84,22 @@ importers:
         version: 2.0.0(sass@1.77.4)(typescript@5.4.5)(vue-tsc@2.0.19(typescript@5.4.5))
       vite:
         specifier: 6.0.0-alpha.17
-        version: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+        version: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       vitest:
         specifier: ^2.0.0-beta.3
-        version: 2.0.0-beta.3(@types/node@20.12.13)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0)
+        version: 2.0.0-beta.3(@types/node@20.13.0)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0)
       vue-tsc:
         specifier: ^2.0.19
         version: 2.0.19(typescript@5.4.5)
 
   apps/antd-view:
     dependencies:
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../../packages/@vben-core/forward/preferences
+      '@vben-core/stores':
+        specifier: workspace:*
+        version: link:../../packages/@vben-core/forward/stores
       '@vben/common-ui':
         specifier: workspace:*
         version: link:../../packages/business/common-ui
@@ -112,12 +118,6 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../../packages/locales
-      '@vben/preference':
-        specifier: workspace:*
-        version: link:../../packages/preference
-      '@vben/stores':
-        specifier: workspace:*
-        version: link:../../packages/stores
       '@vben/styles':
         specifier: workspace:*
         version: link:../../packages/styles
@@ -139,6 +139,9 @@ importers:
       dayjs:
         specifier: ^1.11.11
         version: 1.11.11
+      pinia:
+        specifier: 2.1.7
+        version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
       vue:
         specifier: 3.4.27
         version: 3.4.27(typescript@5.4.5)
@@ -148,13 +151,13 @@ importers:
     devDependencies:
       vite-plugin-mock:
         specifier: ^3.0.2
-        version: 3.0.2(esbuild@0.20.2)(mockjs@1.1.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+        version: 3.0.2(esbuild@0.20.2)(mockjs@1.1.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
 
   internal/lint-configs/commitlint-config:
     dependencies:
       '@commitlint/cli':
         specifier: ^19.3.0
-        version: 19.3.0(@types/node@20.12.13)(typescript@5.4.5)
+        version: 19.3.0(@types/node@20.13.0)(typescript@5.4.5)
       '@commitlint/config-conventional':
         specifier: ^19.2.2
         version: 19.2.2
@@ -175,8 +178,8 @@ importers:
         version: 0.2.3(eslint@8.57.0)
     devDependencies:
       '@eslint/js':
-        specifier: ^9.3.0
-        version: 9.3.0
+        specifier: ^9.4.0
+        version: 9.4.0
       '@types/eslint':
         specifier: ^8.56.10
         version: 8.56.10
@@ -212,10 +215,10 @@ importers:
         version: 3.1.0
       eslint-plugin-perfectionist:
         specifier: ^2.10.0
-        version: 2.10.0(eslint@8.57.0)(typescript@5.4.5)(vue-eslint-parser@9.4.2(eslint@8.57.0))
+        version: 2.10.0(eslint@8.57.0)(typescript@5.4.5)(vue-eslint-parser@9.4.3(eslint@8.57.0))
       eslint-plugin-prettier:
         specifier: ^5.1.3
-        version: 5.1.3(@types/eslint@8.56.10)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5)
+        version: 5.1.3(@types/eslint@8.56.10)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.3.0)
       eslint-plugin-regexp:
         specifier: ^2.6.0
         version: 2.6.0(eslint@8.57.0)
@@ -227,7 +230,7 @@ importers:
         version: 4.0.0(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)
       eslint-plugin-vitest:
         specifier: ^0.5.4
-        version: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@2.0.0-beta.3(@types/node@20.12.13)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0))
+        version: 0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@2.0.0-beta.3(@types/node@20.13.0)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0))
       eslint-plugin-vue:
         specifier: ^9.26.0
         version: 9.26.0(eslint@8.57.0)
@@ -238,8 +241,8 @@ importers:
         specifier: ^2.4.0
         version: 2.4.0
       vue-eslint-parser:
-        specifier: ^9.4.2
-        version: 9.4.2(eslint@8.57.0)
+        specifier: ^9.4.3
+        version: 9.4.3(eslint@8.57.0)
 
   internal/lint-configs/lint-staged-config:
     dependencies:
@@ -250,11 +253,11 @@ importers:
   internal/lint-configs/prettier-config:
     dependencies:
       prettier:
-        specifier: ^3.2.5
-        version: 3.2.5
+        specifier: 3.3.0
+        version: 3.3.0
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.0
-        version: 0.6.0(prettier@3.2.5)
+        specifier: ^0.6.1
+        version: 0.6.1(prettier@3.3.0)
 
   internal/lint-configs/stylelint-config:
     dependencies:
@@ -278,8 +281,8 @@ importers:
         specifier: ^4.0.9
         version: 4.0.9(postcss@8.4.38)
       prettier:
-        specifier: ^3.2.5
-        version: 3.2.5
+        specifier: 3.3.0
+        version: 3.3.0
       stylelint:
         specifier: ^16.6.1
         version: 16.6.1(typescript@5.4.5)
@@ -300,7 +303,7 @@ importers:
         version: 6.0.4(stylelint@16.6.1(typescript@5.4.5))
       stylelint-prettier:
         specifier: ^5.0.0
-        version: 5.0.0(prettier@3.2.5)(stylelint@16.6.1(typescript@5.4.5))
+        version: 5.0.0(prettier@3.3.0)(stylelint@16.6.1(typescript@5.4.5))
 
   internal/node-utils:
     dependencies:
@@ -320,8 +323,8 @@ importers:
         specifier: ^1.1.1
         version: 1.1.1
       prettier:
-        specifier: ^3.2.5
-        version: 3.2.5
+        specifier: 3.3.0
+        version: 3.3.0
       rimraf:
         specifier: ^5.0.7
         version: 5.0.7
@@ -385,7 +388,7 @@ importers:
         version: link:../../packages/types
       vite:
         specifier: 6.0.0-alpha.17
-        version: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+        version: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
 
   internal/vite-config:
     dependencies:
@@ -406,10 +409,10 @@ importers:
         version: 2.0.2
       vite-plugin-lib-inject-css:
         specifier: ^2.1.1
-        version: 2.1.1(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+        version: 2.1.1(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
       vite-plugin-vue-devtools:
         specifier: ^7.2.1
-        version: 7.2.1(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+        version: 7.2.1(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
     devDependencies:
       '@types/html-minifier-terser':
         specifier: ^7.0.2
@@ -418,11 +421,11 @@ importers:
         specifier: workspace:*
         version: link:../node-utils
       '@vitejs/plugin-vue':
-        specifier: ^5.0.4
-        version: 5.0.4(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+        specifier: ^5.0.5
+        version: 5.0.5(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.0.0
-        version: 4.0.0(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+        version: 4.0.0(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       dayjs:
         specifier: ^1.11.11
         version: 1.11.11
@@ -437,22 +440,73 @@ importers:
         version: 1.77.4
       unplugin-turbo-console:
         specifier: ^1.8.6
-        version: 1.8.6(esbuild@0.20.2)(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+        version: 1.8.6(esbuild@0.20.2)(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       vite:
         specifier: 6.0.0-alpha.17
-        version: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+        version: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       vite-plugin-compression:
         specifier: ^0.5.1
-        version: 0.5.1(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+        version: 0.5.1(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
       vite-plugin-dts:
         specifier: ^3.9.1
-        version: 3.9.1(@types/node@20.12.13)(rollup@4.18.0)(typescript@5.4.5)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+        version: 3.9.1(@types/node@20.13.0)(rollup@4.18.0)(typescript@5.4.5)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
       vite-plugin-html:
         specifier: ^3.2.2
-        version: 3.2.2(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+        version: 3.2.2(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
       vite-plugin-mock:
         specifier: ^3.0.2
-        version: 3.0.2(esbuild@0.20.2)(mockjs@1.1.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+        version: 3.0.2(esbuild@0.20.2)(mockjs@1.1.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
+
+  packages/@vben-core/forward/preferences:
+    dependencies:
+      '@vben-core/cache':
+        specifier: workspace:*
+        version: link:../../shared/chche
+      '@vben-core/helpers':
+        specifier: workspace:*
+        version: link:../../helpers
+      '@vben-core/toolkit':
+        specifier: workspace:*
+        version: link:../../shared/toolkit
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../shared/typings
+      '@vueuse/core':
+        specifier: ^10.10.0
+        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
+      vue:
+        specifier: 3.4.27
+        version: 3.4.27(typescript@5.4.5)
+
+  packages/@vben-core/forward/stores:
+    dependencies:
+      '@vben-core/toolkit':
+        specifier: workspace:*
+        version: link:../../shared/toolkit
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../shared/typings
+      pinia:
+        specifier: 2.1.7
+        version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
+      pinia-plugin-persistedstate:
+        specifier: ^3.2.1
+        version: 3.2.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)))
+      vue:
+        specifier: 3.4.27
+        version: 3.4.27(typescript@5.4.5)
+      vue-router:
+        specifier: ^4.3.2
+        version: 4.3.2(vue@3.4.27(typescript@5.4.5))
+
+  packages/@vben-core/helpers:
+    dependencies:
+      '@vben-core/toolkit':
+        specifier: workspace:*
+        version: link:../shared/toolkit
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../shared/typings
 
   packages/@vben-core/shared/chche: {}
 
@@ -617,6 +671,9 @@ importers:
       '@vben-core/iconify':
         specifier: workspace:*
         version: link:../../@vben-core/shared/iconify
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../../@vben-core/forward/preferences
       '@vben-core/shadcn-ui':
         specifier: workspace:*
         version: link:../../@vben-core/uikit/shadcn-ui
@@ -626,9 +683,6 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../../locales
-      '@vben/preference':
-        specifier: workspace:*
-        version: link:../../preference
       '@vueuse/core':
         specifier: ^10.10.0
         version: 10.10.0(vue@3.4.27(typescript@5.4.5))
@@ -663,9 +717,15 @@ importers:
       '@vben-core/menu-ui':
         specifier: workspace:*
         version: link:../../@vben-core/uikit/menu-ui
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../../@vben-core/forward/preferences
       '@vben-core/shadcn-ui':
         specifier: workspace:*
         version: link:../../@vben-core/uikit/shadcn-ui
+      '@vben-core/stores':
+        specifier: workspace:*
+        version: link:../../@vben-core/forward/stores
       '@vben-core/tabs-ui':
         specifier: workspace:*
         version: link:../../@vben-core/uikit/tabs-ui
@@ -678,12 +738,6 @@ importers:
       '@vben/locales':
         specifier: workspace:*
         version: link:../../locales
-      '@vben/preference':
-        specifier: workspace:*
-        version: link:../../preference
-      '@vben/stores':
-        specifier: workspace:*
-        version: link:../../stores
       vue:
         specifier: 3.4.27
         version: 3.4.27(typescript@5.4.5)
@@ -717,6 +771,9 @@ importers:
       '@intlify/core-base':
         specifier: ^9.13.1
         version: 9.13.1
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../@vben-core/forward/preferences
       '@vben-core/typings':
         specifier: workspace:*
         version: link:../@vben-core/shared/typings
@@ -727,42 +784,6 @@ importers:
         specifier: ^9.13.1
         version: 9.13.1(vue@3.4.27(typescript@5.4.5))
 
-  packages/preference:
-    dependencies:
-      '@vben-core/toolkit':
-        specifier: workspace:*
-        version: link:../@vben-core/shared/toolkit
-      '@vben-core/typings':
-        specifier: workspace:*
-        version: link:../@vben-core/shared/typings
-      '@vueuse/core':
-        specifier: ^10.10.0
-        version: 10.10.0(vue@3.4.27(typescript@5.4.5))
-      vue:
-        specifier: 3.4.27
-        version: 3.4.27(typescript@5.4.5)
-
-  packages/stores:
-    dependencies:
-      '@vben-core/toolkit':
-        specifier: workspace:*
-        version: link:../@vben-core/shared/toolkit
-      '@vben-core/typings':
-        specifier: workspace:*
-        version: link:../@vben-core/shared/typings
-      pinia:
-        specifier: 2.1.7
-        version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
-      pinia-plugin-persistedstate:
-        specifier: ^3.2.1
-        version: 3.2.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)))
-      vue:
-        specifier: 3.4.27
-        version: 3.4.27(typescript@5.4.5)
-      vue-router:
-        specifier: ^4.3.2
-        version: 4.3.2(vue@3.4.27(typescript@5.4.5))
-
   packages/styles:
     dependencies:
       '@vben-core/design':
@@ -812,7 +833,7 @@ importers:
     devDependencies:
       vitepress:
         specifier: ^1.2.2
-        version: 1.2.2(@algolia/client-search@4.23.3)(@types/node@20.12.13)(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(postcss@8.4.38)(qrcode@1.5.3)(sass@1.77.4)(search-insights@2.14.0)(terser@5.31.0)(typescript@5.4.5)
+        version: 1.2.2(@algolia/client-search@4.23.3)(@types/node@20.13.0)(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(postcss@8.4.38)(qrcode@1.5.3)(sass@1.77.4)(search-insights@2.14.0)(terser@5.31.0)(typescript@5.4.5)
       vue:
         specifier: 3.4.27
         version: 3.4.27(typescript@5.4.5)
@@ -1592,10 +1613,6 @@ packages:
   '@emotion/unitless@0.8.1':
     resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
 
-  '@es-joy/jsdoccomment@0.43.0':
-    resolution: {integrity: sha512-Q1CnsQrytI3TlCB1IVWXWeqUIPGVEKGaE7IbVdt13Nq/3i0JESAkQQERrfiQkmlpijl+++qyqPgaS31Bvc1jRQ==}
-    engines: {node: '>=16'}
-
   '@es-joy/jsdoccomment@0.43.1':
     resolution: {integrity: sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==}
     engines: {node: '>=16'}
@@ -1898,8 +1915,8 @@ packages:
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@eslint/js@9.3.0':
-    resolution: {integrity: sha512-niBqk8iwv96+yuTwjM6bWg8ovzAPF9qkICsGtcoa5/dmqcEMfdwNAX7+/OHcJHc7wj7XqPxH98oAHytFYlw6Sw==}
+  '@eslint/js@9.4.0':
+    resolution: {integrity: sha512-fdI7VJjP3Rvc70lC4xkFXHB0fiPeojiL1PxVG6t1ZvXQrarj893PweuBTujxDUFk0Fxj4R7PIIAZ/aiiyZPZcg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.6.2':
@@ -2394,11 +2411,8 @@ packages:
   '@types/node@18.19.33':
     resolution: {integrity: sha512-NR9+KrpSajr2qBVp/Yt5TU/rp+b5Mayi3+OlMlcg2cVCfRmcG5PWZ7S4+MG9PZ5gWBoc9Pd0BKSRViuBCRPu0A==}
 
-  '@types/node@20.12.12':
-    resolution: {integrity: sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==}
-
-  '@types/node@20.12.13':
-    resolution: {integrity: sha512-gBGeanV41c1L171rR7wjbMiEpEI/l5XFQdLLfhr/REwpgDy/4U8y89+i8kRiLzDyZdOkXh+cRaTetUnCYutoXA==}
+  '@types/node@20.13.0':
+    resolution: {integrity: sha512-FM6AOb3khNkNIXPnHFDYaHerSv8uN22C91z098AnGccVu+Pcdhi+pNUFDi0iLmPIsVE0JBD0KVS7mzUYt4nRzQ==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -2430,8 +2444,8 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
-  '@types/which@3.0.3':
-    resolution: {integrity: sha512-2C1+XoY0huExTbs8MQv1DuS5FS86+SEjdM9F/+GS61gg5Hqbtj8ZiDSx8MfWcyei907fIPbfPGCOrNUTnVHY1g==}
+  '@types/which@3.0.4':
+    resolution: {integrity: sha512-liyfuo/106JdlgSchJzXEQCVArk0CvevqPote8F8HgWgJ3dRCcTHgJIsLDuee0kxk/mhbInzIZk3QWSZJ8R+2w==}
 
   '@typescript-eslint/eslint-plugin@7.11.0':
     resolution: {integrity: sha512-P+qEahbgeHW4JQ/87FuItjBj8O3MYv5gELDzr8QaQ7fsll1gSMTYb6j87MYyxwf3DtD7uGFB9ShwgmCJB5KmaQ==}
@@ -2501,8 +2515,8 @@ packages:
       vite: ^5.0.0
       vue: 3.4.27
 
-  '@vitejs/plugin-vue@5.0.4':
-    resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
+  '@vitejs/plugin-vue@5.0.5':
+    resolution: {integrity: sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0
@@ -2569,8 +2583,8 @@ packages:
   '@vue/compiler-ssr@3.4.27':
     resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
 
-  '@vue/devtools-api@6.6.1':
-    resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
+  '@vue/devtools-api@6.6.2':
+    resolution: {integrity: sha512-134clD8u7cBBXdmBbXI282gHGF7T/eAbD/G7mAK2llQF62IbI4ny28IVamZVMoJSvfImC2Xxnj732hXkJvUj6g==}
 
   '@vue/devtools-api@7.2.1':
     resolution: {integrity: sha512-6oNCtyFOrNdqm6GUkFujsCgFlpbsHLnZqq7edeM/+cxAbMyCWvsaCsIMUaz7AiluKLccCGEM8fhOsjaKgBvb7g==}
@@ -2822,8 +2836,8 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-kit@0.12.1:
-    resolution: {integrity: sha512-O+33g7x6irsESUcd47KdfWUrS2F6aGp9KeVJFGj0YjIznfXpBxVGjA0w+y/1OKqX4mFOfmZ9Xpf1ixPT4n9xxw==}
+  ast-kit@0.12.2:
+    resolution: {integrity: sha512-es1zHFsnZ4Y4efz412nnrU3KvVAhgqy90a7Yt9Wpi5vQ3l4aYMOX0Qx4FD0elKr5ITEhiUGCSFcgGYf4YTuACg==}
     engines: {node: '>=16.14.0'}
 
   astral-regex@2.0.0:
@@ -2906,8 +2920,8 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
-  bundle-require@4.1.0:
-    resolution: {integrity: sha512-FeArRFM+ziGkRViKRnSTbHZc35dgmR9yNog05Kn0+ItI59pOAISGvnnIwW1WgFZQW59IxD9QpJnUPkdIPfZuXg==}
+  bundle-require@4.2.1:
+    resolution: {integrity: sha512-7Q/6vkyYAwOmQNRw75x+4yRtZCZJXUDmHHlFdkiV0wgv/reNjtJwpu1jPJ0w2kbEpIM0uoKI3S4/f39dU7AjSA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
       esbuild: '>=0.17'
@@ -3401,6 +3415,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.3.5:
+    resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decamelize-keys@1.1.1:
     resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
     engines: {node: '>=0.10.0'}
@@ -3584,8 +3607,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.4.783:
-    resolution: {integrity: sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==}
+  electron-to-chromium@1.4.788:
+    resolution: {integrity: sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA==}
 
   emoji-regex@10.3.0:
     resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
@@ -3698,8 +3721,8 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
 
-  eslint-compat-utils@0.5.0:
-    resolution: {integrity: sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==}
+  eslint-compat-utils@0.5.1:
+    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
     engines: {node: '>=12'}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -5888,8 +5911,8 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
-  prettier-plugin-tailwindcss@0.6.0:
-    resolution: {integrity: sha512-l5F3iG54XbOq/2DOPP/YA+c6VE3/qXrcBccntq2v7PSxtEc+J6SwsuTyDHxoFK1+jAlcU/hECBfzn6MON6ENBg==}
+  prettier-plugin-tailwindcss@0.6.1:
+    resolution: {integrity: sha512-AnbeYZu0WGj+QgKciUgdMnRxrqcxltleZPgdwfA5104BHM3siBLONN/HLW1yS2HvzSNkzpQ/JAj+LN0jcJO+0w==}
     engines: {node: '>=14.21.3'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
@@ -5945,8 +5968,8 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.2.5:
-    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
+  prettier@3.3.0:
+    resolution: {integrity: sha512-J9odKxERhCQ10OC2yb93583f6UnYutOeiV5i0zEDS7UGTdUt0u+y8erxl3lBKvwo/JHyyoEdXjwp4dke9oyZ/g==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -7056,8 +7079,8 @@ packages:
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0
 
-  vite@5.2.11:
-    resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==}
+  vite@5.2.12:
+    resolution: {integrity: sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -7152,8 +7175,8 @@ packages:
   vue-component-type-helpers@2.0.19:
     resolution: {integrity: sha512-cN3f1aTxxKo4lzNeQAkVopswuImUrb5Iurll9Gaw5cqpnbTAxtEMM1mgi6ou4X79OCyqYv1U1mzBHJkzmiK82w==}
 
-  vue-demi@0.14.7:
-    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+  vue-demi@0.14.8:
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
     engines: {node: '>=12'}
     hasBin: true
     peerDependencies:
@@ -7163,8 +7186,8 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  vue-eslint-parser@9.4.2:
-    resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
+  vue-eslint-parser@9.4.3:
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -7642,7 +7665,7 @@ snapshots:
       '@babel/traverse': 7.24.6
       '@babel/types': 7.24.6
       convert-source-map: 2.0.0
-      debug: 4.3.4
+      debug: 4.3.5
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -7843,7 +7866,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.24.6
       '@babel/parser': 7.24.6
       '@babel/types': 7.24.6
-      debug: 4.3.4
+      debug: 4.3.5
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -8011,11 +8034,11 @@ snapshots:
       human-id: 1.0.2
       prettier: 2.8.8
 
-  '@commitlint/cli@19.3.0(@types/node@20.12.13)(typescript@5.4.5)':
+  '@commitlint/cli@19.3.0(@types/node@20.13.0)(typescript@5.4.5)':
     dependencies:
       '@commitlint/format': 19.3.0
       '@commitlint/lint': 19.2.2
-      '@commitlint/load': 19.2.0(@types/node@20.12.13)(typescript@5.4.5)
+      '@commitlint/load': 19.2.0(@types/node@20.13.0)(typescript@5.4.5)
       '@commitlint/read': 19.2.1
       '@commitlint/types': 19.0.3
       execa: 8.0.1
@@ -8062,7 +8085,7 @@ snapshots:
       '@commitlint/rules': 19.0.3
       '@commitlint/types': 19.0.3
 
-  '@commitlint/load@19.2.0(@types/node@20.12.13)(typescript@5.4.5)':
+  '@commitlint/load@19.2.0(@types/node@20.13.0)(typescript@5.4.5)':
     dependencies:
       '@commitlint/config-validator': 19.0.3
       '@commitlint/execute-rule': 19.0.0
@@ -8070,7 +8093,7 @@ snapshots:
       '@commitlint/types': 19.0.3
       chalk: 5.3.0
       cosmiconfig: 9.0.0(typescript@5.4.5)
-      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.12.13)(cosmiconfig@9.0.0(typescript@5.4.5))(typescript@5.4.5)
+      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.13.0)(cosmiconfig@9.0.0(typescript@5.4.5))(typescript@5.4.5)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -8384,15 +8407,6 @@ snapshots:
 
   '@emotion/unitless@0.8.1': {}
 
-  '@es-joy/jsdoccomment@0.43.0':
-    dependencies:
-      '@types/eslint': 8.56.10
-      '@types/estree': 1.0.5
-      '@typescript-eslint/types': 7.11.0
-      comment-parser: 1.4.1
-      esquery: 1.5.0
-      jsdoc-type-pratt-parser: 4.0.0
-
   '@es-joy/jsdoccomment@0.43.1':
     dependencies:
       '@types/eslint': 8.56.10
@@ -8550,7 +8564,7 @@ snapshots:
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.3.5
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.1
@@ -8564,7 +8578,7 @@ snapshots:
   '@eslint/eslintrc@3.1.0':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.3.5
       espree: 10.0.1
       globals: 14.0.0
       ignore: 5.3.1
@@ -8577,7 +8591,7 @@ snapshots:
 
   '@eslint/js@8.57.0': {}
 
-  '@eslint/js@9.3.0': {}
+  '@eslint/js@9.4.0': {}
 
   '@floating-ui/core@1.6.2':
     dependencies:
@@ -8594,7 +8608,7 @@ snapshots:
     dependencies:
       '@floating-ui/dom': 1.6.5
       '@floating-ui/utils': 0.2.2
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -8604,7 +8618,7 @@ snapshots:
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.4
+      debug: 4.3.5
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -8669,7 +8683,7 @@ snapshots:
       '@intlify/shared': 9.13.1
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
       '@vue/compiler-sfc': 3.4.27
-      debug: 4.3.4
+      debug: 4.3.5
       fast-glob: 3.3.2
       js-yaml: 4.1.0
       json5: 2.2.3
@@ -8778,23 +8792,23 @@ snapshots:
       jju: 1.4.0
       read-yaml-file: 1.1.0
 
-  '@microsoft/api-extractor-model@7.28.13(@types/node@20.12.13)':
+  '@microsoft/api-extractor-model@7.28.13(@types/node@20.13.0)':
     dependencies:
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 4.0.2(@types/node@20.12.13)
+      '@rushstack/node-core-library': 4.0.2(@types/node@20.13.0)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.43.0(@types/node@20.12.13)':
+  '@microsoft/api-extractor@7.43.0(@types/node@20.13.0)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.28.13(@types/node@20.12.13)
+      '@microsoft/api-extractor-model': 7.28.13(@types/node@20.13.0)
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 4.0.2(@types/node@20.12.13)
+      '@rushstack/node-core-library': 4.0.2(@types/node@20.13.0)
       '@rushstack/rig-package': 0.5.2
-      '@rushstack/terminal': 0.10.0(@types/node@20.12.13)
-      '@rushstack/ts-command-line': 4.19.1(@types/node@20.12.13)
+      '@rushstack/terminal': 0.10.0(@types/node@20.13.0)
+      '@rushstack/ts-command-line': 4.19.1(@types/node@20.13.0)
       lodash: 4.17.21
       minimatch: 3.0.8
       resolve: 1.22.8
@@ -8970,7 +8984,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.18.0':
     optional: true
 
-  '@rushstack/node-core-library@4.0.2(@types/node@20.12.13)':
+  '@rushstack/node-core-library@4.0.2(@types/node@20.13.0)':
     dependencies:
       fs-extra: 7.0.1
       import-lazy: 4.0.0
@@ -8979,23 +8993,23 @@ snapshots:
       semver: 7.5.4
       z-schema: 5.0.5
     optionalDependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
 
   '@rushstack/rig-package@0.5.2':
     dependencies:
       resolve: 1.22.8
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.10.0(@types/node@20.12.13)':
+  '@rushstack/terminal@0.10.0(@types/node@20.13.0)':
     dependencies:
-      '@rushstack/node-core-library': 4.0.2(@types/node@20.12.13)
+      '@rushstack/node-core-library': 4.0.2(@types/node@20.13.0)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
 
-  '@rushstack/ts-command-line@4.19.1(@types/node@20.12.13)':
+  '@rushstack/ts-command-line@4.19.1(@types/node@20.13.0)':
     dependencies:
-      '@rushstack/terminal': 0.10.0(@types/node@20.12.13)
+      '@rushstack/terminal': 0.10.0(@types/node@20.13.0)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -9073,7 +9087,7 @@ snapshots:
 
   '@types/conventional-commits-parser@5.0.0':
     dependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
 
   '@types/eslint@8.56.10':
     dependencies:
@@ -9085,7 +9099,7 @@ snapshots:
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
 
   '@types/html-minifier-terser@7.0.2': {}
 
@@ -9095,7 +9109,7 @@ snapshots:
 
   '@types/jsdom@21.1.7':
     dependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       '@types/tough-cookie': 4.0.5
       parse5: 7.1.2
 
@@ -9103,7 +9117,7 @@ snapshots:
 
   '@types/jsonfile@6.1.4':
     dependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
 
   '@types/linkify-it@5.0.0': {}
 
@@ -9124,11 +9138,7 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
-  '@types/node@20.12.12':
-    dependencies:
-      undici-types: 5.26.5
-
-  '@types/node@20.12.13':
+  '@types/node@20.13.0':
     dependencies:
       undici-types: 5.26.5
 
@@ -9146,7 +9156,7 @@ snapshots:
 
   '@types/qrcode@1.5.5':
     dependencies:
-      '@types/node': 20.12.12
+      '@types/node': 20.13.0
 
   '@types/resolve@1.20.2': {}
 
@@ -9156,7 +9166,7 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
-  '@types/which@3.0.3': {}
+  '@types/which@3.0.4': {}
 
   '@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
@@ -9182,7 +9192,7 @@ snapshots:
       '@typescript-eslint/types': 7.11.0
       '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5)
       '@typescript-eslint/visitor-keys': 7.11.0
-      debug: 4.3.4
+      debug: 4.3.5
       eslint: 8.57.0
     optionalDependencies:
       typescript: 5.4.5
@@ -9198,7 +9208,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.11.0(typescript@5.4.5)
       '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
-      debug: 4.3.4
+      debug: 4.3.5
       eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.4.5)
     optionalDependencies:
@@ -9212,7 +9222,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.11.0
       '@typescript-eslint/visitor-keys': 7.11.0
-      debug: 4.3.4
+      debug: 4.3.5
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.4
@@ -9241,24 +9251,24 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@vitejs/plugin-vue-jsx@4.0.0(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
+  '@vitejs/plugin-vue-jsx@4.0.0(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@babel/core': 7.24.6
       '@babel/plugin-transform-typescript': 7.24.6(@babel/core@7.24.6)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.6)
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.0.4(vite@5.2.11(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
+  '@vitejs/plugin-vue@5.0.5(vite@5.2.12(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
-      vite: 5.2.11(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 5.2.12(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       vue: 3.4.27(typescript@5.4.5)
 
-  '@vitejs/plugin-vue@5.0.4(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
+  '@vitejs/plugin-vue@5.0.5(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       vue: 3.4.27(typescript@5.4.5)
 
   '@vitest/expect@2.0.0-beta.3':
@@ -9375,7 +9385,7 @@ snapshots:
       '@vue/compiler-dom': 3.4.27
       '@vue/shared': 3.4.27
 
-  '@vue/devtools-api@6.6.1': {}
+  '@vue/devtools-api@6.6.2': {}
 
   '@vue/devtools-api@7.2.1(vue@3.4.27(typescript@5.4.5))':
     dependencies:
@@ -9383,14 +9393,14 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  '@vue/devtools-core@7.2.1(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
+  '@vue/devtools-core@7.2.1(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@vue/devtools-kit': 7.2.1(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-shared': 7.2.1
       mitt: 3.0.1
       nanoid: 3.3.7
       pathe: 1.1.2
-      vite-hot-client: 0.2.3(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+      vite-hot-client: 0.2.3(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
     transitivePeerDependencies:
       - vite
       - vue
@@ -9467,7 +9477,7 @@ snapshots:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.10.0
       '@vueuse/shared': 10.10.0(vue@3.4.27(typescript@5.4.5))
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -9476,7 +9486,7 @@ snapshots:
     dependencies:
       '@vueuse/core': 10.10.0(vue@3.4.27(typescript@5.4.5))
       '@vueuse/shared': 10.10.0(vue@3.4.27(typescript@5.4.5))
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
     optionalDependencies:
       async-validator: 4.2.5
       axios: 1.7.2
@@ -9491,7 +9501,7 @@ snapshots:
 
   '@vueuse/shared@10.10.0(vue@3.4.27(typescript@5.4.5))':
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -9515,13 +9525,13 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.5
     transitivePeerDependencies:
       - supports-color
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.5
     transitivePeerDependencies:
       - supports-color
 
@@ -9674,7 +9684,7 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-kit@0.12.1:
+  ast-kit@0.12.2:
     dependencies:
       '@babel/parser': 7.24.6
       pathe: 1.1.2
@@ -9754,7 +9764,7 @@ snapshots:
   browserslist@4.23.0:
     dependencies:
       caniuse-lite: 1.0.30001625
-      electron-to-chromium: 1.4.783
+      electron-to-chromium: 1.4.788
       node-releases: 2.0.14
       update-browserslist-db: 1.0.16(browserslist@4.23.0)
 
@@ -9766,7 +9776,7 @@ snapshots:
     dependencies:
       run-applescript: 7.0.0
 
-  bundle-require@4.1.0(esbuild@0.20.2):
+  bundle-require@4.2.1(esbuild@0.20.2):
     dependencies:
       esbuild: 0.20.2
       load-tsconfig: 0.2.5
@@ -10088,9 +10098,9 @@ snapshots:
 
   core-js@3.37.1: {}
 
-  cosmiconfig-typescript-loader@5.0.0(@types/node@20.12.13)(cosmiconfig@9.0.0(typescript@5.4.5))(typescript@5.4.5):
+  cosmiconfig-typescript-loader@5.0.0(@types/node@20.13.0)(cosmiconfig@9.0.0(typescript@5.4.5))(typescript@5.4.5):
     dependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       cosmiconfig: 9.0.0(typescript@5.4.5)
       jiti: 1.21.0
       typescript: 5.4.5
@@ -10302,6 +10312,10 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
+  debug@4.3.5:
+    dependencies:
+      ms: 2.1.2
+
   decamelize-keys@1.1.1:
     dependencies:
       decamelize: 1.2.0
@@ -10366,7 +10380,7 @@ snapshots:
       callsite: 1.0.0
       camelcase: 6.3.0
       cosmiconfig: 7.1.0
-      debug: 4.3.4
+      debug: 4.3.5
       deps-regex: 0.2.0
       findup-sync: 5.0.0
       ignore: 5.3.1
@@ -10484,7 +10498,7 @@ snapshots:
     dependencies:
       jake: 10.9.1
 
-  electron-to-chromium@1.4.783: {}
+  electron-to-chromium@1.4.788: {}
 
   emoji-regex@10.3.0: {}
 
@@ -10672,7 +10686,7 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-compat-utils@0.5.0(eslint@8.57.0):
+  eslint-compat-utils@0.5.1(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
       semver: 7.6.2
@@ -10701,7 +10715,7 @@ snapshots:
 
   eslint-plugin-command@0.2.3(eslint@8.57.0):
     dependencies:
-      '@es-joy/jsdoccomment': 0.43.0
+      '@es-joy/jsdoccomment': 0.43.1
       eslint: 8.57.0
 
   eslint-plugin-es-x@7.6.0(eslint@8.57.0):
@@ -10709,7 +10723,7 @@ snapshots:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       '@eslint-community/regexpp': 4.10.0
       eslint: 8.57.0
-      eslint-compat-utils: 0.5.0(eslint@8.57.0)
+      eslint-compat-utils: 0.5.1(eslint@8.57.0)
 
   eslint-plugin-eslint-comments@3.2.0(eslint@8.57.0):
     dependencies:
@@ -10719,7 +10733,7 @@ snapshots:
 
   eslint-plugin-i@2.29.1(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0):
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.5
       doctrine: 3.0.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
@@ -10739,7 +10753,7 @@ snapshots:
       '@es-joy/jsdoccomment': 0.43.1
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
-      debug: 4.3.4
+      debug: 4.3.5
       escape-string-regexp: 4.0.0
       eslint: 8.57.0
       esquery: 1.5.0
@@ -10752,7 +10766,7 @@ snapshots:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       eslint: 8.57.0
-      eslint-compat-utils: 0.5.0(eslint@8.57.0)
+      eslint-compat-utils: 0.5.1(eslint@8.57.0)
       espree: 9.6.1
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.0
@@ -10773,22 +10787,22 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.1.0: {}
 
-  eslint-plugin-perfectionist@2.10.0(eslint@8.57.0)(typescript@5.4.5)(vue-eslint-parser@9.4.2(eslint@8.57.0)):
+  eslint-plugin-perfectionist@2.10.0(eslint@8.57.0)(typescript@5.4.5)(vue-eslint-parser@9.4.3(eslint@8.57.0)):
     dependencies:
       '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       minimatch: 9.0.4
       natural-compare-lite: 1.4.0
     optionalDependencies:
-      vue-eslint-parser: 9.4.2(eslint@8.57.0)
+      vue-eslint-parser: 9.4.3(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-prettier@5.1.3(@types/eslint@8.56.10)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.2.5):
+  eslint-plugin-prettier@5.1.3(@types/eslint@8.56.10)(eslint-config-prettier@9.1.0(eslint@8.57.0))(eslint@8.57.0)(prettier@3.3.0):
     dependencies:
       eslint: 8.57.0
-      prettier: 3.2.5
+      prettier: 3.3.0
       prettier-linter-helpers: 1.0.0
       synckit: 0.8.8
     optionalDependencies:
@@ -10835,13 +10849,13 @@ snapshots:
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@2.0.0-beta.3(@types/node@20.12.13)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@2.0.0-beta.3(@types/node@20.13.0)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
       '@typescript-eslint/utils': 7.11.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.11.0(@typescript-eslint/parser@7.11.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
-      vitest: 2.0.0-beta.3(@types/node@20.12.13)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0)
+      vitest: 2.0.0-beta.3(@types/node@20.13.0)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -10855,7 +10869,7 @@ snapshots:
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.0
       semver: 7.6.2
-      vue-eslint-parser: 9.4.2(eslint@8.57.0)
+      vue-eslint-parser: 9.4.3(eslint@8.57.0)
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -10884,7 +10898,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4
+      debug: 4.3.5
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -11434,14 +11448,14 @@ snapshots:
     dependencies:
       '@tootallnate/once': 1.1.2
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.5
     transitivePeerDependencies:
       - supports-color
 
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.4
+      debug: 4.3.5
     transitivePeerDependencies:
       - supports-color
 
@@ -11453,14 +11467,14 @@ snapshots:
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.5
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.4:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.4
+      debug: 4.3.5
     transitivePeerDependencies:
       - supports-color
 
@@ -12461,9 +12475,9 @@ snapshots:
 
   pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)):
     dependencies:
-      '@vue/devtools-api': 6.6.1
+      '@vue/devtools-api': 6.6.2
       vue: 3.4.27(typescript@5.4.5)
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
     optionalDependencies:
       typescript: 5.4.5
 
@@ -12945,13 +12959,13 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-tailwindcss@0.6.0(prettier@3.2.5):
+  prettier-plugin-tailwindcss@0.6.1(prettier@3.3.0):
     dependencies:
-      prettier: 3.2.5
+      prettier: 3.3.0
 
   prettier@2.8.8: {}
 
-  prettier@3.2.5: {}
+  prettier@3.3.0: {}
 
   pretty-bytes@6.1.1: {}
 
@@ -13399,7 +13413,7 @@ snapshots:
   socks-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.5
       socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
@@ -13587,9 +13601,9 @@ snapshots:
       postcss-sorting: 8.0.2(postcss@8.4.38)
       stylelint: 16.6.1(typescript@5.4.5)
 
-  stylelint-prettier@5.0.0(prettier@3.2.5)(stylelint@16.6.1(typescript@5.4.5)):
+  stylelint-prettier@5.0.0(prettier@3.3.0)(stylelint@16.6.1(typescript@5.4.5)):
     dependencies:
-      prettier: 3.2.5
+      prettier: 3.3.0
       prettier-linter-helpers: 1.0.0
       stylelint: 16.6.1(typescript@5.4.5)
 
@@ -13614,7 +13628,7 @@ snapshots:
       cosmiconfig: 9.0.0(typescript@5.4.5)
       css-functions-list: 3.2.2
       css-tree: 2.3.1
-      debug: 4.3.4
+      debug: 4.3.5
       fast-glob: 3.3.2
       fastest-levenshtein: 1.0.16
       file-entry-cache: 9.0.0
@@ -14015,10 +14029,10 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-turbo-console@1.8.6(esbuild@0.20.2)(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5)):
+  unplugin-turbo-console@1.8.6(esbuild@0.20.2)(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5)):
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
-      ast-kit: 0.12.1
+      ast-kit: 0.12.2
       get-port-please: 3.1.2
       h3: 1.11.1
       launch-editor: 2.6.1
@@ -14028,7 +14042,7 @@ snapshots:
     optionalDependencies:
       esbuild: 0.20.2
       rollup: 4.18.0
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       vue: 3.4.27(typescript@5.4.5)
     transitivePeerDependencies:
       - uWebSockets.js
@@ -14093,17 +14107,17 @@ snapshots:
 
   validator@13.12.0: {}
 
-  vite-hot-client@0.2.3(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-hot-client@0.2.3(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
 
-  vite-node@2.0.0-beta.3(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0):
+  vite-node@2.0.0-beta.3(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.4
+      debug: 4.3.5
       pathe: 1.1.2
       picocolors: 1.0.1
-      vite: 5.2.11(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 5.2.12(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14114,33 +14128,33 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-compression@0.5.1(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-plugin-compression@0.5.1(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
       chalk: 4.1.2
-      debug: 4.3.4
+      debug: 4.3.5
       fs-extra: 10.1.0
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-dts@3.9.1(@types/node@20.12.13)(rollup@4.18.0)(typescript@5.4.5)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-plugin-dts@3.9.1(@types/node@20.13.0)(rollup@4.18.0)(typescript@5.4.5)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
-      '@microsoft/api-extractor': 7.43.0(@types/node@20.12.13)
+      '@microsoft/api-extractor': 7.43.0(@types/node@20.13.0)
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
       '@vue/language-core': 1.8.27(typescript@5.4.5)
-      debug: 4.3.4
+      debug: 4.3.5
       kolorist: 1.8.0
       magic-string: 0.30.10
       typescript: 5.4.5
       vue-tsc: 1.8.27(typescript@5.4.5)
     optionalDependencies:
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-html@3.2.2(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-plugin-html@3.2.2(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.20
@@ -14154,63 +14168,63 @@ snapshots:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
 
-  vite-plugin-inspect@0.8.4(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-plugin-inspect@0.8.4(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
       '@antfu/utils': 0.7.8
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
-      debug: 4.3.4
+      debug: 4.3.5
       error-stack-parser-es: 0.1.4
       fs-extra: 11.2.0
       open: 10.1.0
       perfect-debounce: 1.0.0
       picocolors: 1.0.1
       sirv: 2.0.4
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-lib-inject-css@2.1.1(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-plugin-lib-inject-css@2.1.1(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
       '@ast-grep/napi': 0.22.4
       magic-string: 0.30.10
       picocolors: 1.0.1
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
 
-  vite-plugin-mock@3.0.2(esbuild@0.20.2)(mockjs@1.1.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-plugin-mock@3.0.2(esbuild@0.20.2)(mockjs@1.1.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
-      bundle-require: 4.1.0(esbuild@0.20.2)
+      bundle-require: 4.2.1(esbuild@0.20.2)
       chokidar: 3.6.0
       connect: 3.7.0
-      debug: 4.3.4
+      debug: 4.3.5
       esbuild: 0.20.2
       fast-glob: 3.3.2
       mockjs: 1.1.0
       path-to-regexp: 6.2.2
       picocolors: 1.0.1
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-devtools@7.2.1(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5)):
+  vite-plugin-vue-devtools@7.2.1(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5)):
     dependencies:
-      '@vue/devtools-core': 7.2.1(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+      '@vue/devtools-core': 7.2.1(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-kit': 7.2.1(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-shared': 7.2.1
       execa: 8.0.1
       sirv: 2.0.4
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
-      vite-plugin-inspect: 0.8.4(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
-      vite-plugin-vue-inspector: 5.1.2(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
+      vite-plugin-inspect: 0.8.4(rollup@4.18.0)(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
+      vite-plugin-vue-inspector: 5.1.2(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@5.1.2(vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)):
+  vite-plugin-vue-inspector@5.1.2(vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)):
     dependencies:
       '@babel/core': 7.24.6
       '@babel/plugin-proposal-decorators': 7.24.6(@babel/core@7.24.6)
@@ -14221,40 +14235,40 @@ snapshots:
       '@vue/compiler-dom': 3.4.27
       kolorist: 1.8.0
       magic-string: 0.30.10
-      vite: 6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.2.11(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0):
+  vite@5.2.12(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0):
     dependencies:
       esbuild: 0.20.2
       postcss: 8.4.38
       rollup: 4.18.0
     optionalDependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       fsevents: 2.3.3
       sass: 1.77.4
       terser: 5.31.0
 
-  vite@6.0.0-alpha.17(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0):
+  vite@6.0.0-alpha.17(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0):
     dependencies:
       esbuild: 0.20.2
       postcss: 8.4.38
       rollup: 4.18.0
     optionalDependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       fsevents: 2.3.3
       sass: 1.77.4
       terser: 5.31.0
 
-  vitepress@1.2.2(@algolia/client-search@4.23.3)(@types/node@20.12.13)(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(postcss@8.4.38)(qrcode@1.5.3)(sass@1.77.4)(search-insights@2.14.0)(terser@5.31.0)(typescript@5.4.5):
+  vitepress@1.2.2(@algolia/client-search@4.23.3)(@types/node@20.13.0)(async-validator@4.2.5)(axios@1.7.2)(nprogress@0.2.0)(postcss@8.4.38)(qrcode@1.5.3)(sass@1.77.4)(search-insights@2.14.0)(terser@5.31.0)(typescript@5.4.5):
     dependencies:
       '@docsearch/css': 3.6.0
       '@docsearch/js': 3.6.0(@algolia/client-search@4.23.3)(search-insights@2.14.0)
       '@shikijs/core': 1.6.1
       '@shikijs/transformers': 1.6.1
       '@types/markdown-it': 14.1.1
-      '@vitejs/plugin-vue': 5.0.4(vite@5.2.11(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+      '@vitejs/plugin-vue': 5.0.5(vite@5.2.12(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-api': 7.2.1(vue@3.4.27(typescript@5.4.5))
       '@vue/shared': 3.4.27
       '@vueuse/core': 10.10.0(vue@3.4.27(typescript@5.4.5))
@@ -14263,7 +14277,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 6.3.0
       shiki: 1.6.1
-      vite: 5.2.11(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 5.2.12(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       vue: 3.4.27(typescript@5.4.5)
     optionalDependencies:
       postcss: 8.4.38
@@ -14294,7 +14308,7 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@2.0.0-beta.3(@types/node@20.12.13)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0):
+  vitest@2.0.0-beta.3(@types/node@20.13.0)(jsdom@24.1.0)(sass@1.77.4)(terser@5.31.0):
     dependencies:
       '@vitest/expect': 2.0.0-beta.3
       '@vitest/runner': 2.0.0-beta.3
@@ -14302,7 +14316,7 @@ snapshots:
       '@vitest/spy': 2.0.0-beta.3
       '@vitest/utils': 2.0.0-beta.3
       chai: 5.1.1
-      debug: 4.3.4
+      debug: 4.3.5
       execa: 8.0.1
       magic-string: 0.30.10
       pathe: 1.1.2
@@ -14310,11 +14324,11 @@ snapshots:
       std-env: 3.7.0
       tinybench: 2.8.0
       tinypool: 0.9.0
-      vite: 5.2.11(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
-      vite-node: 2.0.0-beta.3(@types/node@20.12.13)(sass@1.77.4)(terser@5.31.0)
+      vite: 5.2.12(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
+      vite-node: 2.0.0-beta.3(@types/node@20.13.0)(sass@1.77.4)(terser@5.31.0)
       why-is-node-running: 2.2.2
     optionalDependencies:
-      '@types/node': 20.12.13
+      '@types/node': 20.13.0
       jsdom: 24.1.0
     transitivePeerDependencies:
       - less
@@ -14327,13 +14341,13 @@ snapshots:
 
   vue-component-type-helpers@2.0.19: {}
 
-  vue-demi@0.14.7(vue@3.4.27(typescript@5.4.5)):
+  vue-demi@0.14.8(vue@3.4.27(typescript@5.4.5)):
     dependencies:
       vue: 3.4.27(typescript@5.4.5)
 
-  vue-eslint-parser@9.4.2(eslint@8.57.0):
+  vue-eslint-parser@9.4.3(eslint@8.57.0):
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.5
       eslint: 8.57.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -14347,7 +14361,7 @@ snapshots:
   vue-hooks-plus@2.1.0(vue@3.4.27(typescript@5.4.5)):
     dependencies:
       '@types/js-cookie': 3.0.6
-      '@vue/devtools-api': 6.6.1
+      '@vue/devtools-api': 6.6.2
       js-cookie: 3.0.5
       lodash: 4.17.21
       qs: 6.12.1
@@ -14359,12 +14373,12 @@ snapshots:
     dependencies:
       '@intlify/core-base': 9.13.1
       '@intlify/shared': 9.13.1
-      '@vue/devtools-api': 6.6.1
+      '@vue/devtools-api': 6.6.2
       vue: 3.4.27(typescript@5.4.5)
 
   vue-router@4.3.2(vue@3.4.27(typescript@5.4.5)):
     dependencies:
-      '@vue/devtools-api': 6.6.1
+      '@vue/devtools-api': 6.6.2
       vue: 3.4.27(typescript@5.4.5)
 
   vue-sonner@1.1.2: {}
@@ -14613,7 +14627,7 @@ snapshots:
       '@types/minimist': 1.2.5
       '@types/node': 18.19.33
       '@types/ps-tree': 1.1.6
-      '@types/which': 3.0.3
+      '@types/which': 3.0.4
       chalk: 5.3.0
       fs-extra: 11.2.0
       fx: 34.0.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 701fe942..6486e5de 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,6 +4,8 @@ packages:
   - "packages/*"
   - "packages/@vben-core/shared/*"
   - "packages/@vben-core/uikit/*"
+  - "packages/@vben-core/forward/*"
+  - "packages/@vben-core/helpers"
   - "packages/business/*"
   - "apps/*"
   - "scripts/*"
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index 78bceaa9..3770478b 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -40,6 +40,18 @@
       "name": "@vben/vite-config",
       "path": "internal/vite-config",
     },
+    {
+      "name": "@vben-core/preferences",
+      "path": "packages/@vben-core/forward/preferences",
+    },
+    {
+      "name": "@vben-core/stores",
+      "path": "packages/@vben-core/forward/stores",
+    },
+    {
+      "name": "@vben-core/helpers",
+      "path": "packages/@vben-core/helpers",
+    },
     {
       "name": "@vben-core/cache",
       "path": "packages/@vben-core/shared/chche",
@@ -104,14 +116,6 @@
       "name": "@vben/locales",
       "path": "packages/locales",
     },
-    {
-      "name": "@vben/preference",
-      "path": "packages/preference",
-    },
-    {
-      "name": "@vben/stores",
-      "path": "packages/stores",
-    },
     {
       "name": "@vben/styles",
       "path": "packages/styles",