diff --git a/src/pages/UserCenter/UserFriends.jsx b/src/pages/UserCenter/UserFriends.jsx
index 3aaec44..e1c9789 100644
--- a/src/pages/UserCenter/UserFriends.jsx
+++ b/src/pages/UserCenter/UserFriends.jsx
@@ -1,22 +1,227 @@
+// import React, { useEffect, useState } from 'react';
+// import axios from 'axios';
+// import UserNav from './UserNav';
+// import Header from '../../components/Header';
+// import './UserFriends.css';
+// import { useUser } from '../../context/UserContext';
+
+// const UserFriends = () => {
+//   const { user, loading } = useUser();
+//   const [friends, setFriends] = useState([]);
+//   const [error, setError] = useState(null);
+
+//   // 私信相关状态
+//   const [chatOpen, setChatOpen] = useState(false);
+//   const [chatFriend, setChatFriend] = useState(null);
+//   const [messageContent, setMessageContent] = useState('');
+//   const [sendingStatus, setSendingStatus] = useState(null);
+
+//   // 新增：聊天记录
+//   const [chatMessages, setChatMessages] = useState([]);
+//   const [loadingMessages, setLoadingMessages] = useState(false);
+//   const [messagesError, setMessagesError] = useState(null);
+
+//   useEffect(() => {
+//     if (loading) return;
+
+//     const fetchFriends = async () => {
+//       if (!user || !user.userId) {
+//         setError('未登录或用户信息缺失');
+//         return;
+//       }
+
+//       try {
+//         const res = await axios.get(`/echo/user/${user.userId}/friends`);
+//         setFriends(res.data || []);
+//         setError(null);
+//       } catch (err) {
+//         setError('加载好友失败，请稍后再试');
+//       }
+//     };
+
+//     fetchFriends();
+//   }, [user, loading]);
+
+//   // 打开聊天框时加载聊天记录
+//   const openChat = async (friend) => {
+//     setChatFriend(friend);
+//     setMessageContent('');
+//     setSendingStatus(null);
+//     setChatMessages([]);
+//     setMessagesError(null);
+//     setChatOpen(true);
+
+//     if (!user || !user.userId) return;
+
+//     setLoadingMessages(true);
+//     try {
+//       const res = await axios.get(`/echo/message/${user.userId}/getUserMessages`);
+//       if (res.data.status === 'success') {
+//         // 过滤出和这个好友的聊天消息（发或收都算）
+//         const allMessages = res.data.messages || [];
+//         const related = allMessages.filter(m =>
+//           (m.sender_id === user.userId && m.receiver_id === friend.id) ||
+//           (m.sender_id === friend.id && m.receiver_id === user.userId)
+//         );
+//         // 按时间排序（升序）
+//         related.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+//         setChatMessages(related);
+//       } else {
+//         setMessagesError('无法加载聊天记录');
+//       }
+//     } catch (err) {
+//       setMessagesError('加载聊天记录失败，请稍后再试');
+//     } finally {
+//       setLoadingMessages(false);
+//     }
+//   };
+
+//   const closeChat = () => {
+//     setChatOpen(false);
+//     setChatFriend(null);
+//     setMessageContent('');
+//     setSendingStatus(null);
+//     setChatMessages([]);
+//     setMessagesError(null);
+//   };
+
+//   const sendMessage = async () => {
+//     if (!messageContent.trim()) {
+//       setSendingStatus('消息不能为空');
+//       return;
+//     }
+//     setSendingStatus('发送中...');
+//     try {
+//       const res = await axios.post('/echo/message/sendMessages', {
+//         sender_id: user.userId,
+//         receiver_id: chatFriend.id,
+//         content: messageContent.trim(),
+//       });
+//       if (res.data.status === 'success') {
+//         setSendingStatus('发送成功');
+//         setMessageContent('');
+//         // 发送成功后，将这条消息追加到聊天记录
+//         const newMsg = {
+//           message_id: res.data.message_id,
+//           sender_id: user.userId,
+//           sender_username: user.username || '我',
+//           receiver_id: chatFriend.id,
+//           receiver_username: chatFriend.nickname,
+//           content: messageContent.trim(),
+//           timestamp: new Date().toISOString(),
+//         };
+//         setChatMessages(prev => [...prev, newMsg]);
+//       } else {
+//         setSendingStatus(res.data.message || '发送失败');
+//       }
+//     } catch (err) {
+//       setSendingStatus('发送失败，请稍后再试');
+//     }
+//   };
+
+//   if (loading) return <p>正在加载...</p>;
+//   if (error) return <p className="error">{error}</p>;
+
+//   return (
+//     <div className="user-friends-container">
+//       <Header />
+//       <div className="user-center">
+//         <div className="user-nav-container">
+//           <UserNav />
+//         </div>
+//         <div className="common-card">
+//           <h2>我的好友</h2>
+//           <div className="friends-list">
+//             {friends.length === 0 && <p>暂无好友</p>}
+//             {friends.map((friend) => (
+//               <div key={friend.id} className="friend-card">
+//                 <img src={friend.avatar} alt={friend.nickname} className="friend-avatar" />
+//                 <div className="friend-info">
+//                   <p><strong>{friend.nickname}</strong></p>
+//                   <p>{friend.email}</p>
+//                   <button
+//                     className="send-message-btn"
+//                     onClick={() => openChat(friend)}
+//                   >
+//                     发送私信
+//                   </button>
+//                 </div>
+//               </div>
+//             ))}
+//           </div>
+//         </div>
+//       </div>
+
+//       {/* 私信弹窗 */}
+//       {chatOpen && (
+//         <div className="chat-modal">
+//           <div className="chat-modal-content">
+//             <h3>给 {chatFriend.nickname} 发送私信</h3>
+//             <div className="chat-messages" style={{height: '250px', overflowY: 'auto', border: '1px solid #ccc', padding: '8px', marginBottom: '8px'}}>
+//               {loadingMessages && <p>加载聊天记录中...</p>}
+//               {messagesError && <p className="error">{messagesError}</p>}
+//               {!loadingMessages && chatMessages.length === 0 && <p>暂无聊天记录</p>}
+//               {chatMessages.map(msg => (
+//                 <div
+//                   key={msg.message_id}
+//                   style={{
+//                     textAlign: msg.sender_id === user.userId ? 'right' : 'left',
+//                     marginBottom: '8px'
+//                   }}
+//                 >
+//                   <div style={{
+//                     display: 'inline-block',
+//                     backgroundColor: msg.sender_id === user.userId ? '#409eff' : '#f0f0f0',
+//                     color: msg.sender_id === user.userId ? 'white' : 'black',
+//                     borderRadius: '10px',
+//                     padding: '6px 12px',
+//                     maxWidth: '70%',
+//                     wordBreak: 'break-word'
+//                   }}>
+//                     <p style={{margin: 0}}>{msg.content}</p>
+//                     <small style={{fontSize: '10px', opacity: 0.7}}>
+//                       {new Date(msg.timestamp).toLocaleString()}
+//                     </small>
+//                   </div>
+//                 </div>
+//               ))}
+//             </div>
+//             <textarea
+//               rows="3"
+//               value={messageContent}
+//               onChange={(e) => setMessageContent(e.target.value)}
+//               placeholder="输入消息内容"
+//               style={{width: '100%', marginBottom: '8px'}}
+//             />
+//             <div className="chat-actions">
+//               <button onClick={sendMessage}>发送</button>
+//               <button onClick={closeChat}>关闭</button>
+//             </div>
+//             {sendingStatus && <p className="status-msg">{sendingStatus}</p>}
+//           </div>
+//           <div className="chat-modal-backdrop" onClick={closeChat}></div>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default UserFriends;
+
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
-import UserNav from './UserNav';
-import Header from '../../components/Header';
-import './UserFriends.css';
 import { useUser } from '../../context/UserContext';
