refactor: refacotr preference

2024-06-01 23:15:29 +08:00
parent f7b97e8a83
commit fed47f5e05
139 changed files with 2205 additions and 1450 deletions
--- a/packages/@vben-core/README.md
+++ b/packages/@vben-core/README.md
@@ -1,3 +1,3 @@
 # @vben-core

-系统一些比较基础的SDK和UI组件库，请勿将任何业务逻辑和业务包放在这里。
+系统一些比较基础的SDK和UI组件库，该目录后续可能会迁移出去或者发布到npm，请勿将任何业务逻辑和业务包放在该目录。
--- a/packages/@vben-core/forward/README.md
+++ b/packages/@vben-core/forward/README.md
@@ -0,0 +1,3 @@
+# @vben-core/forward
+
+该目录内的包，可直接被app所引用
--- a/packages/@vben-core/forward/preferences/build.config.ts
+++ b/packages/@vben-core/forward/preferences/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
--- a/packages/@vben-core/forward/preferences/package.json
+++ b/packages/@vben-core/forward/preferences/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@vben-core/preferences",
+  "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/preferences"
+  },
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "@vben-core/cache": "workspace:*",
+    "@vben-core/helpers": "workspace:*",
+    "@vben-core/toolkit": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vueuse/core": "^10.10.0",
+    "vue": "3.4.27"
+  }
+}
--- a/packages/@vben-core/forward/preferences/src/config.ts
+++ 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 };
--- a/packages/@vben-core/forward/preferences/src/constants.ts
+++ 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',
+  },
+];
--- a/packages/@vben-core/forward/preferences/src/index.ts
+++ 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';
--- a/packages/@vben-core/forward/preferences/src/preferences.ts
+++ 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 };
--- a/packages/@vben-core/forward/preferences/src/types.ts
+++ 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,
+};
--- a/packages/@vben-core/forward/preferences/src/use-preferences.ts
+++ b/packages/@vben-core/forward/preferences/src/use-preferences.ts
@@ -0,0 +1,123 @@
+import { diff } from '@vben-core/toolkit';
+
+import { computed } from 'vue';
+
+import { isDarkTheme, preferencesManager } from './preferences';
+
+function usePreferences() {
+  const preferences = preferencesManager.getPreferences();
+  const flatPreferences = preferencesManager.getFlatPreferences();
+  const initialPreferences = preferencesManager.getInitialPreferences();
+  /**
+   * @zh_CN 计算偏好设置的变化
+   */
+  const diffPreference = computed(() => {
+    return diff(initialPreferences, preferences);
+  });
+
+  /**
+   * @zh_CN 判断是否为暗黑模式
+   * @param  preferences - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
+   * @returns 如果主题为暗黑模式，返回 true，否则返回 false。
+   */
+  const isDark = computed(() => {
+    return isDarkTheme(flatPreferences.appThemeMode);
+  });
+
+  const theme = computed(() => {
+    return isDark.value ? 'dark' : 'light';
+  });
+
+  /**
+   * @zh_CN 布局方式
+   */
+  const layout = computed(() =>
+    flatPreferences.appIsMobile ? 'side-nav' : flatPreferences.appLayout,
+  );
+
+  /**
+   * @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+   */
+  const isFullContent = computed(
+    () => flatPreferences.appLayout === 'full-content',
+  );
+
+  /**
+   * @zh_CN 是否侧边导航模式
+   */
+  const isSideNav = computed(() => flatPreferences.appLayout === 'side-nav');
+
+  /**
+   * @zh_CN 是否侧边混合模式
+   */
+  const isSideMixedNav = computed(
+    () => flatPreferences.appLayout === 'side-mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否为头部导航模式
+   */
+  const isHeaderNav = computed(
+    () => flatPreferences.appLayout === 'header-nav',
+  );
+
+  /**
+   * @zh_CN 是否为混合导航模式
+   */
+  const isMixedNav = computed(() => flatPreferences.appLayout === 'mixed-nav');
+
+  /**
+   * @zh_CN 是否包含侧边导航模式
+   */
+  const isSideMode = computed(() => {
+    return isMixedNav.value || isSideMixedNav.value || isSideNav.value;
+  });
+
+  /**
+   * @zh_CN 是否开启keep-alive
+   * 在tabs可见以及开启keep-alive的情况下才开启
+   */
+  const keepAlive = computed(
+    () => flatPreferences.tabbarKeepAlive && flatPreferences.tabbarEnable,
+  );
+
+  /**
+   * @zh_CN 登录注册页面布局是否为左侧
+   */
+  const authPanelLeft = computed(() => {
+    return flatPreferences.appAuthPageLayout === 'panel-left';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为左侧
+   */
+  const authPanelRight = computed(() => {
+    return flatPreferences.appAuthPageLayout === 'panel-right';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为中间
+   */
+  const authPanelCenter = computed(() => {
+    return flatPreferences.appAuthPageLayout === 'panel-center';
+  });
+
+  return {
+    authPanelCenter,
+    authPanelLeft,
+    authPanelRight,
+    diffPreference,
+    isDark,
+    isFullContent,
+    isHeaderNav,
+    isMixedNav,
+    isSideMixedNav,
+    isSideMode,
+    isSideNav,
+    keepAlive,
+    layout,
+    theme,
+  };
+}
+
+export { usePreferences };
--- a/packages/@vben-core/forward/preferences/tsconfig.json
+++ b/packages/@vben-core/forward/preferences/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"]
+}
--- a/packages/@vben-core/forward/request/.gitkeep
+++ b/packages/@vben-core/forward/request/.gitkeep
--- a/packages/@vben-core/forward/stores/build.config.ts
+++ b/packages/@vben-core/forward/stores/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
--- a/packages/@vben-core/forward/stores/package.json
+++ b/packages/@vben-core/forward/stores/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@vben-core/stores",
+  "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/stores"
+  },
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "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:*",
+    "pinia": "2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "3.4.27",
+    "vue-router": "^4.3.2"
+  }
+}
--- a/packages/@vben-core/forward/stores/shim-pinia.d.ts
+++ b/packages/@vben-core/forward/stores/shim-pinia.d.ts
@@ -0,0 +1,9 @@
+// TODO: https://github.com/vuejs/pinia/issues/2098
+declare module 'pinia' {
+  export function acceptHMRUpdate(
+    initialUseStore: StoreDefinition | any,
+    hot: any,
+  ): (newModule: any) => any;
+}
+
+export {};
--- a/packages/@vben-core/forward/stores/src/index.ts
+++ b/packages/@vben-core/forward/stores/src/index.ts
@@ -0,0 +1,3 @@
+export * from './modules';
+export * from './setup';
+export { storeToRefs } from 'pinia';
--- a/packages/@vben-core/forward/stores/src/modules/access.test.ts
+++ b/packages/@vben-core/forward/stores/src/modules/access.test.ts
@@ -0,0 +1,24 @@
+import { createPinia, setActivePinia } from 'pinia';
+import {
+  //  beforeEach,
+  describe,
+  // expect,
+  it,
+} from 'vitest';
+
+// import { useAccessStore } from '../modules/access';
+
+describe('useAccessStore', () => {
+  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');
+  });
+});
--- a/packages/@vben-core/forward/stores/src/modules/access.ts
+++ b/packages/@vben-core/forward/stores/src/modules/access.ts
@@ -0,0 +1,95 @@
+import type { MenuRecordRaw, UserInfo } from '@vben-core/typings';
+
+import type { RouteRecordRaw } from 'vue-router';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+type AccessToken = null | string;
+
+interface AccessState {
+  /**
+   * 可访问的菜单列表
+   */
+  accessMenus: MenuRecordRaw[];
+  /**
+   * 可访问的路由列表
+   */
+  accessRoutes: RouteRecordRaw[];
+  /**
+   * 登录 accessToken
+   */
+  accessToken: AccessToken;
+  /**
+   * 用户信息
+   */
+  userInfo: UserInfo | null;
+  /**
+   * 用户角色
+   */
+  userRoles: string[];
+}
+
+/**
+ * @zh_CN 访问权限相关
+ */
+const useAccessStore = defineStore('access', {
+  actions: {
+    setAccessMenus(menus: MenuRecordRaw[]) {
+      this.accessMenus = menus;
+    },
+    setAccessRoutes(routes: RouteRecordRaw[]) {
+      this.accessRoutes = routes;
+    },
+    setAccessToken(token: AccessToken) {
+      this.accessToken = token;
+    },
+    setUserInfo(userInfo: UserInfo) {
+      // 设置用户信息
+      this.userInfo = userInfo;
+      // 设置角色信息
+      const roles = userInfo?.roles ?? [];
+      const roleValues = roles.map((item) => item.value);
+      this.setUserRoles(roleValues);
+    },
+    setUserRoles(roles: string[]) {
+      this.userRoles = roles;
+    },
+  },
+  getters: {
+    getAccessMenus(): MenuRecordRaw[] {
+      return this.accessMenus;
+    },
+    getAccessRoutes(): RouteRecordRaw[] {
+      return this.accessRoutes;
+    },
+    getAccessToken(): AccessToken {
+      return this.accessToken;
+    },
+    getUserInfo(): UserInfo | null {
+      return this.userInfo;
+    },
+    getUserRoles(): string[] {
+      return this.userRoles;
+    },
+  },
+  persist: {
+    // 持久化
+    // TODO: accessToken 过期时间
+    paths: ['accessToken', 'userRoles', 'userInfo'],
+  },
+  state: (): AccessState => ({
+    accessMenus: [],
+    accessRoutes: [],
+    accessToken: null,
+    userInfo: null,
+    userRoles: [],
+  }),
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useAccessStore, hot));
+}
+
+export { useAccessStore };
--- a/packages/@vben-core/forward/stores/src/modules/index.ts
+++ b/packages/@vben-core/forward/stores/src/modules/index.ts
@@ -0,0 +1,2 @@
+export * from './access';
+export * from './tabs';
--- a/packages/@vben-core/forward/stores/src/modules/tabs.ts
+++ b/packages/@vben-core/forward/stores/src/modules/tabs.ts
@@ -0,0 +1,399 @@
+import { startProgress, stopProgress } from '@vben-core/toolkit';
+import { TabItem } from '@vben-core/typings';
+import type { RouteRecordNormalized, Router } from 'vue-router';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+import { toRaw } from 'vue';
+
+/**
+ * @zh_CN 克隆路由,防止路由被修改
+ * @param route
+ */
+function cloneTab(route: TabItem): TabItem {
+  if (!route) {
+    return route;
+  }
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+}
+
+function routeToTab(route: RouteRecordNormalized) {
+  return {
+    meta: route.meta,
+    name: route.name,
+    path: route.path,
+  } as unknown as TabItem;
+}
+
+interface TabsState {
+  /**
+   * @zh_CN 固定的标签页列表
+   */
+  affixTabs: RouteRecordNormalized[];
+  /**
+   * @zh_CN 当前打开的标签页列表缓存
+   */
+  cacheTabs: Set<string>;
+  /**
+   * @zh_CN 需要排除缓存的标签页
+   */
+  excludeCacheTabs: Set<string>;
+  /**
+   * @zh_CN 是否刷新
+   */
+  renderRouteView?: boolean;
+  /**
+   * @zh_CN 当前打开的标签页列表
+   */
+  tabs: TabItem[];
+}
+
+/**
+ * @zh_CN 访问权限相关
+ */
+const useTabsStore = defineStore('tabs', {
+  actions: {
+    /**
+     * Close tabs in bulk
+     */
+    async _bulkCloseByPaths(paths: string[]) {
+      this.tabs = this.tabs.filter((item) => {
+        return !paths.includes(this.getTabPath(item));
+      });
+
+      this.updateCacheTab();
+    },
+    /**
+     * @zh_CN 关闭标签页
+     * @param tab
+     */
+    _close(tab: TabItem) {
+      const { fullPath } = tab;
+      if (this._isAffixTab(tab)) {
+        return;
+      }
+      const index = this.tabs.findIndex((item) => item.fullPath === fullPath);
+      index !== -1 && this.tabs.splice(index, 1);
+    },
+    /**
+     * @zh_CN 跳转到默认标签页
+     */
+    async _goToDefaultTab(router: Router) {
+      if (this.getTabs.length <= 0) {
+        // TODO: 跳转首页
+        return;
+      }
+      const firstTab = this.getTabs[0];
+      await this._goToTab(firstTab, router);
+    },
+    /**
+     * @zh_CN 跳转到标签页
+     * @param tab
+     */
+    async _goToTab(tab: TabItem, router: Router) {
+      const { params, path, query } = tab;
+      const toParams = {
+        params: params || {},
+        path,
+        query: query || {},
+      };
+      await router.replace(toParams);
+    },
+    /**
+     * @zh_CN 是否是固定标签页
+     * @param tab
+     */
+    _isAffixTab(tab: TabItem) {
+      return tab?.meta?.affixTab ?? false;
+    },
+    /**
+     * @zh_CN 添加标签页
+     * @param routeTab
+     */
+    addTab(routeTab: TabItem) {
+      const tab = cloneTab(routeTab);
+      const { fullPath, meta, params, query } = tab;
+      if (meta?.hideInTab) {
+        return;
+      }
+
+      const tabIndex = this.tabs.findIndex((tab) => {
+        return this.getTabPath(tab) === this.getTabPath(routeTab);
+      });
+
+      if (tabIndex === -1) {
+        this.tabs.push(tab);
+      } else {
+        // 页面已经存在，不重复添加选项卡，只更新选项卡参数
+        const currentTab = toRaw(this.tabs)[tabIndex];
+        if (!currentTab) {
+          return;
+        }
+        currentTab.params = params || currentTab.params;
+        currentTab.query = query || currentTab.query;
+        currentTab.fullPath = fullPath || currentTab.fullPath;
+        this.tabs.splice(tabIndex, 1, currentTab);
+      }
+      this.updateCacheTab();
+    },
+    /**
+     * @zh_CN 关闭所有标签页
+     */
+    async closeAllTabs(router: Router) {
+      this.tabs = this.tabs.filter((tab) => this._isAffixTab(tab));
+      await this._goToDefaultTab(router);
+      this.updateCacheTab();
+    },
+    /**
+     * @zh_CN 关闭左侧标签页
+     * @param tab
+     */
+    async closeLeftTabs(tab: TabItem) {
+      const index = this.tabs.findIndex(
+        (item) => this.getTabPath(item) === this.getTabPath(tab),
+      );
+
+      if (index > 0) {
+        const leftTabs = this.tabs.slice(0, index);
+        const paths: string[] = [];
+        for (const item of leftTabs) {
+          if (!this._isAffixTab(tab)) {
+            paths.push(this.getTabPath(item));
+          }
+        }
+        await this._bulkCloseByPaths(paths);
+      }
+    },
+
+    /**
+     * @zh_CN 关闭其他标签页
+     * @param tab
+     */
+    async closeOtherTabs(tab: TabItem) {
+      const closePaths = this.tabs.map((item) => this.getTabPath(item));
+
+      const paths: string[] = [];
+
+      for (const path of closePaths) {
+        if (path !== tab.fullPath) {
+          const closeTab = this.tabs.find(
+            (item) => this.getTabPath(item) === path,
+          );
+          if (!closeTab) {
+            continue;
+          }
+          if (!this._isAffixTab(tab)) {
+            paths.push(this.getTabPath(closeTab));
+          }
+        }
+      }
+      await this._bulkCloseByPaths(paths);
+    },
+
+    /**
+     * @zh_CN 关闭右侧标签页
+     * @param tab
+     */
+    async closeRightTabs(tab: TabItem) {
+      const index = this.tabs.findIndex(
+        (item) => this.getTabPath(item) === this.getTabPath(tab),
+      );
+
+      if (index >= 0 && index < this.tabs.length - 1) {
+        const rightTabs = this.tabs.slice(index + 1, this.tabs.length);
+
+        const paths: string[] = [];
+        for (const item of rightTabs) {
+          if (!this._isAffixTab(tab)) {
+            paths.push(this.getTabPath(item));
+          }
+        }
+        await this._bulkCloseByPaths(paths);
+      }
+    },
+
+    /**
+     * @zh_CN 关闭标签页
+     * @param tab
+     * @param router
+     */
+    async closeTab(tab: TabItem, router: Router) {
+      const { currentRoute } = router;
+
+      // 关闭不是激活选项卡
+      if (this.getTabPath(currentRoute.value) !== this.getTabPath(tab)) {
+        this._close(tab);
+        this.updateCacheTab();
+        return;
+      }
+      const index = this.getTabs.findIndex(
+        (item) => this.getTabPath(item) === this.getTabPath(currentRoute.value),
+      );
+
+      const before = this.getTabs[index - 1];
+      const after = this.getTabs[index + 1];
+
+      // 下一个tab存在，跳转到下一个
+      if (after) {
+        this._close(currentRoute.value);
+        await this._goToTab(after, router);
+        // 上一个tab存在，跳转到上一个
+      } else if (before) {
+        this._close(currentRoute.value);
+        await this._goToTab(before, router);
+      } else {
+        console.error('关闭标签页失败,当前只剩一个标签页。');
+      }
+    },
+    /**
+     * @zh_CN 通过key关闭标签页
+     * @param key
+     */
+    async closeTabByKey(key: string, router: Router) {
+      const index = this.tabs.findIndex(
+        (item) => this.getTabPath(item) === key,
+      );
+      if (index === -1) {
+        return;
+      }
+
+      await this.closeTab(this.tabs[index], router);
+    },
+    getTabPath(tab: RouteRecordNormalized | TabItem) {
+      return decodeURIComponent((tab as TabItem).fullPath || tab.path);
+    },
+    /**
+     * @zh_CN 固定标签页
+     * @param tab
+     */
+    async pushPinTab(tab: TabItem) {
+      const index = this.tabs.findIndex(
+        (item) => this.getTabPath(item) === this.getTabPath(tab),
+      );
+      if (index !== -1) {
+        this.tabs[index].meta.affixTab = true;
+      }
+      // TODO: 这里应该把tab从tbs中移除
+      this.affixTabs.push(tab as unknown as RouteRecordNormalized);
+    },
+    /**
+     * 刷新标签页
+     */
+    async refreshTab(router: Router) {
+      const { currentRoute } = router;
+      const { name } = currentRoute.value;
+
+      this.excludeCacheTabs.add(name as string);
+      this.renderRouteView = false;
+      startProgress();
+
+      await new Promise((resolve) => setTimeout(resolve, 200));
+
+      this.excludeCacheTabs.delete(name as string);
+      this.renderRouteView = true;
+      stopProgress();
+    },
+    /**
+     * 设置固定标签页
+     * @param tabs
+     */
+    setAffixTabs(tabs: RouteRecordNormalized[]) {
+      for (const tab of tabs) {
+        this.addTab(routeToTab(tab));
+      }
+      this.affixTabs = tabs;
+    },
+    /**
+     * @zh_CN 取消固定标签页
+     * @param tab
+     */
+    async unPushPinTab(tab: TabItem) {
+      const index = this.affixTabs.findIndex(
+        (item) => this.getTabPath(item) === this.getTabPath(tab),
+      );
+
+      if (index !== -1) {
+        this.affixTabs[index].meta.affixTab = false;
+        this.affixTabs.splice(index, 1);
+        this.addTab(tab);
+      }
+    },
+
+    /**
+     * 根据当前打开的选项卡更新缓存
+     */
+    async updateCacheTab() {
+      const cacheMap = new Set<string>();
+
+      for (const tab of this.tabs) {
+        // 跳过不需要持久化的标签页
+        const keepAlive = tab.meta?.keepAlive;
+        if (!keepAlive) {
+          continue;
+        }
+        tab.matched.forEach((t, i) => {
+          if (i > 0) {
+            cacheMap.add(t.name as string);
+          }
+        });
+
+        const name = tab.name as string;
+        cacheMap.add(name);
+      }
+      this.cacheTabs = cacheMap;
+    },
+  },
+  getters: {
+    getCacheTabs(): string[] {
+      return [...this.cacheTabs];
+    },
+    getExcludeTabs(): string[] {
+      return [...this.excludeCacheTabs];
+    },
+
+    getTabs(): TabItem[] {
+      const tabs: TabItem[] = [];
+      const affixTabPaths = new Set<string>();
+      for (const tab of this.affixTabs) {
+        if (!tab.meta.hideInTab) {
+          tabs.push(routeToTab(tab));
+          affixTabPaths.add(tab.path);
+        }
+      }
+      for (const tab of this.tabs) {
+        if (!affixTabPaths.has(tab.path) && !tab.meta.hideInTab) {
+          tabs.push(tab);
+        }
+      }
+      return tabs;
+    },
+  },
+  persist: {
+    // 持久化
+    paths: [],
+  },
+  state: (): TabsState => ({
+    affixTabs: [],
+    cacheTabs: new Set(),
+    excludeCacheTabs: new Set(),
+    renderRouteView: true,
+    tabs: [],
+  }),
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useTabsStore, hot));
+}
+
+export { useTabsStore };
--- a/packages/@vben-core/forward/stores/src/setup.ts
+++ b/packages/@vben-core/forward/stores/src/setup.ts
@@ -0,0 +1,30 @@
+import { createPinia } from 'pinia';
+
+interface InitStoreOptions {
+  /**
+   * @zh_CN 应用名,由于 @vben-core/stores 是公用的，后续可能有多个app，为了防止多个app缓存冲突，可在这里配置应用名
+   * 应用名将被用于持久化的前缀
+   */
+  namespace: string;
+}
+
+/**
+ * @zh_CN 初始化pinia
+ */
+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}`,
+      storage: localStorage,
+    }),
+  );
+  return pinia;
+}
+
+export { initStore };
+
+export type { InitStoreOptions };
--- a/packages/@vben-core/forward/stores/tsconfig.json
+++ b/packages/@vben-core/forward/stores/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src", "shim-pinia.d.ts"]
+}
--- a/packages/@vben-core/helpers/build.config.ts
+++ 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'],
+});
--- a/packages/@vben-core/helpers/package.json
+++ 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:*"
+  }
+}
--- a/packages/@vben-core/helpers/src/index.ts
+++ b/packages/@vben-core/helpers/src/index.ts
@@ -0,0 +1 @@
+export * from './object';
--- a/packages/@vben-core/helpers/src/object.test.ts
+++ 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);
+  });
+});
--- a/packages/@vben-core/helpers/src/object.ts
+++ 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>;
--- a/packages/@vben-core/helpers/tsconfig.json
+++ b/packages/@vben-core/helpers/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "include": ["src"]
+}
--- 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';
--- a/packages/@vben-core/shared/chche/src/storage-cache.test.ts
+++ b/packages/@vben-core/shared/chche/src/storage-cache.test.ts
@@ -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');
-  });
-});
--- a/packages/@vben-core/shared/chche/src/storage-cache.ts
+++ b/packages/@vben-core/shared/chche/src/storage-cache.ts
@@ -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 };
--- a/packages/@vben-core/shared/chche/src/storage-manager.test.ts
+++ 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();
+  });
+});
--- a/packages/@vben-core/shared/chche/src/storage-manager.ts
+++ 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 };
--- 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-[''];
--- 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';
--- a/packages/@vben-core/shared/toolkit/src/letter.test.ts
+++ 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');
+  });
+});
--- a/packages/@vben-core/shared/toolkit/src/letter.ts
+++ 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 };
--- a/packages/@vben-core/shared/typings/src/app.ts
+++ 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,
+};
--- a/packages/@vben-core/shared/typings/src/flatten.d.ts
+++ 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 };
--- 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';
--- a/packages/@vben-core/shared/typings/src/preference.ts
+++ b/packages/@vben-core/shared/typings/src/preference.ts
@@ -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,
-};
--- 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
--- 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"
--- 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 {
--- 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>
--- 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,
        )
      "