489 lines
23 KiB
TypeScript
489 lines
23 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Search, Edit, Eye, Sparkles, Plus } from "lucide-react"
|
||
import Link from "next/link"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
|
||
export default function OutfitsPage() {
|
||
// 直接在页面中实现对话框
|
||
const [open, setOpen] = useState(false)
|
||
const [step, setStep] = useState(1)
|
||
const [outfitType, setOutfitType] = useState("")
|
||
const [rarity, setRarity] = useState("")
|
||
const [printQuantity, setPrintQuantity] = useState(1000)
|
||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||
|
||
const handleSubmit = async () => {
|
||
setIsSubmitting(true)
|
||
// 模拟API请求
|
||
await new Promise((resolve) => setTimeout(resolve, 1500))
|
||
setIsSubmitting(false)
|
||
setOpen(false)
|
||
// 重置表单
|
||
setStep(1)
|
||
}
|
||
|
||
const handleNext = () => {
|
||
setStep(step + 1)
|
||
}
|
||
|
||
const handleBack = () => {
|
||
setStep(step - 1)
|
||
}
|
||
|
||
return (
|
||
<DashboardShell>
|
||
<DashboardHeader heading="服装管理" text="管理洛天依的服装卡牌">
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<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-[600px]">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
添加新服装
|
||
</DialogTitle>
|
||
<DialogDescription>填写服装信息以创建新的服装卡牌。创建后将生成唯一的卡牌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"
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="type" className="text-right">
|
||
服装类型 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Select value={outfitType} onValueChange={setOutfitType} required>
|
||
<SelectTrigger className="border-gray-300 focus:ring-pink-500">
|
||
<SelectValue placeholder="选择服装类型" />
|
||
</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" 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="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" className="text-right">
|
||
印刷数量 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="print-quantity"
|
||
type="number"
|
||
min={1}
|
||
value={printQuantity}
|
||
onChange={(e) => setPrintQuantity(Number.parseInt(e.target.value))}
|
||
placeholder="输入印刷数量"
|
||
className="border-gray-300 focus-visible:ring-pink-500"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="description" className="text-right">
|
||
服装描述 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Textarea
|
||
id="description"
|
||
placeholder="输入服装描述"
|
||
className="min-h-[100px] border-gray-300 focus-visible:ring-pink-500"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter className="flex items-center justify-between mt-2">
|
||
<Button variant="outline" onClick={() => setOpen(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 ? "创建中..." : "创建服装"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</DashboardHeader>
|
||
|
||
<div className="flex items-center justify-between space-y-2 mb-6">
|
||
<div className="flex items-center space-x-2">
|
||
<div className="relative">
|
||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||
<Input
|
||
type="search"
|
||
placeholder="搜索服装..."
|
||
className="w-[300px] pl-8 border-none bg-white shadow-md focus-visible:ring-pink-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Tabs defaultValue="all" className="space-y-4">
|
||
<TabsList className="bg-white p-1 shadow-md rounded-lg border">
|
||
<TabsTrigger
|
||
value="all"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
全部服装
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="published"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
已发布
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="unpublished"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
未发布
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="limited"
|
||
className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-pink-500 data-[state=active]:to-purple-600 data-[state=active]:text-white rounded-md transition-all duration-300"
|
||
>
|
||
限定服装
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="all" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
服装列表
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>管理所有洛天依的服装卡牌</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Table>
|
||
<TableHeader className="bg-gray-50">
|
||
<TableRow>
|
||
<TableHead className="w-[100px]">ID</TableHead>
|
||
<TableHead>服装名称</TableHead>
|
||
<TableHead>类型</TableHead>
|
||
<TableHead>发布日期</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>激活数量</TableHead>
|
||
<TableHead>印刷数量</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT001</TableCell>
|
||
<TableCell className="font-medium text-pink-600">经典原创服装</TableCell>
|
||
<TableCell>常规</TableCell>
|
||
<TableCell>2023-10-15</TableCell>
|
||
<TableCell>
|
||
<Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
|
||
</TableCell>
|
||
<TableCell className="font-medium">1,245</TableCell>
|
||
<TableCell className="font-medium">2,000</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT001">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT002</TableCell>
|
||
<TableCell className="font-medium text-blue-600">夏日泳装</TableCell>
|
||
<TableCell>季节限定</TableCell>
|
||
<TableCell>2023-06-01</TableCell>
|
||
<TableCell>
|
||
<Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
|
||
</TableCell>
|
||
<TableCell className="font-medium">876</TableCell>
|
||
<TableCell className="font-medium">1,500</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT002">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT003</TableCell>
|
||
<TableCell className="font-medium text-red-600">冬日圣诞服</TableCell>
|
||
<TableCell>节日限定</TableCell>
|
||
<TableCell>2023-12-01</TableCell>
|
||
<TableCell>
|
||
<Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
|
||
</TableCell>
|
||
<TableCell className="font-medium">1,032</TableCell>
|
||
<TableCell className="font-medium">2,000</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT003">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT004</TableCell>
|
||
<TableCell className="font-medium text-purple-600">校园制服</TableCell>
|
||
<TableCell>常规</TableCell>
|
||
<TableCell>2024-01-15</TableCell>
|
||
<TableCell>
|
||
<Badge className="bg-green-500 hover:bg-green-600">已发布</Badge>
|
||
</TableCell>
|
||
<TableCell className="font-medium">1,567</TableCell>
|
||
<TableCell className="font-medium">3,000</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT004">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT005</TableCell>
|
||
<TableCell className="font-medium text-teal-600">演唱会礼服</TableCell>
|
||
<TableCell>特别版</TableCell>
|
||
<TableCell>-</TableCell>
|
||
<TableCell>
|
||
<Badge variant="outline" className="text-gray-500 border-gray-300">
|
||
未发布
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell className="font-medium">0</TableCell>
|
||
<TableCell className="font-medium">1,000</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT005">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="hover:bg-pink-50 hover:text-pink-600" asChild>
|
||
<Link href="/outfits/edit/OFT005">
|
||
<Edit className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-between">
|
||
<div className="text-sm text-muted-foreground">显示 1-5 共 24 个服装</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
|
||
>
|
||
上一页
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="hover:bg-pink-50 hover:text-pink-700 transition-all duration-200"
|
||
>
|
||
下一页
|
||
</Button>
|
||
</div>
|
||
</CardFooter>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="published" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
已发布服装
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>已正式发布的服装，不可修改基本属性</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Table>
|
||
<TableHeader className="bg-gray-50">
|
||
<TableRow>
|
||
<TableHead className="w-[100px]">ID</TableHead>
|
||
<TableHead>服装名称</TableHead>
|
||
<TableHead>类型</TableHead>
|
||
<TableHead>发布日期</TableHead>
|
||
<TableHead>激活数量</TableHead>
|
||
<TableHead>印刷数量</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT001</TableCell>
|
||
<TableCell className="font-medium text-pink-600">经典原创服装</TableCell>
|
||
<TableCell>常规</TableCell>
|
||
<TableCell>2023-10-15</TableCell>
|
||
<TableCell className="font-medium">1,245</TableCell>
|
||
<TableCell className="font-medium">2,000</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT001">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT002</TableCell>
|
||
<TableCell className="font-medium text-blue-600">夏日泳装</TableCell>
|
||
<TableCell>季节限定</TableCell>
|
||
<TableCell>2023-06-01</TableCell>
|
||
<TableCell className="font-medium">876</TableCell>
|
||
<TableCell className="font-medium">1,500</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT002">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="unpublished" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
未发布服装
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>尚未正式发布的服装，可以修改基本属性</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Table>
|
||
<TableHeader className="bg-gray-50">
|
||
<TableRow>
|
||
<TableHead className="w-[100px]">ID</TableHead>
|
||
<TableHead>服装名称</TableHead>
|
||
<TableHead>类型</TableHead>
|
||
<TableHead>印刷数量</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
<TableRow className="hover:bg-gray-50 transition-colors">
|
||
<TableCell className="font-medium">OFT005</TableCell>
|
||
<TableCell className="font-medium text-teal-600">演唱会礼服</TableCell>
|
||
<TableCell>特别版</TableCell>
|
||
<TableCell className="font-medium">1,000</TableCell>
|
||
<TableCell className="text-right">
|
||
<Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600" asChild>
|
||
<Link href="/outfits/OFT005">
|
||
<Eye className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="hover:bg-pink-50 hover:text-pink-600" asChild>
|
||
<Link href="/outfits/edit/OFT005">
|
||
<Edit className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
</TableBody>
|
||
</Table>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="limited" className="space-y-4">
|
||
<Card className="border-none shadow-lg bg-gradient-to-br from-white to-purple-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-bold flex items-center">
|
||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
||
限定服装
|
||
</span>
|
||
<div className="ml-2 h-1 w-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full"></div>
|
||
</CardTitle>
|
||
<CardDescription>限时或特殊活动的限定服装</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex items-center justify-center p-8">
|
||
<div className="flex flex-col items-center text-center">
|
||
<Sparkles className="h-12 w-12 text-blue-500 mb-4" />
|
||
<p className="text-lg font-medium text-gray-700">限定服装列表将在这里显示</p>
|
||
<p className="text-sm text-gray-500 mt-2">您可以查看所有限时或特殊活动的限定服装</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</DashboardShell>
|
||
)
|
||
}
|