From 67e0cc752b50866fa54704e6db3831fde4175abb Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Tue, 9 Jun 2026 20:31:59 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ai-mcp):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=20MCP=20=E5=8F=82=E6=95=B0=E5=A1=AB=E5=86=99=E9=80=9F=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 MCP 设置页常驻展示 command / args / env / timeout 字段说明
- 复用现有字段指南，补充示例和填写边界
- 增加无服务场景下的渲染断言
---
 .../ai/AISettingsMCPSection.test.tsx          |  9 +++++
 .../components/ai/AISettingsMCPSection.tsx    | 40 +++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/frontend/src/components/ai/AISettingsMCPSection.test.tsx b/frontend/src/components/ai/AISettingsMCPSection.test.tsx
index 883c978..944bddb 100644
--- a/frontend/src/components/ai/AISettingsMCPSection.test.tsx
+++ b/frontend/src/components/ai/AISettingsMCPSection.test.tsx
@@ -101,6 +101,15 @@ describe('AISettingsMCPSection', () => {
 
     expect(markup).toContain('接入外部客户端');
     expect(markup).toContain('尚未把当前 GoNavi MCP 接入到这里');
+    expect(markup).toContain('新增 MCP 参数速查');
+    expect(markup).toContain('command');
+    expect(markup).toContain('args');
+    expect(markup).toContain('env');
+    expect(markup).toContain('timeout');
+    expect(markup).toContain('只填程序名或启动器本身');
+    expect(markup).toContain('把脚本名、模块名、开关参数拆开逐项填写');
+    expect(markup).toContain('给 MCP Server 传入 KEY=VALUE 形式的配置');
+    expect(markup).toContain('单次工具发现或调用最多等待多久');
     expect(markup).toContain('常见启动方式模板');
     expect(markup).toContain('Node 脚本');
     expect(markup).toContain('新增 MCP 服务');
diff --git a/frontend/src/components/ai/AISettingsMCPSection.tsx b/frontend/src/components/ai/AISettingsMCPSection.tsx
index 9c89647..15e08bf 100644
--- a/frontend/src/components/ai/AISettingsMCPSection.tsx
+++ b/frontend/src/components/ai/AISettingsMCPSection.tsx
@@ -4,6 +4,7 @@ import { PlusOutlined } from '@ant-design/icons';
 
 import type { AIMCPClientInstallStatus, AIMCPServerConfig, AIMCPToolDescriptor } from '../../types';
 import type { MCPClientKey } from '../../utils/mcpClientInstallStatus';
+import { MCP_FIELD_GUIDES } from '../../utils/mcpServerGuidance';
 import { MCP_SERVER_DRAFT_TEMPLATES } from '../../utils/mcpServerTemplates';
 import type { OverlayWorkbenchTheme } from '../../utils/overlayWorkbenchTheme';
 import AIMCPClientInstallPanel from './AIMCPClientInstallPanel';
@@ -80,6 +81,45 @@ const AISettingsMCPSection: React.FC<AISettingsMCPSectionProps> = ({
       onCopyLaunchCommand={onCopyLaunchCommand}
       onInstall={onInstallSelectedClient}
     />
+    <div
+      style={{
+        padding: '14px 16px',
+        borderRadius: 14,
+        border: `1px solid ${cardBorder}`,
+        background: cardBg,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+    >
+      <div style={{ fontWeight: 700, fontSize: 14, color: overlayTheme.titleText }}>新增 MCP 参数速查</div>
+      <div style={{ fontSize: 12, color: overlayTheme.mutedText, lineHeight: 1.7 }}>
+        先确认这几个字段再新增服务：`command` 只填可执行程序，`args` 才放脚本名和 --stdio，`env` 每行一个 KEY=VALUE，`timeout` 控制单次工具发现或调用等待时间。
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 10 }}>
+        {MCP_FIELD_GUIDES.filter((item) => ['command', 'args', 'env', 'timeout'].includes(item.key)).map((item) => (
+          <div
+            key={item.key}
+            style={{
+              padding: '10px 12px',
+              borderRadius: 12,
+              border: `1px solid ${cardBorder}`,
+              background: darkMode ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.72)',
+            }}
+          >
+            <div style={{ fontSize: 12, fontWeight: 700, color: overlayTheme.titleText }}>{item.title}</div>
+            <div style={{ marginTop: 4, fontSize: 12, color: overlayTheme.mutedText, lineHeight: 1.6 }}>{item.summary}</div>
+            {item.example ? (
+              <div style={{ marginTop: 6, fontSize: 12, color: overlayTheme.mutedText, lineHeight: 1.6 }}>
+                例：
+                {' '}
+                <code style={{ fontFamily: 'var(--gn-font-mono)' }}>{item.example}</code>
+              </div>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
     <div
       style={{
         padding: '14px 16px',