353 lines
14 KiB
TypeScript
353 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Search, Edit, Video, Eye, Plus, Trash2 } from "lucide-react"
|
||
import { AddDanceDialog } from "@/components/dances/add-dance-dialog"
|
||
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
|
||
import { useToast } from "@/hooks/use-toast"
|
||
import type { Dance } from "@/lib/api/types"
|
||
|
||
// 初始舞蹈数据
|
||
const initialDances: Dance[] = [
|
||
{
|
||
id: "1",
|
||
name: "千本樱",
|
||
choreographer: "洛天依工作室",
|
||
duration: "3:45",
|
||
difficulty: "中等",
|
||
videoUrl: "/placeholder.svg?height=300&width=400",
|
||
coverUrl: "/placeholder.svg?height=300&width=400",
|
||
description: "基于《千本樱》歌曲的经典舞蹈编排，动作流畅优美，适合中等水平的舞者。",
|
||
motionFile: "senbonzakura_motion.fbx",
|
||
category: "日式",
|
||
tags: ["经典", "流行", "日式"],
|
||
createdAt: "2023-01-15T08:30:00Z",
|
||
updatedAt: "2023-02-20T14:15:00Z",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "权御天下",
|
||
choreographer: "洛天依动作组",
|
||
duration: "4:20",
|
||
difficulty: "高级",
|
||
videoUrl: "/placeholder.svg?height=300&width=400",
|
||
coverUrl: "/placeholder.svg?height=300&width=400",
|
||
description: "中国风舞蹈，动作幅度大，需要较高的舞蹈基础，展现古风韵味。",
|
||
motionFile: "quanyutianxia_motion.fbx",
|
||
category: "中国风",
|
||
tags: ["高难度", "中国风", "古风"],
|
||
createdAt: "2023-03-10T10:45:00Z",
|
||
updatedAt: "2023-04-05T16:30:00Z",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "达拉崩吧",
|
||
choreographer: "洛天依舞蹈工作室",
|
||
duration: "3:10",
|
||
difficulty: "初级",
|
||
videoUrl: "/placeholder.svg?height=300&width=400",
|
||
coverUrl: "/placeholder.svg?height=300&width=400",
|
||
description: "轻松欢快的舞蹈，适合初学者，动作简单易学。",
|
||
motionFile: "dalabengba_motion.fbx",
|
||
category: "流行",
|
||
tags: ["简单", "欢快", "流行"],
|
||
createdAt: "2023-05-20T09:15:00Z",
|
||
updatedAt: "2023-05-25T11:20:00Z",
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "普通DISCO",
|
||
choreographer: "洛天依动作设计组",
|
||
duration: "3:30",
|
||
difficulty: "中等",
|
||
videoUrl: "/placeholder.svg?height=300&width=400",
|
||
coverUrl: "/placeholder.svg?height=300&width=400",
|
||
description: "现代disco风格舞蹈，节奏感强，动作活力四射。",
|
||
motionFile: "disco_motion.fbx",
|
||
category: "现代",
|
||
tags: ["活力", "现代", "disco"],
|
||
createdAt: "2023-06-05T14:30:00Z",
|
||
updatedAt: "2023-06-10T17:45:00Z",
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "华灯宴",
|
||
choreographer: "古风舞蹈团队",
|
||
duration: "4:50",
|
||
difficulty: "高级",
|
||
videoUrl: "/placeholder.svg?height=300&width=400",
|
||
coverUrl: "/placeholder.svg?height=300&width=400",
|
||
description: "古风舞蹈，动作优美细腻，需要较高的舞蹈技巧和表现力。",
|
||
motionFile: "hualangyan_motion.fbx",
|
||
category: "中国风",
|
||
tags: ["古风", "优美", "高难度"],
|
||
createdAt: "2023-07-12T11:20:00Z",
|
||
updatedAt: "2023-07-18T13:40:00Z",
|
||
},
|
||
]
|
||
|
||
export default function DancesPage() {
|
||
const { toast } = useToast()
|
||
const router = useRouter()
|
||
const [dances, setDances] = useState<Dance[]>(initialDances)
|
||
const [searchTerm, setSearchTerm] = useState("")
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
|
||
const [danceToEdit, setDanceToEdit] = useState<Dance | undefined>(undefined)
|
||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
|
||
const [danceToDelete, setDanceToDelete] = useState<Dance | null>(null)
|
||
|
||
const itemsPerPage = 5
|
||
|
||
// 过滤和分页
|
||
const filteredDances = dances.filter(
|
||
(dance) =>
|
||
dance.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
dance.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
(dance.choreographer && dance.choreographer.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||
(dance.category && dance.category.toLowerCase().includes(searchTerm.toLowerCase())) ||
|
||
(dance.tags && dance.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase()))),
|
||
)
|
||
|
||
const totalPages = Math.ceil(filteredDances.length / itemsPerPage)
|
||
const paginatedDances = filteredDances.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
|
||
|
||
// 处理添加舞蹈
|
||
const handleAddDance = (newDance: Dance) => {
|
||
setDances((prevDances) => [...prevDances, newDance])
|
||
toast({
|
||
title: "添加成功",
|
||
description: `舞蹈 ${newDance.name} 已成功添加`,
|
||
})
|
||
}
|
||
|
||
// 处理编辑舞蹈
|
||
const handleEditDance = (updatedDance: Dance) => {
|
||
setDances((prevDances) => prevDances.map((dance) => (dance.id === updatedDance.id ? updatedDance : dance)))
|
||
setDanceToEdit(undefined)
|
||
setIsAddDialogOpen(false)
|
||
toast({
|
||
title: "更新成功",
|
||
description: `舞蹈 ${updatedDance.name} 已成功更新`,
|
||
})
|
||
}
|
||
|
||
// 处理删除舞蹈
|
||
const handleDeleteDance = () => {
|
||
if (!danceToDelete) return
|
||
|
||
setDances((prevDances) => prevDances.filter((dance) => dance.id !== danceToDelete.id))
|
||
setDanceToDelete(null)
|
||
setIsDeleteDialogOpen(false)
|
||
toast({
|
||
title: "删除成功",
|
||
description: `舞蹈 ${danceToDelete.name} 已成功删除`,
|
||
variant: "destructive",
|
||
})
|
||
}
|
||
|
||
// 打开编辑对话框
|
||
const openEditDialog = (dance: Dance) => {
|
||
setDanceToEdit(dance)
|
||
setIsAddDialogOpen(true)
|
||
}
|
||
|
||
// 查看舞蹈详情
|
||
const viewDanceDetails = (dance: Dance) => {
|
||
router.push(`/dances/${dance.id}`)
|
||
}
|
||
|
||
// 打开删除确认对话框
|
||
const openDeleteDialog = (dance: Dance) => {
|
||
setDanceToDelete(dance)
|
||
setIsDeleteDialogOpen(true)
|
||
}
|
||
|
||
return (
|
||
<DashboardShell>
|
||
<DashboardHeader heading="舞蹈管理" text="管理洛天依的舞蹈库">
|
||
<Button
|
||
onClick={() => {
|
||
setDanceToEdit(undefined)
|
||
setIsAddDialogOpen(true)
|
||
}}
|
||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
|
||
>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
添加舞蹈
|
||
</Button>
|
||
</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-purple-500"
|
||
value={searchTerm}
|
||
onChange={(e) => {
|
||
setSearchTerm(e.target.value)
|
||
setCurrentPage(1) // 重置到第一页
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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-[50px]"></TableHead>
|
||
<TableHead className="w-[80px]">ID</TableHead>
|
||
<TableHead>舞蹈名称</TableHead>
|
||
<TableHead>编舞者</TableHead>
|
||
<TableHead>难度</TableHead>
|
||
<TableHead>分类</TableHead>
|
||
<TableHead>时长</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{paginatedDances.map((dance) => (
|
||
<TableRow key={dance.id} className="hover:bg-gray-50 transition-colors">
|
||
<TableCell>
|
||
<div className="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
|
||
<Video className="h-4 w-4" />
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="font-medium">{dance.id}</TableCell>
|
||
<TableCell className="font-medium text-purple-600">{dance.name}</TableCell>
|
||
<TableCell>{dance.choreographer || "未知"}</TableCell>
|
||
<TableCell>
|
||
<Badge
|
||
variant="outline"
|
||
className={
|
||
dance.difficulty === "初级"
|
||
? "bg-green-100 text-green-800"
|
||
: dance.difficulty === "中等"
|
||
? "bg-blue-100 text-blue-800"
|
||
: dance.difficulty === "中高级"
|
||
? "bg-yellow-100 text-yellow-800"
|
||
: dance.difficulty === "高级"
|
||
? "bg-orange-100 text-orange-800"
|
||
: dance.difficulty === "专业"
|
||
? "bg-red-100 text-red-800"
|
||
: "bg-gray-100 text-gray-800"
|
||
}
|
||
>
|
||
{dance.difficulty || "未知"}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell>{dance.category || "未分类"}</TableCell>
|
||
<TableCell>{dance.duration || "未知"}</TableCell>
|
||
<TableCell className="text-right">
|
||
<div className="flex justify-end space-x-1">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="hover:bg-purple-50 hover:text-purple-600"
|
||
onClick={() => viewDanceDetails(dance)}
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
<span className="sr-only">查看详情</span>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="hover:bg-purple-50 hover:text-purple-600"
|
||
onClick={() => openEditDialog(dance)}
|
||
>
|
||
<Edit className="h-4 w-4" />
|
||
<span className="sr-only">编辑</span>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="hover:bg-red-50 hover:text-red-600"
|
||
onClick={() => openDeleteDialog(dance)}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
<span className="sr-only">删除</span>
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
|
||
{paginatedDances.length === 0 && (
|
||
<TableRow>
|
||
<TableCell colSpan={8} className="h-24 text-center">
|
||
没有找到匹配的舞蹈
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</CardContent>
|
||
<CardFooter className="flex justify-between">
|
||
<div className="text-sm text-muted-foreground">
|
||
显示 {paginatedDances.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0}-
|
||
{Math.min(currentPage * itemsPerPage, filteredDances.length)} 共 {filteredDances.length} 个舞蹈
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
|
||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||
disabled={currentPage === 1}
|
||
>
|
||
上一页
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="hover:bg-purple-50 hover:text-purple-700 transition-all duration-200"
|
||
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
|
||
disabled={currentPage === totalPages || totalPages === 0}
|
||
>
|
||
下一页
|
||
</Button>
|
||
</div>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
{/* 添加/编辑舞蹈对话框 */}
|
||
<AddDanceDialog
|
||
open={isAddDialogOpen}
|
||
onOpenChange={setIsAddDialogOpen}
|
||
onDanceAdded={danceToEdit ? handleEditDance : handleAddDance}
|
||
editDance={danceToEdit}
|
||
/>
|
||
|
||
{/* 删除确认对话框 */}
|
||
<DeleteConfirmationDialog
|
||
open={isDeleteDialogOpen}
|
||
onOpenChange={setIsDeleteDialogOpen}
|
||
onConfirm={handleDeleteDance}
|
||
title="删除舞蹈"
|
||
description={`确定要删除舞蹈 "${danceToDelete?.name}" 吗？此操作无法撤销。`}
|
||
/>
|
||
</DashboardShell>
|
||
)
|
||
}
|