feat: add real account workspace controls

modules/shared/components/AccountMenu.tsx

@@ -1,29 +1,41 @@
 "use client";
 
-import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Ellipsis, LogOut, Settings } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { Building2, Check, ChevronUp, Ellipsis, Link2, LogOut, Settings } from "lucide-react";
+import { FormEvent, useEffect, useRef, useState } from "react";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import type { Permission, PublicAccount } from "@/modules/core/types";
+import { Dialog } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import type { ApiResult } from "@/modules/core/server/api";
+import type { AccountOrganizationOption, Organization, PublicAccount } from "@/modules/core/types";
 import { UserAvatar } from "@/modules/shared/components/UserAvatar";
+import { cn } from "@/lib/utils";
 
 type AccountMenuProps = {
   account: PublicAccount;
-  permissions: Permission[];
+  organization?: Organization;
+  organizations: AccountOrganizationOption[];
 };
 
-export function AccountMenu({ account, permissions }: AccountMenuProps): React.ReactElement {
+export function AccountMenu({
+  account,
+  organization,
+  organizations,
+}: AccountMenuProps): React.ReactElement {
   const router = useRouter();
   const menuRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
+  const [isOrganizationOpen, setIsOrganizationOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isSignOutConfirmOpen, setIsSignOutConfirmOpen] = useState(false);
   const [isPending, setIsPending] = useState(false);
-  const canReadAccounts = permissions.includes("account:read");
-  const settingsHref = canReadAccounts ? `/app/settings/users?q=${encodeURIComponent(account.email)}` : "/app/settings/global";
+  const [message, setMessage] = useState("");
+  const currentOrganization = organizations.find((item) => item.isActive) ?? organizations[0];
 
   useEffect(() => {
-    if (!isOpen) {
+    if (!isOpen && !isOrganizationOpen) {
       return;
     }
 
@@ -31,12 +43,14 @@ export function AccountMenu({ account, permissions }: AccountMenuProps): React.R
       const target = event.target;
       if (target instanceof Node && !menuRef.current?.contains(target)) {
         setIsOpen(false);
+        setIsOrganizationOpen(false);
       }
     }
 
     function handleKeyDown(event: KeyboardEvent): void {
       if (event.key === "Escape") {
         setIsOpen(false);
+        setIsOrganizationOpen(false);
       }
     }
 
@@ -47,7 +61,27 @@ export function AccountMenu({ account, permissions }: AccountMenuProps): React.R
       document.removeEventListener("pointerdown", handlePointerDown);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen]);
+  }, [isOpen, isOrganizationOpen]);
+
+  async function handleOrganizationSwitch(organizationId: string): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch("/api/auth/organization", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ organizationId }),
+    });
+    const result = (await response.json()) as ApiResult<Record<string, unknown>>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setIsOrganizationOpen(false);
+    router.refresh();
+  }
 
   async function handleSignOut(): Promise<void> {
     setIsPending(true);
@@ -56,8 +90,83 @@ export function AccountMenu({ account, permissions }: AccountMenuProps): React.R
     router.replace("/login");
   }
 
