wip: refactor layout

src/hooks/core/useDebouncedRef.ts

@@ -0,0 +1,20 @@
+import { customRef } from 'vue';
+
+export function useDebouncedRef<T = any>(value: T, delay = 100) {
+  let timeout: TimeoutHandle;
+  return customRef((track, trigger) => {
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(newValue: T) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          value = newValue;
+          trigger();
+        }, delay);
+      },
+    };
+  });
+}

src/hooks/setting/index.ts

@@ -0,0 +1,43 @@
+import type { ProjectConfig, GlobConfig, GlobEnvConfig } from '/@/types/config';
+
+import getProjectSetting from '/@/settings/projectSetting';
+
+import { getShortName } from '../../../build/getShortName';
+import { warn } from '/@/utils/log';
+import { getGlobEnvConfig, isDevMode } from '/@/utils/env';
+
+const reg = /[a-zA-Z\_]*/;
+
+const ENV_NAME = getShortName(import.meta.env);
+const ENV = ((isDevMode()
+  ? getGlobEnvConfig()
+  : window[ENV_NAME as any]) as unknown) as GlobEnvConfig;
+
+const {
+  VITE_GLOB_APP_TITLE,
+  VITE_GLOB_API_URL,
+  VITE_GLOB_APP_SHORT_NAME,
+  VITE_GLOB_API_URL_PREFIX,
+} = ENV;
+
+if (!reg.test(VITE_GLOB_APP_SHORT_NAME)) {
+  warn(
+    `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+  );
+}
+
+export const useGlobSetting = (): Readonly<GlobConfig> => {
+  // Take global configuration
+  const glob: Readonly<GlobConfig> = {
+    title: VITE_GLOB_APP_TITLE,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
+  };
+  return glob as Readonly<GlobConfig>;
+};
+
+export const useProjectSetting = (): ProjectConfig => {
+  // TODO computed
+  return getProjectSetting;
+};

src/hooks/setting/useHeaderSetting.ts

@@ -0,0 +1,67 @@
+import type { HeaderSetting } from '/@/types/config';
+
+import { computed, unref } from 'vue';
+
+import { appStore } from '/@/store/modules/app';
+
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+import { MenuModeEnum } from '/@/enums/menuEnum';
+
+export function useHeaderSetting() {
+  const { getShow: getShowMultipleTab } = useMultipleTabSetting();
+  const { getMode, getSplit, getShowHeaderTrigger, getIsSidebarType } = useMenuSetting();
+  const { getShowBreadCrumb, getShowLogo } = useRootSetting();
+
+  // Get header configuration
+  const getHeaderSetting = computed(() => appStore.getProjectConfig.headerSetting);
+
+  const getShowDoc = computed(() => unref(getHeaderSetting).showDoc);
+
+  const getTheme = computed(() => unref(getHeaderSetting).theme);
+
+  const getShowRedo = computed(() => unref(getHeaderSetting).showRedo && unref(getShowMultipleTab));
+
+  const getUseLockPage = computed(() => unref(getHeaderSetting).useLockPage);
+
+  const getShowFullScreen = computed(() => unref(getHeaderSetting).showFullScreen);
+
+  const getShowNotice = computed(() => unref(getHeaderSetting).showNotice);
+
+  const getShowBread = computed(() => {
+    return (
+      unref(getMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
+    );
+  });
+
+  const getShowHeaderLogo = computed(() => {
+    return unref(getShowLogo) && !unref(getIsSidebarType);
+  });
+
+  const getShowContent = computed(() => {
+    return unref(getShowBread) || unref(getShowHeaderTrigger);
+  });
+
+  // Set header configuration
+  function setHeaderSetting(headerSetting: Partial<HeaderSetting>): void {
+    appStore.commitProjectConfigState({ headerSetting });
+  }
+
+  return {
+    setHeaderSetting,
+
+    getHeaderSetting,
+
+    getShowDoc,
+    getTheme,
+    getShowRedo,
+    getUseLockPage,
+    getShowFullScreen,
+    getShowNotice,
+    getShowBread,
+    getShowContent,
+    getShowHeaderLogo,
+  };
+}

src/hooks/setting/useLocaleSetting.ts

@@ -0,0 +1,28 @@
+import type { LocaleSetting } from '/@/types/config';
+
+import { computed, unref } from 'vue';
+import { appStore } from '/@/store/modules/app';
+
+import getProjectSetting from '/@/settings/projectSetting';
+import { localeList } from '/@/locales';
+
+export function useLocaleSetting() {
+  // Get locale configuration
+  const getLocale = computed(() => appStore.getProjectConfig.locale || getProjectSetting.locale);
+
+  // get current language
+  const getLang = computed(() => unref(getLocale).lang);
+
+  // get Available Locales
+  const getAvailableLocales = computed((): string[] => unref(getLocale).availableLocales);
+
+  // get Fallback Locales
+  const getFallbackLocale = computed((): string => unref(getLocale).fallback);
+
+  // Set locale configuration
+  function setLocale(locale: Partial<LocaleSetting>): void {
+    appStore.commitProjectConfigState({ locale });
+  }
+
+  return { getLocale, getLang, localeList, setLocale, getAvailableLocales, getFallbackLocale };
+}

src/hooks/setting/useMenuSetting.ts

@@ -0,0 +1,120 @@
+import type { MenuSetting } from '/@/types/config';
+
+import { computed, unref } from 'vue';
+
+import { appStore } from '/@/store/modules/app';
+
+import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
+import { MenuModeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
+
+export function useMenuSetting() {
+  // Get menu configuration
+  const getMenuSetting = computed(() => appStore.getProjectConfig.menuSetting);
+
+  const getMiniWidth = computed(() => unref(getMenuSetting).menuWidth);
+
+  const getCollapsed = computed(() => unref(getMenuSetting).collapsed);
+
+  const getType = computed(() => unref(getMenuSetting).type);
+
+  const getMode = computed(() => unref(getMenuSetting).mode);
+
+  const getShow = computed(() => unref(getMenuSetting).show);
+
+  const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth);
+
+  const getTrigger = computed(() => unref(getMenuSetting).trigger);
+
+  const getTheme = computed(() => unref(getMenuSetting).theme);
+
+  const getSplit = computed(() => unref(getMenuSetting).split);
+
+  const getHasDrag = computed(() => unref(getMenuSetting).hasDrag);
+
+  const getAccordion = computed(() => unref(getMenuSetting).accordion);
+
+  const getCollapsedShowTitle = computed(() => unref(getMenuSetting).collapsedShowTitle);
+
+  const getCollapsedShowSearch = computed(() => unref(getMenuSetting).collapsedShowSearch);
+
+  const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
+
+  const getIsSidebarType = computed(() => unref(getType) === MenuTypeEnum.SIDEBAR);
+
+  const getShowTopMenu = computed(() => {
+    return unref(getMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
+  });
+
+  const getShowHeaderTrigger = computed(() => {
+    if (
+      unref(getType) === MenuTypeEnum.TOP_MENU ||
+      !unref(getShow) ||
+      !unref(getMenuSetting).hidden
+    ) {
+      return false;
+    }
+
+    return unref(getTrigger) === TriggerEnum.HEADER;
+  });
+
+  const getShowSearch = computed(() => {
+    return (
+      unref(getMenuSetting).showSearch &&
+      !(unref(getType) === MenuTypeEnum.MIX && unref(getMode) === MenuModeEnum.HORIZONTAL)
+    );
+  });
+
+  const getIsHorizontal = computed(() => {
+    return unref(getMode) === MenuModeEnum.HORIZONTAL;
+  });
+
+  const getMiniWidthNumber = computed(() => {
+    const { collapsedShowTitle } = unref(getMenuSetting);
+    return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
+  });
+
+  const getCalcContentWidth = computed(() => {
+    const width = unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMiniWidth);
+    return `calc(100% - ${width}px)`;
+  });
+
+  // Set menu configuration
+  function setMenuSetting(menuSetting: Partial<MenuSetting>): void {
+    appStore.commitProjectConfigState({ menuSetting });
+  }
+
+  function toggleCollapsed() {
+    setMenuSetting({
+      collapsed: !unref(getCollapsed),
+    });
+  }
+
+  return {
+    setMenuSetting,
+
+    toggleCollapsed,
+
+    getMenuSetting,
+    getMiniWidth,
+    getType,
+    getMode,
+    getShow,
+    getCollapsed,
+    getMiniWidthNumber,
+    getCalcContentWidth,
+    getMenuWidth,
+    getTrigger,
+    getSplit,
+    getTheme,
+    getHasDrag,
+    getIsHorizontal,
+    getShowSearch,
+    getCollapsedShowTitle,
+    getCollapsedShowSearch,
+    getIsSidebarType,
+    getAccordion,
+    getShowTopMenu,
+    getShowHeaderTrigger,
+    getTopMenuAlign,
+  };
+}

src/hooks/setting/useMultipleTabSetting.ts

@@ -0,0 +1,25 @@
+import type { MultiTabsSetting } from '/@/types/config';
+
+import { computed, unref } from 'vue';
+
+import { appStore } from '/@/store/modules/app';
+
+export function useMultipleTabSetting() {
+  const getMultipleTabSetting = computed(() => appStore.getProjectConfig.multiTabsSetting);
+
+  const getMax = computed(() => unref(getMultipleTabSetting).max);
+
+  const getShow = computed(() => unref(getMultipleTabSetting).show);
+
+  function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
+    appStore.commitProjectConfigState({ multiTabsSetting });
+  }
+
+  return {
+    setMultipleTabSetting,
+
+    getMultipleTabSetting,
+    getMax,
+    getShow,
+  };
+}

src/hooks/setting/useRootSetting.ts

@@ -0,0 +1,53 @@
+import type { ProjectConfig } from '/@/types/config';
+
+import { computed, unref } from 'vue';
+
+import { appStore } from '/@/store/modules/app';
+
+type RootSetting = Omit<
+  ProjectConfig,
+  'locale' | 'headerSetting' | 'menuSetting' | 'multiTabsSetting'
+>;
+export function useRootSetting() {
+  const getRootSetting = computed((): RootSetting => appStore.getProjectConfig);
+
+  const getOpenPageLoading = computed(() => unref(getRootSetting).openPageLoading);
+
+  const getOpenRouterTransition = computed(() => unref(getRootSetting).openRouterTransition);
+
+  const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive);
+
+  const getRouterTransition = computed(() => unref(getRootSetting).routerTransition);
+
+  const getCanEmbedIFramePage = computed(() => unref(getRootSetting).canEmbedIFramePage);
+
+  const getPermissionMode = computed(() => unref(getRootSetting).permissionMode);
+
+  const getShowLogo = computed(() => unref(getRootSetting).showLogo);
+
+  const getUseErrorHandle = computed(() => unref(getRootSetting).useErrorHandle);
+
+  const getShowBreadCrumb = computed(() => unref(getRootSetting).showBreadCrumb);
+
+  const getShowBreadCrumbIcon = computed(() => unref(getRootSetting).showBreadCrumbIcon);
+
+  function setRootSetting(setting: RootSetting) {
+    appStore.commitProjectConfigState(setting);
+  }
+
+  return {
+    setRootSetting,
+
+    getRootSetting,
+    getOpenPageLoading,
+    getOpenRouterTransition,
+    getOpenKeepAlive,
+    getRouterTransition,
+    getCanEmbedIFramePage,
+    getPermissionMode,
+    getShowLogo,
+    getUseErrorHandle,
+    getShowBreadCrumb,
+    getShowBreadCrumbIcon,
+  };
+}

src/hooks/web/useLocale.ts

@@ -7,7 +7,7 @@ import { unref, ref } from 'vue';
 
 import { getI18n } from '/@/setup/i18n';
 
-import { useLocaleSetting } from '/@/settings/use/useLocaleSetting';
+import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
 
 import moment from 'moment';
 
@@ -67,7 +67,7 @@ export function useLocale() {
 }
 
 /**
- * For non-setup use
+ * For non-setup setting
  */
 export function useExternalI18n() {
   return getI18n().global;

src/hooks/web/usePage.ts

@@ -20,6 +20,7 @@ function handleError(e: Error) {
 export function useGo() {
   const { push, replace } = useRouter();
   function go(opt: PageEnum | RouteLocationRawEx | string = PageEnum.BASE_HOME, isReplace = false) {
+    if (!opt) return;
     if (isString(opt)) {
       isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
     } else {

src/hooks/web/useSideBar.ts

@@ -1,20 +0,0 @@
-import { computed } from 'vue';
-import { appStore } from '/@/store/modules/app';
-
-export function useSideBar() {
-  const currentCollapsedRef = computed(() => {
-    return appStore.getProjectConfig.menuSetting.collapsed;
-  });
-  const changeCollapsed = (collapsed: boolean) => {
-    appStore.commitProjectConfigState({
-      menuSetting: {
-        collapsed: collapsed,
-      },
-    });
-  };
-  return {
-    openSider: changeCollapsed(false),
-    closeSider: changeCollapsed(true),
-    currentCollapsedRef,
-  };
-}