feat(ai-mcp): 增加 MCP 参数填写速查

- 在 MCP 设置页常驻展示 command / args / env / timeout 字段说明
- 复用现有字段指南,补充示例和填写边界
- 增加无服务场景下的渲染断言
This commit is contained in:
Syngnat
2026-06-09 20:31:59 +08:00
parent d78c4481f0
commit 67e0cc752b
2 changed files with 49 additions and 0 deletions

View File

@@ -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 服务');

View File

@@ -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',