src/pages/UserInfo/UserInfo.jsx

// // src/pages/UserInfo.js
// import React, { useEffect, useState } from 'react';
// import axios from 'axios';
// import { useLocation } from 'wouter';

// const DEFAULT_AVATAR_URL = '/default-avatar.png'; // 替换为你的默认头像地址

// const UserInfo = () => {
//   const [location] = useLocation();
//   const userId = location.split('/').pop();
//   const [userInfo, setUserInfo] = useState(null);
//   const [error, setError] = useState(null);

//   useEffect(() => {
//     const fetchUserInfo = async () => {
//       try {
//         setError(null);
//         const { data: raw } = await axios.get(`/echo/user/${userId}/getProfile`);

//         if (!raw) {
//           setError('用户数据为空');
//           setUserInfo(null);
//           return;
//         }

//         const profile = {
//           avatarUrl: raw.avatarUrl
//             ? `${process.env.REACT_APP_AVATAR_BASE_URL}${raw.avatarUrl}`
//             : DEFAULT_AVATAR_URL,
//           nickname: raw.username || '未知用户',
//           email: raw.email || '未填写',
//           gender: raw.gender || '保密',
//           bio: raw.description || '无',
//           interests: raw.hobbies ? raw.hobbies.split(',') : [],
//           level: raw.level || '未知',
//           experience: raw.experience ?? 0,
//           uploadAmount: raw.uploadCount ?? 0,
//           downloadAmount: raw.downloadCount ?? 0,
//           shareRate: raw.shareRate ?? 0,
//           joinedDate: raw.registrationTime,
//         };

//         setUserInfo(profile);
//       } catch (err) {
//         setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
//         setUserInfo(null);
//       }
//     };

//     fetchUserInfo();
//   }, [userId]);

//   if (error) return <p>{error}</p>;
//   if (!userInfo) return <p>加载中...</p>;

//   return (
//     <div className="user-profile">
//       <img src={userInfo.avatarUrl} alt="头像" />
//       <h2>{userInfo.nickname}</h2>
//       <p>邮箱：{userInfo.email}</p>
//       <p>性别：{userInfo.gender}</p>
//       <p>简介：{userInfo.bio}</p>
//       <p>兴趣爱好：{userInfo.interests.join('、')}</p>
//       <p>等级：{userInfo.level}</p>
//       <p>经验值：{userInfo.experience}</p>
//       <p>上传量：{userInfo.uploadAmount}</p>
//       <p>下载量：{userInfo.downloadAmount}</p>
//       <p>分享率：{userInfo.shareRate}</p>
//       <p>注册时间：{userInfo.joinedDate}</p>
//     </div>
//   );
// };

// export default UserInfo;


// src/pages/UserInfo.jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useLocation } from 'wouter';
import './UserInfo.css';

const DEFAULT_AVATAR_URL = '/default-avatar.png';

const UserInfo = () => {
  const [location] = useLocation();
  const userId = location.split('/').pop();
  const [userInfo, setUserInfo] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        setError(null);
        const { data: raw } = await axios.get(`/echo/user/${userId}/getProfile`);
        if (!raw) {
          setError('用户数据为空');
          return;
        }

        const profile = {
          avatarUrl: raw.avatarUrl
            ? `${process.env.REACT_APP_AVATAR_BASE_URL}${raw.avatarUrl}`
            : DEFAULT_AVATAR_URL,
          nickname: raw.username || '未知用户',
          email: raw.email || '未填写',
          gender: raw.gender || '保密',
          bio: raw.description || '无',
          interests: raw.hobbies ? raw.hobbies.split(',') : [],
          level: raw.level || '未知',
          experience: raw.experience ?? 0,
          uploadAmount: raw.uploadCount ?? 0,
          downloadAmount: raw.downloadCount ?? 0,
          shareRate: raw.shareRate ?? 0,
          joinedDate: raw.registrationTime,
        };

        setUserInfo(profile);
      } catch (err) {
        setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
      }
    };

    fetchUserInfo();
  }, [userId]);

  if (error) return <p className="error">{error}</p>;
  if (!userInfo) return <p className="loading">加载中...</p>;

  return (
    <div className="user-info-container">
      <div className="user-card">
        <img className="avatar" src={userInfo.avatarUrl} alt="用户头像" />
        <h2 className="nickname">{userInfo.nickname}</h2>
        <p className="bio">{userInfo.bio}</p>
        <div className="details">
          <p><strong>邮箱：</strong>{userInfo.email}</p>
          <p><strong>性别：</strong>{userInfo.gender}</p>
          <p><strong>兴趣爱好：</strong>{userInfo.interests.join('、')}</p>
          <p><strong>等级：</strong>{userInfo.level}</p>
          <p><strong>经验值：</strong>{userInfo.experience}</p>
          <p><strong>上传量：</strong>{userInfo.uploadAmount}</p>
          <p><strong>下载量：</strong>{userInfo.downloadAmount}</p>
          <p><strong>分享率：</strong>{userInfo.shareRate}</p>
          <p><strong>注册时间：</strong>{userInfo.joinedDate}</p>
        </div>
      </div>
    </div>
  );
};

export default UserInfo;