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(""); setConfigError("");
} catch (err: any) { } catch (err: any) {
@@ -361,13 +359,6 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
} }
} else { } else {
// JSON mode // JSON mode
const jsonError = validateJsonConfig(formConfig);
setConfigError(jsonError);
if (jsonError) {
toast.error(t("mcp.error.jsonInvalid"), { duration: 3000 });
return;
}
if (!formConfig.trim()) { if (!formConfig.trim()) {
// Empty configuration // Empty configuration
serverSpec = { serverSpec = {
@@ -377,9 +368,12 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
}; };
} else { } else {
try { try {
serverSpec = JSON.parse(formConfig) as McpServerSpec; // 使用智能解析器,支持带外层键的格式
const result = parseSmartMcpJson(formConfig);
serverSpec = result.config as McpServerSpec;
} catch (e: any) { } 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 }); toast.error(t("mcp.error.jsonInvalid"), { duration: 4000 });
return; return;
} }

View File

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