|
|
@@ -1,234 +0,0 @@
|
|
|
-import React from 'react';
|
|
|
-import { useNavigate } from 'react-router-dom';
|
|
|
-import { useAuth } from '@/client/home-shadcn/hooks/AuthProvider';
|
|
|
-import { Button } from '@/client/components/ui/button';
|
|
|
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
|
|
|
-import { Avatar, AvatarFallback, AvatarImage } from '@/client/components/ui/avatar';
|
|
|
-import { Badge } from '@/client/components/ui/badge';
|
|
|
-import { Separator } from '@/client/components/ui/separator';
|
|
|
-import {
|
|
|
- User,
|
|
|
- MapPin,
|
|
|
- Globe,
|
|
|
- Calendar,
|
|
|
- LogOut,
|
|
|
- Settings,
|
|
|
- UserCog,
|
|
|
- ShieldCheck,
|
|
|
- Clock
|
|
|
-} from 'lucide-react';
|
|
|
-import { format } from 'date-fns';
|
|
|
-import { zhCN } from 'date-fns/locale';
|
|
|
-
|
|
|
-const MemberPage: React.FC = () => {
|
|
|
- const navigate = useNavigate();
|
|
|
- const { user, logout } = useAuth();
|
|
|
-
|
|
|
- if (!user) {
|
|
|
- return (
|
|
|
- <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 px-4">
|
|
|
- <Card className="max-w-md">
|
|
|
- <CardHeader>
|
|
|
- <CardTitle>用户不存在</CardTitle>
|
|
|
- <CardDescription>请先登录后再访问此页面</CardDescription>
|
|
|
- </CardHeader>
|
|
|
- <CardContent>
|
|
|
- <Button onClick={() => navigate('/')} className="w-full">
|
|
|
- 返回首页
|
|
|
- </Button>
|
|
|
- </CardContent>
|
|
|
- </Card>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- return (
|
|
|
- <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
|
|
|
- <div className="container mx-auto py-8">
|
|
|
- <div className="mx-auto max-w-4xl space-y-8">
|
|
|
- {/* 用户资料卡片 */}
|
|
|
- <Card className="border-0 shadow-lg">
|
|
|
- <CardContent className="pt-6">
|
|
|
- <div className="flex flex-col items-center space-y-4">
|
|
|
- <Avatar className="h-24 w-24">
|
|
|
- <AvatarImage
|
|
|
- src={user.avatar || `https://avatar.vercel.sh/${user.username}`}
|
|
|
- alt={user.nickname || user.username}
|
|
|
- />
|
|
|
- <AvatarFallback className="text-2xl bg-primary text-primary-foreground">
|
|
|
- {user.username?.charAt(0).toUpperCase()}
|
|
|
- </AvatarFallback>
|
|
|
- </Avatar>
|
|
|
-
|
|
|
- <div className="text-center space-y-2">
|
|
|
- <h1 className="text-3xl font-bold">{user.nickname || user.username}</h1>
|
|
|
- <p className="text-muted-foreground">@{user.username}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="flex items-center space-x-4">
|
|
|
- <div className="text-center">
|
|
|
- <p className="text-2xl font-bold">0</p>
|
|
|
- <p className="text-sm text-muted-foreground">内容</p>
|
|
|
- </div>
|
|
|
- <Separator orientation="vertical" className="h-8" />
|
|
|
- <div className="text-center">
|
|
|
- <p className="text-2xl font-bold">0</p>
|
|
|
- <p className="text-sm text-muted-foreground">关注</p>
|
|
|
- </div>
|
|
|
- <Separator orientation="vertical" className="h-8" />
|
|
|
- <div className="text-center">
|
|
|
- <p className="text-2xl font-bold">0</p>
|
|
|
- <p className="text-sm text-muted-foreground">粉丝</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="flex items-center space-x-2">
|
|
|
- <Button
|
|
|
- onClick={() => navigate('/profile/edit')}
|
|
|
- className="flex items-center space-x-2"
|
|
|
- >
|
|
|
- <UserCog className="h-4 w-4" />
|
|
|
- <span>编辑资料</span>
|
|
|
- </Button>
|
|
|
-
|
|
|
- <Button
|
|
|
- variant="outline"
|
|
|
- onClick={async () => {
|
|
|
- await logout();
|
|
|
- navigate('/');
|
|
|
- }}
|
|
|
- className="flex items-center space-x-2"
|
|
|
- >
|
|
|
- <LogOut className="h-4 w-4" />
|
|
|
- <span>退出登录</span>
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </CardContent>
|
|
|
- </Card>
|
|
|
-
|
|
|
- {/* 个人资料详情 */}
|
|
|
- <Card className="border-0 shadow-lg">
|
|
|
- <CardHeader>
|
|
|
- <CardTitle className="flex items-center space-x-2">
|
|
|
- <User className="h-5 w-5" />
|
|
|
- <span>个人资料</span>
|
|
|
- </CardTitle>
|
|
|
- </CardHeader>
|
|
|
- <CardContent className="space-y-6">
|
|
|
- <div className="grid gap-4">
|
|
|
- <div className="space-y-1">
|
|
|
- <div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
|
- <User className="h-4 w-4" />
|
|
|
- <span>用户名</span>
|
|
|
- </div>
|
|
|
- <p className="font-medium">{user.username}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="space-y-1">
|
|
|
- <div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
|
- <ShieldCheck className="h-4 w-4" />
|
|
|
- <span>邮箱</span>
|
|
|
- </div>
|
|
|
- <p className="font-medium">{user.email || '未设置'}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- {(user as any).location && (
|
|
|
- <div className="space-y-1">
|
|
|
- <div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
|
- <MapPin className="h-4 w-4" />
|
|
|
- <span>位置</span>
|
|
|
- </div>
|
|
|
- <p className="font-medium">{(user as any).location}</p>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- {(user as any).website && (
|
|
|
- <div className="space-y-1">
|
|
|
- <div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
|
- <Globe className="h-4 w-4" />
|
|
|
- <span>网站</span>
|
|
|
- </div>
|
|
|
- <a
|
|
|
- href={(user as any).website}
|
|
|
- target="_blank"
|
|
|
- rel="noopener noreferrer"
|
|
|
- className="font-medium text-primary hover:underline"
|
|
|
- >
|
|
|
- {(user as any).website}
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- {(user as any).bio && (
|
|
|
- <div className="space-y-1">
|
|
|
- <div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
|
- <User className="h-4 w-4" />
|
|
|
- <span>个人简介</span>
|
|
|
- </div>
|
|
|
- <p className="font-medium">{(user as any).bio}</p>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
-
|
|
|
- <Separator />
|
|
|
-
|
|
|
- <div className="grid gap-4 md:grid-cols-2">
|
|
|
- <div className="space-y-1">
|
|
|
- <div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
|
- <Calendar className="h-4 w-4" />
|
|
|
- <span>注册时间</span>
|
|
|
- </div>
|
|
|
- <p className="font-medium">
|
|
|
- {user.createdAt ? format(new Date(user.createdAt), 'yyyy年MM月dd日', { locale: zhCN }) : '未知'}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="space-y-1">
|
|
|
- <div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
|
- <Clock className="h-4 w-4" />
|
|
|
- <span>最后登录</span>
|
|
|
- </div>
|
|
|
- <p className="font-medium">
|
|
|
- {user.updatedAt ? format(new Date(user.updatedAt), 'yyyy年MM月dd日 HH:mm', { locale: zhCN }) : '从未登录'}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </CardContent>
|
|
|
- </Card>
|
|
|
-
|
|
|
- {/* 设置区域 */}
|
|
|
- <Card className="border-0 shadow-lg">
|
|
|
- <CardHeader>
|
|
|
- <CardTitle className="flex items-center space-x-2">
|
|
|
- <Settings className="h-5 w-5" />
|
|
|
- <span>账号设置</span>
|
|
|
- </CardTitle>
|
|
|
- </CardHeader>
|
|
|
- <CardContent className="space-y-4">
|
|
|
- <Button
|
|
|
- variant="outline"
|
|
|
- className="w-full justify-start"
|
|
|
- onClick={() => navigate('/profile/security')}
|
|
|
- >
|
|
|
- <ShieldCheck className="h-4 w-4 mr-2" />
|
|
|
- <span>安全设置</span>
|
|
|
- </Button>
|
|
|
-
|
|
|
- <Button
|
|
|
- variant="outline"
|
|
|
- className="w-full justify-start"
|
|
|
- onClick={() => navigate('/profile/preferences')}
|
|
|
- >
|
|
|
- <Settings className="h-4 w-4 mr-2" />
|
|
|
- <span>偏好设置</span>
|
|
|
- </Button>
|
|
|
- </CardContent>
|
|
|
- </Card>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-export default MemberPage;
|