From 76a37bd50f28618a9bbc6f659bb9b9d01ec9b8bf Mon Sep 17 00:00:00 2001
From: Hu Gang <18768366022@163.com>
Date: Thu, 29 May 2025 15:33:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=88=9B=E5=BB=BAmcp?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/api/components/McpDrawer.vue | 43 +++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/views/api/components/McpDrawer.vue b/src/views/api/components/McpDrawer.vue
index 9e51747..ecc37ea 100644
--- a/src/views/api/components/McpDrawer.vue
+++ b/src/views/api/components/McpDrawer.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus';
-import { reactive, ref, watch } from 'vue';
+import { nextTick, reactive, ref, watch } from 'vue';
 import MonacoEditor from './MonacoEditor.vue';
 import defaultIcon from '@/assets/svgs/app_upload.svg';
 import { api } from '@/apis';
@@ -26,6 +26,28 @@ const emits = defineEmits<{
 
 const { t } = i18n.global;
 
+const COMMAND_TEMPLATE = {
+  command: '',
+  args: [],
+  env: [],
+  autoApprove: [],
+  autoInstall: true,
+  disabled: false,
+};
+const URL_TEMPLATE = {
+  url: '',
+  env: [],
+  autoApprove: [],
+  autoInstall: true,
+  disabled: false,
+};
+
+const mcpConfigTemplate = {
+  stdio: COMMAND_TEMPLATE,
+  sse: URL_TEMPLATE,
+  stream: URL_TEMPLATE,
+};
+
 const form = reactive<McpDetail>({
   icon: '',
   name: '',
@@ -129,15 +151,26 @@ async function getMcpServiceDetail(serviceId: string) {
   }
 }
 
+async function setMcpConfig(type: string) {
+  jsonEditorRef.value.setJsonValue(
+    JSON.stringify(mcpConfigTemplate[type], null, 2),
+  );
+}
+
 watch(
   () => props.visible,
   () => {
     if (props.visible) {
-      if (!props.serviceId) return;
+      if (!props.serviceId) {
+        nextTick(() => {
+          setMcpConfig(form.type);
+        });
+        return;
+      }
       getMcpServiceDetail(props.serviceId);
     } else {
       formRef.value && formRef.value.resetFields();
-      jsonEditorRef.value.setJsonValue('{\n  \n}');
+      setMcpConfig(form.type);
     }
   },
 );
@@ -147,7 +180,7 @@ watch(
     <el-drawer
       size="700"
       :title="
-        serviceId
+        !serviceId
           ? t('plugin_center.mcp.create_mcp')
           : t('plugin_center.mcp.edit_mcp')
       "
@@ -204,7 +237,7 @@ watch(
               prop="type"
               class="form-item"
             >
-              <el-radio-group v-model="form.type">
+              <el-radio-group v-model="form.type" @change="setMcpConfig">
                 <el-radio v-for="{ label, value } in mcpTypes" :value="value">
                   {{ label }}
                 </el-radio>
-- 
Gitee