fix(mcp): improve format/submit UX and fix validation errors

Fixes two critical issues with the MCP JSON input:
1. Format button failed with wrapped format like "server": {...}
2. Submit button failed despite input validation passing

Changes:
- Updated formatJSON to use smart parser (supports wrapped format)
- Simplified submit validation logic (removed redundant validateJsonConfig call)
- Improved UX: input preserves original format, cleanup happens on format/submit
  * Prevents confusing "instant disappearance" when pasting wrapped JSON
  * Auto-fills ID/Name fields while keeping input unchanged
  * Format button now strips wrapper key and formats cleanly
  * Submit button correctly extracts config regardless of format

Code quality:
- Reduced code by 5 lines (20 changes, 11 insertions, 16 deletions)
- Consistent use of parseSmartMcpJson across all JSON operations
- No type errors introduced
This commit is contained in:
Jason
2025-11-16 20:40:16 +08:00
parent 98a1305684
commit 1805ed586e
2 changed files with 11 additions and 16 deletions

View File

@@ -265,10 +265,8 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
}
}
// 如果智能解析提取了配置(格式转换),自动格式化输入框内容
if (result.id && result.formattedConfig !== value.trim()) {
setFormConfig(result.formattedConfig);
}
// 不在输入时自动格式化,保持用户输入的原样
// 格式清理将在提交时进行
setConfigError("");
} catch (err: any) {
@@ -361,13 +359,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
}
} else {
// JSON mode
const jsonError = validateJsonConfig(formConfig);
setConfigError(jsonError);
if (jsonError) {
toast.error(t("mcp.error.jsonInvalid"), { duration: 3000 });
return;
}
if (!formConfig.trim()) {
// Empty configuration
serverSpec = {
@@ -377,9 +368,12 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
};
} else {
try {
serverSpec = JSON.parse(formConfig) as McpServerSpec;
// 使用智能解析器,支持带外层键的格式
const result = parseSmartMcpJson(formConfig);
serverSpec = result.config as McpServerSpec;
} catch (e: any) {
setConfigError(t("mcp.error.jsonInvalid"));
const errorMessage = e?.message || String(e);
setConfigError(t("mcp.error.jsonInvalid") + ": " + errorMessage);
toast.error(t("mcp.error.jsonInvalid"), { duration: 4000 });
return;
}

View File

@@ -1,6 +1,6 @@
/**
* 格式化 JSON 字符串
* @param value - 原始 JSON 字符串
* @param value - 原始 JSON 字符串(支持带键名包装的格式)
* @returns 格式化后的 JSON 字符串2 空格缩进)
* @throws 如果 JSON 格式无效
*/
@@ -9,8 +9,9 @@ export function formatJSON(value: string): string {
if (!trimmed) {
return "";
}
const parsed = JSON.parse(trimmed);
return JSON.stringify(parsed, null, 2);
// 使用智能解析器来处理可能的片段格式
const result = parseSmartMcpJson(trimmed);
return result.formattedConfig;
}
/**