feat(mcp): enhance wizard with title field and optimize placeholders

- Add MCP title field to wizard (required)
- Remove working directory (cwd) field and related logic
- Update wizard callback to return both title and JSON
- Optimize placeholder text for better user guidance:
  - Command: "npx or uvx"
  - Args: "arg1\narg2"
  - Env: "KEY1=value1\nKEY2=value2"
  - Headers: "Authorization: Bearer your_token_here\n..."
- Simplify args label by removing "(one per line)" hint
- Update parent component to handle title from wizard
This commit is contained in:
Jason
2025-10-11 11:43:32 +08:00
parent 2a60d20841
commit a6ee3ba35f
4 changed files with 35 additions and 41 deletions

View File

@@ -7,7 +7,7 @@ import { isLinux } from "../../lib/platform";
interface McpWizardModalProps {
isOpen: boolean;
onClose: () => void;
onApply: (json: string) => void;
onApply: (title: string, json: string) => void;
onNotify?: (
message: string,
type: "success" | "error",
@@ -75,10 +75,10 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
}) => {
const { t } = useTranslation();
const [wizardType, setWizardType] = useState<"stdio" | "http">("stdio");
const [wizardTitle, setWizardTitle] = useState("");
// stdio 字段
const [wizardCommand, setWizardCommand] = useState("");
const [wizardArgs, setWizardArgs] = useState("");
const [wizardCwd, setWizardCwd] = useState("");
const [wizardEnv, setWizardEnv] = useState("");
// http 字段
const [wizardUrl, setWizardUrl] = useState("");
@@ -102,10 +102,6 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
.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) {
@@ -129,6 +125,10 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
};
const handleApply = () => {
if (!wizardTitle.trim()) {
onNotify?.(t("mcp.error.idRequired"), "error", 3000);
return;
}
if (wizardType === "stdio" && !wizardCommand.trim()) {
onNotify?.(t("mcp.error.commandRequired"), "error", 3000);
return;
@@ -139,16 +139,16 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
}
const json = generatePreview();
onApply(json);
onApply(wizardTitle.trim(), json);
handleClose();
};
const handleClose = () => {
// 重置表单
setWizardType("stdio");
setWizardTitle("");
setWizardCommand("");
setWizardArgs("");
setWizardCwd("");
setWizardEnv("");
setWizardUrl("");
setWizardHeaders("");
@@ -247,6 +247,21 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
</div>
</div>
{/* Title */}
<div>
<label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
{t("mcp.form.title")} <span className="text-red-500">*</span>
</label>
<input
type="text"
value={wizardTitle}
onChange={(e) => setWizardTitle(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={t("mcp.form.titlePlaceholder")}
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>
{/* Stdio 类型字段 */}
{wizardType === "stdio" && (
<>
@@ -280,21 +295,6 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
/>
</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">
@@ -350,7 +350,6 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
{/* Preview */}
{(wizardCommand ||
wizardArgs ||
wizardCwd ||
wizardEnv ||
wizardUrl ||
wizardHeaders) && (