对话框 Dialog
已上架阻断式确认与短流程容器：标题、说明、可选正文与页脚操作。详情页示例直接展示打开态面板，不展示触发器。
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
export function Example() {
return (
<Dialog open>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>发布组件详情页</DialogTitle>
<DialogDescription>
确认页面、注册和 evidence 都已补齐后再发布。
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline">取消</Button>
<Button variant="brand">确认发布</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
export function Example() {
return (
<Dialog open>
<DialogContent className="sm:max-w-md" showCloseButton={false}>
<DialogHeader>
<DialogTitle>完成必要步骤</DialogTitle>
<DialogDescription>
关闭按钮已隐藏，须通过主操作或取消离开。
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline">稍后再说</Button>
<Button variant="brand">继续</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
用法
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
DO · 何时用
- 需要用户明确确认或填写后才能继续的流程（发布、删除、关键设置）
- 内容需要标题 + 说明 + 操作区，且应暂时阻断页面其它交互
DON'T · 何时不用
- 轻量「是/否」确认且无需大段说明 → 用 Popconfirm
- 短暂结果反馈 → 用 Toast / Notification / Alert
- 复杂长表单或二级导航 → 优先 Sheet / 独立页