主从页

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

主从页用于在一个页面内同时展示主记录列表和从属明细。常见形态包括左树右表、上主表下明细、左列表右详情。

推荐布局

左树右表：

DockPanel
  left: TreeView
  fill: StackPanel
    Toolbar
    DataGrid

上主下从：

StackPanel vertical
  MasterGrid flex=1
  DetailGrid flex=1

最小示例

const root = new RenderDockPanel() const tree = new RenderTreeView({  roots,  selectionMode: 'single',}) const detail = new RenderStackPanel({  orientation: 'vertical',  spacing: 8,  crossAxisAlignment: 'stretch',}) detail.addChild(new RenderText('明细列表'))detail.addChild(new RenderDataGrid({  columns: [    { key: 'name', title: '名称', type: 'text' },    { key: 'value', title: '值', type: 'text' },  ],  rows: data,}), 1) tree.width = 260root.addChild(tree, { dock: 'left' })root.setFill(detail)

主从同步

主区域选中变化后，从区域应该：

• 取消未完成的旧请求。
• 清空或保留旧明细，取决于业务体验。
• 加载新明细。
• 刷新页面命令状态。
• 必要时重置从表当前选中行。

编辑与保存

主从页保存要明确边界：

• 主记录保存。
• 明细行保存。
• 主从一起提交。
• 明细局部提交。

不要让主表和从表各自偷偷提交，除非业务明确允许。

使用建议

• 主从区域都可能有大量数据时，两个区域都应使用各自的虚拟化组件。
• 主记录切换时要处理脏数据确认。
• 左树右表适合分类维护；上主下从适合单据和明细维护。
• 从区域上下文应跟随当前主记录变化，不能继续引用旧主记录。