From 0868a71576f0221e3cb13c9849ae7ab8f64379f5 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 16 Oct 2025 21:40:42 +0800
Subject: [PATCH] refactor: split ProviderForm into smaller focused components

- Created ProviderPresetSelector component (80 lines)
- Created BasicFormFields component (60 lines)
- Created ClaudeFormFields component (272 lines)
- Created CodexFormFields component (131 lines)
- Reduced ProviderForm from 866 to 544 lines (37% reduction)

Each component now has a clear single responsibility:
- ProviderPresetSelector: Handles preset selection UI
- BasicFormFields: Name and website URL inputs
- ClaudeFormFields: All Claude-specific form fields
- CodexFormFields: All Codex-specific form fields
- ProviderForm: Orchestrates hooks and component composition

Benefits:
- Better code organization and maintainability
- Easier to test individual components
- Clearer separation of concerns
- More reusable components
---
 .../providers/forms/BasicFormFields.tsx       |  60 +++
 .../providers/forms/ClaudeFormFields.tsx      | 272 +++++++++++
 .../providers/forms/CodexFormFields.tsx       | 131 ++++++
 .../providers/forms/ProviderForm.tsx          | 438 +++---------------
 .../forms/ProviderPresetSelector.tsx          |  80 ++++
 5 files changed, 601 insertions(+), 380 deletions(-)
 create mode 100644 src/components/providers/forms/BasicFormFields.tsx
 create mode 100644 src/components/providers/forms/ClaudeFormFields.tsx
 create mode 100644 src/components/providers/forms/CodexFormFields.tsx
 create mode 100644 src/components/providers/forms/ProviderPresetSelector.tsx

