bb48f4f6af
This commit completes Stage 2.5-2.6 of the refactoring plan by: - Consolidating 8 provider form files (1941+ lines) into a single unified ProviderForm component (353 lines), reducing code by ~82% - Implementing modern form management with react-hook-form and zod - Adding preset provider categorization with grouped select UI - Supporting dual-mode operation for both Claude and Codex configs - Removing redundant subcomponents: - ApiKeyInput.tsx (72 lines) - ClaudeConfigEditor.tsx (205 lines) - CodexConfigEditor.tsx (667 lines) - EndpointSpeedTest.tsx (636 lines) - KimiModelSelector.tsx (195 lines) - PresetSelector.tsx (119 lines) Key improvements: - Type-safe form values with ProviderFormValues extension - Automatic template value application for presets - Better internationalization coverage - Cleaner separation of concerns - Enhanced UX with categorized preset groups Updates AddProviderDialog and EditProviderDialog to pass appType prop and handle preset category metadata.
92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import { useCallback } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import type { Provider } from "@/types";
|
|
import {
|
|
ProviderForm,
|
|
type ProviderFormValues,
|
|
} from "@/components/providers/forms/ProviderForm";
|
|
import type { AppType } from "@/lib/api";
|
|
|
|
interface EditProviderDialogProps {
|
|
open: boolean;
|
|
provider: Provider | null;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSubmit: (provider: Provider) => Promise<void> | void;
|
|
appType: AppType;
|
|
}
|
|
|
|
export function EditProviderDialog({
|
|
open,
|
|
provider,
|
|
onOpenChange,
|
|
onSubmit,
|
|
appType,
|
|
}: EditProviderDialogProps) {
|
|
const { t } = useTranslation();
|
|
|
|
const handleSubmit = useCallback(
|
|
async (values: ProviderFormValues) => {
|
|
if (!provider) return;
|
|
|
|
const parsedConfig = JSON.parse(values.settingsConfig) as Record<
|
|
string,
|
|
unknown
|
|
>;
|
|
|
|
const updatedProvider: Provider = {
|
|
...provider,
|
|
name: values.name.trim(),
|
|
websiteUrl: values.websiteUrl?.trim() || undefined,
|
|
settingsConfig: parsedConfig,
|
|
...(values.presetCategory
|
|
? { category: values.presetCategory }
|
|
: {}),
|
|
};
|
|
|
|
await onSubmit(updatedProvider);
|
|
onOpenChange(false);
|
|
},
|
|
[onSubmit, onOpenChange, provider],
|
|
);
|
|
|
|
if (!provider) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("provider.editProvider", { defaultValue: "编辑供应商" })}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t("provider.editDescription", {
|
|
defaultValue: "更新配置后将立即应用到当前供应商。",
|
|
})}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<ProviderForm
|
|
appType={appType}
|
|
submitLabel={t("common.save", { defaultValue: "保存" })}
|
|
onSubmit={handleSubmit}
|
|
onCancel={() => onOpenChange(false)}
|
|
initialData={{
|
|
name: provider.name,
|
|
websiteUrl: provider.websiteUrl,
|
|
settingsConfig: provider.settingsConfig,
|
|
}}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|