polyscout-web/app/layout.tsx

68 lines
2.6 KiB
TypeScript

import type { Metadata } from "next";
import { Geist } from "next/font/google";
import "./globals.css";
import Link from "next/link";
const geist = Geist({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "PolyScout",
description: "Polymarket AI套利信号监控",
};
const navItems = [
{ href: "/", label: "仪表盘", icon: "📊" },
{ href: "/markets", label: "市场", icon: "🌐" },
{ href: "/signals", label: "信号", icon: "⚡" },
{ href: "/trades", label: "交易", icon: "💰" },
];
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="zh" className="dark">
<body className={`${geist.className} bg-background text-foreground`}>
<div className="flex min-h-screen">
{/* Sidebar */}
<aside className="hidden md:flex w-56 flex-col border-r border-border bg-card px-3 py-4">
<div className="flex items-center gap-2 px-2 py-3 mb-4">
<div className="w-7 h-7 rounded-md bg-blue-600 flex items-center justify-center text-sm">🔭</div>
<span className="font-semibold text-sm">PolyScout</span>
</div>
<nav className="flex flex-col gap-1">
{navItems.map((item) => (
<Link
key={item.href}
href={item.href}
className="flex items-center gap-3 px-3 py-2 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
>
<span>{item.icon}</span>
<span>{item.label}</span>
</Link>
))}
</nav>
<div className="mt-auto px-2 py-2 text-xs text-muted-foreground flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_6px_#22c55e]"></span>
</div>
</aside>
{/* Mobile nav */}
<div className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-card border-t border-border flex">
{navItems.map((item) => (
<Link key={item.href} href={item.href} className="flex-1 flex flex-col items-center py-3 text-xs text-muted-foreground hover:text-foreground gap-1">
<span className="text-lg">{item.icon}</span>
<span>{item.label}</span>
</Link>
))}
</div>
{/* Main */}
<main className="flex-1 p-6 pb-20 md:pb-6 overflow-auto">
{children}
</main>
</div>
</body>
</html>
);
}