上线效果
功能清单
- AI问答，文字输出跟随打字机效果
- 格式化回答内容（markdown格式）
- 停止回答，复制回答内容
- 回答时自动向下滚动
- 全屏切换
- 历史问答查看
主要技术
- vue @2.7.1
- markdown-it @14.1.0
- @microsoft/fetch-event-source @2.0.1
- highlight.js @10.7.1
实现思路
- 后台接口支持流式返回也就是 ：Accept: 'text/event-stream' 请求头
- 前端通过fetch-event-source请求数据，也可以通过axios，但是要进行转换
- 前端通过markdwon-it结合highlight.js显示返回的数据，并高亮和格式化代码
核心代码
1.markdown使用
2.接口请求
通过 onmessage方法，返回接口数据，拼接后渲染。
避坑
- 调试模式下要关闭compress，否则不会返回流，会一次性返回，无法实现打字机效果，参考如下图：
- markdown输出后，代码无法靠左对齐，无法像下图这样：
注意添加样式：
总结
至此一个AI问答打字机效果的功能就实现了，核心在于：流式输出，markdown 格式化
如果你觉得看完有价值，可以免费点个赞👍，也可以评论区一起学习交流。