1b7fc8f4-013d-445f-9baa-aaf6be1c6a6e

作品簡(jiǎn)介

《創(chuàng)業(yè)者青桔》是一款基于 Vue 3 和 TDesign Vue Next 組件庫(kù)構(gòu)建的智能聊天對(duì)話系統(tǒng)。項(xiàng)目以簡(jiǎn)潔、直觀的聊天界面為核心，不僅支持消息發(fā)送、對(duì)話分享和下載，還提供了刪除、引用、反饋等豐富功能。通過(guò)對(duì)消息內(nèi)容支持 LaTeX 語(yǔ)法解析，項(xiàng)目在提供高質(zhì)量對(duì)話交互的同時(shí)，也適用于需要公式渲染的場(chǎng)景。整體風(fēng)格清新簡(jiǎn)約，既適合創(chuàng)業(yè)者的溝通需求，也方便用戶管理對(duì)話記錄。

---

技術(shù)架構(gòu)

本項(xiàng)目主要采用以下前沿技術(shù)和工具：

• **Vue 3 + **<script setup>：項(xiàng)目基于 Vue 3 構(gòu)建，并采用 <script setup> 語(yǔ)法，使組件書(shū)寫(xiě)更簡(jiǎn)潔、響應(yīng)式更強(qiáng)。
• TDesign Vue Next：利用騰訊提供的 TDesign 組件庫(kù)，實(shí)現(xiàn)了對(duì)話框、按鈕、輸入框、彈窗等多種 UI 組件，保證了界面的一致性和良好的用戶體驗(yàn)。
• KaTeX：用于解析和渲染 LaTeX 語(yǔ)法，使得消息中包含數(shù)學(xué)公式的內(nèi)容能夠友好顯示。
• File-Saver、html2pdf.js、html2canvas：用于實(shí)現(xiàn)對(duì)話記錄的導(dǎo)出與下載，支持 PDF、Word、Markdown 等多種格式。
• 流式 API 請(qǐng)求：通過(guò) Fetch API 的流式請(qǐng)求與 SSE 技術(shù)，實(shí)現(xiàn)了聊天機(jī)器人實(shí)時(shí)響應(yīng)，保證用戶體驗(yàn)的流暢性。

---

實(shí)現(xiàn)過(guò)程

1. 頁(yè)面布局與主題切換

項(xiàng)目采用響應(yīng)式布局，通過(guò)一個(gè)外層容器（app-wrapper）控制整體背景色，并結(jié)合 dark-theme 類(lèi)來(lái)實(shí)現(xiàn)主題切換。頁(yè)面頂部使用了頁(yè)頭區(qū)域（app-header），內(nèi)部放置了多個(gè)按鈕，包括切換主題、下載對(duì)話、分享對(duì)話和發(fā)消息按鈕。
按鈕采用了 TDesign 的 <t-button> 組件，并在按鈕內(nèi)部嵌入圖標(biāo)組件，例如 ViewListIcon、DownloadIcon、Share1Icon 和 ChatIcon，使用戶一目了然了解各按鈕功能。

2. 聊天主界面設(shè)計(jì)

主界面通過(guò) <t-chat> 組件構(gòu)建，消息以氣泡形式展示。用戶與系統(tǒng)的對(duì)話采用不同樣式區(qū)分：

• 消息氣泡樣式：用戶消息使用 msg-user 類(lèi)，系統(tǒng)消息使用 msg-assistant 類(lèi)，通過(guò)不同的背景色和氣泡位置區(qū)分對(duì)話角色。
• 動(dòng)態(tài)內(nèi)容渲染：結(jié)合 KaTeX 實(shí)現(xiàn)文本中數(shù)學(xué)公式的解析與渲染，使文檔展示更專(zhuān)業(yè)。

3. 消息發(fā)送與反饋機(jī)制

點(diǎn)擊“發(fā)消息”按鈕后，不再采用底部固定的輸入框，而是彈出一個(gè)大號(hào)的 textarea（使用 <t-textarea> 組件）對(duì)話框。用戶在彈窗中輸入消息，通過(guò)點(diǎn)擊“發(fā)送”按鈕提交消息。消息提交后：

• 消息被添加到聊天列表中，展現(xiàn)用戶消息和后續(xù)的智能回復(fù)。
• 同時(shí)使用流式接口（SSE）獲取回復(fù)數(shù)據(jù)，逐步將答案顯示在對(duì)話窗口中。
• 代碼中還實(shí)現(xiàn)了刪除、引用和點(diǎn)贊/點(diǎn)踩等反饋操作，增強(qiáng)了用戶對(duì)單條消息的交互體驗(yàn)。

4. 分享與下載功能

• 下載對(duì)話：項(xiàng)目支持將對(duì)話記錄以 PDF、Word、Markdown 等格式保存，利用 html2pdf.js、File-Saver 等庫(kù)實(shí)現(xiàn)。
• 分享對(duì)話：點(diǎn)擊分享按鈕后彈出選擇框，用戶可選擇微信、脈脈、領(lǐng)英等平臺(tái)分享對(duì)話。

