Merge pull request #1361 from AstrBotDevs/hotfix/webui-mcp

fix: 修复 MCP 页面的一些问题

Author: Soulter

dashboard/src/components/shared/ItemCardGrid.vue

@@ -10,7 +10,7 @@
     <v-row v-else>
       <v-col v-for="(item, index) in items" :key="index" cols="12" md="6" lg="4" xl="3">
         <v-card class="item-card hover-elevation" :color="getItemEnabled(item) ? '' : 'grey-lighten-4'">
-          <!-- <div class="item-status-indicator" :class="{'active': getItemEnabled(item)}"></div> -->
+          <div class="item-status-indicator" :class="{'active': getItemEnabled(item)}"></div>
           <v-card-title class="d-flex justify-space-between align-center pb-1 pt-3">
             <span class="text-h4 text-truncate" :title="getItemTitle(item)">{{ getItemTitle(item) }}</span>
             <v-tooltip location="top">

dashboard/src/views/ToolUsePage.vue

@@ -60,7 +60,7 @@
             <v-card-text class="px-4 py-3">
 
               <item-card-grid :items="mcpServers || []" title-field="name" enabled-field="active"
-                empty-icon="mdi-server-off" empty-text="暂无 MCP 服务器，点击 新增服务器 添加" @toggle-enabled="platformStatusChange"
+                empty-icon="mdi-server-off" empty-text="暂无 MCP 服务器，点击 新增服务器 添加" @toggle-enabled="updateServerStatus"
                 @delete="deleteServer" @edit="editServer">
                 <template v-slot:item-details="{ item }">
 
@@ -486,6 +486,7 @@ export default {
   },
   data() {
     return {
+      refreshInterval: null,
       activeTab: 'local', // 当前激活的标签页
       mcpServers: [],
       tools: [],
@@ -568,13 +569,19 @@ export default {
     this.getTools();
     this.fetchMarketplaceServers();
 
-    // 定期刷新本地服务器列表
-    setInterval(() => {
+    this.refreshInterval = setInterval(() => {
       this.getServers();
       this.getTools();
     }, 5000);
   },
 
+  unmounted() {
+    // 清除定时器 if it exists
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+    }
+  },
+
   methods: {
     openurl(url) {
       window.open(url, '_blank');
@@ -724,6 +731,8 @@ export default {
     },
 
     updateServerStatus(server) {
+      // 切换服务器状态
+      server.active = !server.active;
       axios.post('/api/tools/mcp/update', server)
         .then(response => {
           this.getServers();