腾讯云AI代码助手编程挑战赛-创业者青桔

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

作品简介

《创业者青桔》是一款基于 Vue 3 和 TDesign Vue Next 组件库构建的智能聊天对话系统。项目以简洁、直观的聊天界面为核心，不仅支持消息发送、对话分享和下载，还提供了删除、引用、反馈等丰富功能。通过对消息内容支持 LaTeX 语法解析，项目在提供高质量对话交互的同时，也适用于需要公式渲染的场景。整体风格清新简约，既适合创业者的沟通需求，也方便用户管理对话记录。

技术架构

本项目主要采用以下前沿技术和工具：

**Vue 3 + **<script setup>：项目基于 Vue 3 构建，并采用 <script setup> 语法，使组件书写更简洁、响应式更强。
TDesign Vue Next：利用腾讯提供的 TDesign 组件库，实现了对话框、按钮、输入框、弹窗等多种 UI 组件，保证了界面的一致性和良好的用户体验。
KaTeX：用于解析和渲染 LaTeX 语法，使得消息中包含数学公式的内容能够友好显示。
File-Saver、html2pdf.js、html2canvas：用于实现对话记录的导出与下载，支持 PDF、Word、Markdown 等多种格式。
流式 API 请求：通过 Fetch API 的流式请求与 SSE 技术，实现了聊天机器人实时响应，保证用户体验的流畅性。

实现过程

1. 页面布局与主题切换

项目采用响应式布局，通过一个外层容器（app-wrapper）控制整体背景色，并结合 dark-theme 类来实现主题切换。页面顶部使用了页头区域（app-header），内部放置了多个按钮，包括切换主题、下载对话、分享对话和发消息按钮。
按钮采用了 TDesign 的 <t-button> 组件，并在按钮内部嵌入图标组件，例如 ViewListIcon、DownloadIcon、Share1Icon 和 ChatIcon，使用户一目了然了解各按钮功能。

2. 聊天主界面设计

主界面通过 <t-chat> 组件构建，消息以气泡形式展示。用户与系统的对话采用不同样式区分：

消息气泡样式：用户消息使用 msg-user 类，系统消息使用 msg-assistant 类，通过不同的背景色和气泡位置区分对话角色。
动态内容渲染：结合 KaTeX 实现文本中数学公式的解析与渲染，使文档展示更专业。

3. 消息发送与反馈机制

点击“发消息”按钮后，不再采用底部固定的输入框，而是弹出一个大号的 textarea（使用 <t-textarea> 组件）对话框。用户在弹窗中输入消息，通过点击“发送”按钮提交消息。消息提交后：

消息被添加到聊天列表中，展现用户消息和后续的智能回复。
同时使用流式接口（SSE）获取回复数据，逐步将答案显示在对话窗口中。
代码中还实现了删除、引用和点赞/点踩等反馈操作，增强了用户对单条消息的交互体验。

4. 分享与下载功能

下载对话：项目支持将对话记录以 PDF、Word、Markdown 等格式保存，利用 html2pdf.js、File-Saver 等库实现。
分享对话：点击分享按钮后弹出选择框，用户可选择微信、脉脉、领英等平台分享对话。

5. 异常处理与流式响应

在处理 SSE 数据流时，代码通过 AbortController 实现了请求中断，确保长时间响应过程中用户可随时取消操作。同时，利用 TextDecoder 对数据进行解析，并支持多行消息拼接，以保证消息数据完整性。

功能介绍

以下是项目核心功能的详细介绍：

主题切换
顶部按钮切换主题，通过改变外层容器的 CSS 类控制背景色，满足用户在不同场景下的视觉需求。
发消息
与常规输入框不同，本项目将消息输入移至弹窗中，使用大号 textarea 提供更宽敞、便于输入的编辑区域，使得长消息或需要排版的文本内容能够更好呈现。
对话展示
消息以气泡样式展示，支持 LaTeX 渲染，用户与系统的对话清晰分隔。每条消息下方附有分享、删除、引用及反馈按钮，方便用户管理和互动。
消息分享
用户可选择不同社交平台（微信、脉脉、领英等）分享整个对话内容，实现一键传播。
对话下载
通过调用下载接口，支持用户将聊天记录导出为 PDF、Word、Markdown 等格式文件，便于存档或分享给他人。
消息反馈
针对每条对话，用户可点赞或点踩，通过反馈组件记录用户对消息满意度，同时可以点击引用按钮快速将消息内容导入输入框继续讨论。

腾讯云 AI 代码助力

在项目开发全流程中，腾讯云 AI 助力发挥了极大作用。具体包括：

代码生成与解释
借助 AI 自动生成部分标准组件和辅助函数，并对复杂逻辑代码块进行解释，有效提高了团队协作效率。

Bug 修复与代码审阅
在调试过程中，AI 工具协助定位并修复了一些隐蔽 Bug。同时，通过代码审阅功能确保提交代码风格一致、质量过硬。

自动生成文档
项目 README 文档由 AI 辅助生成，内容涵盖项目介绍、技术架构、部署指南等，便于项目后期维护和推广。

效果展示

1. 聊天界面

展示了用户与系统之间的对话，通过不同背景色和气泡位置区分角色，并支持公式渲染。

2. 主题切换

点击“切换主题”按钮后，背景色即时更改，适应不同使用场景。

3. 消息弹窗

点击“发消息”按钮后，弹窗中出现大号 textarea 输入框，用户可以输入长文本内容，编辑体验更佳。

4. 下载与分享

聊天记录能够以 PDF 格式下载，同时支持多平台分享，便于用户保存和传播。

总结

《创业者青桔》项目展示了如何利用 Vue 3、TDesign Vue Next 等前沿技术构建高效、友好的智能聊天系统。项目中通过弹窗输入的方式优化了消息编辑体验，同时配合丰富的分享、下载、反馈功能，为用户提供了全面的交互体验。未来，我们将继续迭代优化，探索更多便捷高效的应用场景，为广大创业者和用户提供更优质的服务。