+  async function handleProfileSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setMessage("");
+    setIsPending(true);
+    const formData = new FormData(event.currentTarget);
+    const response = await fetch("/api/account/profile", {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        name: String(formData.get("name") ?? ""),
+        avatarUrl: String(formData.get("avatarUrl") ?? ""),
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ account: PublicAccount }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setMessage(result.reason);
+    router.refresh();
+  }
+
   return (
-    <div className="relative" ref={menuRef}>
+    <div className="relative grid gap-2" ref={menuRef}>
+      <button
+        aria-expanded={isOrganizationOpen}
+        aria-haspopup="menu"
+        className="flex min-h-10 w-full min-w-0 items-center gap-2 rounded-md border bg-card px-3 text-left text-sm transition-colors hover:bg-secondary"
+        disabled={isPending || organizations.length === 0}
+        onClick={() => {
+          setMessage("");
+          setIsOrganizationOpen((current) => !current);
+          setIsOpen(false);
+        }}
+        type="button"
+      >
+        <Building2 className="size-4 shrink-0 text-primary" aria-hidden="true" />
+        <span className="min-w-0 flex-1">
+          <span className="block truncate font-medium">{currentOrganization?.name ?? organization?.name ?? "未选择机构"}</span>
+          <span className="block truncate text-xs text-muted-foreground">
+            {currentOrganization?.slug ? `/${currentOrganization.slug}` : "机构标识未配置"}
+          </span>
+        </span>
+        <ChevronUp className={cn("size-4 shrink-0 text-muted-foreground transition-transform", isOrganizationOpen && "rotate-180")} />
+      </button>
+
+      {isOrganizationOpen ? (
+        <div
+          className="absolute bottom-full left-0 right-0 z-30 mb-2 max-h-80 overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-lg"
+          role="menu"
+        >
+          {organizations.map((item) => (
+            <button
+              className="flex min-h-11 w-full min-w-0 items-center gap-2 rounded-sm px-3 text-left text-sm hover:bg-secondary disabled:opacity-55"
+              disabled={isPending || item.isActive}
+              key={item.id}
+              onClick={() => void handleOrganizationSwitch(item.id)}
+              role="menuitem"
+              type="button"
+            >
+              <Building2 className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-medium">{item.name}</span>
+                <span className="block truncate text-xs text-muted-foreground">
+                  /{item.slug} · {item.roleLabel}
+                </span>
+              </span>
+              {item.isActive ? <Check className="size-4 shrink-0 text-primary" aria-hidden="true" /> : null}
+            </button>
+          ))}
+          {message ? <p className="px-3 py-2 text-xs text-destructive">{message}</p> : null}
+        </div>
+      ) : null}
+
       <div className="flex min-w-0 items-center gap-3 rounded-md bg-secondary/55 p-2">
         <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
         <div className="min-w-0 flex-1">
@@ -68,7 +177,11 @@ export function AccountMenu({ account, permissions }: AccountMenuProps): React.R
           aria-expanded={isOpen}
           aria-haspopup="menu"
           aria-label="打开账号菜单"
-          onClick={() => setIsOpen((current) => !current)}
+          onClick={() => {
+            setMessage("");
+            setIsOpen((current) => !current);
+            setIsOrganizationOpen(false);
+          }}
           size="icon"
           type="button"
           variant="ghost"
@@ -83,27 +196,117 @@ export function AccountMenu({ account, permissions }: AccountMenuProps): React.R
           className="absolute bottom-full right-0 z-30 mb-2 w-52 rounded-md border bg-popover p-1 text-popover-foreground shadow-lg"
           role="menu"
         >
-          <Link
-            className="flex min-h-10 items-center gap-2 rounded-sm px-3 text-sm font-medium hover:bg-secondary"
-            href={settingsHref}
-            onClick={() => setIsOpen(false)}
-            role="menuitem"
-          >
-            <Settings className="size-4 text-muted-foreground" aria-hidden="true" />
-            用户设置
-          </Link>
           <button
-            className="flex min-h-10 w-full items-center gap-2 rounded-sm px-3 text-left text-sm font-medium hover:bg-secondary disabled:opacity-55"
-            disabled={isPending}
-            onClick={handleSignOut}
+            className="flex min-h-10 w-full items-center gap-2 rounded-sm px-3 text-left text-sm font-medium hover:bg-secondary"
+            onClick={() => {
+              setIsOpen(false);
+              setIsSettingsOpen(true);
+              setMessage("");
+            }}
             role="menuitem"
             type="button"
           >
-            <LogOut className="size-4 text-muted-foreground" aria-hidden="true" />
+            <Settings className="size-4 text-muted-foreground" aria-hidden="true" />
+            用户设置
+          </button>
+          <button
+            className="flex min-h-10 w-full items-center gap-2 rounded-sm px-3 text-left text-sm font-medium text-destructive hover:bg-destructive/10 disabled:opacity-55"
+            disabled={isPending}
+            onClick={() => {
+              setIsOpen(false);
+              setIsSignOutConfirmOpen(true);
+            }}
+            role="menuitem"
+            type="button"
+          >
+            <LogOut className="size-4 text-destructive" aria-hidden="true" />
             退出登录
           </button>
         </div>
       ) : null}
