diff --git a/src/components/FriendManager.css b/src/components/FriendManager.css
new file mode 100644
index 0000000..97cf2a9
--- /dev/null
+++ b/src/components/FriendManager.css
@@ -0,0 +1,155 @@
+/* FriendManager.css */
+
+.friend-manager-container {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 0 15px;
+}
+
+.friend-card {
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.friend-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.header-icon {
+    font-size: 24px;
+    color: #1890ff;
+    margin-right: 12px;
+}
+
+.header-title {
+    margin: 0 !important;
+}
+
+.search-section {
+    display: flex;
+    margin-bottom: 24px;
+    gap: 12px;
+}
+
+.search-input {
+    flex: 1;
+    border-radius: 20px;
+    padding: 10px 16px;
+}
+
+.search-button {
+    border-radius: 20px;
+    padding: 0 24px;
+    height: 40px;
+}
+
+.search-results-container {
+    margin-bottom: 24px;
+    background: #fafafa;
+    border-radius: 8px;
+    padding: 16px;
+    border: 1px solid #f0f0f0;
+}
+
+.results-title {
+    margin-bottom: 16px !important;
+    color: #333;
+}
+
+.user-item {
+    padding: 12px;
+    border-radius: 8px;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.user-item:hover {
+    background-color: #f5f7fa;
+}
+
+.user-avatar {
+    background-color: #1890ff;
+}
+
+.add-friend-button {
+    border-radius: 16px;
+}
+
+.section-title {
+    margin-bottom: 16px !important;
+    color: #333;
+    position: relative;
+    padding-left: 10px;
+}
+
+.section-title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 5px;
+    height: 20px;
+    width: 4px;
+    background-color: #1890ff;
+    border-radius: 2px;
+}
+
+.request-item,
+.friend-item {
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    border: 1px solid #f0f0f0;
+    transition: all 0.3s;
+}
+
+.request-item:hover,
+.friend-item:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+    border-color: #d0e0ff;
+}
+
+.accept-button {
+    background-color: #52c41a;
+    border-color: #52c41a;
+}
+
+.reject-button {
+    background-color: #f5222d;
+    border-color: #f5222d;
+    color: white;
+}
+
+.delete-button {
+    border-radius: 16px;
+}
+
+.friend-list-section {
+    margin-top: 24px;
+}
+
+.friend-list-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+}
+
+.refresh-button {
+    color: #1890ff;
+}
+
+@media (max-width: 768px) {
+    .search-section {
+        flex-direction: column;
+    }
+
+    .search-button {
+        width: 100%;
+    }
+
+    .friend-card {
+        padding: 16px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/FriendManager.jsx b/src/components/FriendManager.jsx
new file mode 100644
index 0000000..374ac83
--- /dev/null
+++ b/src/components/FriendManager.jsx
@@ -0,0 +1,359 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Input,
+    Button,
+    List,
+    Typography,
+    Space,
+    Spin,
+    Popconfirm,
+    message,
+    Divider,
+    Avatar,
+} from 'antd';
+import {
+    UserAddOutlined,
+    DeleteOutlined,
+    ReloadOutlined,
+    CheckOutlined,
+    CloseOutlined,
+} from '@ant-design/icons';
+import {
+    addFriend,
+    deleteFriend,
+    getFriendsByUserId,
+    getPendingRequests,
+    acceptFriend,
+    rejectFriend,
+} from '../api/friends';
+import axios from 'axios';
+
+const { Title, Text } = Typography;
+
+const FriendManager = ({ currentUser, onSelectRelation }) => {
+    const currentUserId = currentUser?.userid;
+
+    const [friendName, setFriendName] = useState('');
+    const [friends, setFriends] = useState([]);
+    const [pendingRequests, setPendingRequests] = useState([]);
+    const [userInfoMap, setUserInfoMap] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [refreshing, setRefreshing] = useState(false);
+    const [pendingLoading, setPendingLoading] = useState(false);
+
+    useEffect(() => {
+        if (currentUserId) {
+            refreshData();
+        }
+    }, [currentUserId]);
+
+    const refreshData = () => {
+        loadFriends(currentUserId);
+        loadPendingRequests(currentUserId);
+    };
+
+    const fetchUserInfo = async (userId) => {
+        if (userInfoMap[userId]) return;
+        try {
+            const res = await axios.get(`http://localhost:8080/user/getDecoration?userid=${userId}`);
+            const info = res.data?.data;
+            if (info) {
+                setUserInfoMap((prev) => ({
+                    ...prev,
+                    [userId]: {
+                        username: info.username,
+                        avatar: info.image,
+                    },
+                }));
+            }
+        } catch {
+            setUserInfoMap((prev) => ({
+                ...prev,
+                [userId]: {
+                    username: `用户${userId}`,
+                    avatar: null,
+                },
+            }));
+        }
+    };
+
+    const loadFriends = async (userId) => {
+        setRefreshing(true);
+        try {
+            const res = await getFriendsByUserId(userId);
+            const list = res.data || [];
+            setFriends(list);
+            list.forEach(f => fetchUserInfo(getFriendUserId(f)));
+        } catch {
+            message.error('加载好友失败，请稍后重试');
+        }
+        setRefreshing(false);
+    };
+
+    const loadPendingRequests = async (userId) => {
+        setPendingLoading(true);
+        try {
+            const res = await getPendingRequests(userId);
+            const list = res.data || [];
+            setPendingRequests(list);
+            list.forEach(req => {
+                const otherId = req.friend1 === currentUserId ? req.friend2 : req.friend1;
+                fetchUserInfo(otherId);
+            });
+        } catch {
+            message.error('加载好友申请失败');
+        }
+        setPendingLoading(false);
+    };
+
+    const handleAddFriend = async () => {
+        if (!friendName.trim()) return message.warning('请输入好友用户名');
+
+        setLoading(true);
+        try {
+            const res = await axios.get(`http://localhost:8080/user/getUserid?username=${friendName.trim()}`);
+            const newFriendId = res.data?.data;
+            if (!newFriendId) {
+                message.error('未找到该用户名对应的用户');
+                setLoading(false);
+                return;
+            }
+
+            if (newFriendId === currentUserId) {
+                message.warning('不能添加自己为好友');
+                setLoading(false);
+                return;
+            }
+
+            const isAlreadyFriend = friends.some(f =>
+                (f.friend1 === currentUserId && f.friend2 === newFriendId) ||
+                (f.friend1 === newFriendId && f.friend2 === currentUserId)
+            );
+            if (isAlreadyFriend) {
+                message.warning('该用户已是您的好友');
+                setLoading(false);
+                return;
+            }
+
+            const result = await addFriend({ friend1: currentUserId, friend2: newFriendId });
+            if (result.data) {
+                message.success('好友请求已发送');
+                setFriendName('');
+                loadPendingRequests(currentUserId);
+            } else {
+                message.error('添加失败');
+            }
+        } catch {
+            message.error('添加好友失败，请稍后重试');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDelete = async (friend1, friend2) => {
+        setLoading(true);
+        try {
+            const res = await deleteFriend(friend1, friend2);
+            if (res.data) {
+                message.success('删除成功');
+                loadFriends(currentUserId);
+            } else {
+                message.error('删除失败');
+            }
+        } catch {
+            message.error('删除好友失败');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleAccept = async (friend1, friend2) => {
+        setPendingLoading(true);
+        try {
+            const res = await acceptFriend(friend1, friend2);
+            if (res.data) {
+                message.success('已同意好友请求');
+                refreshData();
+            } else {
+                message.error('操作失败');
+            }
+        } catch {
+            message.error('同意失败');
+        } finally {
+            setPendingLoading(false);
+        }
+    };
+
+    const handleReject = async (friend1, friend2) => {
+        setPendingLoading(true);
+        try {
+            const res = await rejectFriend(friend1, friend2);
+            if (res.data) {
+                message.info('已拒绝好友请求');
+                loadPendingRequests(currentUserId);
+            } else {
+                message.error('操作失败');
+            }
+        } catch {
+            message.error('拒绝失败');
+        } finally {
+            setPendingLoading(false);
+        }
+    };
+
+    const getFriendUserId = (f) => f.friend1 === currentUserId ? f.friend2 : f.friend1;
+
+    const renderUserMeta = (userId, timeLabel) => {
+        const user = userInfoMap[userId] || {};
+        return {
+            avatar: <Avatar src={user.avatar} />,
+            title: user.username ? `${user.username}（ID: ${userId}）` : `用户ID：${userId}`,
+            description: timeLabel,
+        };
+    };
+
+    return (
+        <div style={{ maxWidth: 700, margin: 'auto', padding: 24 }}>
+            <Title level={3} style={{ textAlign: 'center', marginBottom: 24 }}>
+                好友管理
+            </Title>
+
+            <Space style={{ marginBottom: 24 }} align="start">
+                <Input
+                    placeholder="输入好友用户名"
+                    value={friendName}
+                    onChange={(e) => setFriendName(e.target.value)}
+                    style={{ width: 220 }}
+                    allowClear
+                    prefix={<UserAddOutlined />}
+                />
+                <Button
+                    type="primary"
+                    loading={loading}
+                    onClick={handleAddFriend}
+                    disabled={!friendName.trim()}
+                >
+                    添加好友
+                </Button>
+            </Space>
+
+            <Divider />
+
+            <Title level={4}>好友申请</Title>
+            <Spin spinning={pendingLoading}>
+                {pendingRequests.length === 0 ? (
+                    <Text type="secondary">暂无好友申请</Text>
+                ) : (
+                    <List
+                        itemLayout="horizontal"
+                        dataSource={pendingRequests}
+                        renderItem={(item) => {
+                            const otherId = item.friend1 === currentUserId ? item.friend2 : item.friend1;
+                            return (
+                                <List.Item
+                                    actions={[
+                                        <Button
+                                            key="accept"
+                                            type="primary"
+                                            icon={<CheckOutlined />}
+                                            onClick={() => handleAccept(item.friend1, item.friend2)}
+                                            loading={pendingLoading}
+                                            size="small"
+                                        >
+                                            同意
+                                        </Button>,
+                                        <Popconfirm
+                                            key="reject"
+                                            title="确定拒绝该好友请求？"
+                                            onConfirm={() => handleReject(item.friend1, item.friend2)}
+                                            okText="确认"
+                                            cancelText="取消"
+                                        >
+                                            <Button
+                                                danger
+                                                icon={<CloseOutlined />}
+                                                loading={pendingLoading}
+                                                size="small"
+                                            >
+                                                拒绝
+                                            </Button>
+                                        </Popconfirm>,
+                                    ]}
+                                >
+                                    <List.Item.Meta {...renderUserMeta(otherId, `申请时间：${new Date(item.requestTime).toLocaleString()}`)} />
+                                </List.Item>
+                            );
+                        }}
+                    />
+                )}
+            </Spin>
+
+            <Divider />
+
+            <Space align="center" style={{ marginBottom: 12, justifyContent: 'space-between', width: '100%' }}>
+                <Title level={4} style={{ margin: 0 }}>
+                    我的好友列表
+                </Title>
+                <Button
+                    icon={<ReloadOutlined />}
+                    onClick={() => refreshData()}
+                    loading={refreshing || pendingLoading}
+                    type="link"
+                >
+                    刷新
+                </Button>
+            </Space>
+            <Spin spinning={refreshing}>
+                {friends.length === 0 ? (
+                    <Text type="secondary">暂无好友</Text>
+                ) : (
+                    <List
+                        itemLayout="horizontal"
+                        dataSource={friends}
+                        renderItem={(f) => {
+                            const friendUserId = getFriendUserId(f);
+                            return (
+                                <List.Item
+                                    onClick={() =>
+                                        onSelectRelation({
+                                            relationid: f.relationid,
+                                            friendId: friendUserId,
+                                        })
+                                    }
+                                    style={{ cursor: 'pointer' }}
+                                    actions={[
+                                        <Popconfirm
+                                            title="确定删除该好友？"
+                                            onConfirm={(e) => {
+                                                e.stopPropagation();
+                                                handleDelete(f.friend1, f.friend2);
+                                            }}
+                                            okText="确认"
+                                            cancelText="取消"
+                                            key="delete"
+                                        >
+                                            <Button
+                                                danger
+                                                icon={<DeleteOutlined />}
+                                                loading={loading}
+                                                size="small"
+                                            >
+                                                删除
+                                            </Button>
+                                        </Popconfirm>,
+                                    ]}
+                                >
+                                    <List.Item.Meta
+                                        {...renderUserMeta(friendUserId, `添加时间：${new Date(f.requestTime).toLocaleString()}`)}
+                                    />
+                                </List.Item>
+                            );
+                        }}
+                    />
+                )}
+            </Spin>
+        </div>
+    );
+};
+
+export default FriendManager;