当前位置：首页 > news >正文

腾讯云AI代码助手编程挑战赛-如意

news 2025/9/18 4:09:59

作品简介

《如意》是一款结合腾讯云AI代码助手生成的、集智能问答、知识学习和生活助手功能于一体的应用，在通过先进的AI技术提升用户的工作效率、学习效果和生活质量。无论是解答疑难问题、提供专业建议，还是帮助规划日程、提升技能，它都能迅速响应并提供个性化服务。让繁忙的现代生活更加高效和便捷，成为每个人贴心的“数字伙伴”。

技术架构

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

实现过程

开发环境、开发流程
系统：windows11

开发工具：VSCode

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

开发流程：

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

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

3、使用npm run dev启动项目

4.项目初始化与启动流程

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

完整的助力于开发的整个生命周期，包括初始页面到数据展示以及操作，最后进行打包exe文件。

项目核心代码源

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>如意</title><style>/* 重置一些默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 设置body的字体和背景 */body {font-family: 'Arial', sans-serif;background-color: pink;color: red;display: flex;justify-content: center;align-items: center;height: 100vh;}/* 美化app容器 */#app {background-color: pink;padding: 20px;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);width: 80%;max-width: 600px;text-align: center;}/* 添加一些过渡效果 */.fade-in {animation: fadeIn 2s ease-in-out;}@keyframes fadeIn {from {opacity: 0;transform: translateY(-20px);}to {opacity: 1;transform: translateY(0);}}</style>
</head>
<body><div id="app" class="fade-in"><!-- 这里是您的应用内容 --></div><script type="module" src="/src/main.js"></script>
</body>
</html>

核心功能实现

聊天交互界面
前端实现了一个交互式聊天界面。主要组件包括：

聊天组件：<t-chat> 用于构建聊天界面，支持实时信息展示。

聊天条目组件：<t-chat-item> 渲染每一条消息，支持头像、名称、角色、时间等信息的展示。

操作组件：支持对每条消息进行点赞、点踩等操作。

聊天数据处理与操作

数据流处理：采用流式加载（SSE），确保AI实时响应并返回消息。

消息输入与发送：用户在输入框中输入内容，触发 inputEnter 方法发送消息。

消息操作：用户可以对聊天记录进行点赞、点踩，触发相应的操作处理。

弹窗提示与反馈

Toast 提示框：用于显示操作反馈，点赞后会提示弹框，谢谢你的点赞，点踩后会提示，我会加油的。

自动关闭提示框：提示框在显示3秒后自动关闭，避免过多干扰

关键技术解析

使用SSE技术和fetchSSE 函数进行消息的实时推送更新，实现聊天数据实时更新而不需要刷新页面。

腾讯云AI服务的集成帮助

1.集成腾讯云AI的自然语言理解与生成能力，快速回答提问者的问题。

2.AI根据用户输入生成回应，能够模拟自然的对话流程。

3.实现了窗体背景和侧旁弹窗的功能

4.根据输入的内容，回答框自动拉长效果

5.当点击点赞和点踩按钮时会由提示弹窗

使用说明：

1、环境配置：确保已安装Node.js并配置正确的环境变量。
2、项目初始化：运行 npm install 命令，安装所有依赖。
3、启动项目：通过 npm run dev 启动项目，访问本地地址 http://localhost:3005 开始使用。
4、使用AI助手：在聊天框中输入问题或信息，AI助手将即时响应并给出建议。

效果展示

演示视频地址：live.csdn.net/v/442737