freedakgmail
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
"use client"
|
||
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog"
|
||
import { AlertTriangle } from "lucide-react"
|
||
|
||
interface GenerationWarningDialogProps {
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
memberName: string
|
||
relationType: 'father' | 'mother'
|
||
onConfirm: () => void
|
||
}
|
||
|
||
/**
|
||
* 代数重新计算警告对话框
|
||
* 当用户尝试给第1代成员（始祖）添加父母时显示此对话框
|
||
*/
|
||
export function GenerationWarningDialog({
|
||
open,
|
||
onOpenChange,
|
||
memberName,
|
||
relationType,
|
||
onConfirm,
|
||
}: GenerationWarningDialogProps) {
|
||
const relationText = relationType === 'father' ? '父亲' : '母亲'
|
||
|
||
const handleConfirm = () => {
|
||
onOpenChange(false)
|
||
onConfirm()
|
||
}
|
||
|
||
return (
|
||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||
<AlertDialogContent className="max-w-md">
|
||
<AlertDialogHeader>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
|
||
<AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-500" />
|
||
</div>
|
||
<AlertDialogTitle className="text-lg">
|
||
全族代数将重新计算
|
||
</AlertDialogTitle>
|
||
</div>
|
||
<AlertDialogDescription asChild>
|
||
<div className="space-y-3 pt-2">
|
||
<p>
|
||
您正在给 <span className="font-semibold text-foreground">{memberName}</span> 添加{relationText}，
|
||
这将导致<span className="text-amber-600 dark:text-amber-500 font-medium">全族代数重新计算</span>。
|
||
</p>
|
||
|
||
<div className="rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-3">
|
||
<p className="text-sm text-amber-800 dark:text-amber-200">
|
||
<span className="font-medium">代数变化说明：</span>
|
||
<br />
|
||
原第1代将变为第2代，以此类推。新添加的{relationText}将成为新的第1代始祖。
|
||
</p>
|
||
</div>
|
||
|
||
<p className="text-sm text-muted-foreground">
|
||
此操作不可撤销，请确认是否继续？
|
||
</p>
|
||
</div>
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleConfirm}
|
||
className="bg-amber-600 hover:bg-amber-700 text-white"
|
||
>
|
||
确认添加
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
)
|
||
}
|