feat: wire auth and CRUD UI to APIs

modules/shared/components/AppShell.tsx

@@ -0,0 +1,159 @@
+import Link from "next/link";
+import {
+  Bell,
+  BedDouble,
+  ClipboardCheck,
+  HeartPulse,
+  Home,
+  LayoutDashboard,
+  Radio,
+  Settings,
+  ShieldAlert,
+  Stethoscope,
+  TabletSmartphone,
+  Users,
+  Wrench,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import type { Permission, PublicAccount } from "@/modules/core/types";
+import { SignOutButton } from "@/modules/auth/components/SignOutButton";
+
+type NavItem = {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+const navItems: NavItem[] = [
+  {
+    href: "/app/dashboard",
+    label: "运营看板",
+    icon: LayoutDashboard,
+  },
+  {
+    href: "/app/elders",
+    label: "老人档案",
+    icon: Users,
+  },
+  {
+    href: "/app/beds",
+    label: "床位房间",
+    icon: BedDouble,
+  },
+  {
+    href: "/app/health",
+    label: "健康照护",
+    icon: HeartPulse,
+  },
+  {
+    href: "/app/care",
+    label: "护理服务",
+    icon: ClipboardCheck,
+  },
+  {
+    href: "/app/emergency",
+    label: "安全应急",
+    icon: ShieldAlert,
+  },
+  {
+    href: "/app/devices",
+    label: "设备运维",
+    icon: Wrench,
+  },
+  {
+    href: "/app/notices",
+    label: "公告通知",
+    icon: Bell,
+  },
+  {
+    href: "/app/alerts",
+    label: "规则预警",
+    icon: Radio,
+  },
+  {
+    href: "/app/family",
+    label: "家属服务",
+    icon: TabletSmartphone,
+  },
+  {
+    href: "/app/settings",
+    label: "权限设置",
+    icon: Settings,
+  },
+];
+
+type AppShellProps = {
+  children: React.ReactNode;
+  account: PublicAccount;
+  permissions: Permission[];
+};
+
+export function AppShell({ children, account, permissions }: AppShellProps): React.ReactElement {
+  const canCreateElder = permissions.includes("elder:create");
+
+  return (
+    <div className="flex min-h-svh items-stretch bg-background text-foreground">
+      <aside className="hidden w-64 shrink-0 border-r bg-white/78 backdrop-blur xl:block">
+        <div className="flex h-full min-h-0 flex-col">
+          <Link href="/app/dashboard" className="flex min-h-16 items-center gap-3 border-b px-5">
+            <span className="inline-flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <Stethoscope className="size-5" aria-hidden="true" />
+            </span>
+            <span>
+              <span className="block text-base font-semibold">TeaTea 康护</span>
+            </span>
+          </Link>
+
+          <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-4" aria-label="主导航">
+            <ul className="space-y-1">
+              {navItems.map((item) => (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className="group flex min-h-11 items-center gap-3 rounded-md px-3 text-sm transition-colors hover:bg-secondary"
+                  >
+                    <item.icon
+                      className="size-4 shrink-0 text-muted-foreground group-hover:text-primary"
+                      aria-hidden="true"
+                    />
+                    <span className="min-w-0 truncate font-medium">{item.label}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </aside>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-20 flex min-h-14 items-center justify-between border-b bg-background/88 px-4 backdrop-blur md:px-8">
+          <div className="flex items-center gap-3">
+            <span className="inline-flex size-10 items-center justify-center rounded-md bg-primary text-primary-foreground xl:hidden">
+              <Stethoscope className="size-5" aria-hidden="true" />
+            </span>
+            <div>
+              <p className="text-sm font-medium">工作台</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="hidden text-right sm:block">
+              <p className="text-sm font-medium">{account.name}</p>
+              <p className="text-xs text-muted-foreground">{account.email}</p>
+            </div>
+            <Button size="sm" disabled={!canCreateElder}>
+              <Home className="size-4" aria-hidden="true" />
+              入住
+            </Button>
+            <SignOutButton />
+          </div>
+        </header>
+
+        <main className="min-h-0 flex-1 overflow-y-auto px-4 py-5 md:px-8">{children}</main>
+      </div>
+    </div>
+  );
+}
+
+export { navItems };