fix(web): 修复终端固定与页面缓存

web/src/layouts/AppMain.vue

@@ -2,17 +2,21 @@
 import { useTabStore } from '@/stores'
 
 const tabStore = useTabStore()
-
-const keepAliveNames = computed(() => {
-  return tabStore.tabs.filter((item) => item.keepAlive).map((item) => item.name)
-})
 </script>
 
 <template>
   <div class="flex flex-col wh-full">
     <router-view v-slot="{ Component, route }">
-      <keep-alive :include="keepAliveNames">
-        <component :is="Component" v-if="!tabStore.reloading" :key="route.path" />
+      <keep-alive
+        v-for="tab in tabStore.tabs"
+        :key="tab.path"
+        :include="tab.keepAlive ? undefined : []"
+      >
+        <component
+          :is="Component"
+          v-if="route.path === tab.path && !tabStore.reloading"
+          :key="route.path"
+        />
       </keep-alive>
     </router-view>
   </div>

web/src/router/guard/tab-guard.ts

@@ -8,13 +8,12 @@ export function createTabGuard(router: Router) {
   router.afterEach((to) => {
     if (EXCLUDE_TAB.includes(to.path)) return
     const tabStore = useTabStore()
-    const { name, path } = to
+    const { path } = to
     const title = String(to.meta?.title)
     tabStore.addTab({
-      name: String(name),
       path,
       title,
-      keepAlive: false,
+      keepAlive: to.meta?.keepAlive === true,
     })
   })
 }

web/src/stores/modules/tab/index.ts

@@ -9,7 +9,6 @@ export interface Tab {
 }
 
 export interface TabItem {
-  name: string
   path: string
   title: string
   keepAlive: boolean
@@ -24,8 +23,7 @@ export const useTabStore = defineStore('tab', {
     }
   },
   actions: {
-    async setActiveTab(path: string) {
-      await nextTick()
+    setActiveTab(path: string) {
       this.active = path
     },
     setTabs(tabs: Array<TabItem>) {
@@ -94,5 +92,6 @@ export const useTabStore = defineStore('tab', {
   },
   persist: {
     storage: sessionStorage,
+    pick: ['active', 'tabs'],
   },
 })

web/src/types/router.d.ts

@@ -6,6 +6,7 @@ interface Meta {
   order?: number
   role?: Array<string>
   requireAuth?: boolean
+  keepAlive?: boolean
 }
 
 interface RouteItem {

web/src/views/file/ListView.vue

@@ -1348,6 +1348,21 @@ const handleFileSearch = () => {
   fileStore.pushHistory(props.tabId, path.value)
 }
 
+const addDocumentListeners = () => {
+  document.addEventListener('mousemove', onSelectionMove)
+  document.addEventListener('mouseup', onSelectionEnd)
+  document.addEventListener('keydown', handleKeyDown)
+}
+
+const removeDocumentListeners = () => {
+  document.removeEventListener('mousemove', onSelectionMove)
+  document.removeEventListener('mouseup', onSelectionEnd)
+  document.removeEventListener('keydown', handleKeyDown)
+}
+
+onActivated(addDocumentListeners)
+onDeactivated(removeDocumentListeners)
+
 onMounted(() => {
   watch(
     path,
@@ -1375,12 +1390,7 @@ onMounted(() => {
   window.$bus.on('file:keyboard-resume', resumeKeyboard)
   window.$bus.on('file:inline-create', startInlineCreate)
 
-  // 添加全局鼠标事件监听
-  document.addEventListener('mousemove', onSelectionMove)
-  document.addEventListener('mouseup', onSelectionEnd)
-
-  // 添加键盘快捷键监听
-  document.addEventListener('keydown', handleKeyDown)
+  addDocumentListeners()
 })
 
 onUnmounted(() => {
@@ -1396,9 +1406,7 @@ onUnmounted(() => {
   window.$bus.off('file:keyboard-pause', pauseKeyboard)
   window.$bus.off('file:keyboard-resume', resumeKeyboard)
   window.$bus.off('file:inline-create', startInlineCreate)
-  document.removeEventListener('mousemove', onSelectionMove)
-  document.removeEventListener('mouseup', onSelectionEnd)
-  document.removeEventListener('keydown', handleKeyDown)
+  removeDocumentListeners()
 })
 </script>
 

web/src/views/ssh/IndexView.vue

@@ -345,6 +345,7 @@ const disposeTab = (tab: TerminalTab) => {
 }
 
 const onResize = () => {
+  if (!terminalContainer.value?.isConnected) return
   const tab = tabs.value.find((t) => t.id === activeTabId.value)
   if (tab?.fitAddon && tab.terminal) tab.fitAddon.fit()
 }
@@ -457,13 +458,17 @@ const onFullscreenChange = () => {
 
 watch(fontSize, () => applyFontSettings())
 
+onActivated(async () => {
+  await nextTick()
+  onResize()
+})
+
 onMounted(() => {
   document.fonts.ready.then((fontFaceSet: any) =>
     Promise.all(Array.from(fontFaceSet).map((el: any) => el.load())).then(fetchData),
   )
   window.$bus.on('ssh:refresh', fetchData)
   window.addEventListener('resize', onResize)
-  window.addEventListener('keydown', onKeyDown)
   document.addEventListener('fullscreenchange', onFullscreenChange)
 })
 
@@ -471,7 +476,6 @@ onUnmounted(() => {
   tabs.value.forEach(disposeTab)
   window.$bus.off('ssh:refresh')
   window.removeEventListener('resize', onResize)
-  window.removeEventListener('keydown', onKeyDown)
   document.removeEventListener('fullscreenchange', onFullscreenChange)
 })
 </script>
@@ -549,7 +553,12 @@ onUnmounted(() => {
         </div>
       </header>
 
-      <main class="terminals-content" @wheel="onTermWheel" @contextmenu="onContextMenu">
+      <main
+        class="terminals-content"
+        @keydown="onKeyDown"
+        @wheel="onTermWheel"
+        @contextmenu="onContextMenu"
+      >
         <template v-for="tab in tabs" :key="tab.id">
           <div
             v-if="tab.type === 'terminal'"

web/src/views/ssh/route.ts

@@ -19,6 +19,7 @@ export default {
         icon: 'mdi:console',
         role: ['admin'],
         requireAuth: true,
+        keepAlive: true,
       },
     },
   ],