20260817225227

code/fms/fms-vue/src/layouts/components/AppTabs.vue

@@ -5,6 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import Button from '@/components/ui/button/button.vue'
 import Dropdown from '@/components/ui/dropdown/dropdown.vue'
+import { cacheKeyOf } from '@/utils/cacheKey'
 
 const route = useRoute()
 const router = useRouter()
@@ -23,10 +24,14 @@ watch(
   async () => {
     const title = route.meta?.title
     if (title) {
+      // cacheByKey 路由（如 /detail/:id）：每个 fullPath 一个独立组件名，
+      // 使 keep-alive 的 include 能按参数精确销毁其实例，且不同参数天然多个独立缓存。
+      const name = route.meta?.cacheByKey ? cacheKeyOf(route.fullPath) : route.meta?.componentName
       appStore.addVisitedTab({
         key: route.fullPath,
         label: title,
         closable: route.fullPath !== '/dashboard',
+        name,
       })
     }
     await nextTick()
@@ -325,21 +330,21 @@ function refreshTab(key) {
   &.is-active {
     background: var(--fms-primary);
     border-color: var(--fms-primary);
-    color: #fff;
+    color: var(--fms-primary-text);
   }
 
   &.is-active:hover {
     background: var(--fms-primary);
     border-color: var(--fms-primary);
-    color: #fff;
+    color: var(--fms-primary-text);
   }
 
   &.is-active .fms-tab-close {
-    color: rgba(255, 255, 255, 0.85);
+    color: color-mix(in srgb, var(--fms-primary-text) 85%, transparent);
 
     &:hover {
-      background: rgba(255, 255, 255, 0.22);
-      color: #fff;
+      background: color-mix(in srgb, var(--fms-primary-text) 22%, transparent);
+      color: var(--fms-primary-text);
     }
   }
 }