lanyuanxiaoyao
feff97acbd
适配后端统一模型 ID、协议字段、UUID 自动生成和结构化错误响应： - 类型定义：Provider 新增 protocol 字段，Model 新增 unifiedId，CreateModelInput 移除 id - API 客户端：提取结构化错误响应中的错误码 - 供应商管理：添加协议选择下拉框和表格列 - 模型管理：移除 ID 输入，显示统一模型 ID（只读） - Hooks：错误码映射为友好中文消息 - 测试：所有组件测试通过，mock 数据适配新字段 - 文档：更新 README 说明协议字段和统一模型 ID
108 lines
2.8 KiB
TypeScript
108 lines
2.8 KiB
TypeScript
import { useEffect } from 'react';
|
||
import { Dialog, Form, Input, Select, Switch } from 'tdesign-react';
|
||
import type { Provider, Model } from '@/types';
|
||
import type { SubmitContext } from 'tdesign-react/es/form/type';
|
||
|
||
interface ModelFormValues {
|
||
providerId: string;
|
||
modelName: string;
|
||
enabled: boolean;
|
||
}
|
||
|
||
interface ModelFormProps {
|
||
open: boolean;
|
||
model?: Model;
|
||
providerId: string;
|
||
providers: Provider[];
|
||
onSave: (values: ModelFormValues) => void;
|
||
onCancel: () => void;
|
||
loading: boolean;
|
||
}
|
||
|
||
export function ModelForm({
|
||
open,
|
||
model,
|
||
providerId,
|
||
providers,
|
||
onSave,
|
||
onCancel,
|
||
loading,
|
||
}: ModelFormProps) {
|
||
const [form] = Form.useForm();
|
||
const isEdit = !!model;
|
||
|
||
// 当弹窗打开或model变化时，设置表单值
|
||
useEffect(() => {
|
||
if (open && form) {
|
||
if (model) {
|
||
// 编辑模式：设置现有值
|
||
form.setFieldsValue({
|
||
providerId: model.providerId,
|
||
modelName: model.modelName,
|
||
enabled: model.enabled,
|
||
});
|
||
} else {
|
||
// 新增模式：重置表单并设置默认providerId
|
||
form.reset();
|
||
form.setFieldsValue({
|
||
providerId,
|
||
enabled: true
|
||
});
|
||
}
|
||
}
|
||
}, [open, model, providerId]); // 移除form依赖，避免循环
|
||
|
||
const handleSubmit = (context: SubmitContext) => {
|
||
if (context.validateResult === true && form) {
|
||
const values = form.getFieldsValue(true) as ModelFormValues;
|
||
onSave(values);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Dialog
|
||
header={isEdit ? '编辑模型' : '添加模型'}
|
||
visible={open}
|
||
onConfirm={() => { form?.submit(); return false; }}
|
||
onClose={onCancel}
|
||
confirmLoading={loading}
|
||
confirmBtn="保存"
|
||
cancelBtn="取消"
|
||
destroyOnClose
|
||
>
|
||
<Form form={form} layout="vertical" onSubmit={handleSubmit}>
|
||
{isEdit && model?.unifiedId && (
|
||
<Form.FormItem label="统一模型 ID">
|
||
<Input value={model.unifiedId} disabled />
|
||
<div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>
|
||
格式：provider_id/model_name
|
||
</div>
|
||
</Form.FormItem>
|
||
)}
|
||
|
||
<Form.FormItem
|
||
label="供应商"
|
||
name="providerId"
|
||
rules={[{ required: true, message: '请选择供应商' }]}
|
||
>
|
||
<Select
|
||
options={providers.map((p) => ({ label: p.name, value: p.id }))}
|
||
/>
|
||
</Form.FormItem>
|
||
|
||
<Form.FormItem
|
||
label="模型名称"
|
||
name="modelName"
|
||
rules={[{ required: true, message: '请输入模型名称' }]}
|
||
>
|
||
<Input placeholder="例如: gpt-4o" />
|
||
</Form.FormItem>
|
||
|
||
<Form.FormItem label="启用" name="enabled">
|
||
<Switch />
|
||
</Form.FormItem>
|
||
</Form>
|
||
</Dialog>
|
||
);
|
||
}
|