699 lines
20 KiB
React
699 lines
20 KiB
React
|
import { useEffect, useState } from 'react'
|
|||
|
|
import {
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
Form,
|
|||
|
|
Input,
|
|||
|
|
InputNumber,
|
|||
|
|
Modal,
|
|||
|
|
Popconfirm,
|
|||
|
|
Select,
|
|||
|
|
Space,
|
|||
|
|
Switch,
|
|||
|
|
Tag,
|
|||
|
|
} from 'antd'
|
|||
|
|
import {
|
|||
|
|
CloudServerOutlined,
|
|||
|
|
ExperimentOutlined,
|
|||
|
|
PlusOutlined,
|
|||
|
|
ReloadOutlined,
|
|||
|
|
DeleteOutlined,
|
|||
|
|
EditOutlined,
|
|||
|
|
} from '@ant-design/icons'
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
createLLMModelConfig,
|
|||
|
|
deleteLLMModelConfig,
|
|||
|
|
getLLMModelConfigDetail,
|
|||
|
|
getLLMModelConfigs,
|
|||
|
|
getLLMProviderCatalog,
|
|||
|
|
testLLMModelConfig,
|
|||
|
|
updateLLMModelConfig,
|
|||
|
|
updateLLMModelConfigStatus,
|
|||
|
|
} from '@/api/llmModelConfigs'
|
|||
|
|
import ListTable from '@/components/ListTable/ListTable'
|
|||
|
|
import PageHeader from '@/components/PageHeader/PageHeader'
|
|||
|
|
import Toast from '@/components/Toast/Toast'
|
|||
|
|
import './ModelConfigs.css'
|
|||
|
|
import '@/pages/System/AdminPages.css'
|
|||
|
|
|
|||
|
|
const { Search, TextArea } = Input
|
|||
|
|
|
|||
|
|
function buildModelCode(provider, llmModelName) {
|
|||
|
|
const providerPart = (provider || 'custom').trim().toLowerCase()
|
|||
|
|
const modelPart = (llmModelName || '').trim().toLowerCase()
|
|||
|
|
const sanitized = []
|
|||
|
|
let previousSeparator = false
|
|||
|
|
|
|||
|
|
for (const char of modelPart) {
|
|||
|
|
if (/[a-z0-9]/.test(char)) {
|
|||
|
|
sanitized.push(char)
|
|||
|
|
previousSeparator = false
|
|||
|
|
} else if (!previousSeparator) {
|
|||
|
|
sanitized.push('_')
|
|||
|
|
previousSeparator = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const suffix = sanitized.join('').replace(/^_+|_+$/g, '') || 'model'
|
|||
|
|
return `llm_${providerPart}_${suffix}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function buildModelName(providerMeta, provider, llmModelName) {
|
|||
|
|
const label = providerMeta?.label || provider || '自定义模型'
|
|||
|
|
const modelPart = (llmModelName || '').trim()
|
|||
|
|
if (!modelPart) {
|
|||
|
|
return label
|
|||
|
|
}
|
|||
|
|
return `${label} ${modelPart}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDateTime(value) {
|
|||
|
|
if (!value) return '-'
|
|||
|
|
return new Date(value).toLocaleString('zh-CN')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ModelConfigs() {
|
|||
|
|
const [form] = Form.useForm()
|
|||
|
|
const [loading, setLoading] = useState(false)
|
|||
|
|
const [submitting, setSubmitting] = useState(false)
|
|||
|
|
const [testing, setTesting] = useState(false)
|
|||
|
|
const [page, setPage] = useState(1)
|
|||
|
|
const [pageSize, setPageSize] = useState(10)
|
|||
|
|
const [total, setTotal] = useState(0)
|
|||
|
|
const [keyword, setKeyword] = useState('')
|
|||
|
|
const [providerFilter, setProviderFilter] = useState(undefined)
|
|||
|
|
const [statusFilter, setStatusFilter] = useState(undefined)
|
|||
|
|
const [configs, setConfigs] = useState([])
|
|||
|
|
const [providerCatalog, setProviderCatalog] = useState([])
|
|||
|
|
const [modalVisible, setModalVisible] = useState(false)
|
|||
|
|
const [editingConfigId, setEditingConfigId] = useState(null)
|
|||
|
|
const [autoFillFlags, setAutoFillFlags] = useState({
|
|||
|
|
endpointUrl: true,
|
|||
|
|
modelName: true,
|
|||
|
|
modelCode: true,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const providerValue = Form.useWatch('provider', form)
|
|||
|
|
const llmModelNameValue = Form.useWatch('llm_model_name', form)
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadProviderCatalog()
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadConfigs()
|
|||
|
|
}, [page, pageSize, keyword, providerFilter, statusFilter])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!modalVisible || !providerValue) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const providerMeta = providerCatalog.find((item) => item.value === providerValue)
|
|||
|
|
if (!providerMeta) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentValues = form.getFieldsValue()
|
|||
|
|
const nextValues = {}
|
|||
|
|
|
|||
|
|
if (autoFillFlags.endpointUrl) {
|
|||
|
|
const nextEndpointUrl = providerMeta.default_endpoint_url || ''
|
|||
|
|
if (nextEndpointUrl !== currentValues.endpoint_url) {
|
|||
|
|
nextValues.endpoint_url = nextEndpointUrl
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (llmModelNameValue) {
|
|||
|
|
if (autoFillFlags.modelName) {
|
|||
|
|
const nextModelName = buildModelName(providerMeta, providerValue, llmModelNameValue)
|
|||
|
|
if (nextModelName !== currentValues.model_name) {
|
|||
|
|
nextValues.model_name = nextModelName
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (autoFillFlags.modelCode) {
|
|||
|
|
const nextModelCode = buildModelCode(providerValue, llmModelNameValue)
|
|||
|
|
if (nextModelCode !== currentValues.model_code) {
|
|||
|
|
nextValues.model_code = nextModelCode
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (Object.keys(nextValues).length > 0) {
|
|||
|
|
form.setFieldsValue(nextValues)
|
|||
|
|
}
|
|||
|
|
}, [modalVisible, providerValue, llmModelNameValue, providerCatalog, autoFillFlags, form])
|
|||
|
|
|
|||
|
|
const loadProviderCatalog = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await getLLMProviderCatalog()
|
|||
|
|
setProviderCatalog(res.data || [])
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Load LLM provider catalog error:', error)
|
|||
|
|
Toast.error('加载提供方列表失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const loadConfigs = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true)
|
|||
|
|
const params = {
|
|||
|
|
page,
|
|||
|
|
page_size: pageSize,
|
|||
|
|
}
|
|||
|
|
if (keyword) params.keyword = keyword
|
|||
|
|
if (providerFilter) params.provider = providerFilter
|
|||
|
|
if (statusFilter !== undefined) params.is_active = statusFilter
|
|||
|
|
|
|||
|
|
const res = await getLLMModelConfigs(params)
|
|||
|
|
setConfigs(res.data || [])
|
|||
|
|
setTotal(res.total || 0)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Load llm model configs error:', error)
|
|||
|
|
Toast.error('加载模型配置失败')
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getProviderMeta = (provider) => providerCatalog.find((item) => item.value === provider)
|
|||
|
|
|
|||
|
|
const openCreateModal = () => {
|
|||
|
|
const defaultProvider = providerCatalog[0]?.value || 'openai'
|
|||
|
|
const defaultEndpointUrl = getProviderMeta(defaultProvider)?.default_endpoint_url || ''
|
|||
|
|
setEditingConfigId(null)
|
|||
|
|
setAutoFillFlags({
|
|||
|
|
endpointUrl: true,
|
|||
|
|
modelName: true,
|
|||
|
|
modelCode: true,
|
|||
|
|
})
|
|||
|
|
form.setFieldsValue({
|
|||
|
|
provider: defaultProvider,
|
|||
|
|
endpoint_url: defaultEndpointUrl,
|
|||
|
|
llm_timeout: 120,
|
|||
|
|
llm_temperature: 0.7,
|
|||
|
|
llm_top_p: 0.9,
|
|||
|
|
llm_max_tokens: 2048,
|
|||
|
|
is_active: true,
|
|||
|
|
is_default: false,
|
|||
|
|
description: '',
|
|||
|
|
llm_system_prompt: '',
|
|||
|
|
model_name: '',
|
|||
|
|
model_code: '',
|
|||
|
|
llm_model_name: '',
|
|||
|
|
api_key: '',
|
|||
|
|
})
|
|||
|
|
setModalVisible(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const openEditModal = async (record) => {
|
|||
|
|
try {
|
|||
|
|
const res = await getLLMModelConfigDetail(record.config_id)
|
|||
|
|
const detail = res.data
|
|||
|
|
const providerMeta = getProviderMeta(detail.provider)
|
|||
|
|
|
|||
|
|
setEditingConfigId(record.config_id)
|
|||
|
|
setAutoFillFlags({
|
|||
|
|
endpointUrl: !detail.endpoint_url || detail.endpoint_url === (providerMeta?.default_endpoint_url || ''),
|
|||
|
|
modelName: !detail.model_name || detail.model_name === buildModelName(providerMeta, detail.provider, detail.llm_model_name),
|
|||
|
|
modelCode: !detail.model_code || detail.model_code === buildModelCode(detail.provider, detail.llm_model_name),
|
|||
|
|
})
|
|||
|
|
form.setFieldsValue({
|
|||
|
|
...detail,
|
|||
|
|
api_key: detail.api_key || '',
|
|||
|
|
})
|
|||
|
|
setModalVisible(true)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Load llm model config detail error:', error)
|
|||
|
|
Toast.error('加载模型配置详情失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const closeModal = () => {
|
|||
|
|
setModalVisible(false)
|
|||
|
|
setEditingConfigId(null)
|
|||
|
|
form.resetFields()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubmit = async (values) => {
|
|||
|
|
try {
|
|||
|
|
setSubmitting(true)
|
|||
|
|
if (editingConfigId) {
|
|||
|
|
await updateLLMModelConfig(editingConfigId, values)
|
|||
|
|
Toast.success('模型配置更新成功')
|
|||
|
|
} else {
|
|||
|
|
await createLLMModelConfig(values)
|
|||
|
|
Toast.success('模型配置创建成功')
|
|||
|
|
}
|
|||
|
|
closeModal()
|
|||
|
|
loadConfigs()
|
|||
|
|
} catch (error) {
|
|||
|
|
Toast.error(error.response?.data?.detail || '保存模型配置失败')
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDelete = async (record) => {
|
|||
|
|
try {
|
|||
|
|
await deleteLLMModelConfig(record.config_id)
|
|||
|
|
Toast.success('模型配置删除成功')
|
|||
|
|
loadConfigs()
|
|||
|
|
} catch (error) {
|
|||
|
|
Toast.error(error.response?.data?.detail || '删除模型配置失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleStatusChange = async (record, checked) => {
|
|||
|
|
try {
|
|||
|
|
await updateLLMModelConfigStatus(record.config_id, checked)
|
|||
|
|
Toast.success(checked ? '模型已启用' : '模型已停用')
|
|||
|
|
loadConfigs()
|
|||
|
|
} catch (error) {
|
|||
|
|
Toast.error(error.response?.data?.detail || '更新状态失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showTestResult = (result) => {
|
|||
|
|
Modal.info({
|
|||
|
|
title: '模型测试成功',
|
|||
|
|
width: 620,
|
|||
|
|
content: (
|
|||
|
|
<div className="model-config-test-result">
|
|||
|
|
<div>提供方：{getProviderMeta(result.provider)?.label || result.provider}</div>
|
|||
|
|
<div>模型：{result.llm_model_name}</div>
|
|||
|
|
<div>延迟：{result.latency_ms} ms</div>
|
|||
|
|
<div>返回预览：{result.preview || '模型已成功返回，但未提取到文本内容。'}</div>
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleFormTest = async () => {
|
|||
|
|
try {
|
|||
|
|
const values = await form.validateFields()
|
|||
|
|
setTesting(true)
|
|||
|
|
const res = await testLLMModelConfig(values)
|
|||
|
|
showTestResult(res.data)
|
|||
|
|
} catch (error) {
|
|||
|
|
if (error?.errorFields) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
Toast.error(error.response?.data?.detail || '模型测试失败')
|
|||
|
|
} finally {
|
|||
|
|
setTesting(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const columns = [
|
|||
|
|
{
|
|||
|
|
title: '模型名称',
|
|||
|
|
dataIndex: 'model_name',
|
|||
|
|
key: 'model_name',
|
|||
|
|
width: 240,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Space direction="vertical" size={2}>
|
|||
|
|
<span>{record.model_name}</span>
|
|||
|
|
<span className="model-config-code">{record.model_code}</span>
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '提供方',
|
|||
|
|
dataIndex: 'provider',
|
|||
|
|
key: 'provider',
|
|||
|
|
width: 140,
|
|||
|
|
render: (provider) => (
|
|||
|
|
<Tag color="blue">{getProviderMeta(provider)?.label || provider || '-'}</Tag>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '模型标识',
|
|||
|
|
dataIndex: 'llm_model_name',
|
|||
|
|
key: 'llm_model_name',
|
|||
|
|
width: 180,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'Base URL',
|
|||
|
|
dataIndex: 'endpoint_url',
|
|||
|
|
key: 'endpoint_url',
|
|||
|
|
ellipsis: true,
|
|||
|
|
render: (value) => value || '-',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '状态',
|
|||
|
|
dataIndex: 'is_active',
|
|||
|
|
key: 'is_active',
|
|||
|
|
width: 100,
|
|||
|
|
render: (value, record) => (
|
|||
|
|
<Switch
|
|||
|
|
checked={value}
|
|||
|
|
checkedChildren="启用"
|
|||
|
|
unCheckedChildren="停用"
|
|||
|
|
onChange={(checked) => handleStatusChange(record, checked)}
|
|||
|
|
/>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '默认',
|
|||
|
|
dataIndex: 'is_default',
|
|||
|
|
key: 'is_default',
|
|||
|
|
width: 90,
|
|||
|
|
render: (value) => (
|
|||
|
|
value ? <Tag color="gold">默认</Tag> : <Tag>否</Tag>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '更新时间',
|
|||
|
|
dataIndex: 'updated_at',
|
|||
|
|
key: 'updated_at',
|
|||
|
|
width: 180,
|
|||
|
|
render: (value) => formatDateTime(value),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
key: 'action',
|
|||
|
|
fixed: 'right',
|
|||
|
|
width: 170,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Space size="small" className="model-config-actions">
|
|||
|
|
<Button
|
|||
|
|
type="link"
|
|||
|
|
size="small"
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={() => openEditModal(record)}
|
|||
|
|
>
|
|||
|
|
编辑
|
|||
|
|
</Button>
|
|||
|
|
<Popconfirm
|
|||
|
|
title="确认删除该模型配置？"
|
|||
|
|
description="删除后将无法恢复。"
|
|||
|
|
okText="删除"
|
|||
|
|
cancelText="取消"
|
|||
|
|
onConfirm={() => handleDelete(record)}
|
|||
|
|
>
|
|||
|
|
<Button
|
|||
|
|
type="link"
|
|||
|
|
size="small"
|
|||
|
|
danger
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
>
|
|||
|
|
删除
|
|||
|
|
</Button>
|
|||
|
|
</Popconfirm>
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="admin-page">
|
|||
|
|
<PageHeader
|
|||
|
|
title="模型配置"
|
|||
|
|
description="管理系统可用的大模型提供方、默认接口地址、参数模板与连通性测试。"
|
|||
|
|
icon={<CloudServerOutlined />}
|
|||
|
|
extra={(
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
icon={<PlusOutlined />}
|
|||
|
|
onClick={openCreateModal}
|
|||
|
|
>
|
|||
|
|
新增模型
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Card className="admin-card model-config-card">
|
|||
|
|
<div className="admin-toolbar">
|
|||
|
|
<div className="admin-toolbar-left">
|
|||
|
|
<Search
|
|||
|
|
allowClear
|
|||
|
|
placeholder="搜索模型名称、编码或模型标识"
|
|||
|
|
value={keyword}
|
|||
|
|
style={{ width: 320 }}
|
|||
|
|
onChange={(event) => {
|
|||
|
|
setPage(1)
|
|||
|
|
setKeyword(event.target.value)
|
|||
|
|
}}
|
|||
|
|
onSearch={(value) => {
|
|||
|
|
setPage(1)
|
|||
|
|
setKeyword(value)
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Select
|
|||
|
|
allowClear
|
|||
|
|
placeholder="筛选提供方"
|
|||
|
|
style={{ width: 180 }}
|
|||
|
|
value={providerFilter}
|
|||
|
|
options={providerCatalog.map((item) => ({
|
|||
|
|
label: item.label,
|
|||
|
|
value: item.value,
|
|||
|
|
}))}
|
|||
|
|
onChange={(value) => {
|
|||
|
|
setPage(1)
|
|||
|
|
setProviderFilter(value)
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<Select
|
|||
|
|
allowClear
|
|||
|
|
placeholder="筛选状态"
|
|||
|
|
style={{ width: 140 }}
|
|||
|
|
value={statusFilter}
|
|||
|
|
options={[
|
|||
|
|
{ label: '启用', value: true },
|
|||
|
|
{ label: '停用', value: false },
|
|||
|
|
]}
|
|||
|
|
onChange={(value) => {
|
|||
|
|
setPage(1)
|
|||
|
|
setStatusFilter(value)
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="admin-toolbar-right">
|
|||
|
|
<Button icon={<ReloadOutlined />} onClick={loadConfigs}>
|
|||
|
|
刷新
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<ListTable
|
|||
|
|
rowKey="config_id"
|
|||
|
|
className="model-config-table"
|
|||
|
|
loading={loading}
|
|||
|
|
columns={columns}
|
|||
|
|
dataSource={configs}
|
|||
|
|
scroll={{ x: 1280 }}
|
|||
|
|
pagination={{
|
|||
|
|
current: page,
|
|||
|
|
pageSize,
|
|||
|
|
total,
|
|||
|
|
showSizeChanger: true,
|
|||
|
|
showQuickJumper: true,
|
|||
|
|
onChange: (nextPage, nextPageSize) => {
|
|||
|
|
setPage(nextPage)
|
|||
|
|
setPageSize(nextPageSize)
|
|||
|
|
},
|
|||
|
|
showTotal: (value) => `共 ${value} 条`,
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Modal
|
|||
|
|
title={editingConfigId ? '编辑模型配置' : '新增模型配置'}
|
|||
|
|
open={modalVisible}
|
|||
|
|
width={860}
|
|||
|
|
className="model-config-modal"
|
|||
|
|
style={{ maxWidth: 'calc(100vw - 32px)' }}
|
|||
|
|
destroyOnClose
|
|||
|
|
onCancel={closeModal}
|
|||
|
|
onOk={() => form.submit()}
|
|||
|
|
confirmLoading={submitting}
|
|||
|
|
okText={editingConfigId ? '保存修改' : '创建'}
|
|||
|
|
cancelText="取消"
|
|||
|
|
styles={{
|
|||
|
|
body: {
|
|||
|
|
maxHeight: 'calc(80vh - 180px)',
|
|||
|
|
overflowY: 'auto',
|
|||
|
|
paddingRight: 8,
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
footer={(_, { OkBtn, CancelBtn }) => (
|
|||
|
|
<>
|
|||
|
|
<CancelBtn />
|
|||
|
|
<Button
|
|||
|
|
icon={<ExperimentOutlined />}
|
|||
|
|
loading={testing}
|
|||
|
|
onClick={handleFormTest}
|
|||
|
|
>
|
|||
|
|
测试模型
|
|||
|
|
</Button>
|
|||
|
|
<OkBtn />
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="model-config-modal-hint">
|
|||
|
|
<strong>自动生成规则：</strong> 选择提供方后会自动带出默认 `base_url`；填写模型标识后会自动生成“模型名称”和“模型编码”。
|
|||
|
|
如果你手动改过这些字段，后续就不会再被自动覆盖。
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Form
|
|||
|
|
form={form}
|
|||
|
|
layout="vertical"
|
|||
|
|
onFinish={handleSubmit}
|
|||
|
|
initialValues={{
|
|||
|
|
llm_timeout: 120,
|
|||
|
|
llm_temperature: 0.7,
|
|||
|
|
llm_top_p: 0.9,
|
|||
|
|
llm_max_tokens: 2048,
|
|||
|
|
is_active: true,
|
|||
|
|
is_default: false,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Space direction="vertical" style={{ width: '100%' }} size={4}>
|
|||
|
|
<Form.Item
|
|||
|
|
label="提供方"
|
|||
|
|
name="provider"
|
|||
|
|
rules={[{ required: true, message: '请选择模型提供方' }]}
|
|||
|
|
>
|
|||
|
|
<Select
|
|||
|
|
showSearch
|
|||
|
|
placeholder="请选择模型提供方"
|
|||
|
|
optionFilterProp="label"
|
|||
|
|
options={providerCatalog.map((item) => ({
|
|||
|
|
label: item.label,
|
|||
|
|
value: item.value,
|
|||
|
|
}))}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="Base URL"
|
|||
|
|
name="endpoint_url"
|
|||
|
|
rules={[{ required: true, message: '请输入 base_url' }]}
|
|||
|
|
>
|
|||
|
|
<Input
|
|||
|
|
placeholder="选择提供方后自动带出，也可以手动覆盖"
|
|||
|
|
onChange={() => {
|
|||
|
|
setAutoFillFlags((current) => ({ ...current, endpointUrl: false }))
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
<Space style={{ width: '100%' }} size={16} align="start">
|
|||
|
|
<Form.Item
|
|||
|
|
label="模型标识"
|
|||
|
|
name="llm_model_name"
|
|||
|
|
style={{ flex: 1 }}
|
|||
|
|
rules={[{ required: true, message: '请输入模型标识或部署名' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="如 gpt-4.1-mini / qwen3.6-plus / claude-3-5-sonnet-latest" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="请求超时（秒）"
|
|||
|
|
name="llm_timeout"
|
|||
|
|
style={{ width: 180 }}
|
|||
|
|
rules={[{ required: true, message: '请输入超时时间' }]}
|
|||
|
|
>
|
|||
|
|
<InputNumber min={5} max={600} style={{ width: '100%' }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
<Space style={{ width: '100%' }} size={16} align="start">
|
|||
|
|
<Form.Item
|
|||
|
|
label="模型名称"
|
|||
|
|
name="model_name"
|
|||
|
|
style={{ flex: 1 }}
|
|||
|
|
rules={[{ required: true, message: '请输入模型名称' }]}
|
|||
|
|
>
|
|||
|
|
<Input
|
|||
|
|
placeholder="会根据提供方和模型标识自动生成"
|
|||
|
|
onChange={() => {
|
|||
|
|
setAutoFillFlags((current) => ({ ...current, modelName: false }))
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="模型编码"
|
|||
|
|
name="model_code"
|
|||
|
|
style={{ flex: 1 }}
|
|||
|
|
rules={[{ required: true, message: '请输入模型编码' }]}
|
|||
|
|
>
|
|||
|
|
<Input
|
|||
|
|
placeholder="会自动生成，支持手动调整"
|
|||
|
|
onChange={() => {
|
|||
|
|
setAutoFillFlags((current) => ({ ...current, modelCode: false }))
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
<Form.Item label="API Key" name="api_key">
|
|||
|
|
<Input.Password
|
|||
|
|
placeholder="支持留空后稍后补齐；测试非 Ollama 模型时建议填写"
|
|||
|
|
autoComplete="new-password"
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Space style={{ width: '100%' }} size={16} align="start">
|
|||
|
|
<Form.Item
|
|||
|
|
label="Temperature"
|
|||
|
|
name="llm_temperature"
|
|||
|
|
style={{ width: '33%' }}
|
|||
|
|
rules={[{ required: true, message: '请输入 temperature' }]}
|
|||
|
|
>
|
|||
|
|
<InputNumber min={0} max={2} step={0.05} style={{ width: '100%' }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="Top P"
|
|||
|
|
name="llm_top_p"
|
|||
|
|
style={{ width: '33%' }}
|
|||
|
|
rules={[{ required: true, message: '请输入 top_p' }]}
|
|||
|
|
>
|
|||
|
|
<InputNumber min={0} max={1} step={0.05} style={{ width: '100%' }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="Max Tokens"
|
|||
|
|
name="llm_max_tokens"
|
|||
|
|
style={{ width: '33%' }}
|
|||
|
|
rules={[{ required: true, message: '请输入 max_tokens' }]}
|
|||
|
|
>
|
|||
|
|
<InputNumber min={1} max={32768} step={128} style={{ width: '100%' }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
<Form.Item label="系统提示词" name="llm_system_prompt">
|
|||
|
|
<TextArea
|
|||
|
|
rows={4}
|
|||
|
|
placeholder="可选。测试模型时会作为 system prompt 一并发送。"
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item label="描述" name="description">
|
|||
|
|
<TextArea rows={2} placeholder="可填写用途、场景、适用业务等说明" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Space size={24}>
|
|||
|
|
<Form.Item label="启用状态" name="is_active" valuePropName="checked">
|
|||
|
|
<Switch checkedChildren="启用" unCheckedChildren="停用" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item label="设为默认" name="is_default" valuePropName="checked">
|
|||
|
|
<Switch checkedChildren="默认" unCheckedChildren="普通" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Space>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ModelConfigs
|