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;