This commit is contained in:
2025-11-29 21:53:17 +08:00
parent d9f3103304
commit 853bedcb23
12 changed files with 239 additions and 284 deletions

View File

@@ -12,9 +12,8 @@
<div class="mix-modal__summary">
<p>视频分组{{ getGroupName(videoGroupId) || '未选择' }}</p>
<p>视频数量{{ videoGroupFiles.length }} </p>
<p>背景音乐{{ selectedBgMusic?.fileName || '未选择' }}</p>
<p style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
系统将根据文案自动生成配音并匹配视频片段
纯画面模式仅拼接视频片段无配音无背景音乐
</p>
</div>
<a-form layout="vertical">
@@ -31,41 +30,12 @@
</a-select>
</a-form-item>
<a-form-item label="选择背景音乐" required>
<a-select
v-model:value="selectedBgMusic"
placeholder="请选择背景音乐"
style="width: 100%"
show-search
:filter-option="(input, option) => option.children.toLowerCase().includes(input.toLowerCase())"
>
<a-select-option v-for="audio in allAudioFiles" :key="audio.id" :value="audio.id">
{{ audio.fileName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="视频标题" required>
<a-input v-model:value="mixForm.title" placeholder="请输入生成视频标题" />
</a-form-item>
<a-form-item label="文案内容" required>
<a-textarea
v-model:value="mixForm.text"
placeholder="请输入文案每句话用句号分隔"
:rows="4"
/>
<a-input v-model:value="mixForm.title" placeholder="请输入生成视频标题(仅用于记录)" />
<div style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
文案将用于生成 TTS 配音,每句话对应一个视频片段
标题仅用于任务记录不会在视频上显示
</div>
</a-form-item>
<a-form-item label="生成成片数量" required>
<a-input-number
v-model:value="mixForm.produceCount"
:min="1"
:max="10"
style="width: 100%"
/>
</a-form-item>
</a-form>
</a-modal>
</template>
@@ -87,10 +57,6 @@ const props = defineProps({
groupList: {
type: Array,
default: () => []
},
allAudioFiles: {
type: Array,
default: () => []
}
})
@@ -99,13 +65,10 @@ const emit = defineEmits(['update:open', 'confirm', 'cancel'])
// 数据
const modalVisible = ref(false)
const videoGroupId = ref(null)
const selectedBgMusic = ref(null)
const videoGroupFiles = ref([])
const mixForm = reactive({
title: '',
text: '',
produceCount: 1
title: ''
})
// 获取分组名称
@@ -120,7 +83,6 @@ watch(() => props.open, (newVal) => {
modalVisible.value = newVal
if (newVal) {
resetForm()
// 组件打开时,可以在这里加载音频文件,但最好由父组件传入
}
})
@@ -159,10 +121,7 @@ const handleVideoGroupChange = async (groupId) => {
// 重置表单
const resetForm = () => {
mixForm.title = ''
mixForm.text = ''
mixForm.produceCount = 1
videoGroupId.value = null
selectedBgMusic.value = null
videoGroupFiles.value = []
}
@@ -174,24 +133,15 @@ defineExpose({
// 处理确认
const handleConfirm = async () => {
const title = mixForm.title.trim()
const text = mixForm.text.trim()
if (!videoGroupId.value) {
message.warning('请选择视频分组')
return
}
if (!selectedBgMusic.value) {
message.warning('请选择背景音乐')
return
}
if (!title) {
message.warning('请输入视频标题')
return
}
if (!text) {
message.warning('请输入文案内容')
return
}
// 如果当前没有视频文件,重新加载一次
if (videoGroupFiles.value.length === 0) {
@@ -205,30 +155,19 @@ const handleConfirm = async () => {
return
}
// 提取视频URL和音频URL
// 提取视频URL
const videoUrls = videoGroupFiles.value
.map(file => file?.fileUrl || file?.previewUrl)
.filter(Boolean)
const bgMusicUrls = [selectedBgMusic.value?.fileUrl || selectedBgMusic.value?.previewUrl].filter(Boolean)
if (videoUrls.length === 0) {
message.warning('视频分组中没有有效的视频文件')
return
}
if (bgMusicUrls.length === 0) {
message.warning('所选背景音乐无效')
return
}
const produceCount = Math.max(1, Math.min(10, Number(mixForm.produceCount) || 1))
emit('confirm', {
title,
text,
videoUrls,
bgMusicUrls,
produceCount
videoUrls
})
}