抽屉
Drawer
初级通用抽屉（Drawer）是从屏幕边缘展开、覆盖部分页面的面板，通常用来承载与当前页面有关的操作或内容。它让你查看详情、修改信息时保留原页面的上下文，比如在订单列表旁编辑订单。
你可能会说：「我想点开订单后，在页面右边修改信息，关掉还能接着看原来的列表。」
动手看看在订单列表旁编辑订单
切换「打开编辑抽屉」来模拟点击订单行的「编辑」；调整宽度，再关闭它，看看订单列表是否还在原处。
抽屉从右边滑入，只盖住列表的一部分。左边仍能看到订单编号，所以修改信息时不会忘记自己从哪笔订单进来。
遮罩压暗并挡住背后的列表点击，让人先处理抽屉里的内容；抽屉不像居中的确认弹窗，它贴着页面边缘，强调与当前列表的联系。
要点抽屉怎样让人留在当前页面完成任务？
- 1
从边缘展开并保留背景
抽屉通常从左侧或右侧进入，盖住一部分当前页面。你在后台列表里点开某条记录时，还能看见列表的一部分，比较容易记住自己是从哪里打开的。
- 2
内容围绕当前任务组织
抽屉里可以放详情、表单和操作按钮。比如你在用户列表点“编辑”，右侧抽屉展示该用户的字段和“保存修改”；任务完成后关掉抽屉，就回到列表继续处理下一条。
- 3
打开关闭要处理好状态
如果抽屉里有未保存的修改，关闭时要想清楚数据怎么处理。让 AI 实现时，你可以说清保存后是否刷新列表、关闭后是否丢弃草稿，以及键盘焦点回到哪里。
容易混淆的地方
抽屉和弹窗都能暂时出现在当前页面上，但抽屉贴着屏幕边缘，更适合承载较多、与背景页面有关的内容；弹窗通常居中，更适合让用户集中处理一个短任务或确认操作。气泡卡片一般依附某个触发位置，内容更轻，不适合放较长的编辑表单。
什么时候用
适合用
- 在订单列表中查看或修改单条订单，处理完关闭抽屉，再接着浏览原列表。
- 在数据后台调整筛选条件，想保留表格作为参照，同时给多个筛选项留出空间。
- 在 AI 工具的对话页查看某次生成的参数或详情，同时保留对话上下文。
不适合用
- 用户要阅读一篇长报告，还需要分享独立地址时，用详情页更合适。
- 只是确认是否删除一条记录时，用简短的确认弹窗比展开抽屉更直接。
- 只是告诉用户文件已上传成功时，用轻提示即可，不需要占据侧边空间。
练一练选一个答案，看看解释
你在做一个客服后台。客服要连续处理工单，查看每条工单的联系人信息并偶尔修改备注，同时需要记得自己在工单列表中的位置。你会怎么设计？
让 AI 帮你做复制给 AI Agent 直接用
请在工单列表中实现右侧抽屉：点击工单打开，展示联系人信息和可编辑的备注；保存成功后更新列表中的对应数据并关闭抽屉。关闭未保存的抽屉时丢弃本次修改，关闭后把键盘焦点还给打开它的工单。