From 977185e2d5184afca5f7ffe1509b68dd7f672927 Mon Sep 17 00:00:00 2001 From: YoVinchen Date: Fri, 21 Nov 2025 09:30:30 +0800 Subject: [PATCH] refactor(forms): simplify and modernize form components Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance. --- src/components/mcp/McpFormModal.tsx | 617 ++++++++---------- src/components/prompts/PromptPanel.tsx | 145 ++-- .../forms/CodexCommonConfigModal.tsx | 100 +-- .../providers/forms/CodexConfigSections.tsx | 110 ++-- .../providers/forms/CommonConfigEditor.tsx | 178 ++--- .../providers/forms/EndpointSpeedTest.tsx | 401 ++++++------ .../forms/GeminiCommonConfigModal.tsx | 146 ++--- .../providers/forms/GeminiConfigSections.tsx | 150 ++--- 8 files changed, 798 insertions(+), 1049 deletions(-) diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx index 526051a..513c9de 100644 --- a/src/components/mcp/McpFormModal.tsx +++ b/src/components/mcp/McpFormModal.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react"; +import React, { useMemo, useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; import { @@ -7,19 +7,11 @@ import { AlertCircle, ChevronDown, ChevronUp, - Wand2, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; -import { - Dialog, - DialogContent, - DialogHeader, - DialogTitle, - DialogFooter, -} from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; -import { Textarea } from "@/components/ui/textarea"; +import JsonEditor from "@/components/JsonEditor"; import type { AppId } from "@/lib/api/types"; import { McpServer, McpServerSpec } from "@/types"; import { mcpPresets, getMcpPresetWithDescription } from "@/config/mcpPresets"; @@ -34,25 +26,21 @@ import { mcpServerToToml, } from "@/utils/tomlUtils"; import { normalizeTomlText } from "@/utils/textNormalization"; -import { formatJSON, parseSmartMcpJson } from "@/utils/formatters"; +import { parseSmartMcpJson } from "@/utils/formatters"; import { useMcpValidation } from "./useMcpValidation"; import { useUpsertMcpServer } from "@/hooks/useMcp"; +import { FullScreenPanel } from "@/components/common/FullScreenPanel"; interface McpFormModalProps { editingId?: string; initialData?: McpServer; - onSave: () => Promise; // v3.7.0: 简化为仅用于关闭表单的回调 + onSave: () => Promise; onClose: () => void; existingIds?: string[]; - defaultFormat?: "json" | "toml"; // 默认配置格式（可选，默认为 JSON） - defaultEnabledApps?: AppId[]; // 默认启用到哪些应用（可选，默认为全部应用） + defaultFormat?: "json" | "toml"; + defaultEnabledApps?: AppId[]; } -/** - * MCP 表单模态框组件（v3.7.0 完整重构版） - * - 支持 JSON 和 TOML 两种格式 - * - 统一管理，通过复选框选择启用到哪些应用 - */ const McpFormModal: React.FC = ({ editingId, initialData, @@ -79,7 +67,6 @@ const McpFormModal: React.FC = ({ const [formDocs, setFormDocs] = useState(initialData?.docs || ""); const [formTags, setFormTags] = useState(initialData?.tags?.join(", ") || ""); - // 启用状态：编辑模式使用现有值，新增模式使用默认值 const [enabledApps, setEnabledApps] = useState<{ claude: boolean; codex: boolean; @@ -88,7 +75,6 @@ const McpFormModal: React.FC = ({ if (initialData?.apps) { return { ...initialData.apps }; } - // 新增模式：根据 defaultEnabledApps 设置初始值 return { claude: defaultEnabledApps.includes("claude"), codex: defaultEnabledApps.includes("codex"), @@ -96,10 +82,8 @@ const McpFormModal: React.FC = ({ }; }); - // 编辑模式下禁止修改 ID const isEditing = !!editingId; - // 判断是否在编辑模式下有附加信息 const hasAdditionalInfo = !!( initialData?.description || initialData?.tags?.length || @@ -107,21 +91,17 @@ const McpFormModal: React.FC = ({ initialData?.docs ); - // 附加信息展开状态（编辑模式下有值时默认展开） const [showMetadata, setShowMetadata] = useState( isEditing ? hasAdditionalInfo : false, ); - // 配置格式：优先使用 defaultFormat，编辑模式下可从现有数据推断 const useTomlFormat = useMemo(() => { if (initialData?.server) { - // 编辑模式：尝试从现有数据推断格式（这里简化处理，默认 JSON） return defaultFormat === "toml"; } return defaultFormat === "toml"; }, [defaultFormat, initialData]); - // 根据格式决定初始配置 const [formConfig, setFormConfig] = useState(() => { const spec = initialData?.server; if (!spec) return ""; @@ -135,8 +115,23 @@ const McpFormModal: React.FC = ({ const [saving, setSaving] = useState(false); const [isWizardOpen, setIsWizardOpen] = useState(false); const [idError, setIdError] = useState(""); + const [isDarkMode, setIsDarkMode] = useState(false); + + useEffect(() => { + setIsDarkMode(document.documentElement.classList.contains("dark")); + + const observer = new MutationObserver(() => { + setIsDarkMode(document.documentElement.classList.contains("dark")); + }); + + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ["class"], + }); + + return () => observer.disconnect(); + }, []); - // 判断是否使用 TOML 格式（向后兼容，后续可扩展为格式切换按钮） const useToml = useTomlFormat; const wizardInitialSpec = useMemo(() => { @@ -164,7 +159,6 @@ const McpFormModal: React.FC = ({ } }, [formConfig, initialData, useToml]); - // 预设选择状态（仅新增模式显示；-1 表示自定义） const [selectedPreset, setSelectedPreset] = useState( isEditing ? null : -1, ); @@ -186,7 +180,6 @@ const McpFormModal: React.FC = ({ return `${candidate}-${i}`; }; - // 应用预设（写入表单但不落库） const applyPreset = (index: number) => { if (index < 0 || index >= mcpPresets.length) return; const preset = mcpPresets[index]; @@ -200,7 +193,6 @@ const McpFormModal: React.FC = ({ setFormDocs(presetWithDesc.docs || ""); setFormTags(presetWithDesc.tags?.join(", ") || ""); - // 根据格式转换配置 if (useToml) { const toml = mcpServerToToml(presetWithDesc.server); setFormConfig(toml); @@ -213,10 +205,8 @@ const McpFormModal: React.FC = ({ setSelectedPreset(index); }; - // 切回自定义 const applyCustom = () => { setSelectedPreset(-1); - // 恢复到空白模板 setFormId(""); setFormName(""); setFormDescription(""); @@ -228,19 +218,16 @@ const McpFormModal: React.FC = ({ }; const handleConfigChange = (value: string) => { - // 若为 TOML 模式，先做引号归一化，避免中文输入法导致的格式错误 const nextValue = useToml ? normalizeTomlText(value) : value; setFormConfig(nextValue); if (useToml) { - // TOML validation (use hook's complete validation) const err = validateTomlConfig(nextValue); if (err) { setConfigError(err); return; } - // Try to extract ID (if user hasn't filled it yet) if (nextValue.trim() && !formId.trim()) { const extractedId = extractIdFromToml(nextValue); if (extractedId) { @@ -248,11 +235,8 @@ const McpFormModal: React.FC = ({ } } } else { - // JSON validation with smart parsing try { const result = parseSmartMcpJson(value); - - // 验证解析后的配置对象 const configJson = JSON.stringify(result.config); const validationErr = validateJsonConfig(configJson); @@ -261,20 +245,15 @@ const McpFormModal: React.FC = ({ return; } - // 自动填充提取的 id（仅当表单 id 为空且不在编辑模式时） if (result.id && !formId.trim() && !isEditing) { const uniqueId = ensureUniqueId(result.id); setFormId(uniqueId); - // 如果 name 也为空，同时填充 name if (!formName.trim()) { setFormName(result.id); } } - // 不在输入时自动格式化，保持用户输入的原样 - // 格式清理将在提交时进行 - setConfigError(""); } catch (err: any) { const errorMessage = err?.message || String(err); @@ -283,30 +262,11 @@ const McpFormModal: React.FC = ({ } }; - const handleFormatJson = () => { - if (!formConfig.trim()) return; - - try { - const formatted = formatJSON(formConfig); - setFormConfig(formatted); - toast.success(t("common.formatSuccess")); - } catch (error) { - const errorMessage = - error instanceof Error ? error.message : String(error); - toast.error( - t("common.formatError", { - error: errorMessage, - }), - ); - } - }; - const handleWizardApply = (title: string, json: string) => { setFormId(title); if (!formName.trim()) { setFormName(title); } - // Wizard returns JSON, convert based on format if needed if (useToml) { try { const server = JSON.parse(json) as McpServerSpec; @@ -329,17 +289,14 @@ const McpFormModal: React.FC = ({ return; } - // 新增模式：阻止提交重名 ID if (!isEditing && existingIds.includes(trimmedId)) { setIdError(t("mcp.error.idExists")); return; } - // Validate configuration format let serverSpec: McpServerSpec; if (useToml) { - // TOML mode const tomlError = validateTomlConfig(formConfig); setConfigError(tomlError); if (tomlError) { @@ -348,7 +305,6 @@ const McpFormModal: React.FC = ({ } if (!formConfig.trim()) { - // Empty configuration serverSpec = { type: "stdio", command: "", @@ -365,9 +321,7 @@ const McpFormModal: React.FC = ({ } } } else { - // JSON mode if (!formConfig.trim()) { - // Empty configuration serverSpec = { type: "stdio", command: "", @@ -375,7 +329,6 @@ const McpFormModal: React.FC = ({ }; } else { try { - // 使用智能解析器，支持带外层键的格式 const result = parseSmartMcpJson(formConfig); serverSpec = result.config as McpServerSpec; } catch (e: any) { @@ -387,7 +340,6 @@ const McpFormModal: React.FC = ({ } } - // 前置必填校验 if (serverSpec?.type === "stdio" && !serverSpec?.command?.trim()) { toast.error(t("mcp.error.commandRequired"), { duration: 3000 }); return; @@ -402,7 +354,6 @@ const McpFormModal: React.FC = ({ setSaving(true); try { - // 先处理 name 字段（必填） const nameTrimmed = (formName || trimmedId).trim(); const finalName = nameTrimmed || trimmedId; @@ -411,7 +362,6 @@ const McpFormModal: React.FC = ({ id: trimmedId, name: finalName, server: serverSpec, - // 使用表单中的启用状态（v3.7.0 完整重构） apps: enabledApps, }; @@ -446,10 +396,9 @@ const McpFormModal: React.FC = ({ delete entry.tags; } - // 保存到统一配置 await upsertMutation.mutateAsync(entry); toast.success(t("common.success")); - await onSave(); // 通知父组件关闭表单 + await onSave(); } catch (error: any) { const detail = extractErrorMessage(error); const mapped = translateMcpBackendError(detail, t); @@ -466,288 +415,264 @@ const McpFormModal: React.FC = ({ return ( <> - !open && onClose()}> - - - {getFormTitle()} - - - {/* Content - Scrollable */} -
- {/* 预设选择（仅新增时展示） */} - {!isEditing && ( -
- -
- - {mcpPresets.map((preset, idx) => { - const descriptionKey = `mcp.presets.${preset.id}.description`; - return ( - - ); - })} -
-
- )} - {/* ID (标题) */} -
-
- - {!isEditing && idError && ( - - {idError} - - )} -
- handleIdChange(e.target.value)} - disabled={isEditing} - /> -
- - {/* Name */} -
- - setFormName(e.target.value)} - /> -
- - {/* 启用到哪些应用（v3.7.0 新增） */} -
- -
-
- - setEnabledApps({ ...enabledApps, claude: checked }) - } - /> - -
- -
- - setEnabledApps({ ...enabledApps, codex: checked }) - } - /> - -
- -
- - setEnabledApps({ ...enabledApps, gemini: checked }) - } - /> - -
-
-
- - {/* 可折叠的附加信息按钮 */} -
+ + {/* 预设选择（仅新增时展示） */} + {!isEditing && ( +
+ +
-
- - {/* 附加信息区域（可折叠） */} - {showMetadata && ( - <> - {/* Description (描述) */} -
- - setFormDescription(e.target.value)} - /> -
- - {/* Tags */} -
- - setFormTags(e.target.value)} - /> -
- - {/* Homepage */} -
- - setFormHomepage(e.target.value)} - /> -
- - {/* Docs */} -
- - setFormDocs(e.target.value)} - /> -
- - )} - - {/* 配置输入框（根据格式显示 JSON 或 TOML） */} -
-
- - {(isEditing || selectedPreset === -1) && ( + {mcpPresets.map((preset, idx) => { + const descriptionKey = `mcp.presets.${preset.id}.description`; + return ( - )} -
-