|
|
@@ -1,150 +0,0 @@
|
|
|
-import debug from 'debug';
|
|
|
-import React from 'react';
|
|
|
-import { UserIcon, PencilIcon } from '@heroicons/react/24/outline';
|
|
|
-import AvatarUploader from '@/client/mobile/components/AvatarUploader';
|
|
|
-import { useParams, useNavigate } from 'react-router-dom';
|
|
|
-import { useQuery } from '@tanstack/react-query';
|
|
|
-import type { InferResponseType } from 'hono/client';
|
|
|
-import { userClient } from '@/client/api';
|
|
|
-import { useAuth, User } from '@/client/mobile/hooks/AuthProvider';
|
|
|
-import Footer from '@/client/mobile/components/Footer';
|
|
|
-
|
|
|
-const MemberPage: React.FC = () => {
|
|
|
- const navigate = useNavigate();
|
|
|
- const { user, logout } = useAuth();
|
|
|
-
|
|
|
- if (!user) {
|
|
|
- return (
|
|
|
- <div className="text-center py-12">
|
|
|
- <h2 className="text-2xl font-bold text-gray-900 mb-4">用户不存在</h2>
|
|
|
- <button
|
|
|
- onClick={() => navigate('/')}
|
|
|
- className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
|
- >
|
|
|
- 返回首页
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- return (
|
|
|
- <div className="min-h-screen bg-gray-50">
|
|
|
- <div className="container mx-auto px-4 py-8 max-w-4xl">
|
|
|
- {/* 用户资料卡片 */}
|
|
|
- <div className="bg-white rounded-lg shadow-sm p-6 mb-8">
|
|
|
- <div className="flex flex-col items-center">
|
|
|
- <AvatarUploader initialAvatar={user.avatar} />
|
|
|
-
|
|
|
- <h1 className="text-2xl font-bold text-gray-900 mb-1">{user.nickname || user.username}</h1>
|
|
|
-
|
|
|
- <div className="flex space-x-8 my-4">
|
|
|
- <div className="text-center">
|
|
|
- <p className="text-2xl font-semibold text-gray-900">0</p>
|
|
|
- <p className="text-sm text-gray-500">内容</p>
|
|
|
- </div>
|
|
|
- <div className="text-center">
|
|
|
- <p className="text-2xl font-semibold text-gray-900">0</p>
|
|
|
- <p className="text-sm text-gray-500">关注</p>
|
|
|
- </div>
|
|
|
- <div className="text-center">
|
|
|
- <p className="text-2xl font-semibold text-gray-900">0</p>
|
|
|
- <p className="text-sm text-gray-500">粉丝</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="flex">
|
|
|
- <button
|
|
|
- onClick={() => navigate('/profile/edit')}
|
|
|
- className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
|
|
|
- >
|
|
|
- <PencilIcon className="w-4 h-4 mr-2" />
|
|
|
- 编辑资料
|
|
|
- </button>
|
|
|
-
|
|
|
- <button
|
|
|
- onClick={async () => {
|
|
|
- await logout();
|
|
|
- navigate('/');
|
|
|
- }}
|
|
|
- className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ml-4"
|
|
|
- >
|
|
|
- 退出登录
|
|
|
- </button>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- {(user as any).bio && (
|
|
|
- <p className="mt-4 text-center text-gray-600 max-w-lg">
|
|
|
- {(user as any).bio}
|
|
|
- </p>
|
|
|
- )}
|
|
|
-
|
|
|
- <div className="flex items-center mt-4 space-x-4">
|
|
|
- {(user as any).location && (
|
|
|
- <div className="flex items-center text-gray-600">
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
|
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
|
- </svg>
|
|
|
- <span className="text-sm">{(user as any).location}</span>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {(user as any).website && (
|
|
|
- <a
|
|
|
- href={(user as any).website}
|
|
|
- target="_blank"
|
|
|
- rel="noopener noreferrer"
|
|
|
- className="flex items-center text-blue-600 hover:text-blue-800"
|
|
|
- >
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
|
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6v6m0 0v6m0-6h-6" />
|
|
|
- </svg>
|
|
|
- <span className="text-sm truncate max-w-[150px]">{(user as any).website}</span>
|
|
|
- </a>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 用户内容区域 */}
|
|
|
- <div className="bg-white rounded-lg shadow-sm p-6">
|
|
|
- <h2 className="text-xl font-semibold mb-6">个人资料</h2>
|
|
|
-
|
|
|
- <div className="space-y-4">
|
|
|
- <div className="border-b border-gray-100 pb-4">
|
|
|
- <h3 className="text-sm font-medium text-gray-500 mb-1">用户名</h3>
|
|
|
- <p className="text-gray-900">{user.username}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="border-b border-gray-100 pb-4">
|
|
|
- <h3 className="text-sm font-medium text-gray-500 mb-1">电子邮箱</h3>
|
|
|
- <p className="text-gray-900">{user.email || '未设置'}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="border-b border-gray-100 pb-4">
|
|
|
- <h3 className="text-sm font-medium text-gray-500 mb-1">注册时间</h3>
|
|
|
- <p className="text-gray-900">{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '未知'}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="border-b border-gray-100 pb-4">
|
|
|
- <h3 className="text-sm font-medium text-gray-500 mb-1">最后登录</h3>
|
|
|
- <p className="text-gray-900">{user.updatedAt ? new Date(user.updatedAt).toLocaleString() : '从未登录'}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="mt-8">
|
|
|
- <button
|
|
|
- onClick={() => navigate('/profile/security')}
|
|
|
- className="w-full py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
|
- >
|
|
|
- 安全设置
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Footer />
|
|
|
- </div>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-export default MemberPage;
|