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

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

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

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

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

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

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

src/views/demo/detail.vue

@@ -0,0 +1,17 @@
+<template>
+  <div p-5 flex flex-col gap="20px">
+    <div>params: {{ route.params }}</div>
+    <div>query: {{ route.query }}</div>
+    <el-input v-model="value" placeholder="缓存测试" />
+  </div>
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: "DemoDetail",
+});
+
+const route = useRoute();
+console.log(route);
+
+const value = ref("");
+</script>

src/views/demo/multi-level/children/children/detail.ts

@@ -0,0 +1,34 @@
+import router from "@/router";
+import { ElButton } from "element-plus";
+
+export default defineComponent({
+  name: "ToDetail",
+  setup() {
+    // 跳转详情
+    const navigateToDetail = async (id: number) => {
+      await router.push({
+        path: "/detail/" + id,
+        query: { mes: `msg${id}` },
+      });
+    };
+    return () =>
+      h("div", null, [
+        h(
+          ElButton,
+          {
+            type: "primary",
+            onClick: () => navigateToDetail(1),
+          },
+          "跳转详情1"
+        ),
+        h(
+          ElButton,
+          {
+            type: "success",
+            onClick: () => navigateToDetail(2),
+          },
+          "跳转详情2"
+        ),
+      ]);
+  },
+});

src/views/demo/multi-level/children/children/level3-1.vue

@@ -1,5 +1,14 @@
 <template>
-  <div style="padding: 30px">
+  <div flex flex-col gap-20px>
     <el-alert :closable="false" title="菜单三级-1" type="error" />
+    <el-input v-model="value" placeholder="缓存测试" />
+    <ToDetail />
   </div>
 </template>
+<script lang="ts" setup>
+import ToDetail from "./detail";
+
+defineOptions({ name: "MultiLevel31" });
+
+const value = ref("");
+</script>

src/views/demo/multi-level/children/children/level3-2.vue

@@ -1,5 +1,14 @@
 <template>
-  <div style="padding: 30px">
+  <div flex flex-col gap-20px>
     <el-alert :closable="false" title="菜单三级-2" type="warning" />
+    <el-input v-model="value" placeholder="缓存测试" />
+    <ToDetail />
   </div>
 </template>
+
+<script lang="ts" setup>
+import ToDetail from "./detail";
+
+defineOptions({ name: "MultiLevel32" });
+const value = ref("");
+</script>

src/views/demo/multi-level/children/level2.vue

@@ -1,7 +1,10 @@
 <template>
-  <div style="padding: 30px">
-    <el-alert :closable="false" title="菜单二级" type="success">
-      <router-view />
-    </el-alert>
+  <div flex flex-col gap-20px>
+    <el-alert :closable="false" title="菜单二级" type="success" />
+    <KeepCache />
   </div>
 </template>
+<script setup lang="ts">
+import KeepCache from "@/components/KeepCache/index.vue";
+defineOptions({ name: "MultiLevel2" });
+</script>

src/views/demo/multi-level/level1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 30px">
+  <div p-30px>
     <el-link
       href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/multi-level/level1.vue"
       type="primary"
@@ -9,8 +9,13 @@
       示例源码 请点击>>>>
     </el-link>
 
-    <el-alert :closable="false" title="菜单一级">
-      <router-view />
-    </el-alert>
+    <div flex flex-col gap-20px>
+      <el-alert :closable="false" title="菜单一级" />
+      <KeepCache />
+    </div>
   </div>
 </template>
+<script setup lang="ts">
+import KeepCache from "@/components/KeepCache/index.vue";
+defineOptions({ name: "MultiLevel1" });
+</script>