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

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

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

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

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

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

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

src/store/modules/permission.store.ts

@@ -15,6 +15,8 @@ export const usePermissionStore = defineStore("permission", () => {
   // 动态路由是否已生成
   const isDynamicRoutesGenerated = ref(false);
 
+  const allCacheRoutes = ref<string[][]>([]);
+
   /**
    * 生成动态路由
    */
@@ -24,6 +26,8 @@ export const usePermissionStore = defineStore("permission", () => {
       const dynamicRoutes = parseDynamicRoutes(data);
 
       routes.value = [...constantRoutes, ...dynamicRoutes];
+
+      setAllCacheRoutes(routes.value);
       isDynamicRoutesGenerated.value = true;
 
       return dynamicRoutes;
@@ -60,10 +64,33 @@ export const usePermissionStore = defineStore("permission", () => {
     isDynamicRoutesGenerated.value = false;
   };
 
+  /**
+   * 获取所有的缓存路由
+   * @param userRoutes 用户路由配置
+   */
+  const setAllCacheRoutes = (userRoutes: RouteRecordRaw[]) => {
+    if (!userRoutes?.length) {
+      allCacheRoutes.value = [];
+
+      return;
+    }
+
+    const result: string[][] = [];
+
+    userRoutes.forEach((route) => {
+      if (route.children?.length) {
+        traverseRoutes(route.children, [], result);
+      }
+    });
+
+    allCacheRoutes.value = result;
+  };
+
   return {
     routes,
     mixLayoutSideMenus,
     isDynamicRoutesGenerated,
+    allCacheRoutes,
     generateRoutes,
     setMixLayoutSideMenus,
     resetRouter,
@@ -100,6 +127,28 @@ const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
   return parsedRoutes;
 };
 
+/**
+ * 遍历路由树收集缓存路由
+ * @param nodes 路由节点
+ * @param path 当前路径
+ * @param result 结果数组
+ */
+const traverseRoutes = (nodes: RouteRecordRaw[], path: string[], result: string[][]) => {
+  nodes.forEach((node) => {
+    const newPath: string[] = node.name ? [...path, String(node.name)] : [...path];
+
+    // 叶子节点且需要缓存
+    if (!node.children?.length && node.meta?.keepAlive) {
+      result.push(newPath);
+    }
+
+    // 递归处理子节点
+    if (node.children?.length) {
+      traverseRoutes(node.children, newPath, result);
+    }
+  });
+};
+
 /**
  * 导出此hook函数用于在非组件环境(如其他store、工具函数等)中获取权限store实例
  *

src/store/modules/tags-view.store.ts

@@ -12,7 +12,7 @@ export const useTagsViewStore = defineStore("tagsView", () => {
     if (view.path.startsWith("/redirect")) {
       return;
     }
-    if (visitedViews.value.some((v) => v.name === view.name)) {
+    if (visitedViews.value.some((v) => v.path === view.path)) {
       return;
     }
     // 如果视图是固定的（affix），则在已访问的视图列表的开头添加
@@ -232,6 +232,37 @@ export const useTagsViewStore = defineStore("tagsView", () => {
     }
   }
 
+  const setCacheRoutes = (names: string[], allCacheRoutes: string[][]) => {
+    if (!names?.length) {
+      cachedViews.value = [];
+
+      return;
+    }
+
+    cachedViews.value = findAndMergeRouteArrays(allCacheRoutes, names);
+  };
+
+  /**
+   * 查找并合并路由数组
+   * @param data 所有缓存路由数据
+   * @param elements 目标元素
+   * @returns 合并后的路由数组
+   */
+  const findAndMergeRouteArrays = (data: string[][], elements: string[]): string[] => {
+    const foundArrays = elements
+      .map((element) => data.find((arr) => arr.includes(element)))
+      .filter(Boolean) as string[][];
+
+    // 使用Set去重并合并
+    const mergedSet = new Set<string>();
+
+    foundArrays.forEach((arr) => {
+      arr.forEach((item) => mergedSet.add(item));
+    });
+
+    return Array.from(mergedSet);
+  };
+
   return {
     visitedViews,
     cachedViews,
@@ -253,5 +284,6 @@ export const useTagsViewStore = defineStore("tagsView", () => {
     closeCurrentView,
     isActive,
     toLastView,
+    setCacheRoutes,
   };
 });