添加好友
Change-Id: Ie5fce9d41fc7b84c03248c54be8e67853ff509d5
diff --git a/src/App.js b/src/App.js
index ecaf5fc..6b65a3a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,7 @@
import UserCollect from './pages/UserCenter/UserCollect';
import UserInvite from './pages/UserCenter/UserInvite';
import SimpleUploader from './pages/PublishSeed/SimpleUploader';
-
+import UserInfo from './pages/UserInfo/UserInfo';
import UserLayout from './pages/UserCenter/UserLayout';
function RedirectToAuth() {
@@ -55,6 +55,8 @@
<Route path="/messages" component={MessagePage} />
<Route path="/promotions" component={PromotionsPage} />
<Route path="/level" component={LevelPage} />
+ <Route path="/information/:userId" component={UserInfo} />
+
{/* 用户中心嵌套路由模拟 */}
<Route path="/user/profile" component={() => (
diff --git a/src/pages/Forum/posts-main/components/PostList.jsx b/src/pages/Forum/posts-main/components/PostList.jsx
index c1d9b7b..f152c87 100644
--- a/src/pages/Forum/posts-main/components/PostList.jsx
+++ b/src/pages/Forum/posts-main/components/PostList.jsx
@@ -146,15 +146,28 @@
return (
<div key={post.postNo} className="post-card" style={{ backgroundColor: '#e9ded2' }}>
- <div className="user-info">
+ {/* <div className="user-info">
<img
className="avatar"
src={post.avatarUrl}
alt="头像"
/>
<span className="nickname" style={{ color: '#755e50' }}>{post.username}</span>
+ </div> */}
+
+ <div className="user-info">
+ <Link href={`/information/${post.user_id}`}>
+ <img
+ className="avatar"
+ src={post.avatarUrl}
+ alt="头像"
+ style={{ cursor: 'pointer' }}
+ />
+ </Link>
+ <span className="nickname" style={{ color: '#755e50' }}>{post.username}</span>
</div>
+
{coverImage && <img className="cover-image" src={coverImage} alt="封面" />}
<h3 style={{ color: '#000000' }}>{post.title || '无标题'}</h3>
diff --git a/src/pages/UserCenter/UserFriends.jsx b/src/pages/UserCenter/UserFriends.jsx
index e1c9789..5540911 100644
--- a/src/pages/UserCenter/UserFriends.jsx
+++ b/src/pages/UserCenter/UserFriends.jsx
@@ -226,6 +226,8 @@
const [loadingMessages, setLoadingMessages] = useState(false);
const [messagesError, setMessagesError] = useState(null);
+ const [email, setEmail] = useState('');
+
useEffect(() => {
if (loading) return;
@@ -320,12 +322,26 @@
}
};
+ const handleSubmit = async () => {
+ const res = await axios.post(`/echo/user/addFriend`, { email: email, userid: user.userId });
+ console.log(res);
+ const response = await axios.get(`/echo/user/${user.userId}/friends`);
+ setFriends(response.data || []);
+ alert(res.data.msg);
+ }
+
if (loading) return <p>正在加载...</p>;
if (error) return <p className="error">{error}</p>;
return (
<div className="user-subpage-card">
<h2>我的好友</h2>
+ <div>
+ <input type="text" value={email} placeholder="请输入好友邮箱" onChange={e => setEmail(e.target.value)} />
+ <button className="btn submit" onClick={handleSubmit}>
+ 添加
+ </button>
+ </div>
<div className="friends-list">
{friends.length === 0 && <p>暂无好友</p>}
{friends.map((friend) => (
diff --git a/src/pages/UserCenter/UserProfile.jsx b/src/pages/UserCenter/UserProfile.jsx
index 902fbb7..de523bd 100644
--- a/src/pages/UserCenter/UserProfile.jsx
+++ b/src/pages/UserCenter/UserProfile.jsx
@@ -1,158 +1,3 @@
-// import React, { useEffect, useState } from 'react';
-// import axios from 'axios';
-// import './UserProfile.css';
-// import UserNav from './UserNav';
-// import Header from '../../components/Header';
-// import { useUser } from '../../context/UserContext';
-
-// const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
-
-// const UserProfile = () => {
-// const { user, loading } = useUser();
-// const [userProfile, setUserProfile] = useState(null);
-// const [error, setError] = useState(null);
-
-// useEffect(() => {
-// if (loading) return;
-// if (!user || !user.userId) {
-// setError('未登录或用户信息缺失');
-// setUserProfile(null);
-// return;
-// }
-
-// const fetchUserProfile = async () => {
-// try {
-// setError(null);
-// const { data: raw } = await axios.get(`/echo/user/${user.userId}/getProfile`);
-
-// if (!raw) {
-// setError('用户数据为空');
-// setUserProfile(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,
-// };
-
-// setUserProfile(profile);
-// } catch (err) {
-// setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
-// setUserProfile(null);
-// }
-// };
-
-// fetchUserProfile();
-// }, [user, loading]);
-
-// const handleAvatarUpload = async (e) => {
-// const file = e.target.files[0];
-// if (!file) return;
-
-// const formData = new FormData();
-// formData.append('file', file);
-
-// try {
-// const { data } = await axios.post(
-// `/echo/user/${user.userId}/uploadAvatar`,
-// formData,
-// { headers: { 'Content-Type': 'multipart/form-data' } }
-// );
-
-// if (data?.avatarUrl) {
-// setUserProfile((prev) => ({
-// ...prev,
-// avatarUrl: `${process.env.REACT_APP_AVATAR_BASE_URL}${data.avatarUrl}`,
-// }));
-// alert('头像上传成功');
-// } else {
-// alert('头像上传成功，但未返回新头像地址');
-// }
-// } catch (err) {
-// console.error('上传失败:', err);
-// alert('头像上传失败，请重试');
-// }
-// };
-
-// if (loading) return <p>正在加载用户信息...</p>;
-// if (error) return <p className="error">{error}</p>;
-// if (!userProfile) return null;
-
-// const {
-// avatarUrl,
-// nickname,
-// email,
-// gender,
-// bio,
-// interests,
-// level,
-// experience,
-// uploadAmount,
-// downloadAmount,
-// shareRate,
-// joinedDate,
-// } = userProfile;
-
-// return (
-// <div className="user-profile-container">
-// <Header />
-// <div className="user-center">
-// <div className="user-nav-container">
-// <UserNav />
-// </div>
-// <div className="common-card">
-// <div className="right-content">
-// <div className="profile-header">
-// <div className="avatar-wrapper">
-// <img src={avatarUrl} alt={nickname} className="avatar" />
-// <label htmlFor="avatar-upload" className="avatar-upload-label">
-// 上传头像
-// </label>
-// <input
-// type="file"
-// id="avatar-upload"
-// accept="image/*"
-// style={{ display: 'none' }}
-// onChange={handleAvatarUpload}
-// />
-// </div>
-// <h1>{nickname}</h1>
-// </div>
-
-// <div className="profile-details">
-// <p><strong>邮箱：</strong>{email}</p>
-// <p><strong>性别：</strong>{gender}</p>
-// <p><strong>个人简介：</strong>{bio}</p>
-// <p><strong>兴趣：</strong>{interests.length > 0 ? interests.join(', ') : '无'}</p>
-// <p><strong>等级：</strong>{level}</p>
-// <p><strong>经验：</strong>{experience}</p>
-// <p><strong>上传量：</strong>{uploadAmount}</p>
-// <p><strong>下载量：</strong>{downloadAmount}</p>
-// <p><strong>分享率：</strong>{(shareRate * 100).toFixed(2)}%</p>
-// <p><strong>加入时间：</strong>{new Date(joinedDate).toLocaleDateString()}</p>
-// </div>
-// </div>
-// </div>
-// </div>
-// </div>
-// );
-// };
-
-// export default UserProfile;
-
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './UserProfile.css';
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;