refactor: refacotr preference

packages/business/common-ui/package.json

@@ -46,10 +46,10 @@
   "dependencies": {
     "@vben-core/design": "workspace:*",
     "@vben-core/iconify": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/preference": "workspace:*",
     "@vueuse/core": "^10.10.0",
     "@vueuse/integrations": "^10.10.0",
     "qrcode": "^1.5.3",

packages/business/common-ui/src/authentication/color-toggle.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { IcRoundColorLens } from '@vben-core/iconify';
-import { VbenIconButton } from '@vben-core/shadcn-ui';
-
 import {
-  preference,
-  staticPreference,
-  updatePreference,
-} from '@vben/preference';
+  COLOR_PRIMARY_RESETS,
+  preferences,
+  updatePreferences,
+} from '@vben-core/preferences';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
 
 defineOptions({
   name: 'AuthenticationColorToggle',
 });
 
 function handleUpdate(value: string) {
-  updatePreference({
-    colorPrimary: value,
+  updatePreferences({
+    theme: {
+      colorPrimary: value,
+    },
   });
 }
 </script>
@@ -24,10 +25,7 @@ function handleUpdate(value: string) {
     <div
       class="ease-ou flex w-0 overflow-hidden transition-all duration-500 group-hover:w-48"
     >
-      <template
-        v-for="color in staticPreference.colorPrimaryPresets"
-        :key="color"
-      >
+      <template v-for="color in COLOR_PRIMARY_RESETS" :key="color">
         <VbenIconButton
           class="flex-center flex-shrink-0"
           @click="handleUpdate(color)"
@@ -35,7 +33,9 @@ function handleUpdate(value: string) {
           <div
             class="relative h-3.5 w-3.5 rounded-[2px] before:absolute before:left-0.5 before:top-0.5 before:h-2.5 before:w-2.5 before:rounded-[2px] before:border before:border-gray-900 before:opacity-0 before:transition-all before:duration-150 before:content-[''] hover:scale-110"
             :class="[
-              preference.colorPrimary === color ? `before:opacity-100` : '',
+              preferences.theme.colorPrimary === color
+                ? `before:opacity-100`
+                : '',
             ]"
             :style="{ backgroundColor: color }"
           ></div>

packages/business/common-ui/src/authentication/layout-toggle.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import type { AuthPageLayout } from '@vben/types';
 import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
 
 import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
+import { preferences, usePreferences } from '@vben-core/preferences';
 import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
 
 import { $t } from '@vben/locales';
-import { preference, updatePreference, usePreference } from '@vben/preference';
 import { computed } from 'vue';
 
 defineOptions({
   name: 'AuthenticationLayoutToggle',
-  // inheritAttrs: false,
 });
 
 const menus = computed((): VbenDropdownMenuItem[] => [
@@ -32,20 +30,13 @@ const menus = computed((): VbenDropdownMenuItem[] => [
   },
 ]);
 
-function handleUpdate(value: string) {
-  updatePreference({
-    authPageLayout: value as AuthPageLayout,
-  });
-}
-
-const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
+const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
 </script>
 
 <template>
   <VbenDropdownRadioMenu
+    v-model="preferences.app.authPageLayout"
     :menus="menus"
-    :model-value="preference.authPageLayout"
-    @update:model-value="handleUpdate"
   >
     <VbenIconButton>
       <MdiDockRight v-if="authPanelRight" class="size-5" />

packages/business/common-ui/src/index.ts

@@ -4,7 +4,7 @@ export * from './global-provider';
 export * from './global-search';
 export * from './language-toggle';
 export * from './notification';
-export * from './preference';
+export * from './preferences';
 export * from './spinner';
 export * from './theme-toggle';
 export * from './user-dropdown';

packages/business/common-ui/src/language-toggle/language-toggle.vue

@@ -1,26 +1,28 @@
 <script setup lang="ts">
-import type { SupportLocale } from '@vben/types';
+import type { LocaleSupportType } from '@vben/types';
 
 import { IcBaselineLanguage } from '@vben-core/iconify';
+import {
+  SUPPORT_LANGUAGES,
+  preferences,
+  updatePreferences,
+} from '@vben-core/preferences';
 import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
 
 import { loadLocaleMessages } from '@vben/locales';
-import {
-  preference,
-  staticPreference,
-  updatePreference,
-} from '@vben/preference';
 
 defineOptions({
   name: 'LanguageToggle',
 });
 
-const menus = staticPreference.supportLanguages;
+const menus = SUPPORT_LANGUAGES;
 
 async function handleUpdate(value: string) {
-  const locale = value as SupportLocale;
-  updatePreference({
-    locale,
+  const locale = value as LocaleSupportType;
+  updatePreferences({
+    app: {
+      locale,
+    },
   });
   // 更改预览
   await loadLocaleMessages(locale);
@@ -31,7 +33,7 @@ async function handleUpdate(value: string) {
   <div>
     <VbenDropdownRadioMenu
       :menus="menus"
-      :model-value="preference.locale"
+      :model-value="preferences.app.locale"
       @update:model-value="handleUpdate"
     >
       <VbenIconButton>

packages/business/common-ui/src/preference/index.ts

@@ -1 +0,0 @@
-export { default as PreferenceWidget } from './preference-widget.vue';

packages/business/common-ui/src/preference/preference-widget.vue

@@ -1,102 +0,0 @@
-<script lang="ts" setup>
-import type { PreferenceKeys, SupportLocale } from '@vben/types';
-
-import { loadLocaleMessages } from '@vben/locales';
-import {
-  preference,
-  staticPreference,
-  updatePreference,
-} from '@vben/preference';
-
-import Preference from './preference.vue';
-
-function handleUpdate(key: PreferenceKeys, value: boolean | string) {
-  updatePreference({
-    [key]: value,
-  });
-}
-
-function updateLocale(value: string) {
-  const locale = value as SupportLocale;
-  updatePreference({
-    locale,
-  });
-  // 更改预览
-  loadLocaleMessages(locale);
-}
-</script>
-<template>
-  <Preference
-    :color-primary-presets="staticPreference.colorPrimaryPresets"
-    :breadcrumb-visible="preference.breadcrumbVisible"
-    :breadcrumb-style="preference.breadcrumbStyle"
-    :color-gray-mode="preference.colorGrayMode"
-    :breadcrumb-icon="preference.breadcrumbIcon"
-    :color-primary="preference.colorPrimary"
-    :color-weak-mode="preference.colorWeakMode"
-    :content-compact="preference.contentCompact"
-    :breadcrumb-home="preference.breadcrumbHome"
-    :side-collapse="preference.sideCollapse"
-    :layout="preference.layout"
-    :semi-dark-menu="preference.semiDarkMenu"
-    :side-visible="preference.sideVisible"
-    :footer-visible="preference.footerVisible"
-    :tabs-visible="preference.tabsVisible"
-    :header-visible="preference.headerVisible"
-    :footer-fixed="preference.footerFixed"
-    :header-mode="preference.headerMode"
-    :theme="preference.theme"
-    :dynamic-title="preference.dynamicTitle"
-    :breadcrumb-hide-only-one="preference.breadcrumbHideOnlyOne"
-    :page-transition="preference.pageTransition"
-    :page-progress="preference.pageProgress"
-    :tabs-icon="preference.tabsIcon"
-    :locale="preference.locale"
-    :navigation-accordion="preference.navigationAccordion"
-    :navigation-style="preference.navigationStyle"
-    :shortcut-keys="preference.shortcutKeys"
-    :navigation-split="preference.navigationSplit"
-    :side-collapse-show-title="preference.sideCollapseShowTitle"
-    :page-transition-enable="preference.pageTransitionEnable"
-    @update:shortcut-keys="(value) => handleUpdate('shortcutKeys', value)"
-    @update:navigation-style="(value) => handleUpdate('navigationStyle', value)"
-    @update:navigation-accordion="
-      (value) => handleUpdate('navigationAccordion', value)
-    "
-    @update:navigation-split="(value) => handleUpdate('navigationSplit', value)"
-    @update:dynamic-title="(value) => handleUpdate('dynamicTitle', value)"
-    @update:tabs-icon="(value) => handleUpdate('tabsIcon', value)"
-    @update:side-collapse="(value) => handleUpdate('sideCollapse', value)"
-    @update:locale="updateLocale"
-    @update:header-visible="(value) => handleUpdate('headerVisible', value)"
-    @update:side-visible="(value) => handleUpdate('sideVisible', value)"
-    @update:footer-visible="(value) => handleUpdate('footerVisible', value)"
-    @update:tabs-visible="(value) => handleUpdate('tabsVisible', value)"
-    @update:header-mode="(value) => handleUpdate('headerMode', value)"
-    @update:footer-fixed="(value) => handleUpdate('footerFixed', value)"
-    @update:breadcrumb-visible="
-      (value) => handleUpdate('breadcrumbVisible', value)
-    "
-    @update:breadcrumb-hide-only-one="
-      (value) => handleUpdate('breadcrumbHideOnlyOne', value)
-    "
-    @update:side-collapse-show-title="
-      (value) => handleUpdate('sideCollapseShowTitle', value)
-    "
-    @update:breadcrumb-home="(value) => handleUpdate('breadcrumbHome', value)"
-    @update:breadcrumb-icon="(value) => handleUpdate('breadcrumbIcon', value)"
-    @update:breadcrumb-style="(value) => handleUpdate('breadcrumbStyle', value)"
-    @update:page-transition-enable="
-      (value) => handleUpdate('pageTransitionEnable', value)
-    "
-    @update:color-gray-mode="(value) => handleUpdate('colorGrayMode', value)"
-    @update:page-transition="(value) => handleUpdate('pageTransition', value)"
-    @update:page-progress="(value) => handleUpdate('pageProgress', value)"
-    @update:color-primary="(value) => handleUpdate('colorPrimary', value)"
-    @update:color-weak-mode="(value) => handleUpdate('colorWeakMode', value)"
-    @update:content-compact="(value) => handleUpdate('contentCompact', value)"
-    @update:layout="(value) => handleUpdate('layout', value)"
-    @update:semi-dark-menu="(value) => handleUpdate('semiDarkMenu', value)"
-    @update:theme="(value) => handleUpdate('theme', value)"
-  />
-</template>

packages/business/common-ui/src/preference/use-open-preference.ts

@@ -1,16 +0,0 @@
-import { ref } from 'vue';
-
-const openPreference = ref(false);
-
-function useOpenPreference() {
-  function handleOpenPreference() {
-    openPreference.value = true;
-  }
-
-  return {
-    handleOpenPreference,
-    openPreference,
-  };
-}
-
-export { useOpenPreference };

packages/business/common-ui/src/preferences/blocks/general/general.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { SelectListItem } from '@vben/types';
 
+import { SUPPORT_LANGUAGES } from '@vben-core/preferences';
+
 import { $t } from '@vben/locales';
-import { staticPreference } from '@vben/preference';
 
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
@@ -15,12 +16,10 @@ const locale = defineModel<string>('locale');
 const dynamicTitle = defineModel<boolean>('dynamicTitle');
 const shortcutKeys = defineModel<boolean>('shortcutKeys');
 
-const localeItems: SelectListItem[] = staticPreference.supportLanguages.map(
-  (item) => ({
-    label: item.text,
-    value: item.key,
-  }),
-);
+const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
+  label: item.text,
+  value: item.key,
+}));
 </script>
 
 <template>

packages/business/common-ui/src/preferences/blocks/layout/header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LayoutHeaderMode, SelectListItem } from '@vben/types';
+import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
 
 import { $t } from '@vben/locales';
 
@@ -13,7 +13,7 @@ defineOptions({
 defineProps<{ disabled: boolean }>();
 
 const headerVisible = defineModel<boolean>('headerVisible');
-const headerMode = defineModel<LayoutHeaderMode>('headerMode');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 
 const localeItems: SelectListItem[] = [
   {

packages/business/common-ui/src/preferences/index.ts

@@ -0,0 +1 @@
+export { default as PreferencesWidget } from './preferences-widget.vue';

packages/business/common-ui/src/preferences/preferences-widget.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { LocaleSupportType } from '@vben/types';
+
+import {
+  COLOR_PRIMARY_RESETS,
+  flatPreferences,
+  updatePreferences,
+} from '@vben-core/preferences';
+
+import { loadLocaleMessages } from '@vben/locales';
+
+import Preferences from './preferences.vue';
+
+function updateLocale(value: string) {
+  const locale = value as LocaleSupportType;
+  updatePreferences({
+    app: { locale },
+  });
+  // 更改预览
+  loadLocaleMessages(locale);
+}
+</script>
+<template>
+  <Preferences
+    v-model:breadcrumb-visible="flatPreferences.breadcrumbEnable"
+    v-model:breadcrumb-style="flatPreferences.breadcrumbStyleType"
+    v-model:color-gray-mode="flatPreferences.appColorGrayMode"
+    v-model:breadcrumb-icon="flatPreferences.breadcrumbShowIcon"
+    v-model:color-primary="flatPreferences.themeColorPrimary"
+    v-model:color-weak-mode="flatPreferences.appColorWeakMode"
+    v-model:content-compact="flatPreferences.appContentCompact"
+    v-model:breadcrumb-home="flatPreferences.breadcrumbShowHome"
+    v-model:side-collapse="flatPreferences.sidebarCollapse"
+    v-model:layout="flatPreferences.appLayout"
+    v-model:semi-dark-menu="flatPreferences.appSemiDarkMenu"
+    v-model:side-visible="flatPreferences.sidebarEnable"
+    v-model:footer-visible="flatPreferences.footerEnable"
+    v-model:tabs-visible="flatPreferences.tabbarEnable"
+    v-model:header-visible="flatPreferences.headerEnable"
+    v-model:header-mode="flatPreferences.headerMode"
+    v-model:footer-fixed="flatPreferences.footerFixed"
+    v-model:theme="flatPreferences.appThemeMode"
+    v-model:dynamic-title="flatPreferences.appDynamicTitle"
+    v-model:breadcrumb-hide-only-one="flatPreferences.breadcrumbHideOnlyOne"
+    v-model:page-transition="flatPreferences.transitionName"
+    v-model:page-progress="flatPreferences.transitionProgress"
+    v-model:tabs-icon="flatPreferences.tabbarShowIcon"
+    v-model:navigation-accordion="flatPreferences.navigationAccordion"
+    v-model:navigation-style="flatPreferences.navigationStyleType"
+    v-model:shortcut-keys="flatPreferences.shortcutKeysEnable"
+    v-model:navigation-split="flatPreferences.navigationSplit"
+    v-model:page-transition-enable="flatPreferences.transitionEnable"
+    v-model:side-collapse-show-title="flatPreferences.sidebarCollapseShowTitle"
+    :color-primary-presets="COLOR_PRIMARY_RESETS"
+    :locale="flatPreferences.appLocale"
+    @update:locale="updateLocale"
+  />
+</template>

packages/business/common-ui/src/preferences/preferences.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import type { LayoutHeaderMode, LayoutType } from '@vben/types';
+import type { LayoutHeaderModeType, LayoutType } from '@vben/types';
 import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/iconify';
+import {
+  preferences,
+  resetPreferences,
+  usePreferences,
+} from '@vben-core/preferences';
 import {
   VbenButton,
   VbenIconButton,
@@ -12,7 +17,6 @@ import {
 } from '@vben-core/shadcn-ui';
 
 import { $t } from '@vben/locales';
-import { preference, resetPreference, usePreference } from '@vben/preference';
 import { useClipboard } from '@vueuse/core';
 import { computed } from 'vue';
 
@@ -33,7 +37,7 @@ import {
   ThemeColor,
 } from './blocks';
 import Trigger from './trigger.vue';
-import { useOpenPreference } from './use-open-preference';
+import { useOpenPreferences } from './use-open-preferences';
 
 withDefaults(defineProps<{ colorPrimaryPresets: string[] }>(), {
   colorPrimaryPresets: () => [],
@@ -67,7 +71,7 @@ const tabsVisible = defineModel<boolean>('tabsVisible');
 const tabsIcon = defineModel<boolean>('tabsIcon');
 // const logoVisible = defineModel<boolean>('logoVisible');
 const headerVisible = defineModel<boolean>('headerVisible');
-const headerMode = defineModel<LayoutHeaderMode>('headerMode');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 const footerVisible = defineModel<boolean>('footerVisible');
 const footerFixed = defineModel<boolean>('footerFixed');
 
@@ -79,7 +83,7 @@ const {
   isSideMixedNav,
   isSideMode,
   isSideNav,
-} = usePreference();
+} = usePreferences();
 const { copy } = useClipboard();
 
 const tabs = computed((): SegmentedItem[] => {
@@ -108,11 +112,11 @@ const showBreadcrumbConfig = computed(() => {
     !isFullContent.value &&
     !isMixedNav.value &&
     !isHeaderNav.value &&
-    preference.headerVisible
+    preferences.header.enable
   );
 });
 
-const { openPreference } = useOpenPreference();
+const { openPreferences } = useOpenPreferences();
 
 async function handleCopy() {
   await copy(JSON.stringify(diffPreference.value, null, 2));
@@ -124,7 +128,7 @@ function handleReset() {
   if (!diffPreference.value) {
     return;
   }
-  resetPreference();
+  resetPreferences();
   toast($t('preference.reset-success'));
 }
 </script>
@@ -132,7 +136,7 @@ function handleReset() {
 <template>
   <div class="z-100 fixed right-0 top-1/3">
     <VbenSheet
-      v-model:open="openPreference"
+      v-model:open="openPreferences"
       :description="$t('preference.preferences-subtitle')"
       :title="$t('preference.preferences')"
     >

packages/business/common-ui/src/preferences/use-open-preferences.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+
+const openPreferences = ref(false);
+
+function useOpenPreferences() {
+  function handleOpenPreference() {
+    openPreferences.value = true;
+  }
+
+  return {
+    handleOpenPreference,
+    openPreferences,
+  };
+}
+
+export { useOpenPreferences };

packages/business/common-ui/src/theme-toggle/theme-toggle.vue

@@ -4,6 +4,11 @@ import {
   IcRoundWbSunny,
   MdiMoonAndStars,
 } from '@vben-core/iconify';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben-core/preferences';
 import {
   ToggleGroup,
   ToggleGroupItem,
@@ -11,7 +16,6 @@ import {
 } from '@vben-core/shadcn-ui';
 
 import { $t } from '@vben/locales';
-import { preference, updatePreference, usePreference } from '@vben/preference';
 
 import ThemeButton from './theme-button.vue';
 
@@ -24,10 +28,12 @@ withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
 });
 
 function handleChange(isDark: boolean) {
-  updatePreference({ theme: isDark ? 'dark' : 'light' });
+  updatePreferences({
+    app: { themeMode: isDark ? 'dark' : 'light' },
+  });
 }
 
-const { isDark } = usePreference();
+const { isDark } = usePreferences();
 
 const PRESETS = [
   {
@@ -58,7 +64,7 @@ const PRESETS = [
         />
       </template>
       <ToggleGroup
-        :model-value="preference.theme"
+        :model-value="preferences.app.themeMode"
         type="single"
         variant="outline"
         class="gap-2"

packages/business/common-ui/src/user-dropdown/user-dropdown.vue

@@ -2,6 +2,7 @@
 import type { AnyFunction } from '@vben/types';
 
 import { IcRoundLogout, IcRoundSettingsSuggest } from '@vben-core/iconify';
+import { preferences } from '@vben-core/preferences';
 import {
   Badge,
   DropdownMenu,
@@ -20,11 +21,10 @@ import { isWindowsOs } from '@vben-core/toolkit';
 import type { Component } from 'vue';
 
 import { $t } from '@vben/locales';
-import { preference } from '@vben/preference';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { computed, ref } from 'vue';
 
-import { useOpenPreference } from '../preference/use-open-preference';
+import { useOpenPreferences } from '../preferences/use-open-preferences';
 
 interface Props {
   /**
@@ -72,12 +72,12 @@ const emit = defineEmits<{ logout: [] }>();
 const openPopover = ref(false);
 const openDialog = ref(false);
 
-const { handleOpenPreference } = useOpenPreference();
+const { handleOpenPreference } = useOpenPreferences();
 
 const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
 
 const shortcutKeys = computed(() => {
-  return props.enableShortcutKey && preference.shortcutKeys;
+  return props.enableShortcutKey && preferences.shortcutKeys.enable;
 });
 
 function handleLogout() {
@@ -161,7 +161,7 @@ if (shortcutKeys.value) {
       </DropdownMenuItem>
       <DropdownMenuSeparator />
       <DropdownMenuItem
-        v-if="preference"
+        v-if="preferences.shortcutKeys.enable"
         class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
         @click="handleOpenPreference"
       >

packages/business/layouts/package.json

@@ -44,13 +44,13 @@
     "@vben-core/iconify": "workspace:*",
     "@vben-core/layout-ui": "workspace:*",
     "@vben-core/menu-ui": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/stores": "workspace:*",
     "@vben-core/tabs-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/preference": "workspace:*",
-    "@vben/stores": "workspace:*",
     "vue": "3.4.27",
     "vue-router": "^4.3.2"
   },

packages/business/layouts/src/authentication/authentication.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { preferences, usePreferences } from '@vben-core/preferences';
+
 import { $t } from '@vben/locales';
-import { preference, usePreference } from '@vben/preference';
+import { computed } from 'vue';
 
 import AuthenticationFromView from './from-view.vue';
 import SloganIcon from './icons/slogan.vue';
@@ -10,7 +12,8 @@ defineOptions({
   name: 'Authentication',
 });
 
-const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
+const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
+const appName = computed(() => preferences.app.name);
 </script>
 
 <template>
@@ -33,13 +36,13 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
         "
       >
         <img
-          :alt="preference.appName"
-          :src="preference.logo"
+          :alt="appName"
+          :src="preferences.logo.source"
           :width="42"
           class="mr-2"
         />
         <p class="text-xl font-medium">
-          {{ preference.appName }}
+          {{ appName }}
         </p>
       </div>
     </div>
@@ -48,10 +51,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight } = usePreference();
         class="absolute inset-0 h-full w-full bg-[var(--color-authentication)]"
       >
         <div class="flex-col-center mr-20 h-full">
-          <SloganIcon
-            :alt="preference.appName"
-            class="animate-float h-64 w-2/5"
-          />
+          <SloganIcon :alt="appName" class="animate-float h-64 w-2/5" />
           <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
             {{ $t('authentication.layout-title') }}
           </div>

packages/business/layouts/src/authentication/from-view.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { preference } from '@vben/preference';
+import { preferences } from '@vben-core/preferences';
 
 import Toolbar from './toolbar.vue';
 
@@ -28,7 +28,7 @@ defineOptions({
     <div
       class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
     >
-      {{ preference.copyright }}
+      {{ preferences.app.copyright }}
     </div>
   </div>
 </template>

packages/business/layouts/src/authentication/index.ts

@@ -1 +1 @@
-export { default as AuthPageLayout } from './authentication.vue';
+export { default as AuthPageLayoutType } from './authentication.vue';

packages/business/layouts/src/basic/content/content.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
+import { preferences, usePreferences } from '@vben-core/preferences';
+import { storeToRefs, useTabsStore } from '@vben-core/stores';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
-import { preference, usePreference } from '@vben/preference';
-import { storeToRefs, useTabsStore } from '@vben/stores';
-
 import { IFrameRouterView } from '../../iframe';
 
 defineOptions({ name: 'LayoutContent' });
 
-const { keepAlive } = usePreference();
+const { keepAlive } = usePreferences();
 
 const tabsStore = useTabsStore();
 const { getCacheTabs, getExcludeTabs, renderRouteView } =
@@ -17,15 +16,15 @@ const { getCacheTabs, getExcludeTabs, renderRouteView } =
 // 页面切换动画
 function getTransitionName(route: RouteLocationNormalizedLoaded) {
   // 如果偏好设置未设置，则不使用动画
-  const { keepAlive, pageTransition, pageTransitionEnable, tabsVisible } =
-    preference;
-  if (!pageTransition || !pageTransitionEnable) {
+  const { tabbar, transition } = preferences;
+  const transitionName = transition.name;
+  if (!transitionName || !transition.enable) {
     return;
   }
 
   // 标签页未启用或者未开启缓存，则使用全局配置动画
-  if (!tabsVisible || !keepAlive) {
-    return pageTransition;
+  if (!tabbar.enable || !keepAlive) {
+    return transitionName;
   }
 
   // 如果页面已经加载过，则不使用动画
@@ -34,7 +33,7 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
   }
   // 已经打开且已经加载过的页面不使用动画
   const inTabs = getCacheTabs.value.includes(route.name as string);
-  return inTabs && route.meta.loaded ? undefined : pageTransition;
+  return inTabs && route.meta.loaded ? undefined : transitionName;
 }
 </script>
 

packages/business/layouts/src/basic/header/header.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { preferences } from '@vben-core/preferences';
 import { VbenFullScreen } from '@vben-core/shadcn-ui';
+import { useAccessStore } from '@vben-core/stores';
 
 import { GlobalSearch, LanguageToggle, ThemeToggle } from '@vben/common-ui';
-import { preference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
 
 interface Props {
   /**
@@ -33,7 +33,7 @@ const accessStore = useAccessStore();
   <div class="flex h-full min-w-0 flex-shrink-0 items-center">
     <GlobalSearch
       class="mr-4"
-      :enable-shortcut-key="preference.shortcutKeys"
+      :enable-shortcut-key="preferences.shortcutKeys.enable"
       :menus="accessStore.getAccessMenus"
     />
     <ThemeToggle class="mr-2" />

packages/business/layouts/src/basic/layout.vue

@@ -1,5 +1,11 @@
 <script lang="ts" setup>
 import { VbenAdminLayout } from '@vben-core/layout-ui';
+import {
+  flatPreferences,
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben-core/preferences';
 import {
   VbenBackTop,
   // VbenFloatingButtonGroup,
@@ -8,9 +14,8 @@ import {
 import { mapTree } from '@vben-core/toolkit';
 import { MenuRecordRaw } from '@vben-core/typings';
 
-import { PreferenceWidget } from '@vben/common-ui';
+import { PreferencesWidget } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { preference, updatePreference, usePreference } from '@vben/preference';
 import { computed } from 'vue';
 
 import { LayoutContent } from './content';
@@ -29,27 +34,24 @@ import { Breadcrumb } from './widgets';
 defineOptions({ name: 'BasicLayout' });
 
 const { isDark, isHeaderNav, isMixedNav, isSideMixedNav, layout } =
-  usePreference();
+  usePreferences();
 
 const headerMenuTheme = computed(() => {
   return isDark.value ? 'dark' : 'light';
 });
 
 const theme = computed(() => {
-  const dark = isDark.value || preference.semiDarkMenu;
+  const dark = isDark.value || preferences.app.semiDarkMenu;
   return dark ? 'dark' : 'light';
 });
 
 const logoClass = computed(() => {
-  return preference.sideCollapseShowTitle &&
-    preference.sideCollapse &&
-    !isMixedNav.value
-    ? 'mx-auto'
-    : '';
+  const { collapse, collapseShowTitle } = preferences.sidebar;
+  return collapseShowTitle && collapse && !isMixedNav.value ? 'mx-auto' : '';
 });
 
 const isMenuRounded = computed(() => {
-  return preference.navigationStyle === 'rounded';
+  return preferences.navigation.styleType === 'rounded';
 });
 
 const logoCollapse = computed(() => {
@@ -57,12 +59,12 @@ const logoCollapse = computed(() => {
     return false;
   }
 
-  const { isMobile, sideCollapse } = preference;
+  const { appIsMobile, sidebarCollapse } = flatPreferences;
 
-  if (!sideCollapse && isMobile) {
+  if (!sidebarCollapse && appIsMobile) {
     return false;
   }
-  return sideCollapse || isSideMixedNav.value;
+  return sidebarCollapse || isSideMixedNav.value;
 });
 
 const showHeaderNav = computed(() => {
@@ -101,40 +103,36 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
 <template>
   <VbenAdminLayout
     v-model:side-extra-visible="extraVisible"
-    :side-collapse-show-title="preference.sideCollapseShowTitle"
-    :side-collapse="preference.sideCollapse"
-    :side-extra-collapse="preference.sideExtraCollapse"
-    :content-compact="preference.contentCompact"
-    :is-mobile="preference.isMobile"
+    v-model:side-collapse="flatPreferences.sidebarCollapse"
+    v-model:side-expand-on-hover="flatPreferences.sidebarExpandOnHover"
+    v-model:side-extra-collapse="flatPreferences.sidebarExtraCollapse"
+    :side-collapse-show-title="preferences.sidebar.collapseShowTitle"
+    :content-compact="preferences.app.contentCompact"
+    :is-mobile="preferences.app.isMobile"
     :layout="layout"
-    :header-mode="preference.headerMode"
-    :footer-fixed="preference.footerFixed"
-    :side-semi-dark="preference.semiDarkMenu"
+    :header-mode="preferences.header.mode"
+    :footer-fixed="preferences.footer.fixed"
+    :side-semi-dark="preferences.app.semiDarkMenu"
     :side-theme="theme"
-    :side-hidden="preference.sideHidden"
+    :side-hidden="preferences.sidebar.hidden"
     :side-visible="sideVisible"
-    :footer-visible="preference.footerVisible"
-    :header-visible="preference.headerVisible"
-    :header-hidden="preference.headerHidden"
-    :side-width="preference.sideWidth"
-    :tabs-visible="preference.tabsVisible"
-    :side-expand-on-hover="preference.sideExpandOnHover"
+    :footer-visible="preferences.footer.enable"
+    :header-visible="preferences.header.enable"
+    :header-hidden="preferences.header.hidden"
+    :side-width="preferences.sidebar.width"
+    :tabs-visible="preferences.tabbar.enable"
     @side-mouse-leave="handleSideMouseLeave"
-    @update:side-collapse="
-      (value: boolean) => updatePreference('sideCollapse', value)
-    "
-    @update:side-extra-collapse="
-      (value: boolean) => updatePreference('sideExtraCollapse', value)
-    "
     @update:side-visible="
-      (value: boolean) => updatePreference('sideVisible', value)
-    "
-    @update:side-expand-on-hover="
-      (value: boolean) => updatePreference('sideExpandOnHover', value)
+      (value: boolean) =>
+        updatePreferences({
+          sidebar: {
+            enable: value,
+          },
+        })
     "
   >
-    <template v-if="preference.showPreference" #preference>
-      <PreferenceWidget />
+    <template v-if="preferences.app.showPreference" #preferences>
+      <PreferencesWidget />
     </template>
 
     <template #floating-button-group>
@@ -146,10 +144,10 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #logo>
       <VbenLogo
         :collapse="logoCollapse"
-        :src="preference.logo"
-        :text="preference.appName"
+        :src="preferences.logo.source"
+        :text="preferences.app.name"
         :theme="showHeaderNav ? headerMenuTheme : theme"
-        :alt="preference.appName"
+        :alt="preferences.app.name"
         :class="logoClass"
       />
     </template>
@@ -157,14 +155,14 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #header>
       <LayoutHeader :theme="theme">
         <template
-          v-if="!showHeaderNav && preference.breadcrumbVisible"
+          v-if="!showHeaderNav && preferences.breadcrumb.enable"
           #breadcrumb
         >
           <Breadcrumb
-            :hide-when-only-one="preference.breadcrumbHideOnlyOne"
-            :type="preference.breadcrumbStyle"
-            :show-icon="preference.breadcrumbIcon"
-            :show-home="preference.breadcrumbHome"
+            :hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
+            :type="preferences.breadcrumb.styleType"
+            :show-icon="preferences.breadcrumb.showIcon"
+            :show-home="preferences.breadcrumb.showHome"
           />
         </template>
         <template v-if="showHeaderNav" #menu>
@@ -190,10 +188,10 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #menu>
       <LayoutMenu
         mode="vertical"
-        :accordion="preference.navigationAccordion"
+        :accordion="preferences.navigation.accordion"
         :rounded="isMenuRounded"
-        :collapse-show-title="preference.sideCollapseShowTitle"
-        :collapse="preference.sideCollapse"
+        :collapse-show-title="preferences.sidebar.collapseShowTitle"
+        :collapse="preferences.sidebar.collapse"
         :theme="theme"
         :menus="wrapperMenus(sideMenus)"
         :default-active="sideActive"
@@ -203,7 +201,7 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #mixed-menu>
       <LayoutMixedMenu
         :rounded="isMenuRounded"
-        :collapse="!preference.sideCollapseShowTitle"
+        :collapse="!preferences.sidebar.collapseShowTitle"
         :active-path="extraActiveMenu"
         :theme="theme"
         @select="handleMixedMenuSelect"
@@ -214,30 +212,30 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <!-- 侧边额外区域 -->
     <template #side-extra>
       <LayoutExtraMenu
-        :accordion="preference.navigationAccordion"
+        :accordion="preferences.navigation.accordion"
         :rounded="isMenuRounded"
         :menus="wrapperMenus(extraMenus)"
-        :collapse="preference.sideExtraCollapse"
+        :collapse="preferences.sidebar.extraCollapse"
         :theme="theme"
       />
     </template>
     <template #side-extra-title>
       <VbenLogo
-        v-if="preference.logoVisible"
-        :text="preference.appName"
+        v-if="preferences.logo.enable"
+        :text="preferences.app.name"
         :theme="theme"
-        :alt="preference.appName"
+        :alt="preferences.app.name"
       />
     </template>
 
     <template #tabs>
       <LayoutTabs
-        v-if="preference.tabsVisible"
-        :show-icon="preference.tabsIcon"
+        v-if="preferences.tabbar.enable"
+        :show-icon="preferences.tabbar.showIcon"
       />
     </template>
     <template #tabs-toolbar>
-      <LayoutTabsToolbar v-if="preference.tabsVisible" />
+      <LayoutTabsToolbar v-if="preferences.tabbar.enable" />
     </template>
 
     <!-- 主体内容 -->
@@ -245,9 +243,9 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
       <LayoutContent />
     </template>
     <!-- 页脚 -->
-    <template v-if="preference.footerVisible" #footer>
-      <LayoutFooter v-if="preference.copyright">
-        {{ preference.copyright }}
+    <template v-if="preferences.footer.enable" #footer>
+      <LayoutFooter v-if="preferences.app.copyright">
+        {{ preferences.app.copyright }}
       </LayoutFooter>
     </template>
   </VbenAdminLayout>

packages/business/layouts/src/basic/menu/mixed-menu.vue

@@ -3,8 +3,8 @@ import type { NormalMenuProps } from '@vben-core/menu-ui';
 import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { NormalMenu } from '@vben-core/menu-ui';
+import { useAccessStore } from '@vben-core/stores';
 
-import { useAccessStore } from '@vben/stores';
 import { computed, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 

packages/business/layouts/src/basic/menu/use-extra-menu.ts

@@ -1,7 +1,8 @@
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { preference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
+import { preferences } from '@vben-core/preferences';
+import { useAccessStore } from '@vben-core/stores';
+
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -46,7 +47,7 @@ function useExtraMenu() {
     extraMenus.value = rootMenu?.children ?? [];
     extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
 
-    if (preference.sideExpandOnHover) {
+    if (preferences.sidebar.expandOnHover) {
       extraVisible.value = extraMenus.value.length > 0;
     }
   };
@@ -55,7 +56,7 @@ function useExtraMenu() {
    * 侧边菜单鼠标移出事件
    */
   const handleSideMouseLeave = () => {
-    if (preference.sideExpandOnHover) {
+    if (preferences.sidebar.expandOnHover) {
       return;
     }
     extraVisible.value = false;
@@ -69,7 +70,7 @@ function useExtraMenu() {
   };
 
   const handleMenuMouseEnter = (menu: MenuRecordRaw) => {
-    if (!preference.sideExpandOnHover) {
+    if (!preferences.sidebar.expandOnHover) {
       const { findMenu } = findRootMenuByPath(menus.value, menu.path);
       extraMenus.value = findMenu?.children ?? [];
       extraActiveMenu.value = menu.parents?.[0] ?? menu.path;

packages/business/layouts/src/basic/menu/use-mixed-menu.ts

@@ -1,7 +1,8 @@
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { preference, usePreference } from '@vben/preference';
-import { useAccessStore } from '@vben/stores';
+import { preferences, usePreferences } from '@vben-core/preferences';
+import { useAccessStore } from '@vben-core/stores';
+
 import { computed, onBeforeMount, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -15,17 +16,18 @@ function useMixedMenu() {
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
 
-  const { isMixedNav } = usePreference();
+  const { isMixedNav } = usePreferences();
 
   const needSplit = computed(
-    () => preference.navigationSplit && isMixedNav.value,
+    () => preferences.navigation.split && isMixedNav.value,
   );
 
   const sideVisible = computed(() => {
+    const enableSidebar = preferences.sidebar.enable;
     if (needSplit.value) {
-      return preference.sideVisible && splitSideMenus.value.length > 0;
+      return enableSidebar && splitSideMenus.value.length > 0;
     }
-    return preference.sideVisible;
+    return enableSidebar;
   });
   const menus = computed(() => accessStore.getAccessMenus);
 

packages/business/layouts/src/basic/tabs/tabs-toolbar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { preferences, updatePreferences } from '@vben-core/preferences';
 import { TabsMore, TabsScreen } from '@vben-core/tabs-ui';
 
-import { preference, updatePreference } from '@vben/preference';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -16,9 +16,13 @@ const menus = computed(() => {
 });
 
 function handleScreenChange(screen: boolean) {
-  updatePreference({
-    headerHidden: !!screen,
-    sideHidden: !!screen,
+  updatePreferences({
+    header: {
+      hidden: !!screen,
+    },
+    sidebar: {
+      hidden: !!screen,
+    },
   });
 }
 </script>
@@ -27,7 +31,7 @@ function handleScreenChange(screen: boolean) {
   <div class="flex-center h-full">
     <TabsMore :menus="menus" />
     <TabsScreen
-      :screen="preference.sideHidden && preference.sideHidden"
+      :screen="preferences.sidebar.hidden"
       @change="handleScreenChange"
       @update:screen="handleScreenChange"
     />

packages/business/layouts/src/basic/tabs/use-tabs.ts

@@ -11,6 +11,7 @@ import {
   MdiPin,
   MdiPinOff,
 } from '@vben-core/iconify';
+import { storeToRefs, useAccessStore, useTabsStore } from '@vben-core/stores';
 import { filterTree } from '@vben-core/toolkit';
 import type {
   RouteLocationNormalized,
@@ -18,7 +19,6 @@ import type {
 } from 'vue-router';
 
 import { $t } from '@vben/locales';
-import { storeToRefs, useAccessStore, useTabsStore } from '@vben/stores';
 import { computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 

packages/business/layouts/src/basic/widgets/breadcrumb.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import type { BreadcrumbStyleType } from '@vben-core/preferences';
 import type { IBreadcrumb } from '@vben-core/shadcn-ui';
 
 import { VbenBackgroundBreadcrumb, VbenBreadcrumb } from '@vben-core/shadcn-ui';
-import { BreadcrumbStyle } from '@vben-core/typings';
 
 import { $t } from '@vben/locales';
 import { computed } from 'vue';
@@ -12,7 +12,7 @@ interface Props {
   hideWhenOnlyOne?: boolean;
   showHome?: boolean;
   showIcon?: boolean;
-  type?: BreadcrumbStyle;
+  type?: BreadcrumbStyleType;
 }
 
 const props = withDefaults(defineProps<Props>(), {

packages/business/layouts/src/iframe/iframe-router-view.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { preferences } from '@vben-core/preferences';
+import { useTabsStore } from '@vben-core/stores';
+
 import { Spinner } from '@vben/common-ui';
-import { preference } from '@vben/preference';
-import { useTabsStore } from '@vben/stores';
 import { computed, ref } from 'vue';
 import { type RouteLocationNormalized, useRoute } from 'vue-router';
 
@@ -11,8 +12,10 @@ const spinning = ref(true);
 const tabsStore = useTabsStore();
 const route = useRoute();
 
+const enableTabbar = computed(() => preferences.tabbar.enable);
+
 const iframeRoutes = computed(() => {
-  if (!preference.tabsVisible) {
+  if (!enableTabbar.value) {
     return route.meta.iframeSrc ? [route] : [];
   }
   const tabs = tabsStore.getTabs.filter((tab) => !!tab.meta?.iframeSrc);
@@ -45,7 +48,7 @@ function canRender(tabItem: RouteLocationNormalized) {
     return false;
   }
 
-  if (!preference.tabsVisible) {
+  if (!enableTabbar.value) {
     return routeShow(tabItem);
   }