logan
363753653e
- dialog.tsx: DialogContent 基础样式加 p-6 (24px padding) - ConfirmDialog.tsx: 按钮区域间距 pt-2 → pt-4 - 修复所有使用 Radix Dialog 的弹框内容紧贴边缘的问题
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
title?: string;
|
|
description?: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
variant?: 'danger' | 'default';
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
open,
|
|
onConfirm,
|
|
onCancel,
|
|
title = '确认操作',
|
|
description,
|
|
confirmText = '确认',
|
|
cancelText = '取消',
|
|
variant = 'default',
|
|
}: Props) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={(v) => { if (!v) onCancel(); }}>
|
|
<DialogContent
|
|
showCloseButton={false}
|
|
className="border-0 sm:max-w-[400px]"
|
|
onPointerDownOutside={(e) => e.preventDefault()}
|
|
onInteractOutside={(e) => e.preventDefault()}
|
|
>
|
|
<DialogTitle className="text-base">{title}</DialogTitle>
|
|
{description && (
|
|
<DialogDescription className="text-sm text-[var(--dg-text-secondary)]">
|
|
{description}
|
|
</DialogDescription>
|
|
)}
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<Button variant="ghost" size="sm" onClick={onCancel}>
|
|
{cancelText}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant={variant === 'danger' ? 'destructive' : 'default'}
|
|
onClick={onConfirm}
|
|
>
|
|
{confirmText}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|