腾讯云AI代码助手编程挑战赛-解忧助手

扶梦4112025-01-10 10:44

作品简介

何以解忧,唯有杜康。而随着Ai的发展,解忧不再只有杜康还有Ai,使用的是腾讯云AI代码助手来生成的所有代码，使用方便，快捷，高效。

技术架构

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

实现过程

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

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

3、使用npm run dev启动项目

开发环境、开发流程

系统：win11系统

工具：VSCode开发工具

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

插件：安装腾讯云AI代码助手插件

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

对话的背景改为樱花粉

<style>标签中添加相应的CSS样式。

复制代码

<t-chat
    ref="chatRef"
    layout="single"
    class="chat-container" <!-- 添加这一行来应用样式 -->
    style="height: 600px"
    :clear-history="chatList.length > 0 && !isStreamLoad"
    @clear="clearConfirm"
  >
    <!-- ... 其他代码不变 ... -->
  </t-chat>

<style lang="less" scoped>
/* 添加以下样式来设置对话框背景为樱花粉 */
.chat-container {
  background-color: #fff0f6; /* 樱花粉背景色 */
  border: 1px solid #e6a29a; /* 可选：设置边框颜色以匹配背景 */
}

/* 可选：如果您还想改变聊天消息框的背景色 */
.t-chat-item {
  background-color: #fff0f6;
}

/* 可选：改变输入框背景色 */
.t-chat-input {
  background-color: #fff0f6;
}

运行效果

视频地址

解忧助手_哔哩哔哩_bilibili

总结

愿每一个忧愁都会有答案