兴趣小组、好友动态
Change-Id: I7aa713600dea31eb2cd5b32ecc4e257b2bbd8be1
diff --git a/src/pages/UserInfo/UserInfo.jsx b/src/pages/UserInfo/UserInfo.jsx
index a50e81b..80aab84 100644
--- a/src/pages/UserInfo/UserInfo.jsx
+++ b/src/pages/UserInfo/UserInfo.jsx
@@ -1,9 +1,86 @@
-// src/pages/UserInfo.js
+// // 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 DEFAULT_AVATAR_URL = '/default-avatar.png';
const UserInfo = () => {
const [location] = useLocation();
@@ -16,10 +93,8 @@
try {
setError(null);
const { data: raw } = await axios.get(`/echo/user/${userId}/getProfile`);
-
if (!raw) {
setError('用户数据为空');
- setUserInfo(null);
return;
}
@@ -43,30 +118,33 @@
setUserInfo(profile);
} catch (err) {
setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
- setUserInfo(null);
}
};
fetchUserInfo();
}, [userId]);
- if (error) return <p>{error}</p>;
- if (!userInfo) return <p>加载中...</p>;
+ if (error) return <p className="error">{error}</p>;
+ if (!userInfo) return <p className="loading">加载中...</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 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>
);
};