refactor: refactor layout

src/hooks/core/useContext.ts

@@ -0,0 +1,22 @@
+import { InjectionKey, provide, inject, reactive, readonly } from 'vue';
+
+export const createContext = <T>(
+  context: any,
+  contextInjectKey: InjectionKey<T> = Symbol(),
+  _readonly = true
+) => {
+  const state = reactive({
+    ...context,
+  });
+  const provideData = _readonly ? readonly(state) : state;
+  provide(contextInjectKey, provideData);
+};
+
+export const useContext = <T>(
+  contextInjectKey: InjectionKey<T> = Symbol(),
+  defaultValue?: any,
+  _readonly = true
+): T => {
+  const state = inject(contextInjectKey, defaultValue || {});
+  return _readonly ? readonly(state) : state;
+};

src/hooks/setting/useHeaderSetting.ts

@@ -7,20 +7,50 @@ 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 { useFullContent } from '/@/hooks/web/useFullContent';
 
 import { MenuModeEnum } from '/@/enums/menuEnum';
 
 export function useHeaderSetting() {
-  const { getShow: getShowMultipleTab } = useMultipleTabSetting();
-  const { getMode, getSplit, getShowHeaderTrigger, getIsSidebarType } = useMenuSetting();
+  const { getFullContent } = useFullContent();
+  const { getShowMultipleTab } = useMultipleTabSetting();
+  const {
+    getMenuMode,
+    getSplit,
+    getShowHeaderTrigger,
+    getIsSidebarType,
+    getIsTopMenu,
+  } = useMenuSetting();
   const { getShowBreadCrumb, getShowLogo } = useRootSetting();
 
+  const getShowMixHeaderRef = computed(() => !unref(getIsSidebarType) && unref(getShowHeader));
+
+  const getShowFullHeaderRef = computed(() => {
+    return (
+      !unref(getFullContent) &&
+      unref(getShowMixHeaderRef) &&
+      unref(getShowHeader) &&
+      !unref(getIsTopMenu)
+    );
+  });
+
+  const getShowInsetHeaderRef = computed(() => {
+    const need = !unref(getFullContent) && unref(getShowHeader);
+    return (need && !unref(getShowMixHeaderRef)) || (need && unref(getIsTopMenu));
+  });
+
   // Get header configuration
   const getHeaderSetting = computed(() => appStore.getProjectConfig.headerSetting);
 
   const getShowDoc = computed(() => unref(getHeaderSetting).showDoc);
 
-  const getTheme = computed(() => unref(getHeaderSetting).theme);
+  const getHeaderTheme = computed(() => unref(getHeaderSetting).theme);
+
+  const getShowHeader = computed(() => unref(getHeaderSetting).show);
+
+  const getFixed = computed(() => unref(getHeaderSetting).fixed);
+
+  const getHeaderBgColor = computed(() => unref(getHeaderSetting).bgColor);
 
   const getShowRedo = computed(() => unref(getHeaderSetting).showRedo && unref(getShowMultipleTab));
 
@@ -30,9 +60,11 @@ export function useHeaderSetting() {
 
   const getShowNotice = computed(() => unref(getHeaderSetting).showNotice);
 
+  const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef));
+
   const getShowBread = computed(() => {
     return (
-      unref(getMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
+      unref(getMenuMode) !== MenuModeEnum.HORIZONTAL && unref(getShowBreadCrumb) && !unref(getSplit)
     );
   });
 
@@ -55,7 +87,7 @@ export function useHeaderSetting() {
     getHeaderSetting,
 
     getShowDoc,
-    getTheme,
+    getHeaderTheme,
     getShowRedo,
     getUseLockPage,
     getShowFullScreen,
@@ -63,5 +95,12 @@ export function useHeaderSetting() {
     getShowBread,
     getShowContent,
     getShowHeaderLogo,
+    getShowHeader,
+    getFixed,
+    getShowMixHeaderRef,
+    getShowFullHeaderRef,
+    getShowInsetHeaderRef,
+    getUnFixedAndFull,
+    getHeaderBgColor,
   };
 }

src/hooks/setting/useMenuSetting.ts

@@ -11,24 +11,28 @@ 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 getMenuType = computed(() => unref(getMenuSetting).type);
 
-  const getMode = computed(() => unref(getMenuSetting).mode);
+  const getMenuMode = computed(() => unref(getMenuSetting).mode);
 
-  const getShow = computed(() => unref(getMenuSetting).show);
+  const getMenuFixed = computed(() => unref(getMenuSetting).fixed);
+
+  const getShowMenu = computed(() => unref(getMenuSetting).show);
+
+  const getMenuHidden = computed(() => unref(getMenuSetting).hidden);
 
   const getMenuWidth = computed(() => unref(getMenuSetting).menuWidth);
 
   const getTrigger = computed(() => unref(getMenuSetting).trigger);
 
-  const getTheme = computed(() => unref(getMenuSetting).theme);
+  const getMenuTheme = computed(() => unref(getMenuSetting).theme);
 
   const getSplit = computed(() => unref(getMenuSetting).split);
 
+  const getMenuBgColor = computed(() => unref(getMenuSetting).bgColor);
+
   const getHasDrag = computed(() => unref(getMenuSetting).hasDrag);
 
   const getAccordion = computed(() => unref(getMenuSetting).accordion);
@@ -39,17 +43,19 @@ export function useMenuSetting() {
 
   const getTopMenuAlign = computed(() => unref(getMenuSetting).topMenuAlign);
 
-  const getIsSidebarType = computed(() => unref(getType) === MenuTypeEnum.SIDEBAR);
+  const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDEBAR);
+
+  const getIsTopMenu = computed(() => unref(getMenuType) === MenuTypeEnum.TOP_MENU);
 
   const getShowTopMenu = computed(() => {
-    return unref(getMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL || unref(getSplit);
   });
 
   const getShowHeaderTrigger = computed(() => {
     if (
-      unref(getType) === MenuTypeEnum.TOP_MENU ||
-      !unref(getShow) ||
-      !unref(getMenuSetting).hidden
+      unref(getMenuType) === MenuTypeEnum.TOP_MENU ||
+      !unref(getShowMenu) ||
+      !unref(getMenuHidden)
     ) {
       return false;
     }
@@ -60,12 +66,16 @@ export function useMenuSetting() {
   const getShowSearch = computed(() => {
     return (
       unref(getMenuSetting).showSearch &&
-      !(unref(getType) === MenuTypeEnum.MIX && unref(getMode) === MenuModeEnum.HORIZONTAL)
+      !(unref(getMenuType) === MenuTypeEnum.MIX && unref(getMenuMode) === MenuModeEnum.HORIZONTAL)
     );
   });
 
   const getIsHorizontal = computed(() => {
-    return unref(getMode) === MenuModeEnum.HORIZONTAL;
+    return unref(getMenuMode) === MenuModeEnum.HORIZONTAL;
+  });
+
+  const getRealWidth = computed(() => {
+    return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
   });
 
   const getMiniWidthNumber = computed(() => {
@@ -74,8 +84,8 @@ export function useMenuSetting() {
   });
 
   const getCalcContentWidth = computed(() => {
-    const width = unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMiniWidth);
-    return `calc(100% - ${width}px)`;
+    const width = unref(getIsTopMenu) || !unref(getShowMenu) ? 0 : unref(getRealWidth);
+    return `calc(100% - ${unref(width)}px)`;
   });
 
   // Set menu configuration
@@ -94,18 +104,19 @@ export function useMenuSetting() {
 
     toggleCollapsed,
 
+    getMenuFixed,
     getMenuSetting,
-    getMiniWidth,
-    getType,
-    getMode,
-    getShow,
+    getRealWidth,
+    getMenuType,
+    getMenuMode,
+    getShowMenu,
     getCollapsed,
     getMiniWidthNumber,
     getCalcContentWidth,
     getMenuWidth,
     getTrigger,
     getSplit,
-    getTheme,
+    getMenuTheme,
     getHasDrag,
     getIsHorizontal,
     getShowSearch,
@@ -116,5 +127,8 @@ export function useMenuSetting() {
     getShowTopMenu,
     getShowHeaderTrigger,
     getTopMenuAlign,
+    getMenuHidden,
+    getIsTopMenu,
+    getMenuBgColor,
   };
 }

src/hooks/setting/useMultipleTabSetting.ts

@@ -9,7 +9,9 @@ export function useMultipleTabSetting() {
 
   const getMax = computed(() => unref(getMultipleTabSetting).max);
 
-  const getShow = computed(() => unref(getMultipleTabSetting).show);
+  const getShowMultipleTab = computed(() => unref(getMultipleTabSetting).show);
+
+  const getShowQuick = computed(() => unref(getMultipleTabSetting).showQuick);
 
   function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
     appStore.commitProjectConfigState({ multiTabsSetting });
@@ -20,6 +22,7 @@ export function useMultipleTabSetting() {
 
     getMultipleTabSetting,
     getMax,
-    getShow,
+    getShowMultipleTab,
+    getShowQuick,
   };
 }

src/hooks/setting/useRootSetting.ts

@@ -3,6 +3,7 @@ import type { ProjectConfig } from '/@/types/config';
 import { computed, unref } from 'vue';
 
 import { appStore } from '/@/store/modules/app';
+import { ContentEnum } from '/@/enums/appEnum';
 
 type RootSetting = Omit<
   ProjectConfig,
@@ -13,6 +14,8 @@ export function useRootSetting() {
 
   const getOpenPageLoading = computed(() => unref(getRootSetting).openPageLoading);
 
+  const getPageLoading = computed(() => appStore.getPageLoading);
+
   const getOpenRouterTransition = computed(() => unref(getRootSetting).openRouterTransition);
 
   const getOpenKeepAlive = computed(() => unref(getRootSetting).openKeepAlive);
@@ -25,12 +28,30 @@ export function useRootSetting() {
 
   const getShowLogo = computed(() => unref(getRootSetting).showLogo);
 
+  const getContentMode = computed(() => unref(getRootSetting).contentMode);
+
+  const getUseOpenBackTop = computed(() => unref(getRootSetting).useOpenBackTop);
+
+  const getShowSettingButton = computed(() => unref(getRootSetting).showSettingButton);
+
   const getUseErrorHandle = computed(() => unref(getRootSetting).useErrorHandle);
 
+  const getShowFooter = computed(() => unref(getRootSetting).showFooter);
+
   const getShowBreadCrumb = computed(() => unref(getRootSetting).showBreadCrumb);
 
   const getShowBreadCrumbIcon = computed(() => unref(getRootSetting).showBreadCrumbIcon);
 
+  const getFullContent = computed(() => unref(getRootSetting).fullContent);
+
+  const getColorWeak = computed(() => unref(getRootSetting).colorWeak);
+
+  const getGrayMode = computed(() => unref(getRootSetting).grayMode);
+
+  const getLayoutContentMode = computed(() =>
+    unref(getRootSetting).contentMode === ContentEnum.FULL ? ContentEnum.FULL : ContentEnum.FIXED
+  );
+
   function setRootSetting(setting: RootSetting) {
     appStore.commitProjectConfigState(setting);
   }
@@ -38,7 +59,12 @@ export function useRootSetting() {
   return {
     setRootSetting,
 
+    getFullContent,
+    getColorWeak,
+    getGrayMode,
     getRootSetting,
+    getLayoutContentMode,
+    getPageLoading,
     getOpenPageLoading,
     getOpenRouterTransition,
     getOpenKeepAlive,
@@ -49,5 +75,9 @@ export function useRootSetting() {
     getUseErrorHandle,
     getShowBreadCrumb,
     getShowBreadCrumbIcon,
+    getUseOpenBackTop,
+    getShowSettingButton,
+    getShowFooter,
+    getContentMode,
   };
 }