11

src/components/workflow/Step02AudioVideo.vue

@@ -1,17 +1,53 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useWorkflowStore } from "../../stores/workflow.js";
 import VoiceManageDialog from "./VoiceManageDialog.vue";
 
 const workflow = useWorkflowStore();
-const { voiceEmotion, speechRate, voiceLanguage, avatarSelect } = storeToRefs(workflow);
+const {
+  voiceEmotion,
+  speechRate,
+  voiceLanguage,
+  avatarSelect,
+  speechGenerating,
+  generatedAudioSrc,
+  currentAudioId,
+  audioHistory,
+} = storeToRefs(workflow);
+
+const feedback = ref({ severity: "", message: "" });
 
 const voiceButtonLabel = computed(() => workflow.selectedVoiceLabel);
 
+const audioHistoryOptions = computed(() =>
+  audioHistory.value.map((item) => ({
+    label: item.label,
+    value: item.id,
+  })),
+);
+
+const hasAudio = computed(() => Boolean(generatedAudioSrc.value));
+
 function onOpenVoiceManage() {
   workflow.openVoiceManageDialog();
 }
+
+async function onGenerateSpeech() {
+  feedback.value = { severity: "", message: "" };
+  const result = await workflow.generateSpeech();
+  if (result?.message) {
+    feedback.value = {
+      severity: result.ok ? "success" : "error",
+      message: result.message,
+    };
+  }
+}
+
+function onPickAudioHistory() {
+  if (!currentAudioId.value) return;
+  workflow.pickAudioHistory(currentAudioId.value);
+}
 </script>
 
 <template>
@@ -60,14 +96,44 @@ function onOpenVoiceManage() {
           class="w-full"
         />
       </div>
-      <Button label="生成语音" size="small" class="shrink-0" />
+      <Button
+        label="生成语音"
+        size="small"
+        class="shrink-0"
+        :loading="speechGenerating"
+        :disabled="speechGenerating"
+        @click="onGenerateSpeech"
+      />
     </div>
+    <p
+      v-if="feedback.message"
+      class="mt-2 text-sm"
+      :class="feedback.severity === 'error' ? 'text-red-400' : 'text-emerald-400'"
+    >
+      {{ feedback.message }}
+    </p>
     <div class="dashboard-preview-box mt-3">
       <div class="mb-2 flex items-center justify-between gap-2">
         <span class="text-xs text-slate-400">音频预览</span>
-        <Select placeholder="暂无历史记录" disabled size="small" class="w-40" />
+        <Select
+          v-if="audioHistoryOptions.length"
+          v-model="currentAudioId"
+          :options="audioHistoryOptions"
+          option-label="label"
+          option-value="value"
+          placeholder="历史记录"
+          size="small"
+          class="w-48"
+          @update:model-value="onPickAudioHistory"
+        />
+        <Select v-else placeholder="暂无历史记录" disabled size="small" class="w-40" />
       </div>
-      <p class="py-4 text-center text-xs text-gray-500">暂无音频，请生成或选择历史记录</p>
+      <div v-if="hasAudio" class="px-1 py-2">
+        <audio :src="generatedAudioSrc" controls class="h-9 w-full" />
+      </div>
+      <p v-else class="py-4 text-center text-xs text-gray-500">
+        暂无音频，请填写文案后点击「生成语音」
+      </p>
     </div>
     <div class="mt-3">
       <div class="mb-2 text-xs text-slate-400">选择形象</div>
@@ -81,7 +147,7 @@ function onOpenVoiceManage() {
         class="w-full"
       />
     </div>
-    <Button label="生成口播视频" size="small" class="mt-3 w-full" />
+    <Button label="生成口播视频" size="small" class="mt-3 w-full" :disabled="!hasAudio" />
     <div class="mt-2">
       <div class="mb-1 text-xs text-slate-200">视频预览</div>
       <div class="dashboard-aspect-video">