diff --git a/src/pages/UserCenter/UserInvite.css b/src/pages/UserCenter/UserInvite.css
new file mode 100644
index 0000000..8250e0b
--- /dev/null
+++ b/src/pages/UserCenter/UserInvite.css
@@ -0,0 +1,36 @@
+.user-invite-container {
+  padding: 24px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  max-width: 500px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.invite-button {
+  padding: 10px 20px;
+  background-color: #4a90e2;
+  color: white;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-top: 12px;
+}
+
+.invite-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.invite-code {
+  margin-top: 20px;
+  font-size: 18px;
+  color: #333;
+}
+
+.invite-code span {
+  font-weight: bold;
+  color: #4a90e2;
+}
diff --git a/src/pages/UserCenter/UserInvite.jsx b/src/pages/UserCenter/UserInvite.jsx
new file mode 100644
index 0000000..aa6e559
--- /dev/null
+++ b/src/pages/UserCenter/UserInvite.jsx
@@ -0,0 +1,98 @@
+// import React, { useState } from 'react';
+// import './UserInvite.css';
+// import axios from 'axios';
+// import { useUser } from '../../context/UserContext'; // 根据实际路径调整
+
+// const UserInvite = () => {
+//   const { user } = useUser();
+//   const [inviteCode, setInviteCode] = useState('');
+//   const [loading, setLoading] = useState(false);
+
+//   const handleGenerateInvite = async () => {
+//     if (!user?.userId) {
+//       alert('未获取到用户信息，无法生成邀请码');
+//       return;
+//     }
+
+//     setLoading(true);
+//     try {
+//       const response = await axios.get('/echo/user/getInviteCode', {
+//         params: { user_id: user.userId },
+//       });
+//       setInviteCode(response.data.invite_code);
+//     } catch (error) {
+//       console.error('生成邀请码失败：', error);
+//       alert('生成邀请码失败，请稍后再试');
+//     }
+//     setLoading(false);
+//   };
+
+//   return (
+//     <div className="user-invite-container">
+//       <h2>邀请新用户</h2>
+//       <button className="invite-button" onClick={handleGenerateInvite} disabled={loading}>
+//         {loading ? '生成中...' : '生成邀请码'}
+//       </button>
+//       {inviteCode && (
+//         <div className="invite-code">
+//           邀请码：<span>{inviteCode}</span>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default UserInvite;
+
+import React, { useState } from 'react';
+import './UserInvite.css';
+import axios from 'axios';
+import { useUser } from '../../context/UserContext';
+
+const UserInvite = () => {
+  const { user } = useUser();
+  const [inviteCode, setInviteCode] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerateInvite = async () => {
+    if (!user?.userId) {
+      alert('未获取到用户信息，无法生成邀请码');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await axios.post('/echo/user/getInviteCode', {
+        user_id: user.userId,
+      });
+
+      const data = response.data;
+
+      if (data.status === 'success') {
+        setInviteCode(data.invite_code);
+      } else {
+        alert(`生成失败：${data.message}`);
+      }
+    } catch (error) {
+      console.error('生成邀请码失败：', error);
+      alert('生成邀请码失败，请稍后再试');
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div className="user-invite-container">
+      <h2>邀请新用户</h2>
+      <button className="invite-button" onClick={handleGenerateInvite} disabled={loading}>
+        {loading ? '生成中...' : '生成邀请码'}
+      </button>
+      {inviteCode && (
+        <div className="invite-code">
+          邀请码：<span>{inviteCode}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserInvite;
diff --git a/src/pages/UserCenter/UserNav.jsx b/src/pages/UserCenter/UserNav.jsx
index cc343b1..64dd375 100644
--- a/src/pages/UserCenter/UserNav.jsx
+++ b/src/pages/UserCenter/UserNav.jsx
@@ -13,6 +13,7 @@
     { to: '/user/groups', label: '我的群组' },
     { to: '/user/collections', label: '我的收藏' },
     { to: '/user/newbie-tasks', label: '新手考核' },
+    { to: '/user/invite', label: '邀请新用户' },
   ];
 
   // 判断路径是否是当前活动页面
@@ -36,37 +37,3 @@
 };
 
 export default UserNav;
-
-// import React from 'react';
-// import './UserNav.css';
-
-// const UserNav = ({ activeKey, onSelect }) => {
-//   const navLinks = [
-//     { key: 'profile', label: '个人资料' },
-//     // { key: 'dynamics', label: '我的动态' },
-//     // { key: 'friends', label: '我的好友' },
-//     // { key: 'groups', label: '我的群组' },
-//     // { key: 'collections', label: '我的收藏' },
-//     { key: 'newbieTasks', label: '新手考核' },
-//   ];
-
-//   return (
-//     <div className="user-nav-container">
-//       <nav className="user-nav">
-//         {navLinks.map(({ key, label }) => (
-//           <div
-//             key={key}
-//             className={`user-nav-item ${activeKey === key ? 'active' : ''}`}
-//             onClick={() => onSelect(key)}
-//             style={{ cursor: 'pointer' }}
-//           >
-//             {label}
-//           </div>
-//         ))}
-//       </nav>
-//     </div>
-//   );
-// };
-
-// export default UserNav;
-