5. 異常處理與流式響應(yīng)

在處理 SSE 數(shù)據(jù)流時(shí)，代碼通過(guò) AbortController 實(shí)現(xiàn)了請(qǐng)求中斷，確保長(zhǎng)時(shí)間響應(yīng)過(guò)程中用戶可隨時(shí)取消操作。同時(shí)，利用 TextDecoder 對(duì)數(shù)據(jù)進(jìn)行解析，并支持多行消息拼接，以保證消息數(shù)據(jù)完整性。

---

功能介紹

以下是項(xiàng)目核心功能的詳細(xì)介紹：

• 主題切換
  頂部按鈕切換主題，通過(guò)改變外層容器的 CSS 類(lèi)控制背景色，滿足用戶在不同場(chǎng)景下的視覺(jué)需求。
• 發(fā)消息
  與常規(guī)輸入框不同，本項(xiàng)目將消息輸入移至彈窗中，使用大號(hào) textarea 提供更寬敞、便于輸入的編輯區(qū)域，使得長(zhǎng)消息或需要排版的文本內(nèi)容能夠更好呈現(xiàn)。
• 對(duì)話展示
  消息以氣泡樣式展示，支持 LaTeX 渲染，用戶與系統(tǒng)的對(duì)話清晰分隔。每條消息下方附有分享、刪除、引用及反饋按鈕，方便用戶管理和互動(dòng)。
• 消息分享
  用戶可選擇不同社交平臺(tái)（微信、脈脈、領(lǐng)英等）分享整個(gè)對(duì)話內(nèi)容，實(shí)現(xiàn)一鍵傳播。
• 對(duì)話下載
  通過(guò)調(diào)用下載接口，支持用戶將聊天記錄導(dǎo)出為 PDF、Word、Markdown 等格式文件，便于存檔或分享給他人。
• 消息反饋
  針對(duì)每條對(duì)話，用戶可點(diǎn)贊或點(diǎn)踩，通過(guò)反饋組件記錄用戶對(duì)消息滿意度，同時(shí)可以點(diǎn)擊引用按鈕快速將消息內(nèi)容導(dǎo)入輸入框繼續(xù)討論。

---

騰訊云 AI 代碼助力

在項(xiàng)目開(kāi)發(fā)全流程中，騰訊云 AI 助力發(fā)揮了極大作用。具體包括：

• 代碼生成與解釋
  借助 AI 自動(dòng)生成部分標(biāo)準(zhǔn)組件和輔助函數(shù)，并對(duì)復(fù)雜邏輯代碼塊進(jìn)行解釋?zhuān)行岣吡藞F(tuán)隊(duì)協(xié)作效率。

• Bug 修復(fù)與代碼審閱
  在調(diào)試過(guò)程中，AI 工具協(xié)助定位并修復(fù)了一些隱蔽 Bug。同時(shí)，通過(guò)代碼審閱功能確保提交代碼風(fēng)格一致、質(zhì)量過(guò)硬。

• 自動(dòng)生成文檔
  項(xiàng)目 README 文檔由 AI 輔助生成，內(nèi)容涵蓋項(xiàng)目介紹、技術(shù)架構(gòu)、部署指南等，便于項(xiàng)目后期維護(hù)和推廣。
  

---

效果展示

1. 聊天界面

展示了用戶與系統(tǒng)之間的對(duì)話，通過(guò)不同背景色和氣泡位置區(qū)分角色，并支持公式渲染。

2. 主題切換

點(diǎn)擊“切換主題”按鈕后，背景色即時(shí)更改，適應(yīng)不同使用場(chǎng)景。

3. 消息彈窗

點(diǎn)擊“發(fā)消息”按鈕后，彈窗中出現(xiàn)大號(hào) textarea 輸入框，用戶可以輸入長(zhǎng)文本內(nèi)容，編輯體驗(yàn)更佳。

4. 下載與分享

聊天記錄能夠以 PDF 格式下載，同時(shí)支持多平臺(tái)分享，便于用戶保存和傳播。

---

總結(jié)

《創(chuàng)業(yè)者青桔》項(xiàng)目展示了如何利用 Vue 3、TDesign Vue Next 等前沿技術(shù)構(gòu)建高效、友好的智能聊天系統(tǒng)。項(xiàng)目中通過(guò)彈窗輸入的方式優(yōu)化了消息編輯體驗(yàn)，同時(shí)配合豐富的分享、下載、反饋功能，為用戶提供了全面的交互體驗(yàn)。未來(lái)，我們將繼續(xù)迭代優(yōu)化，探索更多便捷高效的應(yīng)用場(chǎng)景，為廣大創(chuàng)業(yè)者和用戶提供更優(yōu)質(zhì)的服務(wù)。