實現流程：
1.用戶點擊按鈕從右側展開抽屜（drawer），打開模擬對話框

2.用戶輸入問題，點擊提問按鈕，創建一個SSE實例請求后端數據，由于SSE是單向流，所以每提一個問題都需要先把之前的實例關掉，然后重新new個SSE實例

3.在SSE的onmessage里監聽返回的數據流，并拼接到前端對話框中（后端返回的是markdown語法的流，這里全局引入了marked.js插件用來解析markdown），我這里接的是deepseek，所以返回的數據流里會有推理信息，不過后端可以控制不返回推理信息，只返回結果

4.可以加一些細節處理，提升用戶體驗，比如：保存最近十條的聊天記錄（這里存到了localStorage里），允許用戶主動停止正在生成的內容，每次讀取流時頁面需要滾動到底部等

完整代碼如下：

<template><div><!-- AI對話框 --><a-drawerclass="ai-drawer"v-model:visible="status.showAI"placement="right"width="40%"><!-- 聊天面板 --><div ref="chatPanelRef" class="chat-panel"><div v-for="(item, index) in status.chatRecords" :key="index" class="chat-item"><template v-if="item.user==='AI'"><div class="avatar"><img src="@/assets/img/home/AI.svg" alt="智能問答" /></div><div class="cont"><div class="answer-cont"><template v-if="item.content.length <= 0"><loading-outlined /></template><template v-else><div v-html="item.content" class="answer-box"></div></template></div></div></template><template v-else><div class="cont user"><div class="answer-cont"><div v-html="item.content" class=""></div></div></div><div class="avatar user"><img src="@/assets/default-user.png" alt="用戶" /></div></template></div></div><!-- 輸入面板 --><div class="inp-panel"><div class="flex"><a-textareav-model:value="status.question":auto-size="{ minRows: 4, maxRows: 4 }"placeholder="說點什么吧...（shift + enter換行）"/><a-button type="primary" size="large" :title="status.isAsking ? '停止回答' : '提問'" class="search-btn" @click="onQuestion"><template #icon><send-outlined v-if="!status.isAsking" /><pause-circle-outlined v-else/></template></a-button></div></div></a-drawer><!-- AI按鈕 --><div id="aiBtn" class="ai-btn" @click.stop="handleShowPanel"><a-tooltip placement="top"overlayClassName="ai-popper"><img src="@/assets/img/home/AI.svg" alt="智能問答" /><template #title><p>我是AI小助手<br />可以試試問我一些問題</p></template></a-tooltip></div></div>
</template><script lang='ts' setup>
import { reactive, toRefs, onBeforeMount, onMounted, onBeforeUnmount, ref, watch, nextTick, computed } from "vue";
import { message } from "ant-design-vue";
import { companyAskUrl } from "@/http/company/index"const chatPanelRef = ref()
const isInThinkTag = ref()
let eventSource = null
const status = reactive({isMove: false, // 按鈕拖曳時不打開drawershowAI: false,isAsking: false, // 是否正在回答問題question: "", // 問題 請給我查詢中國對外翻譯有限公司的基本情況chatRecords: [], // 聊天記錄user: "", // 當前用戶_es: null,
})onMounted(() => {init()
})const init = () => {// 獲取當前用戶let userInfo = localStorage.getItem("userInfo")if (userInfo) {status.user = JSON.parse(userInfo) ? JSON.parse(userInfo).username : ""}// 默認讀取localStorage里的聊天歷史let chatRecords = localStorage.getItem("chatRecords")if (chatRecords) {status.chatRecords = JSON.parse(chatRecords)} else {status.chatRecords.push({user: "AI",content: "Hi，我是AI小助手，請問需要什么幫助嗎？"})}initAI()
}onBeforeUnmount(() => {closeConnect()
})// 初始化AI按鈕，允許拖曳
const initAI = () => {let aiBtn = document.getElementById("aiBtn");let offsetX = 0;let offsetY = 0;aiBtn.addEventListener("mousedown", function(event) {event.preventDefault(); // 阻止默認的拖動操作status.isMove = false;offsetX = event.clientX - aiBtn.offsetLeft; // 計算鼠標相對于按鈕左邊界的位移量offsetY = event.clientY - aiBtn.offsetTop;document.addEventListener("mousemove", mousemoveHandler); // 注冊鼠標移動事件處理函數document.addEventListener("mouseup", mouseupHandler); // 注冊鼠標松開事件處理函數function mousemoveHandler(e) {aiBtn.style.left = e.clientX - offsetX + "px"; // 更新按鈕的位置aiBtn.style.top = e.clientY - offsetY + "px";status.isMove = true;}function mouseupHandler() {document.removeEventListener("mousemove", mousemoveHandler); // 移除鼠標移動事件處理函數document.removeEventListener("mouseup", mouseupHandler); // 移除鼠標松開事件處理函數}});
}// 提問
const onQuestion = () => {if (status.question === "") {message.warning('提問內容不能為空', 0.7);return}// 停止之前的聊天if (status.isAsking) {status.chatRecords[status.chatRecords.length - 1].content += "已停止"closeConnect()return}// 開始新的聊天nextTick(() => {status.chatRecords.push({user: status.user,content: JSON.parse(JSON.stringify(status.question))})status.chatRecords.push({user: "AI",content: ""})// 滾動到底部srollToFt()onAnswer()})
}// 生成回答
const onAnswer = () => {initChat()
}// 初始化chat
const initChat = () => {status.isAsking = truetry {status._es = new EventSource(`${companyAskUrl}?prompt=${status.question}`)status._es.onmessage = (event) => {let data = event.dataif (data !== '') {const parsed = parseSSEData(event.data)if (parsed.content && parsed.content !== "") {console.log(parsed.content)if (!status.chatRecords[status.chatRecords.length - 1]._content) {status.chatRecords[status.chatRecords.length - 1]._content = ""}status.chatRecords[status.chatRecords.length - 1]._content += parsed.contentstatus.chatRecords[status.chatRecords.length - 1].content = (window as any).marked?.parse(status.chatRecords[status.chatRecords.length - 1]._content)// 保存聊天歷史saveChatHistory()}// 滾動到底部srollToFt()}}status._es.onerror = (error) => {console.error('SSE Error:', error)closeConnect()}} catch (error) {console.error('Connection Error:', error)closeConnect()}
}// 解析sse返回的數據
const parseSSEData = (data) => {try {const parsed = JSON.parse(data)// 檢查是否直接返回了 reasoning_contentconst directReasoning = parsed.choices?.[0]?.delta?.reasoning_contentif (directReasoning) {return {id: parsed.id,created: parsed.created,model: parsed.model,reasoning_content: directReasoning,content: parsed.choices?.[0]?.delta?.content || ''}}const content = parsed.choices?.[0]?.delta?.content || ''// 處理 think 標簽包裹的情況if (content.includes('<think>')) {isInThinkTag.value = trueconst startIndex = content.indexOf('<think>') + '<think>'.lengthreturn {id: parsed.id,created: parsed.created,model: parsed.model,reasoning_content: content.substring(startIndex),content: content.substring(0, content.indexOf('<think>'))}}if (content.includes('</think>')) {isInThinkTag.value = falseconst endIndex = content.indexOf('</think>')return {id: parsed.id,created: parsed.created,model: parsed.model,reasoning_content: content.substring(0, endIndex),content: content.substring(endIndex + '</think>'.length)}}// 根據狀態決定內容歸屬return {id: parsed.id,created: parsed.created,model: parsed.model,reasoning_content: isInThinkTag.value ? content : '',content: isInThinkTag.value ? '' : content}} catch (e) {console.error('解析JSON失敗:', e)return null}
}// 保存聊天記錄
const saveChatHistory = () => {let chatRecords = []// 只保留前200條記錄if (status.chatRecords.length > 20) {chatRecords = status.chatRecords.slice(1)} else {chatRecords = status.chatRecords}localStorage.setItem("chatRecords", JSON.stringify(chatRecords))
}// 關閉鏈接
const closeConnect = () => {status.isAsking = falseif (status._es) {status._es.close()status._es = null}saveChatHistory()
}// 展示彈窗
const handleShowPanel = () => {if (status.isMove) {return}status.showAI = true// 滾動到底部srollToFt()
}// 關閉彈框
const handleClose = () => {status.showAI = false;
}// 滾動到底部
const srollToFt = () => {nextTick(() => {chatPanelRef.value.scrollTo({top: chatPanelRef.value.scrollHeight})})
}// 跳轉頁面
const toPage = (item, citem) => {
}
</script><style lang="scss" scoped>
.ai-btn {position: fixed;right: 30px;bottom: 100px;cursor: pointer;z-index: 1000;display: flex;align-items: center;justify-content: center;width: 52px;height: 52px;background-color: #fff;border-radius: 50%;box-shadow: 0 0 4px #333;
}
.a-drawer__wrapper {::v-deep {.a-drawer__header {margin-bottom: 0;padding-top: 0;}.a-drawer__body {padding: 0 10px 20px;box-sizing: border-box;}}
}
.ai-drawer {.a-drawer__header {margin-bottom: 10px;}.chat-panel {position: relative;margin-bottom: 20px;width: 100%;height: calc(100% - 130px);overflow-y: auto;.chat-item {position: relative;display: flex;width: 100%;margin-bottom: 14px;.avatar {position: relative;display: flex;align-items: center;justify-content: center;margin: 0 10px;width: 40px;height: 40px;border-radius: 50%;box-sizing: border-box;box-shadow: 0px 1px 4px rgba(136, 136, 136, 1);overflow: hidden;&.user {img {max-width: 100%;max-height: 100%;}}img {max-width: 60%;max-height: 60%;}}.cont {position: relative;width: calc(100% - 120px);&.user {margin-left: 60px;.answer-cont {background-color: #ddd;}}.answer-cont {position: relative;width: 100%;min-height: 40px;line-height: 2;padding: 10px;box-sizing: border-box;border-radius: 10px;background-color: #ddd;}.answer-box {position: relative;line-height: 2;::v-deep {h1, h2, h3, h4 {line-height: 2;}p {line-height: 2;}span {// display: inline-block;line-height: 1.5;// color: rgb(5, 7, 59);}}}}}}.inp-panel {position: relative;width: 100%;height: auto;padding: 10px;box-sizing: border-box;border-radius: 10px;background-color: #eee;.flex {display: flex;// align-items: center;justify-content: center;.search-btn {margin-left: 4px;height: 50px;}}}@keyframes load {0%,80%,100% {box-shadow: 0 0 0 0 #dcdfe6;height: 3.6em;}40% {box-shadow: 0 -1em 0 0 #dcdfe6;height: 4.6em;}}@keyframes blink {from {opacity: 0;}to {opacity: 1;}}.aic-wapper {display: flex;.pointer::after {content: "|";animation: blink 1s infinite;color: #333;}}
}
</style>
<style lang="scss">
.ai-popper {// box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px,//   rgb(14 18 22 / 20%) 0px 10px 20px -15px;.ant-tooltip-arrow-content {background-color: #fff;}.ant-tooltip-inner {color: #333;background-color: #fff;}
}.content-ul {position: relative;list-style: circle;padding: 0 10px !important;box-sizing: border-box;li {list-style: circle;cursor: pointer;}
}
</style>

最終效果如下：