107 lines
3.6 KiB
TypeScript
107 lines
3.6 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 HomeDecor = {
|
||
id: string
|
||
name: string
|
||
type: string
|
||
rarity: string
|
||
description: string
|
||
releaseDate: string
|
||
status: string
|
||
activatedCount: number
|
||
image?: string
|
||
}
|
||
|
||
type HomeDecorDetailDialogProps = {
|
||
decor: HomeDecor
|
||
onEdit?: () => void
|
||
}
|
||
|
||
export function HomeDecorDetailDialog({ decor, onEdit }: HomeDecorDetailDialogProps) {
|
||
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">
|
||
{/* 使用固定的占位图像，避免使用可能不存在的图片URL */}
|
||
<div className="h-full w-full bg-gray-200 flex items-center justify-center text-gray-400">装饰图片</div>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-bold">{decor.name}</h3>
|
||
<p className="text-sm text-gray-500">ID: {decor.id}</p>
|
||
<div className="flex gap-2 mt-2">
|
||
<Badge className="bg-purple-500">{decor.type}</Badge>
|
||
<Badge className="bg-blue-500">{decor.rarity}</Badge>
|
||
<Badge className={decor.status === "已发布" ? "bg-green-500" : "bg-gray-500"}>{decor.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">{decor.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">{decor.releaseDate || "未发布"}</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-500 mb-1">激活数量</h4>
|
||
<p className="text-sm">{decor.activatedCount}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||
关闭
|
||
</Button>
|
||
{decor.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>
|
||
)
|
||
}
|