diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index b89cf57..0b5b002 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -1,23 +1,217 @@
-import React, { useEffect } from 'react';
+// // import React, { useEffect } from 'react';
+// // import Header from '../../components/Header';
+// // import { useGroupStore } from '../../context/useGroupStore';
+// // // import GroupFilters from './GroupFilters';
+// // import GroupList from './GroupList';
+// // import GroupPagination from './GroupPagination';
+// // import './InterestGroup.css';
+// // const InterestGroup = () => {
+// //   const { fetchGroupList, setPage, handleSearch } = useGroupStore();
+
+// //   // 初始化加载
+// //   useEffect(() => {
+// //     fetchGroupList();
+// //   }, [fetchGroupList]);
+
+// //   return (
+// //     <div className="interest-group-container">
+// //       <Header />
+// //       <div className="interest-group-card">
+// //         {/* <GroupFilters /> */}
+// //         <GroupList />
+// //         <GroupPagination />
+// //       </div>
+// //     </div>
+// //   );
+// // };
+
+// // export default InterestGroup;
+
+// import React, { useEffect, useState } from 'react';
+// import Header from '../../components/Header';
+// import { useGroupStore } from '../../context/useGroupStore';
+// import GroupList from './GroupList';
+// import GroupPagination from './GroupPagination';
+// import './InterestGroup.css';
+// import axios from 'axios';
+
+// const InterestGroup = () => {
+//   const { fetchGroupList } = useGroupStore();
+
+//   const [showModal, setShowModal] = useState(false);
+//   const [groupName, setGroupName] = useState('');
+//   const [groupDescription, setGroupDescription] = useState('');
+
+//   useEffect(() => {
+//     fetchGroupList();
+//   }, [fetchGroupList]);
+
+//   const handleCreateGroup = async () => {
+//   try {
+//     const res = await axios.post('http://localhost:3011/echo/groups/createGroup', {
+//       user_id: 1,
+//       group_name: groupName,               // ✅ 改为 snake_case
+//       description: groupDescription,
+//       time: new Date().toISOString(),
+//       category: '默认分类',
+//       cover_image: 'https://picsum.photos/300/200',
+//     });
+
+//     if (res.status === 200 && res.data.status === 'success') {
+//       alert('小组创建成功');
+//       setShowModal(false);
+//       setGroupName('');
+//       setGroupDescription('');
+//       fetchGroupList();
+//     } else {
+//       alert('创建失败: ' + res.data.message);
+//     }
+//   } catch (error) {
+//     alert('创建失败，请检查网络或输入');
+//     console.error(error);
+//   }
+// };
+
+
+//   // const handleCreateGroup = async () => {
+//   //   try {
+//   //     const res = await axios.post('/createGroup', {
+//   //       groupName,
+//   //       description: groupDescription,
+//   //     });
+//   //     if (res.status === 200) {
+//   //       alert('小组创建成功');
+//   //       setShowModal(false);
+//   //       setGroupName('');
+//   //       setGroupDescription('');
+//   //       fetchGroupList(); // 刷新列表
+//   //     }
+//   //   } catch (error) {
+//   //     alert('创建失败，请重试');
+//   //   }
+//   // };
+
+//   return (
+//     <div className="interest-group-container">
+//       <Header />
+//       <div className="interest-group-card">
+//         <button className="create-group-btn" onClick={() => setShowModal(true)}>
+//           创建小组
+//         </button>
+
+//         {showModal && (
+//           <div className="modal-overlay">
+//             <div className="modal-content">
+//               <h2>创建新小组</h2>
+//               <input
+//                 type="text"
+//                 placeholder="小组名称"
+//                 value={groupName}
+//                 onChange={(e) => setGroupName(e.target.value)}
+//               />
+//               <textarea
+//                 placeholder="小组简介"
+//                 value={groupDescription}
+//                 onChange={(e) => setGroupDescription(e.target.value)}
+//               />
+//               <div className="modal-buttons">
+//                 <button onClick={handleCreateGroup}>确定</button>
+//                 <button onClick={() => setShowModal(false)}>取消</button>
+//               </div>
+//             </div>
+//           </div>
+//         )}
+
+//         <GroupList />
+//         <GroupPagination />
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default InterestGroup;
+
+
+import React, { useEffect, useState } from 'react';
 import Header from '../../components/Header';
 import { useGroupStore } from '../../context/useGroupStore';
-import GroupFilters from './GroupFilters';
 import GroupList from './GroupList';
 import GroupPagination from './GroupPagination';
 import './InterestGroup.css';
-const InterestGroup = () => {
-  const { fetchGroupList, setPage, handleSearch } = useGroupStore();
+import axios from 'axios';
 
-  // 初始化加载
+const InterestGroup = () => {
+  const { fetchGroupList } = useGroupStore();
+
+  const [showModal, setShowModal] = useState(false);
+  const [groupName, setGroupName] = useState('');
+  const [groupDescription, setGroupDescription] = useState('');
+
   useEffect(() => {
     fetchGroupList();
   }, [fetchGroupList]);
 
+  const handleCreateGroup = async () => {
+    try {
+      // ✅ 修改请求体字段名，使用驼峰命名法
+      const res = await axios.post('http://localhost:3011/echo/groups/createGroup', {
+        userId: 1,                 // 改为驼峰命名 userId
+        groupName: groupName,      // 改为驼峰命名 groupName
+        description: groupDescription,
+        // 移除time字段，使用后端生成的时间
+        memberCount: 1,            // 添加初始成员数
+        category: '默认分类',
+        coverImage: 'https://picsum.photos/300/200',  // 改为驼峰命名 coverImage
+      });
+
+      if (res.status === 200 && res.data.status === 'success') {
+        alert('小组创建成功');
+        setShowModal(false);
+        setGroupName('');
+        setGroupDescription('');
+        fetchGroupList(); // 刷新列表
+      } else {
+        // 显示后端返回的详细错误信息
+        alert('创建失败: ' + res.data.message);
+      }
+    } catch (error) {
+      // 处理网络错误或其他异常
+      alert('创建失败，请检查网络连接或输入内容');
+      console.error('创建小组错误:', error);
+    }
+  };
+
   return (
     <div className="interest-group-container">
       <Header />
       <div className="interest-group-card">
-        <GroupFilters />
+        <button className="create-group-btn" onClick={() => setShowModal(true)}>
+          创建小组
+        </button>
+
+        {showModal && (
+          <div className="modal-overlay">
+            <div className="modal-content">
+              <h2>创建新小组</h2>
+              <input
+                type="text"
+                placeholder="小组名称"
+                value={groupName}
+                onChange={(e) => setGroupName(e.target.value)}
+              />
+              <textarea
+                placeholder="小组简介"
+                value={groupDescription}
+                onChange={(e) => setGroupDescription(e.target.value)}
+              />
+              <div className="modal-buttons">
+                <button onClick={handleCreateGroup}>确定</button>
+                <button onClick={() => setShowModal(false)}>取消</button>
+              </div>
+            </div>
+          </div>
+        )}
+
         <GroupList />
         <GroupPagination />
       </div>