FEEDBACK & OVERLAY
气泡确认Popconfirm
在按钮或操作图标上弹出小浮层，就地二次确认，不打断当前上下文。
效果预览
⚠确定删除这个文件？
删除后将无法恢复，相关引用也会失效。
适合用在哪
删除行、移除标签、取消订阅、退出编辑等需要轻量确认的操作。
不适合：涉及重要后果、需要用户仔细阅读条款或填写补充信息时，不要用 Popconfirm，改用 Modal 或独立页面。
和相近模式的区别
模态框Modal / Dialog
Modal 居中遮罩，适合重要决策和复杂表单；Popconfirm 是就地小浮层，适合轻量二次确认。
危险操作按钮Destructive Button
Destructive Button 是视觉样式；Popconfirm 是交互流程，两者经常一起用：红色删除按钮 + Popconfirm 确认。
容易踩的坑
- 把需要仔细阅读的重要确认塞进 Popconfirm，用户可能误点外部就关闭了。
- 焦点没有移进 Popconfirm，键盘用户 Tab 会跑到背景页面上。
- 移动端 Popconfirm 被屏幕边缘截断，应改用底部 Sheet 或 Modal。
设计提示词 · Prompt
气泡确认（Popconfirm）：小型浮层，白底、圆角 10px、1px 描边、大投影，宽度 240-280px，箭头指向触发元素。顶部一行图标 + 加粗问题，下方一行浅灰说明。底部两个按钮：取消（Ghost）+ 确认（实心主按钮；危险操作用红色）。点击外部、Esc 或取消关闭。
Popconfirm: a small floating card next to the trigger, white background, 10px radius, 1px stroke, large shadow, 240-280px wide, with an arrow pointing at the trigger. Content: top row has a 20px warning icon + bold question like "Delete this file?"; below, a 13px gray explanation line. Bottom row: Cancel (Ghost/Outline) + Confirm (primary solid; red #dc2626 for destructive). Closes on outside click, Esc, or Cancel. Move focus to Confirm on open, restore to trigger on close.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="popconfirm"><div class="popconfirm__arr"></div><b>确定删除？</b><p>删除后不可恢复。</p><div><button>取消</button><button class="is-p">删除</button></div></div> */
.popconfirm { position: relative; width: 260px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px -12px rgba(0,0,0,.18); }
.popconfirm__arr { position: absolute; top: -6px; left: 24px; width: 10px; height: 10px; border-left: 1px solid #e5e7eb; border-top: 1px solid #e5e7eb; background: #fff; transform: rotate(45deg); }
.popconfirm b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.popconfirm p { margin: 6px 0 12px; font-size: 13px; color: #6b7280; }
.popconfirm div { display: flex; justify-content: flex-end; gap: 8px; }
.popconfirm button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: 14px/1 system-ui, sans-serif; }
.popconfirm button.is-p { background: #dc2626; color: #fff; }
演示 HTML 结构
<div class="s d-center">
<div class="fb-pop">
<div class="fb-pop__arr"></div>
<div class="fb-pop__hd"><em>⚠</em><b>确定删除这个文件？</b></div>
<p>删除后将无法恢复，相关引用也会失效。</p>
<div class="fb-pop__btns"><button type="button">取消</button><button class="is-p" type="button">删除</button></div>
</div>
</div>
常见问题
Popconfirm 的焦点应该放在哪个按钮上？
放在破坏性最小的按钮（通常是「取消」），避免用户按回车误删；但同时也必须让 Tab 能快速到达「确定」。
移动端 Popconfirm 怎么处理？
屏幕边缘放不下时改用底部 Sheet 或居中 Modal；桌面端再恢复为 Popconfirm。
常见搭配
同一页面里经常和「气泡确认」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。