CodeStream 流式代码块

基础用法

逐行显现

revealedLines 由宿主推进，组件负责过渡与光标。节奏（起播 400ms、每行 240ms、结尾停 3200ms）留在 demo 层。

完整清单

不传 revealedLines 就是全量展示，此时不画光标。

高亮与主题

高亮走仓库已有的 shiki 运行时（与 TxCodeBlock 同一个懒加载单例），是纯异步增强：纯文本渲染永远是对的，颜色到了再叠上去。不传 lang 就不高亮，也不会去加载 shiki。

theme 默认 'auto'，跟着文档根的 data-theme 或 .dark 走。上游是单主题 demo，把默认写死成 light 会让暗色宿主里出现浅底深字。

组件把 shiki 的输出按行拆开，再逐行配上行号与显现动画。拆分前会核对行数：如果高亮结果的行数与源码不一致，整体回退到纯文本，而不是让行号整体错位一行。

API

Props

Events

Slots

交互契约

• revealedLines 会被夹到 [0, 总行数]，越界不会报错。
• 光标只在正在显现时出现（0 < revealedLines < 总行数），画在最后一行末尾。它是静止的：上游把闪烁光标留给流式散文，代码光标只是位置标记。
• complete 只在跨越终点时派发一次。挂载时就是完整清单不算跨越，不会派发。
• 复制按钮复用 TxCopyButton，因此带上了 document.execCommand 降级与礼貌实时区域；外观由本组件覆写成 BUI 的样子。
• 行号 line-height: 1.86 与代码 1.7 的搭配是刻意的：10.5px×1.86 与 11.5px×1.7 都落在约 19.5px，行号才与代码同基线。改任何一边都会错位。
• 高度下限按 行数 × 1.7em + 20px 预留，所以显现过程是长进已留好的空间里，而不是把页面往下推。上游写死的 137px 恰好是它那段样例六行的高度。
• 代码区是 <div> 而不是 <pre>：Vue 编译器会保留 <pre> 内的模板缩进，标记自身的缩进会被当成代码渲染出来。逐行的 white-space: pre 表达同一件事。
• 减弱动效下逐行入场动画停止，显现进度本身照常。

最佳实践

• 让宿主按数据到达节奏推进 revealedLines，不要在组件里放定时器。
• 语言不确定时宁可不传 lang：纯文本渲染永远正确，错误的语言 id 只会白跑一次高亮。
• 长代码建议配合外层滚动容器；代码区自身横向可滚，但纵向由内容决定。
• 需要与 TxStreamMarkdown 的围栏统一观感时用 TxCodeBlock；需要文件名头部、行号与逐行显现时用本组件。
• 非英文界面记得一起覆盖 copyLabel 与 copiedLabel，只改一个会中英混排。

Source

• Component source: packages/tuffex/packages/components/src/code-stream/src/TxCodeStream.vue。
• Types: packages/tuffex/packages/components/src/code-stream/src/types.ts。
• Reused: packages/tuffex/packages/components/src/button/src/copy-button.vue、packages/tuffex/packages/components/src/stream-markdown/src/shiki-runtime.ts、.../use-auto-theme.ts。
• 实测覆盖: packages/tuffex/packages/components/src/code-stream/__tests__/code-stream.test.ts（22 项）验证显现夹取与已显现行不重播、光标出现条件、complete 只派发一次、头部去留、shiki 输出按行拆分、行数不符时回退纯文本、主题透传与复制事件转发。
• 移植自 Beautiful UI（https://www.beautifului.dev），© 2026 Shane Levine，MIT。