From ff0e1dcd27295a9cd2eb99a828c9f367aee583e9 Mon Sep 17 00:00:00 2001
From: liuyun <liuyun@192.168.1.39>
Date: Sun, 11 Oct 2026 22:13:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E5=A4=9A=E9=A1=B5=E7=AD=BE=20k?=
 =?UTF-8?q?eep-alive=EF=BC=88=E9=BB=98=E8=AE=A4=E7=BC=93=E5=AD=98=EF=BC=8C?=
 =?UTF-8?q?meta.keepAlive:false=20=E5=8F=AF=E5=85=B3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 11 个菜单页面补 defineOptions name（缓存标识）
- tabs store 加 keepAlive 字段 + pathToName 辅助
- layout 用 keep-alive 包裹 router-view，按打开且未关闭缓存的页签缓存

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 components.d.ts                       |  2 ++
 src/layouts/default.vue               | 13 ++++++++++---
 src/pages/index.vue                   |  2 ++
 src/pages/monitor/audit/index.vue     |  2 ++
 src/pages/monitor/login-log/index.vue |  2 ++
 src/pages/monitor/session/index.vue   |  2 ++
 src/pages/system/config/index.vue     |  2 ++
 src/pages/system/dict/index.vue       |  2 ++
 src/pages/system/org/index.vue        |  2 ++
 src/pages/system/resource/index.vue   |  2 ++
 src/pages/system/role/index.vue       |  2 ++
 src/pages/system/tenant/index.vue     |  2 ++
 src/pages/system/user/index.vue       |  2 ++
 src/stores/modules/tabs.ts            |  9 ++++++++-
 14 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 3b15375..316f41e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -38,6 +38,7 @@ declare module 'vue' {
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElResult: typeof import('element-plus/es')['ElResult']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
@@ -98,6 +99,7 @@ declare global {
   const ElPagination: typeof import('element-plus/es')['ElPagination']
   const ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
   const ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+  const ElResult: typeof import('element-plus/es')['ElResult']
   const ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
   const ElSelect: typeof import('element-plus/es')['ElSelect']
   const ElSlider: typeof import('element-plus/es')['ElSlider']
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 5553c6d..08dee7e 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -57,7 +57,11 @@
           @close-all="handleCloseAll"
         />
         <div class="app-main">
-          <router-view />
+          <router-view v-slot="{ Component, route }">
+            <keep-alive :include="cachedNames">
+              <component :is="Component" :key="route.path" />
+            </keep-alive>
+          </router-view>
         </div>
         <ty-footer :fixed="app.footerFixed" />
       </main>
@@ -72,7 +76,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { useAppStore } from '@/stores/modules/app'
-import { HOME_PATH, useTabsStore } from '@/stores/modules/tabs'
+import { HOME_PATH, pathToName, useTabsStore } from '@/stores/modules/tabs'
 import { useAuthStore } from '@/stores/modules/auth'
 import { useMenuStore } from '@/stores/modules/menu'
 import { useDictStore } from '@/stores/modules/dict'
@@ -110,6 +114,9 @@ onMounted(() => {
 
 const activePath = computed(() => route.path)
 
+/** keep-alive 缓存的组件名集合：打开且未关闭缓存的页签（keepAlive !== false 以兼容旧持久化数据）。 */
+const cachedNames = computed(() => tabsStore.tabs.filter((t) => t.keepAlive !== false).map((t) => pathToName(t.path)))
+
 /** 当前路由对应的顶级菜单（及其叶子）。 */
 const activeTop = computed<ResourceNode | null>(() => {
   for (const m of menus.value) {
@@ -297,7 +304,7 @@ watch(
     const top = activeTop.value
     const leaf = top?.children?.find((c) => (c.path ?? c.code) === p)
     const title = leaf?.name ?? top?.name ?? p
-    tabsStore.addTab({ path: p, title, closable: p !== '/' })
+    tabsStore.addTab({ path: p, title, closable: p !== '/', keepAlive: route.meta.keepAlive !== false })
   },
   { immediate: true },
 )
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 4b6b383..becd6e4 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -35,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'dashboard' })
 import { computed, onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/modules/auth'
diff --git a/src/pages/monitor/audit/index.vue b/src/pages/monitor/audit/index.vue
index cd792bf..ad2950a 100644
--- a/src/pages/monitor/audit/index.vue
+++ b/src/pages/monitor/audit/index.vue
@@ -20,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'audit' })
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import type { JsonSchema, TableColumn } from '@/types/crud'
 import { useRequest } from '@/composables/useRequest'
diff --git a/src/pages/monitor/login-log/index.vue b/src/pages/monitor/login-log/index.vue
index cb3628f..0a7351f 100644
--- a/src/pages/monitor/login-log/index.vue
+++ b/src/pages/monitor/login-log/index.vue
@@ -20,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'login-log' })
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import type { JsonSchema, TableColumn } from '@/types/crud'
 import { useRequest } from '@/composables/useRequest'
diff --git a/src/pages/monitor/session/index.vue b/src/pages/monitor/session/index.vue
index cd8e22a..f3b9714 100644
--- a/src/pages/monitor/session/index.vue
+++ b/src/pages/monitor/session/index.vue
@@ -26,6 +26,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'session' })
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { JsonSchema, TableColumn } from '@/types/crud'
diff --git a/src/pages/system/config/index.vue b/src/pages/system/config/index.vue
index 8ede9fe..f8a9668 100644
--- a/src/pages/system/config/index.vue
+++ b/src/pages/system/config/index.vue
@@ -15,6 +15,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'config' })
 import type { JsonSchema, PageQuery, TableColumn } from '@/types/crud'
 import { createConfig, deleteConfig, listConfigs, updateConfig, type ConfigListQuery } from '@/api/config'
 
