perf: perf loading logic

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/page/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <ParentLayout :isPage="true" />
-  <FrameLayout v-if="getCanEmbedIFramePage" />
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  import FrameLayout from '/@/layouts/iframe/index.vue';
-
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-
-  import ParentLayout from '/@/layouts/parent/index.vue';
-  export default defineComponent({
-    components: { ParentLayout, FrameLayout },
-    setup() {
-      const { getCanEmbedIFramePage } = useRootSetting();
-
-      return { getCanEmbedIFramePage };
-    },
-  });
-</script>

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/layouts/parent/index.vue

@@ -1,73 +0,0 @@
-<!--
- * @Description: The reason is that tsx will report warnings under multi-level nesting.
--->
-<template>
-  <div>
-    <router-view>
-      <template #default="{ Component, route }">
-        <transition v-bind="transitionEvent" :name="getName(route)" mode="out-in" appear>
-          <keep-alive v-if="openCache" :include="getCaches">
-            <component :max="getMax" :is="Component" :key="route.fullPath" />
-          </keep-alive>
-          <component v-else :max="getMax" :is="Component" :key="route.fullPath" />
-        </transition>
-      </template>
-    </router-view>
-  </div>
-</template>
-<script lang="ts">
-  import { computed, defineComponent, unref } from 'vue';
-  import { RouteLocationNormalized } from 'vue-router';
-
-  import { useTransition } from './useTransition';
-  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-  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({
-    props: {
-      isPage: {
-        type: Boolean,
-      },
-    },
-    setup(props) {
-      const { getCaches } = useCache(props.isPage);
-
-      const { getShowMenu } = useMenuSetting();
-
-      const { getOpenKeepAlive } = useRootSetting();
-
-      const { getBasicTransition, getEnableTransition } = useTransitionSetting();
-
-      const { getMax } = useMultipleTabSetting();
-
-      const transitionEvent = useTransition();
-
-      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMenu));
-
-      function getName(route: RouteLocationNormalized) {
-        if (!unref(getEnableTransition)) {
-          return null;
-        }
-        const cacheTabs = unref(getCaches);
-        const isInCache = cacheTabs.includes(route.name as string);
-        const name = isInCache && route.meta.inTab ? 'fade-slide' : null;
-
-        return name || route.meta.transitionName || unref(getBasicTransition);
-      }
-
-      return {
-        getCaches,
-        getMax,
-        transitionEvent,
-        getBasicTransition,
-        getName,
-        openCache,
-        getEnableTransition,
-      };
-    },
-  });
-</script>

src/layouts/parent/useTransition.ts

@@ -1,22 +0,0 @@
-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, getEnableTransition } = useTransitionSetting();
-    if (!getOpenPageLoading.value || !getEnableTransition.value) return;
-    // Close loading after the route switching animation ends
-    appStore.setPageLoadingAction(false);
-  }
-
-  tryOnUnmounted(() => {
-    handleAfterEnter();
-    stop();
-  });
-
-  return {
-    onAfterEnter: handleAfterEnter,
-  };
-}