perf: perf loading logic

CHANGELOG.zh_CN.md

@@ -11,6 +11,10 @@
 - i18n 支持 vscode `i18n-ally`插件
 - 新增多级路由缓存示例
 
+### ⚡ Performance Improvements
+
+- 页面切换 loading 逻辑修改。对于已经加载过的页面不管有没有关闭,再次打开不会在显示 loading(已经打开过的页面在此打开速度比较快)，刷新后恢复。
+
 ### 🎫 Chores
 
 - 首屏 loading 修改

src/components/Loading/src/index.vue

@@ -76,7 +76,7 @@
       position: absolute;
       top: 0;
       left: 0;
-      z-index: 1;
+      z-index: 300;
     }
   }
 </style>

src/hooks/setting/useMultipleTabSetting.ts

@@ -7,8 +7,6 @@ import { appStore } from '/@/store/modules/app';
 export function useMultipleTabSetting() {
   const getMultipleTabSetting = computed(() => appStore.getProjectConfig.multiTabsSetting);
 
-  const getMax = computed(() => unref(getMultipleTabSetting).max);
-
   const getShowMultipleTab = computed(() => unref(getMultipleTabSetting).show);
 
   const getShowQuick = computed(() => unref(getMultipleTabSetting).showQuick);
@@ -21,7 +19,6 @@ export function useMultipleTabSetting() {
     setMultipleTabSetting,
 
     getMultipleTabSetting,
-    getMax,
     getShowMultipleTab,
     getShowQuick,
   };

src/hooks/setting/useTransitionSetting.ts

@@ -11,8 +11,8 @@ export function useTransitionSetting() {
 
   const getOpenNProgress = computed(() => unref(getTransitionSetting)?.openNProgress);
 
-  const getOpenPageLoading = computed(() => {
-    return unref(getTransitionSetting)?.openPageLoading && unref(getEnableTransition);
+  const getOpenPageLoading = computed((): boolean => {
+    return !!unref(getTransitionSetting)?.openPageLoading;
   });
 
   const getBasicTransition = computed(() => unref(getTransitionSetting)?.basicTransition);

src/hooks/web/usePage.ts

@@ -11,10 +11,7 @@ export type RouteLocationRawEx = Omit<RouteLocationRaw, 'path'> & { path: PageEn
 
 function handleError(e: Error) {
   console.error(e);
-  // 101是为了 大于 打开时候设置的100延时防止闪动
-  setTimeout(() => {
-    appStore.commitPageLoadingState(false);
-  }, 101);
+  appStore.commitPageLoadingState(false);
 }
 
 // page switch

src/layouts/default/content/index.less

@@ -12,10 +12,7 @@
 
   &__loading {
     position: absolute;
+    top: 200px;
     z-index: @page-loading-z-index;
-
-    > .basic-loading {
-      margin-bottom: 15%;
-    }
   }
 }

src/layouts/default/content/index.tsx

@@ -5,7 +5,7 @@ import { Loading } from '/@/components/Loading';
 
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-import PageLayout from '/@/layouts/page/index.vue';
+import PageLayout from '/@/layouts/page/index';
 export default defineComponent({
   name: 'LayoutContent',
   setup() {
@@ -16,7 +16,12 @@ export default defineComponent({
       return (
         <div class={['layout-content', unref(getLayoutContentMode)]}>
           {unref(getOpenPageLoading) && (
-            <Loading loading={unref(getPageLoading)} absolute class="layout-content__loading" />
+            <Loading
+              loading={unref(getPageLoading)}
+              background="rgba(240, 242, 245, 0.6)"
+              absolute
+              class="layout-content__loading"
+            />
           )}
           <PageLayout />
         </div>

src/layouts/default/setting/SettingDrawer.tsx

@@ -465,7 +465,6 @@ export default defineComponent({
               baseHandler(HandlerEnum.OPEN_PAGE_LOADING, e);
             },
             def: unref(getOpenPageLoading),
-            disabled: !unref(getEnableTransition),
           })}
 
           {renderSwitchItem(t('layout.setting.switchAnimation'), {

src/layouts/page/ParentView.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Description: The reason is that tsx will report warnings under multi-level nesting.
+-->
+<template>
+  <div>
+    <router-view>
+      <template v-slot="{ Component, route }">
+        <keep-alive v-if="openCache" :include="getCaches">
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+        <component v-else :is="Component" :key="route.fullPath" />
+      </template>
+    </router-view>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, unref } from 'vue';
+
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import { useCache } from './useCache';
+
+  export default defineComponent({
+    setup() {
+      const { getCaches } = useCache(false);
+
+      const { getShowMultipleTab } = useMultipleTabSetting();
+
+      const { getOpenKeepAlive } = useRootSetting();
+
+      const { getBasicTransition, getEnableTransition } = useTransitionSetting();
+
+      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
+
+      return {
+        getCaches,
+        getBasicTransition,
+        openCache,
+        getEnableTransition,
+      };
+    },
+  });
+</script>

src/layouts/page/index.tsx

@@ -0,0 +1,72 @@
+import type { FunctionalComponent } from 'vue';
+
+import { computed, defineComponent, unref, Transition, KeepAlive } from 'vue';
+import { RouterView, RouteLocation } from 'vue-router';
+
+import FrameLayout from '/@/layouts/iframe/index.vue';
+
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+
+import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+import { useCache } from './useCache';
+import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
+
+interface DefaultContext {
+  Component: FunctionalComponent;
+  route: RouteLocation;
+}
+
+export default defineComponent({
+  name: 'PageLayout',
+  setup() {
+    const { getCaches } = useCache(true);
+    const { getShowMultipleTab } = useMultipleTabSetting();
+
+    const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+
+    const { getBasicTransition, getEnableTransition } = useTransitionSetting();
+
+    const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
+
+    return () => {
+      return (
+        <>
+          <RouterView>
+            {{
+              default: ({ Component, route }: DefaultContext) => {
+                // No longer show animations that are already in the tab
+                const cacheTabs = unref(getCaches);
+                const isInCache = cacheTabs.includes(route.name as string);
+                const name =
+                  isInCache && route.meta.loaded && unref(getEnableTransition)
+                    ? 'fade-slide'
+                    : null;
+
+                const renderComp = () => <Component key={route.fullPath} />;
+
+                const PageContent = unref(openCache) ? (
+                  <KeepAlive>{renderComp()}</KeepAlive>
+                ) : (
+                  renderComp()
+                );
+
+                return unref(getEnableTransition) ? (
+                  <Transition
+                    name={name || route.meta.transitionName || unref(getBasicTransition)}
+                    mode="out-in"
+                    appear={true}
+                  >
+                    {() => PageContent}
+                  </Transition>
+                ) : (
+                  PageContent
+                );
+              },
+            }}
+          </RouterView>
+          {unref(getCanEmbedIFramePage) && <FrameLayout />}
+        </>
+      );
+    };
+  },
+});

src/layouts/parent/useCache.ts → src/layouts/page/useCache.ts

@@ -10,9 +10,8 @@ export function useCache(isPage: boolean) {
   const name = ref('');
   const { currentRoute } = useRouter();
 
-  tryTsxEmit((instance: any) => {
-    const routeName = instance.ctx.$options.name;
-
+  tryTsxEmit((instance) => {
+    const routeName = instance.type.name;
     if (routeName && ![ParentLayoutName].includes(routeName)) {
       name.value = routeName;
     } else {
@@ -22,6 +21,7 @@ export function useCache(isPage: boolean) {
       name.value = matched[len - 2].name as string;
     }
   });
+
   const { getOpenKeepAlive } = useRootSetting();
 
   const getCaches = computed((): string[] => {

src/router/constant.ts

@@ -1,5 +1,5 @@
 import type { AppRouteRecordRaw } from '/@/router/types';
-import ParentLayout from '/@/layouts/parent/index.vue';
+import ParentLayout from '/@/layouts/page/ParentView.vue';
 
 const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception');
 
@@ -8,11 +8,6 @@ const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception');
  */
 export const LAYOUT = () => import('/@/layouts/default/index');
 
-/**
- * @description: page-layout
- */
-export const PAGE_LAYOUT_COMPONENT = () => import('/@/layouts/page/index.vue');
-
 /**
  * @description: page-layout
  */