+import './UserFriends.css';
 
 const UserFriends = () => {
   const { user, loading } = useUser();
   const [friends, setFriends] = useState([]);
   const [error, setError] = useState(null);
 
-  // 私信相关状态
   const [chatOpen, setChatOpen] = useState(false);
   const [chatFriend, setChatFriend] = useState(null);
   const [messageContent, setMessageContent] = useState('');
   const [sendingStatus, setSendingStatus] = useState(null);
-
-  // 新增：聊天记录
   const [chatMessages, setChatMessages] = useState([]);
   const [loadingMessages, setLoadingMessages] = useState(false);
   const [messagesError, setMessagesError] = useState(null);
@@ -42,7 +247,6 @@
     fetchFriends();
   }, [user, loading]);
 
-  // 打开聊天框时加载聊天记录
   const openChat = async (friend) => {
     setChatFriend(friend);
     setMessageContent('');
@@ -57,13 +261,11 @@
     try {
       const res = await axios.get(`/echo/message/${user.userId}/getUserMessages`);
       if (res.data.status === 'success') {
-        // 过滤出和这个好友的聊天消息（发或收都算）
         const allMessages = res.data.messages || [];
         const related = allMessages.filter(m =>
           (m.sender_id === user.userId && m.receiver_id === friend.id) ||
           (m.sender_id === friend.id && m.receiver_id === user.userId)
         );
-        // 按时间排序（升序）
         related.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
         setChatMessages(related);
       } else {
@@ -100,7 +302,6 @@
       if (res.data.status === 'success') {
         setSendingStatus('发送成功');
         setMessageContent('');
-        // 发送成功后，将这条消息追加到聊天记录
         const newMsg = {
           message_id: res.data.message_id,
           sender_id: user.userId,
@@ -123,33 +324,22 @@
   if (error) return <p className="error">{error}</p>;
 
   return (
-    <div className="user-friends-container">
-      <Header />
-      <div className="user-center">
-        <div className="user-nav-container">
-          <UserNav />
-        </div>
-        <div className="common-card">
-          <h2>我的好友</h2>
-          <div className="friends-list">
-            {friends.length === 0 && <p>暂无好友</p>}
-            {friends.map((friend) => (
-              <div key={friend.id} className="friend-card">
-                <img src={friend.avatar} alt={friend.nickname} className="friend-avatar" />
-                <div className="friend-info">
-                  <p><strong>{friend.nickname}</strong></p>
-                  <p>{friend.email}</p>
-                  <button
-                    className="send-message-btn"
-                    onClick={() => openChat(friend)}
-                  >
-                    发送私信
-                  </button>
-                </div>
-              </div>
-            ))}
+    <div className="user-subpage-card">
+      <h2>我的好友</h2>
+      <div className="friends-list">
+        {friends.length === 0 && <p>暂无好友</p>}
+        {friends.map((friend) => (
+          <div key={friend.id} className="friend-card">
+            <img src={friend.avatar} alt={friend.nickname} className="friend-avatar" />
+            <div className="friend-info">
+              <p><strong>{friend.nickname}</strong></p>
+              <p>{friend.email}</p>
+              <button className="send-message-btn" onClick={() => openChat(friend)}>
+                发送私信
+              </button>
+            </div>
           </div>
-        </div>
+        ))}
       </div>
 
       {/* 私信弹窗 */}
@@ -157,7 +347,7 @@
         <div className="chat-modal">
           <div className="chat-modal-content">
             <h3>给 {chatFriend.nickname} 发送私信</h3>
-            <div className="chat-messages" style={{height: '250px', overflowY: 'auto', border: '1px solid #ccc', padding: '8px', marginBottom: '8px'}}>
+            <div className="chat-messages">
               {loadingMessages && <p>加载聊天记录中...</p>}
               {messagesError && <p className="error">{messagesError}</p>}
               {!loadingMessages && chatMessages.length === 0 && <p>暂无聊天记录</p>}
@@ -169,19 +359,9 @@
                     marginBottom: '8px'
                   }}
                 >
-                  <div style={{
-                    display: 'inline-block',
-                    backgroundColor: msg.sender_id === user.userId ? '#409eff' : '#f0f0f0',
-                    color: msg.sender_id === user.userId ? 'white' : 'black',
-                    borderRadius: '10px',
-                    padding: '6px 12px',
-                    maxWidth: '70%',
-                    wordBreak: 'break-word'
-                  }}>
-                    <p style={{margin: 0}}>{msg.content}</p>
-                    <small style={{fontSize: '10px', opacity: 0.7}}>
-                      {new Date(msg.timestamp).toLocaleString()}
-                    </small>
+                  <div className={`chat-bubble ${msg.sender_id === user.userId ? 'self' : 'other'}`}>
+                    <p>{msg.content}</p>
+                    <small>{new Date(msg.timestamp).toLocaleString()}</small>
                   </div>
                 </div>
               ))}
@@ -191,7 +371,6 @@
               value={messageContent}
               onChange={(e) => setMessageContent(e.target.value)}
               placeholder="输入消息内容"
-              style={{width: '100%', marginBottom: '8px'}}
             />
             <div className="chat-actions">
               <button onClick={sendMessage}>发送</button>
@@ -207,3 +386,4 @@
 };
 
 export default UserFriends;
+