11

src/components/workflow/Step02AudioVideo.vue

@@ -16,6 +16,10 @@ const {
   generatedAudioSrc,
   currentAudioId,
   audioHistory,
+  videoGenerating,
+  generatedVideoSrc,
+  currentVideoId,
+  videoHistory,
 } = storeToRefs(workflow);
 
 const feedback = ref({ severity: "", message: "" });
@@ -31,6 +35,19 @@ const audioHistoryOptions = computed(() =>
 
 const hasAudio = computed(() => Boolean(generatedAudioSrc.value));
 
+const videoHistoryOptions = computed(() =>
+  videoHistory.value.map((item) => ({
+    label: item.name,
+    value: item.id,
+  })),
+);
+
+const hasVideo = computed(() => Boolean(generatedVideoSrc.value));
+
+const canGenerateVideo = computed(
+  () => hasAudio.value && Boolean(workflow.avatarSelect) && !videoGenerating.value,
+);
+
 function onOpenVoiceManage() {
   workflow.openVoiceManageDialog();
 }
@@ -51,9 +68,26 @@ async function onPickAudioHistory() {
   await workflow.pickAudioHistory(currentAudioId.value);
 }
 
+async function onGenerateTalkingVideo() {
+  feedback.value = { severity: "", message: "" };
+  const result = await workflow.generateTalkingVideo();
+  if (result?.message) {
+    feedback.value = {
+      severity: result.ok ? "success" : "error",
+      message: result.message,
+    };
+  }
+}
+
+async function onPickVideoHistory() {
+  if (!currentVideoId.value) return;
+  await workflow.pickVideoHistory(currentVideoId.value);
+}
+
 onMounted(() => {
   avatarStore.refresh();
   workflow.refreshAudioHistory();
+  workflow.refreshVideoHistory();
 });
 </script>
 
@@ -154,11 +188,38 @@ onMounted(() => {
         class="w-full"
       />
     </div>
-    <Button label="生成口播视频" size="small" class="mt-3 w-full" :disabled="!hasAudio" />
+    <Button
+      label="生成口播视频"
+      size="small"
+      class="mt-3 w-full"
+      :loading="videoGenerating"
+      :disabled="!canGenerateVideo"
+      @click="onGenerateTalkingVideo"
+    />
     <div class="mt-2">
-      <div class="mb-1 text-xs text-slate-200">视频预览</div>
+      <div class="mb-2 flex items-center justify-between gap-2">
+        <span class="text-xs text-slate-400">视频预览</span>
+        <Select
+          v-if="videoHistoryOptions.length"
+          v-model="currentVideoId"
+          :options="videoHistoryOptions"
+          option-label="label"
+          option-value="value"
+          placeholder="历史记录"
+          size="small"
+          class="w-48"
+          @update:model-value="onPickVideoHistory"
+        />
+        <Select v-else placeholder="暂无历史记录" disabled size="small" class="w-40" />
+      </div>
       <div class="dashboard-aspect-video">
-        <span class="text-xs text-gray-400">暂无视频预览</span>
+        <video
+          v-if="hasVideo"
+          :src="generatedVideoSrc"
+          controls
+          class="h-full w-full rounded object-contain"
+        />
+        <span v-else class="text-xs text-gray-400">暂无视频预览</span>
       </div>
     </div>