refactor: refacotr preference

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" />