fix: review

Author: hexqi

docs/advanced-features/new-ai-plugin-usage.md

@@ -252,17 +252,32 @@ customCompatibleAIModels: [
 在options参数中可以通过如下参数配置MCP:
 - mcpConfig.mcpServers: 该参数配置添加自定义MCP 服务器，添加后的 MCP 服务器可以在AI插件的Sender输入框MCP配置中进行管理（控制服务器开关、查看并切换工具开关）。
 配置示例格式如下：
-```javascript
-mcpConfig: {
+```typescript
+interface McpServerConfig {
+  type: 'SSE' | 'StreamableHttp'; // 必填，仅支持两种类型
+  url: string; // 必填，MCP Server地址
+  name?: string; // 可选，显示名称
+  description?: string; // 可选，server描述
+  icon?: string; // 可选，自定义图标URL
+}
+interface McpConfig {
   mcpServers: {
-    // 支持添加自定义MCP Server服务器
-    'img-search': {
-      type: 'SSE', // 支持SSE和StreamableHttp两种类型
-      icon: 'https://xxx', // 自定义图标
-      url: 'https://xxxx/mcp' // 自定义MCP Server地址
-    }
-  }
+    [serverName: string]: McpServerConfig; // server名称作为key，值为server配置
+  };
 }
+// 使用示例
+const config: McpConfig = {
+  mcpServers: {
+    'img-search': {
+      type: 'SSE',
+      url: 'https://xxxx/mcp',
+      name: '自定义MCP服务器',
+      description: 'xxx',
+      icon: 'https://xxx',
+    },
+    // 可以添加更多server配置...
+  },
+};
 ```
 
 #### 自定义 Agent 模式上下文功能

packages/plugins/robot/meta.js

@@ -19,8 +19,10 @@ export default {
     mcpConfig: {
       mcpServers: {
         // 支持添加自定义MCP Server服务器
-        // 'img-search': {
-        //   type: 'SSE', // 支持SSE和StreamableHttp两种类型
+        // 'img-search': { // MCP 服务器 id, 使用英文
+        //   type: 'SSE', // 支持 SSE 和 StreamableHttp 两种类型
+        //   name: '自定义MCP服务器',  // 显示名称
+        //   description: 'xxx', // 描述信息
         //   icon: 'https://xxx', // 自定义图标
         //   url: 'https://xxxx/mcp' // 自定义MCP Server地址
         // }

packages/plugins/robot/src/components/footer-extension/McpServer.vue

@@ -17,7 +17,7 @@
         :show-market-tab="false"
         @plugin-expand="handlePluginExpand"
         @plugin-add="updateMcpServerStatus"
-        @plugin-toggle="handlePluginToggle"
+        @plugin-toggle="updateMcpServerToggle"
         @tool-toggle="updateMcpServerToolStatus"
       />
     </div>
@@ -55,11 +55,6 @@ const {
   updateMcpServerToggle
 } = useMcpServer()
 
-// 插件状态切换
-const handlePluginToggle = (plugin: PluginInfo, enabled: boolean) => {
-  updateMcpServerToggle(plugin, enabled)
-}
-
 // 插件展开状态变化
 const handlePluginExpand = (plugin: PluginInfo, expanded: boolean) => {
   const targetPlugin = installedPlugins.value.find((p) => p.id === plugin.id)

packages/plugins/robot/src/composables/features/useMcp.ts

@@ -8,12 +8,21 @@ import { MCPHost } from '../../services/MCPHost'
 
 const mcpHost = new MCPHost()
 
+const defaultMcpIcon =
+  'https://res.hc-cdn.com/lowcode-portal/1.1.80.20250515160330/assets/opentiny-tinyengine-logo-4f8a3801.svg'
+
+enum PluginAddState {
+  Added = 'added',
+  Idle = 'idle',
+  Loading = 'loading'
+}
+
 const ENGINE_MCP_SERVER: PluginInfo = {
   id: 'tiny-engine-mcp-server',
   name: 'Tiny Engine MCP 工具',
-  icon: 'https://res.hc-cdn.com/lowcode-portal/1.1.80.20250515160330/assets/opentiny-tinyengine-logo-4f8a3801.svg',
+  icon: defaultMcpIcon,
   description: '使用TinyEngine设计器能力，如操作画布、编辑页面等',
-  addState: 'added'
+  addState: PluginAddState.Added
 }
 
 const inUseMcpServers = ref<PluginInfo[]>([{ ...ENGINE_MCP_SERVER, enabled: true, expanded: true, tools: [] }])
@@ -94,13 +103,13 @@ const updateMcpServerToggle = async (server: PluginInfo, enabled: boolean) => {
 
 const updateMcpServerStatus = async (server: PluginInfo, added: boolean) => {
   // 市场添加状态修改
-  server.addState = added ? 'added' : 'idle'
+  server.addState = added ? PluginAddState.Added : PluginAddState.Idle
   if (added) {
     const newServer: PluginInfo = {
       ...server,
       id: server.id || `mcp-server-${Date.now()}`,
       enabled: true,
-      addState: 'added',
+      addState: PluginAddState.Added,
       expanded: false,
       tools: server.tools || []
     }
@@ -129,37 +138,34 @@ const updateMcpServerToolStatus = (currentServer: PluginInfo, toolId: string, en
 }
 
 const updateCustomMcpServers = async () => {
-  const customMcpServers = getRobotServiceOptions().mcpConfig?.mcpServers || {}
-  if (Object.keys(customMcpServers).length > 0) {
-    if (
-      Object.values(customMcpServers).some(
-        (server) => !['streamablehttp', 'sse'].includes(server.type?.toLowerCase()) || !server.url
-      )
-    ) {
-      return {
-        result: 'failed',
-        message: '解析JSON失败，缺少type或url字段'
-      }
+  const mcpServersConfig = getRobotServiceOptions().mcpConfig?.mcpServers || {}
+  if (!Object.keys(mcpServersConfig).length) return
+  const customMcpServers = Object.entries(mcpServersConfig).map(([id, config]) => ({ id, ...config }))
+  const logger = console
+
+  customMcpServers.forEach((server) => {
+    if (!['streamablehttp', 'sse'].includes(server.type?.toLowerCase()) || !server.url) {
+      logger.error(`解析mcpServer: ${server.id} 配置失败，type/url字段缺失或有误.`)
+      return
     }
-    for (const [serverName, server] of Object.entries(customMcpServers)) {
-      if (inUseMcpServers.value.find((s) => s.id === serverName)) {
-        continue
-      }
-      const newServer: PluginInfo = {
-        id: serverName,
-        name: serverName,
-        icon: server.icon,
-        description: server.description,
-        enabled: false,
-        addState: 'added',
-        expanded: false,
-        type: server.type,
-        url: server.url,
-        tools: []
-      }
-      inUseMcpServers.value.push(newServer)
+
+    if (inUseMcpServers.value.find((s) => s.id === server.id)) {
+      return
     }
-  }
+    const newServer: PluginInfo = {
+      id: server.id,
+      name: server.name || server.id,
+      icon: server.icon || defaultMcpIcon,
+      description: server.description || '',
+      enabled: false,
+      addState: PluginAddState.Added,
+      expanded: false,
+      type: server.type,
+      url: server.url,
+      tools: []
+    }
+    inUseMcpServers.value.push(newServer)
+  })
 }
 
 const connectMcpServer = (server: PluginInfo) => {