diff --git a/src/pages/FriendMoments/FriendMoments.css b/src/pages/FriendMoments/FriendMoments.css
index 4f0a801..cca399f 100644
--- a/src/pages/FriendMoments/FriendMoments.css
+++ b/src/pages/FriendMoments/FriendMoments.css
@@ -180,3 +180,241 @@
   color: #fff;
 } 
 
+
+.feed-author {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.feed-title {
+  font-size: 1.2em;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.feed-content {
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.feed-images {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.feed-images img {
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.feed-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+}
+
+.like-container {
+  display: flex;
+  gap: 15px;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #555;
+}
+
+.delete-btn {
+  background: none;
+  border: none;
+  color: #f44336;
+  cursor: pointer;
+}
+
+.comment-box {
+  margin-top: 12px;
+}
+
+.comment-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  resize: vertical;
+}
+
+.submit-comment-btn {
+  background-color: #ce6178;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.comments-container {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #ba8989;
+}
+
+.comments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.comment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.comment-user {
+  font-weight: bold;
+  color: #333;
+}
+
+.comment-time {
+  font-size: 0.8em;
+  color: #888;
+}
+
+.comment-content {
+  margin-bottom: 6px;
+  line-height: 1.4;
+}
+
+.reply-prefix {
+  color: #666;
+  font-weight: bold;
+}
+
+.reply-btn {
+  background: none;
+  border: none;
+  color: #2196F3;
+  font-size: 0.9em;
+  cursor: pointer;
+  padding: 0;
+}
+
+.nested-replies {
+  margin-top: 8px;
+  padding-left: 16px;
+  border-left: 2px solid #eee;
+}
+
+.reply-item {
+  margin-bottom: 8px;
+}
+
+.reply-content {
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-dialog {
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  width: 90%;
+  max-width: 500px;
+}
+
+.modal-dialog h3 {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.modal-dialog input,
+.modal-dialog textarea {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.file-label {
+  display: inline-block;
+  background-color: #f0f0f0;
+  color: #333;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 12px;
+}
+
+.cf-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.cf-preview img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.cancel {
+  background-color: #f0f0f0;
+  color: #333;
+  border: 1px solid #ddd;
+}
+
+.submit {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+}
+
+.loading-message,
+.error-message,
+.login-prompt,
+.empty-message {
+  text-align: center;
+  padding: 20px;
+  color: #555;
+}
+
diff --git a/src/pages/FriendMoments/FriendMoments.jsx b/src/pages/FriendMoments/FriendMoments.jsx
index c642772..ab1aef2 100644
--- a/src/pages/FriendMoments/FriendMoments.jsx
+++ b/src/pages/FriendMoments/FriendMoments.jsx
@@ -1,3 +1,1342 @@
+// // FriendMoments.js
+// import React, { useContext, useState, useEffect } from 'react'; 
+// import axios from 'axios';
+// import './FriendMoments.css';
+// import Header from '../../components/Header';
+// import { Edit, GoodTwo, Comment } from '@icon-park/react';
+// import { UserContext } from '../../context/UserContext'; // 引入用户上下文
+
+// // 修改后的封面图 URL 拼接函数
+// const formatImageUrl = (url) => {
+//   if (!url) return '';
+//   const filename = url.split('/').pop(); // 提取文件名部分
+//   return `http://localhost:5011/uploads/dynamic/${filename}`;
+// };
+
+// const FriendMoments = () => {
+//   const [feeds, setFeeds] = useState([]);
+//   const [filteredFeeds, setFilteredFeeds] = useState([]);
+//   const [query, setQuery] = useState('');
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState(null);
+
+//   // 从上下文中获取用户信息
+//   const { user } = useContext(UserContext);
+//   const userId = user?.userId || null; // 从用户上下文中获取userId
+//   const username = user?.username || '未知用户'; // 获取用户名
+
+//   // Modal state & form fields
+//   const [showModal, setShowModal] = useState(false);
+//   const [title, setTitle] = useState('');
+//   const [content, setContent] = useState('');
+//   const [selectedImages, setSelectedImages] = useState([]);
+//   const [previewUrls, setPreviewUrls] = useState([]);
+
+//   // 检查用户是否已登录
+//   const isLoggedIn = !!userId;
+
+//   // 拉取好友动态列表
+//   const fetchFeeds = async () => {
+//     if (!isLoggedIn) {
+//       setLoading(false);
+//       setError('请先登录');
+//       return;
+//     }
+
+//     setLoading(true);
+//     setError(null);
+//     try {
+//       // 注意这里修改了API路径，使用getAllDynamics接口
+//       const res = await axios.get(`/echo/dynamic/${userId}/getAllDynamics`);
+      
+//       // 检查API返回的数据结构
+//       console.log('API响应数据:', res.data);
+      
+//       // 从响应中提取dynamic数组
+//       const dynamicList = res.data.dynamic || [];
+      
+//       // 将API返回的数据结构转换为前端期望的格式
+//       const formattedFeeds = dynamicList.map(item => ({
+//         postNo: item.dynamic_id, // 使用API返回的dynamic_id作为帖子ID
+//         title: item.title,
+//         postContent: item.content,
+//         imageUrl: item.images, // 使用API返回的images字段
+//         postTime: item.time, // 使用API返回的time字段
+//         postLikeNum: item.likes?.length || 0, // 点赞数
+//         liked: item.likes?.some(like => like.user_id === userId), // 当前用户是否已点赞
+//         user_id: item.user_id, // 发布者ID
+//         username: item.username, // 发布者昵称
+//         avatar_url: item.avatar_url, // 发布者头像
+//         comments: item.comments || [] // 评论列表
+//       }));
+      
+//       setFeeds(formattedFeeds);
+//       setFilteredFeeds(formattedFeeds);
+//     } catch (err) {
+//       console.error('获取动态列表失败：', err);
+//       setError('获取动态列表失败，请稍后重试');
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchFeeds();
+//   }, [userId]);
+
+//   // 搜索处理
+//   const handleSearch = () => {
+//     const q = query.trim().toLowerCase();
+//     if (!q) {
+//       setFilteredFeeds(feeds);
+//       return;
+//     }
+//     setFilteredFeeds(
+//       feeds.filter(f => 
+//         (f.title || '').toLowerCase().includes(q) || 
+//         (f.postContent || '').toLowerCase().includes(q)
+//       )
+//     );
+//   };
+
+//   const handleReset = () => {
+//     setQuery('');
+//     setFilteredFeeds(feeds);
+//   };
+
+//   // 对话框内：处理图片选择
+//   const handleImageChange = (e) => {
+//     const files = Array.from(e.target.files);
+//     if (!files.length) return;
+    
+//     const previewUrls = files.map(file => URL.createObjectURL(file));
+    
+//     setSelectedImages(files);
+//     setPreviewUrls(previewUrls);
+//   };
+
+//   // 对话框内：提交新动态
+//   const handleSubmit = async () => {
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     if (!content.trim()) {
+//       alert('内容不能为空');
+//       return;
+//     }
+
+//     try {
+//       // 使用formData格式提交
+//       const formData = new FormData();
+//       formData.append('title', title.trim() || '');
+//       formData.append('content', content.trim());
+      
+//       // 添加图片文件
+//       selectedImages.forEach((file, index) => {
+//         formData.append('image_url', file);
+//       });
+
+//       // 调用创建动态API
+//       await axios.post(`/echo/dynamic/${userId}/createDynamic`, formData, {
+//         headers: {
+//           'Content-Type': 'multipart/form-data'
+//         }
+//       });
+
+//       // 重置表单
+//       setTitle('');
+//       setContent('');
+//       setSelectedImages([]);
+//       setPreviewUrls([]);
+//       setShowModal(false);
+//       fetchFeeds();
+//       alert('发布成功');
+//     } catch (err) {
+//       console.error('发布失败', err);
+//       alert('发布失败，请稍后重试');
+//     }
+//   };
+
+//   // 删除动态 - 注意：API文档中未提供删除接口，这里保留原代码
+//   const handleDelete = async (dynamicId) => {
+  
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     if (!window.confirm('确定要删除这条动态吗？')) return;
+//     try {
+//       // 注意：API文档中未提供删除接口，这里使用原代码中的路径
+//       await axios.delete(`/echo/dynamic/me/deleteDynamic/${dynamicId}`);
+//       fetchFeeds();
+//       alert('删除成功');
+//     } catch (err) {
+//       console.error('删除失败', err);
+//       alert('删除失败，请稍后重试');
+//     }
+//   };
+
+//   // 点赞动态
+//   const handleLike = async (dynamicId, islike) => {
+//     if (islike) {
+//       handleUnlike(dynamicId);
+//       return
+//     }
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     // 验证dynamicId是否有效
+//     if (!dynamicId) {
+//       console.error('无效的dynamicId:', dynamicId);
+//       alert('点赞失败：动态ID无效');
+//       return;
+//     }
+
+//     console.log('当前用户ID:', userId);
+//     console.log('即将点赞的动态ID:', dynamicId);
+    
+//     try {
+//       // 确保参数是整数类型
+//       const requestData = {
+//         userId: parseInt(userId),
+//         dynamicId: parseInt(dynamicId)
+//       };
+      
+//       // 验证参数是否为有效数字
+//       if (isNaN(requestData.userId) || isNaN(requestData.dynamicId)) {
+//         console.error('无效的参数:', requestData);
+//         alert('点赞失败：参数格式错误');
+//         return;
+//       }
+      
+//       console.log('点赞请求数据:', requestData);
+      
+//       const res = await axios.post(`/echo/dynamic/like`, requestData, {
+//         headers: {
+//           'Content-Type': 'application/json' // 明确指定JSON格式
+//         }
+//       });
+      
+//       console.log('点赞API响应:', res.data);
+      
+//       if (res.status === 200) {
+//         // 更新本地状态
+//         setFeeds(prevFeeds => {
+//           return prevFeeds.map(feed => {
+//             if (feed.postNo === dynamicId) {
+//               return {
+//                 ...feed,
+//                 postLikeNum: (feed.postLikeNum || 0) + 1,
+//                 liked: true
+//               };
+//             }
+//             return feed;
+//           });
+//         });
+//       } else {
+//         alert(res.data.message || '点赞失败');
+//       }
+//     } catch (err) {
+//       console.error('点赞失败', err);
+      
+//       // 检查错误响应，获取更详细的错误信息
+//       if (err.response) {
+//         console.error('错误响应数据:', err.response.data);
+//         console.error('错误响应状态:', err.response.status);
+//         console.error('错误响应头:', err.response.headers);
+//       }
+      
+//       alert('点赞失败，请稍后重试');
+//     }
+//   };
+
+//   // 取消点赞
+//   const handleUnlike = async (dynamicId) => {
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     // 验证dynamicId是否有效
+//     if (!dynamicId) {
+//       console.error('无效的dynamicId:', dynamicId);
+//       alert('取消点赞失败：动态ID无效');
+//       return;
+//     }
+
+//     // 检查是否已经取消点赞，防止重复请求
+//     const currentFeed = feeds.find(feed => feed.postNo === dynamicId);
+//     if (currentFeed && !currentFeed.liked) {
+//       console.warn('尝试重复取消点赞，已忽略');
+//       return;
+//     }
+
+//     try {
+//       // 确保参数是整数类型
+//       const requestData = {
+//         userId: parseInt(userId),
+//         dynamicId: parseInt(dynamicId)
+//       };
+      
+//       // 验证参数是否为有效数字
+//       if (isNaN(requestData.userId) || isNaN(requestData.dynamicId)) {
+//         console.error('无效的参数:', requestData);
+//         alert('取消点赞失败：参数格式错误');
+//         return;
+//       }
+      
+//       console.log('取消点赞请求数据:', requestData);
+      
+//       const res = await axios.delete(`/echo/dynamic/unlike`, {
+//         headers: {
+//           'Content-Type': 'application/json' // 明确指定JSON格式
+//         },
+//         data: requestData // 将参数放在data属性中
+//       });
+      
+//       console.log('取消点赞API响应:', res.data);
+      
+//       if (res.status === 200) {
+//         // 更新本地状态
+//         setFeeds(prevFeeds => {
+//           return prevFeeds.map(feed => {
+//             if (feed.postNo === dynamicId) {
+//               return {
+//                 ...feed,
+//                 postLikeNum: Math.max(0, (feed.postLikeNum || 0) - 1),
+//                 liked: false
+//               };
+//             }
+//             return feed;
+//           });
+//         });
+//       } else {
+//         alert(res.data.message || '取消点赞失败');
+//       }
+//     } catch (err) {
+//       console.error('取消点赞失败', err);
+      
+//       // 检查错误响应，获取更详细的错误信息
+//       if (err.response) {
+//         console.error('错误响应数据:', err.response.data);
+//         console.error('错误响应状态:', err.response.status);
+//         console.error('错误响应头:', err.response.headers);
+//       }
+      
+//       alert('取消点赞失败，请稍后重试');
+//     }
+//   };
+
+//   // 评论好友动态
+//   const handleComment = async (dynamicId, parentCommentId = null, replyToUsername = '') => {
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     const commentInputId = `comment-input-${dynamicId}-${parentCommentId}`;
+//     const commentInput = document.getElementById(commentInputId);
+    
+//     if (!commentInput || !commentInput.value.trim()) {
+//       alert('评论内容不能为空');
+//       return;
+//     }
+
+//     const commentContent = commentInput.value.trim();
+
+//     try {
+//       // 准备请求数据
+//       const requestData = {
+//         content: commentContent
+//       };
+      
+//       // 如果是回复，添加parent_comment_id
+//       if (parentCommentId) {
+//         requestData.parent_comment_id = parentCommentId;
+//       }
+      
+//       const res = await axios.post(`/echo/dynamic/${userId}/feeds/${dynamicId}/comments`, requestData);
+
+//       if (res.status === 200 || res.status === 201) {
+//         // 创建新评论对象
+//         const newComment = {
+//           // 使用API返回的评论ID，如果没有则生成临时ID
+//           id: res.data.comment_id || `temp-${Date.now()}`,
+//           user_id: userId,
+//           username: username,
+//           content: commentContent,
+//           time: new Date().toISOString(),
+//           // 如果是回复，添加reply_to_username
+//           ...(replyToUsername && { reply_to_username: replyToUsername })
+//         };
+
+//         // 更新本地状态
+//         setFeeds(prevFeeds => {
+//           return prevFeeds.map(feed => {
+//             if (feed.postNo === dynamicId) {
+//               if (parentCommentId) {
+//                 // 这是一个回复，找到父评论并添加到其replies数组
+//                 return {
+//                   ...feed,
+//                   comments: feed.comments.map(comment => {
+//                     if (comment.id === parentCommentId || comment.postNo === parentCommentId) {
+//                       // 确保replies数组存在
+//                       if (!comment.replies) {
+//                         return {
+//                           ...comment,
+//                           replies: [newComment]
+//                         };
+//                       }
+//                       return {
+//                         ...comment,
+//                         replies: [...comment.replies, newComment]
+//                       };
+//                     }
+//                     return comment;
+//                   })
+//                 };
+//               } else {
+//                 // 这是一个新评论，添加到评论列表
+//                 return {
+//                   ...feed,
+//                   comments: [...feed.comments, newComment]
+//                 };
+//               }
+//             }
+//             return feed;
+//           });
+//         });
+
+//         // 清空输入框并隐藏回复框
+//         if (commentInput) {
+//           commentInput.value = '';
+//         }
+//         toggleReplyBox(dynamicId, parentCommentId);
+//       } else {
+//         alert(res.data.error || '评论失败');
+//       }
+//     } catch (err) {
+//       console.error('评论失败', err);
+//       alert('评论失败，请稍后重试');
+//     }
+//   };
+
+//   // 切换回复框显示状态
+//   const toggleReplyBox = (dynamicId, parentCommentId = null) => {
+//     const replyBoxId = `reply-box-${dynamicId}-${parentCommentId}`;
+//     const replyBox = document.getElementById(replyBoxId);
+    
+//     if (replyBox) {
+//       replyBox.style.display = replyBox.style.display === 'none' ? 'block' : 'none';
+      
+//       // 如果显示，聚焦到输入框
+//       if (replyBox.style.display === 'block') {
+//         const commentInput = document.getElementById(`comment-input-${dynamicId}-${parentCommentId}`);
+//         if (commentInput) commentInput.focus();
+//       }
+//     }
+//   };
+
+//   return (
+//     <div className="friend-moments-container">
+//       <Header />
+//       <div className="fm-header">
+//         <button className="create-btn" onClick={() => setShowModal(true)}>
+//           <Edit theme="outline" size="18" style={{ marginRight: '6px' }} />
+//           创建动态
+//         </button>
+//       </div>
+
+//       <div className="feed-list">
+//         {loading ? (
+//           <div className="loading-message">加载中...</div>
+//         ) : error ? (
+//           <div className="error-message">{error}</div>
+//         ) : !isLoggedIn ? (
+//           <div className="login-prompt">
+//             <p>请先登录查看好友动态</p>
+//           </div>
+//         ) : filteredFeeds.length === 0 ? (
+//           <div className="empty-message">暂无动态</div>
+//         ) : (
+//           filteredFeeds.map(feed => (
+//             <div className="feed-item" key={feed.postNo || `feed-${Math.random()}`}>
+//               {/* 显示发布者信息 */}
+//               <div className="feed-author">
+//                 <img
+//                   className="user-avatar"
+//                   src={feed.avatar_url || 'https://example.com/default-avatar.jpg'}
+//                   alt={feed.username || '用户头像'}
+//                 />
+//                 <div>
+//                   <h4>{feed.username || '未知用户'}</h4>
+//                   <span className="feed-date">{new Date(feed.postTime || Date.now()).toLocaleString()}</span>
+//                 </div>
+//               </div>
+
+//               {feed.title && <h4 className="feed-title">{feed.title}</h4>}
+//               <p className="feed-content">{feed.postContent || '无内容'}</p>
+
+//               {feed.imageUrl && (
+//                 <div className="feed-images">
+//                   {typeof feed.imageUrl === 'string' ? (
+//                     <img src={formatImageUrl(feed.imageUrl)} alt="动态图片" />
+//                   ) : (
+//                     feed.imageUrl.map((url, i) => (
+//                       <img key={i} src={formatImageUrl(url)} alt={`动态图${i}`} />
+//                     ))
+//                   )}
+//                 </div>
+//               )}
+
+//               <div className="feed-footer">
+//                 <div className="like-container">
+//                   <button className="icon-btn" onClick={() => handleLike(feed.postNo, feed.liked, feed.user_id)}>
+//                     <GoodTwo theme="outline" size="24" fill={feed.liked ? '#f00' : '#fff'} />
+//                     <span>{feed.postLikeNum || 0}</span>
+//                   </button>
+
+//                   <button
+//                     className="icon-btn"
+//                     onClick={() => toggleReplyBox(feed.postNo)}
+//                   >
+//                     <Comment theme="outline" size="24" fill="#333" />
+//                     <span>评论</span>
+//                   </button>
+//                 </div>
+                
+//                 {feed.user_id === userId && (
+//                   <button className="delete-btn" onClick={() => handleDelete(feed.postNo)}>
+//                     删除
+//                   </button>
+//                 )}
+//               </div>
+
+//               {/* 动态的评论输入框 */}
+//               <div id={`reply-box-${feed.postNo}-null`} className="comment-box" style={{display: 'none'}}>
+//                 <textarea
+//                   id={`comment-input-${feed.postNo}-null`}
+//                   className="comment-input"
+//                   placeholder="请输入评论内容..."
+//                 />
+//                 <button
+//                   className="submit-comment-btn"
+//                   onClick={() => handleComment(feed.postNo)}
+//                 >
+//                   发布评论
+//                 </button>
+//               </div>
+
+//               {/* 评论列表 */}
+//               {Array.isArray(feed.comments) && feed.comments.length > 0 && (
+//                 <div className="comments-container">
+//                   <h5>评论 ({feed.comments.length})</h5>
+//                   <div className="comments-list">
+//                     {feed.comments.map((comment, index) => (
+//                       <div className="comment-item" key={comment.id || index}>
+//                         <div className="comment-header">
+//                           <span className="comment-user">{comment.username || '用户'}</span>
+//                           <span className="comment-time">
+//                             {new Date(comment.time || Date.now()).toLocaleString()}
+//                           </span>
+//                         </div>
+//                         <p className="comment-content">
+//                           {/* 显示回复格式 */}
+//                           {comment.reply_to_username ? 
+//                             <span className="reply-prefix">{comment.username} 回复 {comment.reply_to_username}：</span> : 
+//                             <span>{comment.username}：</span>
+//                           }
+//                           {comment.content}
+//                         </p>
+//                         <button 
+//                           className="reply-btn" 
+//                           onClick={() => toggleReplyBox(feed.postNo, comment.id || index, comment.username)}
+//                         >
+//                           回复
+//                         </button>
+                        
+//                         {/* 该评论的回复框 */}
+//                         <div id={`reply-box-${feed.postNo}-${comment.id || index}`} className="comment-box nested-reply-box" style={{display: 'none'}}>
+//                           <textarea
+//                             id={`comment-input-${feed.postNo}-${comment.id || index}`}
+//                             className="comment-input"
+//                             placeholder={`回复 ${comment.username}...`}
+//                           />
+//                           <button
+//                             className="submit-comment-btn"
+//                             onClick={() => handleComment(feed.postNo, comment.id || index, comment.username)}
+//                           >
+//                             发布回复
+//                           </button>
+//                         </div>
+                        
+//                         {/* 嵌套回复 */}
+//                         {Array.isArray(comment.replies) && comment.replies.length > 0 && (
+//                           <div className="nested-replies">
+//                             {comment.replies.map((reply, replyIndex) => (
+//                               <div className="reply-item" key={reply.id || `${comment.id || index}-${replyIndex}`}>
+//                                 <p className="reply-content">
+//                                   {reply.reply_to_username ? 
+//                                     <span className="reply-prefix">{reply.username} 回复 {reply.reply_to_username}：</span> : 
+//                                     <span>{reply.username}：</span>
+//                                   }
+//                                   {reply.content}
+//                                 </p>
+//                                 <button 
+//                                   className="reply-btn" 
+//                                   onClick={() => toggleReplyBox(feed.postNo, reply.id || `${comment.id || index}-${replyIndex}`, reply.username)}
+//                                 >
+//                                   回复
+//                                 </button>
+                                
+//                                 {/* 该回复的回复框 */}
+//                                 <div id={`reply-box-${feed.postNo}-${reply.id || `${comment.id || index}-${replyIndex}`}`} className="comment-box nested-reply-box" style={{display: 'none'}}>
+//                                   <textarea
+//                                     id={`comment-input-${feed.postNo}-${reply.id || `${comment.id || index}-${replyIndex}`}`}
+//                                     className="comment-input"
+//                                     placeholder={`回复 ${reply.username}...`}
+//                                   />
+//                                   <button
+//                                     className="submit-comment-btn"
+//                                     onClick={() => handleComment(feed.postNo, reply.id || `${comment.id || index}-${replyIndex}`, reply.username)}
+//                                   >
+//                                     发布回复
+//                                   </button>
+//                                 </div>
+//                               </div>
+//                             ))}
+//                           </div>
+//                         )}
+//                       </div>
+//                     ))}
+//                   </div>
+//                 </div>
+//               )}
+//             </div>
+//           ))
+//         )}
+//       </div>
+
+//       {/* Modal 对话框 */}
+//       {showModal && (
+//         <div className="modal-overlay" onClick={() => setShowModal(false)}>
+//           <div className="modal-dialog" onClick={e => e.stopPropagation()}>
+//             <h3>发布新动态</h3>
+//             <input
+//               type="text"
+//               placeholder="标题"
+//               value={title}
+//               onChange={e => setTitle(e.target.value)}
+//             />
+//             <textarea
+//               placeholder="写下你的内容..."
+//               value={content}
+//               onChange={e => setContent(e.target.value)}
+//             />
+//             <label className="file-label">
+//               选择图片
+//               <input
+//                 type="file"
+//                 accept="image/*"
+//                 multiple
+//                 onChange={handleImageChange}
+//                 style={{ display: 'none' }}
+//               />
+//             </label>
+//             <div className="cf-preview">
+//               {previewUrls.map((url, i) => (
+//                 <img key={i} src={url} alt={`预览${i}`} />
+//               ))}
+//             </div>
+//             <div className="modal-actions">
+//               <button className="btn cancel" onClick={() => setShowModal(false)}>
+//                 取消
+//               </button>
+//               <button className="btn submit" onClick={handleSubmit}>
+//                 发布
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default FriendMoments;
+// // FriendMoments.js
+// import React, { useContext, useState, useEffect } from 'react'; 
+// import axios from 'axios';
+// import './FriendMoments.css';
+// import Header from '../../components/Header';
+// import { Edit, GoodTwo, Comment } from '@icon-park/react';
+// import { UserContext } from '../../context/UserContext'; // 引入用户上下文
+
+// // 修改后的封面图 URL 拼接函数
+// const formatImageUrl = (url) => {
+//   if (!url) return '';
+//   const filename = url.split('/').pop(); // 提取文件名部分
+//   return `http://localhost:5011/uploads/dynamic/${filename}`;
+// };
+
+// const FriendMoments = () => {
+//   const [feeds, setFeeds] = useState([]);
+//   const [filteredFeeds, setFilteredFeeds] = useState([]);
+//   const [query, setQuery] = useState('');
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState(null);
+
+//   // 从上下文中获取用户信息
+//   const { user } = useContext(UserContext);
+//   const userId = user?.userId || null; // 从用户上下文中获取userId
+//   const username = user?.username || '未知用户'; // 获取用户名
+
+//   // Modal state & form fields
+//   const [showModal, setShowModal] = useState(false);
+//   const [title, setTitle] = useState('');
+//   const [content, setContent] = useState('');
+//   const [selectedImages, setSelectedImages] = useState([]);
+//   const [previewUrls, setPreviewUrls] = useState([]);
+
+//   // 检查用户是否已登录
+//   const isLoggedIn = !!userId;
+
+//   // 拉取好友动态列表
+//   const fetchFeeds = async () => {
+//     if (!isLoggedIn) {
+//       setLoading(false);
+//       setError('请先登录');
+//       return;
+//     }
+
+//     setLoading(true);
+//     setError(null);
+//     try {
+//       // 注意这里修改了API路径，使用getAllDynamics接口
+//       const res = await axios.get(`/echo/dynamic/${userId}/getAllDynamics`);
+      
+//       // 检查API返回的数据结构
+//       console.log('API响应数据:', res.data);
+      
+//       // 从响应中提取dynamic数组
+//       const dynamicList = res.data.dynamic || [];
+      
+//       // 将API返回的数据结构转换为前端期望的格式
+//       const formattedFeeds = dynamicList.map(item => ({
+//         postNo: item.dynamic_id, // 使用API返回的dynamic_id作为帖子ID
+//         title: item.title,
+//         postContent: item.content,
+//         imageUrl: item.images, // 使用API返回的images字段
+//         postTime: item.time, // 使用API返回的time字段
+//         postLikeNum: item.likes?.length || 0, // 点赞数
+//         liked: item.likes?.some(like => like.user_id === userId), // 当前用户是否已点赞
+//         user_id: item.user_id, // 发布者ID
+//         username: item.username, // 发布者昵称
+//         avatar_url: item.avatar_url, // 发布者头像
+//         comments: item.comments || [] // 评论列表
+//       }));
+      
+//       setFeeds(formattedFeeds);
+//       setFilteredFeeds(formattedFeeds);
+//     } catch (err) {
+//       console.error('获取动态列表失败：', err);
+//       setError('获取动态列表失败，请稍后重试');
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchFeeds();
+//   }, [userId]);
+
+//   // 搜索处理
+//   const handleSearch = () => {
+//     const q = query.trim().toLowerCase();
+//     if (!q) {
+//       setFilteredFeeds(feeds);
+//       return;
+//     }
+//     setFilteredFeeds(
+//       feeds.filter(f => 
+//         (f.title || '').toLowerCase().includes(q) || 
+//         (f.postContent || '').toLowerCase().includes(q)
+//       )
+//     );
+//   };
+
+//   const handleReset = () => {
+//     setQuery('');
+//     setFilteredFeeds(feeds);
+//   };
+
+//   // 对话框内：处理图片选择
+//   const handleImageChange = (e) => {
+//     const files = Array.from(e.target.files);
+//     if (!files.length) return;
+    
+//     const previewUrls = files.map(file => URL.createObjectURL(file));
+    
+//     setSelectedImages(files);
+//     setPreviewUrls(previewUrls);
+//   };
+
+//   // 对话框内：提交新动态
+//   const handleSubmit = async () => {
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     if (!content.trim()) {
+//       alert('内容不能为空');
+//       return;
+//     }
+
+//     try {
+//       // 使用formData格式提交
+//       const formData = new FormData();
+//       formData.append('title', title.trim() || '');
+//       formData.append('content', content.trim());
+      
+//       // 添加图片文件
+//       selectedImages.forEach((file, index) => {
+//         formData.append('image_url', file);
+//       });
+
+//       // 调用创建动态API
+//       await axios.post(`/echo/dynamic/${userId}/createDynamic`, formData, {
+//         headers: {
+//           'Content-Type': 'multipart/form-data'
+//         }
+//       });
+
+//       // 重置表单
+//       setTitle('');
+//       setContent('');
+//       setSelectedImages([]);
+//       setPreviewUrls([]);
+//       setShowModal(false);
+//       fetchFeeds();
+//       alert('发布成功');
+//     } catch (err) {
+//       console.error('发布失败', err);
+//       alert('发布失败，请稍后重试');
+//     }
+//   };
+
+//   // 删除动态 - 注意：API文档中未提供删除接口，这里保留原代码
+//   const handleDelete = async (dynamicId) => {
+  
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     if (!window.confirm('确定要删除这条动态吗？')) return;
+//     try {
+//       // 注意：API文档中未提供删除接口，这里使用原代码中的路径
+//       await axios.delete(`/echo/dynamic/me/deleteDynamic/${dynamicId}`);
+//       fetchFeeds();
+//       alert('删除成功');
+//     } catch (err) {
+//       console.error('删除失败', err);
+//       alert('删除失败，请稍后重试');
+//     }
+//   };
+
+//   // 点赞动态
+//   const handleLike = async (dynamicId, islike) => {
+//     if (islike) {
+//       handleUnlike(dynamicId);
+//       return
+//     }
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     // 验证dynamicId是否有效
+//     if (!dynamicId) {
+//       console.error('无效的dynamicId:', dynamicId);
+//       alert('点赞失败：动态ID无效');
+//       return;
+//     }
+
+//     console.log('当前用户ID:', userId);
+//     console.log('即将点赞的动态ID:', dynamicId);
+    
+//     try {
+//       // 确保参数是整数类型
+//       const requestData = {
+//         userId: parseInt(userId),
+//         dynamicId: parseInt(dynamicId)
+//       };
+      
+//       // 验证参数是否为有效数字
+//       if (isNaN(requestData.userId) || isNaN(requestData.dynamicId)) {
+//         console.error('无效的参数:', requestData);
+//         alert('点赞失败：参数格式错误');
+//         return;
+//       }
+      
+//       console.log('点赞请求数据:', requestData);
+      
+//       const res = await axios.post(`/echo/dynamic/like`, requestData, {
+//         headers: {
+//           'Content-Type': 'application/json' // 明确指定JSON格式
+//         }
+//       });
+      
+//       console.log('点赞API响应:', res.data);
+      
+//       if (res.status === 200) {
+//         // 更新本地状态
+//         feeds.forEach(feed => {
+//           if (feed.postNo === dynamicId) {
+//             feed.postLikeNum = (feed.postLikeNum || 0) + 1;
+//             feed.liked = true;
+//           }
+//         });
+//         setFeeds([...feeds]); // 更新状态以触发重新渲染
+//       } else {
+//         alert(res.data.message || '点赞失败');
+//       }
+//     } catch (err) {
+//       console.error('点赞失败', err);
+      
+//       // 检查错误响应，获取更详细的错误信息
+//       if (err.response) {
+//         console.error('错误响应数据:', err.response.data);
+//         console.error('错误响应状态:', err.response.status);
+//         console.error('错误响应头:', err.response.headers);
+//       }
+      
+//       alert('点赞失败，请稍后重试');
+//     }
+//   };
+
+//   // 取消点赞
+//   const handleUnlike = async (dynamicId) => {
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     // 验证dynamicId是否有效
+//     if (!dynamicId) {
+//       console.error('无效的dynamicId:', dynamicId);
+//       alert('取消点赞失败：动态ID无效');
+//       return;
+//     }
+
+//     // 检查是否已经取消点赞，防止重复请求
+//     const currentFeed = feeds.find(feed => feed.postNo === dynamicId);
+//     if (currentFeed && !currentFeed.liked) {
+//       console.warn('尝试重复取消点赞，已忽略');
+//       return;
+//     }
+
+//     try {
+//       // 确保参数是整数类型
+//       const requestData = {
+//         userId: parseInt(userId),
+//         dynamicId: parseInt(dynamicId)
+//       };
+      
+//       // 验证参数是否为有效数字
+//       if (isNaN(requestData.userId) || isNaN(requestData.dynamicId)) {
+//         console.error('无效的参数:', requestData);
+//         alert('取消点赞失败：参数格式错误');
+//         return;
+//       }
+      
+//       console.log('取消点赞请求数据:', requestData);
+      
+//       const res = await axios.delete(`/echo/dynamic/unlike`, {
+//         headers: {
+//           'Content-Type': 'application/json' // 明确指定JSON格式
+//         },
+//         data: requestData // 将参数放在data属性中
+//       });
+      
+//       console.log('取消点赞API响应:', res.data);
+      
+//       if (res.status === 200) {
+//         // 更新本地状态
+//         feeds.forEach(feed => {
+//           if (feed.postNo === dynamicId) {
+//             feed.postLikeNum = Math.max(0, (feed.postLikeNum || 0) - 1);
+//             feed.liked = false;
+//           }
+//         });
+//         setFeeds([...feeds]); // 更新状态以触发重新渲染
+//       } else {
+//         alert(res.data.message || '取消点赞失败');
+//       }
+//     } catch (err) {
+//       console.error('取消点赞失败', err);
+      
+//       // 检查错误响应，获取更详细的错误信息
+//       if (err.response) {
+//         console.error('错误响应数据:', err.response.data);
+//         console.error('错误响应状态:', err.response.status);
+//         console.error('错误响应头:', err.response.headers);
+//       }
+      
+//       alert('取消点赞失败，请稍后重试');
+//     }
+//   };
+
+//   // 评论好友动态
+//   const handleComment = async (dynamicId, parentCommentId = null, replyToUsername = '') => {
+//     if (!isLoggedIn) {
+//       alert('请先登录');
+//       return;
+//     }
+
+//     const commentInputRef = document.getElementById(`comment-input-${dynamicId}-${parentCommentId}`);
+//     if (!commentInputRef || !commentInputRef.value.trim()) {
+//       alert('评论内容不能为空');
+//       return;
+//     }
+
+//     const commentContent = commentInputRef.value.trim();
+
+//     try {
+//       // 准备请求数据
+//       const requestData = {
+//         content: commentContent
+//       };
+      
+//       // 如果是回复，添加parent_comment_id
+//       if (parentCommentId) {
+//         requestData.parent_comment_id = parentCommentId;
+//       }
+      
+//       const res = await axios.post(`/echo/dynamic/${userId}/feeds/${dynamicId}/comments`, requestData);
+
+//       if (res.status === 200 || res.status === 201) {
+//         // 成功获取评论数据
+//         const newComment = {
+//           user_id: userId,
+//           username: username,
+//           content: commentContent,
+//           time: new Date().toISOString(), // 使用当前时间作为评论时间
+//           // 如果是回复，添加parent_comment_id和reply_to_username
+//           ...(parentCommentId && { parent_comment_id: parentCommentId }),
+//           ...(replyToUsername && { reply_to_username: replyToUsername })
+//         };
+
+//         // 更新本地状态，添加新评论
+//         setFeeds(prevFeeds => {
+//           return prevFeeds.map(feed => {
+//             if (feed.postNo === dynamicId) {
+//               // 确保comments是数组，并且正确合并新评论
+//               const currentComments = Array.isArray(feed.comments) ? feed.comments : [];
+              
+//               if (parentCommentId) {
+//                 // 查找父评论并添加回复
+//                 return {
+//                   ...feed,
+//                   comments: currentComments.map(comment => {
+//                     if (comment.id === parentCommentId || comment.postNo === parentCommentId) {
+//                       // 如果父评论已有replies数组，添加到其中
+//                       if (Array.isArray(comment.replies)) {
+//                         return {
+//                           ...comment,
+//                           replies: [...comment.replies, newComment]
+//                         };
+//                       } else {
+//                         // 否则创建新的replies数组
+//                         return {
+//                           ...comment,
+//                           replies: [newComment]
+//                         };
+//                       }
+//                     }
+//                     return comment;
+//                   })
+//                 };
+//               } else {
+//                 // 普通评论，添加到评论列表
+//                 return {
+//                   ...feed,
+//                   comments: [...currentComments, newComment]
+//                 };
+//               }
+//             }
+//             return feed;
+//           });
+//         });
+
+//         // 清空输入框
+//         if (commentInputRef) {
+//           commentInputRef.value = '';
+//         }
+        
+//         // 隐藏回复框
+//         toggleReplyBox(dynamicId, parentCommentId);
+//       } else {
+//         alert(res.data.error || '评论失败');
+//       }
+//     } catch (err) {
+//       console.error('评论失败', err);
+//       alert('评论失败，请稍后重试');
+//     }
+//   };
+
+//   // 切换回复框显示状态
+//   const toggleReplyBox = (dynamicId, parentCommentId = null) => {
+//     const replyBoxId = `reply-box-${dynamicId}-${parentCommentId}`;
+//     const replyBox = document.getElementById(replyBoxId);
+    
+//     if (replyBox) {
+//       replyBox.style.display = replyBox.style.display === 'none' ? 'block' : 'none';
+      
+//       // 如果显示，聚焦到输入框
+//       if (replyBox.style.display === 'block') {
+//         const commentInput = document.getElementById(`comment-input-${dynamicId}-${parentCommentId}`);
+//         if (commentInput) commentInput.focus();
+//       }
+//     }
+//   };
+
+//   return (
+//     <div className="friend-moments-container">
+//       <Header />
+//       <div className="fm-header">
+//         <button className="create-btn" onClick={() => setShowModal(true)}>
+//           <Edit theme="outline" size="18" style={{ marginRight: '6px' }} />
+//           创建动态
+//         </button>
+//       </div>
+
+//       <div className="feed-list">
+//         {loading ? (
+//           <div className="loading-message">加载中...</div>
+//         ) : error ? (
+//           <div className="error-message">{error}</div>
+//         ) : !isLoggedIn ? (
+//           <div className="login-prompt">
+//             <p>请先登录查看好友动态</p>
+//           </div>
+//         ) : filteredFeeds.length === 0 ? (
+//           <div className="empty-message">暂无动态</div>
+//         ) : (
+//           filteredFeeds.map(feed => (
+//             <div className="feed-item" key={feed.postNo || `feed-${Math.random()}`}>
+//               {/* 显示发布者信息 */}
+//               <div className="feed-author">
+//                 <img
+//                   className="user-avatar"
+//                   src={feed.avatar_url || 'https://example.com/default-avatar.jpg'}
+//                   alt={feed.username || '用户头像'}
+//                 />
+//                 <div>
+//                   <h4>{feed.username || '未知用户'}</h4>
+//                   <span className="feed-date">{new Date(feed.postTime || Date.now()).toLocaleString()}</span>
+//                 </div>
+//               </div>
+
+//               {feed.title && <h4 className="feed-title">{feed.title}</h4>}
+//               <p className="feed-content">{feed.postContent || '无内容'}</p>
+
+//               {feed.imageUrl && (
+//                 <div className="feed-images">
+//                   {typeof feed.imageUrl === 'string' ? (
+//                     <img src={formatImageUrl(feed.imageUrl)} alt="动态图片" />
+//                   ) : (
+//                     feed.imageUrl.map((url, i) => (
+//                       <img key={i} src={formatImageUrl(url)} alt={`动态图${i}`} />
+//                     ))
+//                   )}
+//                 </div>
+//               )}
+
+//               <div className="feed-footer">
+//                 <div className="like-container">
+//                   <button className="icon-btn" onClick={() => handleLike(feed.postNo, feed.liked, feed.user_id)}>
+//                     <GoodTwo theme="outline" size="24" fill={feed.liked ? '#f00' : '#fff'} />
+//                     <span>{feed.postLikeNum || 0}</span>
+//                   </button>
+
+//                   <button
+//                     className="icon-btn"
+//                     onClick={() => toggleReplyBox(feed.postNo)}
+//                   >
+//                     <Comment theme="outline" size="24" fill="#333" />
+//                     <span>评论</span>
+//                   </button>
+//                 </div>
+                
+//                 {feed.user_id === userId && (
+//                   <button className="delete-btn" onClick={() => handleDelete(feed.postNo)}>
+//                     删除
+//                   </button>
+//                 )}
+//               </div>
+
+//               {/* 动态的评论输入框 */}
+//               <div id={`reply-box-${feed.postNo}-null`} className="comment-box" style={{display: 'none'}}>
+//                 <textarea
+//                   id={`comment-input-${feed.postNo}-null`}
+//                   className="comment-input"
+//                   placeholder="请输入评论内容..."
+//                 />
+//                 <button
+//                   className="submit-comment-btn"
+//                   onClick={() => handleComment(feed.postNo)}
+//                 >
+//                   发布评论
+//                 </button>
+//               </div>
+
+//               {/* 评论列表 */}
+//               {Array.isArray(feed.comments) && feed.comments.length > 0 && (
+//                 <div className="comments-container">
+//                   <h5>评论 ({feed.comments.length})</h5>
+//                   <div className="comments-list">
+//                     {feed.comments.map((comment, index) => (
+//                       <div className="comment-item" key={index}>
+//                         <div className="comment-header">
+//                           <span className="comment-user">{comment.username || '用户'}</span>
+//                           <span className="comment-time">
+//                             {new Date(comment.time || Date.now()).toLocaleString()}
+//                           </span>
+//                         </div>
+//                         <p className="comment-content">
+//                           {/* 显示回复格式 */}
+//                           {comment.reply_to_username ? 
+//                             <span className="reply-prefix">{comment.username} 回复 {comment.reply_to_username}：</span> : 
+//                             <span>{comment.username}：</span>
+//                           }
+//                           {comment.content}
+//                         </p>
+//                         <button 
+//                           className="reply-btn" 
+//                           onClick={() => toggleReplyBox(feed.postNo, comment.id || index)}
+//                         >
+//                           回复
+//                         </button>
+                        
+//                         {/* 该评论的回复框 */}
+//                         <div id={`reply-box-${feed.postNo}-${comment.id || index}`} className="comment-box nested-reply-box" style={{display: 'none'}}>
+//                           <textarea
+//                             id={`comment-input-${feed.postNo}-${comment.id || index}`}
+//                             className="comment-input"
+//                             placeholder={`回复 ${comment.username}...`}
+//                           />
+//                           <button
+//                             className="submit-comment-btn"
+//                             onClick={() => handleComment(feed.postNo, comment.id || index, comment.username)}
+//                           >
+//                             发布回复
+//                           </button>
+//                         </div>
+                        
+//                         {/* 嵌套回复 */}
+//                         {Array.isArray(comment.replies) && comment.replies.length > 0 && (
+//                           <div className="nested-replies">
+//                             {comment.replies.map((reply, replyIndex) => (
+//                               <div className="reply-item" key={replyIndex}>
+//                                 <p className="reply-content">
+//                                   {reply.reply_to_username ? 
+//                                     <span className="reply-prefix">{reply.username} 回复 {reply.reply_to_username}：</span> : 
+//                                     <span>{reply.username}：</span>
+//                                   }
+//                                   {reply.content}
+//                                 </p>
+//                                 <button 
+//                                   className="reply-btn" 
+//                                   onClick={() => toggleReplyBox(feed.postNo, reply.id || `${index}-${replyIndex}`, reply.username)}
+//                                 >
+//                                   回复
+//                                 </button>
+                                
+//                                 {/* 该回复的回复框 */}
+//                                 <div id={`reply-box-${feed.postNo}-${reply.id || `${index}-${replyIndex}`}`} className="comment-box nested-reply-box" style={{display: 'none'}}>
+//                                   <textarea
+//                                     id={`comment-input-${feed.postNo}-${reply.id || `${index}-${replyIndex}`}`}
+//                                     className="comment-input"
+//                                     placeholder={`回复 ${reply.username}...`}
+//                                   />
+//                                   <button
+//                                     className="submit-comment-btn"
+//                                     onClick={() => handleComment(feed.postNo, reply.id || `${index}-${replyIndex}`, reply.username)}
+//                                   >
+//                                     发布回复
+//                                   </button>
+//                                 </div>
+//                               </div>
+//                             ))}
+//                           </div>
+//                         )}
+//                       </div>
+//                     ))}
+//                   </div>
+//                 </div>
+//               )}
+//             </div>
+//           ))
+//         )}
+//       </div>
+
+//       {/* Modal 对话框 */}
+//       {showModal && (
+//         <div className="modal-overlay" onClick={() => setShowModal(false)}>
+//           <div className="modal-dialog" onClick={e => e.stopPropagation()}>
+//             <h3>发布新动态</h3>
+//             <input
+//               type="text"
+//               placeholder="标题"
+//               value={title}
+//               onChange={e => setTitle(e.target.value)}
+//             />
+//             <textarea
+//               placeholder="写下你的内容..."
+//               value={content}
+//               onChange={e => setContent(e.target.value)}
+//             />
+//             <label className="file-label">
+//               选择图片
+//               <input
+//                 type="file"
+//                 accept="image/*"
+//                 multiple
+//                 onChange={handleImageChange}
+//                 style={{ display: 'none' }}
+//               />
+//             </label>
+//             <div className="cf-preview">
+//               {previewUrls.map((url, i) => (
+//                 <img key={i} src={url} alt={`预览${i}`} />
+//               ))}
+//             </div>
+//             <div className="modal-actions">
+//               <button className="btn cancel" onClick={() => setShowModal(false)}>
+//                 取消
+//               </button>
+//               <button className="btn submit" onClick={handleSubmit}>
+//                 发布
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default FriendMoments; 
+
+
+// FriendMoments.js
 import React, { useContext, useState, useEffect } from 'react'; 
 import axios from 'axios';
 import './FriendMoments.css';
@@ -19,6 +1358,8 @@
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [commentBoxVisibleId, setCommentBoxVisibleId] = useState(null); // 当前显示评论框的动态ID
+  const [replyToCommentId, setReplyToCommentId] = useState(null); // 当前回复的评论ID
+  const [replyToUsername, setReplyToUsername] = useState(''); // 当前回复的用户名
   const [commentInput, setCommentInput] = useState(''); // 当前输入的评论内容
 
   // 从上下文中获取用户信息
@@ -181,7 +1522,7 @@
   };
 
   // 点赞动态
-  const handleLike = async (dynamicId,islike) => {
+  const handleLike = async (dynamicId, islike) => {
     if (islike) {
       handleUnlike(dynamicId);
       return
@@ -198,7 +1539,6 @@
       return;
     }
 
-
     console.log('当前用户ID:', userId);
     console.log('即将点赞的动态ID:', dynamicId);
     
@@ -325,73 +1665,103 @@
   };
 
   // 评论好友动态
-  // 评论好友动态
-const handleComment = async (dynamicId) => {
-  if (!isLoggedIn) {
-    alert('请先登录');
-    return;
-  }
-
-  if (!commentInput.trim()) {
-    alert('评论内容不能为空');
-    return;
-  }
-
-  try {
-    const res = await axios.post(`/echo/dynamic/${userId}/feeds/${dynamicId}/comments`, {
-      content: commentInput.trim()
-    });
-
-    if (res.status === 200 || res.status === 201) {
-      // 成功获取评论数据
-      const newComment = {
-        user_id: userId,
-        username: username,
-        content: commentInput.trim(),
-        time: new Date().toISOString() // 使用当前时间作为评论时间
-      };
-
-      // 更新本地状态，添加新评论
-      setFeeds(prevFeeds => {
-        return prevFeeds.map(feed => {
-          if (feed.postNo === dynamicId) {
-            // 确保comments是数组，并且正确合并新评论
-            const currentComments = Array.isArray(feed.comments) ? feed.comments : [];
-            return {
-              ...feed,
-              comments: [...currentComments, newComment]
-            };
-          }
-          return feed;
-        });
-      });
-
-      // 更新过滤后的动态列表
-      setFilteredFeeds(prevFeeds => {
-        return prevFeeds.map(feed => {
-          if (feed.postNo === dynamicId) {
-            // 确保comments是数组，并且正确合并新评论
-            const currentComments = Array.isArray(feed.comments) ? feed.comments : [];
-            return {
-              ...feed,
-              comments: [...currentComments, newComment]
-            };
-          }
-          return feed;
-        });
-      });
-
-      // alert('评论成功');
-      setCommentInput('');
-      setCommentBoxVisibleId(null); // 关闭评论框
-    } else {
-      alert(res.data.error || '评论失败');
+  const handleComment = async (dynamicId) => {
+    if (!isLoggedIn) {
+      alert('请先登录');
+      return;
     }
-  } catch (err) {
-    console.error('评论失败', err);
-    alert('评论失败，请稍后重试');
-  }
-};
+
+    if (!commentInput.trim()) {
+      alert('评论内容不能为空');
+      return;
+    }
+
+    try {
+      // 准备请求数据
+      const requestData = {
+        content: commentInput.trim()
+      };
+      
+      // 如果是回复，添加parent_comment_id
+      if (replyToCommentId) {
+        requestData.parent_comment_id = replyToCommentId;
+      }
+      
+      const res = await axios.post(`/echo/dynamic/${userId}/feeds/${dynamicId}/comments`, requestData);
+
+      if (res.status === 200 || res.status === 201) {
+        // 成功获取评论数据
+        const newComment = {
+          user_id: userId,
+          username: username,
+          content: commentInput.trim(),
+          time: new Date().toISOString(), // 使用当前时间作为评论时间
+          // 如果是回复，添加parent_comment_id和reply_to_username
+          ...(replyToCommentId && { parent_comment_id: replyToCommentId }),
+          ...(replyToUsername && { reply_to_username: replyToUsername })
+        };
+
+        // 更新本地状态，添加新评论
+        setFeeds(prevFeeds => {
+          return prevFeeds.map(feed => {
+            if (feed.postNo === dynamicId) {
+              // 确保comments是数组，并且正确合并新评论
+              const currentComments = Array.isArray(feed.comments) ? feed.comments : [];
+              return {
+                ...feed,
+                comments: [...currentComments, newComment]
+              };
+            }
+            return feed;
+          });
+        });
+
+        // 更新过滤后的动态列表
+        setFilteredFeeds(prevFeeds => {
+          return prevFeeds.map(feed => {
+            if (feed.postNo === dynamicId) {
+              // 确保comments是数组，并且正确合并新评论
+              const currentComments = Array.isArray(feed.comments) ? feed.comments : [];
+              return {
+                ...feed,
+                comments: [...currentComments, newComment]
+              };
+            }
+            return feed;
+          });
+        });
+
+        // 清空回复状态
+        setReplyToCommentId(null);
+        setReplyToUsername('');
+        setCommentInput('');
+        setCommentBoxVisibleId(null); // 关闭评论框
+      } else {
+        alert(res.data.error || '评论失败');
+      }
+    } catch (err) {
+      console.error('评论失败', err);
+      alert('评论失败，请稍后重试');
+    }
+  };
+
+  // 切换回复框显示状态
+  const toggleReplyBox = (dynamicId, commentId = null, username = '') => {
+    // 如果点击的是当前正在回复的评论，关闭回复框
+    if (commentBoxVisibleId === dynamicId && replyToCommentId === commentId) {
+      setCommentBoxVisibleId(null);
+      setReplyToCommentId(null);
+      setReplyToUsername('');
+      setCommentInput('');
+      return;
+    }
+    
+    // 显示回复框，设置回复目标
+    setCommentBoxVisibleId(dynamicId);
+    setReplyToCommentId(commentId);
+    setReplyToUsername(username);
+    setCommentInput(username ? `回复 ${username}: ` : '');
+  };
 
   return (
     <div className="friend-moments-container">
@@ -419,11 +1789,11 @@
             <div className="feed-item" key={feed.postNo || `feed-${Math.random()}`}>
               {/* 显示发布者信息 */}
               <div className="feed-author">
-              <img
-                className="user-avatar"
-                src={feed.avatar_url || 'https://example.com/default-avatar.jpg'}
-                alt={feed.username || '用户头像'}
-              />
+                <img
+                  className="user-avatar"
+                  src={feed.avatar_url || 'https://example.com/default-avatar.jpg'}
+                  alt={feed.username || '用户头像'}
+                />
                 <div>
                   <h4>{feed.username || '未知用户'}</h4>
                   <span className="feed-date">{new Date(feed.postTime || Date.now()).toLocaleString()}</span>
@@ -445,49 +1815,48 @@
                 </div>
               )}
 
-
               <div className="feed-footer">
                 <div className="like-container">
-                    <button className="icon-btn" onClick={() => handleLike(feed.postNo, feed.liked, feed.user_id)}>
-                      <GoodTwo theme="outline" size="24" fill={feed.liked ? '#f00' : '#fff'} />
-                      <span>{feed.postLikeNum || 0}</span>
-                    
-                    </button>
+                  <button className="icon-btn" onClick={() => handleLike(feed.postNo, feed.liked, feed.user_id)}>
+                    <GoodTwo theme="outline" size="24" fill={feed.liked ? '#f00' : '#fff'} />
+                    <span>{feed.postLikeNum || 0}</span>
+                  </button>
 
                   <button
                     className="icon-btn"
                     onClick={() => {
-                      setCommentBoxVisibleId(feed.postNo);
-                      setCommentInput('');
+                      toggleReplyBox(feed.postNo);
                     }}
                   >
                     <Comment theme="outline" size="24" fill="#333" />
                     <span>评论</span>
                   </button>
+                </div>
+                
+                {feed.user_id === userId && (
+                  <button className="delete-btn" onClick={() => handleDelete(feed.postNo)}>
+                    删除
+                  </button>
+                )}
+              </div>
 
-    {commentBoxVisibleId === feed.postNo && (
-      <div className="comment-box">
-        <textarea
-          className="comment-input"
-          placeholder="请输入评论内容..."
-          value={commentInput}
-          onChange={(e) => setCommentInput(e.target.value)}
-        />
-        <button
-          className="submit-comment-btn"
-          onClick={() => handleComment(feed.postNo)}
-        >
-          发布评论
-        </button>
-      </div>
-    )}
-  </div>
-  {feed.user_id === userId && (
-    <button className="delete-btn" onClick={() => handleDelete(feed.postNo)}>
-      删除
-    </button>
-  )}
-</div>
+              {/* 评论输入框 */}
+              {commentBoxVisibleId === feed.postNo && (
+                <div className="comment-box">
+                  <textarea
+                    className="comment-input"
+                    placeholder={replyToUsername ? `回复 ${replyToUsername}...` : '请输入评论内容...'}
+                    value={commentInput}
+                    onChange={(e) => setCommentInput(e.target.value)}
+                  />
+                  <button
+                    className="submit-comment-btn"
+                    onClick={() => handleComment(feed.postNo)}
+                  >
+                    发布评论
+                  </button>
+                </div>
+              )}
 
               {/* 评论列表 */}
               {Array.isArray(feed.comments) && feed.comments.length > 0 && (
@@ -498,18 +1867,52 @@
                       <div className="comment-item" key={index}>
                         <div className="comment-header">
                           <span className="comment-user">{comment.username || '用户'}</span>
-                          {/* <span className="comment-user-id">ID: {comment.user_id}</span> */}
                           <span className="comment-time">
                             {new Date(comment.time || Date.now()).toLocaleString()}
                           </span>
                         </div>
-                        <p className="comment-content">{comment.content}</p>
+                        <p className="comment-content">
+                          {/* 显示回复格式 */}
+                          {comment.reply_to_username ? 
+                            <span className="reply-prefix">{comment.username} 回复 {comment.reply_to_username}：</span> : 
+                            <span>{comment.username}：</span>
+                          }
+                          {comment.content}
+                        </p>
+                        <button 
+                          className="reply-btn" 
+                          onClick={() => toggleReplyBox(feed.postNo, comment.id || index, comment.username)}
+                        >
+                          回复
+                        </button>
+                        
+                        {/* 嵌套回复 */}
+                        {Array.isArray(comment.replies) && comment.replies.length > 0 && (
+                          <div className="nested-replies">
+                            {comment.replies.map((reply, replyIndex) => (
+                              <div className="reply-item" key={replyIndex}>
+                                <p className="reply-content">
+                                  {reply.reply_to_username ? 
+                                    <span className="reply-prefix">{reply.username} 回复 {reply.reply_to_username}：</span> : 
+                                    <span>{reply.username}：</span>
+                                  }
+                                  {reply.content}
+                                </p>
+                                <button 
+                                  className="reply-btn" 
+                                  onClick={() => toggleReplyBox(feed.postNo, reply.id || `${index}-${replyIndex}`, reply.username)}
+                                >
+                                  回复
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
                       </div>
                     ))}
                   </div>
                 </div>
               )}
-
             </div>
           ))
         )}
@@ -561,4 +1964,4 @@
   );
 };
 
-export default FriendMoments;  
\ No newline at end of file
+export default FriendMoments;
\ No newline at end of file