主从布局

Master-Detail Layout

布局模式也叫：列表-详情布局、左列表右详情、List-Detail、Master Detail

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

详细解释

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

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

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

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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