From 4017fc32906692189214907246c3f869ed906b66 Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Wed, 21 May 2025 16:55:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=AE=8C=E6=88=90=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E8=AE=BE=E6=96=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 renderer/src/components/main-panel/panel.ts   |   5 +-
 .../main-panel/prompt/prompt-reader.vue       |  57 ++----
 .../main-panel/prompt/prompt-templates.vue    | 144 +++++++-------
 .../components/main-panel/prompt/prompts.ts   |  12 +-
 .../main-panel/resource/resouce-reader.vue    |  86 +++++----
 .../resource/resource-list-templates.vue      | 168 ++++++++---------
 .../main-panel/resource/resource-list.vue     | 175 ++++++++----------
 .../main-panel/resource/resources.ts          |  16 +-
 .../components/main-panel/tool/tool-list.vue  |  29 ++-
 .../src/components/main-panel/tool/tools.ts   |   1 +
 renderer/src/views/connect/core.ts            |  42 ++++-
 renderer/src/views/connect/type.ts            |   3 +
 12 files changed, 352 insertions(+), 386 deletions(-)

diff --git a/renderer/src/components/main-panel/panel.ts b/renderer/src/components/main-panel/panel.ts
index 6b914a0..b473fc7 100644
--- a/renderer/src/components/main-panel/panel.ts
+++ b/renderer/src/components/main-panel/panel.ts
@@ -70,7 +70,10 @@ export function createTab(type: string, index: number): Tab {
 		id,
 		componentIndex: -1,
 		component: undefined,
-		storage: {},
+		storage: {
+			// 默认打开一个 mcp server 的面板
+			activeNames: [0]
+		},
 	};
 }
 
diff --git a/renderer/src/components/main-panel/prompt/prompt-reader.vue b/renderer/src/components/main-panel/prompt/prompt-reader.vue
index 979d6fa..f829ac8 100644
--- a/renderer/src/components/main-panel/prompt/prompt-reader.vue
+++ b/renderer/src/components/main-panel/prompt/prompt-reader.vue
@@ -1,22 +1,15 @@
 <template>
     <div>
-        <h3>{{ currentPrompt.name }}</h3>
+        <h3>{{ currentPrompt?.name }}</h3>
     </div>
     <div class="prompt-reader-container">
         <el-form :model="tabStorage.formData" :rules="formRules" ref="formRef" label-position="top">
-            <el-form-item v-for="param in currentPrompt?.params" :key="param.name"
+            <el-form-item v-for="param in currentPrompt?.arguments" :key="param.name"
                 :label="param.name" :prop="param.name">
-                <el-input v-if="param.type === 'string'" v-model="tabStorage.formData[param.name]"
-                    :placeholder="param.placeholder || `请输入${param.name}`"
+                <el-input v-model="tabStorage.formData[param.name]"
+                    :placeholder="t('enter') +' ' + param.name"
                     @keydown.enter.prevent="handleSubmit"
-                    />
-
-                <el-input-number v-else-if="param.type === 'number'" v-model="tabStorage.formData[param.name]"
-                    :placeholder="param.placeholder || `请输入${param.name}`"
-                    @keydown.enter.prevent="handleSubmit"
-                    />
-
-                <el-switch v-else-if="param.type === 'boolean'" v-model="tabStorage.formData[param.name]" />
+                />
             </el-form-item>
 
             <el-form-item>
