| // // 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'; |
| 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 [commentBoxVisibleId, setCommentBoxVisibleId] = useState(null); // 当前显示评论框的动态ID |
| const [replyToCommentId, setReplyToCommentId] = useState(null); // 当前回复的评论ID |
| const [replyToUsername, setReplyToUsername] = useState(''); // 当前回复的用户名 |
| const [commentInput, setCommentInput] = useState(''); // 当前输入的评论内容 |
| |
| // 从上下文中获取用户信息 |
| 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) => { |
| if (!isLoggedIn) { |
| alert('请先登录'); |
| return; |
| } |
| |
| 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"> |
| <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> |
| |
| {/* 评论输入框 */} |
| {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 && ( |
| <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, 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> |
| )) |
| )} |
| </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; |