抽屉Drawer
从右侧打开的详情，就一定要把整个列表锁住吗？
抽屉是从页面边缘打开的补充面板，常用于列表中的详情、短编辑或筛选。它可以是模态，也可以允许继续操作背景；需要按用途明确焦点、关闭方式、保存范围和未保存内容的处理。
像在桌边拉出一格资料，主列表还在。要不要暂停桌上的其他操作，要另外决定。
翻开桌侧资料夹可以边看边比较；需要签字确认时才可能暂时停下其他事。
类比到这里为止：抽屉动画不决定是否保存，也不决定是否阻止背景。网页需要明确规则，不能只按家具外形推断行为。
销售从询盘 D01 打开侧栏查看需求，关闭后回到 D01 的入口与列表位置。若支持编辑，要区分保存与关闭，不把关闭面板默认当成保存到 CRM。
先写清这只抽屉的规则
- 对象
- 当前是哪条记录，打开入口与详情 ID 一致。
- 背景
- 模态时阻止背景操作；非模态时保留清楚的返回入口。
- 关闭与保存
- 明确是否有未保存内容，不能静默丢失或假称保存。
本例选择模态阅读抽屉
下面用边缘对话面板展示虚构询盘，只读，不执行编辑与同步。焦点留在抽屉内，关闭后回原入口。这是演示的一项明确选择，不代表所有抽屉必须模态。
详情信息超出视口时在面板内滚动，标题和关闭动作可到达；不是把正文压到小字号来迁就屏幕。
继续看项目应用与交付检查
抽屉 在项目中负责什么
- 什么时候用
- 短详情或局部操作需要保持与当前列表的关联时。
- 它解决什么
- 减少列表与详情之间反复跳转，让用户记得正在处理哪个对象。
- 它不负责什么
- 手机窄屏可能需要占满大部分宽度。长表单、多层关联和需要分享的网址，应考虑完整详情页，不无限嵌套抽屉。
- 放进真实项目
- 销售在线索列表右侧打开抽屉，查看完整沟通记录并更新状态。
抽屉在不离开当前列表的情况下展示详情或轻量编辑
销售从询盘列表连续查看多条客户摘要时，可在侧边打开详情；完整报价流程仍适合独立页面。
- 01
确保用户需要频繁回到背景上下文。
- 02
控制内容深度，不在抽屉里继续开抽屉。
- 03
保存、取消和未保存状态清楚可见。
边缘布局叫抽屉，是否模态另行决定。
容易混淆的地方
抽屉是面板呈现方式，详情区是内容职责，模态是交互约束；三个概念可以组合，不能互相代替。
询盘详情从右边滑出。仅凭这个外观，可以确定哪件事？
你可以这样告诉 AI Agent
“
我在处理这件事：销售在线索列表右侧打开抽屉，查看完整沟通记录并更新状态。请以“抽屉”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践