diff --git a/src/pages/UserCenter/UserCollect.css b/src/pages/UserCenter/UserCollect.css
index fe7b3bd..79caaf6 100644
--- a/src/pages/UserCenter/UserCollect.css
+++ b/src/pages/UserCenter/UserCollect.css
@@ -1,11 +1,11 @@
-.user-center {
+/* .user-center {
   max-width: 100%;
   padding: 3%;
   font-family: Arial, sans-serif;
   display: flex;
   gap: 10%;
   background: #333;
-}
+} */
 
 .post-item {
   margin-bottom: 20px;
diff --git a/src/pages/UserCenter/UserDynamics.css b/src/pages/UserCenter/UserDynamics.css
index 40a11b4..5380c57 100644
--- a/src/pages/UserCenter/UserDynamics.css
+++ b/src/pages/UserCenter/UserDynamics.css
@@ -17,12 +17,13 @@
 }
 
 .dynamic-card {
-  background: #fff;
-  border: 1px solid #eee;
+  background: #E4D8C9;
+  /* border: 1px solid #eee; */
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+  width: 100%;
 }
 
 .dynamic-header {
diff --git a/src/pages/UserCenter/UserDynamics.jsx b/src/pages/UserCenter/UserDynamics.jsx
index 05d9046..d494c52 100644
--- a/src/pages/UserCenter/UserDynamics.jsx
+++ b/src/pages/UserCenter/UserDynamics.jsx
@@ -29,7 +29,7 @@
 
   return (
     <div className="user-dynamics-container">
-      <h2 className="user-dynamics-title">我的动态</h2>
+      {/* <h2 className="user-dynamics-title">我的动态</h2> */}
       {dynamics.length === 0 ? (
         <div className="user-dynamics-empty">暂无动态</div>
       ) : (
@@ -49,13 +49,6 @@
             <div className="dynamic-content">
               {item.title && <h4 className="dynamic-title">{item.title}</h4>}
               <p>{item.content}</p>
-              {/* {item.images && (
-                <div className="dynamic-images">
-                  {JSON.parse(item.images).map((img, index) => (
-                    <img key={index} src={img} alt={`图${index + 1}`} />
-                  ))}
-                </div>
-              )} */}
               {item.images && (
                 <div className="dynamic-images">
                     {(() => {
diff --git a/src/pages/UserCenter/UserFriends.css b/src/pages/UserCenter/UserFriends.css
index 2533959..37f6c9b 100644
--- a/src/pages/UserCenter/UserFriends.css
+++ b/src/pages/UserCenter/UserFriends.css
@@ -19,6 +19,8 @@
 
 .friend-info {
   flex: 1;
+  /* 字体大小 */
+  font-size: 1.3em;
 }
 
 .friend-info h4 {
diff --git a/src/pages/UserCenter/UserFriends.jsx b/src/pages/UserCenter/UserFriends.jsx
index 5540911..491c19c 100644
--- a/src/pages/UserCenter/UserFriends.jsx
+++ b/src/pages/UserCenter/UserFriends.jsx
@@ -335,13 +335,25 @@
 
   return (
     <div className="user-subpage-card">
-      <h2>我的好友</h2>
-      <div>
-        <input type="text" value={email} placeholder="请输入好友邮箱" onChange={e => setEmail(e.target.value)} />
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginLeft: '-12%' }}>
+        <div className="search">
+          <input
+            type="text"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="搜索邮箱添加好友"
+          />
+        </div>
+
         <button className="btn submit" onClick={handleSubmit}>
           添加
         </button>
       </div>
+
+      {/* 增加间距 */}
+      <div style={{ marginBottom: '30px' }}></div>
+
       <div className="friends-list">
         {friends.length === 0 && <p>暂无好友</p>}
         {friends.map((friend) => (
@@ -350,7 +362,7 @@
             <div className="friend-info">
               <p><strong>{friend.nickname}</strong></p>
               <p>{friend.email}</p>
-              <button className="send-message-btn" onClick={() => openChat(friend)}>
+              <button style={{ padding: '6px 12px', fontSize: '15px', float: 'right' }} onClick={() => openChat(friend)}>
                 发送私信
               </button>
             </div>
diff --git a/src/pages/UserCenter/UserLevelExperience.jsx b/src/pages/UserCenter/UserLevelExperience.jsx
new file mode 100644
index 0000000..60dcd55
--- /dev/null
+++ b/src/pages/UserCenter/UserLevelExperience.jsx
@@ -0,0 +1,375 @@
+// import React, { useState, useEffect } from 'react';
+// import axios from 'axios';
+
+// const UserLevelExperience = ({ userId }) => {
+//   const [experienceInfo, setExperienceInfo] = useState(null);
+//   const [error, setError] = useState(null);
+//   const [isLoading, setIsLoading] = useState(false);
+//   const [upgradeResult, setUpgradeResult] = useState(null);
+//   const [hasCheckedIn, setHasCheckedIn] = useState(false);
+
+//   useEffect(() => {
+//     if (!userId) return;
+//     fetchAllLevelData();
+//   }, [userId]);
+
+//   useEffect(() => {
+//     // 自动触发升级判断
+//     if (
+//       experienceInfo &&
+//       experienceInfo.current_experience >= experienceInfo.next_level_experience
+//     ) {
+//       checkUpgrade();
+//     }
+//   }, [experienceInfo]);
+
+//   const fetchAllLevelData = async () => {
+//     try {
+//       setIsLoading(true);
+//       setError(null);
+
+//       const { data } = await axios.get('/echo/level/getExperience', {
+//         params: { user_id: userId },
+//       });
+
+//       const normalizedData = {
+//         ...data,
+//         current_level: data.current_level || data.level,
+//       };
+
+//       setExperienceInfo(normalizedData);
+
+//       const today = new Date().toDateString();
+//       const lastCheckIn = localStorage.getItem('lastCheckIn');
+//       setHasCheckedIn(lastCheckIn === today);
+//     } catch (err) {
+//       console.error('经验信息获取失败:', err);
+//       setError('获取经验信息失败');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   };
+
+//   const updateExperience = async (source, amount = 10) => {
+//     try {
+//       setIsLoading(true);
+//       setError(null);
+
+//       const { data } = await axios.post('/echo/level/updateExperience', {
+//         user_id: userId,
+//         experience: amount,
+//         source: source,
+//       });
+
+//       setExperienceInfo((prev) => ({
+//         ...prev,
+//         current_experience: data.current_experience,
+//       }));
+
+//       alert(`获得${amount}点经验值！来源：${source}`);
+
+//       if (source === 'check-in') {
+//         localStorage.setItem('lastCheckIn', new Date().toDateString());
+//         setHasCheckedIn(true);
+//       }
+//     } catch (err) {
+//       console.error('更新经验失败:', err);
+//       setError(err.response?.data?.message || '更新经验失败');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   };
+
+//   const checkUpgrade = async () => {
+//     try {
+//       setIsLoading(true);
+//       setError(null);
+
+//       const { data } = await axios.get('/echo/level/upgrade-check', {
+//         params: { user_id: userId },
+//       });
+
+//       if (data.can_upgrade) {
+//         await performUpgrade(); // 自动触发
+//       }
+//     } catch (err) {
+//       console.error('检查升级失败:', err);
+//       setError(err.response?.data?.message || '检查升级失败');
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   };
+
+
+// const performUpgrade = async () => {
+//   try {
+//     setIsLoading(true);
+//     setError(null);
+
+//     const { data } = await axios.post('/echo/level/upgrades', {
+//       user_id: userId,
+//       can_upgrade: true,
+//     });
+
+//     console.log('升级响应数据:', data); // 保留调试日志
+
+//     setExperienceInfo((prev) => ({
+//       ...prev,
+//       current_level: data.new_level, // 修复：使用正确的字段名
+//       current_experience: 0,
+//       next_level_experience: prev.next_level_experience * 2,
+//     }));
+
+//     setUpgradeResult(data);
+//     alert(`恭喜！您已升级到等级 ${data.new_level}！`); // 修复：使用正确的字段名
+//   } catch (err) {
+//     console.error('升级失败:', err);
+//     setError(err.response?.data?.message || '升级失败');
+//   } finally {
+//     setIsLoading(false);
+//   }
+// };
+
+
+//   if (error) return <p className="error">{error}</p>;
+//   if (isLoading) return <p>加载中...</p>;
+//   if (!experienceInfo) return <p>加载经验信息中...</p>;
+
+//   const { current_experience, next_level_experience, current_level } = experienceInfo;
+//   const progressPercent = Math.min(
+//     100,
+//     (current_experience / (next_level_experience || 1)) * 100
+//   ).toFixed(2);
+
+//   const expToNextLevel = Math.max(0, next_level_experience - current_experience); // 防止负数
+
+//   return (
+//     <div className="level-experience-section">
+//       {/* <h3>等级与经验</h3> */}
+//       <p><strong>当前等级：</strong>{current_level || '未知'}</p>
+//       <p><strong>当前经验：</strong>{current_experience}</p>
+//       <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>
+
+
+//       {upgradeResult && (
+//         <div className="upgrade-success">
+//             {/* 使用与状态一致的字段名 */}
+//             <p>恭喜！您已成功升级到等级 {upgradeResult.new_level}！</p>
+//         </div>
+//         )}
+      
+
+//       <div className="level-actions">
+//         <button onClick={() => updateExperience('check-in', 15)} disabled={hasCheckedIn}>
+//           {hasCheckedIn ? '今日已签到' : '每日签到 (+15经验)'}
+//         </button>
+//         <button onClick={() => updateExperience('task', 30)}>完成任务 (+30经验)</button>
+//         <button onClick={() => updateExperience('upload', 50)}>上传种子 (+50经验)</button>
+//         {/* <button onClick={checkUpgrade}>检查升级</button> */}
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default UserLevelExperience;
+
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const UserLevelExperience = ({ userId }) => {
+  const [experienceInfo, setExperienceInfo] = useState(null);
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [upgradeResult, setUpgradeResult] = useState(null);
+  const [hasCheckedIn, setHasCheckedIn] = useState(false);
+
+  useEffect(() => {
+    if (!userId) return;
+    fetchAllLevelData();
+  }, [userId]);
+
+  useEffect(() => {
+    // 自动触发升级判断
+    if (
+      experienceInfo &&
+      experienceInfo.current_experience >= experienceInfo.next_level_experience
+    ) {
+      checkUpgrade();
+    }
+  }, [experienceInfo]);
+
+  const fetchAllLevelData = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const { data } = await axios.get('/echo/level/getExperience', {
+        params: { user_id: userId },
+      });
+
+      const normalizedData = {
+        ...data,
+        current_level: data.current_level || data.level,
+      };
+
+      setExperienceInfo(normalizedData);
+
+      const today = new Date().toDateString();
+      const lastCheckIn = localStorage.getItem('lastCheckIn');
+      setHasCheckedIn(lastCheckIn === today);
+    } catch (err) {
+      console.error('经验信息获取失败:', err);
+      setError('获取经验信息失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const updateExperience = async (source, amount = 10) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const { data } = await axios.post('/echo/level/updateExperience', {
+        user_id: userId,
+        experience: amount,
+        source: source,
+      });
+
+      setExperienceInfo((prev) => ({
+        ...prev,
+        current_experience: data.current_experience,
+      }));
+
+      alert(`获得${amount}点经验值！来源：${source}`);
+
+      if (source === 'check-in') {
+        localStorage.setItem('lastCheckIn', new Date().toDateString());
+        setHasCheckedIn(true);
+      }
+    } catch (err) {
+      console.error('更新经验失败:', err);
+      setError(err.response?.data?.message || '更新经验失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const checkUpgrade = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const { data } = await axios.get('/echo/level/upgrade-check', {
+        params: { user_id: userId },
+      });
+
+      if (data.can_upgrade) {
+        if (window.confirm('您已满足升级条件，是否要升级？')) {
+          await performUpgrade();
+        }
+      } else {
+        // 区分是经验不足还是已达最高等级
+        if (data.is_max_level) {
+          alert('您已达到最高等级！');
+        } else {
+          alert(`还不能升级，还需要${data.next_level_experience - data.current_experience}点经验值`);
+        }
+      }
+    } catch (err) {
+      console.error('检查升级失败:', err);
+      setError(err.response?.data?.message || '检查升级失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const performUpgrade = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const { data } = await axios.post('/echo/level/upgrades', {
+        user_id: userId,
+        can_upgrade: true,
+      });
+
+      console.log('升级响应数据:', data);
+
+      // 正确处理升级结果
+      if (data.status === 'success') {
+        setExperienceInfo((prev) => ({
+          ...prev,
+          current_level: data.new_level,
+          current_experience: 0,
+          next_level_experience: prev.next_level_experience * 2,
+        }));
+
+        setUpgradeResult(data);
+        alert(`恭喜！您已升级到等级 ${data.new_level}！`);
+      } else {
+        throw new Error(data.message || '升级失败');
+      }
+    } catch (err) {
+      console.error('升级失败:', err);
+      setError(err.message || '升级失败');
+      alert(err.message || '升级失败，请稍后再试');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (error) return <p className="error">{error}</p>;
+  if (isLoading) return <p>加载中...</p>;
+  if (!experienceInfo) return <p>加载经验信息中...</p>;
+
+  const { current_experience, next_level_experience, current_level } = experienceInfo;
+  const progressPercent = Math.min(
+    100,
+    (current_experience / (next_level_experience || 1)) * 100
+  ).toFixed(2);
+
+  const expToNextLevel = Math.max(0, next_level_experience - current_experience);
+
+  return (
+    <div className="level-experience-section">
+      <h3>等级与经验</h3>
+      <p><strong>当前等级：</strong>{current_level || '未知'}</p>
+      <p><strong>当前经验：</strong>{current_experience}</p>
+      <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>
+
+      {upgradeResult && (
+        <div className="upgrade-success">
+          <p>恭喜！您已成功升级到等级 {upgradeResult.new_level}！</p>
+        </div>
+      )}
+
+      {error && (
+        <div className="upgrade-error">
+          <p>{error}</p>
+        </div>
+      )}
+
+      <div className="level-actions">
+        <button onClick={() => updateExperience('check-in', 15)} disabled={hasCheckedIn}>
+          {hasCheckedIn ? '今日已签到' : '每日签到 (+15经验)'}
+        </button>
+        <button onClick={() => updateExperience('task', 30)}>完成任务 (+30经验)</button>
+        <button onClick={() => updateExperience('upload', 50)}>上传种子 (+50经验)</button>
+        <button onClick={checkUpgrade}>检查升级</button>
+      </div>
+    </div>
+  );
+};
+
+export default UserLevelExperience;  
diff --git a/src/pages/UserCenter/UserProfile.css b/src/pages/UserCenter/UserProfile.css
index b230c1e..cb71be7 100644
--- a/src/pages/UserCenter/UserProfile.css
+++ b/src/pages/UserCenter/UserProfile.css
@@ -54,10 +54,25 @@
   margin-top: 40px;
   width: 80%;
   padding-top: 10%;
-  padding-right: 15%;
+  padding-right: 10%;
   padding-bottom: 10%;
   padding-left: 10%;
+  margin-left: 3%;
+  margin-right: 5%;
+  
+  /* padding: 10% 20%; */
 }  
+
+/* .common-card {
+  background-color: #e9ded2;
+  border-radius: 16px;
+  margin: 0 auto;
+  margin-top: 40px;
+  padding: 10% 20%;
+  margin-left: 5%;
+  margin-right: 5%;
+} */
+   
 .avatar-wrapper {
   position: relative;
   display: inline-block;
@@ -119,15 +134,7 @@
   text-align: center;
 }
 
-.common-card {
-  background-color: #e9ded2;
-  border-radius: 16px;
-  margin: 0 auto;
-  margin-top: 40px;
-  padding: 10% 20%;
-  margin-left: 5%;
-  margin-right: 5%;
-}
+
 
 .avatar-wrapper {
   position: relative;
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
diff --git a/src/pages/UserCenter/UserProfileBase.jsx b/src/pages/UserCenter/UserProfileBase.jsx
new file mode 100644
index 0000000..7a1f726
--- /dev/null
+++ b/src/pages/UserCenter/UserProfileBase.jsx
@@ -0,0 +1,221 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useUser } from '../../context/UserContext';
+import { useLocation } from 'wouter';
+
+const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
+
+const UserProfileBase = ({ onLoadExperienceInfo }) => {
+  const { user, loading, logout } = useUser();
+  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(() => {
+    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);
+        // 加载经验信息
+        if (onLoadExperienceInfo) onLoadExperienceInfo(user.userId);
+      } catch (err) {
+        setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
+        setUserProfile(null);
+      }
+    };
+
+    fetchUserProfile();
+  }, [user, loading, onLoadExperienceInfo]);
+
+  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'); // 退出后跳转登录页
+  };
+
+  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,
+        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;
+
+  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>
+
+          {/* 修改密码与退出登录按钮 */}
+          <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 UserProfileBase;  
\ No newline at end of file