WangLeo
61867e4f59
- pattern 控件改为支持 Element Plus 图标组件，部分选项改用图标替代 SVG - 新增 isStr 函数区分图标组件与 SVG 图片路径 - 智能多帧选项暂时标记为 disabled - modelSelector 增加新模式→modelType 映射（imageToVideo/allReference/subjectReference） - imageUploader 增加新模式标签文本（参考图/主体） - 平台注册表 key 统一转为小写，支持大小写不敏感查找 - 更新 workflow 上传地址
102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<template>
|
|
<Select
|
|
v-model="quantity"
|
|
:options="quantityOptions"
|
|
class="quantity-select"
|
|
position="top"
|
|
>
|
|
<template #prefix>
|
|
<component v-if="!isStr(selectedIcon)" :is="selectedIcon" style="width: 20px;" />
|
|
<img v-else :src="selectedIcon" alt="" style="width: 20px;">
|
|
</template>
|
|
<template #option="{ option }">
|
|
<div class="option-content-custom">
|
|
<component v-if="!isStr(option.icon)" :is="option.icon" style="width: 20px;" />
|
|
<img v-else :src="option.icon" alt="" style="width: 20px;">
|
|
<span v-if="option.labelText" class="option-label-text">{{ option.labelText }}</span>
|
|
</div>
|
|
</template>
|
|
</Select>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ChatLineSquare, Picture, VideoCamera } from '@element-plus/icons-vue'
|
|
import videoPattern2 from '@/assets/dialog/videoPattern2.svg'
|
|
import videoPattern4 from '@/assets/dialog/videoPattern4.svg'
|
|
import videoPattern5 from '@/assets/dialog/videoPattern5.svg'
|
|
import videoPattern6 from '@/assets/dialog/videoPattern6.svg'
|
|
import Select from '@/components/Select/index.vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: '全能参考'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const quantity = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const quantityOptions = [
|
|
{ value: '文生视频', label: '文生视频', labelText: '文生视频', icon: markRaw(ChatLineSquare) },
|
|
{ value: '图生视频', label: '图生视频', labelText: '图生视频', icon: markRaw(Picture) },
|
|
{ value: '首尾帧', label: '首尾帧', labelText: '首尾帧', icon: videoPattern2 },
|
|
{ value: '数字人', label: '数字人', labelText: '数字人', icon: markRaw(VideoCamera) },
|
|
{ value: '全能参考', label: '全能参考', labelText: '全能参考', icon: videoPattern4 },
|
|
{ value: '智能多帧', label: '智能多帧', labelText: '智能多帧', icon: videoPattern5, disabled: true },
|
|
{ value: '主体参考', label: '主体参考', labelText: '主体参考', icon: videoPattern6 }
|
|
]
|
|
|
|
const isStr = (v) => typeof v === 'string'
|
|
|
|
const selectedIcon = computed(() => {
|
|
const option = quantityOptions.find((opt) => opt.value === quantity.value)
|
|
return option ? option.icon : videoPattern2
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.quantity-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) {
|
|
min-width: 140px;
|
|
}
|
|
|
|
:deep(.dropdown-item) {
|
|
min-width: 80px;
|
|
justify-content: start;
|
|
}
|
|
}
|
|
|
|
.option-content-custom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.option-label-text {
|
|
font-size: 14px;
|
|
color: inherit;
|
|
}
|
|
</style>
|