307 lines
11 KiB
TypeScript
307 lines
11 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
import { Plus, Upload, AlertTriangle, Loader2 } from "lucide-react"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import type { Prop } from "./prop-detail-dialog"
|
||
|
||
type AddPropDialogProps = {
|
||
mode?: "create" | "edit"
|
||
initialProp?: Prop
|
||
open?: boolean
|
||
onOpenChange?: (open: boolean) => void
|
||
onSave?: (prop: Prop) => void
|
||
}
|
||
|
||
export function AddPropDialog({
|
||
mode = "create",
|
||
initialProp,
|
||
open: controlledOpen,
|
||
onOpenChange: setControlledOpen,
|
||
onSave,
|
||
}: AddPropDialogProps) {
|
||
const [open, setOpen] = useState(false)
|
||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||
|
||
// 表单状态
|
||
const [name, setName] = useState("")
|
||
const [propType, setPropType] = useState("")
|
||
const [rarity, setRarity] = useState("")
|
||
const [description, setDescription] = useState("")
|
||
const [isLimited, setIsLimited] = useState(false)
|
||
const [previewId, setPreviewId] = useState(
|
||
"PRP" +
|
||
Math.floor(Math.random() * 1000)
|
||
.toString()
|
||
.padStart(3, "0"),
|
||
)
|
||
|
||
// 当编辑模式且有道具数据时，初始化表单
|
||
useEffect(() => {
|
||
if (mode === "edit" && initialProp) {
|
||
setName(initialProp.name)
|
||
setPropType(initialProp.type)
|
||
setRarity(initialProp.rarity)
|
||
setDescription(initialProp.description)
|
||
setIsLimited(initialProp.type === "限定道具")
|
||
setPreviewId(initialProp.id)
|
||
}
|
||
}, [mode, initialProp])
|
||
|
||
// 处理受控和非受控开关状态
|
||
useEffect(() => {
|
||
if (controlledOpen !== undefined) {
|
||
setOpen(controlledOpen)
|
||
}
|
||
}, [controlledOpen])
|
||
|
||
// 处理对话框关闭
|
||
const handleOpenChange = (newOpen: boolean) => {
|
||
setOpen(newOpen)
|
||
if (setControlledOpen) {
|
||
setControlledOpen(newOpen)
|
||
}
|
||
|
||
// 如果关闭对话框，重置表单（仅在创建模式下）
|
||
if (!newOpen && mode === "create") {
|
||
resetForm()
|
||
}
|
||
}
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
if (mode === "create") {
|
||
setName("")
|
||
setPropType("")
|
||
setRarity("")
|
||
setDescription("")
|
||
setIsLimited(false)
|
||
setPreviewId(
|
||
"PRP" +
|
||
Math.floor(Math.random() * 1000)
|
||
.toString()
|
||
.padStart(3, "0"),
|
||
)
|
||
}
|
||
}
|
||
|
||
const handleSubmit = async () => {
|
||
// 表单验证
|
||
if (!name || !propType || !rarity || !description) {
|
||
alert("请填写所有必填字段！")
|
||
return
|
||
}
|
||
|
||
setIsSubmitting(true)
|
||
try {
|
||
// 构建道具对象
|
||
const prop: Prop = {
|
||
id: initialProp?.id || previewId,
|
||
name,
|
||
type: isLimited ? "限定道具" : propType,
|
||
rarity,
|
||
description,
|
||
releaseDate: initialProp?.releaseDate || "",
|
||
status: initialProp?.status || "未发布",
|
||
activatedCount: initialProp?.activatedCount || 0,
|
||
image: initialProp?.image || "/placeholder.svg?height=300&width=300",
|
||
}
|
||
|
||
// 模拟API请求
|
||
await new Promise((resolve) => setTimeout(resolve, 1500))
|
||
|
||
// 调用保存回调
|
||
if (onSave) {
|
||
onSave(prop)
|
||
}
|
||
|
||
// 关闭对话框
|
||
handleOpenChange(false)
|
||
} catch (error) {
|
||
console.error(mode === "create" ? "创建道具失败:" : "更新道具失败:", error)
|
||
alert(mode === "create" ? "创建道具失败，请重试！" : "更新道具失败，请重试！")
|
||
} finally {
|
||
setIsSubmitting(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||
{mode === "create" && (
|
||
<DialogTrigger asChild>
|
||
<Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
|
||
<Plus className="mr-2 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">
|
||
{mode === "create" ? "添加新道具" : "编辑道具"}
|
||
</DialogTitle>
|
||
<DialogDescription>
|
||
{mode === "create" ? "填写道具信息以创建新的道具卡牌。创建后将生成唯一的卡牌ID。" : "修改道具信息。"}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="grid gap-4 py-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name" className="text-right">
|
||
道具名称 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="name"
|
||
placeholder="输入道具名称"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="type" className="text-right">
|
||
道具类型 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Select value={propType} onValueChange={setPropType} required>
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue placeholder="选择道具类型" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="演出道具">演出道具</SelectItem>
|
||
<SelectItem value="互动道具">互动道具</SelectItem>
|
||
<SelectItem value="收藏品">收藏品</SelectItem>
|
||
<SelectItem value="限定道具">限定道具</SelectItem>
|
||
<SelectItem value="其他">其他</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="rarity" className="text-right">
|
||
稀有度 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Select value={rarity} onValueChange={setRarity} required>
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue placeholder="选择稀有度" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="普通">普通</SelectItem>
|
||
<SelectItem value="稀有">稀有</SelectItem>
|
||
<SelectItem value="史诗">史诗</SelectItem>
|
||
<SelectItem value="传说">传说</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="quantity" className="text-right">
|
||
初始数量 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="quantity"
|
||
type="number"
|
||
min="1"
|
||
defaultValue="1000"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
required
|
||
disabled={mode === "edit"}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="description" className="text-right">
|
||
道具<EFBFBD><EFBFBD><EFBFBD>述 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Textarea
|
||
id="description"
|
||
placeholder="输入道具描述"
|
||
className="min-h-[100px] border-gray-300 focus-visible:ring-pink-500"
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-right">
|
||
道具图片 {mode === "create" && <span className="text-red-500">*</span>}
|
||
</Label>
|
||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center hover:border-pink-500 transition-colors cursor-pointer">
|
||
<Upload className="h-8 w-8 text-gray-400 mb-2" />
|
||
<p className="text-sm text-gray-500">点击或拖拽上传道具图片</p>
|
||
<p className="text-xs text-gray-400 mt-1">支持 PNG, JPG, JPEG 格式，最大 5MB</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-2 pt-2">
|
||
<Switch id="limited" checked={isLimited} onCheckedChange={setIsLimited} />
|
||
<Label htmlFor="limited" className="cursor-pointer">
|
||
这是限定道具
|
||
</Label>
|
||
</div>
|
||
|
||
{isLimited && (
|
||
<div className="p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start">
|
||
<AlertTriangle className="h-5 w-5 text-amber-500 mr-2 flex-shrink-0 mt-0.5" />
|
||
<div className="text-sm text-amber-700">
|
||
<p className="font-medium">限定道具提示</p>
|
||
<p>限定道具通常有特定的发布时间和限制条件。请确保在发布前设置好相关参数。</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{mode === "create" && (
|
||
<div className="p-4 bg-gray-50 rounded-lg">
|
||
<h3 className="text-sm font-medium mb-2">预览信息</h3>
|
||
<p className="text-sm text-gray-600">
|
||
道具ID: <span className="font-medium text-pink-600">{previewId}</span>
|
||
</p>
|
||
<p className="text-sm text-gray-600 mt-1">
|
||
状态: <span className="font-medium">未发布</span>
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isSubmitting}>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
|
||
onClick={handleSubmit}
|
||
disabled={isSubmitting}
|
||
>
|
||
{isSubmitting ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
{mode === "create" ? "创建中..." : "更新中..."}
|
||
</>
|
||
) : mode === "create" ? (
|
||
"创建道具"
|
||
) : (
|
||
"更新道具"
|
||
)}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|