507 lines
11 KiB
Vue
507 lines
11 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, watch } from 'vue'
|
|||
|
|
import type { ModelItem } from '@/types'
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
modelValue: boolean
|
|||
|
|
models: ModelItem[]
|
|||
|
|
/** 当前已选模型 id，打开弹窗时用于初始化草稿与 Tab */
|
|||
|
|
currentModelId: string | number
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'update:modelValue', value: boolean): void
|
|||
|
|
(e: 'confirm', modelId: string | number): void
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const activeModelTab = ref<'official' | 'mine'>('official')
|
|||
|
|
const activeModelSeries = ref('')
|
|||
|
|
const draftModelId = ref<string | number>('')
|
|||
|
|
const modelSearchKeyword = ref('')
|
|||
|
|
|
|||
|
|
/** 根据模型名提取系列名（去掉参数量与日期后缀） */
|
|||
|
|
function getModelSeries(name: string): string {
|
|||
|
|
return name
|
|||
|
|
.replace(/-\d+(?:\.\d+)?B.*$/i, '')
|
|||
|
|
.replace(/-\d+(?:\.\d+)?b.*$/i, '')
|
|||
|
|
.replace(/-\d{4}.*$/, '')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dialogModels = computed(() => {
|
|||
|
|
const keyword = modelSearchKeyword.value.trim().toLowerCase()
|
|||
|
|
const tabModels = props.models.filter((model) => {
|
|||
|
|
if (activeModelTab.value === 'official') return model.model_source !== 'api'
|
|||
|
|
return model.model_source === 'api'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (!keyword) return tabModels
|
|||
|
|
return tabModels.filter((model) => {
|
|||
|
|
return [model.name, model.description, model.path, model.online_model_name]
|
|||
|
|
.filter(Boolean)
|
|||
|
|
.some((text) => String(text).toLowerCase().includes(keyword))
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const modelSeriesGroups = computed(() => {
|
|||
|
|
const groupMap = new Map<string, ModelItem[]>()
|
|||
|
|
dialogModels.value.forEach((model) => {
|
|||
|
|
const series = getModelSeries(model.name)
|
|||
|
|
const list = groupMap.get(series) || []
|
|||
|
|
list.push(model)
|
|||
|
|
groupMap.set(series, list)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return Array.from(groupMap.entries()).map(([name, list]) => ({
|
|||
|
|
name,
|
|||
|
|
count: list.length,
|
|||
|
|
models: list,
|
|||
|
|
}))
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const currentSeriesModels = computed(() => {
|
|||
|
|
return modelSeriesGroups.value.find((group) => group.name === activeModelSeries.value)?.models || []
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const draftModel = computed(() => props.models.find((model) => model.id === draftModelId.value))
|
|||
|
|
|
|||
|
|
function syncActiveModelSeries() {
|
|||
|
|
const firstSeries = modelSeriesGroups.value[0]?.name || ''
|
|||
|
|
if (!activeModelSeries.value || !modelSeriesGroups.value.some((group) => group.name === activeModelSeries.value)) {
|
|||
|
|
activeModelSeries.value = firstSeries
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 弹窗打开时初始化：草稿沿用当前选中、Tab 按来源切换、系列定位到草稿所在组
|
|||
|
|
watch(
|
|||
|
|
() => props.modelValue,
|
|||
|
|
(visible) => {
|
|||
|
|
if (visible) {
|
|||
|
|
const current = props.models.find((model) => model.id === props.currentModelId)
|
|||
|
|
activeModelTab.value = current?.model_source === 'api' ? 'mine' : 'official'
|
|||
|
|
draftModelId.value = props.currentModelId
|
|||
|
|
syncActiveModelSeries()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
watch([activeModelTab, modelSearchKeyword], () => {
|
|||
|
|
syncActiveModelSeries()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function chooseModelSeries(series: string) {
|
|||
|
|
activeModelSeries.value = series
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function chooseDraftModel(model: ModelItem) {
|
|||
|
|
draftModelId.value = model.id
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleCancel() {
|
|||
|
|
emit('update:modelValue', false)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleConfirm() {
|
|||
|
|
if (draftModelId.value !== '' && draftModelId.value !== undefined && draftModelId.value !== null) {
|
|||
|
|
emit('confirm', draftModelId.value)
|
|||
|
|
}
|
|||
|
|
emit('update:modelValue', false)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
:model-value="modelValue"
|
|||
|
|
class="model-select-dialog"
|
|||
|
|
width="860px"
|
|||
|
|
top="10vh"
|
|||
|
|
:show-close="false"
|
|||
|
|
append-to-body
|
|||
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|||
|
|
>
|
|||
|
|
<template #header>
|
|||
|
|
<div class="model-dialog-header">
|
|||
|
|
<div class="model-dialog-title">
|
|||
|
|
<span>选择模型</span>
|
|||
|
|
<em>仅可选 1 个模型</em>
|
|||
|
|
</div>
|
|||
|
|
<button class="model-dialog-close" type="button" @click="handleCancel">
|
|||
|
|
<i class="fa fa-close" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<div class="model-dialog-body">
|
|||
|
|
<div class="model-dialog-toolbar">
|
|||
|
|
<el-tabs v-model="activeModelTab" class="model-tabs">
|
|||
|
|
<el-tab-pane label="官方模型" name="official" />
|
|||
|
|
<el-tab-pane label="我的模型" name="mine" />
|
|||
|
|
</el-tabs>
|
|||
|
|
<el-input
|
|||
|
|
v-model="modelSearchKeyword"
|
|||
|
|
class="model-search"
|
|||
|
|
placeholder="从全部模型中搜索"
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<template #suffix>
|
|||
|
|
<i class="fa fa-search" />
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="model-dialog-content">
|
|||
|
|
<aside class="model-series-list">
|
|||
|
|
<div class="column-title">模型系列</div>
|
|||
|
|
<button
|
|||
|
|
v-for="series in modelSeriesGroups"
|
|||
|
|
:key="series.name"
|
|||
|
|
class="model-series-item"
|
|||
|
|
:class="{ active: activeModelSeries === series.name }"
|
|||
|
|
type="button"
|
|||
|
|
@click="chooseModelSeries(series.name)"
|
|||
|
|
>
|
|||
|
|
<i class="fa fa-star-o" />
|
|||
|
|
<span>{{ series.name }}</span>
|
|||
|
|
<em>{{ series.count }}</em>
|
|||
|
|
</button>
|
|||
|
|
<el-empty v-if="!modelSeriesGroups.length" description="暂无模型" :image-size="80" />
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<section class="model-version-list">
|
|||
|
|
<div class="column-title">快照版本</div>
|
|||
|
|
<button
|
|||
|
|
v-for="model in currentSeriesModels"
|
|||
|
|
:key="model.id"
|
|||
|
|
class="model-version-item"
|
|||
|
|
:class="{ active: draftModelId === model.id }"
|
|||
|
|
type="button"
|
|||
|
|
@click="chooseDraftModel(model)"
|
|||
|
|
>
|
|||
|
|
<div class="model-version-main">
|
|||
|
|
<strong>{{ model.name }}</strong>
|
|||
|
|
<span>{{ model.description || model.path || model.online_model_name || '暂无模型描述' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="model-radio-dot" />
|
|||
|
|
</button>
|
|||
|
|
<el-empty v-if="!currentSeriesModels.length" description="暂无快照版本" :image-size="80" />
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="model-dialog-footer">
|
|||
|
|
<div class="selected-model-summary">
|
|||
|
|
<span>已选 {{ draftModel ? 1 : 0 }}/1</span>
|
|||
|
|
<div v-if="draftModel" class="selected-model-pill">
|
|||
|
|
<i class="fa fa-star-o" />
|
|||
|
|
{{ draftModel.name }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="model-dialog-actions">
|
|||
|
|
<el-button @click="handleCancel">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
:deep(.model-select-dialog) {
|
|||
|
|
max-width: calc(100vw - 48px);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
|
|||
|
|
|
|||
|
|
.el-dialog__header {
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__body {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__footer {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-header {
|
|||
|
|
height: 56px;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
border-bottom: 1px solid #eef0f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
gap: 12px;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #1f2937;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
em {
|
|||
|
|
font-style: normal;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #94a3b8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-close {
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
border: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
color: #64748b;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
background: #f5f6fb;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-body {
|
|||
|
|
height: 452px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-toolbar {
|
|||
|
|
height: 76px;
|
|||
|
|
padding: 14px 20px 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 18px;
|
|||
|
|
border-bottom: 1px solid #eef0f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-tabs {
|
|||
|
|
min-width: 210px;
|
|||
|
|
|
|||
|
|
:deep(.el-tabs__item) {
|
|||
|
|
height: 42px;
|
|||
|
|
padding: 0 18px 0 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #475569;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-tabs__active-bar) {
|
|||
|
|
height: 2px;
|
|||
|
|
background: #2563eb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-tabs__nav-wrap::after) {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-search {
|
|||
|
|
width: 280px;
|
|||
|
|
|
|||
|
|
:deep(.el-input__wrapper) {
|
|||
|
|
border-radius: 6px;
|
|||
|
|
min-height: 36px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-content {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 280px 1fr;
|
|||
|
|
height: 376px;
|
|||
|
|
min-height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-series-list,
|
|||
|
|
.model-version-list {
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-series-list {
|
|||
|
|
border-right: 1px solid #eef0f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.column-title {
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #64748b;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-series-item,
|
|||
|
|
.model-version-item {
|
|||
|
|
width: 100%;
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
color: #1f2937;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
border-color: #94a3b8;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
border-color: #2563eb;
|
|||
|
|
background: #eff6ff;
|
|||
|
|
box-shadow: inset 0 0 0 1px #2563eb;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-series-item {
|
|||
|
|
height: 44px;
|
|||
|
|
padding: 0 12px;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: auto 1fr auto;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
text-align: left;
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
color: #2563eb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
em {
|
|||
|
|
font-style: normal;
|
|||
|
|
color: #777b92;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-version-item {
|
|||
|
|
min-height: 64px;
|
|||
|
|
padding: 12px 14px;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr auto;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 14px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-version-main {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 6px;
|
|||
|
|
min-width: 0;
|
|||
|
|
|
|||
|
|
strong {
|
|||
|
|
color: #1f2937;
|
|||
|
|
font-size: 14px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
color: #64748b;
|
|||
|
|
font-size: 13px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-radio-dot {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border: 1px solid #cbd5e1;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-version-item.active .model-radio-dot {
|
|||
|
|
border-color: #2563eb;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 3px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #2563eb;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-footer {
|
|||
|
|
height: 60px;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
border-top: 1px solid #eef0f5;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected-model-summary {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
color: #475569;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected-model-pill {
|
|||
|
|
max-width: 300px;
|
|||
|
|
height: 28px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
border: 1px solid #dbeafe;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
background: #eff6ff;
|
|||
|
|
color: #1f2937;
|
|||
|
|
font-weight: 600;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
color: #2563eb;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 900px) {
|
|||
|
|
.model-dialog-toolbar,
|
|||
|
|
.model-dialog-footer {
|
|||
|
|
height: auto;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-search {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-dialog-content {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.model-series-list {
|
|||
|
|
border-right: 0;
|
|||
|
|
border-bottom: 1px solid #eef0f5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|