feat(mcp): add configuration wizard and simplify form modal
- Simplify McpFormModal to 3 inputs: title (required), description (optional), and JSON config (optional) - Add JSON validation similar to ProviderForm (must be object, real-time error display) - Create McpWizardModal component for quick configuration: - 5 input fields: type (stdio/sse), command (required), args, cwd, env - Real-time JSON preview - Emerald theme color (consistent with MCP button) - Z-index 70 (above McpFormModal's 60) - Add "or use configuration wizard" link next to JSON config label - Update i18n translations (zh/en) for form and wizard - All changes pass TypeScript typecheck and Prettier formatting
This commit is contained in:
Jason
289
src/components/mcp/McpWizardModal.tsx
Normal file
289
src/components/mcp/McpWizardModal.tsx
Normal file
@@ -0,0 +1,289 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user