[新增]完善AI写作

src/views/ai/writer/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="h-[calc(100vh-var(--top-tool-height)-var(--app-footer-height)-40px)] -m-5 flex">
-    <Left class="h-full" @submit="submit" />
-    <Right class="flex-grow" :msg="msg" />
+    <Left :is-writing="isWriting" class="h-full" @submit="submit" @example="example" />
+    <Right
+      :is-writing="isWriting"
+      @stop-stream="stopStream"
+      ref="rightRef"
+      class="flex-grow"
+      v-model:msg="msgResult"
+    />
   </div>
 </template>
 
@@ -9,12 +15,47 @@
   import Left from './components/Left.vue'
   import Right from './components/Right.vue'
   import { writeStream } from '@/api/ai/writer'
+  import dataJson from './data.json'
 
-  const msg = ref('')
+  const message = useMessage()
+  const msgResult = ref('')
+  const isWriting = ref(false)
 
-  const submit = async (params) => {
-    const res = await writeStream(params)
+  const abortController = ref<AbortController>()
+
+  const stopStream = () => {
+    abortController.value?.abort()
+    isWriting.value = false
+  }
+
+  const rightRef = ref<InstanceType<typeof Right>>()
+
+  // 点击示例触发
+  const example = (type: keyof typeof dataJson) => {
+    msgResult.value = dataJson[type].data
+  }
+
+  const submit = async (data) => {
+    abortController.value = new AbortController()
+    msgResult.value = ''
+    isWriting.value = true
+    writeStream({
+      data,
+      onMessage: async (res) => {
+        const { code, data, msg } = JSON.parse(res.data)
+        if (code !== 0) {
+          message.alert(`写作异常! ${msg}`)
+          stopStream()
+          return
+        }
+        msgResult.value = msgResult.value + data
+        nextTick(() => {
+          rightRef.value?.scrollToBottom()
+        })
+      },
+      ctrl: abortController.value,
+      onClose: stopStream,
+      onError: stopStream
+    })
   }
 </script>
-
-<style scoped></style>