feat: global shell — header, footer, sidebars, and layout integration

2026-02-20 13:27:33 +08:00
parent 02cd8a23df
commit f7c76db00f
9 changed files with 520 additions and 36 deletions
@@ -0,0 +1,44 @@
+"use client"
+
+import { Bell, CreditCard, Settings, ShieldCheck } from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+
+const links = [
+  { href: "/settings", label: "个人设置", icon: Settings },
+  { href: "/wallet", label: "钱包", icon: CreditCard },
+  { href: "/notifications", label: "通知中心", icon: Bell },
+  { href: "/verify", label: "身份认证", icon: ShieldCheck },
+]
+
+export function AccountSidebar() {
+  const pathname = usePathname()
+
+  return (
+    <aside className="w-56 shrink-0 border-r bg-muted/30">
+      <div className="flex h-14 items-center border-b px-4 font-semibold">账号设置</div>
+      <nav className="p-2 space-y-1">
+        {links.map((link) => {
+          const Icon = link.icon
+          const isActive = pathname === link.href
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={cn(
+                "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                isActive
+                  ? "bg-accent text-accent-foreground"
+                  : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              {link.label}
+            </Link>
+          )
+        })}
+      </nav>
+    </aside>
+  )
+}