From 66f37cb31d4c49d359b8481443fe953351cc7ddc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Fri, 23 Feb 2024 10:37:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(AppMain):=20:recycle:=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=A1=B5=E9=9D=A2=E5=88=87=E6=8D=A2=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?,=20CSS=20=E7=B2=BE=E7=AE=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain/index.vue | 52 ++++++++++---------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/layout/components/AppMain/index.vue b/src/layout/components/AppMain/index.vue
index f9770df..e2bb5e4 100644
--- a/src/layout/components/AppMain/index.vue
+++ b/src/layout/components/AppMain/index.vue
@@ -2,7 +2,10 @@
   <section class="app-main">
     <router-view>
       <template #default="{ Component, route }">
-        <transition mode="out-in">
+        <transition
+          enter-active-class="animate__animated animate__slideInLeft"
+          mode="out-in"
+        >
           <keep-alive :include="cachedViews">
             <component :is="Component" :key="route.path" />
           </keep-alive>
@@ -14,9 +17,8 @@
 
 <script setup lang="ts">
 import { useTagsViewStore } from "@/store";
-const tagsViewStore = useTagsViewStore();
 
-const cachedViews = computed(() => tagsViewStore.cachedViews); // 缓存页面集合
+const cachedViews = computed(() => useTagsViewStore().cachedViews); // 缓存页面集合
 </script>
 
 <style lang="scss" scoped>
@@ -34,54 +36,40 @@ const cachedViews = computed(() => tagsViewStore.cachedViews); // 缓存页面
 }
 
 .hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
+  .app-main,
+  .fixed-header + .app-main {
     min-height: calc(100vh - $navbar-height - $tags-view-height);
   }
 
   .fixed-header + .app-main {
-    min-height: 100vh;
     padding-top: $navbar-height + $tags-view-height;
   }
 }
 
+.layout-mix,
+.layout-top {
+  .fixed-header + .app-main {
+    padding-top: 0;
+  }
+}
+
 .layout-mix {
   .app-main {
     height: calc(100vh - $navbar-height);
-    min-height: calc(100vh - $navbar-height);
     padding-top: 0;
     overflow-y: auto;
   }
 
-  .fixed-header + .app-main {
-    min-height: calc(100vh - $navbar-height);
-    padding-top: 0;
-  }
-
-  .hasTagsView {
-    .app-main {
-      height: calc(100vh - $navbar-height - $tags-view-height);
-      min-height: calc(100vh - $navbar-height - $tags-view-height);
-    }
-
-    .fixed-header + .app-main {
-      min-height: calc(100vh - $navbar-height);
-      padding-top: $tags-view-height;
-    }
+  .hasTagsView .app-main,
+  .hasTagsView .fixed-header + .app-main {
+    height: calc(100vh - $navbar-height - $tags-view-height);
+    padding-top: $tags-view-height;
   }
 }
 
 .layout-top {
-  .fixed-header + .app-main {
-    min-height: calc(100vh - $navbar-height);
-    padding-top: 0;
-  }
-
-  .hasTagsView {
-    .fixed-header + .app-main {
-      min-height: calc(100vh - $navbar-height);
-      padding-top: $tags-view-height;
-    }
+  .hasTagsView .fixed-header + .app-main {
+    padding-top: $tags-view-height;
   }
 }
 </style>