From 42adca73b6c7deb49b05321011a79e24273ecac9 Mon Sep 17 00:00:00 2001
From: dingjiahuichina <dingjiahui4@huawei.com>
Date: Wed, 3 Dec 2025 00:57:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20DevStore=E8=BD=AF=E4=BB=B6=E5=95=86?=
 =?UTF-8?q?=E5=BA=97=E5=89=8D=E7=AB=AF=E7=BE=8E=E5=8C=96=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=A4=9A=E9=A1=B5=E7=AD=BE=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/electron/main.js                     |  31 +-
 frontend/electron/preload.js                  |   5 +-
 frontend/src/layout/index.vue                 | 278 +++++++++++++++++-
 frontend/src/stores/tabStore.ts               | 117 ++++++++
 frontend/src/types.d.ts                       |  13 +
 frontend/src/views/Detail.vue                 |  98 ++++--
 frontend/src/views/Home.vue                   | 241 ++++++++++-----
 frontend/src/views/components/GridDisplay.vue |  20 +-
 8 files changed, 690 insertions(+), 113 deletions(-)
 create mode 100644 frontend/src/stores/tabStore.ts

diff --git a/frontend/electron/main.js b/frontend/electron/main.js
index 75fa164..46a81fa 100644
--- a/frontend/electron/main.js
+++ b/frontend/electron/main.js
@@ -10,18 +10,22 @@
  * Create: 2025-07-30
  * =================================================================================================================== */
 
-const { app, BrowserWindow, shell } = require('electron')
+const { app, BrowserWindow, shell, ipcMain } = require('electron')
 const path = require('path')
 const { registerIpcListeners } = require('./ipc.js')
 
 app.disableHardwareAcceleration()
 
