修改好友动态、发布动态、促销模块、创建帖子，Resolve review.
Change-Id: I84a2460dd1208bc703b0527d98225204d03e5efc
diff --git a/src/pages/MessagePage/MessagePage.jsx b/src/pages/MessagePage/MessagePage.jsx
new file mode 100644
index 0000000..ae95dca
--- /dev/null
+++ b/src/pages/MessagePage/MessagePage.jsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import './MessagePage.css';
+import { useUser } from '../../context/UserContext';
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const mockMessages = [
+ {
+ message_id: 1,
+ sender_username: 'Alice',
+ timestamp: Date.now() - 100000,
+ content: '你好，这是测试消息。',
+ },
+ {
+ message_id: 2,
+ sender_username: 'Bob',
+ timestamp: Date.now() - 50000,
+ content: '欢迎使用我们的平台！',
+ },
+];
+
+const MessagePage = () => {
+ const { user } = useUser(); // 从上下文中获取用户
+ const currentUserId = user?.id;
+
+ const [messages, setMessages] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ if (currentUserId) {
+ fetchMessages();
+ }
+ }, [currentUserId]);
+
+ const fetchMessages = async () => {
+ setLoading(true);
+ try {
+ if (process.env.NODE_ENV === 'development') {
+ await new Promise((r) => setTimeout(r, 500)); // 模拟延迟
+ setMessages(mockMessages);
+ } else {
+ const response = await fetch(`${API_BASE}/echo/messages/${currentUserId}`);
+ const data = await response.json();
+ if (data.status === 'success') {
+ setMessages(data.messages);
+ } else {
+ setMessages([]);
+ }
+ }
+ } catch (error) {
+ console.error('加载消息失败:', error);
+ setMessages([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (!currentUserId) {
+ return <div className="message-page">未登录，无法加载消息。</div>;
+ }
+
+ if (loading) {
+ return <div className="message-page">加载中...</div>;
+ }
+
+ return (
+ <div className="message-page">
+ <h2>我的消息</h2>
+ {messages.length === 0 ? (
+ <div>暂无消息记录</div>
+ ) : (
+ <ul className="message-list">
+ {messages.map((msg) => (
+ <li key={msg.message_id} className="message-item">
+ <div className="message-header">
+ 来自：<strong>{msg.sender_username}</strong>
+ <span className="message-time">
+ {new Date(msg.timestamp).toLocaleString()}
+ </span>
+ </div>
+ <div className="message-content">
+ {msg.content}
+ </div>
+ </li>
+ ))}
+ </ul>
+ )}
+ </div>
+ );
+};
+
+export default MessagePage;