优化 service， 进行 mcp 连接复用

renderer/src/components/main-panel/tool/tool-list.vue

@@ -69,6 +69,8 @@ function reloadTools(option: { first: boolean }) {
 }
 
 function handleClick(tool: { name: string }) {
+    console.log('enter');
+    
     tabStorage.currentToolName = tool.name;
     tabStorage.lastToolCallResponse = undefined;
 }

renderer/src/components/sidebar/connected.ts

@@ -0,0 +1,3 @@
+import { ref } from "vue";
+
+export const isConnecting = ref(true);

renderer/src/components/sidebar/connected.vue

@@ -1,16 +1,9 @@
 <template>
-	<div class="connected-status-container"
-		id="connected-status-container"
-		@click.stop="toggleConnectionPanel()"
-		:class="{ 'connected': client.connectionResult.success }"
-	>
+	<div v-if="!isConnecting" class="connected-status-container" id="connected-status-container"
+		@click.stop="toggleConnectionPanel()" :class="{ 'connected': client.connectionResult.success }">
 		<span class="mcp-server-info">
-			<el-tooltip
-				class="extra-connect-container"
-				effect="dark"
-				placement="right"
-				:content="fullDisplayServerName"
-			>
+			<el-tooltip class="extra-connect-container" effect="dark" placement="right"
+				:content="fullDisplayServerName">
 				<span class="name">{{ displayServerName }}</span>
 			</el-tooltip>
 		</span>
@@ -24,7 +17,33 @@
 				<span class="iconfont icon-cuo"></span>
 			</span>
 		</span>
-			
+	</div>
+	<div v-else class="connected-status-container">
+		<span class="mcp-server-info">
+			<el-tooltip class="extra-connect-container" effect="dark" placement="right"
+				:content="fullDisplayServerName">
+				<span class="name">
+					加载中
+				</span>
+			</el-tooltip>
+		</span>
+		<span class="connect-status">
+			<span style="display: flex;">
+				<span class="iconfont icon-connect"></span>
+				<div class="custom-loading">
+					<svg class="circular" viewBox="-10, -10, 50, 50">
+						<path class="path" d="
+            M 30 15
+            L 28 17
+            M 25.61 25.61
+            A 15 15, 0, 0, 1, 15 30
+            A 15 15, 0, 1, 1, 27.99 7.5
+            L 15 15
+          " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0); stroke: var(--main-color);" />
+					</svg>
+				</div>
+			</span>
+		</span>
 	</div>
 </template>
 
@@ -33,6 +52,7 @@ import { defineComponent, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Connection } from './sidebar';
 import { mcpClientAdapter } from '@/views/connect/core';
+import { isConnecting } from './connected';
 
 defineComponent({ name: 'connected' });
 
