跳到主要内容

布局模式 · 整体框架

主从布局

Master-Detail Layout

也叫:列表-详情布局、左列表右详情、List-Detail、Master Detail

左侧是一列数据记录,右侧显示当前选中那条记录的详情,点击左边任意一项右边随之切换,不跳转页面。

点「标注」看每个部分叫什么,点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

用主从布局(Master-Detail):左栏宽 320px,显示会话列表,每项包含头像、名称、最后一条消息摘要和时间,当前选中项背景高亮;右栏显示选中会话的完整内容,顶部是标题和操作按钮。点击左侧只切换右侧内容,不跳转页面;两栏各自独立滚动,没有选中项时右栏显示空状态提示。

发给

01判断

你的内容是这样吗?

对照两列,确认主从布局是不是你要找的。

符合这些情况,用主从布局

  • 同一类记录需要一条接一条连续查看或处理时
  • 每条记录详情内容较多,但列表里只需两三个关键字段就能区分时
  • 用户查看详情时需要保留列表位置、随时切换到别的记录时
  • 桌面端使用,屏幕宽度能同时放下列表和详情时

是这些情况,换成别的

  • 左栏只是固定的功能菜单而不是数据记录时

  • 需要把多条记录的字段放在一起逐列比较时

    改用数据表
  • 每条记录内容很少、在列表里就能看全时

  • 主要在手机上使用、屏幕放不下两栏时

拿不准?上传页面截图,页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用,其实会给用户添麻烦。

  1. 01

    点击左侧条目跳转到新页面,丢掉了「原地切换」的意义

    下面的线框画的就是这种情况,红色虚线框是出问题的地方。

  2. 02

    左侧列表没有选中态,看不出右边显示的是哪一条

  3. 03

    整个页面一起滚动,翻到详情底部时左侧列表也跟着看不见了

反例示意,对应第 01 条

03识别

怎么认出它

先看整体结构,再对照几个一眼能认出的特征。

结构

左侧是固定宽度、可滚动的记录列表,右侧是占满剩余空间的详情区;两栏并排,各自独立滚动。

组成部分点一下,在上面的线框里标出来

识别特征

  1. 1左边一列结构相同的条目,其中一条被高亮
  2. 2右边是大块详情内容,标题和左侧高亮项对应
  3. 3左右两栏之间有竖向分割线,各自有独立的滚动区域

04解释

详细解释

主从布局把屏幕分成两块:左边(主)是一列同类记录,比如邮件、聊天会话、客服工单;右边(从)是选中那一条的完整内容。点击左边某一项,右边立即换成它的详情,左边列表保持不动,并高亮当前选中项。

典型例子是邮箱客户端、微信电脑版、工单系统。这种设计让用户可以连续处理很多条记录:看完一封点下一封,不用反复「进入详情、返回列表」。

它和「侧边导航+内容」长得很像,区别在左栏装的是什么:主从布局的左栏是一条条数据记录,会随数据增减;侧边导航的左栏是固定的功能菜单。手机上放不下两栏,一般改成先显示列表,点击后进入单独的详情页。

开发者信息
术语 ID
layout-master-detail
DOM 选择器
没有专门的选择器,靠下面的关键词、组件名和结构识别。
类名关键词

类名、id、data-testid 拆成单词后连续匹配,例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • master-detail
  • list-detail
  • inbox
  • two-pane
  • mail-layout
  • list-and-detail
组件名

React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。

  • MasterDetail
  • ListDetail
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v2 · 更新于 2026/09/30