feat: make role switching drive navigation and view changes

This commit is contained in:
zetaloop
2026-02-20 22:39:57 +08:00
parent 4cc4383603
commit 896a22c296
+31 -21
View File
@@ -40,18 +40,37 @@ const roleLabels: Record<UserRole, string> = {
owner: "店主",
}
const navLinks = [
{ href: "/", label: "首页" },
{ href: "/community", label: "社区" },
{ href: "/orders", label: "订单" },
{ href: "/chat", label: "消息" },
]
export function Header() {
const [mobileOpen, setMobileOpen] = useState(false)
const pathname = usePathname()
const router = useRouter()
const { isAuthenticated, currentRole, switchRole, logout } = useAuthStore()
const { isAuthenticated, currentRole, verifiedRoles, switchRole, logout } = useAuthStore()
const navLinks =
currentRole === "consumer"
? [
{ href: "/", label: "首页" },
{ href: "/search", label: "找陪玩" },
{ href: "/community", label: "社区" },
{ href: "/chat", label: "消息" },
]
: [
{ href: "/", label: "首页" },
{ href: "/community", label: "社区" },
{ href: "/orders", label: "订单" },
{ href: "/chat", label: "消息" },
{ href: "/dashboard", label: "管理后台" },
]
const availableRoles = (Object.entries(roleLabels) as [UserRole, string][]).filter(([role]) =>
verifiedRoles.includes(role),
)
const handleRoleSwitch = (role: UserRole) => {
switchRole(role)
router.push(role === "consumer" ? "/" : "/dashboard")
setMobileOpen(false)
}
const unreadCount = mockNotifications.filter((n) => !n.read).length
@@ -106,10 +125,10 @@ export function Header() {
<DropdownMenuContent align="end">
<DropdownMenuLabel></DropdownMenuLabel>
<DropdownMenuSeparator />
{(Object.entries(roleLabels) as [UserRole, string][]).map(([role, label]) => (
{availableRoles.map(([role, label]) => (
<DropdownMenuItem
key={role}
onClick={() => switchRole(role)}
onClick={() => handleRoleSwitch(role)}
className={cn(currentRole === role && "bg-accent")}
>
{label}
@@ -275,15 +294,6 @@ export function Header() {
>
</Link>
{(currentRole === "player" || currentRole === "owner") && (
<Link
href="/dashboard"
onClick={() => setMobileOpen(false)}
className="px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50"
>
</Link>
)}
</>
)}
</nav>
@@ -292,13 +302,13 @@ export function Header() {
<div className="border-t pt-4">
<p className="px-3 text-xs text-muted-foreground mb-2"></p>
<div className="flex gap-1 px-3">
{(Object.entries(roleLabels) as [UserRole, string][]).map(([role, label]) => (
{availableRoles.map(([role, label]) => (
<Button
key={role}
variant={currentRole === role ? "default" : "outline"}
size="sm"
className="text-xs flex-1"
onClick={() => switchRole(role)}
onClick={() => handleRoleSwitch(role)}
>
{label}
</Button>