956 lines
30 KiB
JavaScript
956 lines
30 KiB
JavaScript
import { useEffect, useRef, useState } from 'react'
|
||
import {
|
||
Button,
|
||
Card,
|
||
Form,
|
||
Grid,
|
||
Input,
|
||
InputNumber,
|
||
Modal,
|
||
Popconfirm,
|
||
Radio,
|
||
Select,
|
||
Slider,
|
||
Space,
|
||
Switch,
|
||
Tabs,
|
||
Tag,
|
||
} from 'antd'
|
||
import {
|
||
CloudServerOutlined,
|
||
CommentOutlined,
|
||
DeploymentUnitOutlined,
|
||
ExperimentOutlined,
|
||
PlusOutlined,
|
||
ReloadOutlined,
|
||
DeleteOutlined,
|
||
EditOutlined,
|
||
StarOutlined,
|
||
} from '@ant-design/icons'
|
||
|
||
import {
|
||
createLLMModelConfig,
|
||
deleteLLMModelConfig,
|
||
getLLMModelConfigDetail,
|
||
getLLMModelConfigs,
|
||
getLLMProviderCatalog,
|
||
setDefaultLLMModelConfig,
|
||
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
|
||
|
||
const MAX_TOKENS_OPTIONS = [
|
||
{ label: '4K', value: 4096 },
|
||
{ label: '8K', value: 8192 },
|
||
{ label: '16K', value: 16384 },
|
||
{ label: '32K', value: 32768 },
|
||
]
|
||
|
||
const DEFAULT_MAX_TOKENS = 8192
|
||
|
||
const MODEL_TYPE_META = {
|
||
chat: {
|
||
label: '对话模型',
|
||
icon: <CommentOutlined />,
|
||
description: '用于知识库对话、问答生成的大语言模型。',
|
||
addText: '新增对话模型',
|
||
},
|
||
embedding: {
|
||
label: '向量模型',
|
||
icon: <DeploymentUnitOutlined />,
|
||
description: '用于文档向量化（ZVec）与语义检索的 Embedding 模型。',
|
||
addText: '新增向量模型',
|
||
},
|
||
}
|
||
|
||
function buildModelCode(provider, llmModelName, modelType) {
|
||
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'
|
||
const base = `llm_${providerPart}_${suffix}`
|
||
return modelType === 'embedding' ? `emb_${base}` : base
|
||
}
|
||
|
||
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 screens = Grid.useBreakpoint()
|
||
const [activeType, setActiveType] = useState('chat')
|
||
const [editingType, setEditingType] = useState('chat')
|
||
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 loadRequestIdRef = useRef(0)
|
||
|
||
const providerValue = Form.useWatch('provider', form)
|
||
const llmModelNameValue = Form.useWatch('llm_model_name', form)
|
||
const isEmbedding = editingType === 'embedding'
|
||
const isLocalProvider = providerValue === 'local'
|
||
const localModels = providerCatalog.find((item) => item.value === 'local')?.models || []
|
||
const availableProviders = providerCatalog.filter((item) => (
|
||
!item.model_types || item.model_types.includes(editingType)
|
||
))
|
||
|
||
useEffect(() => {
|
||
loadProviderCatalog()
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
loadConfigs()
|
||
}, [activeType, 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, editingType)
|
||
if (nextModelCode !== currentValues.model_code) {
|
||
nextValues.model_code = nextModelCode
|
||
}
|
||
}
|
||
}
|
||
|
||
if (Object.keys(nextValues).length > 0) {
|
||
form.setFieldsValue(nextValues)
|
||
}
|
||
}, [modalVisible, providerValue, llmModelNameValue, providerCatalog, autoFillFlags, editingType, 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 () => {
|
||
const requestId = ++loadRequestIdRef.current
|
||
try {
|
||
setLoading(true)
|
||
const params = {
|
||
page,
|
||
page_size: pageSize,
|
||
model_type: activeType,
|
||
}
|
||
if (keyword) params.keyword = keyword
|
||
if (providerFilter) params.provider = providerFilter
|
||
if (statusFilter !== undefined) params.is_active = statusFilter
|
||
|
||
const res = await getLLMModelConfigs(params)
|
||
if (requestId !== loadRequestIdRef.current) return
|
||
setConfigs(res.data || [])
|
||
setTotal(res.total || 0)
|
||
} catch (error) {
|
||
console.error('Load llm model configs error:', error)
|
||
Toast.error('加载模型配置失败')
|
||
} finally {
|
||
if (requestId === loadRequestIdRef.current) {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
}
|
||
|
||
const getProviderMeta = (provider) => providerCatalog.find((item) => item.value === provider)
|
||
|
||
const handleTabChange = (key) => {
|
||
setActiveType(key)
|
||
setPage(1)
|
||
setKeyword('')
|
||
setProviderFilter(undefined)
|
||
setStatusFilter(undefined)
|
||
}
|
||
|
||
const openCreateModal = () => {
|
||
const compatibleProviders = providerCatalog.filter((item) => (
|
||
!item.model_types || item.model_types.includes(activeType)
|
||
))
|
||
const defaultProvider = activeType === 'embedding'
|
||
? (compatibleProviders.find((item) => item.value === 'local')?.value || compatibleProviders[0]?.value)
|
||
: compatibleProviders[0]?.value
|
||
const resolvedProvider = defaultProvider || 'openai'
|
||
const defaultEndpointUrl = getProviderMeta(resolvedProvider)?.default_endpoint_url || ''
|
||
const providerDefaults = getProviderMeta(resolvedProvider)
|
||
setEditingConfigId(null)
|
||
setEditingType(activeType)
|
||
setAutoFillFlags({
|
||
endpointUrl: true,
|
||
modelName: true,
|
||
modelCode: true,
|
||
})
|
||
form.setFieldsValue({
|
||
model_type: activeType,
|
||
provider: resolvedProvider,
|
||
endpoint_url: defaultEndpointUrl,
|
||
llm_timeout: activeType === 'embedding' ? 60 : 120,
|
||
llm_temperature: 0.7,
|
||
llm_top_p: 0.9,
|
||
llm_max_tokens: DEFAULT_MAX_TOKENS,
|
||
embedding_dimension: undefined,
|
||
chunk_size: providerDefaults?.default_chunk_size || 800,
|
||
chunk_overlap: providerDefaults?.default_chunk_overlap ?? 150,
|
||
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 detailType = detail.model_type || 'chat'
|
||
const providerMeta = getProviderMeta(detail.provider)
|
||
|
||
setEditingConfigId(record.config_id)
|
||
setEditingType(detailType)
|
||
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, detailType),
|
||
})
|
||
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)
|
||
const payload = { ...values, model_type: editingType }
|
||
if (editingConfigId) {
|
||
await updateLLMModelConfig(editingConfigId, payload)
|
||
Toast.success('模型配置更新成功')
|
||
} else {
|
||
await createLLMModelConfig(payload)
|
||
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 handleSetDefault = (record) => {
|
||
const isVectorModel = record.model_type === 'embedding'
|
||
Modal.confirm({
|
||
title: isVectorModel ? '切换默认向量模型？' : '切换默认对话模型？',
|
||
content: isVectorModel
|
||
? '新文件和后续检索将使用该模型。已有项目向量由旧模型生成，请在切换后对相关项目执行一次全量向量化。'
|
||
: '新建知识库问答将默认选中该模型，已有会话不会改变。',
|
||
okText: '设为默认',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
try {
|
||
await setDefaultLLMModelConfig(record.config_id)
|
||
setConfigs((current) => current
|
||
.map((item) => ({
|
||
...item,
|
||
is_default: item.config_id === record.config_id,
|
||
}))
|
||
.sort((left, right) => Number(right.is_default) - Number(left.is_default)))
|
||
Toast.success(isVectorModel ? '默认向量模型已切换，请重建已有项目向量' : '默认对话模型已切换')
|
||
await loadConfigs()
|
||
} catch (error) {
|
||
Toast.error(error.response?.data?.detail || '切换默认模型失败')
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const showTestResult = (result) => {
|
||
const providerLabel = getProviderMeta(result.provider)?.label || result.provider
|
||
const lines = [
|
||
`提供方：${providerLabel}`,
|
||
`模型：${result.llm_model_name}`,
|
||
`延迟：${result.latency_ms} ms`,
|
||
]
|
||
if (result.dimension) {
|
||
lines.push(`向量维度：${result.dimension}`)
|
||
}
|
||
if (result.preview) {
|
||
lines.push(`返回预览：${result.preview}`)
|
||
}
|
||
const description = (
|
||
<div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
|
||
{lines.map((line, index) => (
|
||
<div key={index}>{line}</div>
|
||
))}
|
||
</div>
|
||
)
|
||
Toast.success('模型测试成功', description, 5)
|
||
}
|
||
|
||
const handleFormTest = async () => {
|
||
try {
|
||
const values = await form.validateFields()
|
||
setTesting(true)
|
||
const res = await testLLMModelConfig({ ...values, model_type: editingType })
|
||
showTestResult(res.data)
|
||
} catch (error) {
|
||
// 表单校验未通过：不弹提示，仅高亮表单项
|
||
// 接口失败：已由全局请求拦截器统一弹出错误 Toast，这里不重复提示
|
||
} finally {
|
||
setTesting(false)
|
||
}
|
||
}
|
||
|
||
const getColumns = (type) => {
|
||
const baseColumns = [
|
||
{
|
||
title: '模型名称',
|
||
dataIndex: 'model_name',
|
||
key: 'model_name',
|
||
width: 240,
|
||
render: (_, record) => (
|
||
<Space direction="vertical" size={2}>
|
||
<Space size={6} wrap>
|
||
<span>{record.model_name}</span>
|
||
{record.is_default && <Tag color="green">默认</Tag>}
|
||
</Space>
|
||
<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,
|
||
},
|
||
]
|
||
|
||
if (type === 'embedding') {
|
||
baseColumns.push({
|
||
title: '向量维度',
|
||
dataIndex: 'embedding_dimension',
|
||
key: 'embedding_dimension',
|
||
width: 110,
|
||
render: (value) => (value ? <Tag color="purple">{value}</Tag> : <Tag>自动</Tag>),
|
||
})
|
||
baseColumns.push({
|
||
title: '分块 / 重叠',
|
||
key: 'chunk_options',
|
||
width: 130,
|
||
render: (_, record) => `${record.chunk_size} / ${record.chunk_overlap}`,
|
||
})
|
||
}
|
||
|
||
baseColumns.push(
|
||
{
|
||
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: 'updated_at',
|
||
key: 'updated_at',
|
||
width: 180,
|
||
render: (value) => formatDateTime(value),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
fixed: screens.md ? 'right' : undefined,
|
||
width: screens.md ? 260 : 220,
|
||
render: (_, record) => (
|
||
<Space size="small" className="model-config-actions">
|
||
{!record.is_default && (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
icon={<StarOutlined />}
|
||
onClick={() => handleSetDefault(record)}
|
||
>
|
||
设为默认
|
||
</Button>
|
||
)}
|
||
<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 baseColumns
|
||
}
|
||
|
||
const renderListPanel = (type) => (
|
||
<>
|
||
<div className="admin-toolbar">
|
||
<div className="admin-toolbar-left">
|
||
<Search
|
||
allowClear
|
||
placeholder="搜索模型名称、编码或模型标识"
|
||
value={keyword}
|
||
style={{ width: 320, maxWidth: '100%' }}
|
||
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
|
||
type="primary"
|
||
icon={<PlusOutlined />}
|
||
onClick={openCreateModal}
|
||
>
|
||
{MODEL_TYPE_META[type].addText}
|
||
</Button>
|
||
<Button icon={<ReloadOutlined />} onClick={loadConfigs}>
|
||
刷新
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<ListTable
|
||
rowKey="config_id"
|
||
className="model-config-table"
|
||
loading={loading}
|
||
columns={getColumns(type)}
|
||
dataSource={configs}
|
||
scroll={{ x: 1280 }}
|
||
pagination={{
|
||
current: page,
|
||
pageSize,
|
||
total,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
onChange: (nextPage, nextPageSize) => {
|
||
setPage(nextPage)
|
||
setPageSize(nextPageSize)
|
||
},
|
||
showTotal: (value) => `共 ${value} 条`,
|
||
}}
|
||
/>
|
||
</>
|
||
)
|
||
|
||
const tabItems = Object.entries(MODEL_TYPE_META).map(([type, meta]) => ({
|
||
key: type,
|
||
label: (
|
||
<span>
|
||
{meta.icon}
|
||
{meta.label}
|
||
</span>
|
||
),
|
||
children: (
|
||
<div className="model-config-tab-panel">
|
||
<p className="model-config-tab-desc">{meta.description}</p>
|
||
{activeType === type ? renderListPanel(type) : null}
|
||
</div>
|
||
),
|
||
}))
|
||
|
||
return (
|
||
<div className="admin-page">
|
||
<PageHeader
|
||
title="模型配置"
|
||
description="分类管理对话模型与向量模型的提供方、接口地址、参数模板与连通性测试。"
|
||
icon={<CloudServerOutlined />}
|
||
/>
|
||
|
||
<Card className="admin-card model-config-card">
|
||
<Tabs
|
||
items={tabItems}
|
||
activeKey={activeType}
|
||
onChange={handleTabChange}
|
||
tabPosition={screens.md ? 'left' : 'top'}
|
||
className="model-config-tabs"
|
||
/>
|
||
</Card>
|
||
|
||
<Modal
|
||
title={`${editingConfigId ? '编辑' : '新增'}${MODEL_TYPE_META[editingType].label}`}
|
||
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`；填写模型标识后会自动生成“模型名称”和“模型编码”。
|
||
如果你手动改过这些字段，后续就不会再被自动覆盖。
|
||
{isEmbedding && (
|
||
<>
|
||
<br />
|
||
<strong>索引参数：</strong> 向量维度必须与模型输出一致；分块大小与重叠会影响检索粒度，修改后应对已有项目执行全量向量化。
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={handleSubmit}
|
||
initialValues={{
|
||
llm_timeout: 120,
|
||
llm_temperature: 0.7,
|
||
llm_top_p: 0.9,
|
||
llm_max_tokens: DEFAULT_MAX_TOKENS,
|
||
is_active: true,
|
||
}}
|
||
>
|
||
<Form.Item name="model_type" hidden>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="is_default" hidden>
|
||
<Input />
|
||
</Form.Item>
|
||
|
||
<Space direction="vertical" style={{ width: '100%' }} size={4}>
|
||
<Form.Item
|
||
label="提供方"
|
||
name="provider"
|
||
rules={[{ required: true, message: '请选择模型提供方' }]}
|
||
>
|
||
<Select
|
||
showSearch
|
||
placeholder="请选择模型提供方"
|
||
optionFilterProp="label"
|
||
options={availableProviders.map((item) => ({
|
||
label: item.label,
|
||
value: item.value,
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
|
||
{!isLocalProvider && (
|
||
<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" wrap>
|
||
<Form.Item
|
||
label="模型标识"
|
||
name="llm_model_name"
|
||
style={{ flex: 1 }}
|
||
rules={[{ required: true, message: '请输入模型标识或部署名' }]}
|
||
>
|
||
{isLocalProvider ? (
|
||
<Select
|
||
showSearch
|
||
optionFilterProp="label"
|
||
placeholder="选择 backend/models 中的模型"
|
||
options={localModels.map((item) => ({
|
||
value: item.name,
|
||
label: `${item.name}${item.dimension ? ` (${item.dimension} 维)` : ''}${item.ready ? '' : ' - 权重未就绪'}`,
|
||
disabled: !item.ready,
|
||
}))}
|
||
onChange={(value) => {
|
||
const selected = localModels.find((item) => item.name === value)
|
||
if (selected?.dimension) {
|
||
form.setFieldValue('embedding_dimension', selected.dimension)
|
||
}
|
||
}}
|
||
/>
|
||
) : (
|
||
<Input
|
||
placeholder={
|
||
isEmbedding
|
||
? '如 text-embedding-3-small / text-embedding-v4'
|
||
: '如 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" wrap>
|
||
<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>
|
||
|
||
{!isLocalProvider && (
|
||
<Form.Item label="API Key" name="api_key">
|
||
<Input.Password
|
||
placeholder="支持留空后稍后补齐；测试非 Ollama 模型时建议填写"
|
||
autoComplete="new-password"
|
||
/>
|
||
</Form.Item>
|
||
)}
|
||
|
||
{isEmbedding ? (
|
||
<Space className="embedding-options-row" style={{ width: '100%' }} size={16} align="start" wrap>
|
||
<Form.Item
|
||
label="向量维度"
|
||
name="embedding_dimension"
|
||
style={{ flex: 1 }}
|
||
extra="填写后会校验模型实际输出维度。"
|
||
>
|
||
<InputNumber
|
||
min={1}
|
||
max={8192}
|
||
step={1}
|
||
style={{ width: '100%' }}
|
||
placeholder="如 384 / 768 / 1536"
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="分块字符数"
|
||
name="chunk_size"
|
||
style={{ flex: 1 }}
|
||
rules={[{ required: true, message: '请输入分块字符数' }]}
|
||
>
|
||
<InputNumber min={100} max={10000} step={50} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="重叠字符数"
|
||
name="chunk_overlap"
|
||
style={{ flex: 1 }}
|
||
dependencies={['chunk_size']}
|
||
rules={[
|
||
{ required: true, message: '请输入重叠字符数' },
|
||
({ getFieldValue }) => ({
|
||
validator(_, value) {
|
||
if (value < getFieldValue('chunk_size')) return Promise.resolve()
|
||
return Promise.reject(new Error('必须小于分块字符数'))
|
||
},
|
||
}),
|
||
]}
|
||
>
|
||
<InputNumber min={0} max={5000} step={25} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
</Space>
|
||
) : (
|
||
<>
|
||
<Space style={{ width: '100%' }} size={24} align="start" wrap>
|
||
<Form.Item
|
||
label="Temperature"
|
||
name="llm_temperature"
|
||
style={{ flex: 1 }}
|
||
tooltip="数值越高回答越发散，越低越稳定保守"
|
||
rules={[{ required: true, message: '请设置 temperature' }]}
|
||
>
|
||
<Slider
|
||
min={0}
|
||
max={2}
|
||
step={0.05}
|
||
marks={{ 0: '0', 0.7: '0.7', 1: '1', 2: '2' }}
|
||
tooltip={{ open: undefined }}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="Top P"
|
||
name="llm_top_p"
|
||
style={{ flex: 1 }}
|
||
tooltip="核采样阈值，控制候选词的累计概率范围"
|
||
rules={[{ required: true, message: '请设置 top_p' }]}
|
||
>
|
||
<Slider
|
||
min={0}
|
||
max={1}
|
||
step={0.05}
|
||
marks={{ 0: '0', 0.5: '0.5', 0.9: '0.9', 1: '1' }}
|
||
tooltip={{ open: undefined }}
|
||
/>
|
||
</Form.Item>
|
||
</Space>
|
||
|
||
<Form.Item
|
||
label="Max Tokens"
|
||
name="llm_max_tokens"
|
||
tooltip="单次回复的最大输出长度"
|
||
rules={[{ required: true, message: '请选择 max_tokens' }]}
|
||
>
|
||
<Radio.Group
|
||
className="max-tokens-group"
|
||
optionType="button"
|
||
buttonStyle="solid"
|
||
options={MAX_TOKENS_OPTIONS}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<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>
|
||
|
||
<Form.Item label="启用状态" name="is_active" valuePropName="checked">
|
||
<Switch checkedChildren="启用" unCheckedChildren="停用" />
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ModelConfigs
|