适用场景
- 前端要接模型的流式返回，一个字一个字往外渲染
- 用户点「停止生成」时能立刻中断并保留已输出内容
- 长回答渲染卡顿，需要按帧批量更新而不是逐字更新
PROMPT
前端要接 DeepSeek 的流式接口做对话界面，直接在 onmessage 里改 DOM 会卡，需要一个能扛住长回答的渲染组件时用这个。 【需求】 用原生 JavaScript（不引入框架）写一个流式打字机组件： 1. 构造函数接收容器元素和配置，暴露 append(chunk)、finish()、abort() 三个方法； 2. 内部用 requestAnimationFrame 批量刷新，每帧最多渲染 30 个字符，避免长回答时主线程被占满； 3. 遇到 Markdown 的块级标记（```、## 、- 列表）时先缓存到段落结束再整段插入，避免半截代码块闪烁； 4. abort() 后保留已渲染内容、停止定时器、把光标移除； 5. 附带一个 fetch + ReadableStream 的接入示例，含 AbortController 用法。 【输出要求】 1. 单个 HTML 文件，内联 CSS 与 JS，双击就能看到效果； 2. 样式简洁：等宽字体、浅灰背景、末尾一个闪烁光标； 3. 代码分成「渲染器 / 流读取 / 示例」三块，用注释隔开； 4. 最后列出 2 个常见坑：多字节字符被 chunk 截断、conclusion 标记出现在半个标签里，并说明代码里怎么处理的。 ---