+
+      <Dialog
+        className="max-w-2xl"
+        description="管理你的个人资料和第三方登录绑定状态。"
+        onClose={() => {
+          if (!isPending) {
+            setIsSettingsOpen(false);
+            setMessage("");
+          }
+        }}
+        open={isSettingsOpen}
+        title="用户设置"
+      >
+        <form className="grid gap-5" onSubmit={handleProfileSubmit}>
+          <div className="grid gap-4 md:grid-cols-[auto_1fr]">
+            <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="lg" />
+            <div className="grid gap-3">
+              <Input defaultValue={account.name} label="用户名称" name="name" required />
+              <Input defaultValue={account.avatarUrl} label="头像 URL" name="avatarUrl" placeholder="https://..." />
+            </div>
+          </div>
+
+          <section className="rounded-md border p-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <Link2 className="size-4 text-primary" aria-hidden="true" />
+                  <h3 className="text-sm font-semibold">第三方 OIDC 绑定</h3>
+                </div>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {organization?.oidcEnabled ? "当前机构已配置 OIDC 登录入口。" : "当前机构暂未启用 OIDC 登录入口。"}
+                </p>
+              </div>
+              <Badge variant={organization?.oidcEnabled ? "success" : "secondary"}>
+                {organization?.oidcEnabled ? "可接入" : "未启用"}
+              </Badge>
+            </div>
+            <div className="mt-4 rounded-md bg-secondary/55 px-3 py-2 text-sm text-muted-foreground">
+              绑定、解绑和重新授权需要接入 OIDC 回调与绑定记录后启用；当前不会展示虚假的绑定账号。
+            </div>
+          </section>
+
+          {message ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {message}
+            </p>
+          ) : null}
+
+          <div className="flex justify-end gap-2">
+            <Button disabled={isPending} onClick={() => setIsSettingsOpen(false)} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending} type="submit">
+              保存资料
+            </Button>
+          </div>
+        </form>
+      </Dialog>
+
+      <Dialog
+        className="max-w-md"
+        description="退出后需要重新登录才能继续访问工作台。"
+        onClose={() => {
+          if (!isPending) {
+            setIsSignOutConfirmOpen(false);
+          }
+        }}
+        open={isSignOutConfirmOpen}
+        title="确认退出登录"
+      >
+        <div className="grid gap-4">
+          <p className="text-sm text-muted-foreground">确定要退出当前账号吗？</p>
+          <div className="flex justify-end gap-2">
+            <Button disabled={isPending} onClick={() => setIsSignOutConfirmOpen(false)} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending} onClick={() => void handleSignOut()} type="button" variant="destructive">
+              <LogOut className="size-4" aria-hidden="true" />
+              退出登录
+            </Button>
+          </div>
+        </div>
+      </Dialog>
     </div>
   );
 }

modules/shared/components/AppShell.tsx

@@ -1,166 +1,34 @@
 import Link from "next/link";
-import {
-  Bell,
-  BedDouble,
-  Building2,
-  ClipboardCheck,
-  Globe2,
-  HeartPulse,
-  LayoutDashboard,
-  ListChecks,
-  Radio,
-  Settings,
-  ShieldAlert,
-  Stethoscope,
-  TabletSmartphone,
-  Users,
-  Wrench,
-} from "lucide-react";
-import type { LucideIcon } from "lucide-react";
+import { Stethoscope } from "lucide-react";
 
-import type { Permission, PublicAccount } from "@/modules/core/types";
+import type { AccountOrganizationOption, Organization, Permission, PublicAccount } from "@/modules/core/types";
 import { SignOutButton } from "@/modules/auth/components/SignOutButton";
 import { AccountMenu } from "@/modules/shared/components/AccountMenu";
 import { AppBreadcrumbs } from "@/modules/shared/components/AppBreadcrumbs";
+import { AppSidebarNav } from "@/modules/shared/components/AppSidebarNav";
 import { UserAvatar } from "@/modules/shared/components/UserAvatar";
-
-type NavItem = {
-  href: string;
-  label: string;
-  icon: LucideIcon;
-  permission?: Permission;
-};
-
-type NavGroup = {
-  label: string;
-  items: NavItem[];
-};
-
-const navGroups: NavGroup[] = [
-  {
-    label: "运营",
-    items: [
-      {
-        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,
-      },
-    ],
-  },
-  {
-    label: "协同",
-    items: [
-      {
-        href: "/app/devices",
-        label: "设备运维",
-        icon: Wrench,
-      },
-      {
-        href: "/app/notices",
-        label: "公告通知",
-        icon: Bell,
-      },
-      {
-        href: "/app/alerts",
-        label: "规则预警",
-        icon: Radio,
-      },
-      {
-        href: "/app/family",
-        label: "家属服务",
-        icon: TabletSmartphone,
-      },
-    ],
-  },
-  {
-    label: "系统设置",
-    items: [
-      {
-        href: "/app/settings/global",
-        label: "全局配置",
-        icon: Globe2,
-        permission: "platform:manage",
-      },
-      {
-        href: "/app/settings/organizations",
-        label: "机构管理",
-        icon: Building2,
-        permission: "organization:read",
-      },
-      {
-        href: "/app/settings/users",
-        label: "用户管理",
-        icon: Users,
-        permission: "account:read",
-      },
-      {
-        href: "/app/settings/roles",
-        label: "角色权限",
-        icon: Settings,
-        permission: "role:read",
-      },
-      {
-        href: "/app/settings/audit",
-        label: "审计日志",
-        icon: ListChecks,
-        permission: "audit:read",
-      },
-      {
-        href: "/app/settings/status",
-        label: "运行状态",
-        icon: Wrench,
-        permission: "incident:read",
-      },
-    ],
-  },
-];
-
-const navItems: NavItem[] = navGroups.flatMap((group) => group.items);
+import { navItems } from "@/modules/shared/lib/navigation";
 
 type AppShellProps = {
   children: React.ReactNode;
   account: PublicAccount;
+  organization?: Organization;
+  organizations: AccountOrganizationOption[];
   permissions: Permission[];
 };
 
