commit 1e2aea77d13c07c79d6cb36e4757fca5a88b7633
author 22301009 <22301009@bjtu.edu.cn> Sun Jun 08 16:35:54 2025 +0800
committer 22301009 <22301009@bjtu.edu.cn> Sun Jun 08 19:37:50 2025 +0800
tree 43b656ef3f53509af6a5ebc0fe17214ede00437b
parent 13aae31af1dd5f243fc1e2c0ae46cf929039c00f

修改提示框样式、完成付费片单、推荐跳转

Change-Id: Ie84c53d4e306435144b1f26ceb39cc182e99d57a

src/pages/UserCenter/UserProfileBase.jsx

diff --git a/src/pages/UserCenter/UserProfileBase.jsx b/src/pages/UserCenter/UserProfileBase.jsx
index 7a1f726..791baca 100644
--- a/src/pages/UserCenter/UserProfileBase.jsx
+++ b/src/pages/UserCenter/UserProfileBase.jsx
@@ -2,6 +2,9 @@
 import axios from 'axios';
 import { useUser } from '../../context/UserContext';
 import { useLocation } from 'wouter';
+import toast from 'react-hot-toast';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
 
 const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
 
@@ -10,13 +13,11 @@
   const [userProfile, setUserProfile] = 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(() => {
@@ -55,7 +56,6 @@
         };
 
         setUserProfile(profile);
-        // 加载经验信息
         if (onLoadExperienceInfo) onLoadExperienceInfo(user.userId);
       } catch (err) {
         setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
@@ -85,28 +85,44 @@
           ...prev,
           avatarUrl: `${process.env.REACT_APP_AVATAR_BASE_URL}${data.avatarUrl}`,
         }));
-        alert('头像上传成功');
+        toast.success('头像上传成功');
       } else {
-        alert('头像上传成功，但未返回新头像地址');
+        toast.success('头像上传成功，但未返回新头像地址');
       }
     } catch (err) {
       console.error('上传失败:', err);
-      alert('头像上传失败，请重试');
+      toast.error('头像上传失败，请重试');
     }
   };
 
   const handleLogout = () => {
     logout();
-    setLocation('/auth'); // 退出后跳转登录页
+    setLocation('/auth');
+  };
+
+  const confirmPasswordChange = () => {
+    confirmAlert({
+      title: '确认修改密码',
+      message: '确定要修改密码吗？修改成功后将自动登出。',
+      buttons: [
+        {
+          label: '确认',
+          onClick: handleChangePassword,
+        },
+        {
+          label: '取消',
+        },
+      ],
+    });
   };
 
   const handleChangePassword = async () => {
     if (!oldPassword || !newPassword || !confirmPassword) {
-      alert('请填写所有字段');
+      toast.error('请填写所有字段');
       return;
     }
     if (newPassword !== confirmPassword) {
-      alert('两次输入的新密码不一致');
+      toast.error('两次输入的新密码不一致');
       return;
     }
 
@@ -117,11 +133,14 @@
         new_password: newPassword,
         confirm_password: confirmPassword,
       });
-      alert('密码修改成功，请重新登录');
+
+      toast.success('密码修改成功，请重新登录');
       logout();
-      window.location.reload();
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
     } catch (err) {
-      alert(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
+      toast.error(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
     }
   };
 
@@ -169,23 +188,19 @@
           <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 className="profile-actions">
             <button onClick={() => setShowPwdModal(true)}>修改密码</button>
             <button onClick={handleLogout}>退出登录</button>
           </div>
 
-          {/* 修改密码弹窗 */}
           {showPwdModal && (
-            <div className="modal">
-              <div className="modal-content">
+            <div className="user-modal">
+              <div className="user-modal-content">
                 <h3>修改密码</h3>
                 <input
                   type="password"
@@ -205,8 +220,8 @@
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                 />
-                <div className="modal-buttons">
-                  <button onClick={handleChangePassword}>确认修改</button>
+                <div className="user-modal-buttons">
+                  <button onClick={confirmPasswordChange}>确认修改</button>
                   <button onClick={() => setShowPwdModal(false)}>取消</button>
                 </div>
               </div>
@@ -218,4 +233,4 @@
   );
 };
 
-export default UserProfileBase;  
\ No newline at end of file
+export default UserProfileBase;