Merge remote-tracking branch 'origin/pr-473'

# Conflicts:
#	frontend/src/features/providers/components/ProviderModelFormDialog.vue
This commit is contained in:
fawney19
2026-05-18 16:46:22 +08:00
5 changed files with 115 additions and 109 deletions

View File

@@ -16,6 +16,27 @@
v-if="!isEditMode"
class="w-[260px] shrink-0 flex flex-col h-full"
>
<!-- 手动添加入口 -->
<button
type="button"
class="mb-3 w-full rounded-lg border px-3 py-2 text-left transition-colors"
:class="manualModelMode
? 'border-primary bg-primary/10 text-primary'
: 'border-border/60 bg-muted/20 hover:bg-muted/40'"
@click="enableManualModelMode"
>
<div class="flex items-center justify-between gap-2">
<span class="text-sm font-medium">手动添加模型</span>
<Plus class="h-4 w-4 shrink-0" />
</div>
<p
class="mt-1 text-xs"
:class="manualModelMode ? 'text-primary/80' : 'text-muted-foreground'"
>
无法联网获取目录时直接填写模型 ID 继续创建
</p>
</button>
<!-- 搜索框 -->
<div class="relative mb-3">
<Search class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -88,7 +109,7 @@
v-if="groupedModels.length === 0"
class="text-center py-8 text-sm text-muted-foreground"
>
{{ searchQuery ? '未找到模型' : '加载中...' }}
{{ emptyModelListText }}
</div>
</template>
</div>
@@ -108,6 +129,12 @@
<h4 class="font-medium text-sm">
基本信息
</h4>
<div
v-if="manualModelMode && !isEditMode"
class="rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-xs text-muted-foreground"
>
当前为手动添加模式填写模型 ID名称和价格后即可离线创建统一模型稍后可在模型详情中关联 Provider
</div>
<div class="grid grid-cols-2 gap-3">
<div class="space-y-1.5">
<Label
@@ -343,7 +370,7 @@
{{ isEditMode ? '保存' : '添加' }}
</Button>
<Button
v-if="selectedModel && !isEditMode"
v-if="(selectedModel || manualModelMode) && !isEditMode"
type="button"
variant="ghost"
@click="clearSelection"
@@ -382,6 +409,7 @@ import {
EMBEDDING_API_FORMATS,
buildGlobalModelCreatePayload,
buildGlobalModelUpdatePayload,
getModelDirectoryEmptyText,
} from './global-model-form-helpers'
const props = defineProps<{
@@ -404,6 +432,8 @@ const searchQuery = ref('')
const allModelsCache = ref<ModelsDevModelItem[]>([]) // 全部模型(缓存)
const selectedModel = ref<ModelsDevModelItem | null>(null)
const expandedProvider = ref<string | null>(null)
const manualModelMode = ref(false)
const modelListLoadFailed = ref(false)
// 当前显示的模型列表:有搜索词时用全部,否则只用官方
const allModels = computed(() => {
@@ -466,6 +496,14 @@ const groupedModels = computed(() => {
return result
})
const emptyModelListText = computed(() => {
return getModelDirectoryEmptyText({
searchQuery: searchQuery.value,
manualModelMode: manualModelMode.value,
modelListLoadFailed: modelListLoadFailed.value,
})
})
// 搜索时如果只有一个提供商,自动展开
watch(groupedModels, (groups) => {
if (searchQuery.value && groups.length === 1) {
@@ -478,6 +516,16 @@ function toggleProvider(providerId: string) {
expandedProvider.value = expandedProvider.value === providerId ? null : providerId
}
function enableManualModelMode() {
manualModelMode.value = true
selectedModel.value = null
expandedProvider.value = null
searchQuery.value = ''
if (!form.value.name && !form.value.display_name) {
form.value = defaultForm()
}
}
// 阶梯计费配置
const tieredPricing = ref<TieredPricingConfig | null>(null)
@@ -710,11 +758,15 @@ function fillVideoResolutionPricePreset(preset: 'common' | 'sora' | 'veo') {
async function loadModels() {
if (allModelsCache.value.length > 0) return
loading.value = true
modelListLoadFailed.value = false
try {
// 只加载一次全部模型,过滤在 computed 中完成
allModelsCache.value = await getModelsDevList(false)
} catch (err) {
log.error('Failed to load models:', err)
modelListLoadFailed.value = true
enableManualModelMode()
showError('模型目录加载失败,已切换到手动添加模式,可离线继续创建')
} finally {
loading.value = false
}
@@ -729,6 +781,7 @@ watch(() => props.open, (isOpen) => {
// 选择模型并填充表单
function selectModel(model: ModelsDevModelItem) {
manualModelMode.value = false
selectedModel.value = model
expandedProvider.value = model.providerId
form.value.name = model.modelId
@@ -774,6 +827,7 @@ function selectModel(model: ModelsDevModelItem) {
// 清除选择(手动填写)
function clearSelection() {
manualModelMode.value = false
selectedModel.value = null
form.value = defaultForm()
tieredPricing.value = null
@@ -793,6 +847,8 @@ function resetForm() {
searchQuery.value = ''
selectedModel.value = null
expandedProvider.value = null
manualModelMode.value = false
modelListLoadFailed.value = false
}
// 加载模型数据(编辑模式)
@@ -828,6 +884,14 @@ const { isEditMode, handleDialogUpdate, handleCancel } = useFormDialog({
resetForm,
})
watch(() => form.value.name, (name) => {
if (!manualModelMode.value || isEditMode.value) return
const modelName = name.trim()
if (modelName && !form.value.display_name.trim()) {
form.value.display_name = modelName
}
})
async function handleSubmit() {
if (!form.value.name || !form.value.display_name) {
showError('请填写模型ID和名称')

View File

@@ -4,6 +4,7 @@ import {
EMBEDDING_API_FORMATS,
buildGlobalModelCreatePayload,
buildGlobalModelUpdatePayload,
getModelDirectoryEmptyText,
} from '../global-model-form-helpers'
const embeddingPricing = {
@@ -59,4 +60,26 @@ describe('global model form embedding payload helpers', () => {
api_formats: ['jina:embedding'],
})
})
it('surfaces manual-add guidance when the online model directory is unavailable', () => {
expect(getModelDirectoryEmptyText({
searchQuery: '',
manualModelMode: false,
modelListLoadFailed: true,
})).toBe('模型目录加载失败,请使用手动添加继续创建')
expect(getModelDirectoryEmptyText({
searchQuery: '',
manualModelMode: true,
modelListLoadFailed: false,
})).toBe('已切换到手动添加,可在右侧填写模型信息')
})
it('keeps search empty state ahead of manual/offline guidance', () => {
expect(getModelDirectoryEmptyText({
searchQuery: 'local-model',
manualModelMode: true,
modelListLoadFailed: true,
})).toBe('未找到模型')
})
})

View File

@@ -22,6 +22,19 @@ export interface GlobalModelFormPayloadState {
is_active?: boolean
}
export interface ModelDirectoryEmptyTextState {
searchQuery: string
manualModelMode: boolean
modelListLoadFailed: boolean
}
export function getModelDirectoryEmptyText(state: ModelDirectoryEmptyTextState): string {
if (state.searchQuery) return '未找到模型'
if (state.modelListLoadFailed) return '模型目录加载失败,请使用手动添加继续创建'
if (state.manualModelMode) return '已切换到手动添加,可在右侧填写模型信息'
return '加载中...'
}
function cleanGlobalModelConfig(form: GlobalModelFormPayloadState): Record<string, unknown> | undefined {
return form.config && Object.keys(form.config).length > 0 ? form.config : undefined
}

View File

@@ -11,27 +11,13 @@
class="space-y-4"
@submit.prevent="handleSubmit"
>
<!-- 添加模式选择或手动创建本地全局模型 -->
<!-- 添加模式选择本地全局模型 -->
<div
v-if="!isEditing"
class="space-y-3"
>
<div class="flex items-center justify-between gap-3">
<Label for="global-model">选择已有模型或手动添加 *</Label>
<Button
type="button"
variant="ghost"
size="sm"
class="h-7 px-2 text-xs"
@click="manualGlobalModelMode = !manualGlobalModelMode"
>
{{ manualGlobalModelMode ? '选择已有模型' : '手动添加' }}
</Button>
</div>
<div
v-if="!manualGlobalModelMode"
class="space-y-2"
>
<div class="space-y-1.5">
<Label for="global-model">选择已有模型 *</Label>
<Select
:model-value="form.global_model_id"
:disabled="loadingGlobalModels"
@@ -51,44 +37,11 @@
</SelectContent>
</Select>
</div>
<div
v-else
class="rounded-lg border border-border/60 bg-muted/20 p-3 space-y-3"
>
<div class="grid grid-cols-2 gap-3">
<div class="space-y-1.5">
<Label
for="manual-global-model-name"
class="text-xs"
>模型ID *</Label>
<Input
id="manual-global-model-name"
v-model="form.manual_global_model_name"
placeholder="如 gpt-4o-mini"
@update:model-value="syncManualProviderName"
/>
</div>
<div class="space-y-1.5">
<Label
for="manual-global-model-display-name"
class="text-xs"
>显示名称</Label>
<Input
id="manual-global-model-display-name"
v-model="form.manual_global_model_display_name"
placeholder="默认使用模型ID"
/>
</div>
</div>
<p class="text-xs text-muted-foreground">
无法联网获取模型目录时可直接填写模型ID保存时会先创建本地全局模型再添加到当前 Provider
</p>
</div>
<p
v-if="availableGlobalModels.length === 0 && !loadingGlobalModels && !manualGlobalModelMode"
v-if="availableGlobalModels.length === 0 && !loadingGlobalModels"
class="text-xs text-muted-foreground"
>
没有可选择的本地全局模型可以切换到手动添加继续保存
没有可选择的本地全局模型请先在模型管理中添加全局模型
</p>
<div class="space-y-1.5">
<Label
@@ -300,7 +253,7 @@ import {
import { useToast } from '@/composables/useToast'
import { parseNumberInput, sortResolutionEntries } from '@/utils/form'
import { createModel, updateModel, getProviderModels } from '@/api/endpoints/models'
import { createGlobalModel, listGlobalModels, type GlobalModelResponse } from '@/api/global-models'
import { listGlobalModels, type GlobalModelResponse } from '@/api/global-models'
import TieredPricingEditor from '@/features/models/components/TieredPricingEditor.vue'
import type { Model, TieredPricingConfig } from '@/api/endpoints'
import {
@@ -349,7 +302,6 @@ const showCache1h = true
const submitting = ref(false)
const loadingGlobalModels = ref(false)
const availableGlobalModels = ref<GlobalModelResponse[]>([])
const manualGlobalModelMode = ref(false)
// 阶梯计费配置
const tieredPricing = ref<TieredPricingConfig | null>(null)
@@ -384,15 +336,9 @@ const VIDEO_RESOLUTION_PRICE_PRESETS: Record<
],
}
const DEFAULT_MANUAL_GLOBAL_MODEL_PRICING: TieredPricingConfig = {
tiers: [{ up_to: null, input_price_per_1m: 0, output_price_per_1m: 0 }],
}
const form = ref({
global_model_id: '',
provider_model_name: '',
manual_global_model_name: '',
manual_global_model_display_name: '',
price_per_request: undefined as number | undefined,
config: {} as Record<string, unknown>,
// 能力配置
@@ -407,7 +353,6 @@ const form = ref({
const canSubmitCreate = computed(() => {
if (isEditing.value) return true
if (!form.value.provider_model_name.trim()) return false
if (manualGlobalModelMode.value) return !!form.value.manual_global_model_name.trim()
return !!form.value.global_model_id
})
@@ -422,8 +367,6 @@ watch(() => props.open, async (newOpen) => {
form.value = {
global_model_id: props.editingModel.global_model_id || '',
provider_model_name: props.editingModel.provider_model_name || '',
manual_global_model_name: '',
manual_global_model_display_name: '',
// 显示有效的按次计费价格(继承自全局模型)
price_per_request: props.editingModel.effective_price_per_request ?? props.editingModel.price_per_request ?? undefined,
config: effectiveConfig ? JSON.parse(JSON.stringify(effectiveConfig)) : {},
@@ -485,8 +428,6 @@ function resetForm() {
form.value = {
global_model_id: '',
provider_model_name: '',
manual_global_model_name: '',
manual_global_model_display_name: '',
price_per_request: undefined,
config: {},
supports_vision: undefined,
@@ -502,7 +443,6 @@ function resetForm() {
tieredPricingModified.value = false
originalTieredPricing.value = ''
availableGlobalModels.value = []
manualGlobalModelMode.value = false
}
function handleGlobalModelSelect(value: string) {
@@ -511,16 +451,6 @@ function handleGlobalModelSelect(value: string) {
form.value.provider_model_name = selectedModel?.name || form.value.provider_model_name
}
function syncManualProviderName(value: string | number) {
const modelName = String(value || '').trim()
if (!form.value.provider_model_name.trim()) {
form.value.provider_model_name = modelName
}
if (!form.value.manual_global_model_display_name.trim()) {
form.value.manual_global_model_display_name = modelName
}
}
function getNested(obj: Record<string, unknown>, path: string): unknown {
if (!obj || typeof obj !== 'object') return undefined
const parts = path.split('.').filter(Boolean)
@@ -657,28 +587,6 @@ function _copyVideoPricingFromSelectedGlobal() {
configTouched.value = true
}
async function createManualGlobalModel(finalTieredPricing: TieredPricingConfig | null, cleanConfig: Record<string, unknown> | undefined): Promise<GlobalModelResponse> {
const modelName = form.value.manual_global_model_name.trim()
const displayName = form.value.manual_global_model_display_name.trim() || modelName
const supportedCapabilities = [
form.value.supports_vision === true ? 'vision' : null,
form.value.supports_function_calling === true ? 'function_calling' : null,
form.value.supports_streaming === true ? 'streaming' : null,
form.value.supports_extended_thinking === true ? 'extended_thinking' : null,
form.value.supports_image_generation === true ? 'image_generation' : null,
].filter((capability): capability is string => capability !== null)
return createGlobalModel({
name: modelName,
display_name: displayName,
default_price_per_request: form.value.price_per_request,
default_tiered_pricing: finalTieredPricing || DEFAULT_MANUAL_GLOBAL_MODEL_PRICING,
supported_capabilities: supportedCapabilities.length ? supportedCapabilities : undefined,
config: cleanConfig,
is_active: true,
})
}
// 加载可用的全局模型(排除已添加的)
async function loadAvailableGlobalModels() {
loadingGlobalModels.value = true
@@ -716,7 +624,7 @@ function handleClose(value: boolean) {
async function handleSubmit() {
if (submitting.value) return
if (!isEditing.value && !canSubmitCreate.value) {
showError(manualGlobalModelMode.value ? '请填写模型ID和 Provider 模型名' : '请选择模型并填写 Provider 模型名', '错误')
showError('请选择模型并填写 Provider 模型名', '错误')
return
}
@@ -749,21 +657,19 @@ async function handleSubmit() {
showSuccess('模型配置已更新')
} else {
// 添加模式:只有用户修改了配置才提交 tiered_pricing否则保持继承关系
const selectedModel = manualGlobalModelMode.value
? await createManualGlobalModel(finalTieredPricing, cleanConfig)
: availableGlobalModels.value.find(m => m.id === form.value.global_model_id)
const selectedModel = availableGlobalModels.value.find(m => m.id === form.value.global_model_id)
if (!selectedModel) {
showError('请选择模型或切换到手动添加后填写模型ID', '错误')
showError('请选择模型', '错误')
return
}
await createModel(props.providerId, buildProviderModelCreatePayload({
globalModelId: selectedModel.id,
providerModelName: form.value.provider_model_name.trim(),
finalTieredPricing,
tieredPricingModified: manualGlobalModelMode.value ? false : tieredPricingModified.value,
pricePerRequest: manualGlobalModelMode.value ? undefined : form.value.price_per_request,
tieredPricingModified: tieredPricingModified.value,
pricePerRequest: form.value.price_per_request,
cleanConfig,
configTouched: manualGlobalModelMode.value ? false : configTouched.value,
configTouched: configTouched.value,
supportsVision: form.value.supports_vision,
supportsFunctionCalling: form.value.supports_function_calling,
supportsStreaming: form.value.supports_streaming,

View File

@@ -49,7 +49,7 @@ describe('provider model form embedding helpers', () => {
expect('supports_embedding' in payload).toBe(false)
})
it('uses manually supplied provider model name in create payload', () => {
it('uses supplied provider model name in create payload', () => {
const payload = buildProviderModelCreatePayload({
globalModelId: 'gm-local-manual',
providerModelName: 'intranet-chat-model-v1',