ReviewSidebar 审阅侧栏

通用布局能力：RenderReviewSidebar 实例统一支持 width、height、min/max、margin 和槽位对齐；构造器是否接收这些字段以参数表为准。详见组件通用布局属性。

RenderReviewSidebar 是右侧审阅、批注、修订记录和诊断提示列表。它根据每个 item 的 anchorX、anchorY 绘制连接线，把文档、编辑器或主内容区域中的位置连接到侧栏卡片。

它只负责审阅卡片的布局、滚动、激活、展开、编辑输入和操作按钮。审阅数据、权限、保存、定位主内容和变更合并应由业务页面或编辑器控制器维护。

API 总览

import {  RenderReviewSidebar,  type ReviewSidebarAction,  type ReviewSidebarItem,  type ReviewSidebarItemType,} from 'ds-ui'

最小装配顺序是：业务根据主内容位置生成 ReviewSidebarItem[]，创建 RenderReviewSidebar({ width, items })，在主内容布局变化后重新计算 anchorX/anchorY 并调用 setItems(items)。

何时使用

• 文档编辑器、病历编辑器、审批页面需要在右侧展示批注和修订。
• 诊断或审计页面需要把主内容中的位置和侧边卡片连接起来。
• 卡片数量中等，且每条记录有标题、正文、可选详情和操作按钮。

不要使用：

• 普通业务列表。使用 ListView、ItemsControl 或 Table。
• 通用通知消息。使用 Notification。
• 树形审阅结构。使用 TreeView 后自行组合详情区。

最小示例

const reviewItems: ReviewSidebarItem[] = [  {    key: 'comment-1',    type: 'comment',    title: '张医生',    meta: '10:24',    content: '建议补充过敏史。',    anchorX: -18,    anchorY: 96,    color: '#2563eb',    active: true,    onActivate: () => {      state.activeReviewKey = 'comment-1'    },  },] const reviewSidebar = new RenderReviewSidebar({  width: 280,  items: reviewItems,})

构造参数

构造后可以继续调用 setItems() 更新数据。不要直接修改 items 数组后期待自动刷新。

ReviewSidebarItem

anchorX/anchorY 应在主内容完成布局后计算。如果主内容滚动或缩放，业务需要重新计算 item 并调用 setItems()，否则连接线会指向旧位置。

ReviewSidebarAction

操作按钮由侧栏内部创建为 RenderButton。权限和可见性由业务决定：没有权限时传 disabled: true 或不要放入对应 action。

属性和方法

没有公开的 scrollTo() 方法。需要定位某条记录时，把对应 item 标记为 active: true 后调用 setItems()，组件会在下一次布局中尝试滚入可见区域。

交互行为

侧栏自身不声明键盘焦点模型。键盘输入来自内部 TextArea 和按钮；卡片激活通常由主内容选中、点击卡片或业务命令驱动。

布局和滚动

• item 会按 anchorY 排序，不按传入数组顺序绘制。
• 侧栏宽度优先使用 width，但不能突破父约束。
• 父高度无界时，默认使用内容高度；父高度有界时形成内部滚动视口。
• 每张卡片的自然 y 会尽量靠近 anchorY - 8，同时避免和上一张卡片重叠。
• 连接线从 anchorX/anchorY 连到卡片左边缘；connector: false 可以关闭单项连接线。
• active 项变化后会尝试滚入视口，已有 active 项更新内容时会尽量保持它在视口中的相对位置。

生命周期

setItems() 会释放不再存在的卡片子树。侧栏 dispose() 时会随父类释放所有内部卡片、TextArea、按钮和滚动容器。

业务应避免在 ReviewSidebarItem 回调中持有已经关闭页面的大对象。页面、tab、窗口释放时，如果 item 的回调引用了页面状态，应一起释放侧栏或清空 items。

性能边界

ReviewSidebar 不做虚拟化。它适合几十到低百级审阅项；更多数据应先在业务层分页、分组或按可视区域筛选。

每次 setItems() 会计算签名、排序并同步卡片结构。高频滚动主内容时不要每一帧全量创建新对象；应只在 anchor 或审阅状态变化时更新，或在编辑器控制器里做节流。

业务组合示例

function buildReviewItems(records: Array<{ id: string; y: number; text: string }>): ReviewSidebarItem[] {  return records.map(record => ({    key: record.id,    type: 'comment',    title: '审阅意见',    content: record.text,    anchorX: -16,    anchorY: record.y,    color: '#2563eb',    actions: [      {        key: 'resolve',        label: '已处理',        variant: 'primary',        onClick: () => {          state.resolvedReviewId = record.id        },      },    ],  }))} const sidebar = new RenderReviewSidebar({ width: 280 })sidebar.setItems(buildReviewItems(data))

相关文档

• TextArea
• Button
• ScrollViewer
• ObjectInspector
• 病历编辑器接入