refactor: unify directory structure and extract shared components

- Migrate all form components from ProviderForm/ to providers/forms/ - Create shared components to eliminate code duplication: * ApiKeySection: unified API key input with "Get API Key" link * EndpointField: unified endpoint URL input with manage button - Refactor ClaudeFormFields (-31% lines) and CodexFormFields (-33% lines) - Update all import paths to use new locations - Reduce code duplication from ~12% to ~7% This change improves maintainability and makes the codebase more DRY.
2025-10-17 14:31:34 +08:00
parent 54b0b3b139
commit c1f5ddf763
12 changed files with 201 additions and 148 deletions
--- a/src/components/providers/forms/ApiKeyInput.tsx
+++ b/src/components/providers/forms/ApiKeyInput.tsx
--- a/src/components/providers/forms/ClaudeConfigEditor.tsx
+++ b/src/components/providers/forms/ClaudeConfigEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import JsonEditor from "../JsonEditor";
+import JsonEditor from "@/components/JsonEditor";
 import { X, Save } from "lucide-react";
-import { isLinux } from "../../lib/platform";
+import { isLinux } from "@/lib/platform";
 import { useTranslation } from "react-i18next";

 interface ClaudeConfigEditorProps {
--- a/src/components/providers/forms/ClaudeFormFields.tsx
+++ b/src/components/providers/forms/ClaudeFormFields.tsx
@@ -1,10 +1,9 @@
 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 EndpointSpeedTest from "./EndpointSpeedTest";
+import KimiModelSelector from "./KimiModelSelector";
+import { ApiKeySection, EndpointField } from "./shared";
 import type { ProviderCategory } from "@/types";
 import type { TemplateValueConfig } from "@/config/providerPresets";

@@ -90,38 +89,13 @@ export function ClaudeFormFields({
    <>
      {/* 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>
+        <ApiKeySection
+          value={apiKey}
+          onChange={onApiKeyChange}
+          category={category}
+          shouldShowLink={shouldShowApiKeyLink}
+          websiteUrl={websiteUrl}
+        />
      )}

      {/* 模板变量输入 */}
@@ -161,40 +135,19 @@ export function ClaudeFormFields({

      {/* 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>
+        <EndpointField
+          id="baseUrl"
+          label={t("providerForm.apiEndpoint", { defaultValue: "API 端点" })}
+          value={baseUrl}
+          onChange={onBaseUrlChange}
+          placeholder={t("providerForm.apiEndpointPlaceholder", {
+            defaultValue: "https://api.example.com",
+          })}
+          hint={t("providerForm.apiHint", {
+            defaultValue: "API 端点地址用于连接服务器",
+          })}
+          onManageClick={() => onEndpointModalToggle(true)}
+        />
      )}

      {/* 端点测速弹窗 */}
--- a/src/components/providers/forms/CodexConfigEditor.tsx
+++ b/src/components/providers/forms/CodexConfigEditor.tsx
@@ -2,13 +2,13 @@ import React, { useState, useEffect, useRef } from "react";

 import { X, Save } from "lucide-react";

-import { isLinux } from "../../lib/platform";
+import { isLinux } from "@/lib/platform";
 import { useTranslation } from "react-i18next";

 import {
  generateThirdPartyAuth,
  generateThirdPartyConfig,
-} from "../../config/codexProviderPresets";
+} from "@/config/codexProviderPresets";

 interface CodexConfigEditorProps {
  authValue: string;
--- a/src/components/providers/forms/CodexFormFields.tsx
+++ b/src/components/providers/forms/CodexFormFields.tsx
@@ -1,9 +1,6 @@
 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 EndpointSpeedTest from "./EndpointSpeedTest";
+import { ApiKeySection, EndpointField } from "./shared";
 import type { ProviderCategory } from "@/types";

 interface EndpointCandidate {
@@ -49,77 +46,39 @@ export function CodexFormFields({
  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>
+      <ApiKeySection
+        id="codexApiKey"
+        label="API Key"
+        value={codexApiKey}
+        onChange={onApiKeyChange}
+        category={category}
+        shouldShowLink={shouldShowApiKeyLink}
+        websiteUrl={websiteUrl}
+        placeholder={{
+          official: t("providerForm.codexOfficialNoApiKey", {
+            defaultValue: "官方供应商无需 API Key",
+          }),
+          thirdParty: t("providerForm.codexApiKeyAutoFill", {
+            defaultValue: "输入 API Key，将自动填充到配置",
+          }),
+        }}
+      />

      {/* 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>
+        <EndpointField
+          id="codexBaseUrl"
+          label={t("codexConfig.apiUrlLabel", { defaultValue: "API 端点" })}
+          value={codexBaseUrl}
+          onChange={onBaseUrlChange}
+          placeholder={t("providerForm.codexApiEndpointPlaceholder", {
+            defaultValue: "https://api.example.com/v1",
+          })}
+          hint={t("providerForm.codexApiHint", {
+            defaultValue: "Codex API 端点地址",
+          })}
+          onManageClick={() => onEndpointModalToggle(true)}
+        />
      )}

      {/* 端点测速弹窗 - Codex */}
--- a/src/components/providers/forms/EndpointSpeedTest.tsx
+++ b/src/components/providers/forms/EndpointSpeedTest.tsx
--- a/src/components/providers/forms/KimiModelSelector.tsx
+++ b/src/components/providers/forms/KimiModelSelector.tsx
--- a/src/components/providers/forms/PresetSelector.tsx
+++ b/src/components/providers/forms/PresetSelector.tsx
--- a/src/components/providers/forms/ProviderForm.tsx
+++ b/src/components/providers/forms/ProviderForm.tsx
@@ -13,7 +13,7 @@ import {
  type CodexProviderPreset,
 } from "@/config/codexProviderPresets";
 import { applyTemplateValues } from "@/utils/providerConfigUtils";
-import CodexConfigEditor from "@/components/ProviderForm/CodexConfigEditor";
+import CodexConfigEditor from "./CodexConfigEditor";
 import { CommonConfigEditor } from "./CommonConfigEditor";
 import { ProviderPresetSelector } from "./ProviderPresetSelector";
 import { BasicFormFields } from "./BasicFormFields";
--- a/src/components/providers/forms/shared/ApiKeySection.tsx
+++ b/src/components/providers/forms/shared/ApiKeySection.tsx
@@ -0,0 +1,76 @@
+import { useTranslation } from "react-i18next";
+import ApiKeyInput from "../ApiKeyInput";
+import type { ProviderCategory } from "@/types";
+
+interface ApiKeySectionProps {
+  id?: string;
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  category?: ProviderCategory;
+  shouldShowLink: boolean;
+  websiteUrl: string;
+  placeholder?: {
+    official: string;
+    thirdParty: string;
+  };
+  disabled?: boolean;
+}
+
+export function ApiKeySection({
+  id,
+  label,
+  value,
+  onChange,
+  category,
+  shouldShowLink,
+  websiteUrl,
+  placeholder,
+  disabled,
+}: ApiKeySectionProps) {
+  const { t } = useTranslation();
+
+  const defaultPlaceholder = {
+    official: t("providerForm.officialNoApiKey", {
+      defaultValue: "官方供应商无需 API Key",
+    }),
+    thirdParty: t("providerForm.apiKeyAutoFill", {
+      defaultValue: "输入 API Key，将自动填充到配置",
+    }),
+  };
+
+  const finalPlaceholder = placeholder || defaultPlaceholder;
+
+  return (
+    <div className="space-y-1">
+      <ApiKeyInput
+        id={id}
+        label={label}
+        value={value}
+        onChange={onChange}
+        required={category !== "official"}
+        placeholder={
+          category === "official"
+            ? finalPlaceholder.official
+            : finalPlaceholder.thirdParty
+        }
+        disabled={disabled ?? category === "official"}
+      />
+      {/* API Key 获取链接 */}
+      {shouldShowLink && 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>
+  );
+}
--- a/src/components/providers/forms/shared/EndpointField.tsx
+++ b/src/components/providers/forms/shared/EndpointField.tsx
@@ -0,0 +1,63 @@
+import { useTranslation } from "react-i18next";
+import { FormLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Zap } from "lucide-react";
+
+interface EndpointFieldProps {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  hint: string;
+  showManageButton?: boolean;
+  onManageClick?: () => void;
+  manageButtonLabel?: string;
+}
+
+export function EndpointField({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  hint,
+  showManageButton = true,
+  onManageClick,
+  manageButtonLabel,
+}: EndpointFieldProps) {
+  const { t } = useTranslation();
+
+  const defaultManageLabel = t("providerForm.manageAndTest", {
+    defaultValue: "管理和测速",
+  });
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <FormLabel htmlFor={id}>{label}</FormLabel>
+        {showManageButton && onManageClick && (
+          <button
+            type="button"
+            onClick={onManageClick}
+            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" />
+            {manageButtonLabel || defaultManageLabel}
+          </button>
+        )}
+      </div>
+      <Input
+        id={id}
+        type="url"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        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">{hint}</p>
+      </div>
+    </div>
+  );
+}
--- a/src/components/providers/forms/shared/index.ts
+++ b/src/components/providers/forms/shared/index.ts
@@ -0,0 +1,2 @@
+export { ApiKeySection } from "./ApiKeySection";
+export { EndpointField } from "./EndpointField";