fix: 修复keepAlive页面transition不生效问题, close #93

src/App.vue

@@ -16,9 +16,11 @@
   >
     <router-view v-if="Layout" v-slot="{ Component, route: curRoute }">
       <component :is="Layout">
+        <transition name="fade-slide" mode="out-in" appear>
           <KeepAlive :include="keepAliveNames">
             <component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
           </KeepAlive>
+        </transition>
       </component>
 
       <LayoutSetting v-if="layoutSettingVisible" class="fixed right-12 top-1/2 z-999" />

src/components/common/AppPage.vue

@@ -8,11 +8,9 @@
 
 <template>
   <main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212">
-    <transition name="fade-slide" mode="out-in" appear>
     <main :class="{ 'flex-1': full }" class="m-12">
       <slot />
     </main>
-    </transition>
     <slot v-if="$slots.footer" name="footer" />
     <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
     <n-back-top :bottom="20" />

src/components/common/CommonPage.vue

@@ -7,8 +7,7 @@
  --------------------------------->
 
 <template>
-  <main class="h-full flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
-    <div class="h-full flex-col">
+  <main class="h-full flex-col flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
     <AppCard
       v-if="showHeader"
       class="sticky top-0 z-1 min-h-60 flex items-center justify-between px-24"
@@ -36,20 +35,15 @@
         <slot name="action" />
       </template>
     </AppCard>
-      <transition name="fade-slide" mode="out-in" appear>
     <AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered>
       <slot />
     </AppCard>
-      </transition>
-    </div>
-  </main>
 
-  <footer class="bg-#f5f6fb dark:bg-#121212">
     <slot v-if="$slots.footer" name="footer" />
-    <AppCard v-else-if="showFooter" class="py-12">
+    <AppCard v-else-if="showFooter" class="flex-shrink-0 py-12">
       <TheFooter />
     </AppCard>
-  </footer>
+  </main>
 </template>
 
 <script setup>