121 lines
4.6 KiB
TypeScript
121 lines
4.6 KiB
TypeScript
// src/app/character-center/page.tsx
|
||
// 角色中心页面 - 仅登录用户可访问
|
||
import { getServerSession } from 'next-auth';
|
||
import { authOptions } from '@/lib/api/auth';
|
||
import { redirect } from 'next/navigation';
|
||
import CharacterCenterClient from './CharacterCenterClient';
|
||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
// 角色类型定义
|
||
interface Character {
|
||
id: string;
|
||
name: string;
|
||
skinId: string;
|
||
created: string;
|
||
level: number;
|
||
description?: string;
|
||
isActive: boolean;
|
||
}
|
||
|
||
export default async function CharacterCenter() {
|
||
// 检查用户登录状态
|
||
const session = await getServerSession(authOptions);
|
||
|
||
if (!session) {
|
||
// 未登录用户重定向到登录页面
|
||
redirect('/');
|
||
}
|
||
|
||
// 安全地获取用户信息
|
||
const userName = session.user?.name || '玩家';
|
||
|
||
// 模拟的角色数据
|
||
const characters: Character[] = [];
|
||
|
||
// 渲染客户端组件
|
||
return <CharacterCenterClient userName={userName} characters={characters} />;
|
||
}
|
||
|
||
// 角色卡片组件
|
||
function CharacterCard({ character }: { character: any }) {
|
||
return (
|
||
<Card className="overflow-hidden hover:shadow-lg transition-all duration-300 border-0 shadow-md">
|
||
<div className="relative">
|
||
{/* 角色状态标签 */}
|
||
<div className="absolute top-3 right-3 bg-green-500 text-white text-xs px-2 py-1 rounded-full">
|
||
活跃
|
||
</div>
|
||
|
||
{/* 角色皮肤预览 */}
|
||
<div className="h-48 bg-gradient-to-b from-blue-50 to-green-50 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center p-4">
|
||
<div className="relative w-28 h-48">
|
||
<img
|
||
src="/test-skin.png"
|
||
alt={character.name}
|
||
className="object-contain w-full h-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-xl">{character.name}</CardTitle>
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||
等级 {character.level} • 创建于 {character.created}
|
||
</div>
|
||
</CardHeader>
|
||
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
<div>
|
||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">角色进度</div>
|
||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||
<div
|
||
className="bg-green-600 h-2 rounded-full"
|
||
style={{ width: `${(character.level / 100) * 100}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
|
||
<CardFooter className="flex justify-between border-t pt-4">
|
||
<Button variant="ghost" size="sm" className="text-gray-600 dark:text-gray-300">
|
||
编辑
|
||
</Button>
|
||
<Button size="sm" className="bg-green-600 hover:bg-green-700">
|
||
切换到
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
// 添加角色卡片组件
|
||
function AddCharacterCard() {
|
||
return (
|
||
<Card className="overflow-hidden hover:shadow-lg transition-all duration-300 border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 h-full flex flex-col items-center justify-center p-6 cursor-pointer">
|
||
<div className="text-6xl mb-4">➕</div>
|
||
<h3 className="text-lg font-bold text-gray-700 dark:text-gray-300 mb-2">添加新角色</h3>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center">
|
||
创建一个新的游戏角色
|
||
</p>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
// 统计卡片组件
|
||
function StatCard({ title, value, icon }: { title: string; value: string; icon: string }) {
|
||
return (
|
||
<Card className="border-0 shadow-md">
|
||
<CardHeader>
|
||
<div className="text-4xl mb-2">{icon}</div>
|
||
<CardTitle className="text-lg">{title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-3xl font-bold">{value}</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
} |