All files / src/components/Settings MCPServices.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { FileText, Globe } from 'lucide-react';
import { useConfigStore } from '../../store/configStore';
import { silentErrorHandler } from '../../lib/error-utils';
 
export function MCPServices() {
  const quickConfig = useConfigStore((s) => s.quickConfig);
  const saveQuickConfig = useConfigStore((s) => s.saveQuickConfig);
 
  const services = quickConfig.mcpServices || [];
 
  const toggleService = async (id: string) => {
    const nextServices = services.map((service) =>
      service.id === id ? { ...service, enabled: !service.enabled } : service
    );
    await saveQuickConfig({ mcpServices: nextServices });
  };
 
  return (
    <div className="max-w-3xl">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-xl font-bold text-gray-900">MCP 服务</h1>
        <span className="text-xs text-gray-400">{services.length} 个已声明服务</span>
      </div>
      <div className="text-xs text-gray-500 mb-6">
        MCP（模型上下文协议）服务为 Agent 扩展外部工具 — 文件系统、数据库、网页搜索等。
      </div>
 
      <div className="bg-white rounded-xl border border-gray-200 divide-y divide-gray-100 shadow-sm mb-6">
        {services.length > 0 ? services.map((svc) => (
          <div key={svc.id} className="flex justify-between items-center p-4">
            <div className="flex items-center gap-3">
              {svc.id === 'filesystem'
                ? <FileText className="w-4 h-4 text-gray-500" />
                : <Globe className="w-4 h-4 text-gray-500" />}
              <div>
                <div className="text-sm text-gray-900">{svc.name}</div>
                <div className="text-xs text-gray-400 mt-1">{svc.id}</div>
              </div>
            </div>
            <div className="flex gap-2 items-center">
              <span className={`text-xs px-2 py-1 rounded-full ${svc.enabled ? 'bg-green-50 text-green-600' : 'bg-gray-100 text-gray-500'}`}>
                {svc.enabled ? '已启用' : '已停用'}
              </span>
              <button
                onClick={() => { toggleService(svc.id).catch(silentErrorHandler('MCPServices')); }}
                className="text-xs px-3 py-1.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
              >
                {svc.enabled ? '停用' : '启用'}
              </button>
            </div>
          </div>
        )) : (
          <div className="p-8 text-center text-sm text-gray-400">
            当前快速配置中尚未声明 MCP 服务
          </div>
        )}
      </div>
 
      <div className="text-xs text-amber-700 bg-amber-50 rounded-lg p-3">
        当前页面只支持查看和启停已保存在快速配置中的 MCP 服务；新增服务、删除服务和详细参数配置尚未在桌面端接入。
      </div>
    </div>
  );
}