FEEDBACK & OVERLAY
撤销提示条Snackbar with Undo
深色提示条自带一个"撤销"按钮，删除类操作给用户留 5 秒后悔药。
效果预览
适合用在哪
删除邮件/文件、移除列表项、清空操作、归档。
容易踩的坑
- 前端倒计时期间用户关闭页面，软删除未落库或被误真删，需在 beforeunload 时处理。
- 撤销按钮对比度不足或热区小于 44px，用户在 5 秒内很难精准点中。
- 连续删除多条时新提示直接覆盖旧提示，前一条的撤销机会被吞掉。
设计提示词 · Prompt
撤销提示条（Snackbar with Undo）：深色底（#1C1C24）白字、底部居中浮出、圆角 10-12px、内边距 12-16px；右侧一个高对比的动作链接（品牌浅色 650 字重，如"撤销"）。出现即开始 5-8s 倒计时，悬停暂停；超时后真正执行删除。实现上先做"软删除"（前端隐藏 + 数据标记），倒计时结束或用户离开才真删。这个模式把"删除确认弹窗"的打断感降到零，Gmail 用它删邮件十几年了——比任何确认弹窗都优雅。
Snackbar with Undo: dark background (#1C1C24) with white text, floating at the bottom center, border radius 10-12px, padding 12-16px; on the right a high-contrast action link (light brand color, 650 weight, e.g. "Undo"). A 5-8s countdown starts as soon as it appears, pausing on hover; deletion is actually performed after timeout. Implementation-wise, do a "soft delete" first (hide on the frontend + mark the data), and only truly delete when the countdown ends or the user leaves. This pattern reduces the interruption of a "delete confirmation dialog" to zero; Gmail has used it to delete emails for over a decade — more elegant than any confirmation dialog.
常见搭配
同一页面里经常和「撤销提示条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:24px 0"> <div class="d-snackbar"><span>已删除「Q3 复盘文档」</span><u>撤销</u></div> </div>