diff --git a/react-ui/src/pages/Message/index.tsx b/react-ui/src/pages/Message/index.tsx
index 04f9881..9ae9467 100644
--- a/react-ui/src/pages/Message/index.tsx
+++ b/react-ui/src/pages/Message/index.tsx
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Card, List, Avatar, Input, Button, Row, Col, message } from 'antd';
+import { Card, List, Avatar, Input, Button, Row, Col, message, Modal, Form } from 'antd';
+import { UserAddOutlined, SearchOutlined } from '@ant-design/icons';
 import { SysUserMessage, ChatContact } from './data.d';
-import { getChatContactList, getChatHistory, sendMessage, getUserInfo } from './service';
+import { getChatContactList, getChatHistory, sendMessage, getUserInfo, addFriend } from './service';
 import './index.less';
+import { useModel } from 'umi';
 
 const MessagePage: React.FC = () => {
     const [chatContacts, setChatContacts] = useState<ChatContact[]>([]);
@@ -11,6 +13,12 @@
     const [chatMessages, setChatMessages] = useState<SysUserMessage[]>([]);
     const [loading, setLoading] = useState(false);
     const [sending, setSending] = useState(false);
+    const { initialState } = useModel('@@initialState');
+    const ccuserId = initialState?.currentUser?.userId || '';
+    // 添加好友相关状态
+    const [addFriendVisible, setAddFriendVisible] = useState(false);
+    const [addFriendLoading, setAddFriendLoading] = useState(false);
+    const [form] = Form.useForm();
 
     // 获取聊天对象列表
     const fetchChatContacts = async () => {
@@ -36,7 +44,7 @@
             setLoading(true);
             const response = await getChatHistory({
                 userId,
-                currentUserId: 1, // 假设当前用户ID为1，实际应该从用户状态获取
+                currentUserId: Number(ccuserId), // 假设当前用户ID为1，实际应该从用户状态获取
                 pageSize: 100 // 获取最近100条消息
             });
 
@@ -110,6 +118,26 @@
         }
     };
 
+    // 添加好友
+    const handleAddFriend = async (values: { username: string }) => {
+        try {
+            setAddFriendLoading(true);
+            await addFriend({ userId: Number(ccuserId), authorUsername: values.username });
+            message.success('好友添加成功');
+
+            // 重新获取聊天对象列表
+            await fetchChatContacts();
+
+            // 关闭弹窗并重置表单
+            setAddFriendVisible(false);
+            form.resetFields();
+        } catch (error) {
+            message.error('添加好友失败，请检查用户名是否正确');
+        } finally {
+            setAddFriendLoading(false);
+        }
+    };
+
     // 选择聊天对象
     const handleSelectUser = (userId: number) => {
         setSelectedUserId(userId);
@@ -137,7 +165,6 @@
     // 获取用户名
     const getUserName = (userId: number) => {
         const contact = chatContacts.find(c => c.userId === userId);
-
         return contact?.nickName || `用户${userId}`;
     };
 
@@ -159,7 +186,19 @@
                 {/* 左侧聊天对象列表 */}
                 <Col span={8}>
                     <Card
-                        title="聊天列表"
+                        title={
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <span>聊天列表</span>
+                                <Button
+                                    type="primary"
+                                    icon={<UserAddOutlined />}
+                                    size="small"
+                                    onClick={() => setAddFriendVisible(true)}
+                                >
+                                    添加好友
+                                </Button>
+                            </div>
+                        }
                         bordered={false}
                         style={{ height: '100%' }}
                         loading={loading && !selectedUserId}
@@ -180,11 +219,11 @@
                                     className={selectedUserId === contact.userId ? 'selected' : ''}
                                 >
                                     <List.Item.Meta
-                                        // avatar={
-                                        //     <Avatar size="large">
-                                        //         {contact.nickName.charAt(0)}
-                                        //     </Avatar>
-                                        // }
+                                        avatar={
+                                            <Avatar size="large">
+                                                {contact.nickName.charAt(0).toUpperCase()}
+                                            </Avatar>
+                                        }
                                         title={
                                             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                                 <span style={{
@@ -355,6 +394,59 @@
                     </div>
                 </Col>
             </Row>
+
+            {/* 添加好友弹窗 */}
+            <Modal
+                title="添加好友"
+                open={addFriendVisible}
+                onCancel={() => {
+                    setAddFriendVisible(false);
+                    form.resetFields();
+                }}
+                footer={null}
+                width={400}
+            >
+                <Form
+                    form={form}
+                    layout="vertical"
+                    onFinish={handleAddFriend}
+                    style={{ marginTop: '20px' }}
+                >
+                    <Form.Item
+                        label="用户名"
+                        name="username"
+                        rules={[
+                            { required: true, message: '请输入用户名' },
+                            { min: 2, message: '用户名至少2个字符' },
+                            { max: 20, message: '用户名最多20个字符' }
+                        ]}
+                    >
+                        <Input
+                            placeholder="请输入要添加的用户名"
+                            prefix={<SearchOutlined />}
+                            size="large"
+                        />
+                    </Form.Item>
+                    <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
+                        <Button
+                            onClick={() => {
+                                setAddFriendVisible(false);
+                                form.resetFields();
+                            }}
+                            style={{ marginRight: '8px' }}
+                        >
+                            取消
+                        </Button>
+                        <Button
+                            type="primary"
+                            htmlType="submit"
+                            loading={addFriendLoading}
+                        >
+                            添加
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Modal>
         </div>
     );
 };