diff --git a/react-ui/src/pages/Message/index.tsx b/react-ui/src/pages/Message/index.tsx
new file mode 100644
index 0000000..b07630a
--- /dev/null
+++ b/react-ui/src/pages/Message/index.tsx
@@ -0,0 +1,361 @@
+import React, { useState, useEffect } from 'react';
+import { Card, List, Avatar, Input, Button, Row, Col, message } from 'antd';
+import { SysUserMessage, ChatContact } from './data.d';
+import { getChatContactList, getChatHistory, sendMessage, getUserInfo } from './service';
+import './index.less';
+
+const MessagePage: React.FC = () => {
+    const [chatContacts, setChatContacts] = useState<ChatContact[]>([]);
+    const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+    const [inputMessage, setInputMessage] = useState('');
+    const [chatMessages, setChatMessages] = useState<SysUserMessage[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [sending, setSending] = useState(false);
+
+    // 获取聊天对象列表
+    const fetchChatContacts = async () => {
+        try {
+            setLoading(true);
+            const response = await getChatContactList();
+
+            // 按最后消息时间排序
+            const sortedContacts = response.sort((a: ChatContact, b: ChatContact) =>
+                new Date(b.lastMessageTime).getTime() - new Date(a.lastMessageTime).getTime()
+            );
+            setChatContacts(sortedContacts);
+        } catch (error) {
+            message.error('获取聊天列表失败');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 获取与特定用户的聊天记录
+    const fetchChatHistory = async (userId: number) => {
+        try {
+            setLoading(true);
+            const response = await getChatHistory({
+                userId,
+                currentUserId: 1, // 假设当前用户ID为1，实际应该从用户状态获取
+                pageSize: 100 // 获取最近100条消息
+            });
+
+            // 按时间排序
+            const sortedMessages = response.sort((a: SysUserMessage, b: SysUserMessage) =>
+                new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
+            );
+            setChatMessages(sortedMessages);
+        } catch (error) {
+            message.error('获取聊天记录失败');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 发送消息
+    const handleSendMessage = async () => {
+        if (!inputMessage.trim() || !selectedUserId || sending) {
+            return;
+        }
+
+        try {
+            setSending(true);
+
+            // 先在界面上显示消息（乐观更新）
+            const tempMessage: SysUserMessage = {
+                messageId: Date.now(), // 临时ID
+                senderId: 1, // 当前用户ID
+                receiverId: selectedUserId,
+                content: inputMessage,
+                createTime: new Date(),
+                delFlag: '0'
+            };
+            setChatMessages(prev => [...prev, tempMessage]);
+
+            // 清空输入框
+            const messageContent = inputMessage;
+            setInputMessage('');
+
+            // 调用API发送消息
+            await sendMessage({
+                receiverId: selectedUserId,
+                content: messageContent
+            });
+
+            // 更新聊天对象列表中的最后消息
+            setChatContacts(prevContacts => {
+                const updatedContacts = prevContacts.map(contact =>
+                    contact.userId === selectedUserId
+                        ? {
+                            ...contact,
+                            lastMessage: messageContent,
+                            lastMessageTime: new Date()
+                        }
+                        : contact
+                );
+                // 重新排序，将当前聊天对象移到最前面
+                return updatedContacts.sort((a, b) =>
+                    new Date(b.lastMessageTime).getTime() - new Date(a.lastMessageTime).getTime()
+                );
+            });
+
+            message.success('消息发送成功');
+
+        } catch (error) {
+            message.error('发送消息失败');
+            // 发送失败时，移除临时消息
+            setChatMessages(prev => prev.filter(msg => msg.messageId !== Date.now()));
+        } finally {
+            setSending(false);
+        }
+    };
+
+    // 选择聊天对象
+    const handleSelectUser = (userId: number) => {
+        setSelectedUserId(userId);
+        fetchChatHistory(userId);
+    };
+
+    // 格式化时间显示
+    const formatTime = (time: Date | string) => {
+        const date = new Date(time);
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const minutes = Math.floor(diff / (1000 * 60));
+        const hours = Math.floor(diff / (1000 * 60 * 60));
+        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+        if (minutes < 60) {
+            return `${minutes}分钟前`;
+        } else if (hours < 24) {
+            return `${hours}小时前`;
+        } else {
+            return `${days}天前`;
+        }
+    };
+
+    // 获取用户名
+    const getUserName = (userId: number) => {
+        const contact = chatContacts.find(c => c.userId === userId);
+        return contact?.userName || `用户${userId}`;
+    };
+
+    // 处理回车键发送
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSendMessage();
+        }
+    };
+
+    useEffect(() => {
+        fetchChatContacts();
+    }, []);
+
+    return (
+        <div className="message-page" style={{ height: '100vh', padding: '16px', display: 'flex', flexDirection: 'column' }}>
+            <Row gutter={16} style={{ flex: 1, overflow: 'hidden' }}>
+                {/* 左侧聊天对象列表 */}
+                <Col span={8}>
+                    <Card
+                        title="聊天列表"
+                        bordered={false}
+                        style={{ height: '100%' }}
+                        loading={loading && !selectedUserId}
+                    >
+                        <List
+                            style={{ height: 'calc(100vh - 140px)', overflowY: 'auto' }}
+                            dataSource={chatContacts}
+                            renderItem={(contact) => (
+                                <List.Item
+                                    onClick={() => handleSelectUser(contact.userId)}
+                                    style={{
+                                        cursor: 'pointer',
+                                        backgroundColor: selectedUserId === contact.userId ? '#f0f8ff' : 'transparent',
+                                        padding: '12px',
+                                        borderRadius: '8px',
+                                        margin: '4px 0'
+                                    }}
+                                    className={selectedUserId === contact.userId ? 'selected' : ''}
+                                >
+                                    <List.Item.Meta
+                                        avatar={
+                                            <Avatar size="large">
+                                                {contact.userName.charAt(0)}
+                                            </Avatar>
+                                        }
+                                        title={
+                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                                <span style={{
+                                                    fontWeight: 'normal',
+                                                    fontSize: '14px'
+                                                }}>
+                                                    {contact.userName}
+                                                </span>
+                                                <span style={{ fontSize: '12px', color: '#999' }}>
+                                                    {formatTime(contact.lastMessageTime)}
+                                                </span>
+                                            </div>
+                                        }
+                                        description={
+                                            <div style={{
+                                                color: '#666',
+                                                fontWeight: 'normal',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                                fontSize: '13px'
+                                            }}>
+                                                {contact.lastMessage}
+                                            </div>
+                                        }
+                                    />
+                                </List.Item>
+                            )}
+                        />
+                    </Card>
+                </Col>
+
+                {/* 右侧聊天界面 */}
+                <Col span={16}>
+                    <div style={{
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        position: 'relative'
+                    }}>
+                        {/* 聊天标题 */}
+                        <Card
+                            title={selectedUserId ? `与 ${getUserName(selectedUserId)} 的对话` : '选择一个联系人开始聊天'}
+                            bordered={false}
+                            style={{
+                                marginBottom: 0,
+                                borderBottom: '1px solid #f0f0f0'
+                            }}
+                            bodyStyle={{ padding: 0 }}
+                        />
+
+                        {/* 聊天消息区域 */}
+                        <div style={{
+                            flex: 1,
+                            overflow: 'hidden',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            backgroundColor: '#fff',
+                            border: '1px solid #f0f0f0',
+                            borderTop: 'none'
+                        }}>
+                            {selectedUserId ? (
+                                <>
+                                    <List
+                                        style={{
+                                            flex: 1,
+                                            overflowY: 'auto',
+                                            padding: '16px',
+                                            paddingBottom: '80px' // 为输入框预留空间
+                                        }}
+                                        dataSource={chatMessages}
+                                        loading={loading && selectedUserId !== null}
+                                        renderItem={(item) => (
+                                            <List.Item
+                                                className={`chat-message ${item.senderId === 1 ? 'sent' : 'received'}`}
+                                                style={{
+                                                    border: 'none',
+                                                    padding: '8px 0',
+                                                    display: 'flex',
+                                                    justifyContent: item.senderId === 1 ? 'flex-end' : 'flex-start'
+                                                }}
+                                            >
+                                                <div style={{
+                                                    maxWidth: '70%',
+                                                    display: 'flex',
+                                                    flexDirection: item.senderId === 1 ? 'row-reverse' : 'row',
+                                                    alignItems: 'flex-start',
+                                                    gap: '8px'
+                                                }}>
+                                                    <Avatar size="small">
+                                                        {item.senderId === 1 ? 'Me' : getUserName(item.senderId).charAt(0)}
+                                                    </Avatar>
+                                                    <div>
+                                                        <div style={{
+                                                            fontSize: '12px',
+                                                            color: '#999',
+                                                            marginBottom: '4px',
+                                                            textAlign: item.senderId === 1 ? 'right' : 'left'
+                                                        }}>
+                                                            {item.senderId === 1 ? '我' : getUserName(item.senderId)} · {new Date(item.createTime).toLocaleTimeString()}
+                                                        </div>
+                                                        <div style={{
+                                                            backgroundColor: item.senderId === 1 ? '#1890ff' : '#f0f0f0',
+                                                            color: item.senderId === 1 ? '#fff' : '#000',
+                                                            padding: '8px 12px',
+                                                            borderRadius: '12px',
+                                                            wordBreak: 'break-word',
+                                                            lineHeight: '1.4'
+                                                        }}>
+                                                            {item.content}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </List.Item>
+                                        )}
+                                    />
+
+                                    {/* 输入框区域 - 固定在底部 */}
+                                    <div style={{
+                                        position: 'absolute',
+                                        bottom: 0,
+                                        left: 0,
+                                        right: 0,
+                                        backgroundColor: '#fff',
+                                        padding: '16px',
+                                        borderTop: '1px solid #f0f0f0',
+                                        display: 'flex',
+                                        gap: '8px',
+                                        zIndex: 10,
+                                        boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)'
+                                    }}>
+                                        <Input.TextArea
+                                            value={inputMessage}
+                                            onChange={(e) => setInputMessage(e.target.value)}
+                                            onKeyDown={handleKeyPress}
+                                            placeholder="输入消息...（按 Enter 发送，Shift+Enter 换行）"
+                                            style={{
+                                                flex: 1,
+                                                resize: 'none',
+                                                minHeight: '40px',
+                                                maxHeight: '120px'
+                                            }}
+                                            autoSize={{ minRows: 1, maxRows: 4 }}
+                                        />
+                                        <Button
+                                            type="primary"
+                                            onClick={handleSendMessage}
+                                            loading={sending}
+                                            style={{ height: '40px' }}
+                                        >
+                                            发送
+                                        </Button>
+                                    </div>
+                                </>
+                            ) : (
+                                <div style={{
+                                    flex: 1,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    color: '#999',
+                                    fontSize: '16px'
+                                }}>
+                                    请从左侧选择一个联系人开始聊天
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </Col>
+            </Row>
+        </div>
+    );
+};
+
+export default MessagePage;
\ No newline at end of file