From bef981d9036ccff1e57ba2aeebaf7772c9978a92 Mon Sep 17 00:00:00 2001
From: root <root@s52867.vps.hosting>
Date: Fri, 27 Feb 2026 12:12:24 +0000
Subject: [PATCH] fix: mobile header - merge auth into sidebar topbar, remove
 duplicate header

---
 frontend/components/AuthHeader.tsx | 67 +++++++++++-------------------
 frontend/components/Sidebar.tsx    | 50 +++++++++++++++-------
 2 files changed, 61 insertions(+), 56 deletions(-)

diff --git a/frontend/components/AuthHeader.tsx b/frontend/components/AuthHeader.tsx
index da80d39..efc44e9 100644
--- a/frontend/components/AuthHeader.tsx
+++ b/frontend/components/AuthHeader.tsx
@@ -6,49 +6,32 @@ import { useAuth } from "@/lib/auth";
 export default function AuthHeader() {
   const { user, isLoggedIn, logout } = useAuth();
 
+  // 手机端顶栏由 Sidebar 组件处理，这里只渲染桌面端顶栏
   return (
-    <>
-      {/* 桌面端顶栏 */}
-      <header className="hidden md:flex items-center justify-end px-6 py-3 bg-white border-b border-slate-200 gap-3">
-        {isLoggedIn ? (
-          <>
-            <span className="text-sm text-slate-500">{user?.email}</span>
-            {user?.role === "admin" && (
-              <span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Admin</span>
-            )}
-            <button onClick={logout}
-              className="text-sm text-slate-600 hover:text-red-500 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-red-300 transition-colors">
-              退出
-            </button>
-          </>
-        ) : (
-          <>
-            <Link href="/login"
-              className="text-sm text-slate-600 hover:text-blue-600 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-blue-300 transition-colors">
-              登录
-            </Link>
-            <Link href="/register"
-              className="text-sm text-white bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-lg transition-colors font-medium">
-              注册
-            </Link>
-          </>
-        )}
-      </header>
-
-      {/* 手机端顶栏 */}
-      <header className="md:hidden flex items-center justify-between px-4 py-2 bg-white border-b border-slate-200 fixed top-0 left-0 right-0 z-40">
-        <span className="font-bold text-blue-600 text-sm">⚡ ArbEngine</span>
-        <div className="flex items-center gap-2">
-          {isLoggedIn ? (
-            <button onClick={logout} className="text-xs text-slate-500 hover:text-red-500">退出</button>
-          ) : (
-            <>
-              <Link href="/login" className="text-xs text-slate-500">登录</Link>
-              <Link href="/register" className="text-xs bg-blue-600 text-white px-2 py-1 rounded">注册</Link>
-            </>
+    <header className="hidden md:flex items-center justify-end px-6 py-3 bg-white border-b border-slate-200 gap-3">
+      {isLoggedIn ? (
+        <>
+          <span className="text-sm text-slate-500">{user?.email}</span>
+          {user?.role === "admin" && (
+            <span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Admin</span>
           )}
-        </div>
-      </header>
-    </>
+          <button onClick={logout}
+            className="text-sm text-slate-600 hover:text-red-500 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-red-300 transition-colors">
+            退出
+          </button>
+        </>
+      ) : (
+        <>
+          <Link href="/login"
+            className="text-sm text-slate-600 hover:text-blue-600 px-3 py-1.5 rounded-lg border border-slate-200 hover:border-blue-300 transition-colors">
+            登录
+          </Link>
+          <Link href="/register"
+            className="text-sm text-white bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-lg transition-colors font-medium">
+            注册
+          </Link>
+        </>
+      )}
+    </header>
   );
 }
diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx
index c3d7e45..ec0b243 100644
--- a/frontend/components/Sidebar.tsx
+++ b/frontend/components/Sidebar.tsx
@@ -3,10 +3,11 @@
 import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useAuth } from "@/lib/auth";
 import {
   LayoutDashboard, Info,
   Menu, X, Zap, LogIn, UserPlus,
-  ChevronLeft, ChevronRight, Activity
+  ChevronLeft, ChevronRight, Activity, LogOut
 } from "lucide-react";
 
 const navItems = [
@@ -19,6 +20,7 @@ export default function Sidebar() {
   const pathname = usePathname();
   const [collapsed, setCollapsed] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
+  const { user, isLoggedIn, logout } = useAuth();
 
   const SidebarContent = ({ mobile = false }: { mobile?: boolean }) => (
     <div className={`flex flex-col h-full ${mobile ? "w-64" : collapsed ? "w-16" : "w-60"} transition-all duration-200`}>
@@ -45,17 +47,31 @@ export default function Sidebar() {
             </Link>
           );
         })}
-        {/* 手机端：登录注册放在菜单里 */}
+        {/* 手机端：登录/登出放在菜单里 */}
         {mobile && (
           <div className="pt-4 border-t border-slate-100 mt-4 space-y-1">
-            <Link href="/login" onClick={() => setMobileOpen(false)}
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-slate-600 hover:bg-slate-100 transition-colors">
-              <LogIn className="shrink-0 text-slate-400" size={18} /><span>登录</span>
-            </Link>
-            <Link href="/register" onClick={() => setMobileOpen(false)}
-              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white bg-blue-600 hover:bg-blue-700 transition-colors">
-              <UserPlus className="shrink-0" size={18} /><span>注册</span>
-            </Link>
+            {isLoggedIn ? (
+              <>
+                {user?.email && (
+                  <div className="px-3 py-2 text-xs text-slate-400">{user.email}</div>
+                )}
+                <button onClick={() => { logout(); setMobileOpen(false); }}
+                  className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-red-500 hover:bg-red-50 transition-colors w-full">
+                  <LogOut className="shrink-0" size={18} /><span>退出登录</span>
+                </button>
+              </>
+            ) : (
+              <>
+                <Link href="/login" onClick={() => setMobileOpen(false)}
+                  className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-slate-600 hover:bg-slate-100 transition-colors">
+                  <LogIn className="shrink-0 text-slate-400" size={18} /><span>登录</span>
+                </Link>
+                <Link href="/register" onClick={() => setMobileOpen(false)}
+                  className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white bg-blue-600 hover:bg-blue-700 transition-colors">
+                  <UserPlus className="shrink-0" size={18} /><span>注册</span>
+                </Link>
+              </>
+            )}
           </div>
         )}
       </nav>
@@ -84,10 +100,16 @@ export default function Sidebar() {
           <span className="font-bold text-slate-800 text-sm">Arbitrage Engine</span>
         </div>
         <div className="flex items-center gap-2">
-          <Link href="/login" className="text-xs text-slate-600 hover:text-blue-600 px-2 py-1 rounded border border-slate-200">登录</Link>
-          <Link href="/register" className="text-xs text-white bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded">注册</Link>
-          <button onClick={() => setMobileOpen(!mobileOpen)} className="text-slate-600 p-1 ml-1">
-            {mobileOpen ? <X size={20} /> : <Menu size={20} />}
+          {isLoggedIn ? (
+            <button onClick={logout} className="text-xs text-slate-500 hover:text-red-500 border border-slate-200 px-2 py-1 rounded">退出</button>
+          ) : (
+            <>
+              <Link href="/login" className="text-xs text-slate-600 border border-slate-200 px-2 py-1 rounded">登录</Link>
+              <Link href="/register" className="text-xs text-white bg-blue-600 px-2 py-1 rounded">注册</Link>
+            </>
+          )}
+          <button onClick={() => setMobileOpen(!mobileOpen)} className="text-slate-600 p-1 ml-1 border border-slate-200 rounded">
+            {mobileOpen ? <X size={18} /> : <Menu size={18} />}
           </button>
         </div>
       </div>