diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
new file mode 100644
index 0000000..4f76bac
--- /dev/null
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -0,0 +1,178 @@
+// import React, { useState } from 'react';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import { useUser } from '../../context/UserContext'; // ✅ 新增：引入 UserContext
+// import CreatePostForm from './CreatePostForm';
+
+// const GroupItem = ({ group }) => {
+//   const { handleJoinGroup, joinStatus } = useGroupStore();
+//   const { user } = useUser(); // ✅ 获取 user
+//   const userId = user?.userId; // ✅ 安全获取 userId
+//   const [showCreatePost, setShowCreatePost] = useState(false);
+
+//   return (
+//     <div className="group-item">
+//       <div className="group-content">
+//         <img
+//           style={{ width: '40%', height: '40%' }}
+//           src={group.cover_image || 'https://picsum.photos/200/200'}
+//           alt={group.groupName || group.name}
+//           className="group-cover"
+//         />
+//         <div className="group-info-right">
+//           <h3>{group.groupName || group.name}</h3>
+//           <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
+//           <button
+//             onClick={() => handleJoinGroup(group.group_id, userId)}
+//             disabled={joinStatus[group.group_id] === '加入成功' || !userId}
+//           >
+//             {joinStatus[group.group_id] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
+//           </button>
+
+//           {userId && joinStatus[group.group_id] === '加入成功' && (
+//             <button onClick={() => setShowCreatePost(!showCreatePost)}>
+//               +发布帖子
+//             </button>
+//           )}
+//         </div>
+//       </div>
+
+//       <div className="group-description">
+//         <p>{group.description}</p>
+//       </div>
+//       <p>分类：{group.category}</p>
+
+//       {showCreatePost && (
+//         <CreatePostForm 
+//           groupId={group.group_id} 
+//           onClose={() => setShowCreatePost(false)} 
+//         />
+//       )}
+//     </div>
+//   );
+// };
+
+// export default GroupItem;
+
+
+import React, { useState } from 'react';
+import { useGroupStore } from '../../context/useGroupStore';
+import { useUser } from '../../context/UserContext';
+import CreatePostForm from './CreatePostForm';
+
+const GroupItem = ({ group }) => {
+
+  console.log('group:', group);
+  const { handleJoinGroup, joinStatus } = useGroupStore();
+  const { user } = useUser();
+  
+  const userId = user?.userId;
+  const groupId = group.groupId; // ✅ 使用正确字段
+console.log('加入小组请求 - groupId:', group.group_id, 'userId:', userId);
+
+  const [showCreatePost, setShowCreatePost] = useState(false);
+
+  return (
+    <div className="group-item">
+      <div className="group-content">
+        <img
+          style={{ width: '40%', height: '40%' }}
+          src={group.cover_image || 'https://picsum.photos/200/200'}
+          alt={group.groupName}
+          className="group-cover"
+        />
+        <div className="group-info-right">
+          <h3>{group.groupName}</h3> {/* ✅ 使用 groupName */}
+          <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
+
+          <button
+            onClick={() => handleJoinGroup(groupId, userId)}
+            disabled={joinStatus[groupId] === '加入成功' || !userId}
+          >
+            
+            {joinStatus[groupId] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
+          </button>
+
+          {userId && joinStatus[groupId] === '加入成功' && (
+            <button onClick={() => setShowCreatePost(!showCreatePost)}>
+              +发布帖子
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="group-description">
+        <p>{group.description}</p>
+      </div>
+      <p>分类：{group.category}</p>
+
+      {showCreatePost && (
+        <CreatePostForm 
+          groupId={groupId}
+          onClose={() => setShowCreatePost(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default GroupItem;
+
+
+// import React, { useState } from 'react';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import { useUser } from '../../context/UserContext';
+// import CreatePostForm from './CreatePostForm';
+
+// const GroupItem = ({ group }) => {
+//     console.log('group:', group);
+
+//   const { handleJoinGroup, joinStatus } = useGroupStore();
+//   const { user } = useUser();
+//   const userId = user?.userId; // 确保使用正确的字段名（取自 localStorage 的结构）
+//   const [showCreatePost, setShowCreatePost] = useState(false);
+
+//   return (
+//     <div className="group-item">
+//       <div className="group-content">
+//         <img
+//           style={{ width: '40%', height: '40%' }}
+//           src={group.cover_image || 'https://picsum.photos/200/200'}
+//           alt={group.name}
+//           className="group-cover"
+//         />
+//         <div className="group-info-right">
+//           <h3>{group.name}</h3>
+//           <p style={{ color: '#BA929A' }}>{group.member_count || 0}人加入了小组</p>
+
+//           <button
+//             onClick={() => handleJoinGroup(group.group_id, userId)}
+//             disabled={joinStatus[group.group_id] === '加入成功' || !userId}
+//           >
+//             {joinStatus[group.group_id] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
+//           </button>
+
+//           {userId && joinStatus[group.group_id] === '加入成功' && (
+//             <button onClick={() => setShowCreatePost(!showCreatePost)}>
+//               +发布帖子
+//             </button>
+//           )}
+//         </div>
+//       </div>
+
+//       <div className="group-description">
+//         <p>{group.description}</p>
+//       </div>
+//       <p>分类：{group.category}</p>
+
+//       {showCreatePost && (
+//         <CreatePostForm 
+//           groupId={group.group_id}
+//           onClose={() => setShowCreatePost(false)}
+//         />
+//       )}
+//     </div>
+//   );
+// };
+
+// export default GroupItem;
+