From 68229a4d2f58dd784c4416b88b9b98e7ba2a5ac0 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Sun, 9 Jun 2024 12:53:38 +0800
Subject: [PATCH] chore: remove flatPreferences

---
 .../@core/forward/preferences/src/index.ts    |   8 +-
 .../forward/preferences/src/preferences.ts    |  65 ++---
 .../@core/forward/preferences/src/types.ts    |   5 +-
 .../preferences/src/use-preferences.ts        |  27 +-
 .../authentication/widgets/layout-toggle.vue  |  18 +-
 .../preferences/blocks/general/animation.vue  |  16 +-
 .../preferences/blocks/general/general.vue    |  12 +-
 .../common-ui/src/preferences/blocks/index.ts |   2 +-
 .../preferences/blocks/layout/breadcrumb.vue  |  37 ++-
 .../src/preferences/blocks/layout/footer.vue  |   6 +-
 .../src/preferences/blocks/layout/header.vue  |   6 +-
 .../preferences/blocks/layout/navigation.vue  |   4 +-
 .../src/preferences/blocks/layout/sidebar.vue |  16 +-
 .../blocks/layout/{tabs.vue => tabbar.vue}    |   8 +-
 .../preferences/blocks/theme/color-mode.vue   |   8 +-
 .../src/preferences/blocks/theme/theme.vue    |   4 +-
 .../src/preferences/preferences-widget.vue    | 256 +++++++++++++++---
 .../common-ui/src/preferences/preferences.vue | 141 ++++++----
 .../src/theme-toggle/theme-toggle.vue         |   9 +-
 .../business/layouts/src/basic/layout.vue     |  38 ++-
 20 files changed, 462 insertions(+), 224 deletions(-)
 rename packages/business/common-ui/src/preferences/blocks/layout/{tabs.vue => tabbar.vue} (66%)

diff --git a/packages/@core/forward/preferences/src/index.ts b/packages/@core/forward/preferences/src/index.ts
index 011b814e..be82caac 100644
--- a/packages/@core/forward/preferences/src/index.ts
+++ b/packages/@core/forward/preferences/src/index.ts
@@ -1,5 +1,3 @@
-import type { Flatten } from '@vben-core/typings';
-
 import type { Preferences } from './types';
 
 import { preferencesManager } from './preferences';
@@ -8,8 +6,8 @@ import { preferencesManager } from './preferences';
 const preferences: Preferences = preferencesManager.getPreferences();
 
 // 扁平化后的偏好设置
-const flatPreferences: Flatten<Preferences> =
-  preferencesManager.getFlatPreferences();
+// const flatPreferences: Flatten<Preferences> =
+//   preferencesManager.getFlatPreferences();
 
 // 更新偏好设置
 const updatePreferences =