+let mainWindow = null
+
 function createWindow() {
   const win = new BrowserWindow({
     width: 1200,
     height: 800,
     backgroundColor: '#00000000',
     icon: path.join(__dirname, '../src/assets/logo.png'),
+    frame: true,
+    titleBarStyle: 'hidden',
     webPreferences: {
       nodeIntegration: false,
       contextIsolation: true,
@@ -33,6 +37,8 @@ function createWindow() {
     }
   })
 
+  mainWindow = win
+
   registerIpcListeners();
 
   if (process.env.NODE_ENV === 'development') {
@@ -76,6 +82,29 @@ function createWindow() {
   }
 }
 
+// 窗口控制 IPC 处理
+ipcMain.on('minimize-window', () => {
+  if (mainWindow) {
+    mainWindow.minimize()
+  }
+})
+
+ipcMain.on('toggle-maximize', () => {
+  if (mainWindow) {
+    if (mainWindow.isMaximized()) {
+      mainWindow.unmaximize()
+    } else {
+      mainWindow.maximize()
+    }
+  }
+})
+
+ipcMain.on('close-window', () => {
+  if (mainWindow) {
+    mainWindow.close()
+  }
+})
+
 app.whenReady().then(createWindow)
 
 app.on('window-all-closed', () => {
diff --git a/frontend/electron/preload.js b/frontend/electron/preload.js
index 669a4f0..6e7a9fe 100644
--- a/frontend/electron/preload.js
+++ b/frontend/electron/preload.js
@@ -15,5 +15,8 @@ const { contextBridge, ipcRenderer } = require('electron')
 contextBridge.exposeInMainWorld('electronAPI', {
   invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),
   closeApp: () => ipcRenderer.send('close-app'),
-  getUsername: () => ipcRenderer.invoke('get-username')
+  getUsername: () => ipcRenderer.invoke('get-username'),
+  minimizeWindow: () => ipcRenderer.send('minimize-window'),
+  toggleMaximize: () => ipcRenderer.send('toggle-maximize'),
+  closeWindow: () => ipcRenderer.send('close-window')
 })
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index c13c3a0..da6c555 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -12,13 +12,50 @@
 
 <template>
   <div class="app-container">
+    <!-- 顶部栏：多页签 + 窗口控制 -->
+    <div class="titlebar">
+      <div class="titlebar-left">
+        <div class="app-title">DevStore</div>
+        <div class="tabs-container">
+          <div 
+            v-for="(tab, index) in tabs" 
+            :key="tab.id" 
+            :class="['tab', { active: tab.id === activeTabId }]"
+            :draggable="true"
+            @click="switchTab(tab.id)"
+            @dragstart="handleDragStart(index, $event)"
+            @dragover.prevent="handleDragOver(index)"
+            @drop="handleDrop(index)"
+            @dragend="handleDragEnd">
+            <span class="tab-title">{{ tab.title }}</span>
+            <el-icon 
+              v-if="tabs.length > 1"
+              class="tab-close" 
+              @click.stop="closeTab(tab.id)">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+      <div class="titlebar-right">
+        <div class="window-control" @click="minimizeWindow">
+          <el-icon><Minus /></el-icon>
+        </div>
+        <div class="window-control" @click="toggleMaximize">
+          <el-icon><FullScreen /></el-icon>
+        </div>
+        <div class="window-control close-btn" @click="closeWindow">
+          <el-icon><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+
     <div class="layout">
       <!-- 导航栏 -->
       <div class="navbar">
         <el-menu
             class="navbar-menu"
             mode="horizontal">
-          <el-menu-item index="1" class="dev-store">DevStore</el-menu-item>
           <el-sub-menu index="2">
             <template #title>{{ t('nav.userDoc') }}</template>
             <el-menu-item index="2-1" @click="openLink('https://gitee.com/openeuler/DevStore/blob/master/README.md')">中文文档</el-menu-item>
@@ -47,27 +84,139 @@
 
       <!-- 下方 slot -->
       <div class="main-slot">
-        <router-view />
+        <router-view v-slot="{ Component }">
+          <keep-alive :max="10">
+            <component :is="Component" :key="keepAliveKey" />
+          </keep-alive>
+        </router-view>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
+import { Close, Minus, FullScreen } from '@element-plus/icons-vue';
 import { IconLoad } from '@computing/opendesign-icons';
 import LogDialog from '@/views/components/LogDialog.vue';
 import { syncData, type SyncResponse } from '@/api/index';
 import { eventBus, EVENT_TYPES } from '@/utils/eventBus';
+import { useTabStore } from '@/stores/tabStore';
 
 const {t, locale} = useI18n();
+const router = useRouter();
+const route = useRoute();
 const isLogVisible = ref<boolean>(false);
 const MESSAGE_DURATION = 3000;
 
 const updateTime = ref<string>('2025');
 
+// 页签管理
+const { tabs, activeTabId, addTab, removeTab, setActiveTab, updateCurrentTab, updateCurrentTabId, updateTabTitle, reorderTabs, findHomeTab } = useTabStore();
+
+// 计算keep-alive的key：Home页使用固定key，Detail页使用path
+const keepAliveKey = computed(() => {
+  if (route.name === 'Home') {
+    // Home组件使用固定key，但内部通过页签ID管理不同状态
+    return 'home';
+  }
+  // Detail页使用path，确保不同的detail有独立的缓存
+  return route.path;
+});
+
+// 页签拖拽
+const draggedTabIndex = ref<number | null>(null);
+
+const handleDragStart = (index: number, event: DragEvent) => {
+  draggedTabIndex.value = index;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move';
+  }
+};
+
+const handleDragOver = (index: number) => {
+  if (draggedTabIndex.value !== null && draggedTabIndex.value !== index) {
+    reorderTabs(draggedTabIndex.value, index);
+    draggedTabIndex.value = index;
+  }
+};
+
+const handleDrop = (index: number) => {
+  // 拖拽已经在dragover中处理
+};
+
+const handleDragEnd = () => {
+  draggedTabIndex.value = null;
+};
+
+// 切换页签
+const switchTab = (tabId: string) => {
+  setActiveTab(tabId);
+  const tab = tabs.find(t => t.id === tabId);
+  if (tab) {
+    router.push({ path: tab.route.path, query: tab.route.query });
+  }
+};
+
+// 关闭页签
+const closeTab = (tabId: string) => {
+  removeTab(tabId);
+  // 切换到当前激活的页签
+  const activeTab = tabs.find(t => t.id === activeTabId.value);
+  if (activeTab) {
+    router.push({ path: activeTab.route.path, query: activeTab.route.query });
+  }
+};
+
+// 窗口控制
+const minimizeWindow = () => {
+  if (window.electronAPI?.minimizeWindow) {
+    window.electronAPI.minimizeWindow();
+  }
+};
+
+const toggleMaximize = () => {
+  if (window.electronAPI?.toggleMaximize) {
+    window.electronAPI.toggleMaximize();
+  }
+};
+
+const closeWindow = () => {
+  if (window.electronAPI?.closeWindow) {
+    window.electronAPI.closeWindow();
+  }
+};
+
+// 监听路由变化，更新当前页签的路由信息、ID和标题
+watch(() => route.fullPath, () => {
+  const currentTabId = activeTabId.value;
+  
+  // 根据路由类型更新ID和标题
+  if (route.path === '/') {
+    // Home页 - 只更新路由信息和标题，不改变页签ID
+    // Home页签的ID由toHomePage方法或初始化时确定
+    updateCurrentTab({ path: route.path, query: route.query });
+    updateTabTitle(activeTabId.value, 'Home');
+  } else if (route.name === 'McpServerDetail' || route.name === 'OedpPluginDetail') {
+    // Detail页面 - 只有当页签ID匹配时才更新路由信息
+    // 从路径中提取 tag 和 key
+    const pathParts = route.path.split('/').filter(p => p);
+    if (pathParts.length >= 2) {
+      const tag = pathParts[0];
+      const key = pathParts[1];
+      const expectedTabId = `${tag}-${key}`;
+      
+      // 只有当前页签ID匹配时才更新路由信息
+      if (currentTabId === expectedTabId) {
+        updateCurrentTab({ path: route.path, query: route.query });
+      }
+    }
+  }
+}, { immediate: true });
+
 
 
 // 点击右上角同步，更新同步时间
@@ -140,15 +289,122 @@ onMounted(async () => {
   width: 100%;
   min-height: 100vh;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   background-image: url("@/assets/img/background.svg");
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center top;
   background-attachment: fixed;
 
+  .titlebar {
+    -webkit-app-region: drag;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border-bottom: 1px solid var(--o-background-color-quaternary-light);
+    padding: 0 8px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+
+    .titlebar-left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      overflow: hidden;
+      -webkit-app-region: drag;
+      
+      .app-title {
+        -webkit-app-region: drag;
+        font-size: 14px;
+        font-weight: 600;
+        padding: 0 12px;
+        color: var(--o-text-color-primary);
+      }
+
+      .tabs-container {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        overflow-x: auto;
+        flex: 1;
+        -webkit-app-region: drag;
+
+        &::-webkit-scrollbar {
+          height: 4px;
+        }
+
+        .tab {
+          -webkit-app-region: no-drag;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 6px 12px;
+          border-radius: 4px;
+          background-color: transparent;
+          cursor: pointer;
+          white-space: nowrap;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: var(--o-background-color-tertiary-light);
+          }
+
+          &.active {
+            background-color: var(--o-background-color-quaternary-light);
+          }
+
+          .tab-title {
+            font-size: 13px;
+            color: var(--o-text-color-primary);
+          }
+
+          .tab-close {
+            font-size: 14px;
+            &:hover {
+              color: var(--o-theme-color-primary-blue);
+            }
+          }
+        }
+      }
+    }
+
+    .titlebar-right {
+      -webkit-app-region: no-drag;
+      display: flex;
+      align-items: center;
+
+      .window-control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        &.close-btn:hover {
+          background-color: #e81123;
+          color: white;
+        }
+
+        .el-icon {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
   .layout {
-    padding: 0 24px;
+    padding: 40px 24px 0;
     width: 100%;
     position: relative;
     min-width: 940px;
@@ -156,6 +412,7 @@ onMounted(async () => {
     height: 100%;
     display: flex;
     flex-direction: column;
+    margin: 0 auto;
 
     .navbar {
       width: 100%;
@@ -171,10 +428,6 @@ onMounted(async () => {
           font-size: 14px;
           color: var(--o-text-color-primary);
         }
-        .dev-store {
-          font-weight: 600;
-          font-size: 18px;
-        }
         .el-menu-item {
           cursor: pointer;
           &:hover {
@@ -188,12 +441,13 @@ onMounted(async () => {
       margin-right: 8px;
       height: 56px;
       line-height: 56px;
-      position: absolute;
-      top: 0;
-      right: 0;
+      position: fixed;
+      top: 40px;
+      right: 24px;
       color: var(--o-text-color-tertiary);
       display: flex;
       align-items: center;
+      z-index: 999;
       .sync, .sync > svg{
         width: 24px;
         height: 24px;
diff --git a/frontend/src/stores/tabStore.ts b/frontend/src/stores/tabStore.ts
new file mode 100644
index 0000000..612d927
--- /dev/null
+++ b/frontend/src/stores/tabStore.ts
@@ -0,0 +1,117 @@
+/* Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ * oeDeploy is licensed under the Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *     http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
+ * PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ * Create: 2025-12-02
+ * =================================================================================================================== */
+
+import { reactive, toRef, computed } from 'vue';
+
+export interface Tab {
+  id: string;
+  title: string;
+  route: {
+    path: string;
+    query?: Record<string, any>;
+  };
+}
+
+interface TabStore {
+  tabs: Tab[];
+  activeTabId: string;
+}
+
+const tabStore = reactive<TabStore>({
+  tabs: [{
+    id: 'home',
+    title: 'Home',
+    route: { path: '/', query: { tag: 'mcp' } }
+  }],
+  activeTabId: 'home'
+});
+
+export function useTabStore() {
+  const addTab = (tab: Tab) => {
+    const existingTab = tabStore.tabs.find(t => t.id === tab.id);
+    if (existingTab) {
+      // 如果页签已存在，切换到该页签
+      tabStore.activeTabId = tab.id;
+    } else {
+      // 否则新增页签
+      tabStore.tabs.push(tab);
+      tabStore.activeTabId = tab.id;
+    }
+  };
+
+  const removeTab = (tabId: string) => {
+    const index = tabStore.tabs.findIndex(t => t.id === tabId);
+    if (index === -1) return;
+
+    // 不允许删除最后一个页签
+    if (tabStore.tabs.length === 1) return;
+
+    tabStore.tabs.splice(index, 1);
+
+    // 如果删除的是当前激活的页签，切换到相邻页签
+    if (tabStore.activeTabId === tabId) {
+      const newIndex = Math.max(0, index - 1);
+      tabStore.activeTabId = tabStore.tabs[newIndex].id;
+    }
+  };
+
+  const setActiveTab = (tabId: string) => {
+    if (tabStore.tabs.find(t => t.id === tabId)) {
+      tabStore.activeTabId = tabId;
+    }
+  };
+
+  const updateCurrentTab = (route: { path: string; query?: Record<string, any> }) => {
+    const currentTab = tabStore.tabs.find(t => t.id === tabStore.activeTabId);
+    if (currentTab) {
+      currentTab.route = route;
+    }
+  };
+
+  const updateCurrentTabId = (newId: string) => {
+    const currentTab = tabStore.tabs.find(t => t.id === tabStore.activeTabId);
+    if (currentTab) {
+      currentTab.id = newId;
+      tabStore.activeTabId = newId;
+    }
+  };
+
+  const updateTabTitle = (tabId: string, title: string) => {
+    const tab = tabStore.tabs.find(t => t.id === tabId);
+    if (tab) {
+      tab.title = title;
+    }
+  };
+
+  const reorderTabs = (fromIndex: number, toIndex: number) => {
+    const [movedTab] = tabStore.tabs.splice(fromIndex, 1);
+    tabStore.tabs.splice(toIndex, 0, movedTab);
+  };
+
+  const findHomeTab = () => {
+    return tabStore.tabs.find(t => t.route.path === '/');
+  };
+
+  return {
+    tabs: tabStore.tabs,
+    activeTabId: computed(() => tabStore.activeTabId),
+    addTab,
+    removeTab,
+    setActiveTab,
+    updateCurrentTab,
+    updateCurrentTabId,
+    updateTabTitle,
+    reorderTabs,
+    findHomeTab
+  };
+}
+
diff --git a/frontend/src/types.d.ts b/frontend/src/types.d.ts
index 649f1b1..615b919 100644
--- a/frontend/src/types.d.ts
+++ b/frontend/src/types.d.ts
@@ -31,4 +31,17 @@ declare module '*.webp' {
 declare module 'vue' {
   import { ComponentPublicInstance } from 'vue';
   export * from '@vue/runtime-dom';
+}
+
+interface ElectronAPI {
+  invoke: (channel: string, ...args: any[]) => Promise<any>;
+  closeApp: () => void;
+  getUsername: () => Promise<string>;
+  minimizeWindow: () => void;
+  toggleMaximize: () => void;
+  closeWindow: () => void;
+}
+
+interface Window {
+  electronAPI?: ElectronAPI;
 }
\ No newline at end of file
diff --git a/frontend/src/views/Detail.vue b/frontend/src/views/Detail.vue
index 583a9b2..a68e36c 100644
--- a/frontend/src/views/Detail.vue
+++ b/frontend/src/views/Detail.vue
@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
@@ -105,6 +105,7 @@ import {
 } from '@/api/index.ts';
 import { generateIconBgColor, getCurrentUsername } from '@/utils/index.ts';
 import { createStatusWatcher } from '@/utils/statusWatcher';
+import { useTabStore } from '@/stores/tabStore';
 
 import McpQuick from '@/views/components/McpQuick.vue';
 import McpCli from '@/views/components/McpCli.vue';
@@ -115,6 +116,7 @@ import OedpCli from '@/views/components/OedpCli.vue';
 const route = useRoute();
 const router = useRouter();
 const {t} = useI18n();
+const { updateTabTitle, activeTabId, findHomeTab, addTab, setActiveTab } = useTabStore();
 
 const tag = ref<Tag>(route.name === 'McpServerDetail' ? 'mcp' : 'oedp');
 const key = ref<string>(Array.isArray(route.params.key) ? route.params.key[0] : route.params.key || '');
@@ -124,29 +126,34 @@ const supportOedpQuick = ref<boolean>(false);
 
 // 点击 crumbs 回到首页
 const toHomePage = () => {
-  // 从当前路由或者sessionStorage中恢复Home页面的状态
-  const homeState = sessionStorage.getItem('homePageState');
-  let homeQuery: any = { tag: tag.value };
-  
-  if (homeState) {
-    try {
-      const parsedState = JSON.parse(homeState);
-      homeQuery = {
-        tag: tag.value,
-        pageSize: parsedState.pageSize || '10',
-        curPage: parsedState.curPage || '1',
-        searchValue: parsedState.searchValue || '',
-        sort: parsedState.sort || 'rec'
-      };
-    } catch (e) {
-      console.error('Failed to parse home page state:', e);
+  const homeTab = findHomeTab();
+  if (homeTab) {
+    // 如果Home页签已存在，直接切换到该页签，并更新tag参数
+    setActiveTab(homeTab.id);
+    // 检查tag是否发生了变化
+    const currentHomeTag = homeTab.route.query?.tag;
+    const newQuery = { ...homeTab.route.query, tag: tag.value };
+    // 如果tag发生了切换，重置页码为1
+    if (currentHomeTag !== tag.value) {
+      newQuery.curPage = '1';
     }
+    router.push({
+      path: '/',
+      query: newQuery
+    });
+  } else {
+    // 如果Home页签不存在，新建一个Home页签
+    const newHomeTab = {
+      id: 'home',
+      title: 'Home',
+      route: { path: '/', query: { tag: tag.value } }
+    };
+    addTab(newHomeTab);
+    router.push({
+      path: '/',
+      query: { tag: tag.value }
+    });
   }
-  
-  router.push({
-    path: '/',
-    query: homeQuery
-  });
 };
 
 // 根据当前 tag，判断下右显示 安装/部署
@@ -195,6 +202,13 @@ const getDetail = async () => {
       compiledMarkdown.value = DOMPurify.sanitize(dirtyHtml);
       // 判断是否支持 oedp 快捷部署
       supportOedpQuick.value = itemDetail.value.localhost_available;
+      
+      // 更新页签标题 - 只在当前页签对应当前组件时更新
+      const expectedTabId = `${tag.value}-${key.value}`;
+      const currentTabId = activeTabId.value;
+      if (itemDetail.value.name && currentTabId === expectedTabId) {
+        updateTabTitle(currentTabId, itemDetail.value.name);
+      }
     } else if (res) {
       console.log(res.message);
     }
@@ -273,17 +287,45 @@ const deleteApp = async (appName: string) => {
   }
 };
 
+// 轮询控制
 let intervalId: NodeJS.Timeout | null = null;
 
-// 轮询
+// 启动轮询
+const startPolling = () => {
+  if (intervalId) return; // 避免重复启动
+  intervalId = setInterval(async () => {
+    await getDetail();
+  }, 2000);
+};
+
+// 停止轮询
+const stopPolling = () => {
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
+};
+
+// 组件挂载
 onMounted(async () => {
   // 立即执行一次
   await getDetail();
+  // 启动轮询
+  startPolling();
+});
 
+// 组件被激活（显示）时 - keep-alive
+onActivated(() => {
+  // 立即刷新一次数据
+  getDetail();
   // 启动轮询
-  intervalId = setInterval(async () => {
-    await getDetail();
-  }, 2000);
+  startPolling();
+});
+
+// 组件被停用（隐藏）时 - keep-alive
+onDeactivated(() => {
+  // 停止轮询
+  stopPolling();
 });
 
 // 监听 download_status 变化
@@ -340,9 +382,7 @@ watch(
 
 // 页面卸载时清除定时器
 onUnmounted(() => {
-  if (intervalId) {
-    clearInterval(intervalId);
-  }
+  stopPolling();
 });
 </script>
 
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 7337c6a..308a9b3 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -12,7 +12,7 @@
 
 <template>
   <!-- 首页 -->
-  <div class="home" :key="renderKey">
+  <div class="home">
     <!-- 顶部数据展示 -->
     <div class="statics">
       <div class="left-div">{{ t('home.mcpServer') }}<div class="server-num">{{ mcpCount }}</div></div>
@@ -60,7 +60,7 @@
             <div v-else-if="searchValue !== '' && activeTab === tab.name" class="label-sum">{{ count }}</div>
           </template>
           <!-- 子组件：卡片列表 -->
-            <grid-display :tag="tab.name as Tag" :item-list="itemList" :key="`grid-${renderKey}`" />
+            <grid-display :tag="tab.name as Tag" :item-list="itemList" />
         </el-tab-pane>
       </el-tabs>
       <!-- 分页 -->
@@ -72,7 +72,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch, onMounted, onUnmounted, computed, onBeforeUnmount, nextTick } from 'vue';
+import { ref, watch, onMounted, onUnmounted, onActivated, onDeactivated, computed, reactive } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { throttle } from 'underscore';
@@ -81,33 +81,105 @@ import { queryList, Tag, type QueryListResponse } from '@/api/index.ts';
 import { eventBus, EVENT_TYPES } from '@/utils/eventBus';
 import { updateRouteQuery } from '@/utils/index';
 import { Search } from '@element-plus/icons-vue';
+import { useTabStore } from '@/stores/tabStore';
+
+// 每个Home页签的状态存储
+interface HomePageState {
+  searchInput: string;
+  searchValue: string;
+  count: number;
+  mcpCount: number;
+  oedpCount: number;
+  itemList: any[];
+  currentPage: number;
+  pageSize: number;
+  activeSortTab: string;
+  activeTab: string;
+  tag: string;
+}
+
+// 所有Home页签的状态映射（模块级别，所有组件实例共享，使用reactive使其可响应）
+const homeStatesMap = reactive(new Map<string, HomePageState>());
 
 const route = useRoute();
-const showList = ref(true);
 const router = useRouter();
 const {t} = useI18n();
+const { activeTabId } = useTabStore();
+
+// 获取当前页签ID
+const currentTabId = computed(() => activeTabId.value);
+
+// 从URL参数初始化当前页签的状态
+const initStateFromRoute = (): HomePageState => {
+  return reactive({
+    searchInput: (route.query.searchValue as string) || '',
+    searchValue: (route.query.searchValue as string) || '',
+    count: 0,
+    mcpCount: 0,
+    oedpCount: 0,
+    itemList: [],
+    currentPage: parseInt(route.query.curPage as string) || 1,
+    pageSize: parseInt(route.query.pageSize as string) || 10,
+    activeSortTab: (route.query.sort as string) || 'rec',
+    activeTab: (route.query.tag as string) || 'mcp',
+    tag: (route.query.tag as string) || 'mcp'
+  });
+};
 
-// 强制渲染key
-const renderKey = ref(0);
+// 获取或初始化当前页签的状态
+const getCurrentState = (): HomePageState => {
+  const tabId = currentTabId.value;
+  if (!homeStatesMap.has(tabId)) {
+    homeStatesMap.set(tabId, initStateFromRoute());
+  }
+  return homeStatesMap.get(tabId)!;
+};
 
 // 从路由获取当前 tag
-const tag = computed(() => route.query.tag ?? 'mcp');
-// 搜索框里显示的值 - 从URL参数初始化
-const searchInput = ref((route.query.searchValue as string) || '');
-// 查询时实际使用的搜索值 - 从URL参数初始化
-const searchValue = ref((route.query.searchValue as string) || '');
+const tag = computed(() => getCurrentState().tag);
+// 搜索框里显示的值
+const searchInput = computed({
+  get: () => getCurrentState().searchInput,
+  set: (val) => { getCurrentState().searchInput = val; }
+});
+// 查询时实际使用的搜索值
+const searchValue = computed({
+  get: () => getCurrentState().searchValue,
+  set: (val) => { getCurrentState().searchValue = val; }
+});
 // 搜索结果个数
-const count = ref<number>(0);
+const count = computed({
+  get: () => getCurrentState().count,
+  set: (val) => { getCurrentState().count = val; }
+});
 // 个数
-const mcpCount = ref<number>(0);
-const oedpCount = ref<number>(0);
+const mcpCount = computed({
+  get: () => getCurrentState().mcpCount,
+  set: (val) => { getCurrentState().mcpCount = val; }
+});
+const oedpCount = computed({
+  get: () => getCurrentState().oedpCount,
+  set: (val) => { getCurrentState().oedpCount = val; }
+});
 // 查询首页列表信息
-const itemList = ref([]);
-// 分页 - 从URL参数初始化
-const currentPage = ref(parseInt(route.query.curPage as string) || 1);
-const pageSize = ref(parseInt(route.query.pageSize as string) || 10);
-// 右侧 tab - 从URL参数初始化
-const activeSortTab = ref((route.query.sort as string) || 'rec');
+const itemList = computed({
+  get: () => getCurrentState().itemList,
+  set: (val) => { getCurrentState().itemList = val; }
+});
+// 分页
+const currentPage = computed({
+  get: () => getCurrentState().currentPage,
+  set: (val) => { getCurrentState().currentPage = val; }
+});
+const pageSize = computed({
+  get: () => getCurrentState().pageSize,
+  set: (val) => { getCurrentState().pageSize = val; }
+});
+// 右侧 tab
+const activeSortTab = computed({
+  get: () => getCurrentState().activeSortTab,
+  set: (val) => { getCurrentState().activeSortTab = val; }
+});
 
 const getList = async () => {
   try {
@@ -128,10 +200,6 @@ const getList = async () => {
       count.value = searchValue.value && searchValue.value.trim() !== ''
         ? res.data.search_count || 0
         : tag.value === 'mcp' ? res.data.mcp_count : res.data.oedp_count;
-        
-      //强制触发视图更新
-      renderKey.value++;
-      await nextTick();
       
     } else if (res) {
       console.log(res.message);
@@ -205,14 +273,20 @@ const handleClear = async () => {
 };
 
 // 左侧 tab 切换：mcp / oedp
-const activeTab = ref(tag.value || 'mcp');
+const activeTab = computed({
+  get: () => getCurrentState().activeTab,
+  set: (val) => { getCurrentState().activeTab = val; }
+});
 const tabs = computed(() => [
   { label: t('home.mcpServer'), name: 'mcp', count: mcpCount.value },
   { label: t('home.oeDeployPlugin'), name: 'oedp', count: oedpCount.value }
 ]);
 // 切换左侧 tab 时，重新查询
 const handleTabChange = async (tabName: Tag) => {
-  currentPage.value = 1;
+  const state = getCurrentState();
+  state.currentPage = 1;
+  state.activeTab = tabName;
+  state.tag = tabName;
   // 更新 URL 参数（保留其他已有参数）
   await updateRouteQuery(router, route, {
     tag: tabName as string,
@@ -239,9 +313,11 @@ const handleSortTabChange = async () => {
 watch(
   () => route.query.tag,
   (nv) => {
+    const state = getCurrentState();
     if (nv) {
       // 更新激活的 Tab
-      activeTab.value = nv;
+      state.activeTab = nv as string;
+      state.tag = nv as string;
       // 重新获取数据
     } else {
       // 如果 URL 中没有 type 参数，跳转到默认值
@@ -251,11 +327,27 @@ watch(
   { immediate: true }
 );
 
-// 轮询
+// 轮询控制
 let intervalId: NodeJS.Timeout | null = null;
+
 const getAndCheck = async () => {
   await getList();
-  // 判断停止轮询的逻辑加在这里
+};
+
+// 启动轮询
+const startPolling = () => {
+  if (intervalId) return; // 避免重复启动
+  intervalId = setInterval(() => {
+    getAndCheck();
+  }, 10000);
+};
+
+// 停止轮询
+const stopPolling = () => {
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
 };
 
 // 监听同步成功事件的处理函数
@@ -264,80 +356,97 @@ const handleSyncSuccess = async () => {
   await getAndCheck();
 };
 
-// 轮询时机
-onMounted(async () => {
+// 初始化状态和URL参数的公共函数
+const initializeStateAndUrl = () => {
+  // 初始化当前页签的状态
+  const tabId = currentTabId.value;
+  if (!homeStatesMap.has(tabId)) {
+    homeStatesMap.set(tabId, initStateFromRoute());
+  } else {
+    // 如果状态已存在，从路由更新状态
+    const state = getCurrentState();
+    if (route.query.searchValue !== undefined) {
+      state.searchInput = route.query.searchValue as string;
+      state.searchValue = route.query.searchValue as string;
+    }
+    if (route.query.curPage) state.currentPage = parseInt(route.query.curPage as string);
+    if (route.query.pageSize) state.pageSize = parseInt(route.query.pageSize as string);
+    if (route.query.sort) state.activeSortTab = route.query.sort as string;
+    if (route.query.tag) {
+      state.activeTab = route.query.tag as string;
+      state.tag = route.query.tag as string;
+    }
+  }
+  
   // 检查并设置所有必要的URL参数
+  const state = getCurrentState();
   const currentQuery = { ...route.query };
   let needsUpdate = false;
 
   if (!currentQuery.tag) {
-    currentQuery.tag = 'mcp';
+    currentQuery.tag = state.tag;
     needsUpdate = true;
   }
   if (!currentQuery.pageSize) {
-    currentQuery.pageSize = pageSize.value.toString();
+    currentQuery.pageSize = state.pageSize.toString();
     needsUpdate = true;
   }
   if (!currentQuery.curPage) {
-    currentQuery.curPage = currentPage.value.toString();
+    currentQuery.curPage = state.currentPage.toString();
     needsUpdate = true;
   }
   if (!currentQuery.sort) {
-    currentQuery.sort = activeSortTab.value;
+    currentQuery.sort = state.activeSortTab;
     needsUpdate = true;
   }
-  if (!currentQuery.searchValue) {
-    currentQuery.searchValue = searchValue.value;
+  if (!currentQuery.searchValue && state.searchValue) {
+    currentQuery.searchValue = state.searchValue;
     needsUpdate = true;
   }
 
   if (needsUpdate) {
     router.replace({ query: currentQuery });
   }
+};
+
+// 组件挂载
+onMounted(async () => {
+  // 初始化状态和URL
+  initializeStateAndUrl();
   
-  // 立即执行一次
+  // 立即执行一次查询
   await getAndCheck();
-
+  
   // 启动轮询
-  intervalId = setInterval(() => {
-    getAndCheck();
-  }, 10000);
+  startPolling();
 
   // 监听同步成功事件
   eventBus.on(EVENT_TYPES.SYNC_SUCCESS, handleSyncSuccess);
 });
 
-// 保存当前页面状态到sessionStorage
-const savePageState = () => {
-  const state = {
-    pageSize: pageSize.value,
-    curPage: currentPage.value,
-    searchValue: searchValue.value,
-    sort: activeSortTab.value,
-    tag: tag.value
-  };
-  sessionStorage.setItem('homePageState', JSON.stringify(state));
-};
+// 组件被激活（显示）时 - keep-alive
+onActivated(() => {
+  // 同步路由状态
+  initializeStateAndUrl();
+  
+  // 立即刷新一次数据
+  getAndCheck();
+  
+  // 启动轮询
+  startPolling();
+});
 
-// 在状态变化时保存
-watch([pageSize, currentPage, searchValue, activeSortTab, tag], () => {
-  savePageState();
+// 组件被停用（隐藏）时 - keep-alive
+onDeactivated(() => {
+  // 停止轮询
+  stopPolling();
 });
 
 // 页面卸载时清除定时器和事件监听器
 onUnmounted(() => {
-  if (intervalId) {
-    clearInterval(intervalId);
-  }
+  stopPolling();
   // 移除事件监听器
   eventBus.off(EVENT_TYPES.SYNC_SUCCESS, handleSyncSuccess);
-  // 保存状态
-  savePageState();
-});
-
-// 页面离开前保存状态
-onBeforeUnmount(() => {
-  savePageState();
 });
 </script>
 
diff --git a/frontend/src/views/components/GridDisplay.vue b/frontend/src/views/components/GridDisplay.vue
index e3f8f21..ce6c0f5 100644
--- a/frontend/src/views/components/GridDisplay.vue
+++ b/frontend/src/views/components/GridDisplay.vue
@@ -70,10 +70,11 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { Tag } from '@/api/index.ts';
 import { generateIconBgColor } from '@/utils/index.ts';
+import { useTabStore } from '@/stores/tabStore';
 
-// 待完善注释
 const router = useRouter();
 const {t} = useI18n();
+const { addTab } = useTabStore();
 
 const props = withDefaults(
   defineProps<{
@@ -86,9 +87,20 @@ const props = withDefaults(
   }
 );
 
-// 跳转至详情页 tag, key
-const goToDetail = (key) => {
-  router.push(`/${props.tag}/${key}`);
+// 跳转至详情页 tag, key - 新增页签
+const goToDetail = (key: string) => {
+  const item = props.itemList.find((i: any) => i.key === key);
+  const detailPath = `/${props.tag}/${key}`;
+  
+  // 添加新页签
+  addTab({
+    id: `${props.tag}-${key}`,
+    title: item?.name || key,
+    route: { path: detailPath }
+  });
+  
+  // 跳转到详情页
+  router.push(detailPath);
 };
 
 </script>
-- 
Gitee