作品简介

“百事通” AI 助手宛如您身边无所不知的智能伙伴。它依托前沿的人工智能技术，拥有超强的知识储备，无论是天文地理的奥秘，还是历史长河中的风云变幻，它都能娓娓道来。在日常生活里，当您纠结于旅游出行的目的地选择，“百事通” 迅速呈上各地的风土人情、热门景点攻略，帮您规划完美行程；面对美食抉择，它精准推荐各类特色餐厅，详细介绍招牌菜品，满足您的味蕾。学习工作中，复杂的学术难题、专业资料整理，它也不在话下，一步步引导解题思路，高效梳理知识要点。它交互便捷，通过简洁的文本输入，就能即时响应，用通俗易懂的语言答疑解惑。“百事通” AI 助手致力于打破知识壁垒，随时随地为您开启智慧之门，让信息获取轻松自如，成为您生活、学习、工作全方位的得力助手。

技术架构

采用了全后端分离的架构，前端使用Vue.js，腾讯云的AI服务处理自然语言理解与生成。

实现过程

1、创建窗体

2、准备数据集

3、添加按钮与功能

4、页面显示优化

开发环境，开发流程

开发环境

系统：win11

开发工具：VSCode

开发环境为：node-v23.6.0-win-x64

开发流程

1、解压并配置node.js环境变量

2、使用npm i命令初始化项目

3、使用npm run dev启动项目

关键技术解析

对背景及文字的样式进行修改并添加了发送功能

腾讯云AI代码助手在上述过程中的助力

1、理解代码

整体结构和功能概述 

这段代码主要是一个基于 Vue.js 框架的聊天应用界面和交互逻辑的实现。它包括了样式设置、数据处理、API 调用以及用户交互等多个方面，旨在构建一个能够与用户进行交互并显示对话内容的聊天界面。

样式部分

• 背景和文字颜色设置：通过 CSS 样式设置了背景颜色为淡黄色（#FFF9C4），对话文字颜色为粉色（#FF69B4）并加粗，同时对特定角色（助手和用户）的文字样式进行了统一设置，确保了界面的视觉一致性和可读性。
• 布局样式：使用 Flexbox 布局（display: flex）来实现对话容器（.t-chat-container）的左右居中（justify-content: center和align-items: center），并设置了容器的高度（height: 100vh）和宽度（width: 100%），以适应不同屏幕尺寸，提供良好的用户体验。

数据处理和交互逻辑 

• 数据记录和处理：定义了bufferArr用于存储数据块，dataText用于记录完整的数据。processText函数用于处理接收到的数据，根据数据的不同状态（如完成、流式传输等）进行相应的处理，更新event对象的类型和数据，并控制界面的显示状态（如加载中、完成等）。
• API 调用：通过fetch函数向指定的 API（/v1/chat/completions）发送 POST 请求，携带apiKey、消息列表、模型等信息，实现与聊天模型的交互。在请求过程中，处理了成功、失败和完成等不同情况，确保数据的正确获取和界面的及时更新。
• 用户输入处理：inputEnter函数用于处理用户输入，将用户输入的内容添加到聊天列表（chatList）中，并调用handleData函数进行数据处理和 API 调用，实现与聊天模型的交互和响应显示。

其他功能 

• 滚动到顶部和底部：backBottom函数用于实现聊天列表的滚动到顶部或底部，提供了流畅的滚动效果（behavior:'smooth'），方便用户查看历史对话。
• 清除历史记录：clearConfirm函数用于清空聊天列表，提供了清除历史记录的功能，方便用户开始新的对话。

使用说明

1、解压并配置node.js环境变量

2、使用npm i命令初始化项目

3、使用npm run dev启动项目

4、访问http://localhost:3005/进行提问即可

效果展示

1、修改了背景及文字的颜色和样式 

2、添加了发送功能

演示视频地址： 腾讯云AI代码助手编程挑战赛-百事通