diff --git a/src/pages/UserCenter/UserFriends.jsx b/src/pages/UserCenter/UserFriends.jsx
index e69de29..3aaec44 100644
--- a/src/pages/UserCenter/UserFriends.jsx
+++ b/src/pages/UserCenter/UserFriends.jsx
@@ -0,0 +1,209 @@
+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;