feat: 菜单组件缓存

components.d.ts

@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AppMain: typeof import('./src/layout/components/AppMain.vue')['default']
     Dashboard: typeof import('./src/views/Dashboard/index.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
@@ -26,7 +27,6 @@ declare module 'vue' {
     SidebarItem: typeof import('./src/layout/components/Sidebar/SidebarItem.vue')['default']
     SidebarItemLink: typeof import('./src/layout/components/Sidebar/SidebarItemLink.vue')['default']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
-    Test: typeof import('./src/views/Dashboard/test.vue')['default']
     User: typeof import('./src/views/system/user/index.vue')['default']
   }
 }

src/layout/components/AppMain.vue

@@ -0,0 +1,25 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition name="fade">
+      <keep-alive>
+        <component :is="Component" :key="route.path"></component>
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>
+<script lang="ts" setup>
+import { useRoute } from "vue-router";
+const route = useRoute();
+</script>
+<style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-all duration-500 pos-absolute;
+}
+.fade-enter-from {
+  @apply opacity-0 translate-x-[50px];
+}
+.fade-leave-to {
+  @apply opacity-0 translate-x-[-50px];
+}
+</style>

src/layout/index.vue

@@ -9,7 +9,8 @@
         <navbar></navbar>
       </div>
       <div class="app-main">
-        <router-view></router-view>
+        <!-- <router-view></router-view> -->
+        <app-main></app-main>
       </div>
     </div>
   </div>
@@ -25,7 +26,7 @@
     }
   }
   .main-container {
-    @apply flex flex-col flex-1 h-lvh;
+    @apply flex flex-col flex-1;
   }
   .header {
     @apply h-84px;

src/views/Dashboard/test.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>Hi, test!</h1>
-  </div>
-</template>