470 lines
18 KiB
TypeScript
470 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { DashboardHeader } from "@/components/dashboard-header"
|
|
import { DashboardShell } from "@/components/dashboard-shell"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import {
|
|
Award,
|
|
Search,
|
|
MoreHorizontal,
|
|
Edit,
|
|
Trash2,
|
|
Trophy,
|
|
Filter,
|
|
ArrowUpDown,
|
|
Zap,
|
|
Heart,
|
|
Coins,
|
|
Gift,
|
|
Shirt,
|
|
BadgeCheck,
|
|
} from "lucide-react"
|
|
import { toast } from "@/components/ui/use-toast"
|
|
import { AddAchievementDialog } from "@/components/achievements/add-achievement-dialog"
|
|
import { AchievementDetailDialog } from "@/components/achievements/achievement-detail-dialog"
|
|
import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
|
|
import type { Achievement } from "@/lib/api/types"
|
|
|
|
export default function AchievementsPage() {
|
|
const [achievements, setAchievements] = useState<Achievement[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [activeTab, setActiveTab] = useState("all")
|
|
|
|
useEffect(() => {
|
|
fetchAchievements()
|
|
}, [])
|
|
|
|
const fetchAchievements = async () => {
|
|
setLoading(true)
|
|
try {
|
|
// 模拟API调用
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
|
// 这里应该是实际的API调用
|
|
// const response = await fetch('/api/achievements')
|
|
// const data = await response.json()
|
|
|
|
// 使用模拟数据
|
|
const mockData = [
|
|
{
|
|
id: "1",
|
|
name: "初次见面",
|
|
description: "第一次与洛天依对话",
|
|
icon: "message-circle",
|
|
category: "互动",
|
|
requirement: "与洛天依进行第一次对话",
|
|
rewardType: "经验值",
|
|
rewardAmount: 100,
|
|
rewardIcon: "zap",
|
|
isHidden: false,
|
|
unlockRate: 98.5,
|
|
createdAt: "2023-01-01",
|
|
updatedAt: "2023-01-01",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "亲密无间",
|
|
description: "与洛天依好感度达到80",
|
|
icon: "heart",
|
|
category: "好感度",
|
|
requirement: "将洛天依的好感度提升至80",
|
|
rewardType: "虚拟币",
|
|
rewardAmount: 500,
|
|
rewardIcon: "coins",
|
|
isHidden: false,
|
|
unlockRate: 45.2,
|
|
createdAt: "2023-01-02",
|
|
updatedAt: "2023-01-02",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "形影不离",
|
|
description: "与洛天依好感度达到100",
|
|
icon: "heart-handshake",
|
|
category: "好感度",
|
|
requirement: "将洛天依的好感度提升至100",
|
|
rewardType: "称号",
|
|
rewardAmount: 1,
|
|
rewardIcon: "badge",
|
|
isHidden: false,
|
|
unlockRate: 12.8,
|
|
createdAt: "2023-01-03",
|
|
updatedAt: "2023-01-03",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "热情如火",
|
|
description: "与洛天依单日互动达到50次",
|
|
icon: "flame",
|
|
category: "互动",
|
|
requirement: "在一天内与洛天依互动50次",
|
|
rewardType: "好感度",
|
|
rewardAmount: 20,
|
|
rewardIcon: "heart",
|
|
isHidden: false,
|
|
unlockRate: 23.7,
|
|
createdAt: "2023-01-04",
|
|
updatedAt: "2023-01-04",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "坚持不懈",
|
|
description: "连续7天与洛天依互动",
|
|
icon: "calendar-check",
|
|
category: "互动",
|
|
requirement: "连续7天每天至少与洛天依互动1次",
|
|
rewardType: "道具",
|
|
rewardAmount: 1,
|
|
rewardIcon: "gift",
|
|
isHidden: false,
|
|
unlockRate: 34.1,
|
|
createdAt: "2023-01-05",
|
|
updatedAt: "2023-01-05",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "时尚达人",
|
|
description: "收集10套服装",
|
|
icon: "shirt",
|
|
category: "收集",
|
|
requirement: "收集10套不同的服装",
|
|
rewardType: "服装",
|
|
rewardAmount: 1,
|
|
rewardIcon: "shirt",
|
|
isHidden: false,
|
|
unlockRate: 56.3,
|
|
createdAt: "2023-01-06",
|
|
updatedAt: "2023-01-06",
|
|
},
|
|
{
|
|
id: "7",
|
|
name: "音乐鉴赏家",
|
|
description: "收听20首不同的歌曲",
|
|
icon: "music",
|
|
category: "收集",
|
|
requirement: "收听20首不同的歌曲",
|
|
rewardType: "虚拟币",
|
|
rewardAmount: 300,
|
|
rewardIcon: "coins",
|
|
isHidden: false,
|
|
unlockRate: 42.9,
|
|
createdAt: "2023-01-07",
|
|
updatedAt: "2023-01-07",
|
|
},
|
|
{
|
|
id: "8",
|
|
name: "舞动青春",
|
|
description: "观看10支不同的舞蹈",
|
|
icon: "footprints",
|
|
category: "收集",
|
|
requirement: "观看10支不同的舞蹈表演",
|
|
rewardType: "经验值",
|
|
rewardAmount: 200,
|
|
rewardIcon: "zap",
|
|
isHidden: false,
|
|
unlockRate: 38.5,
|
|
createdAt: "2023-01-08",
|
|
updatedAt: "2023-01-08",
|
|
},
|
|
{
|
|
id: "9",
|
|
name: "美食家",
|
|
description: "收集15种不同的食物",
|
|
icon: "utensils",
|
|
category: "收集",
|
|
requirement: "收集15种不同的食物",
|
|
rewardType: "道具",
|
|
rewardAmount: 1,
|
|
rewardIcon: "gift",
|
|
isHidden: false,
|
|
unlockRate: 27.4,
|
|
createdAt: "2023-01-09",
|
|
updatedAt: "2023-01-09",
|
|
},
|
|
{
|
|
id: "10",
|
|
name: "隐藏的秘密",
|
|
description: "发现洛天依的秘密",
|
|
icon: "sparkles",
|
|
category: "隐藏",
|
|
requirement: "???",
|
|
rewardType: "称号",
|
|
rewardAmount: 1,
|
|
rewardIcon: "badge",
|
|
isHidden: true,
|
|
unlockRate: 5.2,
|
|
createdAt: "2023-01-10",
|
|
updatedAt: "2023-01-10",
|
|
},
|
|
]
|
|
|
|
setAchievements(mockData)
|
|
} catch (error) {
|
|
console.error("获取成就列表失败:", error)
|
|
toast({
|
|
title: "获取失败",
|
|
description: "获取成就列表时发生错误",
|
|
variant: "destructive",
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleDeleteAchievement = async (id: string) => {
|
|
try {
|
|
// 模拟API调用
|
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
|
// 更新本地状态
|
|
setAchievements((prev) => prev.filter((achievement) => achievement.id !== id))
|
|
|
|
toast({
|
|
title: "删除成功",
|
|
description: "成就已成功删除",
|
|
})
|
|
} catch (error) {
|
|
toast({
|
|
title: "删除失败",
|
|
description: "删除成就时发生错误",
|
|
variant: "destructive",
|
|
})
|
|
}
|
|
}
|
|
|
|
const getCategoryColor = (category: string) => {
|
|
switch (category) {
|
|
case "互动":
|
|
return "bg-blue-500"
|
|
case "好感度":
|
|
return "bg-pink-500"
|
|
case "收集":
|
|
return "bg-purple-500"
|
|
case "探索":
|
|
return "bg-green-500"
|
|
case "特殊":
|
|
return "bg-amber-500"
|
|
case "隐藏":
|
|
return "bg-gray-500"
|
|
default:
|
|
return "bg-gray-500"
|
|
}
|
|
}
|
|
|
|
const getRewardIcon = (rewardType: string) => {
|
|
switch (rewardType) {
|
|
case "经验值":
|
|
return <Zap className="h-4 w-4 text-blue-500" />
|
|
case "好感度":
|
|
return <Heart className="h-4 w-4 text-pink-500" />
|
|
case "虚拟币":
|
|
return <Coins className="h-4 w-4 text-amber-500" />
|
|
case "道具":
|
|
return <Gift className="h-4 w-4 text-purple-500" />
|
|
case "服装":
|
|
return <Shirt className="h-4 w-4 text-teal-500" />
|
|
case "称号":
|
|
return <BadgeCheck className="h-4 w-4 text-indigo-500" />
|
|
default:
|
|
return <Gift className="h-4 w-4 text-gray-500" />
|
|
}
|
|
}
|
|
|
|
// 过滤成就
|
|
const filteredAchievements = achievements.filter((achievement) => {
|
|
// 搜索过滤
|
|
const matchesSearch =
|
|
searchQuery === "" ||
|
|
achievement.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
achievement.description.toLowerCase().includes(searchQuery.toLowerCase())
|
|
|
|
// 标签过滤
|
|
const matchesTab =
|
|
activeTab === "all" || (activeTab === "hidden" && achievement.isHidden) || achievement.category === activeTab
|
|
|
|
return matchesSearch && matchesTab
|
|
})
|
|
|
|
return (
|
|
<DashboardShell>
|
|
<DashboardHeader heading="成就管理" text="创建和管理系统成就">
|
|
<AddAchievementDialog onAchievementAdded={fetchAchievements} />
|
|
</DashboardHeader>
|
|
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col md:flex-row gap-4 mb-6">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
|
|
<Input
|
|
placeholder="搜索成就..."
|
|
className="pl-8"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" className="flex gap-1">
|
|
<Filter className="h-4 w-4" />
|
|
<span>筛选</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => setActiveTab("all")}>全部成就</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setActiveTab("互动")}>互动成就</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setActiveTab("好感度")}>好感度成就</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setActiveTab("收集")}>收集成就</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setActiveTab("探索")}>探索成就</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setActiveTab("特殊")}>特殊成就</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => setActiveTab("hidden")}>隐藏成就</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" className="flex gap-1">
|
|
<ArrowUpDown className="h-4 w-4" />
|
|
<span>排序</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>按名称排序</DropdownMenuItem>
|
|
<DropdownMenuItem>按解锁率排序</DropdownMenuItem>
|
|
<DropdownMenuItem>按创建日期排序</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList className="mb-4">
|
|
<TabsTrigger value="all">全部</TabsTrigger>
|
|
<TabsTrigger value="互动">互动</TabsTrigger>
|
|
<TabsTrigger value="好感度">好感度</TabsTrigger>
|
|
<TabsTrigger value="收集">收集</TabsTrigger>
|
|
<TabsTrigger value="探索">探索</TabsTrigger>
|
|
<TabsTrigger value="特殊">特殊</TabsTrigger>
|
|
<TabsTrigger value="hidden">隐藏</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value={activeTab} className="mt-0">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{loading ? (
|
|
// 加载状态
|
|
Array(6)
|
|
.fill(null)
|
|
.map((_, i) => (
|
|
<Card key={i} className="p-4 space-y-3 animate-pulse">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-10 w-10 rounded-full bg-gray-200"></div>
|
|
<div className="space-y-1 flex-1">
|
|
<div className="h-4 w-3/4 bg-gray-200 rounded"></div>
|
|
<div className="h-3 w-1/2 bg-gray-200 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div className="h-16 w-full bg-gray-200 rounded"></div>
|
|
<div className="flex justify-between">
|
|
<div className="h-8 w-20 bg-gray-200 rounded"></div>
|
|
<div className="h-8 w-20 bg-gray-200 rounded"></div>
|
|
</div>
|
|
</Card>
|
|
))
|
|
) : filteredAchievements.length > 0 ? (
|
|
filteredAchievements.map((achievement) => (
|
|
<Card
|
|
key={achievement.id}
|
|
className="overflow-hidden border-none shadow-md hover:shadow-lg transition-all"
|
|
>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-10 w-10 rounded-full bg-amber-100 flex items-center justify-center">
|
|
<Trophy className="h-5 w-5 text-amber-500" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium">{achievement.name}</h3>
|
|
<div className="flex items-center gap-1 mt-0.5">
|
|
<Badge className={getCategoryColor(achievement.category)}>{achievement.category}</Badge>
|
|
{achievement.isHidden && <Badge className="bg-gray-500">隐藏</Badge>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
编辑
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<DeleteConfirmationDialog
|
|
title="删除成就"
|
|
description={`确定要删除成就 "${achievement.name}" 吗？此操作不可撤销。`}
|
|
onConfirm={() => handleDeleteAchievement(achievement.id)}
|
|
trigger={
|
|
<div className="flex items-center text-red-500">
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
删除
|
|
</div>
|
|
}
|
|
/>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-600 mb-3">{achievement.description}</p>
|
|
|
|
<div className="mb-3">
|
|
<div className="flex justify-between text-xs text-gray-500 mb-1">
|
|
<span>解锁率</span>
|
|
<span>{achievement.unlockRate}%</span>
|
|
</div>
|
|
<Progress value={achievement.unlockRate} className="h-2" />
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center gap-1 text-sm">
|
|
<span>奖励:</span>
|
|
<div className="flex items-center gap-1">
|
|
{getRewardIcon(achievement.rewardType)}
|
|
<span>
|
|
{achievement.rewardAmount} {achievement.rewardType}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<AchievementDetailDialog achievement={achievement} onEdit={() => {}} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<div className="col-span-full flex flex-col items-center justify-center py-8 text-center">
|
|
<Award className="h-12 w-12 text-gray-300 mb-2" />
|
|
<h3 className="text-lg font-medium">未找到成就</h3>
|
|
<p className="text-gray-500">没有符合当前筛选条件的成就</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</CardContent>
|
|
</Card>
|
|
</DashboardShell>
|
|
)
|
|
}
|