lulu/arbitrage-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile header - merge auth into sidebar topbar, remove duplicate header

Browse Source
This commit is contained in:
root 2026-02-27 12:12:24 +00:00
parent b25ac2e04d
commit bef981d903
2 changed files with 61 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/components/AuthHeader.tsx
View File

@ -6,9 +6,8 @@ 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 ? (
<>
@ -34,21 +33,5 @@ export default function AuthHeader() {
</>
)}
</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>
</>
)}
</div>
</header>
</>
);
}

34
frontend/components/Sidebar.tsx
View File

@ -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,9 +47,21 @@ export default function Sidebar() {
</Link>
);
})}
{/* 手机端：登录注册放在菜单里 */}
{/* 手机端：登录/登出放在菜单里 */}
{mobile && (
<div className="pt-4 border-t border-slate-100 mt-4 space-y-1">
{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>
@ -56,6 +70,8 @@ export default function Sidebar() {
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>