布局模式 · 整体框架
主从布局
Master-Detail Layout
也叫:列表-详情布局、左列表右详情、List-Detail、Master Detail
左侧是一列数据记录,右侧显示当前选中那条记录的详情,点击左边任意一项右边随之切换,不跳转页面。
点「标注」看每个部分叫什么,点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发用主从布局(Master-Detail):左栏宽 320px,显示会话列表,每项包含头像、名称、最后一条消息摘要和时间,当前选中项背景高亮;右栏显示选中会话的完整内容,顶部是标题和操作按钮。点击左侧只切换右侧内容,不跳转页面;两栏各自独立滚动,没有选中项时右栏显示空状态提示。
发给
01判断
你的内容是这样吗?
对照两列,确认主从布局是不是你要找的。
02避坑
常见坏用法
看起来能用,其实会给用户添麻烦。
- 01
点击左侧条目跳转到新页面,丢掉了「原地切换」的意义
下面的线框画的就是这种情况,红色虚线框是出问题的地方。右边的线框画的就是这种情况,红色虚线框是出问题的地方。
- 02
左侧列表没有选中态,看不出右边显示的是哪一条
- 03
整个页面一起滚动,翻到详情底部时左侧列表也跟着看不见了
03识别
怎么认出它
先看整体结构,再对照几个一眼能认出的特征。
结构
左侧是固定宽度、可滚动的记录列表,右侧是占满剩余空间的详情区;两栏并排,各自独立滚动。
组成部分点一下,在上面的线框里标出来
识别特征
- 1左边一列结构相同的条目,其中一条被高亮
- 2右边是大块详情内容,标题和左侧高亮项对应
- 3左右两栏之间有竖向分割线,各自有独立的滚动区域
04解释
详细解释
主从布局把屏幕分成两块:左边(主)是一列同类记录,比如邮件、聊天会话、客服工单;右边(从)是选中那一条的完整内容。点击左边某一项,右边立即换成它的详情,左边列表保持不动,并高亮当前选中项。
典型例子是邮箱客户端、微信电脑版、工单系统。这种设计让用户可以连续处理很多条记录:看完一封点下一封,不用反复「进入详情、返回列表」。
它和「侧边导航+内容」长得很像,区别在左栏装的是什么:主从布局的左栏是一条条数据记录,会随数据增减;侧边导航的左栏是固定的功能菜单。手机上放不下两栏,一般改成先显示列表,点击后进入单独的详情页。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-master-detail- DOM 选择器
- 没有专门的选择器,靠下面的关键词、组件名和结构识别。
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配,例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
master-detaillist-detailinboxtwo-panemail-layoutlist-and-detail
- 组件名
React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。
MasterDetailListDetail
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30