feat: 新增模型管理功能(供应商 + 模型 CRUD)
- 新增 providers/models 数据库表、迁移和数据访问层 - 新增 15 个后端 API 路由(供应商/模型 CRUD + 连通性测试) - 新增 AI 服务层(registry.ts: buildProviderRegistry + testProviderConnection) - 新增前端模型管理页面(Tabs: 供应商/模型,含表格、表单、工具栏) - 新增前端 hooks(use-providers, use-models) - 新增共享类型和 MODEL_CAPABILITIES 常量 - 新增 10 个测试文件(66 个测试用例,4 个因 bun test ESM 兼容问题待修复) - 更新开发文档(architecture, backend, frontend) - 附带 apply-review 修复:统一错误响应、提取共享常量、清理重复测试 注意:registry.test.ts 中 4 个测试因 bun test 无法解析 createProviderRegistry ESM 导出而失败,详情见 context.md
This commit is contained in:
113
src/web/pages/models/components/ProviderFormModal.tsx
Normal file
113
src/web/pages/models/components/ProviderFormModal.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { App as AntApp, Form, Input, Modal, Select } from "antd";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import type { CreateProviderRequest, Provider, ProviderType, UpdateProviderRequest } from "../../../../shared/api";
|
||||
|
||||
interface FormValues {
|
||||
apiKey: string;
|
||||
baseUrl: string;
|
||||
name: string;
|
||||
type: ProviderType;
|
||||
}
|
||||
|
||||
interface ProviderFormModalProps {
|
||||
editingProvider: null | Provider;
|
||||
onCancel: () => void;
|
||||
onCreate: (data: CreateProviderRequest) => Promise<unknown>;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onUpdate: (args: { data: UpdateProviderRequest; id: string }) => Promise<unknown>;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
const TYPE_OPTIONS = [
|
||||
{ label: "OpenAI 兼容", value: "openai-compatible" },
|
||||
{ label: "OpenAI", value: "openai" },
|
||||
{ label: "Anthropic", value: "anthropic" },
|
||||
];
|
||||
|
||||
export function ProviderFormModal({
|
||||
editingProvider,
|
||||
onCancel,
|
||||
onCreate,
|
||||
onOpenChange,
|
||||
onUpdate,
|
||||
open,
|
||||
submitting,
|
||||
}: ProviderFormModalProps) {
|
||||
const { message } = AntApp.useApp();
|
||||
const [form] = Form.useForm<FormValues>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
if (editingProvider) {
|
||||
form.setFieldsValue({
|
||||
apiKey: editingProvider.apiKey,
|
||||
baseUrl: editingProvider.baseUrl,
|
||||
name: editingProvider.name,
|
||||
type: editingProvider.type,
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [editingProvider, form, open]);
|
||||
|
||||
const handleFinish = async (values: FormValues) => {
|
||||
try {
|
||||
if (editingProvider) {
|
||||
const reqData: UpdateProviderRequest = {};
|
||||
if (values.name !== editingProvider.name) reqData.name = values.name;
|
||||
if (values.baseUrl !== editingProvider.baseUrl) reqData.baseUrl = values.baseUrl;
|
||||
if (values.apiKey !== editingProvider.apiKey) reqData.apiKey = values.apiKey;
|
||||
if (values.type !== editingProvider.type) reqData.type = values.type;
|
||||
await onUpdate({ data: reqData, id: editingProvider.id });
|
||||
message.success("供应商已更新");
|
||||
} else {
|
||||
const reqData: CreateProviderRequest = {
|
||||
apiKey: values.apiKey,
|
||||
baseUrl: values.baseUrl,
|
||||
name: values.name,
|
||||
type: values.type,
|
||||
};
|
||||
await onCreate(reqData);
|
||||
message.success("供应商已创建");
|
||||
}
|
||||
onOpenChange(false);
|
||||
} catch (err) {
|
||||
if (err instanceof Error) {
|
||||
message.error(err.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
confirmLoading={submitting}
|
||||
destroyOnHidden
|
||||
okText="确定"
|
||||
onCancel={onCancel}
|
||||
onOk={() => void form.submit()}
|
||||
open={open}
|
||||
title={editingProvider ? "编辑供应商" : "新建供应商"}
|
||||
>
|
||||
<Form form={form} layout="vertical" onFinish={(values) => void handleFinish(values)}>
|
||||
<Form.Item
|
||||
label="供应商名称"
|
||||
name="name"
|
||||
rules={[{ message: "请输入供应商名称", required: true, whitespace: true }]}
|
||||
>
|
||||
<Input placeholder="请输入供应商名称" />
|
||||
</Form.Item>
|
||||
<Form.Item label="供应商类型" name="type" rules={[{ message: "请选择供应商类型", required: true }]}>
|
||||
<Select options={TYPE_OPTIONS} placeholder="请选择供应商类型" />
|
||||
</Form.Item>
|
||||
<Form.Item label="Base URL" name="baseUrl" rules={[{ message: "请输入 Base URL", required: true }]}>
|
||||
<Input placeholder="https://api.openai.com/v1" />
|
||||
</Form.Item>
|
||||
<Form.Item label="API Key" name="apiKey" rules={[{ message: "请输入 API Key", required: true }]}>
|
||||
<Input.Password placeholder="请输入 API Key" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user