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

作品简介

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