示例：主从页面

import {  RenderDataGrid,  RenderDockPanel,  RenderStackPanel,  RenderText,} from 'ds-ui'

主从页面适合左侧选择对象、右侧查看或编辑详情的场景，例如患者列表与患者详情、模板目录与模板内容、医嘱分类与医嘱明细。

页面结构

DockPanel
  left: list / tree / grid
  fill: detail panel

左侧负责定位对象，右侧负责展示当前对象详情。左右两边都可以有自己的工具栏，但选中状态应由页面统一管理。

最小示例

const list = new RenderDataGrid({  columns: [    { key: 'name', title: '名称', type: 'text', width: 160 },  ],  rows: data,}) const detail = new RenderStackPanel({  orientation: 'vertical',  spacing: 8,  crossAxisAlignment: 'stretch',})detail.addChild(new RenderText(currentName)) const page = new RenderDockPanel()list.width = 280page.addChild(list, { dock: 'left' })page.setFill(detail)

状态流向

推荐状态流向：

左侧选中变化
  更新页面 currentId
  加载详情或读取缓存
  更新右侧详情组件
  刷新页面命令状态

右侧编辑保存后，如果影响左侧展示字段，应同步更新左侧行数据。

主从关系

主从页面有两种常见模式：

• 主列表 + 详情面板：选中一条记录显示详情。
• 主树 + 从表格：选中一个目录显示目录下明细。

第一种更适合查看对象，第二种更适合维护分类数据。

生命周期

主从页面通常会持有更多状态，要注意释放：

• 当前详情请求。
• 页面级缓存。
• 弹窗编辑器。
• 页面级命令。
• 订阅和定时器。

页面关闭后，左侧列表和右侧详情都不应该继续持有业务对象。

交互建议

• 左侧滚动不应该影响右侧详情滚动。
• 右侧加载详情时应保留左侧选中状态。
• 当前选中行不可见时，可以提供“定位当前项”按钮。
• 如果右侧有未保存修改，左侧切换前应提示或自动保存草稿。