From 3359b0f2b5f132647d276919fe5888b054d44d92 Mon Sep 17 00:00:00 2001
From: zclzone <zclzone@outlook.com>
Date: Tue, 3 Sep 2024 09:02:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DkeepAlive=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2transition=E4=B8=8D=E7=94=9F=E6=95=88=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98,=20close=20#93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |  8 ++--
 src/components/common/AppPage.vue    |  8 ++--
 src/components/common/CommonPage.vue | 72 +++++++++++++---------------
 3 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ccad917..77008a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,9 +16,11 @@
   >
     <router-view v-if="Layout" v-slot="{ Component, route: curRoute }">
       <component :is="Layout">
-        <KeepAlive :include="keepAliveNames">
-          <component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
-        </KeepAlive>
+        <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" />
diff --git a/src/components/common/AppPage.vue b/src/components/common/AppPage.vue
index 31881b8..10b959a 100644
--- a/src/components/common/AppPage.vue
+++ b/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>
+    <main :class="{ 'flex-1': full }" class="m-12">
+      <slot />
+    </main>
     <slot v-if="$slots.footer" name="footer" />
     <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
     <n-back-top :bottom="20" />
diff --git a/src/components/common/CommonPage.vue b/src/components/common/CommonPage.vue
index 1e3c423..1099a8d 100644
--- a/src/components/common/CommonPage.vue
+++ b/src/components/common/CommonPage.vue
@@ -7,49 +7,43 @@
  --------------------------------->
 
 <template>
-  <main class="h-full flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
-    <div class="h-full flex-col">
-      <AppCard
-        v-if="showHeader"
-        class="sticky top-0 z-1 min-h-60 flex items-center justify-between px-24"
-        border-b="1px solid light_border dark:dark_border"
-      >
-        <slot v-if="$slots.header" name="header" />
-        <template v-else>
-          <div class="flex items-center">
-            <slot v-if="$slots['title-prefix']" name="title-prefix" />
-            <template v-else-if="back">
-              <div
-                class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
-                @click="router.back()"
-              >
-                <i class="i-material-symbols:arrow-left-alt" />
-                <span class="ml-4">返回</span>
-              </div>
-            </template>
-            <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary" />
-            <h2 class="font-normal">
-              {{ title ?? route.meta?.title }}
-            </h2>
-            <slot name="title-suffix" />
-          </div>
-          <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>
+  <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"
+      border-b="1px solid light_border dark:dark_border"
+    >
+      <slot v-if="$slots.header" name="header" />
+      <template v-else>
+        <div class="flex items-center">
+          <slot v-if="$slots['title-prefix']" name="title-prefix" />
+          <template v-else-if="back">
+            <div
+              class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
+              @click="router.back()"
+            >
+              <i class="i-material-symbols:arrow-left-alt" />
+              <span class="ml-4">返回</span>
+            </div>
+          </template>
+          <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary" />
+          <h2 class="font-normal">
+            {{ title ?? route.meta?.title }}
+          </h2>
+          <slot name="title-suffix" />
+        </div>
+        <slot name="action" />
+      </template>
+    </AppCard>
+    <AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered>
+      <slot />
+    </AppCard>
 
-  <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>