(null);
+
+ const catalogQuery = useQuery({
+ queryKey: ["mcp-catalog"],
+ queryFn: () => mcpApi.getCatalog(),
+ enabled: canOperate,
+ });
+
+ const serversQuery = useQuery({
+ queryKey: ["mcp-servers"],
+ queryFn: () => mcpApi.listServers(),
+ enabled: canOperate,
+ });
+
+ const templates = catalogQuery.data?.items || [];
+ const servers = serversQuery.data?.items || [];
+ const selectedTemplate =
+ templates.find((item) => item.id === (selectedServerId ? servers.find((server) => server.id === selectedServerId)?.template_id : selectedTemplateId)) ||
+ templates.find((item) => item.id === selectedTemplateId) ||
+ templates[0] ||
+ null;
+ const selectedServer = servers.find((item) => item.id === selectedServerId) || null;
+ const activeExecutionMode = selectedServer?.execution_mode || selectedTemplate?.execution_mode || "local_bridge";
+ const activeRuntimeProbe = selectedServer?.runtime_probe || null;
+
+ useEffect(() => {
+ if (!templates.length) return;
+ if (!selectedTemplateId) {
+ const recommended = templates.find((item) => item.id === catalogQuery.data?.recommended_template_id) || templates[0];
+ setSelectedTemplateId(recommended.id);
+ setForm(buildFormState(recommended));
+ return;
+ }
+ if (!selectedServerId) {
+ const template = templates.find((item) => item.id === selectedTemplateId);
+ if (template) {
+ setForm((current) => {
+ if (current.templateId === template.id) return current;
+ return buildFormState(template);
+ });
+ }
+ }
+ }, [catalogQuery.data?.recommended_template_id, selectedServerId, selectedTemplateId, templates]);
+
+ useEffect(() => {
+ if (!selectedServerId || !selectedServer) return;
+ const template = templates.find((item) => item.id === selectedServer.template_id);
+ if (!template) return;
+ setSelectedTemplateId(template.id);
+ setForm(buildFormState(template, selectedServer));
+ setPreviewOverride(null);
+ }, [selectedServer, selectedServerId, templates]);
+
+ const saveMutation = useMutation({
+ mutationFn: async () => {
+ if (!selectedTemplate) throw new Error("请选择 MCP 模板");
+ const payload = buildPayload(selectedTemplate, form);
+ if (selectedServerId) {
+ return mcpApi.updateServer(selectedServerId, payload);
+ }
+ return mcpApi.createServer(payload);
+ },
+ onSuccess: async (server) => {
+ setSelectedServerId(server.id);
+ setSelectedTemplateId(server.template_id);
+ setForm((current) => ({
+ ...current,
+ name: server.name,
+ displayName: server.display_name,
+ }));
+ setPreviewOverride(server.preview);
+ setPageError(null);
+ await queryClient.invalidateQueries({ queryKey: ["mcp-servers"] });
+ },
+ onError: (error) => {
+ setPageError(error instanceof Error ? error.message : "保存失败");
+ },
+ });
+
+ const validateMutation = useMutation({
+ mutationFn: async () => {
+ if (!selectedServerId) throw new Error("请先保存配置");
+ return mcpApi.validateServer(selectedServerId);
+ },
+ onSuccess: (payload) => {
+ setPreviewOverride(payload.preview);
+ setPageError(null);
+ },
+ onError: (error) => {
+ setPageError(error instanceof Error ? error.message : "校验失败");
+ },
+ });
+
+ const confirmMutation = useMutation({
+ mutationFn: async () => {
+ if (!selectedServerId) throw new Error("请先保存配置");
+ return mcpApi.confirmClientApply(selectedServerId);
+ },
+ onSuccess: async (server) => {
+ setPreviewOverride(server.preview);
+ setPageError(null);
+ await queryClient.invalidateQueries({ queryKey: ["mcp-servers"] });
+ },
+ onError: (error) => {
+ setPageError(error instanceof Error ? error.message : "确认失败");
+ },
+ });
+
+ if (!canOperate) {
+ return (
+
+
+ 仅 `BOSS / ADMIN` 可访问 MCP 模板接入中心。
+
+
+ );
+ }
+
+ const activePreview = previewOverride || selectedServer?.preview || null;
+
+ return (
+
+
}
+ tone="amber"
+ meta={
+
+ 状态：
+ {catalogQuery.isLoading || serversQuery.isLoading
+ ? "加载中"
+ : pageError || catalogQuery.isError || serversQuery.isError
+ ? "异常"
+ : `${servers.length} 个已保存配置`}
+
+ }
+ />
+
+
+
+ {pageError ? (
+
+ MCP 页面操作失败：{pageError}
+
+ ) : null}
+
+
+
+
+ 模板列表
+ 先选模板，再填写配置表单。
+
+
+ {templates.map((template) => {
+ const active = template.id === selectedTemplateId;
+ return (
+
+ );
+ })}
+
+
+
+
+
+ 已保存配置
+ 后端直连模板和 Local Bridge 模板会用不同状态口径展示，不再混成一类。
+
+
+ {servers.length === 0 ? (
+
+ 暂无已保存配置
+
+ ) : (
+ servers.map((server) => (
+
+ ))
+ )}
+
+
+
+
+
+
+
+ 当前模板表单
+ 只暴露当前模板声明过的字段；保存后会生成对应执行方式的接入说明。
+
+
+
+
+
setForm((current) => ({ ...current, name: e.target.value }))}
+ placeholder="microsoft-learn"
+ />
+
用于生成租户内 MCP 配置标识，以及 Local Bridge/host 侧的引用名。
+
+
+ setForm((current) => ({ ...current, displayName: e.target.value }))}
+ placeholder={selectedTemplate?.name || "MCP display name"}
+ />
+
+
+ {selectedTemplate?.fields.map((field) => (
+
+ setForm((current) => ({
+ ...current,
+ params: {
+ ...current.params,
+ [field.key]: value,
+ },
+ }))
+ }
+ />
+ ))}
+
+
+
状态口径
+
+ 后端直连模板保存后即可由 PMFlow 发起探测；Local Bridge 模板的“已确认”只表示你手动确认客户本机已经承载，不代表后端直接碰到了宿主机。
+
+
+
+
+
+
+
+ 接入 / 校验面板
+
+ 这里不会伪装“连接成功”；后端直连模板会显示后端探测结果，本地模板只显示接入说明和手动确认。
+
+
+
+ {executionModeText(activeExecutionMode)}
+ {activeExecutionMode === "backend_direct" ? (
+ {runtimeText(activeRuntimeProbe)}
+ ) : (
+
+ {stateText(selectedServer?.client_apply_state || null)}
+
+ )}
+ {selectedServer?.confirmed_at && activeExecutionMode === "local_bridge" ? (
+
+ 确认时间：{formatBeijingDateTime(selectedServer.confirmed_at)}
+
+ ) : null}
+
+
+ {activeRuntimeProbe?.message ? (
+
+
当前执行路径
+
{activeRuntimeProbe.message}
+ {activeRuntimeProbe.tool_names?.length ? (
+
+ 可用工具：{activeRuntimeProbe.tool_names.join(" / ")}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeExecutionMode === "local_bridge" ? (
+
+ ) : null}
+
+
+
+
+
+
+
{activeExecutionMode === "backend_direct" ? "后端直连，不要求客户机器安装额外 MCP host" : "不直接改客户本机配置"}
+
+ {activeExecutionMode === "backend_direct"
+ ? "PMFlow 会从后端直接连接远程 MCP endpoint；只要网络可达并校验通过，大模型就能直接消费这条能力。"
+ : "PMFlow 只保存模板参数、接入说明和手动确认状态，不会从 Docker 容器直接写客户机器，也不会冒充已经接通了宿主机资源。"}
+
+
+
+
+
+
+
+ {field.field_type === "path_list" ? (
+