fix: pageLoading not working

src/layouts/default/LayoutContent.tsx

@@ -16,7 +16,6 @@ export default defineComponent({
     return () => {
       const { contentMode, openPageLoading } = unref(getProjectConfigRef);
       const { getPageLoading } = appStore;
-
       const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
       return (
         <div class={[`default-layout__main`]}>

src/layouts/page/index.tsx

@@ -12,9 +12,16 @@ import { appStore } from '/@/store/modules/app';
 export default defineComponent({
   name: 'PageLayout',
   setup() {
-    const getProjectConfigRef = computed(() => {
-      return appStore.getProjectConfig;
+    const getProjectConfigRef = computed(() => appStore.getProjectConfig);
+    const openCacheRef = computed(() => {
+      const {
+        openKeepAlive,
+        multiTabsSetting: { show },
+      } = unref(getProjectConfigRef);
+      return openKeepAlive && show;
     });
+    const getCacheTabsRef = computed(() => toRaw(tabStore.getKeepAliveTabsState) as string[]);
+
     const { openPageLoading } = unref(getProjectConfigRef);
 
     let on = {};
@@ -27,21 +34,20 @@ export default defineComponent({
       const {
         routerTransition,
         openRouterTransition,
-        openKeepAlive,
-        multiTabsSetting: { show, max },
+        multiTabsSetting: { max },
       } = unref(getProjectConfigRef);
 
-      const openCache = openKeepAlive && show;
-      const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
       return (
         <div>
           <RouterView>
             {{
               default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
                 // No longer show animations that are already in the tab
-                const name = route.meta.inTab ? 'fade' : null;
+                const cacheTabs = unref(getCacheTabsRef);
+                const isInCache = cacheTabs.includes(route.name as string);
+                const name = isInCache && route.meta.inTab ? 'fade' : null;
 
-                const Content = openCache ? (
+                const Content = unref(openCacheRef) ? (
                   <KeepAlive max={max} include={cacheTabs}>
                     <Component key={route.fullPath} />
                   </KeepAlive>

src/layouts/page/useTransition.ts

@@ -3,6 +3,7 @@ import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 export function useTransition() {
   function handleAfterEnter() {
     const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;
+
     if (!openRouterTransition || !openPageLoading) return;
     // Close loading after the route switching animation ends
     appStore.setPageLoadingAction(false);