feat: api创建

src/views/asistant/index.vue

@@ -8,7 +8,7 @@
     </div>
     <template v-else>
       <div class="content flex-1" v-if="!isLoading">
-        <NoticeList ref="noticeListRef" :list="messageList" @send-message="handleSendMessage" />
+        <NoticeList ref="noticeListRef" :list="messageList" />
       </div>
       <div class="footer" v-if="!isLoading">
         <InputArea @send-message="handleSendMessage" />
@@ -24,12 +24,14 @@ import HeaderTitle from '@/components/HeaderTitle.vue'
 import NoticeList from './components/NoticeList.vue'
 import InputArea from './components/InputArea.vue'
 import GenerateLoading from './components/GenerateLoading.vue'
-import { ref, onMounted, onActivated } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { fetchEventSource } from '@microsoft/fetch-event-source'
+
 const router = useRouter()
 
 defineOptions({
-  name:'asistant'
+  name: 'asistant'
 })
 
 // 定义NoticeList组件引用类型
@@ -80,26 +82,38 @@ const messageList = ref<ChatMessage[]>([
   }
 ])
 
-onMounted(() => {
-  console.log('🚀 组件挂载 - onMounted 触发')
-  // handleSendMessage('123')
-})
+onMounted(() => {})
 
-onActivated(() => {
-  console.log('🔄 缓存页面激活 - onActivated 触发')
-  console.log('当前消息数量:', messageList.value.length)
+onUnmounted(() => {
+  abort.abort()
 })
 
 const handleSendMessage = (message: string): void => {
-  console.log('收到消息:', message)
-  messageList.value.push({
-    id: '1',
-    content: message,
-    userId: '1',
-    time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
-    thumb: ''
+  console.log('发送:', message)
+  handleFetchMessage()
+}
+
+const abort = new AbortController()
+const handleFetchMessage = () => {
+  fetchEventSource('/api/sse', {
+    method: 'POST',
+    openWhenHidden: true,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({}),
+    signal: abort.signal,
+    onopen: async (res) => {
+      console.log('连接建立', res)
+    },
+    onmessage: (event) => {
+      console.log('收到消息', event)
+    },
+    onerror: (error) => {
+      console.log('错误', error)
+    },
+    onclose: () => {
+      console.log('连接关闭')
+    }
   })
-  //
 }
 
 const handleContinue = () => {