d8d-vite-starter/src/client/home/pages/MemberPage.tsx

import debug from 'debug';
const rpcLogger = debug('frontend:api:rpc');
import React, { useEffect, useState } from 'react';
import { UserIcon, PencilIcon } from '@heroicons/react/24/outline';
import { useParams, useNavigate } from 'react-router-dom';
import { userClient } from '@/client/api';
import { useAuth } from '@/client/home/hooks/AuthProvider';
import type { UserEntity } from '@/server/modules/users/user.entity';

const MemberPage: React.FC = () => {
  const [user, setUser] = useState<UserEntity | null>(null);
  const [loading, setLoading] = useState(true);
  const { id: userId } = useParams<{ id: string }>();
  const id = Number(userId);
  const navigate = useNavigate();
  const { user: currentUser } = useAuth();

  // 获取用户资料
  const fetchUserProfile = async () => {
    if (!id) return;
    
    try {
      setLoading(true);
      rpcLogger('Fetching user profile for id: %s', id);
      const response = await userClient[':id'].$get({
        param: { id }
      });
      
      if (!response.ok) throw new Error('获取用户资料失败');
      
      const userData = await response.json();
      setUser(userData);
    } catch (error) {
      console.error('Error fetching user profile:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUserProfile();
  }, [id]);

  if (loading) {
    return (
      <div className="flex justify-center items-center min-h-[50vh]">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
      </div>
    );
  }

  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">
            <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center mb-4">
              {user.avatar ? (
                <img src={user.avatar} alt={user.nickname || user.username} className="h-full w-full object-cover rounded-full" />
              ) : (
                <UserIcon className="h-12 w-12 text-gray-500" />
              )}
            </div>
            
            <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>
            
            {currentUser && currentUser.id === user.id && (
              <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>
            )}
            
            {(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>
    </div>
  );
};

export default MemberPage;