常用布局模式

本页总结业务系统中最常见的页面布局组合。布局设计的目标不是把所有内容塞进一个容器，而是先分区，再在局部选择合适的布局组件。

更完整的页面级组合、上下文分层和命令组织见 常用业务场景组合。

选择原则

先用结构容器表达页面，再通过统一组件属性处理细节：

• 页面分区优先选 RenderDockPanel 或 RenderDockWorkbench。
• 主从页侧栏需要自动收起时选 RenderAdaptiveSidebarPanel。
• 线性区域优先选 RenderStackPanel，通过 spacing 和 flex 管理间距与剩余空间。
• 普通响应式表单优先选 RenderFormPanel；任意二维坐标或精确轨道再选 RenderGridPanel / RenderEntryGrid。
• 可滚动内容必须先明确滚动所有者，避免外层和内部组件重复滚动。
• 容器用原生 padding，子组件用 margin、宽高和 alignment；不要为单个属性增加包装层。
• RenderBorder 只在需要背景、边框、圆角或 accent 时使用，不要作为普通布局容器套在每个区域外面。

查询表格页

StackPanel vertical
  PageHeader
  QueryForm
  Toolbar
  DataGrid flex=1

实现要点：

• 根容器使用 RenderStackPanel。
• 表格使用 flex = 1 占满剩余高度。
• QueryForm 内部用 RenderFormPanel 自动降列和对齐字段。
• 查询条件、表格、详情和命令的完整组合见 常用业务场景组合。

左树右表

DockPanel
  left: TreeView
  fill: StackPanel
    Toolbar
    DataGrid

实现要点：

• 左侧树给固定宽度。
• 右侧内容作为 fill 区域。
• DataGrid 自己管理滚动。

主从编辑页

AdaptiveSidebarPanel
  sidebar: 完整主记录列表
  collapsedSidebar: 紧凑入口
  content: DockPanel
    bottom: ActionBar
    fill: ScrollViewer vertical
      FormPanel

侧栏切换由实际剩余宽度决定；业务只处理主记录选择、字段值变化和保存命令。

工作台页面

DockPanel
  top: MenuBar / Toolbar
  left: NavigationMenu
  fill: TabbedWorkspace

实现要点：

• 全局导航和菜单用 DockPanel 分区。
• 每个标签页内部独立组合页面布局。
• 标签页关闭时释放自身页面上下文和业务对象。
• 应用壳、tab 页面和上下文分层见 复杂工作台场景。

详情编辑页

DockPanel
  top: PageHeader
  bottom: ActionBar
  fill: ScrollViewer
    StackPanel vertical
      Section
        FormPanel

实现要点：

• 表单字段使用 RenderFormPanel({ columns: 'auto' })。
• DockPanel 让 fill 自动使用剩余高度；不在页面中手工计算 content 高度。
• 长表单的 fill 区域使用一个垂直 ScrollViewer，TextArea 等子组件不再嵌套同方向页面滚动。
• 保存、取消等按钮放在明确的操作区，不要混入表单网格。
• 分组表单、草稿、校验和提交流程见 表单编辑页场景。

文档阅读页

DockPanel
  left: TreeView + Search
  fill: MarkdownViewer

实现要点：

• 目录树、搜索框、搜索结果可以在左侧用 StackPanel 组合。
• MarkdownViewer 自己处理文档滚动、搜索命中和复制。