98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react"
|
||
|
||
import { useState } from "react"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import { AlertTriangle, Loader2, Trash2 } from "lucide-react"
|
||
|
||
type DeleteConfirmationDialogProps = {
|
||
title: string
|
||
description: string
|
||
itemName: string
|
||
onDelete: () => Promise<void>
|
||
trigger?: React.ReactNode
|
||
}
|
||
|
||
export function DeleteConfirmationDialog({
|
||
title,
|
||
description,
|
||
itemName,
|
||
onDelete,
|
||
trigger,
|
||
}: DeleteConfirmationDialogProps) {
|
||
const [open, setOpen] = useState(false)
|
||
const [isDeleting, setIsDeleting] = useState(false)
|
||
|
||
const handleDelete = async () => {
|
||
setIsDeleting(true)
|
||
try {
|
||
await onDelete()
|
||
setOpen(false)
|
||
} catch (error) {
|
||
console.error("删除失败:", error)
|
||
alert("删除失败，请重试！")
|
||
} finally {
|
||
setIsDeleting(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<DialogTrigger asChild>
|
||
{trigger || (
|
||
<Button variant="ghost" size="icon" className="hover:bg-red-50 hover:text-red-600">
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
</DialogTrigger>
|
||
<DialogContent className="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-xl font-bold text-red-600 flex items-center">
|
||
<AlertTriangle className="h-5 w-5 mr-2" />
|
||
{title}
|
||
</DialogTitle>
|
||
<DialogDescription>{description}</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="py-4">
|
||
<p className="text-sm text-gray-700">
|
||
您确定要删除 <span className="font-medium text-red-600">{itemName}</span> 吗？此操作无法撤销。
|
||
</p>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setOpen(false)} disabled={isDeleting}>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
onClick={handleDelete}
|
||
disabled={isDeleting}
|
||
className="bg-red-600 hover:bg-red-700"
|
||
>
|
||
{isDeleting ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
删除中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Trash2 className="mr-2 h-4 w-4" />
|
||
确认删除
|
||
</>
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|