فهرست منبع

✨ feat(member): 添加退出登录功能

- 从AuthProvider获取logout方法
- 添加退出登录按钮
- 实现点击退出登录后返回首页的功能
- 调整按钮布局为水平排列
yourname 4 ماه پیش
والد
کامیت
be28fd9879
1فایلهای تغییر یافته به همراه21 افزوده شده و 9 حذف شده
  1. 21 9
      src/client/home/pages/MemberPage.tsx

+ 21 - 9
src/client/home/pages/MemberPage.tsx

@@ -10,7 +10,7 @@ import { useAuth, User } from '@/client/home/hooks/AuthProvider';
 
 const MemberPage: React.FC = () => {
   const navigate = useNavigate();
-  const { user } = useAuth();
+  const { user, logout } = useAuth();
 
   if (!user) {
     return (
@@ -57,14 +57,26 @@ const MemberPage: React.FC = () => {
               </div>
             </div>
             
-            
-            <button
-              onClick={() => navigate('/profile/edit')}
-              className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
-            >
-              <PencilIcon className="w-4 h-4 mr-2" />
-              编辑资料
-            </button>
+            <div className="flex">
+              <button
+                onClick={() => navigate('/profile/edit')}
+                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
+              >
+                <PencilIcon className="w-4 h-4 mr-2" />
+                编辑资料
+              </button>
+              
+              <button
+                onClick={async () => {
+                  await logout();
+                  navigate('/');
+                }}
+                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ml-4"
+              >
+                退出登录
+              </button>
+
+            </div>
             
             {(user as any).bio && (
               <p className="mt-4 text-center text-gray-600 max-w-lg">