diff --git a/src/components/providers/forms/BasicFormFields.tsx b/src/components/providers/forms/BasicFormFields.tsx
new file mode 100644
index 0000000..6b0da5c
--- /dev/null
+++ b/src/components/providers/forms/BasicFormFields.tsx
@@ -0,0 +1,60 @@
+import { useTranslation } from "react-i18next";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import type { UseFormReturn } from "react-hook-form";
+import type { ProviderFormData } from "@/lib/schemas/provider";
+
+interface BasicFormFieldsProps {
+  form: UseFormReturn<ProviderFormData>;
+}
+
+export function BasicFormFields({ form }: BasicFormFieldsProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {t("provider.name", { defaultValue: "供应商名称" })}
+            </FormLabel>
+            <FormControl>
+              <Input
+                {...field}
+                placeholder={t("provider.namePlaceholder", {
+                  defaultValue: "例如：Claude 官方",
+                })}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="websiteUrl"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {t("provider.websiteUrl", { defaultValue: "官网链接" })}
+            </FormLabel>
+            <FormControl>
+              <Input {...field} placeholder="https://" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}
diff --git a/src/components/providers/forms/ClaudeFormFields.tsx b/src/components/providers/forms/ClaudeFormFields.tsx
new file mode 100644
index 0000000..f01b3d6
--- /dev/null
+++ b/src/components/providers/forms/ClaudeFormFields.tsx
@@ -0,0 +1,272 @@
+import { useTranslation } from "react-i18next";
+import { FormLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import ApiKeyInput from "@/components/ProviderForm/ApiKeyInput";
+import EndpointSpeedTest from "@/components/ProviderForm/EndpointSpeedTest";
+import KimiModelSelector from "@/components/ProviderForm/KimiModelSelector";
+import { Zap } from "lucide-react";
+import type { ProviderCategory } from "@/types";
+import type { TemplateValueConfig } from "@/config/providerPresets";
+
+interface ClaudeFormFieldsProps {
+  // API Key
+  shouldShowApiKey: boolean;
+  apiKey: string;
+  onApiKeyChange: (key: string) => void;
+  category?: ProviderCategory;
+  shouldShowApiKeyLink: boolean;
+  websiteUrl: string;
+
+  // Template Values
+  templateValueEntries: Array<[string, TemplateValueConfig]>;
+  templateValues: Record<string, TemplateValueConfig>;
+  templatePresetName: string;
+  onTemplateValueChange: (key: string, value: string) => void;
+
+  // Base URL
+  shouldShowSpeedTest: boolean;
+  baseUrl: string;
+  onBaseUrlChange: (url: string) => void;
+  isEndpointModalOpen: boolean;
+  onEndpointModalToggle: (open: boolean) => void;
+  onCustomEndpointsChange: (endpoints: string[]) => void;
+
+  // Model Selector
+  shouldShowKimiSelector: boolean;
+  shouldShowModelSelector: boolean;
+  claudeModel: string;
+  claudeSmallFastModel: string;
+  onModelChange: (
+    field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL",
+    value: string
+  ) => void;
+
+  // Kimi Model Selector
+  kimiAnthropicModel: string;
+  kimiAnthropicSmallFastModel: string;
+  onKimiModelChange: (
+    field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL",
+    value: string
+  ) => void;
+}
+
+export function ClaudeFormFields({
+  shouldShowApiKey,
+  apiKey,
+  onApiKeyChange,
+  category,
+  shouldShowApiKeyLink,
+  websiteUrl,
+  templateValueEntries,
+  templateValues,
+  templatePresetName,
+  onTemplateValueChange,
+  shouldShowSpeedTest,
+  baseUrl,
+  onBaseUrlChange,
+  isEndpointModalOpen,
+  onEndpointModalToggle,
+  onCustomEndpointsChange,
+  shouldShowKimiSelector,
+  shouldShowModelSelector,
+  claudeModel,
+  claudeSmallFastModel,
+  onModelChange,
+  kimiAnthropicModel,
+  kimiAnthropicSmallFastModel,
+  onKimiModelChange,
+}: ClaudeFormFieldsProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {/* API Key 输入框 */}
+      {shouldShowApiKey && (
+        <div className="space-y-1">
+          <ApiKeyInput
+            value={apiKey}
+            onChange={onApiKeyChange}
+            required={category !== "official"}
+            placeholder={
+              category === "official"
+                ? t("providerForm.officialNoApiKey", {
+                    defaultValue: "官方供应商无需 API Key",
+                  })
+                : t("providerForm.apiKeyAutoFill", {
+                    defaultValue: "输入 API Key，将自动填充到配置",
+                  })
+            }
+            disabled={category === "official"}
+          />
+          {/* API Key 获取链接 */}
+          {shouldShowApiKeyLink && websiteUrl && (
+            <div className="-mt-1 pl-1">
+              <a
+                href={websiteUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+              >
+                {t("providerForm.getApiKey", {
+                  defaultValue: "获取 API Key",
+                })}
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 模板变量输入 */}
+      {templateValueEntries.length > 0 && (
+        <div className="space-y-3">
+          <FormLabel>
+            {t("providerForm.parameterConfig", {
+              name: templatePresetName,
+              defaultValue: `${templatePresetName} 参数配置`,
+            })}
+          </FormLabel>
+          <div className="space-y-4">
+            {templateValueEntries.map(([key, config]) => (
+              <div key={key} className="space-y-2">
+                <FormLabel htmlFor={`template-${key}`}>
+                  {config.label}
+                </FormLabel>
+                <Input
+                  id={`template-${key}`}
+                  type="text"
+                  required
+                  value={
+                    templateValues[key]?.editorValue ??
+                    config.editorValue ??
+                    config.defaultValue ??
+                    ""
+                  }
+                  onChange={(e) => onTemplateValueChange(key, e.target.value)}
+                  placeholder={config.placeholder || config.label}
+                  autoComplete="off"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Base URL 输入框 */}
+      {shouldShowSpeedTest && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <FormLabel htmlFor="baseUrl">
+              {t("providerForm.apiEndpoint", { defaultValue: "API 端点" })}
+            </FormLabel>
+            <button
+              type="button"
+              onClick={() => onEndpointModalToggle(true)}
+              className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            >
+              <Zap className="h-3.5 w-3.5" />
+              {t("providerForm.manageAndTest", {
+                defaultValue: "管理和测速",
+              })}
+            </button>
+          </div>
+          <Input
+            id="baseUrl"
+            type="url"
+            value={baseUrl}
+            onChange={(e) => onBaseUrlChange(e.target.value)}
+            placeholder={t("providerForm.apiEndpointPlaceholder", {
+              defaultValue: "https://api.example.com",
+            })}
+            autoComplete="off"
+          />
+          <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
+            <p className="text-xs text-amber-600 dark:text-amber-400">
+              {t("providerForm.apiHint", {
+                defaultValue: "API 端点地址用于连接服务器",
+              })}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* 端点测速弹窗 */}
+      {shouldShowSpeedTest && isEndpointModalOpen && (
+        <EndpointSpeedTest
+          appType="claude"
+          value={baseUrl}
+          onChange={onBaseUrlChange}
+          initialEndpoints={[{ url: baseUrl }]}
+          visible={isEndpointModalOpen}
+          onClose={() => onEndpointModalToggle(false)}
+          onCustomEndpointsChange={onCustomEndpointsChange}
+        />
+      )}
+
+      {/* 模型选择器 */}
+      {shouldShowModelSelector && (
+        <div className="space-y-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* ANTHROPIC_MODEL */}
+            <div className="space-y-2">
+              <FormLabel htmlFor="claudeModel">
+                {t("providerForm.anthropicModel", {
+                  defaultValue: "主模型",
+                })}
+              </FormLabel>
+              <Input
+                id="claudeModel"
+                type="text"
+                value={claudeModel}
+                onChange={(e) =>
+                  onModelChange("ANTHROPIC_MODEL", e.target.value)
+                }
+                placeholder={t("providerForm.modelPlaceholder", {
+                  defaultValue: "claude-3-7-sonnet-20250219",
+                })}
+                autoComplete="off"
+              />
+            </div>
+
+            {/* ANTHROPIC_SMALL_FAST_MODEL */}
+            <div className="space-y-2">
+              <FormLabel htmlFor="claudeSmallFastModel">
+                {t("providerForm.anthropicSmallFastModel", {
+                  defaultValue: "快速模型",
+                })}
+              </FormLabel>
+              <Input
+                id="claudeSmallFastModel"
+                type="text"
+                value={claudeSmallFastModel}
+                onChange={(e) =>
+                  onModelChange("ANTHROPIC_SMALL_FAST_MODEL", e.target.value)
+                }
+                placeholder={t("providerForm.smallModelPlaceholder", {
+                  defaultValue: "claude-3-5-haiku-20241022",
+                })}
+                autoComplete="off"
+              />
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {t("providerForm.modelHelper", {
+              defaultValue:
+                "可选：指定默认使用的 Claude 模型，留空则使用系统默认。",
+            })}
+          </p>
+        </div>
+      )}
+
+      {/* Kimi 模型选择器 */}
+      {shouldShowKimiSelector && (
+        <KimiModelSelector
+          apiKey={apiKey}
+          anthropicModel={kimiAnthropicModel}
+          anthropicSmallFastModel={kimiAnthropicSmallFastModel}
+          onModelChange={onKimiModelChange}
+          disabled={category === "official"}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/providers/forms/CodexFormFields.tsx b/src/components/providers/forms/CodexFormFields.tsx
new file mode 100644
index 0000000..01f9cf1
--- /dev/null
+++ b/src/components/providers/forms/CodexFormFields.tsx
@@ -0,0 +1,131 @@
+import { useTranslation } from "react-i18next";
+import { FormLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import ApiKeyInput from "@/components/ProviderForm/ApiKeyInput";
+import EndpointSpeedTest from "@/components/ProviderForm/EndpointSpeedTest";
+import { Zap } from "lucide-react";
+import type { ProviderCategory } from "@/types";
+
+interface CodexFormFieldsProps {
+  // API Key
+  codexApiKey: string;
+  onApiKeyChange: (key: string) => void;
+  category?: ProviderCategory;
+  shouldShowApiKeyLink: boolean;
+  websiteUrl: string;
+
+  // Base URL
+  shouldShowSpeedTest: boolean;
+  codexBaseUrl: string;
+  onBaseUrlChange: (url: string) => void;
+  isEndpointModalOpen: boolean;
+  onEndpointModalToggle: (open: boolean) => void;
+  onCustomEndpointsChange: (endpoints: string[]) => void;
+}
+
+export function CodexFormFields({
+  codexApiKey,
+  onApiKeyChange,
+  category,
+  shouldShowApiKeyLink,
+  websiteUrl,
+  shouldShowSpeedTest,
+  codexBaseUrl,
+  onBaseUrlChange,
+  isEndpointModalOpen,
+  onEndpointModalToggle,
+  onCustomEndpointsChange,
+}: CodexFormFieldsProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {/* Codex API Key 输入框 */}
+      <div className="space-y-1">
+        <ApiKeyInput
+          id="codexApiKey"
+          label="API Key"
+          value={codexApiKey}
+          onChange={onApiKeyChange}
+          required={category !== "official"}
+          placeholder={
+            category === "official"
+              ? t("providerForm.codexOfficialNoApiKey", {
+                  defaultValue: "官方供应商无需 API Key",
+                })
+              : t("providerForm.codexApiKeyAutoFill", {
+                  defaultValue: "输入 API Key，将自动填充到配置",
+                })
+          }
+          disabled={category === "official"}
+        />
+        {/* Codex API Key 获取链接 */}
+        {shouldShowApiKeyLink && websiteUrl && (
+          <div className="-mt-1 pl-1">
+            <a
+              href={websiteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+            >
+              {t("providerForm.getApiKey", {
+                defaultValue: "获取 API Key",
+              })}
+            </a>
+          </div>
+        )}
+      </div>
+
+      {/* Codex Base URL 输入框 */}
+      {shouldShowSpeedTest && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <FormLabel htmlFor="codexBaseUrl">
+              {t("codexConfig.apiUrlLabel", { defaultValue: "API 端点" })}
+            </FormLabel>
+            <button
+              type="button"
+              onClick={() => onEndpointModalToggle(true)}
+              className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            >
+              <Zap className="h-3.5 w-3.5" />
+              {t("providerForm.manageAndTest", {
+                defaultValue: "管理和测速",
+              })}
+            </button>
+          </div>
+          <Input
+            id="codexBaseUrl"
+            type="url"
+            value={codexBaseUrl}
+            onChange={(e) => onBaseUrlChange(e.target.value)}
+            placeholder={t("providerForm.codexApiEndpointPlaceholder", {
+              defaultValue: "https://api.example.com/v1",
+            })}
+            autoComplete="off"
+          />
+          <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
+            <p className="text-xs text-amber-600 dark:text-amber-400">
+              {t("providerForm.codexApiHint", {
+                defaultValue: "Codex API 端点地址",
+              })}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* 端点测速弹窗 - Codex */}
+      {shouldShowSpeedTest && isEndpointModalOpen && (
+        <EndpointSpeedTest
+          appType="codex"
+          value={codexBaseUrl}
+          onChange={onBaseUrlChange}
+          initialEndpoints={[{ url: codexBaseUrl }]}
+          visible={isEndpointModalOpen}
+          onClose={() => onEndpointModalToggle(false)}
+          onCustomEndpointsChange={onCustomEndpointsChange}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/providers/forms/ProviderForm.tsx b/src/components/providers/forms/ProviderForm.tsx
index 63da05c..b4d8b22 100644
--- a/src/components/providers/forms/ProviderForm.tsx
+++ b/src/components/providers/forms/ProviderForm.tsx
@@ -3,15 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Form } from "@/components/ui/form";
 import { providerSchema, type ProviderFormData } from "@/lib/schemas/provider";
 import type { AppType } from "@/lib/api";
 import type { ProviderCategory, CustomEndpoint } from "@/types";
@@ -21,12 +13,12 @@ import {
   type CodexProviderPreset,
 } from "@/config/codexProviderPresets";
 import { applyTemplateValues } from "@/utils/providerConfigUtils";
-import ApiKeyInput from "@/components/ProviderForm/ApiKeyInput";
-import EndpointSpeedTest from "@/components/ProviderForm/EndpointSpeedTest";
 import CodexConfigEditor from "@/components/ProviderForm/CodexConfigEditor";
-import KimiModelSelector from "@/components/ProviderForm/KimiModelSelector";
 import { CommonConfigEditor } from "./CommonConfigEditor";
-import { Zap } from "lucide-react";
+import { ProviderPresetSelector } from "./ProviderPresetSelector";
+import { BasicFormFields } from "./BasicFormFields";
+import { ClaudeFormFields } from "./ClaudeFormFields";
+import { CodexFormFields } from "./CodexFormFields";
 import {
   useProviderCategory,
   useApiKeyState,
@@ -436,382 +428,68 @@ export function ProviderForm({
       <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
         {/* 预设供应商选择（仅新增模式显示） */}
         {!initialData && (
-          <div className="space-y-3">
-            <FormLabel>
-              {t("providerPreset.label", { defaultValue: "预设供应商" })}
-            </FormLabel>
-            <div className="flex flex-wrap gap-2">
-              {/* 自定义按钮 */}
-              <button
-                type="button"
-                onClick={() => handlePresetChange("custom")}
-                className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                  selectedPresetId === "custom"
-                    ? "bg-emerald-500 text-white dark:bg-emerald-600"
-                    : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
-                }`}
-              >
-                {t("providerPreset.custom", { defaultValue: "自定义配置" })}
-              </button>
-
-              {/* 预设按钮 */}
-              {categoryKeys.map((category) => {
-                const entries = groupedPresets[category];
-                if (!entries || entries.length === 0) return null;
-                return entries.map((entry) => (
-                  <button
-                    key={entry.id}
-                    type="button"
-                    onClick={() => handlePresetChange(entry.id)}
-                    className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                      selectedPresetId === entry.id
-                        ? "bg-emerald-500 text-white dark:bg-emerald-600"
-                        : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
-                    }`}
-                    title={
-                      presetCategoryLabels[category] ??
-                      t("providerPreset.categoryOther", {
-                        defaultValue: "其他",
-                      })
-                    }
-                  >
-                    {entry.preset.name}
-                  </button>
-                ));
-              })}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t("providerPreset.helper", {
-                defaultValue: "选择预设后可继续调整下方字段。",
-              })}
-            </p>
-          </div>
+          <ProviderPresetSelector
+            selectedPresetId={selectedPresetId}
+            groupedPresets={groupedPresets}
+            categoryKeys={categoryKeys}
+            presetCategoryLabels={presetCategoryLabels}
+            onPresetChange={handlePresetChange}
+          />
         )}
 
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                {t("provider.name", { defaultValue: "供应商名称" })}
-              </FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  placeholder={t("provider.namePlaceholder", {
-                    defaultValue: "例如：Claude 官方",
-                  })}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+        {/* 基础字段 */}
+        <BasicFormFields form={form} />
 
-        <FormField
-          control={form.control}
-          name="websiteUrl"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                {t("provider.websiteUrl", { defaultValue: "官网链接" })}
-              </FormLabel>
-              <FormControl>
-                <Input {...field} placeholder="https://" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        {/* API Key 输入框（仅 Claude 且非编辑模式显示） */}
-        {appType === "claude" &&
-          shouldShowApiKey(form.watch("settingsConfig"), isEditMode) && (
-            <div className="space-y-1">
-              <ApiKeyInput
-                value={apiKey}
-                onChange={handleApiKeyChange}
-                required={category !== "official"}
-                placeholder={
-                  category === "official"
-                    ? t("providerForm.officialNoApiKey", {
-                        defaultValue: "官方供应商无需 API Key",
-                      })
-                    : t("providerForm.apiKeyAutoFill", {
-                        defaultValue: "输入 API Key，将自动填充到配置",
-                      })
-                }
-                disabled={category === "official"}
-              />
-              {/* API Key 获取链接 */}
-              {shouldShowClaudeApiKeyLink && claudeWebsiteUrl && (
-                <div className="-mt-1 pl-1">
-                  <a
-                    href={claudeWebsiteUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
-                  >
-                    {t("providerForm.getApiKey", {
-                      defaultValue: "获取 API Key",
-                    })}
-                  </a>
-                </div>
-              )}
-            </div>
-          )}
-
-        {/* 模板变量输入（仅 Claude 且有模板变量时显示） */}
-        {appType === "claude" && templateValueEntries.length > 0 && (
-          <div className="space-y-3">
-            <FormLabel>
-              {t("providerForm.parameterConfig", {
-                name: templatePreset?.name || "",
-                defaultValue: `${templatePreset?.name || ""} 参数配置`,
-              })}
-            </FormLabel>
-            <div className="space-y-4">
-              {templateValueEntries.map(([key, config]) => (
-                <div key={key} className="space-y-2">
-                  <FormLabel htmlFor={`template-${key}`}>
-                    {config.label}
-                  </FormLabel>
-                  <Input
-                    id={`template-${key}`}
-                    type="text"
-                    required
-                    value={
-                      templateValues[key]?.editorValue ??
-                      config.editorValue ??
-                      config.defaultValue ??
-                      ""
-                    }
-                    onChange={(e) =>
-                      handleTemplateValueChange(key, e.target.value)
-                    }
-                    placeholder={config.placeholder || config.label}
-                    autoComplete="off"
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
+        {/* Claude 专属字段 */}
+        {appType === "claude" && (
+          <ClaudeFormFields
+            shouldShowApiKey={shouldShowApiKey(
+              form.watch("settingsConfig"),
+              isEditMode
+            )}
+            apiKey={apiKey}
+            onApiKeyChange={handleApiKeyChange}
+            category={category}
+            shouldShowApiKeyLink={shouldShowClaudeApiKeyLink}
+            websiteUrl={claudeWebsiteUrl}
+            templateValueEntries={templateValueEntries}
+            templateValues={templateValues}
+            templatePresetName={templatePreset?.name || ""}
+            onTemplateValueChange={handleTemplateValueChange}
+            shouldShowSpeedTest={shouldShowSpeedTest}
+            baseUrl={baseUrl}
+            onBaseUrlChange={handleClaudeBaseUrlChange}
+            isEndpointModalOpen={isEndpointModalOpen}
+            onEndpointModalToggle={setIsEndpointModalOpen}
+            onCustomEndpointsChange={setDraftCustomEndpoints}
+            shouldShowKimiSelector={shouldShowKimiSelector}
+            shouldShowModelSelector={category !== "official" && !shouldShowKimiSelector}
+            claudeModel={claudeModel}
+            claudeSmallFastModel={claudeSmallFastModel}
+            onModelChange={handleModelChange}
+            kimiAnthropicModel={kimiAnthropicModel}
+            kimiAnthropicSmallFastModel={kimiAnthropicSmallFastModel}
+            onKimiModelChange={handleKimiModelChange}
+          />
         )}
 
-        {/* Base URL 输入框（仅 Claude 第三方/自定义显示） */}
-        {appType === "claude" && shouldShowSpeedTest && (
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <FormLabel htmlFor="baseUrl">
-                {t("providerForm.apiEndpoint", { defaultValue: "API 端点" })}
-              </FormLabel>
-              <button
-                type="button"
-                onClick={() => setIsEndpointModalOpen(true)}
-                className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
-              >
-                <Zap className="h-3.5 w-3.5" />
-                {t("providerForm.manageAndTest", {
-                  defaultValue: "管理和测速",
-                })}
-              </button>
-            </div>
-            <Input
-              id="baseUrl"
-              type="url"
-              value={baseUrl}
-              onChange={(e) => handleClaudeBaseUrlChange(e.target.value)}
-              placeholder={t("providerForm.apiEndpointPlaceholder", {
-                defaultValue: "https://api.example.com",
-              })}
-              autoComplete="off"
-            />
-            <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
-              <p className="text-xs text-amber-600 dark:text-amber-400">
-                {t("providerForm.apiHint", {
-                  defaultValue: "API 端点地址用于连接服务器",
-                })}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* 端点测速弹窗 - Claude */}
-        {appType === "claude" && shouldShowSpeedTest && isEndpointModalOpen && (
-          <EndpointSpeedTest
-            appType={appType}
-            value={baseUrl}
-            onChange={handleClaudeBaseUrlChange}
-            initialEndpoints={[{ url: baseUrl }]}
-            visible={isEndpointModalOpen}
-            onClose={() => setIsEndpointModalOpen(false)}
+        {/* Codex 专属字段 */}
+        {appType === "codex" && !isEditMode && (
+          <CodexFormFields
+            codexApiKey={codexApiKey}
+            onApiKeyChange={handleCodexApiKeyChange}
+            category={category}
+            shouldShowApiKeyLink={shouldShowCodexApiKeyLink}
+            websiteUrl={codexWebsiteUrl}
+            shouldShowSpeedTest={shouldShowSpeedTest}
+            codexBaseUrl={codexBaseUrl}
+            onBaseUrlChange={handleCodexBaseUrlChange}
+            isEndpointModalOpen={isCodexEndpointModalOpen}
+            onEndpointModalToggle={setIsCodexEndpointModalOpen}
             onCustomEndpointsChange={setDraftCustomEndpoints}
           />
         )}
 
-        {/* 模型选择器（仅 Claude 非官方且非 Kimi 供应商显示） */}
-        {appType === "claude" &&
-          category !== "official" &&
-          !shouldShowKimiSelector && (
-            <div className="space-y-3">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {/* ANTHROPIC_MODEL */}
-                <div className="space-y-2">
-                  <FormLabel htmlFor="claudeModel">
-                    {t("providerForm.anthropicModel", {
-                      defaultValue: "主模型",
-                    })}
-                  </FormLabel>
-                  <Input
-                    id="claudeModel"
-                    type="text"
-                    value={claudeModel}
-                    onChange={(e) =>
-                      handleModelChange("ANTHROPIC_MODEL", e.target.value)
-                    }
-                    placeholder={t("providerForm.modelPlaceholder", {
-                      defaultValue: "claude-3-7-sonnet-20250219",
-                    })}
-                    autoComplete="off"
-                  />
-                </div>
-
-                {/* ANTHROPIC_SMALL_FAST_MODEL */}
-                <div className="space-y-2">
-                  <FormLabel htmlFor="claudeSmallFastModel">
-                    {t("providerForm.anthropicSmallFastModel", {
-                      defaultValue: "快速模型",
-                    })}
-                  </FormLabel>
-                  <Input
-                    id="claudeSmallFastModel"
-                    type="text"
-                    value={claudeSmallFastModel}
-                    onChange={(e) =>
-                      handleModelChange(
-                        "ANTHROPIC_SMALL_FAST_MODEL",
-                        e.target.value
-                      )
-                    }
-                    placeholder={t("providerForm.smallModelPlaceholder", {
-                      defaultValue: "claude-3-5-haiku-20241022",
-                    })}
-                    autoComplete="off"
-                  />
-                </div>
-              </div>
-              <p className="text-xs text-muted-foreground">
-                {t("providerForm.modelHelper", {
-                  defaultValue:
-                    "可选：指定默认使用的 Claude 模型，留空则使用系统默认。",
-                })}
-              </p>
-            </div>
-          )}
-
-        {/* Kimi 模型选择器（仅 Claude 且是 Kimi 供应商时显示） */}
-        {appType === "claude" && shouldShowKimiSelector && (
-          <KimiModelSelector
-            apiKey={apiKey}
-            anthropicModel={kimiAnthropicModel}
-            anthropicSmallFastModel={kimiAnthropicSmallFastModel}
-            onModelChange={handleKimiModelChange}
-            disabled={category === "official"}
-          />
-        )}
-
-        {/* Codex API Key 输入框 */}
-        {appType === "codex" && !isEditMode && (
-          <div className="space-y-1">
-            <ApiKeyInput
-              id="codexApiKey"
-              label="API Key"
-              value={codexApiKey}
-              onChange={handleCodexApiKeyChange}
-              required={category !== "official"}
-              placeholder={
-                category === "official"
-                  ? t("providerForm.codexOfficialNoApiKey", {
-                      defaultValue: "官方供应商无需 API Key",
-                    })
-                  : t("providerForm.codexApiKeyAutoFill", {
-                      defaultValue: "输入 API Key，将自动填充到配置",
-                    })
-              }
-              disabled={category === "official"}
-            />
-            {/* Codex API Key 获取链接 */}
-            {shouldShowCodexApiKeyLink && codexWebsiteUrl && (
-              <div className="-mt-1 pl-1">
-                <a
-                  href={codexWebsiteUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
-                >
-                  {t("providerForm.getApiKey", {
-                    defaultValue: "获取 API Key",
-                  })}
-                </a>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Codex Base URL 输入框 */}
-        {appType === "codex" && shouldShowSpeedTest && (
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <FormLabel htmlFor="codexBaseUrl">
-                {t("codexConfig.apiUrlLabel", { defaultValue: "API 端点" })}
-              </FormLabel>
-              <button
-                type="button"
-                onClick={() => setIsCodexEndpointModalOpen(true)}
-                className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
-              >
-                <Zap className="h-3.5 w-3.5" />
-                {t("providerForm.manageAndTest", {
-                  defaultValue: "管理和测速",
-                })}
-              </button>
-            </div>
-            <Input
-              id="codexBaseUrl"
-              type="url"
-              value={codexBaseUrl}
-              onChange={(e) => handleCodexBaseUrlChange(e.target.value)}
-              placeholder={t("providerForm.codexApiEndpointPlaceholder", {
-                defaultValue: "https://api.example.com/v1",
-              })}
-              autoComplete="off"
-            />
-            <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
-              <p className="text-xs text-amber-600 dark:text-amber-400">
-                {t("providerForm.codexApiHint", {
-                  defaultValue: "Codex API 端点地址",
-                })}
-              </p>
-            </div>
-          </div>
-        )}
-
-        {/* 端点测速弹窗 - Codex */}
-        {appType === "codex" &&
-          shouldShowSpeedTest &&
-          isCodexEndpointModalOpen && (
-            <EndpointSpeedTest
-              appType={appType}
-              value={codexBaseUrl}
-              onChange={handleCodexBaseUrlChange}
-              initialEndpoints={[{ url: codexBaseUrl }]}
-              visible={isCodexEndpointModalOpen}
-              onClose={() => setIsCodexEndpointModalOpen(false)}
-              onCustomEndpointsChange={setDraftCustomEndpoints}
-            />
-          )}
-
         {/* 配置编辑器：Claude 使用通用配置编辑器，Codex 使用专用编辑器 */}
         {appType === "codex" ? (
           <CodexConfigEditor
diff --git a/src/components/providers/forms/ProviderPresetSelector.tsx b/src/components/providers/forms/ProviderPresetSelector.tsx
new file mode 100644
index 0000000..d373370
--- /dev/null
+++ b/src/components/providers/forms/ProviderPresetSelector.tsx
@@ -0,0 +1,80 @@
+import { useTranslation } from "react-i18next";
+import { FormLabel } from "@/components/ui/form";
+import type { ProviderPreset } from "@/config/providerPresets";
+import type { CodexProviderPreset } from "@/config/codexProviderPresets";
+
+type PresetEntry = {
+  id: string;
+  preset: ProviderPreset | CodexProviderPreset;
+};
+
+interface ProviderPresetSelectorProps {
+  selectedPresetId: string | null;
+  groupedPresets: Record<string, PresetEntry[]>;
+  categoryKeys: string[];
+  presetCategoryLabels: Record<string, string>;
+  onPresetChange: (value: string) => void;
+}
+
+export function ProviderPresetSelector({
+  selectedPresetId,
+  groupedPresets,
+  categoryKeys,
+  presetCategoryLabels,
+  onPresetChange,
+}: ProviderPresetSelectorProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-3">
+      <FormLabel>
+        {t("providerPreset.label", { defaultValue: "预设供应商" })}
+      </FormLabel>
+      <div className="flex flex-wrap gap-2">
+        {/* 自定义按钮 */}
+        <button
+          type="button"
+          onClick={() => onPresetChange("custom")}
+          className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            selectedPresetId === "custom"
+              ? "bg-emerald-500 text-white dark:bg-emerald-600"
+              : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+          }`}
+        >
+          {t("providerPreset.custom", { defaultValue: "自定义配置" })}
+        </button>
+
+        {/* 预设按钮 */}
+        {categoryKeys.map((category) => {
+          const entries = groupedPresets[category];
+          if (!entries || entries.length === 0) return null;
+          return entries.map((entry) => (
+            <button
+              key={entry.id}
+              type="button"
+              onClick={() => onPresetChange(entry.id)}
+              className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                selectedPresetId === entry.id
+                  ? "bg-emerald-500 text-white dark:bg-emerald-600"
+                  : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+              }`}
+              title={
+                presetCategoryLabels[category] ??
+                t("providerPreset.categoryOther", {
+                  defaultValue: "其他",
+                })
+              }
+            >
+              {entry.preset.name}
+            </button>
+          ));
+        })}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {t("providerPreset.helper", {
+          defaultValue: "选择预设后可继续调整下方字段。",
+        })}
+      </p>
+    </div>
+  );
+}