@@ -46,29 +66,29 @@ const fullDisplayServerName = computed(() => {
 });
 
 const displayServerName = computed(() => {
-    const name = client.value.connectionResult.name;
-    if (name.length <= 3) return name;
-    
-    // 处理中文混合名称
-    const chineseMatch = name.match(/[\u4e00-\u9fa5]/g);
-    if (chineseMatch && chineseMatch.length >= 2) {
-        return chineseMatch.slice(0, 3).join('');
-    }
-    
-    // 处理各种命名格式
-    const words = name
-        .replace(/([a-z])([A-Z])/g, '$1 $2')  // 驼峰分割
-        .split(/[\s\-_]+/)  // 分割空格、连字符和下划线
-        .filter(word => word.length > 0);
-    
-    if (words.length === 1 && words[0].length > 3) {
-        return words[0].substring(0, 3).toUpperCase();
-    }
-    
-    return words
-        .map(word => word[0].toUpperCase())
-        .slice(0, 3)
-        .join('');
+	const name = client.value.connectionResult.name;
+	if (name.length <= 3) return name;
+
+	// 处理中文混合名称
+	const chineseMatch = name.match(/[\u4e00-\u9fa5]/g);
+	if (chineseMatch && chineseMatch.length >= 2) {
+		return chineseMatch.slice(0, 3).join('');
+	}
+
+	// 处理各种命名格式
+	const words = name
+		.replace(/([a-z])([A-Z])/g, '$1 $2')  // 驼峰分割
+		.split(/[\s\-_]+/)  // 分割空格、连字符和下划线
+		.filter(word => word.length > 0);
+
+	if (words.length === 1 && words[0].length > 3) {
+		return words[0].substring(0, 3).toUpperCase();
+	}
+
+	return words
+		.map(word => word[0].toUpperCase())
+		.slice(0, 3)
+		.join('');
 });
 
 function toggleConnectionPanel() {
@@ -104,7 +124,7 @@ function toggleConnectionPanel() {
 }
 
 .connected-status-container {
-    user-select: none;
+	user-select: none;
 	display: flex;
 	align-items: center;
 	width: auto;
@@ -163,7 +183,22 @@ function toggleConnectionPanel() {
 
 .mcp-server-info .version {
 	font-size: 12px;
-	font-weight: 400;	
+	font-weight: 400;
 }
 
+.custom-loading .circular {
+	margin-right: 6px;
+	width: 18px;
+	height: 18px;
+	animation: loading-rotate 2s linear infinite;
+}
+
+.custom-loading .circular .path {
+	animation: loading-dash 1.5s ease-in-out infinite;
+	stroke-dasharray: 90, 150;
+	stroke-dashoffset: 0;
+	stroke-width: 2;
+	stroke: var(--el-button-text-color);
+	stroke-linecap: round;
+}
 </style>

renderer/src/hook/panel.ts

@@ -3,7 +3,7 @@ import { pinkLog } from "@/views/setting/util";
 import { debugModes, tabs } from "@/components/main-panel/panel";
 import { markRaw, ref, type Reactive } from "vue";
 import { v4 as uuidv4 } from 'uuid';
-import type { McpClient } from "@/views/connect/core";
+import { mcpClientAdapter, type McpClient } from "@/views/connect/core";
 
 interface SaveTabItem {
 	name: string;
@@ -104,8 +104,12 @@ export function savePanels(saveHandler?: () => void) {
         }
     }, { once: true });
 
+	const masterNode = mcpClientAdapter.masterNode;
     bridge.postMessage({
         command: 'panel/save',
-        data: saveTabs
+        data: {
+			clientId: masterNode.clientId,
+			...saveTabs
+		}
     });
 }

renderer/src/views/connect/index.ts

@@ -2,11 +2,12 @@ import { getTour, loadSetting } from "@/hook/setting";
 import { ElLoading } from "element-plus";
 import { pinkLog } from "../setting/util";
 import { mcpClientAdapter } from "./core";
+import { isConnecting } from "@/components/sidebar/connected";
 
 export async function initialise() {
 
 	pinkLog('准备请求设置');
-    
+
     const loading = ElLoading.service({
 		fullscreen: true,
 		lock: true,
@@ -27,4 +28,6 @@ export async function initialise() {
 
 	// loading panels
 	await mcpClientAdapter.loadPanels();
+
+	isConnecting.value = false;
 }

renderer/src/views/connect/index.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, computed, watch, toRef } from 'vue';
+import { defineComponent, computed } from 'vue';
 import ConnectionPanel from './connection-panel.vue';
 import { McpClient, mcpClientAdapter } from './core';
 import { ElMessage } from 'element-plus';
@@ -54,11 +54,13 @@ function selectServer(index: number) {
 	mcpClientAdapter.currentClientIndex = index;
 }
 
+
 function addServer() {
 	mcpClientAdapter.clients.push(new McpClient());
 	mcpClientAdapter.currentClientIndex = mcpClientAdapter.clients.length - 1;
 }
 
+
 const serverOptions = computed(() => {
     return mcpClientAdapter.clients.map((client, index) => ({
         value: index,

service/src/mcp/connect.service.ts

@@ -3,7 +3,7 @@ import { RequestClientType } from '../common';
 import { connect } from './client.service';
 import { RestfulResponse } from '../common/index.dto';
 import { McpOptions } from './client.dto';
-import { randomUUID } from 'node:crypto';
+import * as crypto from 'node:crypto';
 import path from 'node:path';
 import fs from 'node:fs';
 import * as os from 'os';
@@ -181,6 +181,24 @@ async function initNpm(option: McpOptions, cwd: string, webview?: PostMessageble
 }
 
 
+async function deterministicUUID(input: string) {
+    // 使用Web Crypto API进行哈希
+    const msgBuffer = new TextEncoder().encode(input);
+    const hashBuffer = await crypto.subtle.digest('SHA-1', msgBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    
+    // 格式化为UUID (版本5)
+    return [
+        hashHex.substring(0, 8),
+        hashHex.substring(8, 4),
+        '5' + hashHex.substring(13, 3), // 设置版本为5
+        '8' + hashHex.substring(17, 3), // 设置变体
+        hashHex.substring(20, 12)
+    ].join('-');
+}
+
+
 export async function connectService(
 	option: McpOptions,
 	webview?: PostMessageble
@@ -190,10 +208,16 @@ export async function connectService(
 		console.log('ready to connect', others);
 		
 		await preprocessCommand(option, webview);
+		
+		// 通过 option 字符串进行 hash，得到唯一的 uuid
+		const uuid = await deterministicUUID(JSON.stringify(option));
 
-		const client = await connect(option);
-		const uuid = randomUUID();
-		clientMap.set(uuid, client);
+		if (!clientMap.has(uuid)) {
+			const client = await connect(option);
+			clientMap.set(uuid, client);	
+		}
+
+		const client = clientMap.get(uuid)!;
 
 		const versionInfo = client.getServerVersion();