作品简介
孙宁宁AI小能手是一款强大而智能的写作助手，专为内容创作者和文字工作者量身打造。无论您是写博客、文章、文案还是其他类型的文字内容，AI小能手都能助您一臂之力。AI小能手是一个值得信赖的写作助手，能够帮助您快速生成高质量的文字内容，提高工作效率和创作水平。无论是初学者还是资深创作者，都能从AI小能手中受益匪浅。快来试试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组件，使用了`<script setup>`语法，这是Vue 3中推荐的组合式API的使用方式。下面是对代码的解释：
`<template>`部分
这部分是组件的模板，定义了组件的HTML结构。
有一个`<div>`元素用于显示点赞成功的提示信息，该信息只有在`showSuccessMessage`变量为`true`时才会显示。
使用了`t-chat`组件来展示聊天内容，通过`:clear-history`属性控制是否清除历史消息，`@clear`事件监听清除历史的操作。
使用`v-for`指令遍历`chatList`数组，为每条消息创建一个`t-chat-item`组件。
在每个`t-chat-item`内部，根据`isStreamLoad`的值决定是否渲染`t-chat-action`组件，这个组件用于处理用户对消息的操作（如点赞或点踩）。
在`t-chat`组件的底部，有一个`t-chat-input`组件，用于输入新的消息。
`<script setup>`部分
这部分包含了组件的逻辑代码。
定义了一系列的`ref`来响应式地跟踪不同的状态，如`loading`、`isStreamLoad`、`isGood`、`isBad`等。
`backBottom`函数用于滚动到聊天窗口的底部。
`chatList`是一个响应式数组，包含了聊天消息的数据。
`clearConfirm`函数用于清空聊天记录。
`onStop`函数用于停止消息流并重置加载状态。
`showSuccessMessage`是一个响应式变量，用于控制点赞成功提示的显示。
`handleOperation`函数处理用户对聊天消息的操作，如点赞、点踩或回复。
`handleData`函数处理发送消息的逻辑，并调用`fetchSSE`函数来获取服务器的响应。
`inputEnter`函数在用户输入消息后被调用，将新消息添加到`chatList`并触发消息处理。
`fetchSSE`函数是一个异步函数，用于通过Server-Sent Events (SSE)与服务器通信，获取流式的聊天机器人响应。
`<style lang="less" scoped>`部分
这部分定义了组件的样式。
设置了`.t-chat`类的背景颜色、文本颜色、字体加粗、高度、宽度和盒模型。
设置了`.t-chat-item`类的背景颜色、文本颜色和字体加粗。
设置了`.t-chat-input`类的背景颜色、文本颜色和字体加粗。
设置了滚动条的样式。
设置了`.success-message`类的样式，用于点赞成功提示的显示效果。
整体来看，这是一个实时聊天组件，用户可以输入消息，组件会通过SSE与服务器通信获取机器人的回复，并在界面上显示出来。同时，用户可以对消息进行点赞或点踩的操作。
2、修改样式
- 1.背景颜色改为粉色
- 2.使用者的头像和AI的头像进行修改，有一定的辨识度
- 3.增加点赞成功提示窗口，更加便捷
3.腾讯云AI的帮助
-
提高开发效率 ：具有代码补全与生成、问题诊断与修复、文档编写等功能，能极大提升编程效率。
-
强大的智能化水平：能够理解开发者意图，提供精准代码建议，减少手动编写代码的工作量，让开发者更专注于业务逻辑设计与实现。
-
技术优势：利用深度学习模型，从海量历史代码库中学习模式，具备不断进化的能力；高度个性化，适应个体差异；无缝集成，易于与现有开发环境集成。
-
技术创新能力：依托深厚的人工智能研究基础，结合自然语言处理、机器学习等先进技术，在代码编写过程中提供即时帮助，生成高质量代码片段，减少编程错误，提高开发效率。
使用说明
1、解压并配置node.js环境变量
2、使用npm i命令初始化项目
3、使用npm run dev启动项目
4、访问http://localhost:3005/进行提问即可。
最后程序成功会在cmd显示
