抽屉式设计适合在不离开当前任务的情况下，查看或编辑一组相关信息。例如客服在工单列表中打开详情、分配负责人，再回到原来的筛选结果继续处理。抽屉是否合适，取决于内容与列表的关联、操作复杂度以及返回频率；如果用户需要长时间阅读、多页配置或独立分享，完整详情页往往更清楚。
做这类方案时，可以在墨刀原型中把列表与侧边面板一起画出来，再连接打开、编辑、保存和关闭的状态。先用一条工单走完操作，比一开始研究面板应该占屏幕的多少更有用。下面以编号 T1042 的客服工单为例，整理一套可以直接用于原型的交互规则。
抽屉、弹窗和独立页面，分别用在哪里
同样是“编辑负责人”，如果只有一个选项，直接在行内修改可能就够了；如果还要看问题描述、处理记录与相关资料，抽屉可以保留工单列表的背景；如果要写长篇处理方案、切换很多子页面，则不宜继续挤在侧栏。先选任务容器，再决定滑入动画。
| 方式 | 适合的任务 | 本例怎么用 |
|---|---|---|
| 行内编辑 | 信息少、修改对象清晰，完成后还要连续处理列表 | 在列表中快速调整一个已有负责人 |
| 弹窗 | 需要集中确认的一次决定，内容短而明确 | 放弃本次未保存的修改 |
| 抽屉 | 与当前记录紧密关联的详情或中等长度编辑 | 查看 T1042、核对负责人并填写处理说明 |
| 独立页面 | 内容复杂、停留较久，需要稳定地址或深度操作 | 查看全部历史、管理附件或处理复杂关联任务 |
Ant Design 的 Drawer 说明也把同一页面内的子任务和表单编辑列为常见用途。这里的关键是保持上下文，而不是把所有详情统一改成右侧滑出的形式。
先把抽屉内外的任务分清楚
本例列表已经筛选为“待处理”，客服打开 T1042，标题为“支付失败”。列表帮助用户判断先处理哪条工单；抽屉负责解释当前工单、核对负责人并记录处理说明。抽屉顶端保留编号和标题，中间展示内容，主要操作保持在容易找到的位置。
信息按用途排列：先显示问题和当前状态，再展示负责人、处理记录和关联材料。不要把工单编号、客户信息、日志、技术诊断全部排成同等权重的长表单。只读内容与可编辑字段也要有明显区别，避免用户逐一点击后才知道哪里能改。
面板宽度由内容决定。两三个短字段可以紧凑一些；长备注和多列数据需要更宽。若必须横向滚动才能读一行普通文字，就该考虑减少内容、调整排版或进入完整页面。桌面端还应留出足够背景，让用户看得出自己来自哪个列表；手机端可以把同一任务改成全屏详情，而不是机械压缩桌面抽屉。
把“打开—修改—保存—关闭”画成连续状态
先画正常路径：点击列表中的 T1042，右侧打开“支付失败”详情；点击编辑后，核对负责人仍为“王宁”，补充并保存处理说明。保存成功后，重新打开详情应能看到已保存的说明，列表仍对应同一条 T1042。图中的负责人前后不变，重点是编辑与返回时保持工单上下文。若设计选择保存后自动关闭，也必须回到原列表位置，而不是刷新到第一页。
| 状态 | 用户看到什么 | 允许的下一步 |
|---|---|---|
| 打开中 | 抽屉标题或明确加载状态，背景仍指向 T1042 | 关闭；加载成功后查看内容 |
| 只读详情 | 问题、状态、负责人和相关记录 | 编辑、进入完整详情或关闭 |
| 正在编辑 | 可编辑字段，以及保存、取消 | 保存；取消本次修改；尝试关闭 |
| 保存中 | 清楚的提交反馈，避免反复触发同一提交 | 等待结果；若允许离开，须说明结果在哪里查看 |
| 保存失败 | 错误与对应字段，仍保留用户输入 | 修正或重试，不重置为最初值 |
| 保存成功 | 更新后的负责人及明确反馈 | 继续处理当前工单，或返回列表 |
保存按钮被点击不等于保存已经完成。方案中应保留失败状态，尤其是负责人已离职、当前人失去权限或工单被他人更新这些业务拒绝。原型可用不同页面或面板状态表达，不必在原型阶段真的接入客服系统。
关闭动作要知道用户有没有改过内容
右上角关闭、取消按钮、点击遮罩和按 Esc，可能都让用户离开抽屉，但它们不能各有一套随意的结果。没有修改时直接关闭；已经修改却未保存时，提供“继续编辑”和“放弃修改”的明确选择。关闭确认中的按钮不要只写“确定”“取消”，否则用户还要猜是在取消关闭，还是取消编辑。
如果部分设置采用即时保存，就不能在退出时笼统提示“所有更改将丢失”。应按真实保存方式说明哪些值已经生效、哪些还没提交。同样，“取消”只应撤回本次尚未保存的编辑，不能把已成功更新的工单悄悄还原。
遮罩点击是否关闭需要明确约定。只读详情可以更轻量；填写长备注的编辑抽屉则应保护输入。无论是否支持遮罩关闭，都保留可发现的关闭入口；不要让用户只能点击一块没有标识的空白区域退出。
连续查看多条记录，重点是避免改错对象
客服经常看完 T1042 又处理 T1043。若产品允许在抽屉打开时点击背景列表，应先判断当前是否有未保存修改，然后切换整套详情，不能只换标题却保留上一条的字段。加载新记录时，可以暂时保留位置，但要避免旧数据被误认成新记录。
另一种方案是在抽屉中提供“上一条、下一条”。这时要说清顺序来自当前筛选和排序，而不是整个数据库。当前记录因为修改状态而不再符合“待处理”筛选时，应提示它已移出结果，并确定关闭后聚焦哪条仍存在的记录。不能靠“刷新页面就好了”把上下文问题交给用户。
嵌套抽屉要谨慎。工单详情中再打开客户信息，如果需要继续编辑合同、联系人与权限，层层叠加会使返回关系难以理解。较短的关联信息可以在当前面板内切换，并显示返回工单入口；复杂任务用独立页面。确有两层面板时，要能识别当前层，关闭上层后应返回原来那条工单。
在墨刀里制作和检查这个方案
先建立工单列表、只读详情、编辑、保存失败四个画板，复制相同列表背景，保持滚动位置、选中行和筛选条件一致。将详情区域靠右排列，给它独立标题、滚动内容和操作区。需要叠在列表上演示时，可按墨刀浮层的制作方法设置打开和关闭；更复杂的业务状态也可以先用页面连接清楚表达。
然后给工单行添加打开详情的交互，给编辑、保存和关闭按钮分别连接对应结果。准备一条失败分支：保存处理说明时返回“当前账户无编辑权限，请联系管理员”，已输入的说明仍保留。提供返回或联系管理员的路径；恢复编辑权限后，重新核对工单编号与输入，再提交保存。这样评审者能操作完整路径，而不只是看侧栏的外观。
最后用三项任务检验：在筛选结果中连续处理两条工单；修改后直接关闭再选择继续编辑；保存失败后修正并回到原来的列表。逐项确认编号没混、输入没丢、返回位置合理。若研发采用模态抽屉，还应约定打开后的焦点位置、背景是否可操作以及关闭后的焦点返回，可配合键盘导航与焦点管理说明交付。抽屉做得好，用户应始终知道自己正在处理谁，以及完成后回到哪里。
