Skip to content

SplitLayoutPage 分栏布局页

xy-split-layout-page 用来统一表达后台常见的双栏工作区,通过 layout="master-detail" | "aside-main" 收口主从布局和侧栏布局。

分栏工作区场景

这个场景分别展示“左列表右详情”和“左筛选右主内容”两种常见工作区,本质上它们都属于同一类分栏页面。

收口后的理解方式

当前文档不再把“主从页”和“侧栏页”当成两套并列能力,而是统一理解为后台分栏工作区。

左侧可以是列表、树、筛选或导航,右侧则承接详情、表格、图表或编辑区域。

分栏工作区:主从详情

左侧记录集合,右侧详情查看。

工单列表
这里承接记录集合、树或待办池。
当前工单详情
负责人
小叶
状态
处理中

分栏工作区:筛选与主内容

左侧筛选或导航,右侧主结果区。

筛选条件

规则列表

这里承接主表格、看板或图表。

当前定位

  • 统一表达后台双栏页面,不再把主从页和分栏页拆成两套主公开入口。
  • 适合成员台账、规则中心、审批工作台、配置中心等需要长期保留上下文的场景。
  • 在收口后的公开体系里,它承担页面骨架,而具体内容继续通过 ListPageDetailPageFilterPanel 等能力嵌入。

当前边界

  • 路由同步、拖拽持久化和复杂工作台状态仍建议由业务页自行编排。

SplitLayoutPage API

SplitLayoutPage Attributes

属性说明类型默认值
title页面标题string''
description页面说明string''
layout分栏布局模式'master-detail' | 'aside-main''aside-main'
primary-size主栏宽度stringmaster-detail'38%'aside-main'28%'

SplitLayoutPage Slots

插槽说明
master主从模式左侧区
detail主从模式右侧区
aside侧栏模式左侧区
main侧栏模式右侧区