141 lines
2.9 KiB
Vue
141 lines
2.9 KiB
Vue
<template>
|
|
<Select
|
|
v-model="model"
|
|
:grouped-options="modelGroups"
|
|
class="model-select"
|
|
position="top"
|
|
>
|
|
<template #prefix>
|
|
<img src="@/assets/dialog/model.svg" alt="" style="width: 16px;">
|
|
</template>
|
|
</Select>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Select from '@/components/Select/index.vue'
|
|
import paintingConfig from '@/config/modelConfig/painting.json'
|
|
import videoConfig from '@/config/modelConfig/video.json'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: 'flux'
|
|
},
|
|
typeValue: {
|
|
type: String,
|
|
default: 'text'
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'painting'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'update:typeValue'])
|
|
|
|
const model = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:modelValue', value)
|
|
const newType = getModelType(value)
|
|
emit('update:typeValue', newType)
|
|
}
|
|
})
|
|
|
|
const getModelsByType = (type) => {
|
|
if (type === 'video') {
|
|
return videoConfig.video || []
|
|
}
|
|
const config = paintingConfig
|
|
return {
|
|
generate: config.generate || [],
|
|
edit: config.edit || [],
|
|
vision: config.vision || []
|
|
}
|
|
}
|
|
|
|
const modelData = computed(() => {
|
|
return getModelsByType(props.type)
|
|
})
|
|
|
|
const isVideo = computed(() => props.type === 'video')
|
|
|
|
const generateModels = computed(() => modelData.value.generate || [])
|
|
const editModels = computed(() => modelData.value.edit || [])
|
|
const visionModels = computed(() => modelData.value.vision || [])
|
|
|
|
const modelGroups = computed(() => {
|
|
if (isVideo.value) {
|
|
return [{
|
|
label: '选择模型',
|
|
options: modelData.value
|
|
}]
|
|
}
|
|
return [
|
|
{
|
|
label: '生成模型',
|
|
options: generateModels.value
|
|
},
|
|
{
|
|
label: '编辑模型',
|
|
options: editModels.value
|
|
},
|
|
{
|
|
label: '视觉理解模型',
|
|
options: visionModels.value
|
|
}
|
|
]
|
|
})
|
|
|
|
const getModelType = (value) => {
|
|
if (isVideo.value) {
|
|
return 'text'
|
|
}
|
|
if (generateModels.value.find(m => m.value === value)) {
|
|
return 'text'
|
|
}
|
|
if (editModels.value.find(m => m.value === value)) {
|
|
return 'image'
|
|
}
|
|
if (visionModels.value.find(m => m.value === value)) {
|
|
return 'vision'
|
|
}
|
|
return 'text'
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.model-select {
|
|
:deep(.select-header) {
|
|
height: 40px;
|
|
padding: 0 15px;
|
|
border-radius: 10px;
|
|
border: 1px solid #E8E9EB;
|
|
background: #f5f6f7;
|
|
|
|
&:hover {
|
|
background: #e9eaeb;
|
|
}
|
|
}
|
|
|
|
:deep(.select-text) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
:deep(.dropdown-menu) {
|
|
max-height: 510px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
:deep(.dropdown-item) {
|
|
min-width: 120px;
|
|
|
|
&.active {
|
|
background: rgba(0, 15, 51, 0.10);
|
|
color: #000F33;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
</style>
|