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,66 @@
+"use client"
+
+import {
+  Gamepad2,
+  LayoutDashboard,
+  ListOrdered,
+  Palette,
+  Settings2,
+  Store,
+  Users,
+} from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { useAuthStore } from "@/store/auth"
+
+const playerLinks = [
+  { href: "/dashboard", label: "概览", icon: LayoutDashboard },
+  { href: "/dashboard/services", label: "服务管理", icon: ListOrdered },
+]
+
+const ownerLinks = [
+  { href: "/dashboard", label: "概览", icon: LayoutDashboard },
+  { href: "/dashboard/services", label: "服务管理", icon: ListOrdered },
+  { href: "/dashboard/shop", label: "店铺管理", icon: Store },
+  { href: "/dashboard/shop/employees", label: "员工管理", icon: Users },
+  { href: "/dashboard/shop/templates", label: "模板编辑", icon: Palette },
+  { href: "/dashboard/settings", label: "店铺设置", icon: Settings2 },
+]
+
+export function DashboardSidebar() {
+  const pathname = usePathname()
+  const { currentRole } = useAuthStore()
+
+  const links = currentRole === "owner" ? ownerLinks : playerLinks
+
+  return (
+    <aside className="w-56 shrink-0 border-r bg-muted/30">
+      <div className="flex h-14 items-center gap-2 border-b px-4 font-semibold">
+        <Gamepad2 className="h-4 w-4" />
+        管理后台
+      </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>
+  )
+}