fix: pageLoading not working

vben
1 parent 577bf788
Showing 6 changed files with 19 additions and 13 deletions
src/design/var/index.less
src/layouts/default/LayoutContent.tsx
src/layouts/page/index.tsx
src/layouts/page/useTransition.ts
src/router/guard/index.ts
src/router/guard/pageLoadingGuard.ts
@@ -15,7 +15,5 @@
 @side-drag-z-index: 200;
 @page-loading-z-index: 10000;
  
-// app menu
-
 // left-menu
-@app-menu-item-height: 42px;
+@app-menu-item-height: 46px;
@@ -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`]}>
@@ -12,9 +12,16 @@ import { appStore } from &#39;/@/store/modules/app&#39;;
 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>
@@ -3,6 +3,7 @@ import { tryOnUnmounted } from &#39;/@/utils/helper/vueHelper&#39;;
 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);
@@ -21,6 +21,8 @@ export function createGuard(router: Router) {
   if (removeAllHttpPending) {
     axiosCanceler = new AxiosCanceler();
   }
+
+  createPageLoadingGuard(router);
   router.beforeEach(async (to) => {
     // Determine whether the tab has been opened
     const isOpen = getIsOpenTab(to.fullPath);
@@ -59,5 +61,4 @@ export function createGuard(router: Router) {
  
   openNProgress && createProgressGuard(router);
   createPermissionGuard(router);
-  createPageLoadingGuard(router);
 }
@@ -20,6 +20,7 @@ export function createPageLoadingGuard(router: Router) {
       appStore.commitPageLoadingState(true);
       return true;
     }
+
     if (show && openKeepAlive && !isFirstLoad) {
       const tabList = tabStore.getTabsState;