chore: init project

packages/preference/src/use-preference.ts

@@ -0,0 +1,119 @@
+import { diff } from '@vben-core/toolkit';
+
+import { computed } from 'vue';
+
+import {
+  initialPreference,
+  isDarkTheme,
+  currentPreference as preference,
+} from './preference';
+
+function usePreference() {
+  /**
+   * @zh_CN 计算偏好设置的变化
+   */
+  const diffPreference = computed(() => {
+    return diff(initialPreference.value, preference);
+  });
+
+  /**
+   * @zh_CN 判断是否为暗黑模式
+   * @param  preference - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
+   * @returns 如果主题为暗黑模式，返回 true，否则返回 false。
+   */
+  const isDark = computed(() => {
+    const theme = preference.theme;
+    return isDarkTheme(theme);
+  });
+
+  const theme = computed(() => {
+    return isDark.value ? 'dark' : 'light';
+  });
+
+  /**
+   * @zh_CN 布局方式
+   */
+  const layout = computed(() =>
+    preference.isMobile ? 'side-nav' : preference.layout,
+  );
+
+  /**
+   * @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+   */
+  const isFullContent = computed(() => preference.layout === 'full-content');
+
+  /**
+   * @zh_CN 是否侧边导航模式
+   */
+  const isSideNav = computed(() => preference.layout === 'side-nav');
+
+  /**
+   * @zh_CN 是否侧边混合模式
+   */
+  const isSideMixedNav = computed(() => preference.layout === 'side-mixed-nav');
+
+  /**
+   * @zh_CN 是否为头部导航模式
+   */
+  const isHeaderNav = computed(() => preference.layout === 'header-nav');
+
+  /**
+   * @zh_CN 是否为混合导航模式
+   */
+  const isMixedNav = computed(() => preference.layout === 'mixed-nav');
+
+  /**
+   * @zh_CN 是否包含侧边导航模式
+   */
+  const isSideMode = computed(() => {
+    return isMixedNav.value || isSideMixedNav.value || isSideNav.value;
+  });
+
+  /**
+   * @zh_CN 是否开启keep-alive
+   * 在tabs可见以及开启keep-alive的情况下才开启
+   */
+  const keepAlive = computed(
+    () => preference.keepAlive && preference.tabsVisible,
+  );
+
+  /**
+   * @zh_CN 登录注册页面布局是否为左侧
+   */
+  const authPanelLeft = computed(() => {
+    return preference.authPageLayout === 'panel-left';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为左侧
+   */
+  const authPanelRight = computed(() => {
+    return preference.authPageLayout === 'panel-right';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为中间
+   */
+  const authPanelCenter = computed(() => {
+    return preference.authPageLayout === 'panel-center';
+  });
+
+  return {
+    authPanelCenter,
+    authPanelLeft,
+    authPanelRight,
+    diffPreference,
+    isDark,
+    isFullContent,
+    isHeaderNav,
+    isMixedNav,
+    isSideMixedNav,
+    isSideMode,
+    isSideNav,
+    keepAlive,
+    layout,
+    theme,
+  };
+}
+
+export { usePreference };