diff --git a/src/pages/InterestGroup/GroupItem.jsx b/src/pages/InterestGroup/GroupItem.jsx
index 8fdc640..736f88d 100644
--- a/src/pages/InterestGroup/GroupItem.jsx
+++ b/src/pages/InterestGroup/GroupItem.jsx
@@ -1,20 +1,182 @@
-import React, { useState } from 'react';
+// import React, { useState, useEffect } from 'react';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import { useUser } from '../../context/UserContext';
+// import CreatePostForm from './CreatePostForm';
+// import axios from 'axios'; // 新增
+
+// const GroupItem = ({ group }) => {
+//   const { handleJoinGroup, joinStatus, setJoinStatus } = useGroupStore(); // 假设你有 setJoinStatus 方法
+//   const { user } = useUser();
+
+//   const userId = user?.userId;
+//   const groupId = group.groupId;
+
+//   const [isMember, setIsMember] = useState(false);
+
+//   useEffect(() => {
+//     setIsMember(joinStatus[groupId] === '加入成功');
+//   }, [joinStatus, groupId]);
+
+//   const [showCreatePost, setShowCreatePost] = useState(false);
+
+//   // 退出小组函数（新增）
+//   const handleLeaveGroup = async () => {
+//     try {
+//       const res = await axios.post(`/echo/groups/${groupId}/leave`, {
+//         user_id: userId,
+//       });
+//       if (res.data.status === 'success') {
+//         setJoinStatus(groupId, '未加入'); // 更新全局状态（需确保 useGroupStore 中有此方法）
+//         setIsMember(false); // 本地状态也更新
+//       } else {
+//         alert(res.data.message || '退出失败');
+//       }
+//     } catch (error) {
+//       console.error('退出小组失败:', error);
+//       alert('退出小组失败');
+//     }
+//   };
+
+//   return (
+//     <div className="group-item">
+//       <div className="group-content">
+//         <img
+//           style={{ width: '40%', height: '40%' }}
+//           src={group.coverImage || 'https://picsum.photos/200/200'}
+//           alt={group.groupName}
+//           className="group-cover"
+//         />
+//         <div className="group-info-right">
+//           <h3>{group.groupName}</h3>
+//           <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
+
+//           {/* 加入/退出按钮逻辑 */}
+//           {userId && (
+//             <button
+//               onClick={() => {
+//                 if (isMember) {
+//                   handleLeaveGroup(); // 已加入 -> 退出
+//                 } else {
+//                   handleJoinGroup(groupId, userId); // 未加入 -> 加入
+//                 }
+//               }}
+//             >
+//               {isMember ? '退出小组' : '+加入小组'}
+//             </button>
+//           )}
+//           {!userId && <button disabled>请登录</button>}
+
+//           {/* 发布帖子按钮 */}
+//           {userId && isMember && (
+//             <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, useEffect } from 'react';
 import { useGroupStore } from '../../context/useGroupStore';
 import { useUser } from '../../context/UserContext';
 import CreatePostForm from './CreatePostForm';
+import axios from 'axios';
 
 const GroupItem = ({ group }) => {
-
-  console.log('group:', group);
-  const { handleJoinGroup, joinStatus } = useGroupStore();
+  const { handleJoinGroup, joinStatus, setJoinStatus } = useGroupStore();
   const { user } = useUser();
-  
+
   const userId = user?.userId;
-  const groupId = group.groupId; // ✅ 使用正确字段
-console.log('加入小组请求 - groupId:', group.group_id, 'userId:', userId);
+  const groupId = group.groupId;
+
+  const [isMember, setIsMember] = useState(false);
+  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 isMember = res.data.members.some(member => member.user_id === userId);
+      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,
+      });
+      if (res.data.status === 'success') {
+        setJoinStatus(groupId, '未加入');
+        setIsMember(false);
+        // 可选：刷新小组成员计数
+        group.memberCount = (group.memberCount || 0) - 1;
+      } else {
+        setError(res.data.message || '退出失败');
+      }
+    } catch (error) {
+      console.error('退出小组失败:', error);
+      setError('退出小组失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 修改加入小组逻辑（新增）
+  const handleJoin = async () => {
+    setLoading(true);
+    try {
+      const res = await handleJoinGroup(groupId, userId);
+      if (res && res.status === 'success') {
+        setJoinStatus(groupId, '加入成功');
+        setIsMember(true);
+        // 可选：刷新小组成员计数
+        group.memberCount = (group.memberCount || 0) + 1;
+      } else {
+        setError(res?.message || '加入失败');
+      }
+    } catch (error) {
+      console.error('加入小组失败:', error);
+      setError('加入小组失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <div className="group-item">
       <div className="group-content">
@@ -25,18 +187,31 @@
           className="group-cover"
         />
         <div className="group-info-right">
-          <h3>{group.groupName}</h3> {/* ✅ 使用 groupName */}
+          <h3>{group.groupName}</h3>
           <p style={{ color: '#BA929A' }}>{group.memberCount || 0}人加入了小组</p>
 
-          <button
-            onClick={() => handleJoinGroup(groupId, userId)}
-            disabled={joinStatus[groupId] === '加入成功' || !userId}
-          >
-            
-            {joinStatus[groupId] === '加入成功' ? '已加入' : userId ? '+加入小组' : '请登录'}
-          </button>
+          {/* 加入/退出按钮逻辑 */}
+          {userId && (
+            <button
+              onClick={() => {
+                if (isMember) {
+                  handleLeaveGroup();
+                } else {
+                  handleJoin();
+                }
+              }}
+              disabled={loading}
+            >
+              {loading ? '处理中...' : isMember ? '退出小组' : '+加入小组'}
+            </button>
+          )}
+          {!userId && <button disabled>请登录</button>}
 
-          {userId && joinStatus[groupId] === '加入成功' && (
+          {/* 显示错误信息（新增） */}
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+
+          {/* 发布帖子按钮 */}
+          {userId && isMember && (
             <button onClick={() => setShowCreatePost(!showCreatePost)}>
               +发布帖子
             </button>
@@ -59,4 +234,4 @@
   );
 };
 
-export default GroupItem;
\ No newline at end of file
+export default GroupItem;