feat: add real account workspace controls

2026-07-02 19:52:29 -07:00
parent 1b8fae0116
commit 1cdf89c608
12 changed files with 759 additions and 203 deletions
--- a/modules/shared/components/AppSidebarNav.tsx
+++ b/modules/shared/components/AppSidebarNav.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  BedDouble,
+  Bell,
+  Building2,
+  ClipboardCheck,
+  Globe2,
+  HeartPulse,
+  LayoutDashboard,
+  ListChecks,
+  Radio,
+  Settings,
+  ShieldAlert,
+  TabletSmartphone,
+  Users,
+  Wrench,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+import type { Permission } from "@/modules/core/types";
+import { navGroups, type NavIconKey } from "@/modules/shared/lib/navigation";
+import { cn } from "@/lib/utils";
+
+const iconMap: Record<NavIconKey, LucideIcon> = {
+  alerts: Radio,
+  audit: ListChecks,
+  beds: BedDouble,
+  care: ClipboardCheck,
+  dashboard: LayoutDashboard,
+  devices: TabletSmartphone,
+  emergency: ShieldAlert,
+  global: Globe2,
+  health: HeartPulse,
+  notices: Bell,
+  organizations: Building2,
+  roles: Settings,
+  status: Wrench,
+  users: Users,
+};
+
+type AppSidebarNavProps = {
+  permissions: Permission[];
+};
+
+function isActivePath(pathname: string, href: string): boolean {
+  if (href === "/app/dashboard") {
+    return pathname === "/app" || pathname === href;
+  }
+
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+export function AppSidebarNav({ permissions }: AppSidebarNavProps): React.ReactElement {
+  const pathname = usePathname();
+  const visibleNavGroups = navGroups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => !item.permission || permissions.includes(item.permission)),
+    }))
+    .filter((group) => group.items.length > 0);
+
+  return (
+    <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-4" aria-label="主导航">
+      <div className="space-y-5">
+        {visibleNavGroups.map((group) => (
+          <section key={group.label}>
+            <p className="px-3 pb-2 text-xs font-semibold text-muted-foreground">{group.label}</p>
+            <ul className="space-y-1">
+              {group.items.map((item) => {
+                const Icon = iconMap[item.icon];
+                const isActive = isActivePath(pathname, item.href);
+
+                return (
+                  <li key={item.href}>
+                    <Link
+                      href={item.href}
+                      aria-current={isActive ? "page" : undefined}
+                      className={cn(
+                        "group flex min-h-11 items-center gap-3 rounded-md px-3 text-sm transition-colors",
+                        isActive
+                          ? "bg-primary text-primary-foreground shadow-sm"
+                          : "text-foreground hover:bg-secondary hover:text-primary",
+                      )}
+                    >
+                      <Icon
+                        className={cn(
+                          "size-4 shrink-0 transition-colors",
+                          isActive ? "text-primary-foreground" : "text-muted-foreground group-hover:text-primary",
+                        )}
+                        aria-hidden="true"
+                      />
+                      <span className="min-w-0 truncate font-medium">{item.label}</span>
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </section>
+        ))}
+      </div>
+    </nav>
+  );
+}