渠道模型列表弹窗与模型数量列
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
<script setup lang="ts">
|
||||
import { NButton, NInput, NModal, useDialog } from 'naive-ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
import {
|
||||
addAiBlacklist,
|
||||
listAiChannelModels,
|
||||
syncAiChannelModels,
|
||||
testAiChannelModel,
|
||||
} from '@/api/aigateway'
|
||||
import { useToast } from '@/composables/useToast'
|
||||
import type { AiChannel, AiModelCacheItem } from '@/types/api'
|
||||
|
||||
const props = defineProps<{ show: boolean; channel: AiChannel | null }>()
|
||||
const emit = defineEmits<{ 'update:show': [boolean]; changed: [] }>()
|
||||
|
||||
const toast = useToast()
|
||||
const dialog = useDialog()
|
||||
|
||||
const rows = ref<AiModelCacheItem[]>([])
|
||||
const loading = ref(false)
|
||||
const syncing = ref(false)
|
||||
const testing = ref('')
|
||||
const filter = ref('')
|
||||
/** 本地镜像验证模型:测试通过即时高亮,不等父级刷新 */
|
||||
const probeModel = ref('')
|
||||
|
||||
const CAP_ORDER = ['CHAT', 'EMBEDDING', 'RERANK', 'TTS']
|
||||
const CAP_LABEL: Record<string, string> = { CHAT: '对话', EMBEDDING: '向量', RERANK: '重排', TTS: '语音' }
|
||||
|
||||
/** 按能力分组 + 关键字过滤;仅对话组提供「测试」入口 */
|
||||
const groups = computed(() => {
|
||||
const kw = filter.value.trim().toLowerCase()
|
||||
const buckets = new Map<string, AiModelCacheItem[]>()
|
||||
for (const r of rows.value) {
|
||||
if (kw && !r.name.toLowerCase().includes(kw)) continue
|
||||
const cap = r.capability || 'CHAT'
|
||||
buckets.set(cap, [...(buckets.get(cap) ?? []), r])
|
||||
}
|
||||
const order = [...CAP_ORDER, ...[...buckets.keys()].filter((c) => !CAP_ORDER.includes(c))]
|
||||
return order
|
||||
.filter((cap) => buckets.has(cap))
|
||||
.map((cap) => ({ cap, label: CAP_LABEL[cap] ?? cap, items: buckets.get(cap)! }))
|
||||
})
|
||||
|
||||
const shownCount = computed(() => groups.value.reduce((n, g) => n + g.items.length, 0))
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(show) => {
|
||||
if (show && props.channel) {
|
||||
probeModel.value = props.channel.probeModel
|
||||
filter.value = ''
|
||||
void reload()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
async function reload() {
|
||||
if (!props.channel) return
|
||||
loading.value = true
|
||||
try {
|
||||
rows.value = await listAiChannelModels(props.channel.id)
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : '加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function doSync() {
|
||||
if (!props.channel) return
|
||||
syncing.value = true
|
||||
try {
|
||||
rows.value = await syncAiChannelModels(props.channel.id)
|
||||
toast.success(`已同步 ${rows.value.length} 个模型`)
|
||||
emit('changed')
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : '同步失败')
|
||||
} finally {
|
||||
syncing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function doTest(name: string) {
|
||||
if (!props.channel || testing.value) return
|
||||
testing.value = name
|
||||
try {
|
||||
const ch = await testAiChannelModel(props.channel.id, name)
|
||||
probeModel.value = ch.probeModel
|
||||
toast.success('测试通过', '已设为该渠道探测验证模型,后续探测优先使用')
|
||||
emit('changed')
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : '测试失败')
|
||||
} finally {
|
||||
testing.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function confirmBlacklist(name: string) {
|
||||
dialog.warning({
|
||||
title: '拉黑模型',
|
||||
content: `「${name}」将从全部渠道剔除,同步与探测不再入库;可在模型黑名单中移出后重新同步恢复。`,
|
||||
positiveText: '拉黑',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
try {
|
||||
await addAiBlacklist(name)
|
||||
toast.success('已拉黑')
|
||||
void reload()
|
||||
emit('changed')
|
||||
} catch (e) {
|
||||
toast.error(e instanceof Error ? e.message : '拉黑失败')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NModal
|
||||
:show="show"
|
||||
preset="card"
|
||||
:style="{ width: '640px', maxWidth: 'calc(100vw - 24px)' }"
|
||||
@update:show="emit('update:show', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<div>
|
||||
<div class="text-[15px] leading-tight font-semibold">模型列表</div>
|
||||
<div class="mono mt-1 text-xs font-normal text-ink-3">{{ channel?.name ?? '' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex items-center gap-2 pb-2">
|
||||
<NInput v-model:value="filter" size="small" placeholder="过滤模型名…" clearable class="min-w-0 flex-1" />
|
||||
<span class="flex-none text-xs whitespace-nowrap text-ink-3">
|
||||
{{ filter ? `${shownCount} / ${rows.length}` : `${rows.length} 个模型` }}
|
||||
</span>
|
||||
<NButton size="small" :loading="syncing" @click="doSync">同步模型</NButton>
|
||||
</div>
|
||||
|
||||
<div class="-mx-2 max-h-[58vh] overflow-y-auto">
|
||||
<div v-if="loading" class="py-10 text-center text-xs text-ink-3">加载中…</div>
|
||||
<template v-else>
|
||||
<template v-for="g in groups" :key="g.cap">
|
||||
<div class="px-3 pt-3 pb-1 text-[11.5px] font-semibold tracking-wide text-ink-3">
|
||||
{{ g.label }} <span class="font-normal">· {{ g.items.length }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="r in g.items"
|
||||
:key="r.name"
|
||||
class="group flex items-center gap-2 rounded-lg px-3 py-[5px] hover:bg-row-hover"
|
||||
>
|
||||
<span
|
||||
class="mono min-w-0 truncate text-[13px]"
|
||||
:class="r.deprecatedAt ? 'text-ink-3' : ''"
|
||||
:title="r.modelOcid"
|
||||
>
|
||||
{{ r.name }}
|
||||
</span>
|
||||
<span
|
||||
v-if="r.name === probeModel"
|
||||
class="flex flex-none items-center gap-1 rounded-[5px] bg-info/15 px-1.5 py-px text-[10.5px] font-medium text-info"
|
||||
>
|
||||
<span class="h-[5px] w-[5px] rounded-full bg-info" />验证模型
|
||||
</span>
|
||||
<span v-if="r.deprecatedAt" class="flex-none text-[11px] text-warn">弃用</span>
|
||||
<span class="min-w-0 flex-1" />
|
||||
<button
|
||||
v-if="g.cap === 'CHAT'"
|
||||
type="button"
|
||||
class="flex-none cursor-pointer rounded-[5px] px-1.5 py-0.5 text-xs hover:bg-accent/10"
|
||||
:class="testing === r.name ? 'text-accent' : 'text-ink-3/70 group-hover:text-accent'"
|
||||
:disabled="!!testing"
|
||||
@click="doTest(r.name)"
|
||||
>
|
||||
{{ testing === r.name ? '测试中…' : '测试' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-none cursor-pointer rounded-[5px] px-1.5 py-0.5 text-xs text-ink-3/70 group-hover:text-err hover:bg-err/10"
|
||||
@click="confirmBlacklist(r.name)"
|
||||
>
|
||||
拉黑
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="!shownCount" class="py-10 text-center text-xs text-ink-3">
|
||||
{{ rows.length ? '无匹配模型' : '暂无模型缓存,点击右上「同步模型」拉取' }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 border-t border-line-soft pt-2.5 text-[11.5px] leading-relaxed text-ink-3">
|
||||
<span class="font-medium text-ink-2">测试</span>:发 max_tokens=16
|
||||
试调,通过即设为该渠道探测验证模型(后续探测优先使用)并置渠道可用 ·
|
||||
<span class="font-medium text-ink-2">拉黑</span>:全局生效,从全部渠道剔除 ·
|
||||
非对话模型不提供测试
|
||||
</div>
|
||||
</NModal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user