diff --git a/pt--frontend/src/components/FriendManager.jsx b/pt--frontend/src/components/FriendManager.jsx
new file mode 100644
index 0000000..d28f93d
--- /dev/null
+++ b/pt--frontend/src/components/FriendManager.jsx
@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { addFriend, deleteFriend, getFriendsByUserId } from '../api/friends';
+
+const FriendManager = ({ currentUser, onSelectRelation }) => {
+    const [friendId, setFriendId] = useState('');
+    const [friends, setFriends] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+
+    useEffect(() => {
+        if (currentUser?.id) loadFriends(currentUser.id);
+    }, [currentUser]);
+
+    const loadFriends = async (userid) => {
+        setIsRefreshing(true);
+        try {
+            const res = await getFriendsByUserId(userid);
+            setFriends(res.data);
+        } catch (err) {
+            console.error('加载好友失败', err);
+            alert('加载好友失败，请稍后重试');
+        }
+        setIsRefreshing(false);
+    };
+
+    const handleFriendIdChange = (e) => {
+        const value = e.target.value;
+        if (/^\d*$/.test(value)) setFriendId(value);
+    };
+
+    const handleAddFriend = async () => {
+        if (!friendId) return alert('请输入好友ID');
+
+        const newFriendId = parseInt(friendId, 10);
+        if (newFriendId === currentUser.id) return alert('不能添加自己为好友');
+
+        if (friends.some(f => f.friend1 === newFriendId || f.friend2 === newFriendId)) {
+            return alert('该用户已是您的好友');
+        }
+
+        setIsLoading(true);
+        try {
+            const res = await addFriend({ friend1: currentUser.id, friend2: newFriendId });
+            if (res.data) {
+                alert('添加成功');
+                setFriendId('');
+                loadFriends(currentUser.id);
+            } else {
+                alert('添加失败');
+            }
+        } catch (err) {
+            alert('添加好友失败');
+            console.error(err);
+        }
+        setIsLoading(false);
+    };
+
+    /* ---------- 这里开始：删除好友逻辑改为 friend1 + friend2 ---------- */
+    const handleDelete = async (friend1, friend2) => {
+        if (!window.confirm('确认删除该好友吗？')) return;
+        setIsLoading(true);
+        try {
+            const res = await deleteFriend(friend1, friend2);
+            if (res.data) {
+                alert('删除成功');
+                loadFriends(currentUser.id);
+            } else {
+                alert('删除失败');
+            }
+        } catch (err) {
+            alert('删除好友失败');
+            console.error(err);
+        }
+        setIsLoading(false);
+    };
+    /* ------------------------------------------------------------------- */
+
+    return (
+        <div className="max-w-xl mx-auto p-4">
+            <h2 className="text-2xl font-bold mb-4">好友管理</h2>
+
+            {/* 添加好友区域 */}
+            <div className="mb-6 space-y-2">
+                <input
+                    type="text"
+                    placeholder="输入好友的用户ID"
+                    value={friendId}
+                    onChange={handleFriendIdChange}
+                    className="border p-2 rounded w-full"
+                />
+                <button
+                    onClick={handleAddFriend}
+                    disabled={isLoading}
+                    className={`bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                >
+                    {isLoading ? '添加中…' : '添加好友'}
+                </button>
+            </div>
+
+            {/* 好友列表 */}
+            <div className="flex justify-between items-center mb-3">
+                <h3 className="text-xl font-semibold">我的好友列表</h3>
+                <button
+                    onClick={() => loadFriends(currentUser.id)}
+                    disabled={isRefreshing}
+                    className="text-sm text-blue-500 hover:underline disabled:text-gray-400"
+                >
+                    {isRefreshing ? '刷新中…' : '刷新'}
+                </button>
+            </div>
+
+            {friends.length === 0 ? (
+                <p className="text-gray-500">暂无好友</p>
+            ) : (
+                <ul className="space-y-3">
+                    {friends.map((f) => {
+                        const friendUserId =
+                            f.friend1 === currentUser.id ? f.friend2 : f.friend1;
+                        return (
+                            <li
+                                key={f.relationid}
+                                className="border p-3 rounded flex justify-between items-center hover:bg-gray-100 cursor-pointer"
+                                onClick={() =>
+                                    onSelectRelation({
+                                        relationid: f.relationid,
+                                        friendId: friendUserId,
+                                    })
+                                }
+                            >
+                                <div>
+                                    <p>好友用户ID：{friendUserId}</p>
+                                    <p className="text-sm text-gray-500">
+                                        添加时间：{new Date(f.requestTime).toLocaleString()}
+                                    </p>
+                                </div>
+                                <button
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        /* ------- 传入正确的 friend1 & friend2 -------- */
+                                        handleDelete(f.friend1, f.friend2);
+                                    }}
+                                    className="text-red-500 hover:underline"
+                                    disabled={isLoading}
+                                >
+                                    删除
+                                </button>
+                            </li>
+                        );
+                    })}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default FriendManager;