撤销操作
Undo Action
别名:撤销防误操作撤销删除撤回操作后悔药删除可恢复
这是什么
用"先执行、给反悔窗口"的方式处理高风险操作：删除等动作立即生效并展示结果，同时在底部弹出 带倒计时的撤销条，窗口期内一键恢复，倒计时结束才真正提交。相比弹窗确认，它不打断操作流， 又比"确认一次就完"的弹窗多了一层真正可用的后悔药。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 删除、归档、清空等破坏性但可恢复的操作
- 操作频繁，弹窗确认会严重拖慢节奏
- 操作结果立即可见，用户需要看到效果后再决定
✕ 不适用场景
- 操作不可逆（永久删除、对外发送），撤销条会给出错误安全感
- 操作影响重大且低频，正式确认对话框更合适
- 操作在后台静默完成，用户感知不到结果
常见形式
撤销条
Snackbar
底部条 + 倒计时，Gmail 删除邮件的经典样式
轻提示撤销
Toast undo
顶部或角落 toast 内嵌撤销按钮，自动消失
延迟提交
Delayed commit
界面即时更新，请求在倒计时后才真正发出
实现要点
linear-gradientposition: fixedanimationtransform删除先更新本地状态并渲染撤销条，倒计时用 setTimeout 或 CSS 线性动画驱动；点击撤销清除定时器 并恢复数据，倒计时归零后发出真正的删除请求。撤销条固定在容器底部，倒计时可用渐缩进度条可视化。 撤销按钮要足够大，撤销条存活期内不要堆叠多条同类提示。
相关概念
在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件搭配使用用户操作后立即按"预计成功"更新界面，真实请求在后台进行，成功则落定， 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感，特别适合点赞、收藏这类高频轻操作。
交互模式相似概念覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件搭配使用当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式相似概念把信息分层呈现：先给最常用、最必要的部分，把次要细节藏到"展开""下一步""显示更多"后面， 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担，让界面入门简单，同时保留深度供高级用户按需取用。
交互模式相似概念