110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Eye, Edit } from "lucide-react"
|
|
|
|
export type Prop = {
|
|
id: string
|
|
name: string
|
|
type: string
|
|
rarity: string
|
|
description: string
|
|
releaseDate: string
|
|
status: string
|
|
activatedCount: number
|
|
image?: string
|
|
}
|
|
|
|
type PropDetailDialogProps = {
|
|
prop: Prop
|
|
onEdit?: () => void
|
|
}
|
|
|
|
export function PropDetailDialog({ prop, onEdit }: PropDetailDialogProps) {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600">
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[550px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
道具详情
|
|
</DialogTitle>
|
|
<DialogDescription>查看道具的详细信息</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-6 py-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="h-24 w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center">
|
|
<img
|
|
src={prop.image || "/placeholder.svg?height=96&width=96"}
|
|
alt={prop.name}
|
|
className="object-cover h-full w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold">{prop.name}</h3>
|
|
<p className="text-sm text-gray-500">ID: {prop.id}</p>
|
|
<div className="flex gap-2 mt-2">
|
|
<Badge className="bg-purple-500">{prop.type}</Badge>
|
|
<Badge className="bg-blue-500">{prop.rarity}</Badge>
|
|
<Badge className={prop.status === "已发布" ? "bg-green-500" : "bg-gray-500"}>{prop.status}</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-500 mb-1">道具描述</h4>
|
|
<p className="text-sm">{prop.description}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-500 mb-1">发布日期</h4>
|
|
<p className="text-sm">{prop.releaseDate || "未发布"}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-500 mb-1">激活数量</h4>
|
|
<p className="text-sm">{prop.activatedCount}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setOpen(false)}>
|
|
关闭
|
|
</Button>
|
|
{prop.status !== "已发布" && onEdit && (
|
|
<Button
|
|
className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
|
|
onClick={() => {
|
|
setOpen(false)
|
|
onEdit()
|
|
}}
|
|
>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
编辑道具
|
|
</Button>
|
|
)}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|