108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { Dialog, Form, Input, Switch, Select } from 'tdesign-react'
|
|
import type { Provider } from '@/types'
|
|
import type { SubmitContext } from 'tdesign-react/es/form/type'
|
|
|
|
interface ProviderFormValues {
|
|
id: string
|
|
name: string
|
|
apiKey: string
|
|
baseUrl: string
|
|
protocol: 'openai' | 'anthropic'
|
|
enabled: boolean
|
|
}
|
|
|
|
interface ProviderFormProps {
|
|
open: boolean
|
|
provider?: Provider
|
|
onSave: (values: ProviderFormValues) => Promise<void> | void
|
|
onCancel: () => void
|
|
loading: boolean
|
|
}
|
|
|
|
export function ProviderForm({ open, provider, onSave, onCancel, loading }: ProviderFormProps) {
|
|
const [form] = Form.useForm()
|
|
const isEdit = !!provider
|
|
|
|
useEffect(() => {
|
|
if (open && form) {
|
|
if (provider) {
|
|
form.setFieldsValue({
|
|
id: provider.id,
|
|
name: provider.name,
|
|
apiKey: provider.apiKey,
|
|
baseUrl: provider.baseUrl,
|
|
protocol: provider.protocol,
|
|
enabled: provider.enabled,
|
|
})
|
|
} else {
|
|
form.reset()
|
|
form.setFieldsValue({ enabled: true, protocol: 'openai' })
|
|
}
|
|
}
|
|
}, [open, provider])
|
|
|
|
const handleSubmit = (context: SubmitContext) => {
|
|
if (context.validateResult === true && form) {
|
|
const values = form.getFieldsValue(true) as ProviderFormValues
|
|
onSave(values)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog
|
|
header={isEdit ? '编辑供应商' : '添加供应商'}
|
|
visible={open}
|
|
placement='center'
|
|
width='520px'
|
|
closeOnOverlayClick={false}
|
|
closeOnEscKeydown={false}
|
|
lazy={false}
|
|
onConfirm={() => {
|
|
form?.submit()
|
|
return false
|
|
}}
|
|
onClose={onCancel}
|
|
confirmLoading={loading}
|
|
confirmBtn='保存'
|
|
cancelBtn='取消'
|
|
>
|
|
<Form form={form} layout='vertical' onSubmit={handleSubmit}>
|
|
<Form.FormItem label='ID' name='id' rules={[{ required: true, message: '请输入供应商 ID' }]}>
|
|
<Input disabled={isEdit} placeholder='例如: openai' />
|
|
</Form.FormItem>
|
|
|
|
<Form.FormItem label='名称' name='name' rules={[{ required: true, message: '请输入名称' }]}>
|
|
<Input placeholder='例如: OpenAI' />
|
|
</Form.FormItem>
|
|
|
|
<Form.FormItem label='API Key' name='apiKey' rules={[{ required: true, message: '请输入 API Key' }]}>
|
|
<Input placeholder='sk-...' />
|
|
</Form.FormItem>
|
|
|
|
<Form.FormItem
|
|
label='Base URL'
|
|
name='baseUrl'
|
|
rules={[
|
|
{ required: true, message: '请输入 Base URL' },
|
|
{ url: true, message: '请输入有效的 URL' },
|
|
]}
|
|
>
|
|
<Input placeholder='例如: https://api.openai.com/v1' />
|
|
</Form.FormItem>
|
|
|
|
<Form.FormItem label='协议' name='protocol' rules={[{ required: true, message: '请选择协议' }]}>
|
|
<Select>
|
|
<Select.Option value='openai'>OpenAI</Select.Option>
|
|
<Select.Option value='anthropic'>Anthropic</Select.Option>
|
|
</Select>
|
|
</Form.FormItem>
|
|
|
|
<Form.FormItem label='启用' name='enabled'>
|
|
<Switch />
|
|
</Form.FormItem>
|
|
</Form>
|
|
</Dialog>
|
|
)
|
|
}
|