作品简介
本项目基于腾讯云AI代码助手,对平台提供的AI问答应用进行了功能拓展。页面显示采用Vue框架,对话部分使用TDesign组件,模型为hunyuan。主要新增了TDesign页面主题模式改变、页面主题颜色随机切换、文件上传模拟等功能,虽未实现头像切换功能,但整体提升了应用的实用性和用户体验。
技术架构
- 前端:Vue.js,一种渐进式JavaScript框架,易学易用且性能出色,适用于构建用户界面。
- UI组件:TDesign,腾讯开源的企业级设计体系,提供统一的设计语言和视觉风格,以及开箱即用的UI组件库,支持Vue等技术栈。
- AI模型:hunyuan,腾讯的混元大模型,具备强大的语义理解、逻辑推理和编程知识掌握能力,为AI问答等功能提供底层支持。
实现过程
- 页面主题模式改变:参考TDesign官网,通过修改主题相关配置,实现了页面主题模式的改变,但因文字颜色为白色,还需同步调整字体颜色以适配不同主题。
- 页面主题颜色随机切换:编写代码逻辑,使页面主题颜色能够随机切换,为用户带来新鲜的视觉体验。
- 文件上传模拟功能:模拟读取本地文件,虽未找到合适的解析API接口,但通过模拟实现了文件上传后AI解析文件并进行提问的流程,为后续功能拓展奠定了基础。
- 头像切换功能尝试:因可能是TDesign本身不支持,未能成功完成用户自定义头像的修改。
开发环境、开发流程
- 开发环境:使用支持Vue和TDesign的开发环境,如VS Code等。
- 开发流程:
- 初始化项目:解压文件进入对应目录,运行
npm i
安装依赖,接着运行npm run dev
启动项目。 - 功能开发:根据需求依次实现各功能,过程中不断调试优化。
- 测试验证:对新增功能进行测试,确保其正常运行且与现有功能兼容。
- 初始化项目:解压文件进入对应目录,运行
关键技术解析
- Vue.js:利用其组件化架构、响应式数据绑定等特点,高效构建页面和实现功能交互。
- TDesign:借助其丰富的UI组件和统一的设计风格,快速搭建页面,提升应用的美观度和一致性。
- hunyuan模型:凭借其强大的AI能力,为问答等功能提供智能支持,使应用具备更自然、准确的交互体验。
腾讯云AI代码助手在上述过程中的助力
- 代码生成与补全:在不熟悉项目工程和语法时,可全选代码提出疑问,代码助手能给出不错的解答,还能针对选中代码段直接解答问题,提高了编码效率。
- 知识库支持:其RAG知识库虽目前内容有限,但涵盖的TDesign、Spring Boot等知识库已相当实用,回答问题准确,几乎无幻觉错误,为开发过程中的技术难题提供了有效参考。
使用说明
- 解压项目文件,进入对应目录。
- 运行
npm i
安装项目依赖。 - 执行
npm run dev
启动项目,即可在浏览器中访问应用,体验新增功能。
效果展示
- 美化UI界面:美化界面ui。
- 页面主题模式改变:页面可在不同主题模式间切换,适应不同用户的视觉偏好。
- 页面主题颜色随机切换:每次刷新页面或触发切换,主题颜色随机变化,增加趣味性。
- 文件上传模拟功能:用户可上传本地文件,应用模拟解析文件并进行提问,拓展了问答的应用场景。
1.ui优化
2.护眼模式
3.随机切换主题
4.文件模拟上传