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
This commit is contained in:
Jason
60
src/components/providers/forms/BasicFormFields.tsx
Normal file
60
src/components/providers/forms/BasicFormFields.tsx
Normal file
@@ -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>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
272
src/components/providers/forms/ClaudeFormFields.tsx
Normal file
272
src/components/providers/forms/ClaudeFormFields.tsx
Normal file
@@ -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"}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
131
src/components/providers/forms/CodexFormFields.tsx
Normal file
131
src/components/providers/forms/CodexFormFields.tsx
Normal file
@@ -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}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -3,15 +3,7 @@ import { useForm } from "react-hook-form";
|
|||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import { Form } from "@/components/ui/form";
|
||||||
Form,
|
|
||||||
FormControl,
|
|
||||||
FormField,
|
|
||||||
FormItem,
|
|
||||||
FormLabel,
|
|
||||||
FormMessage,
|
|
||||||
} from "@/components/ui/form";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { providerSchema, type ProviderFormData } from "@/lib/schemas/provider";
|
import { providerSchema, type ProviderFormData } from "@/lib/schemas/provider";
|
||||||
import type { AppType } from "@/lib/api";
|
import type { AppType } from "@/lib/api";
|
||||||
import type { ProviderCategory, CustomEndpoint } from "@/types";
|
import type { ProviderCategory, CustomEndpoint } from "@/types";
|
||||||
@@ -21,12 +13,12 @@ import {
|
|||||||
type CodexProviderPreset,
|
type CodexProviderPreset,
|
||||||
} from "@/config/codexProviderPresets";
|
} from "@/config/codexProviderPresets";
|
||||||
import { applyTemplateValues } from "@/utils/providerConfigUtils";
|
import { applyTemplateValues } from "@/utils/providerConfigUtils";
|
||||||
import ApiKeyInput from "@/components/ProviderForm/ApiKeyInput";
|
|
||||||
import EndpointSpeedTest from "@/components/ProviderForm/EndpointSpeedTest";
|
|
||||||
import CodexConfigEditor from "@/components/ProviderForm/CodexConfigEditor";
|
import CodexConfigEditor from "@/components/ProviderForm/CodexConfigEditor";
|
||||||
import KimiModelSelector from "@/components/ProviderForm/KimiModelSelector";
|
|
||||||
import { CommonConfigEditor } from "./CommonConfigEditor";
|
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 {
|
import {
|
||||||
useProviderCategory,
|
useProviderCategory,
|
||||||
useApiKeyState,
|
useApiKeyState,
|
||||||
@@ -436,378 +428,64 @@ export function ProviderForm({
|
|||||||
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
|
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
|
||||||
{/* 预设供应商选择（仅新增模式显示） */}
|
{/* 预设供应商选择（仅新增模式显示） */}
|
||||||
{!initialData && (
|
{!initialData && (
|
||||||
<div className="space-y-3">
|
<ProviderPresetSelector
|
||||||
<FormLabel>
|
selectedPresetId={selectedPresetId}
|
||||||
{t("providerPreset.label", { defaultValue: "预设供应商" })}
|
groupedPresets={groupedPresets}
|
||||||
</FormLabel>
|
categoryKeys={categoryKeys}
|
||||||
<div className="flex flex-wrap gap-2">
|
presetCategoryLabels={presetCategoryLabels}
|
||||||
{/* 自定义按钮 */}
|
onPresetChange={handlePresetChange}
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 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)}
|
|
||||||
onCustomEndpointsChange={setDraftCustomEndpoints}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 模型选择器（仅 Claude 非官方且非 Kimi 供应商显示） */}
|
{/* 基础字段 */}
|
||||||
{appType === "claude" &&
|
<BasicFormFields form={form} />
|
||||||
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 */}
|
{/* Claude 专属字段 */}
|
||||||
<div className="space-y-2">
|
{appType === "claude" && (
|
||||||
<FormLabel htmlFor="claudeSmallFastModel">
|
<ClaudeFormFields
|
||||||
{t("providerForm.anthropicSmallFastModel", {
|
shouldShowApiKey={shouldShowApiKey(
|
||||||
defaultValue: "快速模型",
|
form.watch("settingsConfig"),
|
||||||
})}
|
isEditMode
|
||||||
</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}
|
apiKey={apiKey}
|
||||||
anthropicModel={kimiAnthropicModel}
|
onApiKeyChange={handleApiKeyChange}
|
||||||
anthropicSmallFastModel={kimiAnthropicSmallFastModel}
|
category={category}
|
||||||
onModelChange={handleKimiModelChange}
|
shouldShowApiKeyLink={shouldShowClaudeApiKeyLink}
|
||||||
disabled={category === "official"}
|
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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Codex API Key 输入框 */}
|
{/* Codex 专属字段 */}
|
||||||
{appType === "codex" && !isEditMode && (
|
{appType === "codex" && !isEditMode && (
|
||||||
<div className="space-y-1">
|
<CodexFormFields
|
||||||
<ApiKeyInput
|
codexApiKey={codexApiKey}
|
||||||
id="codexApiKey"
|
onApiKeyChange={handleCodexApiKeyChange}
|
||||||
label="API Key"
|
category={category}
|
||||||
value={codexApiKey}
|
shouldShowApiKeyLink={shouldShowCodexApiKeyLink}
|
||||||
onChange={handleCodexApiKeyChange}
|
websiteUrl={codexWebsiteUrl}
|
||||||
required={category !== "official"}
|
shouldShowSpeedTest={shouldShowSpeedTest}
|
||||||
placeholder={
|
codexBaseUrl={codexBaseUrl}
|
||||||
category === "official"
|
onBaseUrlChange={handleCodexBaseUrlChange}
|
||||||
? t("providerForm.codexOfficialNoApiKey", {
|
isEndpointModalOpen={isCodexEndpointModalOpen}
|
||||||
defaultValue: "官方供应商无需 API Key",
|
onEndpointModalToggle={setIsCodexEndpointModalOpen}
|
||||||
})
|
|
||||||
: 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}
|
onCustomEndpointsChange={setDraftCustomEndpoints}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
80
src/components/providers/forms/ProviderPresetSelector.tsx
Normal file
80
src/components/providers/forms/ProviderPresetSelector.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user