11

src/components/workflow/HitScriptDialog.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { storeToRefs } from "pinia";
+import { useWorkflowStore } from "../../stores/workflow.js";
+
+const emit = defineEmits(["feedback"]);
+
+const workflow = useWorkflowStore();
+const {
+  hitScriptModalVisible,
+  hitScriptOptions,
+  hitScriptSelectedIndex,
+} = storeToRefs(workflow);
+
+function onClose() {
+  workflow.closeHitScriptModal();
+}
+
+function onSelect(index) {
+  hitScriptSelectedIndex.value = index;
+}
+
+function onApply() {
+  emit("feedback", workflow.applyHitScriptOption(hitScriptSelectedIndex.value));
+}
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="hitScriptModalVisible"
+    modal
+    header="选择爆款文案方案"
+    :style="{ width: '640px' }"
+    :draggable="false"
+    class="hit-script-dialog"
+    @hide="onClose"
+  >
+    <p class="mb-3 text-sm text-slate-400">
+      已生成 {{ hitScriptOptions.length }} 个方案，点击选择后填入「视频文案编辑」
+    </p>
+    <ul class="max-h-[60vh] space-y-2 overflow-y-auto">
+      <li
+        v-for="(option, index) in hitScriptOptions"
+        :key="index"
+        class="cursor-pointer rounded-lg border px-3 py-3 text-sm transition-colors"
+        :class="
+          hitScriptSelectedIndex === index
+            ? 'border-blue-400/50 bg-blue-500/15 text-slate-100 ring-1 ring-blue-400/40'
+            : 'border-white/10 bg-white/5 text-slate-300 hover:bg-white/10'
+        "
+        @click="onSelect(index)"
+      >
+        <div class="mb-1 text-xs font-medium text-blue-400">方案 {{ index + 1 }}</div>
+        <p class="whitespace-pre-wrap leading-relaxed">{{ option }}</p>
+      </li>
+    </ul>
+    <template #footer>
+      <Button label="取消" severity="secondary" @click="onClose" />
+      <Button
+        label="使用此文案"
+        :disabled="!hitScriptOptions.length"
+        @click="onApply"
+      />
+    </template>
+  </Dialog>
+</template>

src/components/workflow/Step01IpLearning.vue

@@ -4,6 +4,7 @@ import { storeToRefs } from "pinia";
 import { useWorkflowStore } from "../../stores/workflow.js";
 import AddIpBrainDialog from "./AddIpBrainDialog.vue";
 import VideoLinkDialog from "./VideoLinkDialog.vue";
+import HitScriptDialog from "./HitScriptDialog.vue";
 
 const workflow = useWorkflowStore();
 const {
@@ -23,9 +24,11 @@ const {
   ipTopicsRewriting,
   ipTopicRewriteProgress,
   rewrittenTopics,
+  hitScriptGenerating,
 } = storeToRefs(workflow);
 
 const topicFeedback = ref({ severity: "", message: "" });
+const hitScriptFeedback = ref({ severity: "", message: "" });
 
 function onSelectBenchmark(id) {
   topicFeedback.value = { severity: "", message: "" };
@@ -63,6 +66,25 @@ function onOpenIpBrain() {
 function topicCount(benchmark) {
   return benchmark?.topicLibrary?.length ?? 0;
 }
+
+async function onGenerateHitScript() {
+  hitScriptFeedback.value = { severity: "", message: "" };
+  const result = await workflow.generateHitScript();
+  if (result.message) {
+    hitScriptFeedback.value = {
+      severity: result.ok ? "success" : "error",
+      message: result.message,
+    };
+  }
+}
+
+function onHitScriptFeedback(result) {
+  if (!result?.message) return;
+  hitScriptFeedback.value = {
+    severity: result.ok ? "success" : "error",
+    message: result.message,
+  };
+}
 </script>
 
 <template>
@@ -297,8 +319,25 @@ function topicCount(benchmark) {
             />
           </div>
         </div>
-        <Button label="生成爆款文案" size="small" class="w-full" />
+        <Button
+          label="生成爆款文案"
+          size="small"
+          class="w-full"
+          :loading="hitScriptGenerating"
+          :disabled="hitScriptGenerating"
+          @click="onGenerateHitScript"
+        />
+        <p
+          v-if="hitScriptFeedback.message"
+          class="text-sm"
+          :class="
+            hitScriptFeedback.severity === 'error' ? 'text-red-400' : 'text-emerald-400'
+          "
+        >
+          {{ hitScriptFeedback.message }}
+        </p>
       </div>
+      <HitScriptDialog @feedback="onHitScriptFeedback" />
     </template>
   </DashboardCard>
 </template>