feat: add global auth settings and pending users

modules/shared/components/AppShell.tsx

@@ -4,6 +4,7 @@ import {
   BedDouble,
   Building2,
   ClipboardCheck,
+  Globe2,
   HeartPulse,
   Home,
   LayoutDashboard,
@@ -21,11 +22,13 @@ 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";
+import { UserAvatar } from "@/modules/shared/components/UserAvatar";
 
 type NavItem = {
   href: string;
   label: string;
   icon: LucideIcon;
+  permission?: Permission;
 };
 
 type NavGroup = {
@@ -97,30 +100,41 @@ const navGroups: NavGroup[] = [
   {
     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",
       },
     ],
   },
@@ -136,6 +150,12 @@ type AppShellProps = {
 
 export function AppShell({ children, account, permissions }: AppShellProps): React.ReactElement {
   const canCreateElder = permissions.includes("elder:create");
+  const visibleNavGroups = navGroups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => !item.permission || permissions.includes(item.permission)),
+    }))
+    .filter((group) => group.items.length > 0);
 
   return (
     <div className="flex min-h-svh items-stretch bg-background text-foreground">
@@ -152,7 +172,7 @@ export function AppShell({ children, account, permissions }: AppShellProps): Rea
 
           <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-4" aria-label="主导航">
             <div className="space-y-5">
-              {navGroups.map((group) => (
+              {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">
@@ -189,9 +209,12 @@ export function AppShell({ children, account, permissions }: AppShellProps): Rea
             </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 className="hidden items-center gap-2 sm:flex">
+              <div className="text-right">
+                <p className="text-sm font-medium">{account.name}</p>
+                <p className="text-xs text-muted-foreground">{account.email}</p>
+              </div>
+              <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
             </div>
             <Button size="sm" disabled={!canCreateElder}>
               <Home className="size-4" aria-hidden="true" />

modules/shared/components/UserAvatar.tsx

@@ -0,0 +1,63 @@
+import { cn } from "@/lib/utils";
+
+type UserAvatarProps = {
+  name: string;
+  avatarUrl?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+};
+
+const sizeClasses: Record<NonNullable<UserAvatarProps["size"]>, string> = {
+  sm: "size-9 text-xs",
+  md: "size-10 text-sm",
+  lg: "size-14 text-lg",
+};
+
+function getInitial(name: string): string {
+  const trimmedName = name.trim();
+  if (!trimmedName) {
+    return "用";
+  }
+
+  return trimmedName.slice(0, 1).toUpperCase();
+}
+
+function isSupportedAvatarUrl(avatarUrl: string | undefined): avatarUrl is string {
+  if (!avatarUrl) {
+    return false;
+  }
+
+  return avatarUrl.startsWith("https://") || avatarUrl.startsWith("http://") || avatarUrl.startsWith("data:image/");
+}
+
+export function UserAvatar({
+  name,
+  avatarUrl,
+  size = "md",
+  className,
+}: UserAvatarProps): React.ReactElement {
+  const hasAvatar = isSupportedAvatarUrl(avatarUrl);
+
+  return (
+    <span
+      aria-label={`${name || "用户"}头像`}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md border bg-secondary font-semibold text-primary",
+        sizeClasses[size],
+        className,
+      )}
+      role="img"
+      style={
+        hasAvatar
+          ? {
+              backgroundImage: `url(${avatarUrl})`,
+              backgroundPosition: "center",
+              backgroundSize: "cover",
+            }
+          : undefined
+      }
+    >
+      {hasAvatar ? <span className="sr-only">{name}</span> : getInitial(name)}
+    </span>
+  );
+}