refactor: refacotr preference

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);
   }