兴趣小组、好友动态
Change-Id: I7aa713600dea31eb2cd5b32ecc4e257b2bbd8be1
diff --git a/src/pages/InterestGroup/GroupPosts.jsx b/src/pages/InterestGroup/GroupPosts.jsx
new file mode 100644
index 0000000..7bd16ba
--- /dev/null
+++ b/src/pages/InterestGroup/GroupPosts.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import CommentForm from './CommentForm';
+import { GoodTwo, Comment } from '@icon-park/react';
+import './GroupDetail.css';
+
+const GroupPosts = ({
+ posts,
+ members,
+ userId,
+ toggleLike,
+ handleSubmitComment,
+ showCommentForm,
+ setShowCommentForm,
+ isMember,
+ onShowCreatePost,
+ loginHint
+}) => {
+ return (
+ <section className="group-section">
+ <h2>讨论帖子</h2>
+
+ <div className="post-list-header">
+ {userId && isMember && (
+ <button
+ className="create-post-btn"
+ onClick={onShowCreatePost}
+ >
+ + 发布帖子
+ </button>
+ )}
+ {(!userId || !isMember) && <p className="login-hint">{loginHint}</p>}
+ </div>
+
+ <div className="post-list">
+ {posts.length > 0 ? (
+ posts.map(post => (
+ <div key={post.group_post_id} className="post-card">
+ <div className="post-header">
+ <h3 className="post-title">{post.title}</h3>
+ <div className="post-meta">
+ <span className="post-author">
+ <img
+ src={members.find(m => m.user_id === post.user_id)?.avatar_url || 'https://picsum.photos/50/50'}
+ alt={post.username}
+ className="author-avatar"
+ />
+ {post.username}
+ </span>
+ <span className="post-time">{new Date(post.time).toLocaleString()}</span>
+ </div>
+ </div>
+
+ <div className="post-content">
+ <p>{post.content}</p>
+ </div>
+
+ <div className="post-actions">
+ <span className="like-button" onClick={() => userId ? toggleLike(post.group_post_id) : alert('请先登录')}>
+ <GoodTwo
+ theme="outline"
+ size="30"
+ fill={post.userLiked ? '#ff4d4f' : '#8c8c8c'}
+ style={{ verticalAlign: 'middle', marginRight: '4px' }}
+ />
+ <span className="like-count">{post.likes || 0}</span>
+ </span>
+
+ <button className="icon-btn" onClick={() => setShowCommentForm(post.group_post_id)}>
+ <Comment theme="outline" size="30" fill="#8c8c8c"/>
+ <span>评论</span>
+ </button>
+ </div>
+
+ {/* 评论表单 */}
+ {showCommentForm === post.group_post_id && (
+ <CommentForm
+ onSubmit={(content) => handleSubmitComment(post.group_post_id, content)}
+ onCancel={() => setShowCommentForm(null)}
+ />
+ )}
+
+ {/* 显示评论 */}
+ {post.comments && post.comments.length > 0 && (
+ <div className="comments-section">
+ <h4 className="comments-title">评论 ({post.comments.length})</h4>
+ {post.comments.map(comment => (
+ <div key={comment.id || comment.comment_id} className="comment-item">
+ <div className="comment-header">
+ <img
+ src={members.find(m => m.user_id === comment.userId)?.avatar_url || 'https://picsum.photos/40/40'}
+ alt={comment.username || '用户'}
+ className="comment-avatar"
+ />
+ <span className="comment-author">{comment.username || '用户'}</span>
+ <span className="comment-time">{new Date(comment.time).toLocaleString()}</span>
+ </div>
+ <div className="comment-content">{comment.content}</div>
+ </div>
+ ))}
+ </div>
+ )}
+ </div>
+ ))
+ ) : (
+ <p className="empty-message">暂无帖子</p>
+ )}
+ </div>
+ </section>
+ );
+};
+
+export default GroupPosts;
\ No newline at end of file