110 lines
3.1 KiB
TypeScript
110 lines
3.1 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 { AlertCircle, Loader2, Send } from "lucide-react"
|
||
|
||
type PublishConfirmationDialogProps = {
|
||
title: string
|
||
description: string
|
||
itemName: string
|
||
onPublish: () => Promise<void>
|
||
trigger?: React.ReactNode
|
||
}
|
||
|
||
export function PublishConfirmationDialog({
|
||
title,
|
||
description,
|
||
itemName,
|
||
onPublish,
|
||
trigger,
|
||
}: PublishConfirmationDialogProps) {
|
||
const [open, setOpen] = useState(false)
|
||
const [isPublishing, setIsPublishing] = useState(false)
|
||
|
||
const handlePublish = async () => {
|
||
setIsPublishing(true)
|
||
try {
|
||
await onPublish()
|
||
setOpen(false)
|
||
} catch (error) {
|
||
console.error("发布失败:", error)
|
||
// 失败处理已经在onPublish中处理，这里不需要额外处理
|
||
} finally {
|
||
setIsPublishing(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<DialogTrigger asChild>
|
||
{trigger || (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="hover:bg-green-50 hover:text-green-600"
|
||
title="发布歌曲"
|
||
>
|
||
<Send className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
</DialogTrigger>
|
||
<DialogContent className="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-xl font-bold text-green-600 flex items-center">
|
||
<AlertCircle className="h-5 w-5 mr-2" />
|
||
{title}
|
||
</DialogTitle>
|
||
<DialogDescription>{description}</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="py-4">
|
||
<p className="text-sm text-gray-700 mb-2">
|
||
您确定要发布 <span className="font-medium text-green-600">{itemName}</span> 吗？
|
||
</p>
|
||
<div className="p-3 bg-amber-50 border border-amber-200 rounded-md">
|
||
<p className="text-sm text-amber-700 font-medium">
|
||
重要提示
|
||
</p>
|
||
<p className="text-sm text-amber-600 mt-1">
|
||
一旦发布后，将不能再修改任何卡片属性，包括名称、描述、音频等信息。请确认所有信息正确无误。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setOpen(false)} disabled={isPublishing}>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
variant="default"
|
||
onClick={handlePublish}
|
||
disabled={isPublishing}
|
||
className="bg-green-600 hover:bg-green-700 text-white"
|
||
>
|
||
{isPublishing ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
发布中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Send className="mr-2 h-4 w-4" />
|
||
确认发布
|
||
</>
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|