120 lines
3.8 KiB
TypeScript
120 lines
3.8 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 Food = {
|
|
id: string
|
|
name: string
|
|
food_type: string
|
|
description: string
|
|
rarity: string
|
|
image?: string
|
|
animation_file?: string
|
|
sound_effect?: string
|
|
calories?: number
|
|
taste_tags?: string
|
|
nutritional_value?: string
|
|
effect_description?: string
|
|
boost_attributes?: Record<string, number>
|
|
status: string
|
|
created_at?: string
|
|
updated_at?: string
|
|
// 保留一些前端显示用的字段
|
|
releaseDate?: string
|
|
activatedCount?: number
|
|
}
|
|
|
|
type FoodDetailDialogProps = {
|
|
food: Food
|
|
onEdit?: () => void
|
|
}
|
|
|
|
export function FoodDetailDialog({ food, onEdit }: FoodDetailDialogProps) {
|
|
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={food.image || "/placeholder.svg?height=96&width=96"}
|
|
alt={food.name}
|
|
className="object-cover h-full w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold">{food.name}</h3>
|
|
<p className="text-sm text-gray-500">ID: {food.id}</p>
|
|
<div className="flex gap-2 mt-2">
|
|
<Badge className="bg-purple-500">{food.food_type}</Badge>
|
|
<Badge className="bg-blue-500">{food.rarity}</Badge>
|
|
<Badge className={food.status === "已发布" ? "bg-green-500" : "bg-gray-500"}>{food.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">{food.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">{food.releaseDate || "未发布"}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-500 mb-1">激活数量</h4>
|
|
<p className="text-sm">{food.activatedCount}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setOpen(false)}>
|
|
关闭
|
|
</Button>
|
|
{food.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>
|
|
)
|
|
}
|