腾讯云AI代码助手编程挑战赛-职场人必备对话宝典

作品简介

职场人最难的就是处理人力关系，那么本作品的目的就是对职场人在职场上关系处理上给与一定的帮助，通过简单的对话，或者给与对方的说话内容粘贴过来帮助回话即可，简单方便。

技术架构

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

实现过程

开发环境、开发流程

系统：win11

开发工具：VSCode

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

开发流程：

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

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

3、使用npm run dev启动项目

关键技术解析

增加了样式修改功能与主题声明。

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

1、理解代码

这段代码是一个Vue 3组件，它实现了一个聊天界面，允许用户与AI进行交互。以下是代码的主要部分和功能的解释： `<template>` 部分

• 使用了<t-chat>组件来创建聊天界面，并设置了一些属性和事件监听器。
• ref="chatRef"：用于在JavaScript中引用这个组件。
• layout="single"：设置聊天布局为单栏布局。
• style="height: 600px"：设置聊天界面的高度。
• :clear-history：一个计算属性，用于决定是否清除聊天历史。
• @clear="clearConfirm"：监听清除聊天历史的事件。
• 使用v-for指令遍历chatList数组，为每条消息渲染一个<t-chat-item>组件。
• :avatar, :name, :role, :datetime, :content：绑定消息的各项属性。
• @operation：监听操作事件，如点赞或点踩。
• <template #footer>部分定义了聊天界面的底部，包含一个<t-chat-input>组件，用于输入新的消息。
• :stop-disabled：根据是否正在加载流式数据来禁用停止按钮。
• @send="inputEnter"：监听发送消息的事件。
• @stop="onStop"：监听停止流式数据的事件。

`<script setup>` 部分

• 使用ref函数创建响应式变量，如loading, isStreamLoad, isGood, isBad, chatRef, 和 fetchCancel。
• chatList是一个响应式数组，包含了聊天消息的数据。
• clearConfirm函数用于清空聊天列表。
• onStop函数用于处理停止流式数据的逻辑。
• handleOperation函数用于处理用户对消息的操作，如点赞、点踩或回复。
• handleData函数用于处理发送消息后的数据流，包括发送请求和处理响应。
• inputEnter函数用于处理用户输入的消息，将其添加到聊天列表，并触发数据处理。
• fetchSSE函数用于发送流式请求到服务器，并处理返回的数据流。

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

• 这部分是样式定义，但在这个代码段中是空的，意味着没有提供具体的样式。

整体来看，这个组件实现了一个交互式的聊天界面，用户可以发送消息，并对AI的回复进行评价。它使用了Vue 3的Composition API，包括ref和setup函数，以及响应式数据和方法来管理状态和用户交互。此外，它还处理了流式数据，允许AI以流的形式回复用户，提供更实时的交互体验。

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

2、增加标识内容

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

3、增加了点赞确认提示

这里使用腾讯云AI助手直接提问，黏贴对应代码完成的。

效果如图：

使用说明

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

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

3、使用npm run dev启动项目

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

效果展示

演示视频地址：https://live.csdn.net/v/442689