解决的痛点

1. 算法或后端开发，要给领导演示或调试效果时，缺少可视化的聊天界面。
2. AI大模型自定义开发，缺少像deepseek官网或元宝官网这样美观布局的聊天回复。
3. 前端开发，被要求设计聊天界面，发现很多格式，比如代码、大小标题等markdown要美观显示，好难整。

本前端介绍

1. 极简免登录，直接基于Vue3，构建了AI聊天界面。
2. 想移植的同学，可以很简单的copy路由部分的几个文件夹，即可到自己项目。
3. 这个前端，可以直接运行，在配置文件改下后端服务IP即可。

前端产品预览

• 打开localhost, 页面直接进入聊天。
  
  2.打字机效果，一点一点吐出来，并且带有停止功能。聊天带有时间戳。
  

3. 常见的结构布局都有，比如章节层级、代码设计、加粗等效果，很适合阅读。
   
4. 聊天界面没有多余元素：“新对话”用于清除历史，开启新一轮问答。输入框可以输入大篇幅文本，连续聊天就是多轮了，代码可以控制。

总结来说，就是模拟deepseek官网聊天的效果，而不是无格式的纯文字。对于格式布局，都可以只有设置。

前端源码讲解

1. 启动方式，npm install安装依赖，安装包会跑到node_modules中。然后npm run dev运行。
2. 配置页面，如下截图，你的大模型或者自定义接口应该是个stream流式接口，这个前端项目会把请求通过fetch去不断保持获取文本。
   
3. 聊天与样式代码在views/deepSeek中，基本全齐，如果后端设置了token验证，那直接在开始就注入token验证登陆。（其他那些登陆能力都没启用，可以删。）

4. 因每个人的后端接口请求参数可能都不一样，比如历史聊天信息、一些固定参数等，这个直接在如下文件里改写，文件为views/deepSeek/modules/components/inputUnit.vue。截图中的params就是我们的请求参数。

5. 代码中可出现一些登陆相关的组件，可以忽略，这是在ruoyi项目基座上改写的。核心看views/deepSeek即可。

源码下载

资源创作不易，这个是按公司领导要求，实现是花了大半个月才写好的。下载链接（点此下载源码）
https://download.csdn.net/download/A15216110998/90969257