274 lines
11 KiB
TypeScript
274 lines
11 KiB
TypeScript
import { DashboardShell } from "@/components/dashboard-shell"
|
||
import { DashboardHeader } from "@/components/dashboard-header"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||
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 { ArrowLeft, Save, AlertTriangle, Upload } from "lucide-react"
|
||
import Link from "next/link"
|
||
|
||
// Mock data for the outfit details (same as in [id]/page.tsx)
|
||
const outfitData = {
|
||
OFT001: {
|
||
id: "OFT001",
|
||
name: "经典原创服装",
|
||
type: "常规",
|
||
rarity: "稀有",
|
||
description: "洛天依的经典原创服装，简约而不失时尚，适合各种场合穿着。",
|
||
releaseDate: "2023-10-15",
|
||
status: "已发布",
|
||
activatedCount: 1245,
|
||
printedCount: 2000,
|
||
image: "/placeholder.svg?height=300&width=300",
|
||
batches: [
|
||
{ id: "B001", date: "2023-09-01", quantity: 1000, startId: "OFT001-0001", endId: "OFT001-1000" },
|
||
{ id: "B002", date: "2023-12-15", quantity: 1000, startId: "OFT001-1001", endId: "OFT001-2000" },
|
||
],
|
||
},
|
||
OFT002: {
|
||
id: "OFT002",
|
||
name: "夏日泳装",
|
||
type: "季节限定",
|
||
rarity: "史诗",
|
||
description: "专为夏季设计的清凉泳装，让洛天依在夏日活动中更加亮眼。",
|
||
releaseDate: "2023-06-01",
|
||
status: "已发布",
|
||
activatedCount: 876,
|
||
printedCount: 1500,
|
||
image: "/placeholder.svg?height=300&width=300",
|
||
batches: [{ id: "B003", date: "2023-05-10", quantity: 1500, startId: "OFT002-0001", endId: "OFT002-1500" }],
|
||
},
|
||
OFT003: {
|
||
id: "OFT003",
|
||
name: "冬日圣诞服",
|
||
type: "节日限定",
|
||
rarity: "史诗",
|
||
description: "圣诞节特别设计的节日服装，温暖而喜庆，让洛天依陪你度过欢乐的圣诞。",
|
||
releaseDate: "2023-12-01",
|
||
status: "已发布",
|
||
activatedCount: 1032,
|
||
printedCount: 2000,
|
||
image: "/placeholder.svg?height=300&width=300",
|
||
batches: [{ id: "B004", date: "2023-11-15", quantity: 2000, startId: "OFT003-0001", endId: "OFT003-2000" }],
|
||
},
|
||
OFT004: {
|
||
id: "OFT004",
|
||
name: "校园制服",
|
||
type: "常规",
|
||
rarity: "稀有",
|
||
description: "清新可爱的校园风格制服，展现洛天依青春活力的一面。",
|
||
releaseDate: "2024-01-15",
|
||
status: "已发布",
|
||
activatedCount: 1567,
|
||
printedCount: 3000,
|
||
image: "/placeholder.svg?height=300&width=300",
|
||
batches: [
|
||
{ id: "B005", date: "2024-01-05", quantity: 2000, startId: "OFT004-0001", endId: "OFT004-2000" },
|
||
{ id: "B006", date: "2024-02-10", quantity: 1000, startId: "OFT004-2001", endId: "OFT004-3000" },
|
||
],
|
||
},
|
||
OFT005: {
|
||
id: "OFT005",
|
||
name: "演唱会礼服",
|
||
type: "特别版",
|
||
rarity: "传说",
|
||
description: "为重要演唱会设计的华丽礼服，尽显洛天依的优雅与魅力。",
|
||
releaseDate: "",
|
||
status: "未发布",
|
||
activatedCount: 0,
|
||
printedCount: 1000,
|
||
image: "/placeholder.svg?height=300&width=300",
|
||
batches: [{ id: "B007", date: "2024-03-20", quantity: 1000, startId: "OFT005-0001", endId: "OFT005-1000" }],
|
||
},
|
||
}
|
||
|
||
export default function EditOutfitPage({ params }: { params: { id: string } }) {
|
||
const outfit = outfitData[params.id as keyof typeof outfitData]
|
||
|
||
if (!outfit) {
|
||
return (
|
||
<DashboardShell>
|
||
<div className="flex flex-col items-center justify-center h-[60vh]">
|
||
<AlertTriangle className="h-16 w-16 text-red-500 mb-4" />
|
||
<h1 className="text-2xl font-bold mb-2">服装不存在</h1>
|
||
<p className="text-gray-500 mb-6">找不到ID为 {params.id} 的服装</p>
|
||
<Button asChild>
|
||
<Link href="/outfits">
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
返回服装列表
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</DashboardShell>
|
||
)
|
||
}
|
||
|
||
const isPublished = outfit.status === "已发布"
|
||
|
||
if (isPublished) {
|
||
return (
|
||
<DashboardShell>
|
||
<div className="flex flex-col items-center justify-center h-[60vh]">
|
||
<AlertTriangle className="h-16 w-16 text-amber-500 mb-4" />
|
||
<h1 className="text-2xl font-bold mb-2">无法编辑</h1>
|
||
<p className="text-gray-500 mb-2">该服装已发布，基本属性不可修改</p>
|
||
<p className="text-gray-500 mb-6">您可以在详情页面增加印刷数量</p>
|
||
<div className="flex space-x-4">
|
||
<Button variant="outline" asChild>
|
||
<Link href="/outfits">
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
返回服装列表
|
||
</Link>
|
||
</Button>
|
||
<Button asChild>
|
||
<Link href={`/outfits/${params.id}`}>查看服装详情</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DashboardShell>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<DashboardShell>
|
||
<div className="absolute top-0 right-0 w-1/2 h-48 bg-gradient-to-bl from-pink-200 via-purple-200 to-transparent opacity-20 rounded-bl-full" />
|
||
|
||
<div className="flex items-center mb-6">
|
||
<Button variant="ghost" size="sm" className="mr-4" asChild>
|
||
<Link href={`/outfits/${params.id}`}>
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
返回详情
|
||
</Link>
|
||
</Button>
|
||
<DashboardHeader heading={`编辑服装: ${outfit.name}`} text={`服装ID: ${outfit.id}`} />
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-3">
|
||
<Card className="md:col-span-1 border-none shadow-lg bg-white">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-bold">服装图片</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="relative w-full aspect-square max-w-[300px] rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center">
|
||
<img src={outfit.image || "/placeholder.svg"} alt={outfit.name} className="object-cover" />
|
||
</div>
|
||
|
||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center hover:border-pink-500 transition-colors cursor-pointer">
|
||
<Upload className="h-6 w-6 text-gray-400 mb-2" />
|
||
<p className="text-sm text-gray-500">更换服装图片</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="md:col-span-2 border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg font-bold">服装信息</CardTitle>
|
||
<CardDescription>编辑服装的基本信息</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid gap-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name">服装名称</Label>
|
||
<Input id="name" defaultValue={outfit.name} className="border-gray-300 focus-visible:ring-pink-500" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="type">服装类型</Label>
|
||
<Select
|
||
defaultValue={
|
||
outfit.type === "常规"
|
||
? "regular"
|
||
: outfit.type === "季节限定"
|
||
? "seasonal"
|
||
: outfit.type === "节日限定"
|
||
? "festival"
|
||
: "special"
|
||
}
|
||
>
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="regular">常规</SelectItem>
|
||
<SelectItem value="seasonal">季节限定</SelectItem>
|
||
<SelectItem value="festival">节日限定</SelectItem>
|
||
<SelectItem value="special">特别版</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="rarity">稀有度</Label>
|
||
<Select
|
||
defaultValue={
|
||
outfit.rarity === "普通"
|
||
? "common"
|
||
: outfit.rarity === "稀有"
|
||
? "rare"
|
||
: outfit.rarity === "史诗"
|
||
? "epic"
|
||
: "legendary"
|
||
}
|
||
>
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="common">普通</SelectItem>
|
||
<SelectItem value="rare">稀有</SelectItem>
|
||
<SelectItem value="epic">史诗</SelectItem>
|
||
<SelectItem value="legendary">传说</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="print-quantity">印刷数量</Label>
|
||
<Input
|
||
id="print-quantity"
|
||
type="number"
|
||
defaultValue={outfit.printedCount}
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
disabled
|
||
/>
|
||
<p className="text-xs text-gray-500">印刷数量在批次管理中修改</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="description">服装描述</Label>
|
||
<Textarea
|
||
id="description"
|
||
defaultValue={outfit.description}
|
||
className="min-h-[120px] border-gray-300 focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="p-3 bg-blue-50 rounded-md flex items-start mt-2">
|
||
<AlertTriangle className="h-5 w-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" />
|
||
<p className="text-sm text-blue-700">服装发布后将无法修改基本属性。请确保信息准确无误。</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-between">
|
||
<Button variant="outline" asChild>
|
||
<Link href={`/outfits/${params.id}`}>取消</Link>
|
||
</Button>
|
||
<div className="flex space-x-2">
|
||
<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">
|
||
<Save className="mr-2 h-4 w-4" />
|
||
保存修改
|
||
</Button>
|
||
</div>
|
||
</CardFooter>
|
||
</Card>
|
||
</div>
|
||
</DashboardShell>
|
||
)
|
||
}
|