11

src/components/workflow/StepScriptEditor.vue

@@ -1,9 +1,23 @@
 <script setup>
+import { ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useWorkflowStore } from "../../stores/workflow.js";
 
 const workflow = useWorkflowStore();
-const { scriptContent, editLanguage, editWordCount } = storeToRefs(workflow);
+const { scriptContent, editLanguage, editWordCount, scriptGenerating } =
+  storeToRefs(workflow);
+
+const feedback = ref({ severity: "", message: "" });
+
+async function onGenerateScript() {
+  feedback.value = { severity: "", message: "" };
+  const result = await workflow.generateScript();
+  if (result.ok) {
+    feedback.value = { severity: "success", message: result.message };
+  } else {
+    feedback.value = { severity: "error", message: result.message };
+  }
+}
 </script>
 
 <template>
@@ -34,10 +48,23 @@ const { scriptContent, editLanguage, editWordCount } = storeToRefs(workflow);
           class="min-w-36 shrink-0 ml-10"
         />
       </div>
-      <div class="flex gap-2 pt-1">
-        <Button label="撰写文案" size="small" />
+      <div class="flex flex-wrap items-center gap-2 pt-1">
+        <Button
+          label="撰写文案"
+          size="small"
+          :loading="scriptGenerating"
+          :disabled="scriptGenerating"
+          @click="onGenerateScript"
+        />
         <Button label="AI法务" size="small" severity="secondary" />
       </div>
+      <p
+        v-if="feedback.message"
+        class="text-sm"
+        :class="feedback.severity === 'error' ? 'text-red-400' : 'text-emerald-400'"
+      >
+        {{ feedback.message }}
+      </p>
     </div>
   </DashboardCard>
 </template>