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.
This commit is contained in:
76
src/components/providers/forms/shared/ApiKeySection.tsx
Normal file
76
src/components/providers/forms/shared/ApiKeySection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user