vue实现AI问答Markdown打字机效果

上线效果

功能清单

• 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 格式化

        如果你觉得看完有价值，可以免费点个赞👍，也可以评论区一起学习交流。