腾讯云AI代码助手编程挑战赛-周报辅助与规划

作品简介

无论是在校期间还是工作期间，周报现在是大多数单位都要求按时总结和上交的东西。为了方便大家整理周报内容，这个周报辅助可以说是一个相当不错的利器，希望能给大家带来帮助。

技术架构

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

实现过程

开发环境、开发流程

系统：win11

开发工具：VSCode

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

开发流程：

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

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

3、使用npm run dev启动项目

关键技术解析

1、增加了复制，点赞，点踩弹窗

2、对话样式的修改

3、实时时间

4、背景美化

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

1、理解代码

这段代码是一个Vue 3组件，用于实现一个聊天界面。下面是对代码的解释：

`<template>` 部分

• 使用了<t-chat>组件来创建聊天界面，设置了布局为单列(layout="single")，并限制了高度为600px。
• :clear-history属性用于控制是否显示清除聊天记录的选项，当chatList不为空且不是流式加载时显示。
• @clear事件监听器用于处理清除聊天记录的操作。
• 使用v-for指令遍历chatList数组，为每条消息渲染一个<t-chat-item>组件。
• 根据消息的角色(role)，应用不同的样式类(my-message或assistant-message)。
• 在每条消息的操作区域，根据条件渲染<t-chat-action>组件，允许用户对消息进行操作（如复制、点赞、点踩或回复）。
• 弹窗部分(<div v-if="showPopup" class="popup">)用于显示操作成功的提示信息。
• <t-chat-input>组件用于输入新的消息，监听@send和@stop事件。

`<script setup>` 部分

• 使用ref来创建响应式变量，如showPopup, popupMessage, loading, isStreamLoad, isGood, isBad, chatRef等。
• handleOperation函数处理用户对消息的操作，如复制、点赞、点踩或回复。
• fetchCancel用于存储取消请求的控制器，以便在需要时取消请求。
• chatList是一个响应式数组，存储聊天消息。
• clearConfirm函数用于清空聊天记录。
• onStop函数用于处理停止流式加载的逻辑。
• handleData函数用于处理发送消息后的数据流，包括显示加载状态和处理服务器响应。
• inputEnter函数在用户输入消息后被调用，用于将新消息添加到chatList并触发数据处理。
• fetchSSE函数用于处理服务器发送事件（Server-Sent Events），实现与服务器的实时通信。

`<style lang="less" scoped>` 部分

• 定义了聊天界面的样式，包括背景图片、消息样式和弹窗样式。
• .my-message类用于用户消息的样式，.assistant-message类用于助手消息的样式。
• .popup类用于弹窗的样式。

这段代码实现了一个具有基本聊天功能和一些交互操作（如复制、点赞、点踩）的聊天界面，并且支持流式加载和实时通信。

 

有了这个不分就能对代码逻辑有了清晰的理解。

2、增加标识内容

给页面增加了显示的title，这里使用腾讯云AI代码助手完成的所有内容。 

3、增加了复制，点赞，点踩弹窗提示

效果如图：

4、实时时间的更改

这里也使用腾讯云AI代码助手完成的所有内容。

效果：

5、对话样式美化

使用说明

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

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

3、使用npm run dev启动项目

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

效果展示

演示视频地址：周报辅助与规划_哔哩哔哩_bilibili