使用场景
MinerU Viewer 围绕一个稳定的句柄 blockId 建模，因此能天然承载"文档块级溯源 + 业务注入"两类需求。下面按典型场景说明。
场景 A：纯预览 / 溯源（showMarkdown 默认开）
最常见的用法 —— 把 MinerU 产物直接放给用户看，且能左右互点溯源。
- 左栏显示
full.md，右栏显示 PDF / 图片源文件 - 点击任意一段 Markdown → 右侧对应源块自动滚动到视口中心并高亮
- 点击右侧某个源块 → 左侧对应 Markdown 块高亮
- 缩略图支持钉住（pin） 与 QQ 式自动收纳（鼠标离开边缘 250ms 后收起，靠近 500ms 后展开）
适合：文档站、知识库、内部资料查阅、研究辅助工具。
场景 B：问答 / 引用溯源（业务高亮注入）
你的产品已经有一个问答系统，回答里引用了文档的某些片段。把引用落回 blockId：
ts
viewer.addHighlight({
id: "qa-123",
blockIds: ["b-3", "b-7"],
color: "#ffd666",
label: "AI 回答引用",
meta: { answerId: 123 }
});- 高亮组以首个 block 所在页为锚点，自动滚动并居中
- 多个引用组可并存（
addHighlight）；点击某个组时以该组为锚点 - 通过
bus.on("highlight-activate", ...)监听用户点击了哪组高亮
适合：RAG / 文档问答产品、智能客服、审核辅助。
场景 C：审查 / 标注（多组高亮 + 编辑事件）
规则引擎或人工审核在文档上命中了一些块；需要把命中结果可视化，并允许用户进一步编辑原文。
- 用
setHighlights(groups)批量注入一组规则命中（互斥替换式） - 监听
edit事件拿到blockIds / page / oldText / newText，把编辑结果回写业务侧 - 用
clearHighlights()清空 - 用
focusBlock(blockId)命令式地把视角定位到某个块（例如从外部列表点击跳转）
适合：合规审查、合同比对、内容质检、标注平台。
场景 D：隐藏 MD 栏，只做"源文件 + 高亮"画布
某些场景（如客服坐席侧、纯渲染层）不需要展示 Markdown，只要一个带高亮的源文件预览：
vue
<MineruViewer :zip="url" :show-markdown="false" :highlights="groups" />组件仍保留 blockId 坐标映射与 canvas 命中能力，只是左侧 Markdown 面板不渲染。
形态选择
| 你的工程形态 | 推荐包 | 引入方式 |
|---|---|---|
| Vue 3 工程，走打包器 | @mineru-viewer/vue | import ESM / require UMD |
| React 工程，走打包器 | @mineru-viewer/react | import ESM / require UMD |
无构建（直接 <script>） | @mineru-viewer/vue-no-esm / @mineru-viewer/react-no-esm | 全局 MV / MVReact + 引入 vendor |
两个形态由同一份 ESM 源码构建而来：Vite lib 模式同时产出
es与umd，逻辑零分叉。