feat: ✨ (keep-alive)优化页面缓存机制

- 重构 AppMain 组件，引入 KeepCache 组件实现统一缓存

- 新增 DemoDetail 组件作为缓存测试页面

- 更新 TagsView 组件，优化缓存路由逻辑

- 修改 permission.store.ts，增加 allCacheRoutes 状态管理

- 更新 tags-view.store.ts，实现缓存路由的动态设置

- 调整多级菜单示例，支持缓存功能

src/layouts/components/AppMain/index.vue

@@ -1,23 +1,14 @@
 <template>
   <section class="app-main" :style="{ height: appMainHeight }">
-    <router-view>
-      <template #default="{ Component, route }">
-        <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
-          <keep-alive :include="cachedViews">
-            <component :is="Component" :key="route.path" />
-          </keep-alive>
-        </transition>
-      </template>
-    </router-view>
+    <KeepCache />
   </section>
 </template>
 
 <script setup lang="ts">
-import { useSettingsStore, useTagsViewStore } from "@/store";
+import { useSettingsStore } from "@/store";
 import variables from "@/styles/variables.module.scss";
+import KeepCache from "@/components/KeepCache/index.vue";
 
-// 缓存页面集合
-const cachedViews = computed(() => useTagsViewStore().cachedViews);
 const appMainHeight = computed(() => {
   if (useSettingsStore().showTagsView) {
     return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;

src/layouts/components/TagsView/index.vue

@@ -77,7 +77,17 @@ const permissionStore = usePermissionStore();
 const tagsViewStore = useTagsViewStore();
 const settingsStore = useSettingsStore();
 
-const { visitedViews } = storeToRefs(tagsViewStore);
+// const { visitedViews } = storeToRefs(tagsViewStore);
+
+const visitedViews = ref<TagView[]>([]);
+
+watchEffect(() => {
+  visitedViews.value = tagsViewStore.visitedViews;
+  const names = visitedViews.value.map((item) => item.name).filter(Boolean);
+
+  tagsViewStore.setCacheRoutes(names, permissionStore.allCacheRoutes);
+});
+
 const layout = computed(() => settingsStore.layout);
 
 // 当前选中的标签