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/providers/forms/GeminiCommonConfigModal.tsx

@@ -1,16 +1,9 @@
-import React from "react";
-import { Save, Wand2 } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { Save } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
+import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import { Button } from "@/components/ui/button";
-import { formatJSON } from "@/utils/formatters";
+import JsonEditor from "@/components/JsonEditor";
 
 interface GeminiCommonConfigModalProps {
   isOpen: boolean;
@@ -28,86 +21,32 @@ export const GeminiCommonConfigModal: React.FC<
   GeminiCommonConfigModalProps
 > = ({ isOpen, onClose, value, onChange, error }) => {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
-  const handleFormat = () => {
-    if (!value.trim()) return;
+  useEffect(() => {
+    setIsDarkMode(document.documentElement.classList.contains("dark"));
 
-    try {
-      const formatted = formatJSON(value);
-      onChange(formatted);
-      toast.success(t("common.formatSuccess", { defaultValue: "格式化成功" }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      toast.error(
-        t("common.formatError", {
-          defaultValue: "格式化失败：{{error}}",
-          error: errorMessage,
-        }),
-      );
-    }
-  };
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent
-        zIndex="nested"
-        className="max-w-2xl max-h-[90vh] flex flex-col p-0"
-      >
-        <DialogHeader className="px-6 pt-6 pb-0">
-          <DialogTitle>
-            {t("geminiConfig.editCommonConfigTitle", {
-              defaultValue: "编辑 Gemini 通用配置片段",
-            })}
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-auto px-6 py-4 space-y-4">
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            {t("geminiConfig.commonConfigHint", {
-              defaultValue:
-                "通用配置片段将合并到所有启用它的 Gemini 供应商配置中",
-            })}
-          </p>
-
-          <textarea
-            value={value}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={`{
-  "timeout": 30000,
-  "maxRetries": 3,
-  "customField": "value"
-}`}
-            rows={12}
-            className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active transition-colors resize-y"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="none"
-            spellCheck={false}
-            lang="en"
-            inputMode="text"
-            data-gramm="false"
-            data-gramm_editor="false"
-            data-enable-grammarly="false"
-          />
-
-          <div className="flex items-center justify-between">
-            <button
-              type="button"
-              onClick={handleFormat}
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-            >
-              <Wand2 className="w-3.5 h-3.5" />
-              {t("common.format", { defaultValue: "格式化" })}
-            </button>
-
-            {error && (
-              <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
-            )}
-          </div>
-        </div>
-
-        <DialogFooter>
+    <FullScreenPanel
+      isOpen={isOpen}
+      title={t("geminiConfig.editCommonConfigTitle", {
+        defaultValue: "编辑 Gemini 通用配置片段",
+      })}
+      onClose={onClose}
+      footer={
+        <>
           <Button type="button" variant="outline" onClick={onClose}>
             {t("common.cancel")}
           </Button>
@@ -115,8 +54,35 @@ export const GeminiCommonConfigModal: React.FC<
             <Save className="w-4 h-4" />
             {t("common.save")}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          {t("geminiConfig.commonConfigHint", {
+            defaultValue:
+              "通用配置片段将合并到所有启用它的 Gemini 供应商配置中",
+          })}
+        </p>
+
+        <JsonEditor
+          value={value}
+          onChange={onChange}
+          placeholder={`{
+  "timeout": 30000,
+  "maxRetries": 3,
+  "customField": "value"
+}`}
+          darkMode={isDarkMode}
+          rows={16}
+          showValidation={true}
+          language="json"
+        />
+
+        {error && (
+          <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
+        )}
+      </div>
+    </FullScreenPanel>
   );
 };