-export function AppShell({ children, account, permissions }: AppShellProps): React.ReactElement {
-  const visibleNavGroups = navGroups
-    .map((group) => ({
-      ...group,
-      items: group.items.filter((item) => !item.permission || permissions.includes(item.permission)),
-    }))
-    .filter((group) => group.items.length > 0);
-
+export function AppShell({
+  children,
+  account,
+  organization,
+  organizations,
+  permissions,
+}: AppShellProps): React.ReactElement {
   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-svh items-stretch overflow-hidden bg-background text-foreground">
+      <aside className="hidden h-svh 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">
+          <Link href="/app/dashboard" className="flex h-16 shrink-0 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>
@@ -169,40 +37,20 @@ export function AppShell({ children, account, permissions }: AppShellProps): Rea
             </span>
           </Link>
 
-          <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) => (
-                      <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>
-                </section>
-              ))}
-            </div>
-          </nav>
+          <AppSidebarNav permissions={permissions} />
 
           <div className="border-t p-3">
-            <AccountMenu account={account} permissions={permissions} />
+            <AccountMenu
+              account={account}
+              organization={organization}
+              organizations={organizations}
+            />
           </div>
         </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 min-h-0 min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-20 flex h-16 shrink-0 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" />

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>
+  );
+}

modules/shared/lib/navigation.ts

@@ -0,0 +1,135 @@
+import type { Permission } from "@/modules/core/types";
+
+export type NavIconKey =
+  | "alerts"
+  | "audit"
+  | "beds"
+  | "care"
+  | "dashboard"
+  | "devices"
+  | "emergency"
+  | "global"
+  | "health"
+  | "notices"
+  | "organizations"
+  | "roles"
+  | "status"
+  | "users";
+
+export type NavItem = {
+  href: string;
+  label: string;
+  icon: NavIconKey;
+  permission?: Permission;
+};
+
+export type NavGroup = {
+  label: string;
+  items: NavItem[];
+};
+
+export const navGroups: NavGroup[] = [
+  {
+    label: "运营",
+    items: [
+      {
+        href: "/app/dashboard",
+        label: "运营看板",
+        icon: "dashboard",
+      },
+      {
+        href: "/app/elders",
+        label: "老人档案",
+        icon: "users",
+      },
+      {
+        href: "/app/beds",
+        label: "床位房间",
+        icon: "beds",
+      },
+      {
+        href: "/app/health",
+        label: "健康照护",
+        icon: "health",
+      },
+      {
+        href: "/app/care",
+        label: "护理服务",
+        icon: "care",
+      },
+      {
+        href: "/app/emergency",
+        label: "安全应急",
+        icon: "emergency",
+      },
+    ],
+  },
+  {
+    label: "协同",
+    items: [
+      {
+        href: "/app/devices",
+        label: "设备运维",
+        icon: "devices",
+      },
+      {
+        href: "/app/notices",
+        label: "公告通知",
+        icon: "notices",
+      },
+      {
+        href: "/app/alerts",
+        label: "规则预警",
+        icon: "alerts",
+      },
+      {
+        href: "/app/family",
+        label: "家属服务",
+        icon: "devices",
+      },
+    ],
+  },
+  {
+    label: "系统设置",
+    items: [
+      {
+        href: "/app/settings/global",
+        label: "全局配置",
+        icon: "global",
+        permission: "platform:manage",
+      },
+      {
+        href: "/app/settings/organizations",
+        label: "机构管理",
+        icon: "organizations",
+        permission: "organization:read",
+      },
+      {
+        href: "/app/settings/users",
+        label: "用户管理",
+        icon: "users",
+        permission: "account:read",
+      },
+      {
+        href: "/app/settings/roles",
+        label: "角色权限",
+        icon: "roles",
+        permission: "role:read",
+      },
+      {
+        href: "/app/settings/audit",
+        label: "审计日志",
+        icon: "audit",
+        permission: "audit:read",
+      },
+      {
+        href: "/app/settings/status",
+        label: "运行状态",
+        icon: "status",
+        permission: "incident:read",
+      },
+    ],
+  },
+];
+
+export const navItems: NavItem[] = navGroups.flatMap((group) => group.items);