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 };

src/layouts/page/index.tsx

@@ -11,6 +11,7 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 
 import { tabStore } from '/@/store/modules/tab';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
 
 interface DefaultContext {
   Component: FunctionalComponent;
@@ -21,12 +22,9 @@ export default defineComponent({
   name: 'PageLayout',
   setup() {
     const { getShowMenu } = useMenuSetting();
-    const {
-      getOpenKeepAlive,
-      getRouterTransition,
-      getOpenRouterTransition,
-      getCanEmbedIFramePage,
-    } = useRootSetting();
+    const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+
+    const { getBasicTransition, getEnableTransition } = useTransitionSetting();
 
     const { getMax } = useMultipleTabSetting();
 
@@ -45,7 +43,7 @@ export default defineComponent({
                 // No longer show animations that are already in the tab
                 const cacheTabs = unref(getCacheTabsRef);
                 const isInCache = cacheTabs.includes(route.name as string);
-                const name = isInCache && route.meta.inTab ? 'fade' : null;
+                const name = isInCache && route.meta.inTab ? 'fade-slide' : null;
 
                 const renderComp = () => <Component key={route.fullPath} />;
 
@@ -57,10 +55,10 @@ export default defineComponent({
                   renderComp()
                 );
 
-                return unref(getOpenRouterTransition) ? (
+                return unref(getEnableTransition) ? (
                   <Transition
                     {...transitionEvent}
-                    name={name || route.meta.transitionName || unref(getRouterTransition)}
+                    name={name || route.meta.transitionName || unref(getBasicTransition)}
                     mode="out-in"
                     appear={true}
                   >

src/layouts/page/useTransition.ts

@@ -1,11 +1,12 @@
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+
 import { appStore } from '/@/store/modules/app';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 
 export function useTransition() {
   function handleAfterEnter() {
-    const { getOpenPageLoading, getOpenRouterTransition } = useRootSetting();
-    if (!getOpenPageLoading.value || !getOpenRouterTransition.value) return;
+    const { getOpenPageLoading, getEnableTransition } = useTransitionSetting();
+    if (!getOpenPageLoading.value || !getEnableTransition.value) return;
     // Close loading after the route switching animation ends
     appStore.setPageLoadingAction(false);
   }