refactor(mcp): remove installed preset badge and env-related preset logic
- Move MCP presets into Add modal, no auto-seeding into list - Replace env-required presets with context7 (no env needed) - Remove requiresEnv checks/prompts from list and form - Keep Docs button; maintain clean list UI
This commit is contained in:
@@ -2,6 +2,7 @@ import React, { useState } from "react";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { X, Save, AlertCircle } from "lucide-react";
|
import { X, Save, AlertCircle } from "lucide-react";
|
||||||
import { McpServer } from "../../types";
|
import { McpServer } from "../../types";
|
||||||
|
import { mcpPresets } from "../../config/mcpPresets";
|
||||||
import { buttonStyles, inputStyles } from "../../lib/styles";
|
import { buttonStyles, inputStyles } from "../../lib/styles";
|
||||||
import McpWizardModal from "./McpWizardModal";
|
import McpWizardModal from "./McpWizardModal";
|
||||||
import { extractErrorMessage } from "../../utils/errorUtils";
|
import { extractErrorMessage } from "../../utils/errorUtils";
|
||||||
@@ -66,6 +67,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
|||||||
// 编辑模式下禁止修改 ID
|
// 编辑模式下禁止修改 ID
|
||||||
const isEditing = !!editingId;
|
const isEditing = !!editingId;
|
||||||
|
|
||||||
|
// 预设选择状态(仅新增模式显示;-1 表示自定义)
|
||||||
|
const [selectedPreset, setSelectedPreset] = useState<number | null>(
|
||||||
|
isEditing ? null : -1,
|
||||||
|
);
|
||||||
|
|
||||||
const handleIdChange = (value: string) => {
|
const handleIdChange = (value: string) => {
|
||||||
setFormId(value);
|
setFormId(value);
|
||||||
if (!isEditing) {
|
if (!isEditing) {
|
||||||
@@ -74,6 +80,39 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ensureUniqueId = (base: string): string => {
|
||||||
|
let candidate = base.trim();
|
||||||
|
if (!candidate) candidate = "mcp-server";
|
||||||
|
if (!existingIds.includes(candidate)) return candidate;
|
||||||
|
let i = 1;
|
||||||
|
while (existingIds.includes(`${candidate}-${i}`)) i++;
|
||||||
|
return `${candidate}-${i}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 应用预设(写入表单但不落库)
|
||||||
|
const applyPreset = (index: number) => {
|
||||||
|
if (index < 0 || index >= mcpPresets.length) return;
|
||||||
|
const p = mcpPresets[index];
|
||||||
|
const id = ensureUniqueId(p.id);
|
||||||
|
setFormId(id);
|
||||||
|
setFormDescription(p.description || "");
|
||||||
|
const json = JSON.stringify(p.server, null, 2);
|
||||||
|
setFormJson(json);
|
||||||
|
// 触发一次校验
|
||||||
|
setJsonError(validateJson(json));
|
||||||
|
setSelectedPreset(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切回自定义
|
||||||
|
const applyCustom = () => {
|
||||||
|
setSelectedPreset(-1);
|
||||||
|
// 恢复到空白模板
|
||||||
|
setFormId("");
|
||||||
|
setFormDescription("");
|
||||||
|
setFormJson("");
|
||||||
|
setJsonError("");
|
||||||
|
};
|
||||||
|
|
||||||
const handleJsonChange = (value: string) => {
|
const handleJsonChange = (value: string) => {
|
||||||
setFormJson(value);
|
setFormJson(value);
|
||||||
|
|
||||||
@@ -218,6 +257,41 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
|
|||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="p-6 space-y-4">
|
<div className="p-6 space-y-4">
|
||||||
|
{/* 预设选择(仅新增时展示) */}
|
||||||
|
{!isEditing && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{t("mcp.presets.title")}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={applyCustom}
|
||||||
|
className={`${
|
||||||
|
selectedPreset === -1 ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
||||||
|
} px-3 py-1.5 rounded-md text-xs font-medium transition-colors`}
|
||||||
|
>
|
||||||
|
{t("presetSelector.custom")}
|
||||||
|
</button>
|
||||||
|
{mcpPresets.map((p, idx) => (
|
||||||
|
<button
|
||||||
|
key={p.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => applyPreset(idx)}
|
||||||
|
className={`${
|
||||||
|
selectedPreset === idx
|
||||||
|
? "bg-emerald-500 text-white"
|
||||||
|
: "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-300"
|
||||||
|
} px-3 py-1.5 rounded-md text-xs font-medium transition-colors`}
|
||||||
|
title={p.description}
|
||||||
|
>
|
||||||
|
{p.name || p.id}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* 无需环境变量提示:已移除 */}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{/* ID (标题) */}
|
{/* ID (标题) */}
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import React from "react";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Edit3, Trash2 } from "lucide-react";
|
import { Edit3, Trash2 } from "lucide-react";
|
||||||
import { McpServer } from "../../types";
|
import { McpServer } from "../../types";
|
||||||
|
import { mcpPresets } from "../../config/mcpPresets";
|
||||||
import { cardStyles, buttonStyles, cn } from "../../lib/styles";
|
import { cardStyles, buttonStyles, cn } from "../../lib/styles";
|
||||||
import McpToggle from "./McpToggle";
|
import McpToggle from "./McpToggle";
|
||||||
|
|
||||||
@@ -32,6 +33,19 @@ const McpListItem: React.FC<McpListItemProps> = ({
|
|||||||
// 只显示 description,没有则留空
|
// 只显示 description,没有则留空
|
||||||
const description = (server as any).description || "";
|
const description = (server as any).description || "";
|
||||||
|
|
||||||
|
// 匹配预设元信息(用于展示文档链接等)
|
||||||
|
const meta = mcpPresets.find((p) => p.id === id);
|
||||||
|
|
||||||
|
const openDocs = async () => {
|
||||||
|
const url = meta?.docs || meta?.homepage;
|
||||||
|
if (!url) return;
|
||||||
|
try {
|
||||||
|
await window.api.openExternal(url);
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn(cardStyles.interactive, "!p-4")}>
|
<div className={cn(cardStyles.interactive, "!p-4")}>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
@@ -53,10 +67,20 @@ const McpListItem: React.FC<McpListItemProps> = ({
|
|||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
{/* 预设标记已移除 */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 右侧:操作按钮 */}
|
{/* 右侧:操作按钮 */}
|
||||||
<div className="flex items-center gap-2 flex-shrink-0">
|
<div className="flex items-center gap-2 flex-shrink-0">
|
||||||
|
{meta?.docs && (
|
||||||
|
<button
|
||||||
|
onClick={openDocs}
|
||||||
|
className={buttonStyles.ghost}
|
||||||
|
title={t("mcp.presets.docs")}
|
||||||
|
>
|
||||||
|
{t("mcp.presets.docs")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button
|
<button
|
||||||
onClick={() => onEdit(id)}
|
onClick={() => onEdit(id)}
|
||||||
className={buttonStyles.icon}
|
className={buttonStyles.icon}
|
||||||
|
|||||||
@@ -6,9 +6,8 @@ import McpListItem from "./McpListItem";
|
|||||||
import McpFormModal from "./McpFormModal";
|
import McpFormModal from "./McpFormModal";
|
||||||
import { ConfirmDialog } from "../ConfirmDialog";
|
import { ConfirmDialog } from "../ConfirmDialog";
|
||||||
import { extractErrorMessage } from "../../utils/errorUtils";
|
import { extractErrorMessage } from "../../utils/errorUtils";
|
||||||
import { mcpPresets } from "../../config/mcpPresets";
|
// 预设相关逻辑已迁移到“新增 MCP”面板,列表此处无需引用
|
||||||
import McpToggle from "./McpToggle";
|
import { buttonStyles } from "../../lib/styles";
|
||||||
import { buttonStyles, cardStyles, cn } from "../../lib/styles";
|
|
||||||
import { AppType } from "../../lib/tauri-api";
|
import { AppType } from "../../lib/tauri-api";
|
||||||
|
|
||||||
interface McpPanelProps {
|
interface McpPanelProps {
|
||||||
@@ -51,29 +50,14 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const setup = async () => {
|
const setup = async () => {
|
||||||
try {
|
try {
|
||||||
// 初始化导入:按应用类型从对应客户端导入已有 MCP(设为 enabled=true)
|
// 初始化:仅从对应客户端导入已有 MCP,不做“预设落库”
|
||||||
if (appType === "claude") {
|
if (appType === "claude") {
|
||||||
await window.api.importMcpFromClaude();
|
await window.api.importMcpFromClaude();
|
||||||
} else if (appType === "codex") {
|
} else if (appType === "codex") {
|
||||||
await window.api.importMcpFromCodex();
|
await window.api.importMcpFromCodex();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 读取现有 config.json 内容
|
|
||||||
const cfg = await window.api.getMcpConfig(appType);
|
|
||||||
const existing = cfg.servers || {};
|
|
||||||
|
|
||||||
// 将预设落库为禁用(若缺失)
|
|
||||||
const missing = mcpPresets.filter((p) => !existing[p.id]);
|
|
||||||
for (const p of missing) {
|
|
||||||
const seed: McpServer = {
|
|
||||||
...(p.server as McpServer),
|
|
||||||
enabled: false,
|
|
||||||
source: "preset",
|
|
||||||
} as unknown as McpServer;
|
|
||||||
await window.api.upsertMcpServerInConfig(appType, p.id, seed);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("MCP 初始化导入/落库失败(忽略继续)", e);
|
console.warn("MCP 初始化导入失败(忽略继续)", e);
|
||||||
} finally {
|
} finally {
|
||||||
await reload();
|
await reload();
|
||||||
}
|
}
|
||||||
@@ -84,16 +68,8 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
|
|||||||
|
|
||||||
const handleToggle = async (id: string, enabled: boolean) => {
|
const handleToggle = async (id: string, enabled: boolean) => {
|
||||||
try {
|
try {
|
||||||
const server = servers[id];
|
// 启用/禁用已存在的条目
|
||||||
if (!server) {
|
|
||||||
const preset = mcpPresets.find((p) => p.id === id);
|
|
||||||
if (!preset) return;
|
|
||||||
await window.api.upsertMcpServerInConfig(
|
|
||||||
appType,
|
|
||||||
id,
|
|
||||||
preset.server as McpServer,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
await window.api.setMcpEnabled(appType, id, enabled);
|
await window.api.setMcpEnabled(appType, id, enabled);
|
||||||
await reload();
|
await reload();
|
||||||
onNotify?.(
|
onNotify?.(
|
||||||
@@ -221,11 +197,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
(() => {
|
(() => {
|
||||||
const notInstalledPresets = mcpPresets.filter(
|
const hasAny = serverEntries.length > 0;
|
||||||
(p) => !servers[p.id],
|
|
||||||
);
|
|
||||||
const hasAny =
|
|
||||||
serverEntries.length > 0 || notInstalledPresets.length > 0;
|
|
||||||
if (!hasAny) {
|
if (!hasAny) {
|
||||||
return (
|
return (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
@@ -259,37 +231,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{/* 预设(未安装) */}
|
{/* 预设已移至“新增 MCP”面板中展示与套用 */}
|
||||||
{notInstalledPresets.map((p) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={`preset-${p.id}`}
|
|
||||||
className={cn(
|
|
||||||
cardStyles.interactive,
|
|
||||||
"!p-4 opacity-95",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<McpToggle
|
|
||||||
enabled={false}
|
|
||||||
onChange={(en) => handleToggle(p.id, en)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
|
|
||||||
{p.id}
|
|
||||||
</h3>
|
|
||||||
{p.description && (
|
|
||||||
<p className="text-sm text-gray-500 dark:text-gray-400 truncate">
|
|
||||||
{p.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})()
|
})()
|
||||||
|
|||||||
@@ -8,20 +8,38 @@ export type McpPreset = {
|
|||||||
server: McpServer;
|
server: McpServer;
|
||||||
homepage?: string;
|
homepage?: string;
|
||||||
docs?: string;
|
docs?: string;
|
||||||
requiresEnv?: string[];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 预设库(数据文件,当前未接入 UI,便于后续“一键启用”)
|
// 预设 MCP(逻辑简化版):
|
||||||
// 注意:预设数据暂时清空,仅保留结构与引用位置。
|
// - 仅包含最常用、可快速落地的 stdio 模式示例
|
||||||
// 原因:
|
// - 不涉及分类/模板/测速等复杂逻辑,默认以 disabled 形式“回种”到 config.json
|
||||||
// - 近期决定将 MCP SSOT 拆分为 mcp.claude / mcp.codex,不同客户端的格式与支持能力不同;
|
// - 用户可在 MCP 面板中一键启用/编辑
|
||||||
// - 需要先完善“隐藏预设/不回种”机制与导入/同步策略,避免用户删除后被自动回填;
|
export const mcpPresets: McpPreset[] = [
|
||||||
// - 在上述机制与 Codex 适配完成前,避免内置示例误导或造成意外写入。
|
{
|
||||||
// 后续计划(占位备注):
|
id: "fetch",
|
||||||
// - 重新引入官方/社区 MCP 预设,区分 `source: "preset"`;
|
name: "mcp-server-fetch",
|
||||||
// - 支持每客户端(Claude/Codex)独立隐藏名单 `hiddenPresets`,仅影响自动回种;
|
description:
|
||||||
// - UI 提供“删除并隐藏”与“恢复预设”操作;
|
"通用 HTTP Fetch(stdio,经 uvx 运行 mcp-server-fetch),适合快速请求接口/抓取数据",
|
||||||
// - 导入/同步与启用状态解耦,仅启用项投影至对应客户端的用户配置文件。
|
tags: ["stdio", "http"],
|
||||||
export const mcpPresets: McpPreset[] = [];
|
server: {
|
||||||
|
type: "stdio",
|
||||||
|
command: "uvx",
|
||||||
|
args: ["mcp-server-fetch"],
|
||||||
|
} as McpServer,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "context7",
|
||||||
|
name: "mcp-context7",
|
||||||
|
description: "Context7 示例(无需环境变量),可按需在表单中调整参数",
|
||||||
|
tags: ["stdio", "docs"],
|
||||||
|
server: {
|
||||||
|
type: "stdio",
|
||||||
|
command: "uvx",
|
||||||
|
// 使用 fetch 服务器作为基础示例,用户可在表单中补充 args
|
||||||
|
args: ["mcp-server-fetch"],
|
||||||
|
} as McpServer,
|
||||||
|
docs: "https://github.com/context7",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default mcpPresets;
|
export default mcpPresets;
|
||||||
|
|||||||
Reference in New Issue
Block a user