refactor(dashboard): extract RoleGuard and unify mobile nav with Button

components/dashboard-sidebar.tsx

@@ -17,12 +17,12 @@ import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { useAuthStore } from "@/store/auth"
 
-const playerLinks = [
+export const playerLinks = [
   { href: "/dashboard", label: "概览", icon: LayoutDashboard },
   { href: "/dashboard/services", label: "服务管理", icon: ListOrdered },
 ]
 
-const ownerLinks = [
+export const ownerLinks = [
   { href: "/dashboard", label: "概览", icon: LayoutDashboard },
   { href: "/dashboard/services", label: "服务管理", icon: ListOrdered },
   { href: "/dashboard/shop", label: "店铺管理", icon: Store },

components/header.tsx

@@ -33,6 +33,8 @@ import { useAuthStore } from "@/store/auth"
 import { useNotificationStore } from "@/store/notifications"
 import { useShopStore } from "@/store/shops"
 
+import { canAccessDashboard } from "@/components/role-guard"
+
 const roleLabels: Record<UserRole, string> = {
   consumer: "客户",
   player: "打手",
@@ -53,6 +55,7 @@ export function Header() {
       ? [
           { href: "/", label: "发现" },
           { href: "/community", label: "社区" },
+          { href: "/orders", label: "订单" },
           { href: "/chat", label: "消息" },
         ]
       : [
@@ -69,7 +72,9 @@ export function Header() {
 
   const handleRoleSwitch = (role: UserRole) => {
     switchRole(role)
-    router.push(role === "consumer" ? "/" : "/dashboard")
+    if (pathname.startsWith("/dashboard") && !canAccessDashboard(role, pathname)) {
+      router.push(role === "consumer" ? "/" : "/dashboard")
+    }
     setMobileOpen(false)
   }
 
@@ -247,7 +252,7 @@ export function Header() {
                 <Menu className="h-5 w-5" />
               </Button>
             </SheetTrigger>
-            <SheetContent side="left" className="w-72">
+            <SheetContent side="right" className="w-72">
               <SheetHeader>
                 <SheetTitle className="flex items-center gap-2">
                   <Gamepad2 className="h-5 w-5" />
@@ -269,38 +274,49 @@ export function Header() {
                 )}
 
                 <nav className="flex flex-col gap-1">
-                  {navLinks.map((link) => (
-                    <Link
-                      key={link.href}
-                      href={link.href}
-                      onClick={() => setMobileOpen(false)}
-                      className={cn(
-                        "px-3 py-2 rounded-full text-sm font-medium transition-colors",
-                        pathname === link.href ||
-                          (link.href !== "/" && pathname.startsWith(link.href))
-                          ? "bg-primary/10 text-primary"
-                          : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
-                      )}
-                    >
-                      {link.label}
-                    </Link>
-                  ))}
+                  {navLinks.map((link) => {
+                    const isActive =
+                      pathname === link.href ||
+                      (link.href !== "/" && pathname.startsWith(link.href))
+                    return (
+                      <Button
+                        key={link.href}
+                        variant={isActive ? "secondary" : "ghost"}
+                        className={cn("w-full justify-start", !isActive && "text-muted-foreground")}
+                        asChild
+                      >
+                        <Link href={link.href} onClick={() => setMobileOpen(false)}>
+                          {link.label}
+                        </Link>
+                      </Button>
+                    )
+                  })}
                   {isAuthenticated && (
                     <>
-                      <Link
-                        href="/wallet"
-                        onClick={() => setMobileOpen(false)}
-                        className="px-3 py-2 rounded-full text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                      <Button
+                        variant={pathname === "/wallet" ? "secondary" : "ghost"}
+                        className={cn(
+                          "w-full justify-start",
+                          pathname !== "/wallet" && "text-muted-foreground",
+                        )}
+                        asChild
                       >
-                        钱包
-                      </Link>
-                      <Link
-                        href="/settings"
-                        onClick={() => setMobileOpen(false)}
-                        className="px-3 py-2 rounded-full text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
+                        <Link href="/wallet" onClick={() => setMobileOpen(false)}>
+                          钱包
+                        </Link>
+                      </Button>
+                      <Button
+                        variant={pathname === "/settings" ? "secondary" : "ghost"}
+                        className={cn(
+                          "w-full justify-start",
+                          pathname !== "/settings" && "text-muted-foreground",
+                        )}
+                        asChild
                       >
-                        设置
-                      </Link>
+                        <Link href="/settings" onClick={() => setMobileOpen(false)}>
+                          设置
+                        </Link>
+                      </Button>
                     </>
                   )}
                 </nav>

components/role-guard.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { usePathname, useRouter } from "next/navigation"
+import { useEffect } from "react"
+import { ownerLinks, playerLinks } from "@/components/dashboard-sidebar"
+import type { UserRole } from "@/lib/types"
+import { useAuthStore } from "@/store/auth"
+
+const dashboardRoutes: Record<string, readonly { href: string }[]> = {
+  player: playerLinks,
+  owner: ownerLinks,
+}
+
+export function canAccessDashboard(role: UserRole, pathname: string) {
+  const routes = dashboardRoutes[role]
+  if (!routes) return false
+  return routes.some((link) => pathname === link.href || pathname.startsWith(link.href + "/"))
+}
+
+export function RoleGuard({ children }: { children: React.ReactNode }) {
+  const currentRole = useAuthStore((state) => state.currentRole)
+  const pathname = usePathname()
+  const router = useRouter()
+
+  const allowed = canAccessDashboard(currentRole, pathname)
+
+  useEffect(() => {
+    if (!allowed) {
+      router.replace(currentRole === "consumer" ? "/" : "/dashboard")
+    }
+  }, [allowed, currentRole, pathname, router])
+
+  if (!allowed) return null
+
+  return <>{children}</>
+}