chore: remove flatPreferences

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>