diff --git a/src/pages/system/dict/index.vue b/src/pages/system/dict/index.vue
index 902c7f1..aacadd5 100644
--- a/src/pages/system/dict/index.vue
+++ b/src/pages/system/dict/index.vue
@@ -63,6 +63,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'dict' })
 import { computed, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { CrudAction, JsonSchema, PageQuery, TableColumn } from '@/types/crud'
diff --git a/src/pages/system/org/index.vue b/src/pages/system/org/index.vue
index 6b4b6bd..cd43a6b 100644
--- a/src/pages/system/org/index.vue
+++ b/src/pages/system/org/index.vue
@@ -39,6 +39,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'org' })
 import { computed, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { JsonSchema, TableColumn } from '@/types/crud'
diff --git a/src/pages/system/resource/index.vue b/src/pages/system/resource/index.vue
index a0c2a3e..a114def 100644
--- a/src/pages/system/resource/index.vue
+++ b/src/pages/system/resource/index.vue
@@ -39,6 +39,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'resource' })
 import { computed, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { JsonSchema, TableColumn } from '@/types/crud'
diff --git a/src/pages/system/role/index.vue b/src/pages/system/role/index.vue
index c11316f..1867b5c 100644
--- a/src/pages/system/role/index.vue
+++ b/src/pages/system/role/index.vue
@@ -16,6 +16,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'role' })
 import { ElMessage } from 'element-plus'
 import type { CrudAction, JsonSchema, PageQuery, TableColumn } from '@/types/crud'
 import { showDialog } from '@/utils/dialog'
diff --git a/src/pages/system/tenant/index.vue b/src/pages/system/tenant/index.vue
index a69540f..89e7b33 100644
--- a/src/pages/system/tenant/index.vue
+++ b/src/pages/system/tenant/index.vue
@@ -15,6 +15,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'tenant' })
 import type { JsonSchema, PageQuery, TableColumn } from '@/types/crud'
 import { createTenant, deleteTenant, listTenants, updateTenant, type TenantListQuery } from '@/api/tenant'
 
diff --git a/src/pages/system/user/index.vue b/src/pages/system/user/index.vue
index 4b59694..53ad1d7 100644
--- a/src/pages/system/user/index.vue
+++ b/src/pages/system/user/index.vue
@@ -32,6 +32,8 @@
 </template>
 
 <script setup lang="ts">
+
+defineOptions({ name: 'user' })
 import { computed, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { CrudAction, JsonSchema, PageQuery, TableColumn } from '@/types/crud'
diff --git a/src/stores/modules/tabs.ts b/src/stores/modules/tabs.ts
index 4defecf..4c6b407 100644
--- a/src/stores/modules/tabs.ts
+++ b/src/stores/modules/tabs.ts
@@ -5,15 +5,22 @@ export interface TabItem {
   path: string
   title: string
   closable: boolean
+  keepAlive: boolean
 }
 
 export const HOME_PATH = '/'
 
+/** 由路径推导 keep-alive 组件名：'/'→dashboard，其余取路径末段 kebab。 */
+export function pathToName(path: string): string {
+  if (path === '/') return 'dashboard'
+  return path.split('/').filter(Boolean).pop() ?? ''
+}
+
 /** 多页签状态（持久化，刷新保留）。 */
 export const useTabsStore = defineStore(
   'tabsStore',
   () => {
-    const tabs = ref<TabItem[]>([{ path: HOME_PATH, title: '首页', closable: false }])
+    const tabs = ref<TabItem[]>([{ path: HOME_PATH, title: '首页', closable: false, keepAlive: true }])
 
     function addTab(tab: TabItem): void {
       if (!tabs.value.some((t) => t.path === tab.path)) {