@@ -36,10 +29,8 @@ import { defineComponent, defineProps, defineEmits, watch, ref, computed, reacti
 import { useI18n } from 'vue-i18n';
 import type { FormInstance, FormRules } from 'element-plus';
 import { tabs } from '../panel';
-import { promptsManager, type PromptStorage } from './prompts';
+import type { PromptStorage } from './prompts';
 import type { PromptsGetResponse } from '@/hook/type';
-import { useMessageBridge } from '@/api/message-bridge';
-import { getDefaultValue, normaliseJavascriptType } from '@/hook/mcp';
 import { mcpClientAdapter } from '@/views/connect/core';
 
 defineComponent({ name: 'prompt-reader' });
@@ -65,6 +56,7 @@ if (props.tabId >= 0) {
     tabStorage = tabs.content[props.tabId].storage as PromptStorage;
 } else {
     tabStorage = reactive({
+        activeNames: [0],
         currentPromptName: props.currentPromptName || '',
         formData: {},
         lastPromptGetResponse: undefined
@@ -80,26 +72,18 @@ const loading = ref(false);
 const responseData = ref<PromptsGetResponse>();
 
 const currentPrompt = computed(() => {
-    const template = promptsManager.templates.find(template => template.name === tabStorage.currentPromptName);
-    const name = template?.name || '';
-    const params = template?.arguments || [];
 
-    const viewParams = params.map(param => ({
-        name: param.name,
-        type: 'string',
-        placeholder: t('enter') +' ' + param.name,
-        required: param.required
-    }));
-
-    return {
-        name,
-        params: viewParams
-    };
+    for (const client of mcpClientAdapter.clients) {
+        const prompt = client.promptTemplates?.get(tabStorage.currentPromptName);
+        if (prompt) {
+            return prompt;
+        }
+    }
 });
 
 const formRules = computed<FormRules>(() => {
     const rules: FormRules = {}
-    currentPrompt.value?.params.forEach(param => {
+    currentPrompt.value?.arguments.forEach(param => {
         rules[param.name] = [
             {
                 message: `${param.name} 是必填字段`,
@@ -112,15 +96,12 @@ const formRules = computed<FormRules>(() => {
 });
 
 const initFormData = () => {
-    
-    if (!currentPrompt.value?.params) return;
-
+    if (!currentPrompt.value?.arguments) return;
     const newSchemaDataForm: Record<string, number | boolean | string> = {};
 
-    currentPrompt.value.params.forEach(param => {
-        newSchemaDataForm[param.name] = getDefaultValue(param);
-        const originType = normaliseJavascriptType(typeof tabStorage.formData[param.name]);
-        if (tabStorage.formData[param.name]!== undefined && originType === param.type) {
+    currentPrompt.value.arguments.forEach(param => {
+        newSchemaDataForm[param.name] = '';
+        if (tabStorage.formData[param.name]!== undefined) {
             newSchemaDataForm[param.name] = tabStorage.formData[param.name];
         }
     });
@@ -134,7 +115,7 @@ const resetForm = () => {
 async function handleSubmit() {
 
     const res = await mcpClientAdapter.readPromptTemplate(
-        currentPrompt.value.name,
+        currentPrompt.value?.name || '',
         JSON.parse(JSON.stringify(tabStorage.formData))
     );
 
diff --git a/renderer/src/components/main-panel/prompt/prompt-templates.vue b/renderer/src/components/main-panel/prompt/prompt-templates.vue
index fedc451..8fed3f6 100644
--- a/renderer/src/components/main-panel/prompt/prompt-templates.vue
+++ b/renderer/src/components/main-panel/prompt/prompt-templates.vue
@@ -1,50 +1,54 @@
 <template>
-    <h3 class="resource-template">
-		<code>prompts/list</code>
-		<span
-			@click="reloadPrompts({ first: false })"
-			class="iconfont icon-restart"
-		></span>
-	</h3>
+	<el-collapse :expand-icon-position="'left'" v-model="tabStorage.activeNames">
+		<el-collapse-item v-for="(client, index) in mcpClientAdapter.clients" :name="index" :class="[]">
 
-	<div class="prompt-template-container-scrollbar">
-		<el-scrollbar height="500px">
-			<div class="prompt-template-container">
-				<div
-					class="item"
-                    :class="{ 'active': props.tabId >= 0 && tabStorage.currentPromptName === template.name }"
-					v-for="template of promptsManager.templates"
-					:key="template.name"
-                    @click="handleClick(template)"
-				>
-					<span>{{ template.name }}</span>
-					<span>{{ template.description || '' }}</span>
-				</div>
+			<!-- header -->
+			<template #title>
+				<h3 class="resource-template">
+					<code>prompts/list</code>
+					<span @click.stop="reloadPrompts(client, { first: false })" class="iconfont icon-restart"></span>
+				</h3>
+
+			</template>
+
+			<!-- body -->
+
+			<div class="prompt-template-container-scrollbar">
+				<el-scrollbar height="500px">
+					<div class="prompt-template-container">
+						<div class="item"
+							:class="{ 'active': props.tabId >= 0 && tabStorage.currentPromptName === template.name }"
+							v-for="template of client.promptTemplates?.values()" :key="template.name"
+							@click="handleClick(template)">
+							<span>{{ template.name }}</span>
+							<span>{{ template.description || '' }}</span>
+						</div>
+					</div>
+				</el-scrollbar>
 			</div>
-		</el-scrollbar>
-	</div>
+		</el-collapse-item>
+	</el-collapse>
 </template>
 
 <script setup lang="ts">
-import { useMessageBridge } from '@/api/message-bridge';
-import type { CasualRestAPI, PromptTemplate, PromptsListResponse } from '@/hook/type';
-import { onMounted, onUnmounted, defineProps, defineEmits, reactive } from 'vue';
+import type { PromptTemplate } from '@/hook/type';
+import { onMounted, defineProps, defineEmits, reactive, ref, type Reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { promptsManager, type PromptStorage } from './prompts';
+import type { PromptStorage } from './prompts';
 import { tabs } from '../panel';
 import { ElMessage } from 'element-plus';
+import { McpClient, mcpClientAdapter } from '@/views/connect/core';
 
-const bridge = useMessageBridge();
 const { t } = useI18n();
 
 const props = defineProps({
-    tabId: {
-        type: Number,
-        required: true
-    }
+	tabId: {
+		type: Number,
+		required: true
+	}
 });
 
-const emits = defineEmits([ 'prompt-selected' ]);
+const emits = defineEmits(['prompt-selected']);
 
 let tabStorage: PromptStorage;
 
@@ -53,63 +57,51 @@ if (props.tabId >= 0) {
 	tabStorage = tab.storage as PromptStorage;
 } else {
 	tabStorage = reactive({
+		activeNames: [0],
 		currentPromptName: '',
 		formData: {},
 		lastPromptGetResponse: undefined
 	});
 }
 
-function reloadPrompts(option: { first: boolean }) {    
-    bridge.postMessage({
-        command: 'prompts/list'
-    });
+async function reloadPrompts(client: Reactive<McpClient>, option: { first: boolean }) {
+	await client.getPromptTemplates({ cache: false });
 
-    if (!option.first) {
-        ElMessage({
-            message: t('finish-refresh'),
-            type: 'success',
+	if (!option.first) {
+		ElMessage({
+			message: t('finish-refresh'),
+			type: 'success',
 			duration: 3000,
 			showClose: true,
-        });
-    }
+		});
+	}
 }
 
 function handleClick(prompt: PromptTemplate) {
-    tabStorage.currentPromptName = prompt.name;
-    tabStorage.lastPromptGetResponse = undefined;
-
-    emits('prompt-selected', prompt);
+	tabStorage.currentPromptName = prompt.name;
+	tabStorage.lastPromptGetResponse = undefined;
+	emits('prompt-selected', prompt);
 }
 
-let commandCancel: (() => void);
+onMounted(async () => {
+	for (const client of mcpClientAdapter.clients) {
+		await client.getPromptTemplates();
+	}
 
-onMounted(() => {
-    commandCancel = bridge.addCommandListener('prompts/list', (data: CasualRestAPI<PromptsListResponse>) => {
-		promptsManager.templates = data.msg.prompts || [];
-
-		const targetPrompt = promptsManager.templates.find(template => template.name === tabStorage.currentPromptName);
-
-        if (targetPrompt === undefined) {
-            tabStorage.currentPromptName = promptsManager.templates[0].name;
-            tabStorage.lastPromptGetResponse = undefined;
-        }
-	}, { once: false });
-
-    reloadPrompts({ first: true });
+	if (tabStorage.currentPromptName === undefined) {
+		const masterNode = mcpClientAdapter.masterNode;
+		const prompt = masterNode.promptTemplates?.values().next();
+		tabStorage.currentPromptName = prompt?.value?.name || '';
+	}
 });
 
-onUnmounted(() => {
-    if (commandCancel){
-        commandCancel();
-    }
-})
 
 </script>
 
 <style>
 .prompt-template-container-scrollbar {
 	background-color: var(--background);
-    margin-bottom: 10px;
+	margin-bottom: 10px;
 	border-radius: .5em;
 }
 
@@ -121,17 +113,17 @@ onUnmounted(() => {
 }
 
 .prompt-template-function-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .prompt-template-function-container button {
-    width: 175px;
+	width: 175px;
 }
 
-.prompt-template-container > .item {
+.prompt-template-container>.item {
 	margin: 3px;
 	padding: 5px 10px;
 	border-radius: .3em;
@@ -143,24 +135,24 @@ onUnmounted(() => {
 	transition: var(--animation-3s);
 }
 
-.prompt-template-container > .item:hover {
+.prompt-template-container>.item:hover {
 	background-color: var(--main-light-color);
 	transition: var(--animation-3s);
 }
 
-.prompt-template-container > .item.active {
+.prompt-template-container>.item.active {
 	background-color: var(--main-light-color);
 	transition: var(--animation-3s);
 }
 
-.prompt-template-container > .item > span:first-child {
+.prompt-template-container>.item>span:first-child {
 	max-width: 200px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.prompt-template-container > .item > span:last-child {
+.prompt-template-container>.item>span:last-child {
 	opacity: 0.6;
 	font-size: 12.5px;
 	max-width: 200px;
diff --git a/renderer/src/components/main-panel/prompt/prompts.ts b/renderer/src/components/main-panel/prompt/prompts.ts
index 6828d0c..f4dfa9a 100644
--- a/renderer/src/components/main-panel/prompt/prompts.ts
+++ b/renderer/src/components/main-panel/prompt/prompts.ts
@@ -1,15 +1,7 @@
-import type { PromptsGetResponse, PromptTemplate } from '@/hook/type';
-import { reactive } from 'vue';
-
-export const promptsManager = reactive<{
-    current: PromptTemplate | undefined
-    templates: PromptTemplate[]
-}>({
-    current: undefined,
-    templates: []
-});
+import type { PromptsGetResponse } from '@/hook/type';
 
 export interface PromptStorage {
+    activeNames: any[];
     currentPromptName: string;
     lastPromptGetResponse?: PromptsGetResponse;
     formData: Record<string, any>;
diff --git a/renderer/src/components/main-panel/resource/resouce-reader.vue b/renderer/src/components/main-panel/resource/resouce-reader.vue
index 7e60aac..02fe0ef 100644
--- a/renderer/src/components/main-panel/resource/resouce-reader.vue
+++ b/renderer/src/components/main-panel/resource/resouce-reader.vue
@@ -1,19 +1,15 @@
 <template>
     <div>
-        <h3>{{ currentResource.template?.name }}</h3>
+        <h3>{{ currentResource?.name }}</h3>
     </div>
     <div class="resource-reader-container">
         <el-form :model="tabStorage.formData" :rules="formRules" ref="formRef" label-position="top">
-            <el-form-item v-for="param in currentResource?.params" :key="param.name" :label="param.name"
-                :prop="param.name">
-                <!-- 根据不同类型渲染不同输入组件 -->
-                <el-input v-if="param.type === 'string'" v-model="tabStorage.formData[param.name]"
-                    :placeholder="param.placeholder || `请输入${param.name}`" @keydown.enter.prevent="handleSubmit" />
-
-                <el-input-number v-else-if="param.type === 'number'" v-model="tabStorage.formData[param.name]"
-                    :placeholder="param.placeholder || `请输入${param.name}`" @keydown.enter.prevent="handleSubmit" />
-
-                <el-switch v-else-if="param.type === 'boolean'" v-model="tabStorage.formData[param.name]" />
+            <el-form-item v-for="param in currentResource?.params" :key="param" :label="param"
+                :prop="param">
+                <el-input v-model="tabStorage.formData[param]"
+                    :placeholder="t('enter') + ' ' + param"
+                    @keydown.enter.prevent="handleSubmit"
+                />
             </el-form-item>
 
             <el-form-item v-if="tabStorage.currentType === 'template'">
@@ -38,9 +34,8 @@ import { defineComponent, defineProps, watch, ref, computed, reactive, defineEmi
 import { useI18n } from 'vue-i18n';
 import type { FormInstance, FormRules } from 'element-plus';
 import { tabs } from '../panel';
-import { parseResourceTemplate, resourcesManager, type ResourceStorage } from './resources';
+import { parseResourceTemplate, type ResourceStorage } from './resources';
 import type{ ResourcesReadResponse } from '@/hook/type';
-import { useMessageBridge } from '@/api/message-bridge';
 import { getDefaultValue, normaliseJavascriptType } from '@/hook/mcp';
 import { mcpClientAdapter } from '@/views/connect/core';
 
@@ -68,6 +63,8 @@ if (props.tabId >= 0) {
     tabStorage = tab.storage as ResourceStorage;
 } else {
     tabStorage = reactive({
+        activeNames: [0],
+		templateActiveNames: [0],
         currentType: 'resource',
         currentResourceName: props.currentResourceName || '',
         formData: {},
@@ -86,30 +83,39 @@ const responseData = ref<ResourcesReadResponse>();
 
 // 当前 resource 的模板参数
 const currentResource = computed(() => {
-    const template = resourcesManager.templates.find(template => template.name === tabStorage.currentResourceName);
-    const { params, fill } = parseResourceTemplate(template?.uriTemplate || '');
 
-    const viewParams = params.map(param => ({
-        name: param,
-        type: 'string',
-        placeholder: t('enter') + ' ' + param,
-        required: true
-    }));
+    for (const client of mcpClientAdapter.clients) {
+        const resource = client.resources?.get(tabStorage.currentResourceName);
+        if (resource) {
+            return {
+                name: resource.name,
+                template: resource,
+                params: [],
+                // resources 用不到 fill 函数
+                fill: () => ''
+            };
+        }
 
-    return {
-        template,
-        params: viewParams,
-        fill
-    };
+        const resourceTemplate = client.resourceTemplates?.get(tabStorage.currentResourceName);
+        if (resourceTemplate) {
+            const { params, fill } = parseResourceTemplate(resourceTemplate.uriTemplate);
+            return {
+                name: resourceTemplate.name,
+                template: resourceTemplate,
+                params,
+                fill
+            };
+        }
+    }
 });
 
 // 表单验证规则
 const formRules = computed<FormRules>(() => {
     const rules: FormRules = {}
     currentResource.value?.params.forEach(param => {
-        rules[param.name] = [
+        rules[param] = [
             {
-                message: `${param.name} 是必填字段`,
+                message: `${param} 是必填字段`,
                 trigger: 'blur'
             }
         ]
@@ -121,15 +127,11 @@ const formRules = computed<FormRules>(() => {
 // 初始化表单数据
 const initFormData = () => {
     if (!currentResource.value?.params) return;
-
     const newSchemaDataForm: Record<string, number | boolean | string> = {};
-
     currentResource.value.params.forEach(param => {
-        newSchemaDataForm[param.name] = getDefaultValue(param);
-        const originType = normaliseJavascriptType(typeof tabStorage.formData[param.name]);
-
-        if (tabStorage.formData[param.name] !== undefined && originType === param.type) {
-            newSchemaDataForm[param.name] = tabStorage.formData[param.name];
+        newSchemaDataForm[param] = '';
+        if (tabStorage.formData[param] !== undefined) {
+            newSchemaDataForm[param] = tabStorage.formData[param];
         }
     })
 }
@@ -142,21 +144,23 @@ const resetForm = () => {
 
 function getUri() {
     if (tabStorage.currentType === 'template') {
-        const fillFn = currentResource.value.fill;
+        const fillFn = currentResource.value?.fill || ((str: any) => str);
         const uri = fillFn(tabStorage.formData);
         return uri;
     }
-
-    const currentResourceName = props.tabId >= 0 ? tabStorage.currentResourceName : props.currentResourceName;
-    const targetResource = resourcesManager.resources.find(resources => resources.name === currentResourceName);
-    return targetResource?.uri;
+    
+    for (const client of mcpClientAdapter.clients) {
+        const resource = client.resources?.get(tabStorage.currentResourceName);
+        if (resource) {
+            return resource.uri;
+        }
+    }
 }
 
 // 提交表单
 async function handleSubmit() {
     const uri = getUri();
     const res = await mcpClientAdapter.readResource(uri);
-
     tabStorage.lastResourceReadResponse = res;
     emits('resource-get-response', res);
 }
diff --git a/renderer/src/components/main-panel/resource/resource-list-templates.vue b/renderer/src/components/main-panel/resource/resource-list-templates.vue
index e4eb813..ba0e76e 100644
--- a/renderer/src/components/main-panel/resource/resource-list-templates.vue
+++ b/renderer/src/components/main-panel/resource/resource-list-templates.vue
@@ -1,130 +1,125 @@
 <template>
-    <h3 class="resource-template">
-		<code>resources/templates/list</code>
-		<span
-			class="iconfont icon-restart"
-			@click="reloadResources({ first: false })"
-		></span>
-	</h3>
+	<el-collapse :expand-icon-position="'left'" v-model="tabStorage.templateActiveNames">
+		<el-collapse-item v-for="(client, index) in mcpClientAdapter.clients" :name="index" :class="[]">
 
-	<div class="resource-template-container-scrollbar">
-		<el-scrollbar height="500px" v-if="resourcesManager.templates.length > 0">
-			<div class="resource-template-container">
-				<div
-					class="item"
-                    :class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'template' && tabStorage.currentResourceName === template.name }"
-					v-for="template of resourcesManager.templates"
-					:key="template.name"
-                    @click="handleClick(template)"
-				>
-					<span>{{ template.name }}</span>
-					<span>{{ template.description || '' }}</span>
+			<!-- header -->
+			<template #title>
+				<h3 class="resource-template">
+					<code>resources/templates/list</code>
+					<span class="iconfont icon-restart" @click="reloadResources(client, { first: false })"></span>
+				</h3>
+			</template>
+
+			<!-- body -->
+			<div class="resource-template-container-scrollbar">
+				<el-scrollbar height="500px" v-if="(client.resourceTemplates?.size || 0) > 0">
+					<div class="resource-template-container">
+						<div class="item"
+							:class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'template' && tabStorage.currentResourceName === template.name }"
+							v-for="template of client.resourceTemplates?.values()" :key="template.name"
+							@click="handleClick(template)">
+							<span>{{ template.name }}</span>
+							<span>{{ template.description || '' }}</span>
+						</div>
+					</div>
+				</el-scrollbar>
+				<div v-else style="padding: 10px;">
+					empty
 				</div>
 			</div>
-		</el-scrollbar>
-		<div v-else style="padding: 10px;">
-			empty
-		</div>
-	</div>
+		</el-collapse-item>
+	</el-collapse>
+
 </template>
 
 <script setup lang="ts">
 import { useMessageBridge } from '@/api/message-bridge';
 import type { CasualRestAPI, ResourceTemplate, ResourceTemplatesListResponse } from '@/hook/type';
-import { onMounted, onUnmounted, defineProps, ref, reactive } from 'vue';
+import { onMounted, onUnmounted, defineProps, ref, reactive, type Reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { resourcesManager, type ResourceStorage } from './resources';
+import type { ResourceStorage } from './resources';
 import { tabs } from '../panel';
 import { ElMessage } from 'element-plus';
+import { McpClient, mcpClientAdapter } from '@/views/connect/core';
 
 const bridge = useMessageBridge();
 const { t } = useI18n();
 
 const props = defineProps({
-    tabId: {
-        type: Number,
-        required: true
-    }
+	tabId: {
+		type: Number,
+		required: true
+	}
 });
 
 let tabStorage: ResourceStorage;
 
 if (props.tabId >= 0) {
-    const tab = tabs.content[props.tabId];
-    tabStorage = tab.storage as ResourceStorage;
+	const tab = tabs.content[props.tabId];
+	tabStorage = tab.storage as ResourceStorage;
 } else {
-    tabStorage = reactive({
-        currentType:'template',
-        currentResourceName: '',
-        formData: {},
-        lastResourceReadResponse: undefined
-    });
+	tabStorage = reactive({
+		activeNames: [0],
+		templateActiveNames: [0],
+		currentType: 'template',
+		currentResourceName: '',
+		formData: {},
+		lastResourceReadResponse: undefined
+	});
 }
 
-function reloadResources(option: { first: boolean }) {    
-    bridge.postMessage({
-        command: 'resources/templates/list'
-    });
+async function reloadResources(client: Reactive<McpClient>, option: { first: boolean }) {
 
-    if (!option.first) {
-        ElMessage({
-            message: t('finish-refresh'),
-            type: 'success',
+	await client.getResourceTemplates({ cache: false });
+
+	if (!option.first) {
+		ElMessage({
+			message: t('finish-refresh'),
+			type: 'success',
 			duration: 3000,
 			showClose: true,
-        });
-    }
+		});
+	}
 }
 
 function handleClick(template: ResourceTemplate) {
 	tabStorage.currentType = 'template';
-    tabStorage.currentResourceName = template.name;
-    tabStorage.lastResourceReadResponse = undefined;
+	tabStorage.currentResourceName = template.name;
+	tabStorage.lastResourceReadResponse = undefined;
 }
 
-let commandCancel: (() => void);
+onMounted(async () => {
+	for (const client of mcpClientAdapter.clients) {
+		await client.getResourceTemplates({ cache: false });
+	}
 
-onMounted(() => {
-    commandCancel = bridge.addCommandListener('resources/templates/list', (data: CasualRestAPI<ResourceTemplatesListResponse>) => {
-		resourcesManager.templates = data.msg.resourceTemplates || [];
-
-		if (tabStorage.currentType === 'template') {
-			const targetResource = resourcesManager.templates.find(template => template.name === tabStorage.currentResourceName);
-			if (targetResource === undefined) {
-				tabStorage.currentResourceName = resourcesManager.templates[0]?.name;
-				tabStorage.lastResourceReadResponse = undefined;
-			}
-		}
-	}, { once: false });
-
-    reloadResources({ first: true });
+	if (tabStorage.currentResourceName === undefined && tabStorage.currentType === 'template') {
+		const masterNode = mcpClientAdapter.masterNode;
+		const resourceTemplate = masterNode?.resourceTemplates?.values().next();
+		tabStorage.currentResourceName = resourceTemplate?.value?.name || '';
+	}
 });
 
-onUnmounted(() => {
-    if (commandCancel){
-        commandCancel();
-    }
-})
 </script>
 
 <style>
 h3.resource-template {
-    display: flex;
-    align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 h3.resource-template .iconfont.icon-restart {
-    margin-left: 10px;
-    cursor: pointer;
+	margin-left: 10px;
+	cursor: pointer;
 }
 
 h3.resource-template .iconfont.icon-restart:hover {
-    color: var(--main-color);
+	color: var(--main-color);
 }
 
 .resource-template-container-scrollbar {
 	background-color: var(--background);
-    margin-bottom: 10px;
+	margin-bottom: 10px;
 	border-radius: .5em;
 }
 
@@ -136,17 +131,17 @@ h3.resource-template .iconfont.icon-restart:hover {
 }
 
 .resource-template-function-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .resource-template-function-container button {
-    width: 175px;
+	width: 175px;
 }
 
-.resource-template-container > .item {
+.resource-template-container>.item {
 	margin: 3px;
 	padding: 5px 10px;
 	border-radius: .3em;
@@ -158,24 +153,24 @@ h3.resource-template .iconfont.icon-restart:hover {
 	transition: var(--animation-3s);
 }
 
-.resource-template-container > .item:hover {
+.resource-template-container>.item:hover {
 	background-color: var(--main-light-color);
 	transition: var(--animation-3s);
 }
 
-.resource-template-container > .item.active {
+.resource-template-container>.item.active {
 	background-color: var(--main-light-color);
 	transition: var(--animation-3s);
 }
 
-.resource-template-container > .item > span:first-child {
+.resource-template-container>.item>span:first-child {
 	max-width: 200px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.resource-template-container > .item > span:last-child {
+.resource-template-container>.item>span:last-child {
 	opacity: 0.6;
 	font-size: 12.5px;
 	max-width: 200px;
@@ -183,5 +178,4 @@ h3.resource-template .iconfont.icon-restart:hover {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-
 </style>
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/resource/resource-list.vue b/renderer/src/components/main-panel/resource/resource-list.vue
index 59af8be..8b5122c 100644
--- a/renderer/src/components/main-panel/resource/resource-list.vue
+++ b/renderer/src/components/main-panel/resource/resource-list.vue
@@ -1,137 +1,127 @@
 <template>
-    <h3 class="resource-template">
-		<code>resources/list</code>
-		<span
-			class="iconfont icon-restart"
-			@click="reloadResources({ first: false })"
-		></span>
-	</h3>
+	<el-collapse :expand-icon-position="'left'" v-model="tabStorage.activeNames">
+		<el-collapse-item v-for="(client, index) in mcpClientAdapter.clients" :name="index" :class="[]">
 
-	<div class="resource-template-container-scrollbar">
-		<el-scrollbar height="500px">
-			<div class="resource-template-container">
-				<div
-					class="item"
-                    :class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'resource' && tabStorage.currentResourceName === resource.name }"
-					v-for="resource of resourcesManager.resources"
-					:key="resource.uri"
-                    @click="handleClick(resource)"
-				>
-                    <span>{{ resource.name }}</span>
-                    <span>{{ resource.mimeType }}</span>
-				</div>
+			<!-- header -->
+			<template #title>
+				<h3 class="resource-template">
+					<code>resources/list</code>
+					<span class="iconfont icon-restart" @click="reloadResources(client, { first: false })"></span>
+				</h3>
+			</template>
+
+			<!-- body -->
+			<div class="resource-template-container-scrollbar">
+				<el-scrollbar height="500px">
+					<div class="resource-template-container">
+						<div class="item"
+							:class="{ 'active': props.tabId >= 0 && tabStorage.currentType === 'resource' && tabStorage.currentResourceName === resource.name }"
+							v-for="resource of client.resources?.values()" :key="resource.uri"
+							@click="handleClick(resource)">
+							<span>{{ resource.name }}</span>
+							<span>{{ resource.mimeType }}</span>
+						</div>
+					</div>
+				</el-scrollbar>
 			</div>
-		</el-scrollbar>
-	</div>
+		</el-collapse-item>
+	</el-collapse>
 </template>
 
 <script setup lang="ts">
-import { useMessageBridge } from '@/api/message-bridge';
-import type { CasualRestAPI, Resources, ResourcesListResponse } from '@/hook/type';
-import { onMounted, onUnmounted, defineProps, defineEmits, reactive } from 'vue';
+import type { Resources } from '@/hook/type';
+import { onMounted, defineProps, defineEmits, reactive, type Reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { resourcesManager, type ResourceStorage } from './resources';
+import type { ResourceStorage } from './resources';
 import { tabs } from '../panel';
 import { ElMessage } from 'element-plus';
+import { McpClient, mcpClientAdapter } from '@/views/connect/core';
 
-const bridge = useMessageBridge();
 const { t } = useI18n();
 
 const props = defineProps({
-    tabId: {
-        type: Number,
-        required: true
-    }
+	tabId: {
+		type: Number,
+		required: true
+	}
 });
 
-const emits = defineEmits([ 'resource-selected' ]);
+const emits = defineEmits(['resource-selected']);
 
 let tabStorage: ResourceStorage;
 
 if (props.tabId >= 0) {
-    const tab = tabs.content[props.tabId];
-    tabStorage = tab.storage as ResourceStorage;
+	const tab = tabs.content[props.tabId];
+	tabStorage = tab.storage as ResourceStorage;
 } else {
-    tabStorage = reactive({
-        currentType:'resource',
-        currentResourceName: '',
-        formData: {},
-        lastResourceReadResponse: undefined
-    });
+	tabStorage = reactive({
+		activeNames: [0],
+		templateActiveNames: [0],
+		currentType: 'resource',
+		currentResourceName: '',
+		formData: {},
+		lastResourceReadResponse: undefined
+	});
 }
 
-function reloadResources(option: { first: boolean }) {    
-    bridge.postMessage({
-        command: 'resources/list'
-    });
+async function reloadResources(client: Reactive<McpClient>, option: { first: boolean }) {
+	await client.getResources({ cache: false });
 
-    if (!option.first) {
-        ElMessage({
-            message: t('finish-refresh'),
-            type: 'success',
+	if (!option.first) {
+		ElMessage({
+			message: t('finish-refresh'),
+			type: 'success',
 			duration: 3000,
 			showClose: true,
-        });
-    }
+		});
+	}
 }
 
 async function handleClick(resource: Resources) {
-    tabStorage.currentType = 'resource';
-    tabStorage.currentResourceName = resource.name;
-    tabStorage.lastResourceReadResponse = undefined;
+	tabStorage.currentType = 'resource';
+	tabStorage.currentResourceName = resource.name;
+	tabStorage.lastResourceReadResponse = undefined;
 	emits('resource-selected', resource);
 
 	// 更新资源
 	if (props.tabId >= 0) {
-		const bridge = useMessageBridge();
-		const { code, msg } = await bridge.commandRequest('resources/read', { resourceUri: resource.uri });
-		tabStorage.lastResourceReadResponse = msg;
+		const res = await mcpClientAdapter.readResource(resource.uri);
+		tabStorage.lastResourceReadResponse = res;
 	}
 }
 
-let commandCancel: (() => void);
+onMounted(async () => {
+	for (const client of mcpClientAdapter.clients) {
+		await client.getResources();
+	}
 
-onMounted(() => {
-    commandCancel = bridge.addCommandListener('resources/list', (data: CasualRestAPI<ResourcesListResponse>) => {
-		resourcesManager.resources = data.msg.resources || [];
-
-		if (tabStorage.currentType === 'resource') {
-            const targetResource = resourcesManager.resources.find(resources => resources.name === tabStorage.currentResourceName);
-            if (targetResource === undefined) {
-                tabStorage.currentResourceName = resourcesManager.templates[0]?.name;
-                tabStorage.lastResourceReadResponse = undefined;
-            }
-        }
-	}, { once: false });
-
-    reloadResources({ first: true });
+	if (tabStorage.currentResourceName === undefined && tabStorage.currentType === 'resource') {
+		const masterNode = mcpClientAdapter.masterNode;
+		const resource = masterNode.resources?.values().next();
+		tabStorage.currentResourceName = resource?.value?.name || '';
+	}
 });
 
-onUnmounted(() => {
-    if (commandCancel){
-        commandCancel();
-    }
-})
 </script>
 
 <style>
 h3.resource-template {
-    display: flex;
-    align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 h3.resource-template .iconfont.icon-restart {
-    margin-left: 10px;
-    cursor: pointer;
+	margin-left: 10px;
+	cursor: pointer;
 }
 
 h3.resource-template .iconfont.icon-restart:hover {
-    color: var(--main-color);
+	color: var(--main-color);
 }
 
 .resource-template-container-scrollbar {
 	background-color: var(--background);
-    margin-bottom: 10px;
+	margin-bottom: 10px;
 	border-radius: .5em;
 }
 
@@ -143,17 +133,17 @@ h3.resource-template .iconfont.icon-restart:hover {
 }
 
 .resource-template-function-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .resource-template-function-container button {
-    width: 175px;
+	width: 175px;
 }
 
-.resource-template-container > .item {
+.resource-template-container>.item {
 	margin: 3px;
 	padding: 5px 10px;
 	border-radius: .3em;
@@ -165,24 +155,24 @@ h3.resource-template .iconfont.icon-restart:hover {
 	transition: var(--animation-3s);
 }
 
-.resource-template-container > .item:hover {
+.resource-template-container>.item:hover {
 	background-color: var(--main-light-color);
 	transition: var(--animation-3s);
 }
 
-.resource-template-container > .item.active {
+.resource-template-container>.item.active {
 	background-color: var(--main-light-color);
 	transition: var(--animation-3s);
 }
 
-.resource-template-container > .item > span:first-child {
+.resource-template-container>.item>span:first-child {
 	max-width: 200px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.resource-template-container > .item > span:last-child {
+.resource-template-container>.item>span:last-child {
 	opacity: 0.6;
 	font-size: 12.5px;
 	max-width: 200px;
@@ -190,5 +180,4 @@ h3.resource-template .iconfont.icon-restart:hover {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-
 </style>
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/resource/resources.ts b/renderer/src/components/main-panel/resource/resources.ts
index e77f79b..2e148f3 100644
--- a/renderer/src/components/main-panel/resource/resources.ts
+++ b/renderer/src/components/main-panel/resource/resources.ts
@@ -1,18 +1,8 @@
-import type { ResourcesReadResponse, ResourceTemplate, Resources } from '@/hook/type';
-import { reactive } from 'vue';
-
-
-export const resourcesManager = reactive<{
-    current: ResourceTemplate | undefined
-    templates: ResourceTemplate[],
-    resources: Resources[]
-}>({
-    current: undefined,
-    templates: [],
-    resources: []
-});
+import type { ResourcesReadResponse } from '@/hook/type';
 
 export interface ResourceStorage {
+    activeNames: any[];
+    templateActiveNames: any[];
     currentType: 'resource' | 'template';
     currentResourceName: string;
     lastResourceReadResponse?: ResourcesReadResponse;
diff --git a/renderer/src/components/main-panel/tool/tool-list.vue b/renderer/src/components/main-panel/tool/tool-list.vue
index 6ec415e..d59cd02 100644
--- a/renderer/src/components/main-panel/tool/tool-list.vue
+++ b/renderer/src/components/main-panel/tool/tool-list.vue
@@ -1,18 +1,16 @@
 <template>
-
-    <el-collapse :expand-icon-position="'left'" v-model="activeNames">
+    <el-collapse :expand-icon-position="'left'" v-model="tabStorage.activeNames">
         <el-collapse-item v-for="(client, index) in mcpClientAdapter.clients" :name="index" :class="[]">
 
             <!-- header -->
             <template #title>
                 <h3 class="resource-template">
                     <code>tools/list</code>
-                    <span class="iconfont icon-restart" @click="reloadTools({ first: false })"></span>
+                    <span class="iconfont icon-restart" @click.stop="reloadTools(client, { first: false })"></span>
                 </h3>
             </template>
 
             <!-- body -->
-
             <div class="tool-list-container-scrollbar">
                 <el-scrollbar height="500px">
                     <div class="tool-list-container">
@@ -29,16 +27,13 @@
 </template>
 
 <script setup lang="ts">
-import { useMessageBridge } from '@/api/message-bridge';
-import type { CasualRestAPI, ToolsListResponse } from '@/hook/type';
-import { onMounted, onUnmounted, defineProps, ref } from 'vue';
+import { onMounted, defineProps, ref, type Reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ToolStorage } from './tools';
 import { tabs } from '../panel';
 import { ElMessage } from 'element-plus';
-import { mcpClientAdapter } from '@/views/connect/core';
+import { McpClient, mcpClientAdapter } from '@/views/connect/core';
 
-const bridge = useMessageBridge();
 const { t } = useI18n();
 
 const props = defineProps({
@@ -51,12 +46,8 @@ const props = defineProps({
 const tab = tabs.content[props.tabId];
 const tabStorage = tab.storage as ToolStorage;
 
-const activeNames = ref<any[]>([0]);
-
-function reloadTools(option: { first: boolean }) {
-    bridge.postMessage({
-        command: 'tools/list'
-    });
+async function reloadTools(client: Reactive<McpClient>, option: { first: boolean }) {
+    await client.getTools({ cache: false });
 
     if (!option.first) {
         ElMessage({
@@ -69,8 +60,6 @@ function reloadTools(option: { first: boolean }) {
 }
 
 function handleClick(tool: { name: string }) {
-    console.log('enter');
-    
     tabStorage.currentToolName = tool.name;
     tabStorage.lastToolCallResponse = undefined;
 }
@@ -79,6 +68,12 @@ onMounted(async () => {
     for (const client of mcpClientAdapter.clients) {
         await client.getTools();
     }
+
+    if (tabStorage.currentToolName === undefined) {
+        const masterNode = mcpClientAdapter.masterNode;
+        const tool = masterNode.tools?.values().next();
+        tabStorage.currentToolName = tool?.value?.name || '';
+    }
 });
 
 </script>
diff --git a/renderer/src/components/main-panel/tool/tools.ts b/renderer/src/components/main-panel/tool/tools.ts
index b84f7cd..de46429 100644
--- a/renderer/src/components/main-panel/tool/tools.ts
+++ b/renderer/src/components/main-panel/tool/tools.ts
@@ -4,6 +4,7 @@ import type { ToolsListResponse, ToolCallResponse, CasualRestAPI } from '@/hook/
 import { mcpClientAdapter } from '@/views/connect/core';
 
 export interface ToolStorage {
+    activeNames: any[];
     currentToolName: string;
     lastToolCallResponse?: ToolCallResponse | string;
     formData: Record<string, any>;
diff --git a/renderer/src/views/connect/core.ts b/renderer/src/views/connect/core.ts
index 6bb004a..bdff612 100644
--- a/renderer/src/views/connect/core.ts
+++ b/renderer/src/views/connect/core.ts
@@ -1,6 +1,6 @@
 import { useMessageBridge } from "@/api/message-bridge";
 import { reactive, type Reactive } from "vue";
-import type { IConnectionResult, ConnectionTypeOptionItem, IConnectionArgs, IConnectionEnvironment, McpOptions } from "./type";
+import type { IConnectionResult, ConnectionTypeOptionItem, IConnectionArgs, IConnectionEnvironment, McpOptions, McpClientGetCommonOption } from "./type";
 import { ElMessage } from "element-plus";
 import { loadPanels } from "@/hook/panel";
 import { getPlatform } from "@/api/platform";
@@ -111,8 +111,13 @@ export class McpClient {
         return env;
     }
 
-    public async getTools() {
-        if (this.tools) {
+    public async getTools(option?: McpClientGetCommonOption) {
+
+        const {
+            cache = true
+        } = option || {};
+
+        if (cache && this.tools) {
             return this.tools;
         }
 
@@ -131,14 +136,20 @@ export class McpClient {
         return this.tools;
     }
 
-    public async getPromptTemplates() {
-        if (this.promptTemplates) {
+    public async getPromptTemplates(option?: McpClientGetCommonOption) {
+
+        const {
+            cache = true
+        } = option || {};
+
+        if (cache && this.promptTemplates) {
             return this.promptTemplates;
         }
 
         const bridge = useMessageBridge();
         
-        const { code, msg } = await bridge.commandRequest<PromptsListResponse>('prompts/list', { clientId: this.clientId });
+        const { code, msg } = await bridge.commandRequest<PromptsListResponse>('prompts/list', { clientId: this.clientId });        
+
         if (code!== 200) {
             return new Map<string, PromptTemplate>();
         }
@@ -151,8 +162,13 @@ export class McpClient {
         return this.promptTemplates;
     }
 
-    public async getResources() {
-        if (this.resources) {
+    public async getResources(option?: McpClientGetCommonOption) {
+
+        const {
+            cache = true
+        } = option || {};
+
+        if (cache && this.resources) {
             return this.resources;
         }
 
@@ -170,8 +186,13 @@ export class McpClient {
         return this.resources;
     }
 
-    public async getResourceTemplates() {
-        if (this.resourceTemplates) {
+    public async getResourceTemplates(option?: McpClientGetCommonOption) {
+
+        const {
+            cache = true
+        } = option || {};
+
+        if (cache && this.resourceTemplates) {
             return this.resourceTemplates;
         }
 
@@ -184,6 +205,7 @@ export class McpClient {
         this.resourceTemplates = new Map<string, ResourceTemplate>();
         msg.resourceTemplates.forEach(template => {
             this.resourceTemplates!.set(template.name, template);
+
         });
         return this.resourceTemplates;
     }
diff --git a/renderer/src/views/connect/type.ts b/renderer/src/views/connect/type.ts
index c183b85..76c3eaf 100644
--- a/renderer/src/views/connect/type.ts
+++ b/renderer/src/views/connect/type.ts
@@ -71,3 +71,6 @@ export interface ConnectionResult {
     version: string
 }
 
+export interface McpClientGetCommonOption {
+    cache: boolean;
+}
\ No newline at end of file