feat: 新增-用户-用户列表，查询条件添加缓存

src/layouts/components/Main.vue

@@ -10,7 +10,7 @@
     <router-view v-slot="{ Component, route }">
       <transition appear name="fade-transform" mode="out-in">
         <keep-alive :include="keepAliveName">
-          <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
+          <component :is="createComponentWrapper(Component, route)" v-if="isRouterShow" :key="route.fullPath" />
         </keep-alive>
       </transition>
     </router-view>
@@ -39,6 +39,19 @@ const isRouterShow = ref(true);
 const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
 provide('refresh', refreshCurrentPage);
 
+// 解决详情页 keep-alive 问题
+const wrapperMap = new Map();
+function createComponentWrapper(component, route) {
+  if (!component) return;
+  const wrapperName = route.fullPath;
+  let wrapper = wrapperMap.get(wrapperName);
+  if (!wrapper) {
+    wrapper = { name: wrapperName, render: () => h(component) };
+    wrapperMap.set(wrapperName, wrapper);
+  }
+  return h(wrapper);
+}
+
 // 监听当前页面是否最大化，动态添加 class
 watch(
   () => maximize.value,

src/layouts/components/Tabs.vue

@@ -101,10 +101,10 @@ watch(
       title: route.meta.title as string,
       path: route.fullPath,
       name: route.name as string,
-      close: !route.meta.isAffix
+      close: !route.meta.isAffix,
+      isKeepAlive: !!route.meta?.isKeepAlive
     };
     tabStore.addTabs(tabsParams);
-    route.meta.isKeepAlive && keepAliveStore.addKeepAliveName(route.name as string);
   },
   { immediate: true }
 );

src/pages/user/friends.vue

@@ -1,7 +1,6 @@
 <template>
   <bd-page class="flex-col">
     <!-- 布局 -->
-
     <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
       <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
         <div class="bd-title-left">
@@ -70,9 +69,10 @@
 meta:
   title: 好友列表
   isAffix: false
+  isKeepAlive: true
 </route>
 
-<script lang="tsx" setup>
+<script lang="tsx" name="UserFriends" setup>
 import { useRoute, useRouter } from 'vue-router';
 import { ElButton, ElSpace, ElAvatar } from 'element-plus';
 import { BU_DOU_CONFIG } from '@/config';

src/stores/interface/index.ts

@@ -36,6 +36,7 @@ export interface TabsMenuProps {
   path: string;
   name: string;
   close: boolean;
+  isKeepAlive: boolean;
 }
 
 /* TabsState */

src/stores/modules/tabs.ts

@@ -3,6 +3,9 @@ import { defineStore } from 'pinia';
 import { TabsState, TabsMenuProps } from '@/stores/interface';
 import piniaPersistConfig from '@/utils/piniaPersist';
 
+import { useKeepAliveStore } from './keepAlive';
+const keepAliveStore = useKeepAliveStore();
+
 export const useTabsStore = defineStore({
   id: 'budou-tabs',
   state: (): TabsState => ({
@@ -14,6 +17,10 @@ export const useTabsStore = defineStore({
       if (this.tabsMenuList.every(item => item.path !== tabItem.path)) {
         this.tabsMenuList.push(tabItem);
       }
+
+      if (!keepAliveStore.keepAliveName.includes(tabItem.name) && tabItem.isKeepAlive) {
+        await keepAliveStore.addKeepAliveName(tabItem.path);
+      }
     },
     // Remove Tabs
     async removeTabs(tabPath: string, isCurrent = true) {
@@ -33,6 +40,9 @@ export const useTabsStore = defineStore({
       this.tabsMenuList = this.tabsMenuList.filter(item => {
         return item.path === tabsMenuValue || !item.close;
       });
+
+      const KeepAliveList = this.tabsMenuList.filter(item => item.isKeepAlive);
+      await keepAliveStore.setKeepAliveName(KeepAliveList.map(item => item.path));
     },
     // Set Tabs
     async setTabs(tabsMenuList: TabsMenuProps[]) {