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

作品简介

何以解忧,唯有杜康。而随着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

总结

愿每一个忧愁都会有答案

相关推荐
Antonio9152 分钟前
【MySQL】MySQL 缓存方案
数据库·mysql·缓存
超浪的晨5 分钟前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
唐青枫12 分钟前
Linux sshfs 安全挂载远程文件系统 命令详解
linux·ssh
退役小学生呀14 分钟前
十七、K8s 可观测性:全链路追踪
linux·云原生·容器·kubernetes·k8s
努力做小白14 分钟前
Linux驱动20 --- FFMPEG视频API
linux·驱动开发·单片机·嵌入式硬件·ffmpeg·lvgl
豪斯有话说18 分钟前
Linux:进程控制
linux
chirrupy_hamal18 分钟前
如何提升 TCP 传输数据的性能?详解
linux·网络·tcp
风象南21 分钟前
用 4 张图解释 CAP 到底在纠结什么
java·分布式·后端
fengyehongWorld24 分钟前
Linux join命令快速从大文件中匹配内容
linux·运维
源远流长jerry24 分钟前
网络编程概述与UDP编程
linux·服务器·网络·网络协议·udp