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

feat: login/register to top-right, remove kline/signals from sidebar nav

Browse Source
This commit is contained in:
root 2026-02-27 09:56:40 +00:00
parent 24d9044d9d
commit 1f844b946e
2 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/app/layout.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
import Link from "next/link";
const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] }); const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
@ -17,10 +18,23 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
<body className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-slate-50 text-slate-900`}> <body className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-slate-50 text-slate-900`}>
<div className="flex min-h-screen"> <div className="flex min-h-screen">
<Sidebar /> <Sidebar />
<main className="flex-1 md:p-6 p-4 pt-16 md:pt-6 min-w-0"> <div className="flex-1 flex flex-col min-w-0">
{/* 桌面端顶栏：右上角登录注册 */}
<header className="hidden md:flex items-center justify-end px-6 py-3 bg-white border-b border-slate-200 gap-3">
<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>
<main className="flex-1 p-4 md:p-6 pt-16 md:pt-6">
{children} {children}
</main> </main>
</div> </div>
</div>
</body> </body>
</html> </html>
); );

48
frontend/components/Sidebar.tsx
View File

@ -4,22 +4,16 @@ import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { import {
LayoutDashboard, TrendingUp, Bell, Info, LogIn, UserPlus, LayoutDashboard, Info,
ChevronLeft, ChevronRight, Menu, X, Zap Menu, X, Zap, LogIn, UserPlus,
ChevronLeft, ChevronRight
} from "lucide-react"; } from "lucide-react";
const navItems = [ const navItems = [
{ href: "/", label: "仪表盘", icon: LayoutDashboard }, { href: "/", label: "仪表盘", icon: LayoutDashboard },
{ href: "/kline", label: "K线大图", icon: TrendingUp },
{ href: "/signals", label: "信号历史", icon: Bell },
{ href: "/about", label: "说明", icon: Info }, { href: "/about", label: "说明", icon: Info },
]; ];
const authItems = [
{ href: "/login", label: "登录", icon: LogIn },
{ href: "/register", label: "注册", icon: UserPlus },
];
export default function Sidebar() { export default function Sidebar() {
const pathname = usePathname(); const pathname = usePathname();
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
@ -28,7 +22,7 @@ export default function Sidebar() {
const SidebarContent = ({ mobile = false }: { mobile?: boolean }) => ( 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`}> <div className={`flex flex-col h-full ${mobile ? "w-64" : collapsed ? "w-16" : "w-60"} transition-all duration-200`}>
{/* Logo */} {/* Logo */}
<div className={`flex items-center gap-2 px-4 py-5 border-b border-slate-100 ${collapsed && !mobile ? "justify-center px-0" : ""}`}> <div className={`flex items-center gap-2 px-4 py-5 border-b border-slate-100 ${collapsed && !mobile ? "justify-center" : ""}`}>
<Zap className="w-6 h-6 text-blue-600 shrink-0" /> <Zap className="w-6 h-6 text-blue-600 shrink-0" />
{(!collapsed || mobile) && ( {(!collapsed || mobile) && (
<span className="font-bold text-slate-800 text-base leading-tight">Arbitrage<br/>Engine</span> <span className="font-bold text-slate-800 text-base leading-tight">Arbitrage<br/>Engine</span>
@ -44,26 +38,26 @@ export default function Sidebar() {
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors
${active ? "bg-blue-50 text-blue-700 font-medium" : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"} ${active ? "bg-blue-50 text-blue-700 font-medium" : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"}
${collapsed && !mobile ? "justify-center px-0" : ""}`}> ${collapsed && !mobile ? "justify-center" : ""}`}>
<Icon className={`shrink-0 ${active ? "text-blue-600" : "text-slate-400"}`} size={18} /> <Icon className={`shrink-0 ${active ? "text-blue-600" : "text-slate-400"}`} size={18} />
{(!collapsed || mobile) && <span>{label}</span>} {(!collapsed || mobile) && <span>{label}</span>}
</Link> </Link>
); );
})} })}
</nav> {/* 手机端：登录注册放在菜单里 */}
{mobile && (
{/* Auth */} <div className="pt-4 border-t border-slate-100 mt-4 space-y-1">
<div className="border-t border-slate-100 py-3 px-2 space-y-1"> <Link href="/login" onClick={() => setMobileOpen(false)}
{authItems.map(({ href, label, icon: Icon }) => ( className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-slate-600 hover:bg-slate-100 transition-colors">
<Link key={href} href={href} <LogIn className="shrink-0 text-slate-400" size={18} /><span>登录</span>
onClick={() => setMobileOpen(false)} </Link>
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-slate-500 hover:bg-slate-100 hover:text-slate-800 transition-colors <Link href="/register" onClick={() => setMobileOpen(false)}
${collapsed && !mobile ? "justify-center px-0" : ""}`}> 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">
<Icon className="shrink-0 text-slate-400" size={16} /> <UserPlus className="shrink-0" size={18} /><span>注册</span>
{(!collapsed || mobile) && <span>{label}</span>}
</Link> </Link>
))}
</div> </div>
)}
</nav>
{/* Collapse toggle (desktop only) */} {/* Collapse toggle (desktop only) */}
{!mobile && ( {!mobile && (
@ -88,10 +82,14 @@ export default function Sidebar() {
<Zap className="w-5 h-5 text-blue-600" /> <Zap className="w-5 h-5 text-blue-600" />
<span className="font-bold text-slate-800 text-sm">Arbitrage Engine</span> <span className="font-bold text-slate-800 text-sm">Arbitrage Engine</span>
</div> </div>
<button onClick={() => setMobileOpen(!mobileOpen)} className="text-slate-600 p-1"> <div className="flex items-center gap-2">
{mobileOpen ? <X size={22} /> : <Menu size={22} />} <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} />}
</button> </button>
</div> </div>
</div>
{/* Mobile drawer */} {/* Mobile drawer */}
{mobileOpen && ( {mobileOpen && (