refactor: refactor setting

src/layouts/default/content/index.less

@@ -11,11 +11,15 @@
   }
 
   &__loading {
-    position: fixed;
+    position: absolute;
     z-index: @page-loading-z-index;
 
+    &.fill {
+      background: rgba(240, 242, 245) !important;
+    }
+
     > .basic-loading {
-      margin-bottom: 20%;
+      margin-bottom: 30%;
     }
   }
 }

src/layouts/default/content/index.tsx

@@ -1,23 +1,31 @@
 import './index.less';
 
-import { defineComponent, unref } from 'vue';
+import { defineComponent, unref, computed } from 'vue';
 import { FullLoading } from '/@/components/Loading/index';
 
 import { RouterView } from 'vue-router';
 
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 
 export default defineComponent({
   name: 'LayoutContent',
   setup() {
-    const { getOpenPageLoading, getLayoutContentMode, getPageLoading } = useRootSetting();
+    const { getOpenPageLoading } = useTransitionSetting();
+    const { getShowMultipleTab } = useMultipleTabSetting();
+    const { getLayoutContentMode, getPageLoading } = useRootSetting();
 
+    const getLoadingClass = computed(() => {
+      return [
+        `layout-content__loading`,
+        { fill: unref(getShowMultipleTab), hidden: !unref(getPageLoading) },
+      ];
+    });
     return () => {
       return (
         <div class={['layout-content', unref(getLayoutContentMode)]}>
-          {unref(getOpenPageLoading) && (
-            <FullLoading class={[`layout-content__loading`, { hidden: !unref(getPageLoading) }]} />
-          )}
+          {unref(getOpenPageLoading) && <FullLoading class={unref(getLoadingClass)} />}
           <RouterView />
         </div>
       );

src/layouts/default/multitabs/index.tsx

@@ -24,14 +24,13 @@ export default defineComponent({
   name: 'MultiTabs',
   setup() {
     let isAddAffix = false;
+
     const go = useGo();
+
     const { currentRoute } = useRouter();
     const { activeKeyRef } = useTabs();
 
-    // 当前tab列表
-    const getTabsState = computed(() => {
-      return tabStore.getTabsState;
-    });
+    const getTabsState = computed(() => tabStore.getTabsState);
 
     // If you monitor routing changes, tab switching will be stuck. So setting this method
     watch(
@@ -43,6 +42,7 @@ export default defineComponent({
         }
 
         const lastChangeRoute = unref(tabStore.getLastChangeRouteState);
+
         if (!lastChangeRoute || !userStore.getTokenState) return;
 
         const { path, fullPath } = lastChangeRoute;

src/layouts/default/setting/SettingDrawer.tsx

@@ -17,6 +17,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
 
 import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
 
@@ -177,9 +178,6 @@ export default defineComponent({
   setup(_, { attrs }) {
     const {
       getContentMode,
-      getRouterTransition,
-      getOpenRouterTransition,
-      getOpenPageLoading,
       getShowFooter,
       getShowBreadCrumb,
       getShowBreadCrumbIcon,
@@ -189,6 +187,13 @@ export default defineComponent({
       getGrayMode,
     } = useRootSetting();
 
+    const {
+      getOpenPageLoading,
+      getBasicTransition,
+      getEnableTransition,
+      getOpenNProgress,
+    } = useTransitionSetting();
+
     const {
       getIsHorizontal,
       getShowMenu,
@@ -447,27 +452,34 @@ export default defineComponent({
     function renderTransition() {
       return (
         <>
-          {renderSwitchItem('页面切换loading', {
+          {renderSwitchItem('顶部进度条', {
+            handler: (e) => {
+              baseHandler(HandlerEnum.OPEN_PROGRESS, e);
+            },
+            def: unref(getOpenNProgress),
+          })}
+          {renderSwitchItem('切换loading', {
             handler: (e) => {
               baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e);
             },
             def: unref(getOpenPageLoading),
+            disabled: !unref(getEnableTransition),
           })}
 
           {renderSwitchItem('切换动画', {
             handler: (e) => {
               baseHandler(HandlerEnum.OPEN_ROUTE_TRANSITION, e);
             },
-            def: unref(getOpenRouterTransition),
+            def: unref(getEnableTransition),
           })}
 
-          {renderSelectItem('路由动画', {
+          {renderSelectItem('动画类型', {
             handler: (e) => {
               baseHandler(HandlerEnum.ROUTER_TRANSITION, e);
             },
-            def: unref(getRouterTransition),
+            def: unref(getBasicTransition),
             options: routerTransitionOptions,
-            disabled: !unref(getOpenRouterTransition),
+            disabled: !unref(getEnableTransition),
           })}
         </>
       );

src/layouts/default/setting/enum.ts

@@ -29,9 +29,6 @@ export enum HandlerEnum {
   TABS_SHOW_QUICK,
   TABS_SHOW,
 
-  OPEN_PAGE_LOADING,
-  OPEN_ROUTE_TRANSITION,
-  ROUTER_TRANSITION,
   LOCK_TIME,
   FULL_CONTENT,
   CONTENT_MODE,
@@ -41,6 +38,11 @@ export enum HandlerEnum {
   COLOR_WEAK,
   SHOW_LOGO,
   SHOW_FOOTER,
+
+  ROUTER_TRANSITION,
+  OPEN_PROGRESS,
+  OPEN_PAGE_LOADING,
+  OPEN_ROUTE_TRANSITION,
 }
 
 export const themeOptions = [

src/layouts/default/setting/handler.ts

@@ -66,17 +66,20 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
     case HandlerEnum.MENU_SHOW_SEARCH:
       return { menuSetting: { showSearch: value } };
 
-    // ============root==================
-
+    // ============transition==================
     case HandlerEnum.OPEN_PAGE_LOADING:
       appStore.commitPageLoadingState(false);
-      return { openPageLoading: value };
-
-    case HandlerEnum.OPEN_ROUTE_TRANSITION:
-      return { openRouterTransition: value };
+      return { transitionSetting: { openPageLoading: value } };
 
     case HandlerEnum.ROUTER_TRANSITION:
-      return { routerTransition: value };
+      return { transitionSetting: { basicTransition: value } };
+
+    case HandlerEnum.OPEN_ROUTE_TRANSITION:
+      return { transitionSetting: { enable: value } };
+
+    case HandlerEnum.OPEN_PROGRESS:
+      return { transitionSetting: { openNProgress: value } };
+    // ============root==================
 
     case HandlerEnum.LOCK_TIME:
       return { lockTime: value };