示例：病历模板浏览

import { MedicalRecordEditorController, RenderMedicalRecordEditor } from 'ds-ui'

病历模板浏览用于从模板库中选择文档模板，并加载到病历编辑器中做预览或测试。它通常包含模板树、搜索、模板详情和病历编辑器。

页面结构

DockPanel
  left:
    SearchBox
    TreeView
  fill:
    Toolbar
    MedicalRecordEditor

左侧树负责模板定位，右侧编辑器负责加载和预览文档。模板数据来源可以是服务端接口、本地 JSON 或 SQL 解析产物。

数据模型

模板树节点建议包含：

• 模板 id。
• 模板名称。
• 分类 id。
• 是否叶子节点。
• 文档 JSON 路径或加载参数。
• 模板状态。

不要只保存显示文本。加载、搜索、审计和错误排查都需要结构化字段。

编辑器接入

const controller = new MedicalRecordEditorController()const editor = new RenderMedicalRecordEditor({ controller })

模板选中后，由页面服务加载对应 JSON，再交给控制器更新文档。加载第二份模板时，页面可以决定是否滚动到顶部、是否清空选区、是否保留缩放。

完整编辑器 API、工具栏状态、数据元、批注留痕和打印说明见 病历编辑器接入。

交互建议

• 树节点 hover、选中和滚动行为应稳定。
• 文本过长时显示省略号和完整 tooltip。
• 点击模板时显示加载状态。
• 加载失败时在右侧展示错误，不要让编辑器停留在半更新状态。
• 大模板加载后优先保证滚动和 hover 流畅。

手工测试清单

病历模板浏览通常用于全面手工测试，应覆盖：

• 普通段落和段落符号。
• 表格、跨行跨列、列宽拖拽。
• 日期、下拉、多选、树形数据元。
• 条码和二维码。
• 批注、留痕、审计轨迹。
• 中文输入、粘贴、删除和撤销。
• 大文档滚动、输入和关闭释放。

性能注意

模板树可以很多，左侧树应支持稳定滚动和省略号。编辑器应只绘制可视页，并避免每次 hover 都触发文档全量刷新。

大文档模板测试时，建议同时观察 Runtime Diagnostics 和 大文档编辑 中的排查步骤。