@@ -20,7 +18,7 @@ const resetPreferences =
   preferencesManager.resetPreferences.bind(preferencesManager);
 
 export {
-  flatPreferences,
+  // flatPreferences,
   preferences,
   preferencesManager,
   resetPreferences,
diff --git a/packages/@core/forward/preferences/src/preferences.ts b/packages/@core/forward/preferences/src/preferences.ts
index 19b27bda..5baf1532 100644
--- a/packages/@core/forward/preferences/src/preferences.ts
+++ b/packages/@core/forward/preferences/src/preferences.ts
@@ -1,15 +1,10 @@
-import type {
-  DeepPartial,
-  Flatten,
-  FlattenObjectKeys,
-} from '@vben-core/typings';
+import type { DeepPartial } from '@vben-core/typings';
 
 import type { Preferences } from './types';
 
-import { markRaw, reactive, watch } from 'vue';
+import { markRaw, reactive, readonly, watch } from 'vue';
 
 import { StorageManager } from '@vben-core/cache';
-import { flattenObject, nestedObject } from '@vben-core/helpers';
 import { convertToHslCssVar, merge } from '@vben-core/toolkit';
 
 import {
@@ -40,7 +35,7 @@ function isDarkTheme(theme: string) {
 
 class PreferenceManager {
   private cache: StorageManager | null = null;
-  private flattenedState: Flatten<Preferences>;
+  // private flattenedState: Flatten<Preferences>;
   private initialPreferences: Preferences = defaultPreferences;
   private isInitialized: boolean = false;
   private savePreferences: (preference: Preferences) => void;
@@ -49,7 +44,7 @@ class PreferenceManager {
   });
   constructor() {
     this.cache = new StorageManager();
-    this.flattenedState = reactive(flattenObject(this.state));
+    // this.flattenedState = reactive(flattenObject(this.state));
 
     this.savePreferences = useDebounceFn(
       (preference: Preferences) => this._savePreferences(preference),
@@ -113,28 +108,28 @@ class PreferenceManager {
       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 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,
-    );
+    // const debounceWaterFlattenedState = useDebounceFn(
+    //   (val: Flatten<Preferences>) => {
+    //     this.updateState(val);
+    //     this.savePreferences(this.state);
+    //   },
+    //   16,
+    // );
 
     // 监听 state 的变化
-    watch(this.state, debounceWaterState, { deep: true });
+    // watch(this.state, debounceWaterState, { deep: true });
 
     // 监听 flattenedState 的变化并触发 set 方法
-    watch(this.flattenedState, debounceWaterFlattenedState, { deep: true });
+    // watch(this.flattenedState, debounceWaterFlattenedState, { deep: true });
 
     // 监听断点，判断是否移动端
     const breakpoints = useBreakpoints(breakpointsTailwind);
@@ -200,10 +195,10 @@ class PreferenceManager {
    * 将新的扁平对象转换为嵌套对象，并与当前状态合并。
    * @param {FlattenObject<Preferences>} newValue - 新的扁平对象
    */
-  private updateState(newValue: Flatten<Preferences>) {
-    const nestObj = nestedObject(newValue, 2);
-    Object.assign(this.state, merge(nestObj, this.state));
-  }
+  // private updateState(newValue: Flatten<Preferences>) {
+  //   const nestObj = nestedObject(newValue, 2);
+  //   Object.assign(this.state, merge(nestObj, this.state));
+  // }
 
   /**
    * 更新主题
@@ -222,16 +217,16 @@ class PreferenceManager {
     }
   }
 
-  public getFlatPreferences() {
-    return this.flattenedState;
-  }
+  // public getFlatPreferences() {
+  //   return this.flattenedState;
+  // }
 
   public getInitialPreferences() {
     return this.initialPreferences;
   }
 
   public getPreferences() {
-    return this.state;
+    return readonly(this.state);
   }
 
   /**
@@ -291,7 +286,7 @@ class PreferenceManager {
 
     Object.assign(this.state, mergedState);
 
-    Object.assign(this.flattenedState, flattenObject(this.state));
+    // Object.assign(this.flattenedState, flattenObject(this.state));
 
     // 根据更新的键值执行相应的操作
     this.handleUpdates(updates);
diff --git a/packages/@core/forward/preferences/src/types.ts b/packages/@core/forward/preferences/src/types.ts
index 17e016a1..fffb1f5d 100644
--- a/packages/@core/forward/preferences/src/types.ts
+++ b/packages/@core/forward/preferences/src/types.ts
@@ -10,7 +10,7 @@ type BreadcrumbStyleType = 'background' | 'normal';
 
 type NavigationStyleType = 'plain' | 'rounded';
 
-type PageTransitionType = 'fade-slide';
+type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
 
 type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
 
@@ -132,7 +132,7 @@ interface TransitionPreferences {
   /** 页面切换动画是否启用 */
   enable: boolean;
   /** 页面切换动画 */
-  name: PageTransitionType;
+  name: PageTransitionType | string;
   /** 是否开启页面加载进度动画 */
   progress: boolean;
 }
@@ -176,6 +176,7 @@ export type {
   LayoutType,
   LogoPreferences,
   NavigationPreferences,
+  NavigationStyleType,
   PageTransitionType,
   Preferences,
   PreferencesKeys,
diff --git a/packages/@core/forward/preferences/src/use-preferences.ts b/packages/@core/forward/preferences/src/use-preferences.ts
index 21fad0ad..27c923d2 100644
--- a/packages/@core/forward/preferences/src/use-preferences.ts
+++ b/packages/@core/forward/preferences/src/use-preferences.ts
@@ -6,7 +6,6 @@ import { isDarkTheme, preferencesManager } from './preferences';
 
 function usePreferences() {
   const preferences = preferencesManager.getPreferences();
-  const flatPreferences = preferencesManager.getFlatPreferences();
   const initialPreferences = preferencesManager.getInitialPreferences();
   /**
    * @zh_CN 计算偏好设置的变化
@@ -15,13 +14,15 @@ function usePreferences() {
     return diff(initialPreferences, preferences);
   });
 
+  const appPreferences = computed(() => preferences.app);
+
   /**
    * @zh_CN 判断是否为暗黑模式
    * @param  preferences - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
    * @returns 如果主题为暗黑模式，返回 true，否则返回 false。
    */
   const isDark = computed(() => {
-    return isDarkTheme(flatPreferences.appThemeMode);
+    return isDarkTheme(appPreferences.value.themeMode);
   });
 
   const theme = computed(() => {
@@ -32,39 +33,41 @@ function usePreferences() {
    * @zh_CN 布局方式
    */
   const layout = computed(() =>
-    flatPreferences.appIsMobile ? 'side-nav' : flatPreferences.appLayout,
+    appPreferences.value.isMobile ? 'side-nav' : appPreferences.value.layout,
   );
 
   /**
    * @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
    */
   const isFullContent = computed(
-    () => flatPreferences.appLayout === 'full-content',
+    () => appPreferences.value.layout === 'full-content',
   );
 
   /**
    * @zh_CN 是否侧边导航模式
    */
-  const isSideNav = computed(() => flatPreferences.appLayout === 'side-nav');
+  const isSideNav = computed(() => appPreferences.value.layout === 'side-nav');
 
   /**
    * @zh_CN 是否侧边混合模式
    */
   const isSideMixedNav = computed(
-    () => flatPreferences.appLayout === 'side-mixed-nav',
+    () => appPreferences.value.layout === 'side-mixed-nav',
   );
 
   /**
    * @zh_CN 是否为头部导航模式
    */
   const isHeaderNav = computed(
-    () => flatPreferences.appLayout === 'header-nav',
+    () => appPreferences.value.layout === 'header-nav',
   );
 
   /**
    * @zh_CN 是否为混合导航模式
    */
-  const isMixedNav = computed(() => flatPreferences.appLayout === 'mixed-nav');
+  const isMixedNav = computed(
+    () => appPreferences.value.layout === 'mixed-nav',
+  );
 
   /**
    * @zh_CN 是否包含侧边导航模式
@@ -78,28 +81,28 @@ function usePreferences() {
    * 在tabs可见以及开启keep-alive的情况下才开启
    */
   const keepAlive = computed(
-    () => flatPreferences.tabbarKeepAlive && flatPreferences.tabbarEnable,
+    () => preferences.tabbar.enable && preferences.tabbar.keepAlive,
   );
 
   /**
    * @zh_CN 登录注册页面布局是否为左侧
    */
   const authPanelLeft = computed(() => {
-    return flatPreferences.appAuthPageLayout === 'panel-left';
+    return appPreferences.value.authPageLayout === 'panel-left';
   });
 
   /**
    * @zh_CN 登录注册页面布局是否为左侧
    */
   const authPanelRight = computed(() => {
-    return flatPreferences.appAuthPageLayout === 'panel-right';
+    return appPreferences.value.authPageLayout === 'panel-right';
   });
 
   /**
    * @zh_CN 登录注册页面布局是否为中间
    */
   const authPanelCenter = computed(() => {
-    return flatPreferences.appAuthPageLayout === 'panel-center';
+    return appPreferences.value.authPageLayout === 'panel-center';
   });
 
   return {
diff --git a/packages/business/common-ui/src/authentication/widgets/layout-toggle.vue b/packages/business/common-ui/src/authentication/widgets/layout-toggle.vue
index 17591f8b..1f450029 100644
--- a/packages/business/common-ui/src/authentication/widgets/layout-toggle.vue
+++ b/packages/business/common-ui/src/authentication/widgets/layout-toggle.vue
@@ -5,7 +5,12 @@ import { computed } from 'vue';
 
 import { $t } from '@vben/locales';
 import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
-import { preferences, usePreferences } from '@vben-core/preferences';
+import {
+  type AuthPageLayoutType,
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben-core/preferences';
 import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
@@ -31,12 +36,21 @@ const menus = computed((): VbenDropdownMenuItem[] => [
 ]);
 
 const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
+
+function handleUpdate(value: string) {
+  updatePreferences({
+    app: {
+      authPageLayout: value as AuthPageLayoutType,
+    },
+  });
+}
 </script>
 
 <template>
   <VbenDropdownRadioMenu
-    v-model="preferences.app.authPageLayout"
     :menus="menus"
+    :model-value="preferences.app.authPageLayout"
+    @update:model-value="handleUpdate"
   >
     <VbenIconButton>
       <MdiDockRight v-if="authPanelRight" class="size-5" />
diff --git a/packages/business/common-ui/src/preferences/blocks/general/animation.vue b/packages/business/common-ui/src/preferences/blocks/general/animation.vue
index cf480751..14fc7d6a 100644
--- a/packages/business/common-ui/src/preferences/blocks/general/animation.vue
+++ b/packages/business/common-ui/src/preferences/blocks/general/animation.vue
@@ -6,30 +6,30 @@ import SwitchItem from '../switch-item.vue';
 defineOptions({
   name: 'PreferenceAnimation',
 });
-const pageProgress = defineModel<boolean>('pageProgress', {
+const transitionProgress = defineModel<boolean>('transitionProgress', {
   // 默认值
   default: false,
 });
 
-const pageTransition = defineModel<string>('pageTransition');
-const pageTransitionEnable = defineModel<boolean>('pageTransitionEnable');
+const transitionName = defineModel<string>('transitionName');
+const transitionEnable = defineModel<boolean>('transitionEnable');
 
 const transitionPreset = ['fade', 'fade-slide', 'fade-up', 'fade-down'];
 
 function handleClick(value: string) {
-  pageTransition.value = value;
+  transitionName.value = value;
 }
 </script>
 
 <template>
-  <SwitchItem v-model="pageProgress">
+  <SwitchItem v-model="transitionProgress">
     {{ $t('preference.page-progress') }}
   </SwitchItem>
-  <SwitchItem v-model="pageTransitionEnable">
+  <SwitchItem v-model="transitionEnable">
     {{ $t('preference.page-transition') }}
   </SwitchItem>
   <div
-    v-if="pageTransitionEnable"
+    v-if="transitionEnable"
     class="mb-2 mt-3 flex justify-between gap-3 px-2"
   >
     <div
@@ -37,7 +37,7 @@ function handleClick(value: string) {
       :key="item"
       class="outline-box p-2"
       :class="{
-        'outline-box-active': pageTransition === item,
+        'outline-box-active': transitionName === item,
       }"
       @click="handleClick(item)"
     >
diff --git a/packages/business/common-ui/src/preferences/blocks/general/general.vue b/packages/business/common-ui/src/preferences/blocks/general/general.vue
index 189a2759..1db1fa73 100644
--- a/packages/business/common-ui/src/preferences/blocks/general/general.vue
+++ b/packages/business/common-ui/src/preferences/blocks/general/general.vue
@@ -11,9 +11,9 @@ defineOptions({
   name: 'PreferenceGeneralConfig',
 });
 
-const locale = defineModel<string>('locale');
-const dynamicTitle = defineModel<boolean>('dynamicTitle');
-const shortcutKeys = defineModel<boolean>('shortcutKeys');
+const appLocale = defineModel<string>('appLocale');
+const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
+const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
 
 const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
   label: item.text,
@@ -22,13 +22,13 @@ const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
 </script>
 
 <template>
-  <SelectItem v-model="locale" :items="localeItems">
+  <SelectItem v-model="appLocale" :items="localeItems">
     {{ $t('preference.language') }}
   </SelectItem>
-  <SwitchItem v-model="dynamicTitle">
+  <SwitchItem v-model="appDynamicTitle">
     {{ $t('preference.dynamic-title') }}
   </SwitchItem>
-  <SwitchItem v-model="shortcutKeys">
+  <SwitchItem v-model="shortcutKeysEnable">
     {{ $t('preference.shortcut-key') }}
   </SwitchItem>
 </template>
diff --git a/packages/business/common-ui/src/preferences/blocks/index.ts b/packages/business/common-ui/src/preferences/blocks/index.ts
index 587c660b..a6cf27fd 100644
--- a/packages/business/common-ui/src/preferences/blocks/index.ts
+++ b/packages/business/common-ui/src/preferences/blocks/index.ts
@@ -8,7 +8,7 @@ export { default as Header } from './layout/header.vue';
 export { default as Layout } from './layout/layout.vue';
 export { default as Navigation } from './layout/navigation.vue';
 export { default as Sidebar } from './layout/sidebar.vue';
-export { default as Tabs } from './layout/tabs.vue';
+export { default as Tabbar } from './layout/tabbar.vue';
 export { default as SwitchItem } from './switch-item.vue';
 export { default as ThemeColor } from './theme/color.vue';
 export { default as ColorMode } from './theme/color-mode.vue';
diff --git a/packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue b/packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue
index ddf384e4..d89a2c9e 100644
--- a/packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { SelectListItem } from '@vben/types';
 
+import { computed } from 'vue';
+
 import { $t } from '@vben/locales';
 
 import SwitchItem from '../switch-item.vue';
@@ -10,46 +12,41 @@ defineOptions({
   name: 'PreferenceBreadcrumbConfig',
 });
 
-defineProps<{ disabled: boolean }>();
+const props = defineProps<{ disabled?: boolean }>();
 
-const breadcrumbVisible = defineModel<boolean>('breadcrumbVisible');
-const breadcrumbIcon = defineModel<boolean>('breadcrumbIcon');
-const breadcrumbStyle = defineModel<string>('breadcrumbStyle');
-const breadcrumbHome = defineModel<boolean>('breadcrumbHome');
+const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
+const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
+const breadcrumbStyleType = defineModel<string>('breadcrumbStyleType');
+const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
 const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
 
 const typeItems: SelectListItem[] = [
   { label: $t('preference.normal'), value: 'normal' },
   { label: $t('preference.breadcrumb-background'), value: 'background' },
 ];
+
+const disableItem = computed(() => {
+  return !breadcrumbEnable.value || props.disabled;
+});
 </script>
 
 <template>
-  <SwitchItem v-model="breadcrumbVisible" :disabled="disabled">
+  <SwitchItem v-model="breadcrumbEnable" :disabled="disabled">
     {{ $t('preference.breadcrumb-enable') }}
   </SwitchItem>
-  <SwitchItem
-    v-model="breadcrumbHideOnlyOne"
-    :disabled="!breadcrumbVisible || disabled"
-  >
+  <SwitchItem v-model="breadcrumbHideOnlyOne" :disabled="disableItem">
     {{ $t('preference.breadcrumb-hide-only-one') }}
   </SwitchItem>
-  <SwitchItem
-    v-model="breadcrumbHome"
-    :disabled="!breadcrumbVisible || disabled"
-  >
+  <SwitchItem v-model="breadcrumbShowHome" :disabled="disableItem">
     {{ $t('preference.breadcrumb-home') }}
   </SwitchItem>
-  <SwitchItem
-    v-model="breadcrumbIcon"
-    :disabled="!breadcrumbVisible || disabled"
-  >
+  <SwitchItem v-model="breadcrumbShowIcon" :disabled="disableItem">
     {{ $t('preference.breadcrumb-icon') }}
   </SwitchItem>
   <ToggleItem
-    v-model="breadcrumbStyle"
+    v-model="breadcrumbStyleType"
     :items="typeItems"
-    :disabled="!breadcrumbVisible || disabled"
+    :disabled="disableItem"
   >
     {{ $t('preference.breadcrumb-style') }}
   </ToggleItem>
diff --git a/packages/business/common-ui/src/preferences/blocks/layout/footer.vue b/packages/business/common-ui/src/preferences/blocks/layout/footer.vue
index 69625f19..dd0e6de8 100644
--- a/packages/business/common-ui/src/preferences/blocks/layout/footer.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/footer.vue
@@ -7,15 +7,15 @@ defineOptions({
   name: 'PreferenceBreadcrumbConfig',
 });
 
-const footerVisible = defineModel<boolean>('footerVisible');
+const footerEnable = defineModel<boolean>('footerEnable');
 const footerFixed = defineModel<boolean>('footerFixed');
 </script>
 
 <template>
-  <SwitchItem v-model="footerVisible">
+  <SwitchItem v-model="footerEnable">
     {{ $t('preference.footer-visible') }}
   </SwitchItem>
-  <SwitchItem v-model="footerFixed" :disabled="!footerVisible">
+  <SwitchItem v-model="footerFixed" :disabled="!footerEnable">
     {{ $t('preference.footer-fixed') }}
   </SwitchItem>
 </template>
diff --git a/packages/business/common-ui/src/preferences/blocks/layout/header.vue b/packages/business/common-ui/src/preferences/blocks/layout/header.vue
index 92d08468..17819928 100644
--- a/packages/business/common-ui/src/preferences/blocks/layout/header.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/header.vue
@@ -12,7 +12,7 @@ defineOptions({
 
 defineProps<{ disabled: boolean }>();
 
-const headerVisible = defineModel<boolean>('headerVisible');
+const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 
 const localeItems: SelectListItem[] = [
@@ -36,13 +36,13 @@ const localeItems: SelectListItem[] = [
 </script>
 
 <template>
-  <SwitchItem v-model="headerVisible" :disabled="disabled">
+  <SwitchItem v-model="headerEnable" :disabled="disabled">
     {{ $t('preference.header-visible') }}
   </SwitchItem>
   <SelectItem
     v-model="headerMode"
     :items="localeItems"
-    :disabled="!headerVisible"
+    :disabled="!headerEnable"
   >
     {{ $t('preference.mode') }}
   </SelectItem>
diff --git a/packages/business/common-ui/src/preferences/blocks/layout/navigation.vue b/packages/business/common-ui/src/preferences/blocks/layout/navigation.vue
index 8814ef1c..e0e0eeac 100644
--- a/packages/business/common-ui/src/preferences/blocks/layout/navigation.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/navigation.vue
@@ -12,7 +12,7 @@ defineOptions({
 
 defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
 
-const navigationStyle = defineModel<string>('navigationStyle');
+const navigationStyleType = defineModel<string>('navigationStyleType');
 const navigationSplit = defineModel<boolean>('navigationSplit');
 const navigationAccordion = defineModel<boolean>('navigationAccordion');
 
@@ -24,7 +24,7 @@ const stylesItems: SelectListItem[] = [
 
 <template>
   <ToggleItem
-    v-model="navigationStyle"
+    v-model="navigationStyleType"
     :items="stylesItems"
     :disabled="disabled"
   >
diff --git a/packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue b/packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue
index c62387db..38d2e725 100644
--- a/packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue
@@ -9,21 +9,23 @@ defineOptions({
 
 defineProps<{ disabled: boolean }>();
 
-const sideVisible = defineModel<boolean>('sideVisible');
-const sideCollapseShowTitle = defineModel<boolean>('sideCollapseShowTitle');
-const sideCollapse = defineModel<boolean>('sideCollapse');
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarCollapseShowTitle = defineModel<boolean>(
+  'sidebarCollapseShowTitle',
+);
+const sidebarCollapse = defineModel<boolean>('sidebarCollapse');
 </script>
 
 <template>
-  <SwitchItem v-model="sideVisible" :disabled="disabled">
+  <SwitchItem v-model="sidebarEnable" :disabled="disabled">
     {{ $t('preference.side-visible') }}
   </SwitchItem>
-  <SwitchItem v-model="sideCollapse" :disabled="!sideVisible || disabled">
+  <SwitchItem v-model="sidebarCollapse" :disabled="!sidebarEnable || disabled">
     {{ $t('preference.collapse') }}
   </SwitchItem>
   <SwitchItem
-    v-model="sideCollapseShowTitle"
-    :disabled="!sideVisible || disabled"
+    v-model="sidebarCollapseShowTitle"
+    :disabled="!sidebarEnable || disabled"
   >
     {{ $t('preference.collapse-show-title') }}
   </SwitchItem>
diff --git a/packages/business/common-ui/src/preferences/blocks/layout/tabs.vue b/packages/business/common-ui/src/preferences/blocks/layout/tabbar.vue
similarity index 66%
rename from packages/business/common-ui/src/preferences/blocks/layout/tabs.vue
rename to packages/business/common-ui/src/preferences/blocks/layout/tabbar.vue
index 9ea856dd..04bb8acd 100644
--- a/packages/business/common-ui/src/preferences/blocks/layout/tabs.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/tabbar.vue
@@ -9,15 +9,15 @@ defineOptions({
 
 defineProps<{ disabled?: boolean }>();
 
-const tabsVisible = defineModel<boolean>('tabsVisible');
-const tabsIcon = defineModel<boolean>('tabsIcon');
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 </script>
 
 <template>
-  <SwitchItem v-model="tabsVisible" :disabled="disabled">
+  <SwitchItem v-model="tabbarEnable" :disabled="disabled">
     {{ $t('preference.tabs-visible') }}
   </SwitchItem>
-  <SwitchItem v-model="tabsIcon" :disabled="!tabsVisible">
+  <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
     {{ $t('preference.tabs-icon') }}
   </SwitchItem>
   <!-- <SwitchItem v-model="sideCollapseShowTitle" :disabled="!tabsVisible">
diff --git a/packages/business/common-ui/src/preferences/blocks/theme/color-mode.vue b/packages/business/common-ui/src/preferences/blocks/theme/color-mode.vue
index 3a930997..db7cc5a0 100644
--- a/packages/business/common-ui/src/preferences/blocks/theme/color-mode.vue
+++ b/packages/business/common-ui/src/preferences/blocks/theme/color-mode.vue
@@ -7,20 +7,20 @@ defineOptions({
   name: 'PreferenceColorMode',
 });
 
-const colorWeakMode = defineModel<boolean>('colorWeakMode', {
+const appColorWeakMode = defineModel<boolean>('appColorWeakMode', {
   default: false,
 });
 
-const colorGrayMode = defineModel<boolean>('colorGrayMode', {
+const appColorGrayMode = defineModel<boolean>('appColorGrayMode', {
   default: false,
 });
 </script>
 
 <template>
-  <SwitchItem v-model="colorWeakMode">
+  <SwitchItem v-model="appColorWeakMode">
     {{ $t('preference.weak-mode') }}
   </SwitchItem>
-  <SwitchItem v-model="colorGrayMode">
+  <SwitchItem v-model="appColorGrayMode">
     {{ $t('preference.gray-mode') }}
   </SwitchItem>
 </template>
diff --git a/packages/business/common-ui/src/preferences/blocks/theme/theme.vue b/packages/business/common-ui/src/preferences/blocks/theme/theme.vue
index ae55d28d..ad3d0ee2 100644
--- a/packages/business/common-ui/src/preferences/blocks/theme/theme.vue
+++ b/packages/business/common-ui/src/preferences/blocks/theme/theme.vue
@@ -13,7 +13,7 @@ defineOptions({
 });
 
 const modelValue = defineModel<string>({ default: 'auto' });
-const semiDarkMenu = defineModel<boolean>('semiDarkMenu', {
+const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu', {
   default: true,
 });
 
@@ -71,7 +71,7 @@ function nameView(name: string) {
     </template>
 
     <SwitchItem
-      v-model="semiDarkMenu"
+      v-model="appSemiDarkMenu"
       :disabled="modelValue !== 'light'"
       class="mt-6"
     >
diff --git a/packages/business/common-ui/src/preferences/preferences-widget.vue b/packages/business/common-ui/src/preferences/preferences-widget.vue
index 277d725a..1bc0dda0 100644
--- a/packages/business/common-ui/src/preferences/preferences-widget.vue
+++ b/packages/business/common-ui/src/preferences/preferences-widget.vue
@@ -1,57 +1,227 @@
 <script lang="ts" setup>
-import type { SupportedLanguagesType } from '@vben/types';
-
 import { loadLocaleMessages } from '@vben/locales';
 import {
   COLOR_PRIMARY_RESETS,
-  flatPreferences,
+  preferences,
   updatePreferences,
 } from '@vben-core/preferences';
 
 import Preferences from './preferences.vue';
-
-function updateLocale(value: string) {
-  const locale = value as SupportedLanguagesType;
-  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"
+    :app-locale="preferences.app.locale"
+    :app-layout="preferences.app.layout"
+    :app-dynamic-title="preferences.app.dynamicTitle"
+    :app-theme-mode="preferences.app.themeMode"
+    :app-color-gray-mode="preferences.app.colorGrayMode"
+    :app-color-weak-mode="preferences.app.colorWeakMode"
+    :app-semi-dark-menu="preferences.app.semiDarkMenu"
+    :app-content-compact="preferences.app.contentCompact"
+    :transition-enable="preferences.transition.enable"
+    :transition-name="preferences.transition.name"
+    :transition-progress="preferences.transition.progress"
+    :theme-color-primary="preferences.theme.colorPrimary"
+    :sidebar-enable="preferences.sidebar.enable"
+    :sidebar-collapse="preferences.sidebar.collapse"
+    :sidebar-collapse-show-title="preferences.sidebar.collapseShowTitle"
+    :header-enable="preferences.header.enable"
+    :header-mode="preferences.header.mode"
+    :breadcrumb-enable="preferences.breadcrumb.enable"
+    :breadcrumb-style="preferences.breadcrumb.styleType"
+    :breadcrumb-icon="preferences.breadcrumb.showIcon"
+    :breadcrumb-home="preferences.breadcrumb.showHome"
+    :breadcrumb-hide-only-one="preferences.breadcrumb.hideOnlyOne"
+    :tabbar-enable="preferences.tabbar.enable"
+    :tabbar-show-icon="preferences.tabbar.showIcon"
+    :navigation-accordion="preferences.navigation.accordion"
+    :navigation-style-type="preferences.navigation.styleType"
+    :navigation-split="preferences.navigation.split"
+    :footer-enable="preferences.footer.enable"
+    :footer-fixed="preferences.footer.fixed"
+    :shortcut-keys-enable="preferences.shortcutKeys.enable"
+    @update:app-locale="
+      (val) => {
+        updatePreferences({
+          app: { locale: val },
+        });
+        loadLocaleMessages(val);
+      }
+    "
+    @update:app-layout="
+      (val) =>
+        updatePreferences({
+          app: { layout: val },
+        })
+    "
+    @update:app-dynamic-title="
+      (val) =>
+        updatePreferences({
+          app: { dynamicTitle: val },
+        })
+    "
+    @update:app-theme-mode="
+      (val) =>
+        updatePreferences({
+          app: { themeMode: val },
+        })
+    "
+    @update:app-color-gray-mode="
+      (val) =>
+        updatePreferences({
+          app: { colorGrayMode: val },
+        })
+    "
+    @update:app-color-weak-mode="
+      (val) =>
+        updatePreferences({
+          app: { colorWeakMode: val },
+        })
+    "
+    @update:app-semi-dark-menu="
+      (val) =>
+        updatePreferences({
+          app: { semiDarkMenu: val },
+        })
+    "
+    @update:app-content-compact="
+      (val) =>
+        updatePreferences({
+          app: { contentCompact: val },
+        })
+    "
+    @update:transition-enable="
+      (val) =>
+        updatePreferences({
+          transition: { enable: val },
+        })
+    "
+    @update:transition-name="
+      (val) =>
+        updatePreferences({
+          transition: { name: val },
+        })
+    "
+    @update:transition-progress="
+      (val) =>
+        updatePreferences({
+          transition: { progress: val },
+        })
+    "
+    @update:theme-color-primary="
+      (val) =>
+        updatePreferences({
+          theme: { colorPrimary: val },
+        })
+    "
+    @update:sidebar-enable="
+      (val) =>
+        updatePreferences({
+          sidebar: { enable: val },
+        })
+    "
+    @update:sidebar-collapse="
+      (val) =>
+        updatePreferences({
+          sidebar: { collapse: val },
+        })
+    "
+    @update:sidebar-collapse-show-title="
+      (val) =>
+        updatePreferences({
+          sidebar: { collapseShowTitle: val },
+        })
+    "
+    @update:header-enable="
+      (val) =>
+        updatePreferences({
+          header: { enable: val },
+        })
+    "
+    @update:header-mode="
+      (val) =>
+        updatePreferences({
+          header: { mode: val },
+        })
+    "
+    @update:breadcrumb-enable="
+      (val) =>
+        updatePreferences({
+          breadcrumb: { enable: val },
+        })
+    "
+    @update:breadcrumb-style-type="
+      (val) =>
+        updatePreferences({
+          breadcrumb: { styleType: val },
+        })
+    "
+    @update:breadcrumb-show-icon="
+      (val) =>
+        updatePreferences({
+          breadcrumb: { showIcon: val },
+        })
+    "
+    @update:breadcrumb-show-home="
+      (val) =>
+        updatePreferences({
+          breadcrumb: { showHome: val },
+        })
+    "
+    @update:breadcrumb-hide-only-one="
+      (val) =>
+        updatePreferences({
+          breadcrumb: { hideOnlyOne: val },
+        })
+    "
+    @update:tabbar-enable="
+      (val) =>
+        updatePreferences({
+          tabbar: { enable: val },
+        })
+    "
+    @update:tabbar-show-icon="
+      (val) =>
+        updatePreferences({
+          tabbar: { showIcon: val },
+        })
+    "
+    @update:navigation-accordion="
+      (val) =>
+        updatePreferences({
+          navigation: { accordion: val },
+        })
+    "
+    @update:navigation-style-type="
+      (val) =>
+        updatePreferences({
+          navigation: { styleType: val },
+        })
+    "
+    @update:navigation-split="
+      (val) =>
+        updatePreferences({
+          navigation: { split: val },
+        })
+    "
+    @update:footer-enable="
+      (val) =>
+        updatePreferences({
+          footer: { enable: val },
+        })
+    "
+    @update:footer-fixed="
+      (val) =>
+        updatePreferences({
+          footer: { fixed: val },
+        })
+    "
+    @update:shortcut-keys-enable="
+      (val) =>
+        updatePreferences({
+          shortcutKeys: { enable: val },
+        })
+    "
   />
 </template>
diff --git a/packages/business/common-ui/src/preferences/preferences.vue b/packages/business/common-ui/src/preferences/preferences.vue
index fa53126b..33009635 100644
--- a/packages/business/common-ui/src/preferences/preferences.vue
+++ b/packages/business/common-ui/src/preferences/preferences.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-import type { LayoutHeaderModeType, LayoutType } from '@vben/types';
+import type {
+  ContentCompactType,
+  LayoutHeaderModeType,
+  LayoutType,
+  SupportedLanguagesType,
+  ThemeModeType,
+} from '@vben/types';
+import type {
+  BreadcrumbStyleType,
+  NavigationStyleType,
+} from '@vben-core/preferences';
 import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed } from 'vue';
@@ -33,7 +43,7 @@ import {
   Layout,
   Navigation,
   Sidebar,
-  Tabs,
+  Tabbar,
   Theme,
   ThemeColor,
 } from './blocks';
@@ -44,38 +54,54 @@ withDefaults(defineProps<{ colorPrimaryPresets: string[] }>(), {
   colorPrimaryPresets: () => [],
 });
 
-const theme = defineModel<string>('theme');
-const locale = defineModel<string>('locale');
-const dynamicTitle = defineModel<boolean>('dynamicTitle');
-const semiDarkMenu = defineModel<boolean>('semiDarkMenu');
-const breadcrumbVisible = defineModel<boolean>('breadcrumbVisible');
-const breadcrumbIcon = defineModel<boolean>('breadcrumbIcon');
-const breadcrumbHome = defineModel<boolean>('breadcrumbHome');
-const breadcrumbStyle = defineModel<string>('breadcrumbStyle');
+const appThemeMode = defineModel<ThemeModeType>('appThemeMode');
+const appLocale = defineModel<SupportedLanguagesType>('appLocale');
+const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
+const appLayout = defineModel<LayoutType>('appLayout');
+const appColorGrayMode = defineModel<boolean>('appColorGrayMode');
+const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
+const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu');
+const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
+
+const transitionProgress = defineModel<boolean>('transitionProgress');
+const transitionName = defineModel<string>('transitionName');
+const transitionEnable = defineModel<boolean>('transitionEnable');
+
+const themeColorPrimary = defineModel<string>('themeColorPrimary');
+
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarCollapse = defineModel<boolean>('sidebarCollapse');
+const sidebarCollapseShowTitle = defineModel<boolean>(
+  'sidebarCollapseShowTitle',
+);
+
+const headerEnable = defineModel<boolean>('headerEnable');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+
+const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
+const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
+const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
+const breadcrumbStyleType = defineModel<BreadcrumbStyleType>(
+  'breadcrumbStyleType',
+);
 const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
-const sideCollapseShowTitle = defineModel<boolean>('sideCollapseShowTitle');
-const sideCollapse = defineModel<boolean>('sideCollapse');
-const colorWeakMode = defineModel<boolean>('colorWeakMode');
-const colorGrayMode = defineModel<boolean>('colorGrayMode');
-const colorPrimary = defineModel<string>('colorPrimary');
-const navigationStyle = defineModel<string>('navigationStyle');
+
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
+
+const navigationStyleType = defineModel<NavigationStyleType>(
+  'navigationStyleType',
+);
 const navigationSplit = defineModel<boolean>('navigationSplit');
 const navigationAccordion = defineModel<boolean>('navigationAccordion');
-const pageProgress = defineModel<boolean>('pageProgress');
-const pageTransition = defineModel<string>('pageTransition');
-const pageTransitionEnable = defineModel<boolean>('pageTransitionEnable');
-const layout = defineModel<LayoutType>('layout');
-const contentCompact = defineModel<string>('contentCompact');
-const sideVisible = defineModel<boolean>('sideVisible');
-const shortcutKeys = defineModel<boolean>('shortcutKeys');
-const tabsVisible = defineModel<boolean>('tabsVisible');
-const tabsIcon = defineModel<boolean>('tabsIcon');
+
 // const logoVisible = defineModel<boolean>('logoVisible');
-const headerVisible = defineModel<boolean>('headerVisible');
-const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
-const footerVisible = defineModel<boolean>('footerVisible');
+
+const footerEnable = defineModel<boolean>('footerEnable');
 const footerFixed = defineModel<boolean>('footerFixed');
 
+const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
+
 const {
   diffPreference,
   isFullContent,
@@ -162,41 +188,44 @@ function handleReset() {
         <VbenSegmented :tabs="tabs" default-value="appearance">
           <template #appearance>
             <Block :title="$t('preference.theme')">
-              <Theme v-model="theme" v-model:semi-dark-menu="semiDarkMenu" />
+              <Theme
+                v-model="appThemeMode"
+                v-model:app-semi-dark-menu="appSemiDarkMenu"
+              />
             </Block>
             <Block :title="$t('preference.theme-color')">
               <ThemeColor
-                v-model="colorPrimary"
+                v-model="themeColorPrimary"
                 :color-primary-presets="colorPrimaryPresets"
               />
             </Block>
             <Block :title="$t('preference.other')">
               <ColorMode
-                v-model:color-gray-mode="colorGrayMode"
-                v-model:color-weak-mode="colorWeakMode"
+                v-model:app-color-gray-mode="appColorGrayMode"
+                v-model:app-color-weak-mode="appColorWeakMode"
               />
             </Block>
           </template>
           <template #layout>
             <Block :title="$t('preference.layout')">
-              <Layout v-model="layout" />
+              <Layout v-model="appLayout" />
             </Block>
             <Block :title="$t('preference.content')">
-              <Content v-model="contentCompact" />
+              <Content v-model="appContentCompact" />
             </Block>
 
             <Block :title="$t('preference.sidebar')">
               <Sidebar
-                v-model:side-visible="sideVisible"
-                v-model:side-collapse="sideCollapse"
-                v-model:side-collapse-show-title="sideCollapseShowTitle"
+                v-model:sidebar-enable="sidebarEnable"
+                v-model:sidebar-collapse="sidebarCollapse"
+                v-model:side-collapse-show-title="sidebarCollapseShowTitle"
                 :disabled="!isSideMode"
               />
             </Block>
 
             <Block :title="$t('preference.header')">
               <Header
-                v-model:header-visible="headerVisible"
+                v-model:headerEnable="headerEnable"
                 v-model:headerMode="headerMode"
                 :disabled="isFullContent"
               />
@@ -204,7 +233,7 @@ function handleReset() {
 
             <Block :title="$t('preference.navigation-menu')">
               <Navigation
-                v-model:navigation-style="navigationStyle"
+                v-model:navigation-style-type="navigationStyleType"
                 v-model:navigation-split="navigationSplit"
                 v-model:navigation-accordion="navigationAccordion"
                 :disabled="isFullContent"
@@ -214,10 +243,10 @@ function handleReset() {
 
             <Block :title="$t('preference.breadcrumb')">
               <Breadcrumb
-                v-model:breadcrumb-visible="breadcrumbVisible"
-                v-model:breadcrumb-icon="breadcrumbIcon"
-                v-model:breadcrumb-style="breadcrumbStyle"
-                v-model:breadcrumb-home="breadcrumbHome"
+                v-model:breadcrumb-enable="breadcrumbEnable"
+                v-model:breadcrumb-show-icon="breadcrumbShowIcon"
+                v-model:breadcrumb-style-type="breadcrumbStyleType"
+                v-model:breadcrumb-show-home="breadcrumbShowHome"
                 v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
                 :disabled="
                   !showBreadcrumbConfig || !(isSideNav || isSideMixedNav)
@@ -226,14 +255,14 @@ function handleReset() {
             </Block>
 
             <Block :title="$t('preference.tabs')">
-              <Tabs
-                v-model:tabs-visible="tabsVisible"
-                v-model:tabs-icon="tabsIcon"
+              <Tabbar
+                v-model:tabbar-enable="tabbarEnable"
+                v-model:tabbar-show-icon="tabbarShowIcon"
               />
             </Block>
             <Block :title="$t('preference.footer')">
               <Footer
-                v-model:footer-visible="footerVisible"
+                v-model:footer-enable="footerEnable"
                 v-model:footer-fixed="footerFixed"
               />
             </Block>
@@ -241,21 +270,21 @@ function handleReset() {
           <template #general>
             <Block :title="$t('preference.general')">
               <General
-                v-model:locale="locale"
-                v-model:dynamic-title="dynamicTitle"
-                v-model:shortcut-keys="shortcutKeys"
+                v-model:app-locale="appLocale"
+                v-model:app-dynamic-title="appDynamicTitle"
+                v-model:shortcut-keys-enable="shortcutKeysEnable"
               />
             </Block>
 
             <Block :title="$t('preference.animation')">
               <Animation
-                v-model:page-progress="pageProgress"
-                v-model:page-transition="pageTransition"
-                v-model:page-transition-enable="pageTransitionEnable"
+                v-model:transition-progress="transitionProgress"
+                v-model:transition-name="transitionName"
+                v-model:transition-enable="transitionEnable"
               />
             </Block>
           </template>
-          <template #shortcutKey>
+          <!-- <template #shortcutKey>
             <Block :title="$t('preference.general')">
               <General
                 v-model:locale="locale"
@@ -268,10 +297,10 @@ function handleReset() {
               <Animation
                 v-model:page-progress="pageProgress"
                 v-model:page-transition="pageTransition"
-                v-model:page-transition-enable="pageTransitionEnable"
+                v-model:transition-enable="transitionEnable"
               />
             </Block>
-          </template>
+          </template> -->
         </VbenSegmented>
       </div>
 
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 a280912a..2322eea2 100644
--- a/packages/business/common-ui/src/theme-toggle/theme-toggle.vue
+++ b/packages/business/common-ui/src/theme-toggle/theme-toggle.vue
@@ -6,7 +6,8 @@ import {
   MdiMoonAndStars,
 } from '@vben-core/iconify';
 import {
-  flatPreferences,
+  type ThemeModeType,
+  preferences,
   updatePreferences,
   usePreferences,
 } from '@vben-core/preferences';
@@ -63,10 +64,14 @@ const PRESETS = [
         />
       </template>
       <ToggleGroup
-        v-model="flatPreferences.appThemeMode"
+        :model-value="preferences.app.themeMode"
         type="single"
         variant="outline"
         class="gap-2"
+        @update:model-value="
+          (val) =>
+            updatePreferences({ app: { themeMode: val as ThemeModeType } })
+        "
       >
         <ToggleGroupItem
           v-for="item in PRESETS"
diff --git a/packages/business/layouts/src/basic/layout.vue b/packages/business/layouts/src/basic/layout.vue
index a6d40c14..2dcc1a59 100644
--- a/packages/business/layouts/src/basic/layout.vue
+++ b/packages/business/layouts/src/basic/layout.vue
@@ -5,7 +5,6 @@ import { PreferencesWidget } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 import { VbenAdminLayout } from '@vben-core/layout-ui';
 import {
-  flatPreferences,
   preferences,
   updatePreferences,
   usePreferences,
@@ -59,12 +58,13 @@ const logoCollapse = computed(() => {
     return false;
   }
 
-  const { appIsMobile, sidebarCollapse } = flatPreferences;
+  const { isMobile } = preferences.app;
+  const { collapse } = preferences.sidebar;
 
-  if (!sidebarCollapse && appIsMobile) {
+  if (!collapse && isMobile) {
     return false;
   }
-  return sidebarCollapse || isSideMixedNav.value;
+  return collapse || isSideMixedNav.value;
 });
 
 const showHeaderNav = computed(() => {
@@ -103,9 +103,9 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
 <template>
   <VbenAdminLayout
     v-model:side-extra-visible="extraVisible"
-    v-model:side-collapse="flatPreferences.sidebarCollapse"
-    v-model:side-expand-on-hover="flatPreferences.sidebarExpandOnHover"
-    v-model:side-extra-collapse="flatPreferences.sidebarExtraCollapse"
+    :side-extra-collapse="preferences.sidebar.extraCollapse"
+    :side-expand-on-hover="preferences.sidebar.expandOnHover"
+    :side-collapse="preferences.sidebar.collapse"
     :side-collapse-show-title="preferences.sidebar.collapseShowTitle"
     :content-compact="preferences.app.contentCompact"
     :is-mobile="preferences.app.isMobile"
@@ -121,6 +121,30 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     :header-hidden="preferences.header.hidden"
     :side-width="preferences.sidebar.width"
     :tabs-visible="preferences.tabbar.enable"
+    @update:side-extra-collapse="
+      (value: boolean) =>
+        updatePreferences({
+          sidebar: {
+            extraCollapse: value,
+          },
+        })
+    "
+    @update:side-expand-on-hover="
+      (value: boolean) =>
+        updatePreferences({
+          sidebar: {
+            expandOnHover: value,
+          },
+        })
+    "
+    @update:side-collapse="
+      (value: boolean) =>
+        updatePreferences({
+          sidebar: {
+            collapse: value,
+          },
+        })
+    "
     @side-mouse-leave="handleSideMouseLeave"
     @update:side-visible="
       (value: boolean) =>