气泡确认 Popconfirm
已上架贴着操作点的轻量二次确认。适合短说明的是/否决策；详情页示例直接展示打开态气泡，不展示触发器。
import { Popconfirm } from "@/components/ui/popconfirm"
import { Button } from "@/components/ui/button"
export function Example() {
return (
<Popconfirm
open
title="发布当前草稿？"
description="确认后会显示在组件目录中。"
confirmText="发布"
onConfirm={() => {}}
>
<Button variant="outline" size="sm">发布</Button>
</Popconfirm>
)
}
import { Popconfirm } from "@/components/ui/popconfirm"
import { Button } from "@/components/ui/button"
export function Example() {
return (
<Popconfirm
open
title="删除这条记录？"
description="删除后不可恢复。"
confirmText="删除"
variant="destructive"
onConfirm={() => {}}
>
<Button variant="destructive" size="sm">删除</Button>
</Popconfirm>
)
}
用法
import { Popconfirm } from "@/components/ui/popconfirm"
DO · 何时用
- 操作有后果但说明很短，适合贴着触发点二次确认（删除、发布、覆盖）
- 确认与取消都应在气泡内完成，无需整页遮罩
DON'T · 何时不用
- 需要大段说明、表单或阻断全页 → 用 Dialog
- 无破坏性的即时切换 → 直接执行，不必二次确认
- 仅告知、无需决策 → 用 Alert / Toast