用户个人中心、兴趣小组
Change-Id: I0e2f3f4ad586f237505613238cbb7bebb6118b63
diff --git a/src/pages/UserCenter/UserProfile.jsx b/src/pages/UserCenter/UserProfile.jsx
index c6e80e0..bd87c99 100644
--- a/src/pages/UserCenter/UserProfile.jsx
+++ b/src/pages/UserCenter/UserProfile.jsx
@@ -1,263 +1,283 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
-import './UserProfile.css';
-import { useUser } from '../../context/UserContext';
-import { useLocation } from 'wouter';
+// import React, { useEffect, useState } from 'react';
+// import axios from 'axios';
+// import './UserProfile.css';
+// import { useUser } from '../../context/UserContext';
+// import { useLocation } from 'wouter';
-const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
+// const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
+
+// const UserProfile = () => {
+// const { user, loading, logout } = useUser();
+// const [userProfile, setUserProfile] = useState(null);
+// const [experienceInfo, setExperienceInfo] = useState(null);
+// const [error, setError] = useState(null);
+
+// // 修改密码状态
+// const [showPwdModal, setShowPwdModal] = useState(false);
+// const [oldPassword, setOldPassword] = useState('');
+// const [newPassword, setNewPassword] = useState('');
+// const [confirmPassword, setConfirmPassword] = useState('');
+
+// // 退出登录
+// const [, setLocation] = useLocation();
+
+// 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);
+// }
+// };
+
+// const fetchExperienceInfo = async () => {
+// try {
+// const { data } = await axios.get('/echo/level/getExperience', {
+// params: { user_id: user.userId },
+// });
+// setExperienceInfo(data);
+// } catch (err) {
+// console.error('经验信息获取失败:', err);
+// }
+// };
+
+// fetchUserProfile();
+// fetchExperienceInfo();
+// }, [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('头像上传失败，请重试');
+// }
+// };
+
+// const handleLogout = () => {
+// logout();
+// setLocation('/auth'); // 退出后跳转登录页
+// // window.location.reload(); // 或跳转登录页
+// };
+
+// const handleChangePassword = async () => {
+// if (!oldPassword || !newPassword || !confirmPassword) {
+// alert('请填写所有字段');
+// return;
+// }
+// if (newPassword !== confirmPassword) {
+// alert('两次输入的新密码不一致');
+// return;
+// }
+
+// try {
+// // await axios.post('/echo/user/password', {
+// // user_id: user.userId,
+// // oldPassword,
+// // newPassword,
+// // });
+// await axios.post('/echo/user/password', {
+// user_id: user.userId,
+// old_password: oldPassword,
+// new_password: newPassword,
+// confirm_password: confirmPassword,
+// });
+// alert('密码修改成功，请重新登录');
+// logout();
+// window.location.reload();
+// } catch (err) {
+// alert(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
+// }
+// };
+
+// 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;
+
+// const progressPercent = experienceInfo
+// ? Math.min(
+// 100,
+// ((experienceInfo.current_experience || 0) /
+// (experienceInfo.next_level_experience || 1)) *
+// 100
+// ).toFixed(2)
+// : 0;
+
+// const expToNextLevel = experienceInfo
+// ? (experienceInfo.next_level_experience - experienceInfo.current_experience)
+// : null;
+
+// return (
+// <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>
+
+// {experienceInfo && (
+// <>
+// <p><strong>距离下一等级还需：</strong>{expToNextLevel} 经验值</p>
+// <div className="exp-bar-wrapper">
+// <div className="exp-bar" style={{ width: `${progressPercent}%` }} />
+// </div>
+// <p className="exp-progress-text">{progressPercent}%</p>
+// </>
+// )}
+
+// {/* 修改密码与退出登录按钮 */}
+// <div className="profile-actions">
+// <button onClick={() => setShowPwdModal(true)}>修改密码</button>
+// <button onClick={handleLogout}>退出登录</button>
+// </div>
+
+// {/* 修改密码弹窗 */}
+// {showPwdModal && (
+// <div className="modal">
+// <div className="modal-content">
+// <h3>修改密码</h3>
+// <input
+// type="password"
+// placeholder="原密码"
+// value={oldPassword}
+// onChange={(e) => setOldPassword(e.target.value)}
+// />
+// <input
+// type="password"
+// placeholder="新密码"
+// value={newPassword}
+// onChange={(e) => setNewPassword(e.target.value)}
+// />
+// <input
+// type="password"
+// placeholder="确认新密码"
+// value={confirmPassword}
+// onChange={(e) => setConfirmPassword(e.target.value)}
+// />
+// <div className="modal-buttons">
+// <button onClick={handleChangePassword}>确认修改</button>
+// <button onClick={() => setShowPwdModal(false)}>取消</button>
+// </div>
+// </div>
+// </div>
+// )}
+// </div>
+// </div>
+// </div>
+// );
+// };
+
+// export default UserProfile;
+
+import React from 'react';
+import UserProfileBase from './UserProfileBase';
+import UserLevelExperience from './UserLevelExperience';
const UserProfile = () => {
- const { user, loading, logout } = useUser();
- const [userProfile, setUserProfile] = useState(null);
- const [experienceInfo, setExperienceInfo] = useState(null);
- const [error, setError] = useState(null);
+ const [userId, setUserId] = React.useState(null);
- // 修改密码状态
- const [showPwdModal, setShowPwdModal] = useState(false);
- const [oldPassword, setOldPassword] = useState('');
- const [newPassword, setNewPassword] = useState('');
- const [confirmPassword, setConfirmPassword] = useState('');
-
- // 退出登录
- const [, setLocation] = useLocation();
-
- 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);
- }
- };
-
- const fetchExperienceInfo = async () => {
- try {
- const { data } = await axios.get('/echo/level/getExperience', {
- params: { user_id: user.userId },
- });
- setExperienceInfo(data);
- } catch (err) {
- console.error('经验信息获取失败:', err);
- }
- };
-
- fetchUserProfile();
- fetchExperienceInfo();
- }, [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('头像上传失败，请重试');
- }
+ const loadExperienceInfo = (id) => {
+ setUserId(id);
};
- const handleLogout = () => {
- logout();
- setLocation('/auth'); // 退出后跳转登录页
- // window.location.reload(); // 或跳转登录页
- };
-
- const handleChangePassword = async () => {
- if (!oldPassword || !newPassword || !confirmPassword) {
- alert('请填写所有字段');
- return;
- }
- if (newPassword !== confirmPassword) {
- alert('两次输入的新密码不一致');
- return;
- }
-
- try {
- // await axios.post('/echo/user/password', {
- // user_id: user.userId,
- // oldPassword,
- // newPassword,
- // });
- await axios.post('/echo/user/password', {
- user_id: user.userId,
- old_password: oldPassword,
- new_password: newPassword,
- confirm_password: confirmPassword,
- });
- alert('密码修改成功，请重新登录');
- logout();
- window.location.reload();
- } catch (err) {
- alert(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
- }
- };
-
- 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;
-
- const progressPercent = experienceInfo
- ? Math.min(
- 100,
- ((experienceInfo.current_experience || 0) /
- (experienceInfo.next_level_experience || 1)) *
- 100
- ).toFixed(2)
- : 0;
-
- const expToNextLevel = experienceInfo
- ? (experienceInfo.next_level_experience - experienceInfo.current_experience)
- : null;
-
return (
- <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>
-
- {experienceInfo && (
- <>
- <p><strong>距离下一等级还需：</strong>{expToNextLevel} 经验值</p>
- <div className="exp-bar-wrapper">
- <div className="exp-bar" style={{ width: `${progressPercent}%` }} />
- </div>
- <p className="exp-progress-text">{progressPercent}%</p>
- </>
- )}
-
- {/* 修改密码与退出登录按钮 */}
- <div className="profile-actions">
- <button onClick={() => setShowPwdModal(true)}>修改密码</button>
- <button onClick={handleLogout}>退出登录</button>
- </div>
-
- {/* 修改密码弹窗 */}
- {showPwdModal && (
- <div className="modal">
- <div className="modal-content">
- <h3>修改密码</h3>
- <input
- type="password"
- placeholder="原密码"
- value={oldPassword}
- onChange={(e) => setOldPassword(e.target.value)}
- />
- <input
- type="password"
- placeholder="新密码"
- value={newPassword}
- onChange={(e) => setNewPassword(e.target.value)}
- />
- <input
- type="password"
- placeholder="确认新密码"
- value={confirmPassword}
- onChange={(e) => setConfirmPassword(e.target.value)}
- />
- <div className="modal-buttons">
- <button onClick={handleChangePassword}>确认修改</button>
- <button onClick={() => setShowPwdModal(false)}>取消</button>
- </div>
- </div>
- </div>
- )}
- </div>
- </div>
+ <div>
+ <UserProfileBase onLoadExperienceInfo={loadExperienceInfo} />
+ {userId && <UserLevelExperience userId={userId} />}
</div>
);
};
-export default UserProfile;
-
+export default UserProfile;
\ No newline at end of file