chore: remove flatPreferences

2024-06-09 12:53:38 +08:00
parent a344d32169
commit 68229a4d2f
20 changed files with 462 additions and 224 deletions
--- 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,
--- 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);
--- 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,
--- 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 {