添加好友
Change-Id: Ie5fce9d41fc7b84c03248c54be8e67853ff509d5
diff --git a/src/pages/UserInfo/UserInfo.jsx b/src/pages/UserInfo/UserInfo.jsx
new file mode 100644
index 0000000..a50e81b
--- /dev/null
+++ b/src/pages/UserInfo/UserInfo.jsx
@@ -0,0 +1,74 @@
+// 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;