290 lines
10 KiB
TypeScript
290 lines
10 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { X, Save } from "lucide-react";
|
||
|
|
import { McpServer } from "../../types";
|
||
|
|
import { isLinux } from "../../lib/platform";
|
||
|
|
|
||
|
|
interface McpWizardModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
onApply: (json: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 解析环境变量文本为对象
|
||
|
|
*/
|
||
|
|
const parseEnvText = (text: string): Record<string, string> => {
|
||
|
|
const lines = text
|
||
|
|
.split("\n")
|
||
|
|
.map((l) => l.trim())
|
||
|
|
.filter((l) => l.length > 0);
|
||
|
|
const env: Record<string, string> = {};
|
||
|
|
for (const l of lines) {
|
||
|
|
const idx = l.indexOf("=");
|
||
|
|
if (idx > 0) {
|
||
|
|
const k = l.slice(0, idx).trim();
|
||
|
|
const v = l.slice(idx + 1).trim();
|
||
|
|
if (k) env[k] = v;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return env;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* MCP 配置向导模态框
|
||
|
|
* 帮助用户快速生成 MCP JSON 配置
|
||
|
|
*/
|
||
|
|
const McpWizardModal: React.FC<McpWizardModalProps> = ({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
onApply,
|
||
|
|
}) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const [wizardType, setWizardType] = useState<"stdio" | "sse">("stdio");
|
||
|
|
const [wizardCommand, setWizardCommand] = useState("");
|
||
|
|
const [wizardArgs, setWizardArgs] = useState("");
|
||
|
|
const [wizardCwd, setWizardCwd] = useState("");
|
||
|
|
const [wizardEnv, setWizardEnv] = useState("");
|
||
|
|
|
||
|
|
// 生成预览 JSON
|
||
|
|
const generatePreview = (): string => {
|
||
|
|
const config: McpServer = {
|
||
|
|
type: wizardType,
|
||
|
|
command: wizardCommand.trim(),
|
||
|
|
};
|
||
|
|
|
||
|
|
// 添加可选字段
|
||
|
|
if (wizardArgs.trim()) {
|
||
|
|
config.args = wizardArgs
|
||
|
|
.split(/\s+/)
|
||
|
|
.map((s) => s.trim())
|
||
|
|
.filter((s) => s.length > 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (wizardCwd.trim()) {
|
||
|
|
config.cwd = wizardCwd.trim();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (wizardEnv.trim()) {
|
||
|
|
const env = parseEnvText(wizardEnv);
|
||
|
|
if (Object.keys(env).length > 0) {
|
||
|
|
config.env = env;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return JSON.stringify(config, null, 2);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleApply = () => {
|
||
|
|
if (!wizardCommand.trim()) {
|
||
|
|
alert(t("mcp.error.commandRequired"));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const json = generatePreview();
|
||
|
|
onApply(json);
|
||
|
|
handleClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
// 重置表单
|
||
|
|
setWizardType("stdio");
|
||
|
|
setWizardCommand("");
|
||
|
|
setWizardArgs("");
|
||
|
|
setWizardCwd("");
|
||
|
|
setWizardEnv("");
|
||
|
|
onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
|
|
if (e.key === "Enter" && e.metaKey) {
|
||
|
|
e.preventDefault();
|
||
|
|
handleApply();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
const preview = generatePreview();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 z-[70] flex items-center justify-center"
|
||
|
|
onMouseDown={(e) => {
|
||
|
|
if (e.target === e.currentTarget) {
|
||
|
|
handleClose();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Backdrop */}
|
||
|
|
<div
|
||
|
|
className={`absolute inset-0 bg-black/50 dark:bg-black/70${
|
||
|
|
isLinux() ? "" : " backdrop-blur-sm"
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Modal */}
|
||
|
|
<div className="relative mx-4 flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white shadow-lg dark:bg-gray-900">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex items-center justify-between border-b border-gray-200 p-6 dark:border-gray-800">
|
||
|
|
<h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
||
|
|
{t("mcp.wizard.title")}
|
||
|
|
</h2>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleClose}
|
||
|
|
className="rounded-md p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
|
||
|
|
aria-label={t("common.close")}
|
||
|
|
>
|
||
|
|
<X size={18} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="flex-1 min-h-0 space-y-4 overflow-auto p-6">
|
||
|
|
{/* Hint */}
|
||
|
|
<div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
|
||
|
|
<p className="text-sm text-blue-800 dark:text-blue-200">
|
||
|
|
{t("mcp.wizard.hint")}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Form Fields */}
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* Type */}
|
||
|
|
<div>
|
||
|
|
<label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
|
|
{t("mcp.wizard.type")} <span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<label className="inline-flex items-center gap-2 cursor-pointer">
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
value="stdio"
|
||
|
|
checked={wizardType === "stdio"}
|
||
|
|
onChange={(e) =>
|
||
|
|
setWizardType(e.target.value as "stdio" | "sse")
|
||
|
|
}
|
||
|
|
className="w-4 h-4 text-emerald-500 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-2"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-gray-900 dark:text-gray-100">
|
||
|
|
stdio
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
<label className="inline-flex items-center gap-2 cursor-pointer">
|
||
|
|
<input
|
||
|
|
type="radio"
|
||
|
|
value="sse"
|
||
|
|
checked={wizardType === "sse"}
|
||
|
|
onChange={(e) =>
|
||
|
|
setWizardType(e.target.value as "stdio" | "sse")
|
||
|
|
}
|
||
|
|
className="w-4 h-4 text-emerald-500 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-2"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-gray-900 dark:text-gray-100">
|
||
|
|
sse
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Command */}
|
||
|
|
<div>
|
||
|
|
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
|
|
{t("mcp.wizard.command")}{" "}
|
||
|
|
<span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={wizardCommand}
|
||
|
|
onChange={(e) => setWizardCommand(e.target.value)}
|
||
|
|
onKeyDown={handleKeyDown}
|
||
|
|
placeholder={t("mcp.wizard.commandPlaceholder")}
|
||
|
|
required
|
||
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Args */}
|
||
|
|
<div>
|
||
|
|
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
|
|
{t("mcp.wizard.args")}
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={wizardArgs}
|
||
|
|
onChange={(e) => setWizardArgs(e.target.value)}
|
||
|
|
onKeyDown={handleKeyDown}
|
||
|
|
placeholder={t("mcp.wizard.argsPlaceholder")}
|
||
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* CWD */}
|
||
|
|
<div>
|
||
|
|
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
|
|
{t("mcp.wizard.cwd")}
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={wizardCwd}
|
||
|
|
onChange={(e) => setWizardCwd(e.target.value)}
|
||
|
|
onKeyDown={handleKeyDown}
|
||
|
|
placeholder={t("mcp.wizard.cwdPlaceholder")}
|
||
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Env */}
|
||
|
|
<div>
|
||
|
|
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
|
|
{t("mcp.wizard.env")}
|
||
|
|
</label>
|
||
|
|
<textarea
|
||
|
|
value={wizardEnv}
|
||
|
|
onChange={(e) => setWizardEnv(e.target.value)}
|
||
|
|
placeholder={t("mcp.wizard.envPlaceholder")}
|
||
|
|
rows={3}
|
||
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 resize-y"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Preview */}
|
||
|
|
{(wizardCommand || wizardArgs || wizardCwd || wizardEnv) && (
|
||
|
|
<div className="space-y-2 border-t border-gray-200 pt-4 dark:border-gray-700">
|
||
|
|
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
|
|
{t("mcp.wizard.preview")}
|
||
|
|
</h3>
|
||
|
|
<pre className="overflow-x-auto rounded-lg bg-gray-50 p-3 text-xs font-mono text-gray-700 dark:bg-gray-800 dark:text-gray-300">
|
||
|
|
{preview}
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<div className="flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-100 p-6 dark:border-gray-800 dark:bg-gray-800">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleClose}
|
||
|
|
className="rounded-lg px-4 py-2 text-sm font-medium text-gray-500 transition-colors hover:bg-white hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
|
||
|
|
>
|
||
|
|
{t("common.cancel")}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleApply}
|
||
|
|
className="flex items-center gap-2 rounded-lg bg-emerald-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
|
||
|
|
>
|
||
|
|
<Save className="h-4 w-4" />
|
||
|
|
{t("mcp.wizard.apply")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default McpWizardModal;
|