兴趣小组、好友动态
Change-Id: I7aa713600dea31eb2cd5b32ecc4e257b2bbd8be1
diff --git a/src/pages/InterestGroup/CommentForm.css b/src/pages/InterestGroup/CommentForm.css
new file mode 100644
index 0000000..7d80eec
--- /dev/null
+++ b/src/pages/InterestGroup/CommentForm.css
@@ -0,0 +1,100 @@
+/* CommentForm.css */
+.comment-form-container {
+ margin-top: 1rem;
+ padding: 1rem;
+ background-color: #f8f4e9; /* 米白色背景 */
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+}
+
+.comment-form {
+ display: flex;
+ flex-direction: column;
+}
+
+.form-group {
+ position: relative;
+ margin-bottom: 1rem;
+}
+
+.comment-input {
+ width: 100%;
+ min-height: 80px;
+ padding: 1rem;
+ border: 1px solid #e6d5b8; /* 米棕色边框 */
+ border-radius: 6px;
+ background-color: #fff;
+ font-size: 1rem;
+ line-height: 1.5;
+ resize: vertical;
+ transition: all 0.3s ease;
+ outline: none;
+}
+
+.comment-input:focus {
+ border-color: #d4a5a5; /* 粉色边框 */
+ box-shadow: 0 0 0 3px rgba(212, 165, 165, 0.2); /* 粉色阴影 */
+}
+
+.floating-label {
+ position: absolute;
+ top: -8px;
+ left: 12px;
+ padding: 0 4px;
+ background-color: #fff;
+ color: #8c7a51; /* 深棕色文本 */
+ font-size: 0.875rem;
+ transition: all 0.2s ease;
+ pointer-events: none;
+ opacity: 0;
+ transform: translateY(10px);
+}
+
+.form-group.focused .floating-label,
+.comment-input:not(:placeholder-shown) + .floating-label {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.form-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 0.75rem;
+}
+
+.cancel-button,
+.submit-button {
+ padding: 0.5rem 1.25rem;
+ border: none;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.cancel-button {
+ background-color: transparent;
+ color: #8c7a51; /* 深棕色文本 */
+}
+
+.cancel-button:hover {
+ background-color: #f5f5f5;
+}
+
+.submit-button {
+ background-color: #d4a5a5; /* 粉色背景 */
+ color: #fff;
+}
+
+.submit-button:hover {
+ background-color: #c28d8d; /* 深粉色 */
+ transform: translateY(-1px);
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.submit-button:disabled {
+ background-color: #e6d5b8; /* 米棕色 */
+ cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/src/pages/InterestGroup/CommentForm.jsx b/src/pages/InterestGroup/CommentForm.jsx
new file mode 100644
index 0000000..1d85a0c
--- /dev/null
+++ b/src/pages/InterestGroup/CommentForm.jsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import './CommentForm.css';
+
+const CommentForm = ({ onSubmit, onCancel }) => {
+ const [content, setContent] = useState('');
+ const [isFocused, setIsFocused] = useState(false);
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (content.trim()) {
+ onSubmit(content);
+ setContent('');
+ }
+ };
+
+ return (
+ <div className="comment-form-container">
+ <form className="comment-form" onSubmit={handleSubmit}>
+ <div className={`form-group ${isFocused ? 'focused' : ''}`}>
+ <textarea
+ className="comment-input"
+ placeholder="分享你的想法..."
+ value={content}
+ onChange={(e) => setContent(e.target.value)}
+ onFocus={() => setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
+ required
+ />
+ <div className="floating-label">添加评论</div>
+ </div>
+
+ <div className="form-actions">
+ <button
+ type="button"
+ className="cancel-button"
+ onClick={onCancel}
+ >
+ 取消
+ </button>
+ <button
+ type="submit"
+ className="submit-button"
+ disabled={!content.trim()}
+ >
+ 发布评论
+ </button>
+ </div>
+ </form>
+ </div>
+ );
+};
+
+export default CommentForm;
\ No newline at end of file
diff --git a/src/pages/InterestGroup/CreatePostForm.jsx b/src/pages/InterestGroup/CreatePostForm.jsx
index 6848b54..ce80a0a 100644
--- a/src/pages/InterestGroup/CreatePostForm.jsx
+++ b/src/pages/InterestGroup/CreatePostForm.jsx
@@ -1,29 +1,218 @@
-import React, { useState } from 'react';
+// import React, { useState } from 'react';
+// import { useGroupStore } from '../../context/useGroupStore';
+
+// const CreatePostForm = ({ groupId, onClose, onPostCreated }) => {
+// const { userId, handleCreatePost } = useGroupStore();
+// const [title, setTitle] = useState('');
+// const [content, setContent] = useState('');
+// const [images, setImages] = useState([]);
+// const [loading, setLoading] = useState(false);
+// const [error, setError] = useState('');
+// const [formError, setFormError] = useState({});
+
+// // 表单验证
+// const validateForm = () => {
+// const errors = {};
+// let isValid = true;
+
+// if (!title.trim()) {
+// errors.title = '请输入帖子标题';
+// isValid = false;
+// }
+
+// if (!content.trim()) {
+// errors.content = '请输入帖子内容';
+// isValid = false;
+// }
+
+// setFormError(errors);
+// return isValid;
+// };
+
+// const handleSubmit = async (e) => {
+// e.preventDefault();
+
+// // 先进行表单验证
+// if (!validateForm()) {
+// return;
+// }
+
+// console.log('点击发布，准备发送请求');
+// setLoading(true);
+// setError('');
+
+// try {
+// // 检查必要条件
+// if (!groupId) {
+// throw new Error('小组ID缺失');
+// }
+
+// if (!userId) {
+// throw new Error('用户ID缺失，请先登录');
+// }
+
+// // 打印关键变量进行调试
+// console.log('准备发布帖子:', {
+// groupId,
+// userId,
+// title,
+// content,
+// imagesCount: images.length
+// });
+
+// // 调用创建帖子的方法
+// const success = await handleCreatePost(groupId, userId, content, title, images);
+
+// if (success) {
+// alert('帖子发布成功');
+// onPostCreated(); // 触发刷新
+// onClose(); // 关闭弹窗
+// } else {
+// setError('帖子发布失败，请重试');
+// }
+// } catch (error) {
+// console.error('发布帖子错误:', error);
+// setError(error.message || '帖子发布失败');
+// } finally {
+// setLoading(false);
+// }
+// };
+
+// return (
+// <div className="create-post-form">
+// <h4>发布新帖子</h4>
+
+// <div className="form-group">
+// <input
+// type="text"
+// placeholder="帖子标题"
+// value={title}
+// onChange={(e) => setTitle(e.target.value)}
+// required
+// />
+// {formError.title && <p className="error-message">{formError.title}</p>}
+// </div>
+
+// <div className="form-group">
+// <textarea
+// placeholder="帖子内容"
+// value={content}
+// onChange={(e) => setContent(e.target.value)}
+// required
+// />
+// {formError.content && <p className="error-message">{formError.content}</p>}
+// </div>
+
+// <div className="form-group">
+// <input
+// type="file"
+// multiple
+// onChange={(e) => setImages(e.target.files)}
+// />
+// </div>
+
+// {error && <p className="error-message">{error}</p>}
+
+// <div className="button-group">
+// <button onClick={handleSubmit} disabled={loading}>
+// {loading ? '发布中...' : '发布'}
+// </button>
+// <button onClick={onClose} disabled={loading}>
+// 取消
+// </button>
+// </div>
+// </div>
+// );
+// };
+
+// export default CreatePostForm;
+
+import React, { useState, useEffect } from 'react';
+import { useUser } from '../../context/UserContext';
import { useGroupStore } from '../../context/useGroupStore';
-const CreatePostForm = ({ groupId, onClose }) => {
- const { userId, handleCreatePost } = useGroupStore();
+const CreatePostForm = ({ groupId, onClose, onPostCreated }) => {
+ const { user, loading: userLoading } = useUser();
+ const { handleCreatePost } = useGroupStore();
+
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [images, setImages] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
+ const [formError, setFormError] = useState({});
+
+ // 处理用户状态加载中或未登录的情况
+ if (userLoading) {
+ return <div className="create-post-form loading">加载用户信息...</div>;
+ }
+
+ if (!user) {
+ return (
+ <div className="create-post-form">
+ <div className="error-message">请先登录以发布帖子</div>
+ <button className="close-btn" onClick={onClose}>
+ 关闭
+ </button>
+ </div>
+ );
+ }
+
+ // 表单验证
+ const validateForm = () => {
+ const errors = {};
+ let isValid = true;
+
+ if (!title.trim()) {
+ errors.title = '请输入帖子标题';
+ isValid = false;
+ }
+
+ if (!content.trim()) {
+ errors.content = '请输入帖子内容';
+ isValid = false;
+ }
+
+ setFormError(errors);
+ return isValid;
+ };
const handleSubmit = async (e) => {
e.preventDefault();
+
+ if (!validateForm()) {
+ return;
+ }
+
+ console.log('点击发布，准备发送请求');
setLoading(true);
setError('');
try {
- const success = await handleCreatePost(groupId, userId, content, title, images);
+ if (!groupId) {
+ throw new Error('小组ID缺失');
+ }
+
+ console.log('准备发布帖子:', {
+ groupId,
+ userId: user.userId,
+ title,
+ content,
+ imagesCount: images.length
+ });
+
+ // 调用创建帖子方法，不再传递 userId 参数
+ const success = await handleCreatePost(groupId, content, title, images);
if (success) {
alert('帖子发布成功');
+ onPostCreated();
onClose();
} else {
- setError('帖子发布失败');
+ setError('帖子发布失败，请重试');
}
} catch (error) {
+ console.error('发布帖子错误:', error);
setError(error.message || '帖子发布失败');
} finally {
setLoading(false);
@@ -33,32 +222,44 @@
return (
<div className="create-post-form">
<h4>发布新帖子</h4>
- <input
- type="text"
- placeholder="帖子标题"
- value={title}
- onChange={(e) => setTitle(e.target.value)}
- required
- />
- <textarea
- placeholder="帖子内容"
- value={content}
- onChange={(e) => setContent(e.target.value)}
- required
- />
- <input
- type="file"
- multiple
- onChange={(e) => setImages(e.target.files)}
- />
- {error && <p className="error">{error}</p>}
+ <div className="form-group">
+ <input
+ type="text"
+ placeholder="帖子标题"
+ value={title}
+ onChange={(e) => setTitle(e.target.value)}
+ required
+ />
+ {formError.title && <div className="error-message">{formError.title}</div>}
+ </div>
+
+ <div className="form-group">
+ <textarea
+ placeholder="帖子内容"
+ value={content}
+ onChange={(e) => setContent(e.target.value)}
+ required
+ />
+ {formError.content && <div className="error-message">{formError.content}</div>}
+ </div>
+
+ <div className="form-group">
+ <label>上传图片:</label>
+ <input
+ type="file"
+ multiple
+ onChange={(e) => setImages(e.target.files)}
+ />
+ </div>
+
+ {error && <div className="error-message">{error}</div>}
<div className="button-group">
- <button onClick={handleSubmit} disabled={loading}>
+ <button className="submit-btn" onClick={handleSubmit} disabled={loading}>
{loading ? '发布中...' : '发布'}
</button>
- <button onClick={onClose} disabled={loading}>
+ <button className="cancel-btn" onClick={onClose} disabled={loading}>
取消
</button>
</div>
diff --git a/src/pages/InterestGroup/GroupDetail.css b/src/pages/InterestGroup/GroupDetail.css
new file mode 100644
index 0000000..d1968d4
--- /dev/null
+++ b/src/pages/InterestGroup/GroupDetail.css
@@ -0,0 +1,335 @@
+.group-detail {
+ padding: 2rem;
+ background: #fdf7f2;
+ font-family: 'Segoe UI', sans-serif;
+ color: #5e4638;
+}
+
+.group-title {
+ font-size: 2rem;
+ margin-bottom: 1.5rem;
+ border-bottom: 2px solid #eacfc0;
+ padding-bottom: 0.5rem;
+}
+
+.group-section {
+ margin-top: 5%;
+}
+
+.member-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.member-card {
+ background: #fff2ef;
+ border: 1px solid #f3d9d4;
+ border-radius: 10px;
+ padding: 1rem;
+ width: 120px;
+ text-align: center;
+ box-shadow: 2px 2px 5px #f0cfc9;
+}
+
+.member-card img {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ margin-bottom: 0.5rem;
+}
+
+.post-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ margin-top: -2%;
+ margin-left: -1%;
+}
+
+.post-card {
+ background: #fffaf9;
+ border-left: 5px solid #d8a79e;
+ padding: 1rem;
+ border-radius: 8px;
+ box-shadow: 1px 1px 6px #e3ccc6;
+}
+
+.post-card h3 {
+ color: #b56b5c;
+ margin-bottom: 0.5rem;
+}
+
+.post-card span {
+ display: block;
+ font-size: 0.85rem;
+ color: #8c6f63;
+ margin-top: 0.25rem;
+}
+
+.like-count {
+ font-size: 5rem;
+ vertical-align: middle;
+ display: flex;
+ align-items: center;
+}
+
+
+.group-section h2 {
+ color: #555;
+ margin-top: 0;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 10px;
+}
+
+
+.post-card {
+ border: 1px solid #eee;
+ border-radius: 6px;
+ padding: 15px;
+ transition: box-shadow 0.3s;
+}
+
+.post-card:hover {
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+/* .post-header {
+ margin-bottom: 10px;
+} */
+
+.post-title {
+ margin: 0 0 8px 0;
+ color: #333;
+ font-size: 1.1rem;
+}
+
+
+.author-avatar {
+ width: 70px;
+ height: 70px;
+ border-radius: 50%;
+ margin-right: 15px;
+ vertical-align: middle;
+}
+
+.comment-button:hover {
+ color: #40a9ff;
+}
+
+.comments-section {
+ margin-top: 15px;
+ padding-top: 15px;
+ border-top: 1px solid #eee;
+}
+
+.comments-title {
+ font-size: 1rem;
+ color: #666;
+ margin-bottom: 10px;
+}
+
+.comment-item {
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #f5f5f5;
+}
+
+.comment-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 5px;
+}
+
+.comment-avatar {
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+}
+
+.comment-author {
+ font-weight: bold;
+ color: #333;
+}
+
+.comment-time {
+ font-size: 0.8rem;
+ color: #999;
+}
+
+.comment-content {
+ color: #555;
+ margin-left: 45px;
+}
+
+.empty-message {
+ color: #999;
+ text-align: center;
+ padding: 20px 0;
+}
+
+/* GroupDetail.css */
+.member-link {
+ text-decoration: none; /* 移除下划线 */
+ color: inherit; /* 继承父元素颜色 */
+ display: block; /* 使链接覆盖整个卡片 */
+}
+
+.member-card {
+ transition: transform 0.2s, box-shadow 0.2s;
+ cursor: pointer; /* 显示手型光标 */
+}
+
+.member-card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 16px rgba(0,0,0,0.08);
+ border-color: #eacfc0; /* 悬停时边框颜色变化 */
+}
+
+.member-name {
+ margin-top: 8px;
+ white-space: nowrap; /* 防止名称换行 */
+ overflow: hidden;
+ text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+
+/* GroupDetail.css */
+.post-actions-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 20px 0;
+ padding: 10px;
+ background-color: #fff8f5;
+ border-radius: 6px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.create-post-btn {
+ background-color: #b56b5c;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 10px 16px;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+}
+
+.create-post-btn:hover {
+ background-color: #9c5a4c;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.create-post-btn:active {
+ transform: translateY(0);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.login-hint {
+ color: #999;
+ font-style: italic;
+ margin: 0;
+}
+
+/* GroupDetail.css */
+.post-list-header {
+ margin-bottom:2%;
+}
+
+.create-post-btn {
+ background-color: #b56b5c;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 10px 16px;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s;
+ display: flex;
+ align-items: center;
+}
+
+.create-post-btn:hover {
+ background-color: #9c5a4c;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.create-post-btn:active {
+ transform: translateY(0);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.login-hint {
+ color: #999;
+ font-style: italic;
+ margin: 0;
+ padding: 8px 0;
+}
+
+/* 米棕色背景 + 深粉色按钮 */
+.create-post-btn {
+ background-color: #d36c6c;
+ color: #fff;
+ border: none;
+ padding: 8px 16px;
+ font-size: 16px;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.create-post-btn:hover {
+ background-color: #b45555;
+}
+
+/* 对话框背景遮罩 */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(100, 80, 60, 0.6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+/* 对话框内容区 */
+.modal-content {
+ background-color: #f5f0e6;
+ padding: 24px;
+ border-radius: 12px;
+ width: 90%;
+ max-width: 600px;
+ position: relative;
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+ animation: fadeIn 0.3s ease-out;
+}
+
+/* 关闭按钮 */
+.modal-close {
+ position: absolute;
+ top: 10px;
+ right: 16px;
+ font-size: 24px;
+ background: none;
+ border: none;
+ color: #d36c6c;
+ cursor: pointer;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: scale(0.95); }
+ to { opacity: 1; transform: scale(1); }
+}
diff --git a/src/pages/InterestGroup/GroupDetail.jsx b/src/pages/InterestGroup/GroupDetail.jsx
new file mode 100644
index 0000000..18ea23e
--- /dev/null
+++ b/src/pages/InterestGroup/GroupDetail.jsx
@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'wouter';
+import { useUser } from '../../context/UserContext';
+import GroupMembers from './GroupMembers';
+import GroupPosts from './GroupPosts';
+import CreatePostForm from './CreatePostForm';
+import './GroupDetail.css';
+
+const GroupDetail = () => {
+ const { groupId } = useParams();
+ console.log('GroupDetail groupId:', groupId);
+
+ const { user } = useUser();
+ const userId = user?.userId;
+
+ const [members, setMembers] = useState([]);
+ const [posts, setPosts] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [showCommentForm, setShowCommentForm] = useState(null);
+ const [refetchKey, setRefetchKey] = useState(0);
+ const [showCreatePost, setShowCreatePost] = useState(false);
+ const [isMember, setIsMember] = useState(false);
+
+ useEffect(() => {
+ if (!groupId) {
+ setError('小组ID缺失');
+ setLoading(false);
+ return;
+ }
+
+ const fetchGroupData = async () => {
+ try {
+ const res1 = await fetch(`/echo/groups/${groupId}/members`);
+ const membersData = await res1.json();
+
+ const res2 = await fetch(`/echo/groups/${groupId}/getAllPosts`);
+ const postsData = await res2.json();
+
+ if (res1.ok) {
+ setMembers(membersData.members || []);
+ setIsMember(userId && membersData.members.some(m => m.user_id === userId));
+ }
+
+ if (res2.ok) {
+ const postsWithLikes = postsData.posts?.map(post => ({
+ ...post,
+ userLiked: false,
+ likes: post.likes || 0
+ })) || [];
+ setPosts(postsWithLikes);
+ }
+ } catch (err) {
+ setError('加载失败，请稍后重试');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchGroupData();
+ }, [groupId, refetchKey, userId]);
+
+ const toggleLike = async (postId) => {
+ const postIndex = posts.findIndex(p => p.group_post_id === postId);
+ if (postIndex === -1) return;
+
+ const currentPost = posts[postIndex];
+ const isLiked = currentPost.userLiked;
+
+ try {
+ const response = await fetch(
+ `/echo/groups/${postId}/${isLiked ? 'unlike' : 'like'}`,
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+
+ const data = await response.json();
+ if (response.ok && data.status === 'success') {
+ const updatedPosts = [...posts];
+ updatedPosts[postIndex] = {
+ ...currentPost,
+ userLiked: !isLiked,
+ likes: isLiked ? currentPost.likes - 1 : currentPost.likes + 1
+ };
+ setPosts(updatedPosts);
+
+ setTimeout(() => {
+ setRefetchKey(prev => prev + 1);
+ }, 200);
+ } else {
+ console.error(isLiked ? '取消点赞失败' : '点赞失败:', data.message);
+ }
+ } catch (error) {
+ console.error(isLiked ? '取消点赞请求出错' : '点赞请求出错:', error);
+ }
+ };
+
+ const handleSubmitComment = async (postId, content) => {
+ if (!userId) {
+ alert('请先登录');
+ return;
+ }
+
+ try {
+ const response = await fetch(`/echo/groups/${postId}/comment`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ userId,
+ content
+ })
+ });
+
+ const data = await response.json();
+ if (response.ok && data.status === 'success') {
+ setPosts(prevPosts => prevPosts.map(post =>
+ post.group_post_id === postId ?
+ {...post, comments: [...(post.comments || []), {
+ id: Date.now(),
+ userId,
+ username: user.username,
+ content,
+ time: new Date().toISOString()
+ }]} :
+ post
+ ));
+ setShowCommentForm(null);
+ setRefetchKey(prev => prev + 1);
+ } else {
+ console.error('评论失败:', data.message);
+ }
+ } catch (error) {
+ console.error('评论请求出错:', error);
+ }
+ };
+
+ const handlePostCreated = () => {
+ setShowCreatePost(false);
+ setRefetchKey(prev => prev + 1);
+ };
+
+ if (loading) return <div className="group-detail"><p>加载中...</p></div>;
+ if (error) return <div className="group-detail"><p>{error}</p></div>;
+
+ return (
+ <div className="group-detail">
+ <h1 className="group-title">兴趣小组详情</h1>
+
+ <GroupMembers members={members} />
+
+ <GroupPosts
+ posts={posts}
+ members={members}
+ userId={userId}
+ toggleLike={toggleLike}
+ handleSubmitComment={handleSubmitComment}
+ showCommentForm={showCommentForm}
+ setShowCommentForm={setShowCommentForm}
+ isMember={isMember}
+ onShowCreatePost={() => setShowCreatePost(true)}
+ loginHint={!userId ? "请登录后发布帖子" : "加入小组后即可发布帖子"}
+ />
+
+
+ {showCreatePost && (
+ <div className="modal-overlay">
+ <div className="modal-content">
+ <button className="modal-close" onClick={() => setShowCreatePost(false)}>×</button>
+ <CreatePostForm
+ groupId={groupId}
+ onClose={() => setShowCreatePost(false)}
+ onPostCreated={handlePostCreated}
+ />
+ </div>
+ </div>
+ )}
+
+
+ </div>
+ );
+};
+
+export default GroupDetail;
\ No newline at end of file
diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
index ea2253f..8e6068b 100644
--- a/src/pages/InterestGroup/GroupItem.jsx
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -1,70 +1,69 @@
import React, { useState, useEffect } from 'react';
import { useGroupStore } from '../../context/useGroupStore';
import { useUser } from '../../context/UserContext';
-import CreatePostForm from './CreatePostForm';
-import axios from 'axios';
+import { useLocation } from 'wouter';
+import './GroupDetail.css';
const GroupItem = ({ group }) => {
- const { handleJoinGroup, joinStatus, setJoinStatus,fetchGroupList } = useGroupStore();
+ const [, setLocation] = useLocation();
+ const { handleJoinGroup, joinStatus, setJoinStatus, fetchGroupList } = useGroupStore();
const { user } = useUser();
const userId = user?.userId;
const groupId = group.groupId;
const [isMember, setIsMember] = useState(false);
- const [loading, setLoading] = useState(false); // 新增：加载状态
- const [error, setError] = useState(''); // 新增：错误信息
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
useEffect(() => {
- console.log('joinStatus updated:', joinStatus);
setIsMember(joinStatus[groupId] === '加入成功');
}, [joinStatus, groupId]);
- // 初始挂载时检查成员状态（新增）
useEffect(() => {
if (userId && groupId) {
checkMembershipStatus();
}
}, [userId, groupId]);
- // 检查成员状态（新增）
const checkMembershipStatus = async () => {
try {
- const res = await axios.get(`/echo/groups/${groupId}/members`);
+ const res = await fetch(`/echo/groups/${groupId}/members`);
const isMember = res.data.members.some(member => member.user_id === userId);
setIsMember(isMember);
- // setJoinStatus(groupId, isMember ? '加入成功' : '未加入');
} catch (error) {
console.error('检查成员状态失败:', error);
}
};
- const [showCreatePost, setShowCreatePost] = useState(false);
-
const handleLeaveGroup = async () => {
setLoading(true);
try {
- const res = await axios.post(`/echo/groups/${groupId}/leave`, {
- user_id: userId,
+ const res = await fetch(`/echo/groups/${groupId}/leave`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ user_id: userId,
+ }),
});
- if (res.data.status === 'success') {
- fetchGroupList(); // 刷新小组列表
- // setJoinStatus(groupId, '未加入');
+
+ if (res.ok && res.data.status === 'success') {
+ fetchGroupList();
setIsMember(false);
- // 可选：刷新小组成员计数
group.memberCount = (group.memberCount || 0) - 1;
} else {
setError(res.data.message || '退出失败');
}
} catch (error) {
- console.error('退出小组失败:', error);
- setError('退出小组失败');
+ // console.error('退出小组失败:', error);
+ // setError('退出小组失败');
} finally {
setLoading(false);
}
};
- // 修改加入小组逻辑（新增）
const handleJoin = async () => {
setLoading(true);
try {
@@ -72,7 +71,6 @@
if (res && res.status === 'success') {
setJoinStatus(groupId, '加入成功');
setIsMember(true);
- // 可选：刷新小组成员计数
group.memberCount = (group.memberCount || 0) + 1;
} else {
setError(res?.message || '加入失败');
@@ -98,15 +96,12 @@
<h3>{group.groupName}</h3>
<p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
- {/* 加入/退出按钮逻辑 */}
{userId && (
<button
- onClick={() => {
- if (isMember) {
- handleLeaveGroup();
- } else {
- handleJoin();
- }
+ style={{ color: '#2167c9', background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontSize: '16px' }}
+ onClick={(e) => {
+ e.stopPropagation();
+ isMember ? handleLeaveGroup() : handleJoin();
}}
disabled={loading}
>
@@ -115,15 +110,7 @@
)}
{!userId && <button disabled>请登录</button>}
- {/* 显示错误信息（新增） */}
{error && <p style={{ color: 'red' }}>{error}</p>}
-
- {/* 发布帖子按钮 */}
- {userId && isMember && (
- <button onClick={() => setShowCreatePost(!showCreatePost)}>
- +发布帖子
- </button>
- )}
</div>
</div>
@@ -132,12 +119,22 @@
</div>
<p>分类：{group.category}</p>
- {showCreatePost && (
- <CreatePostForm
- groupId={groupId}
- onClose={() => setShowCreatePost(false)}
- />
- )}
+ <button
+ style={{
+ background: 'none',
+ border: 'none',
+ color: '#985F6F',
+ fontSize: '16px',
+ cursor: 'pointer',
+ textDecoration: 'underline',
+ marginBottom: '8px',
+ float: 'right',
+ clear: 'both',
+ }}
+ onClick={() => setLocation(`/group/${groupId}`)}
+ >
+ 查看详情
+ </button>
</div>
);
};
diff --git a/src/pages/InterestGroup/GroupList.jsx b/src/pages/InterestGroup/GroupList.jsx
index 6970f1d..937da76 100644
--- a/src/pages/InterestGroup/GroupList.jsx
+++ b/src/pages/InterestGroup/GroupList.jsx
@@ -17,7 +17,7 @@
return (
<div className="group-list">
{groups.map(group => (
- <GroupItem key={group.group_id} group={group} />
+ <GroupItem key={group.groupId} group={group} />
))}
</div>
);
diff --git a/src/pages/InterestGroup/GroupMembers.jsx b/src/pages/InterestGroup/GroupMembers.jsx
new file mode 100644
index 0000000..037c4be
--- /dev/null
+++ b/src/pages/InterestGroup/GroupMembers.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'wouter';
+import './GroupDetail.css';
+
+const GroupMembers = ({ members }) => {
+ return (
+ <section className="group-section">
+ <h2>成员列表</h2>
+ <div className="member-list">
+ {members.length > 0 ? (
+ members.map(m => (
+ <Link href={`/information/${m.user_id}`} key={m.user_id} className="member-link">
+ <div className="member-card">
+ <img
+ src={m.avatar_url || 'https://picsum.photos/100/100'}
+ alt={m.username}
+ className="member-avatar"
+ />
+ <p className="member-name">{m.username}</p>
+ </div>
+ </Link>
+ ))
+ ) : (
+ <p className="empty-message">暂无成员</p>
+ )}
+ </div>
+ </section>
+ );
+};
+
+export default GroupMembers;
\ No newline at end of file
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
diff --git a/src/pages/InterestGroup/InterestGroup.css b/src/pages/InterestGroup/InterestGroup.css
index f819038..e44eea1 100644
--- a/src/pages/InterestGroup/InterestGroup.css
+++ b/src/pages/InterestGroup/InterestGroup.css
@@ -207,8 +207,8 @@
}
.create-group-btn {
- background-color: #f2d0c9; /* 浅粉色 */
- color: #4e342e; /* 深棕色 */
+ background-color: #4e342e; /* 浅粉色 */
+ color: #fdfdfd; /* 深棕色 */
border: none;
padding: 10px 20px;
margin: 20px 0;