feat: move settings creation flows into dialogs

modules/settings/components/OrganizationDetailClient.tsx

@@ -10,6 +10,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input";
 import type { ApiResult } from "@/modules/core/server/api";
 import type { Organization, OrganizationInvitation, RoleDefinition } from "@/modules/core/types";
+import { getInviteHref, OrganizationInviteDialog } from "@/modules/settings/components/OrganizationInviteDialog";
 
 type OrganizationDetailClientProps = {
   invitations: OrganizationInvitation[];
@@ -17,21 +18,15 @@ type OrganizationDetailClientProps = {
   roles: RoleDefinition[];
 };
 
-function getInviteHref(token: string): string {
-  return `/register?invite=${encodeURIComponent(token)}`;
-}
-
 export function OrganizationDetailClient({
   invitations,
   organization,
   roles,
 }: OrganizationDetailClientProps): React.ReactElement {
   const router = useRouter();
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
   const [settingsMessage, setSettingsMessage] = useState("");
-  const [inviteMessage, setInviteMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
-  const organizationRoles = roles.filter((role) => role.scope === "organization" && role.organizationId === organization.id && role.isEnabled);
-  const defaultRoleId = organizationRoles.find((role) => role.key === "caregiver")?.id ?? organizationRoles[0]?.id ?? "";
 
   async function handleSettingsSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
@@ -64,32 +59,6 @@ export function OrganizationDetailClient({
     router.refresh();
   }
 
-  async function handleInviteSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
-    event.preventDefault();
-    setInviteMessage("");
-    setIsPending(true);
-    const formData = new FormData(event.currentTarget);
-    const response = await fetch(`/api/organizations/${organization.id}/invitations`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        email: String(formData.get("email") ?? ""),
-        roleId: String(formData.get("roleId") ?? ""),
-      }),
-    });
-    const result = (await response.json()) as ApiResult<{ invitation: OrganizationInvitation }>;
-    setIsPending(false);
-
-    if (!result.success) {
-      setInviteMessage(result.reason);
-      return;
-    }
-
-    setInviteMessage(`${result.reason}：${getInviteHref(result.invitation.token)}`);
-    event.currentTarget.reset();
-    router.refresh();
-  }
-
   return (
     <div className="grid gap-5 xl:grid-cols-[0.95fr_1.05fr]">
       <Card>
@@ -169,36 +138,17 @@ export function OrganizationDetailClient({
       </Card>
 
       <Card>
-        <CardHeader>
-          <CardTitle>机构邀请</CardTitle>
-          <CardDescription>生成邀请链接后发送给成员；可限定邮箱，也可生成通用邀请。</CardDescription>
+        <CardHeader className="gap-4 md:flex-row md:items-start md:justify-between">
+          <div>
+            <CardTitle>机构邀请</CardTitle>
+            <CardDescription>生成邀请链接后发送给成员；可限定邮箱，也可生成通用邀请。</CardDescription>
+          </div>
+          <Button onClick={() => setIsInviteOpen(true)} type="button">
+            <Send className="size-4" aria-hidden="true" />
+            发起邀请
+          </Button>
         </CardHeader>
         <CardContent className="grid gap-4">
-          <form className="grid gap-3 md:grid-cols-[1fr_1fr_auto]" onSubmit={handleInviteSubmit}>
-            <Input name="email" placeholder="邮箱，可留空" type="email" />
-            <select
-              className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-              defaultValue={defaultRoleId}
-              name="roleId"
-              required
-            >
-              {organizationRoles.map((role) => (
-                <option key={role.id} value={role.id}>
-                  {role.label}
-                </option>
-              ))}
-            </select>
-            <Button disabled={isPending || !defaultRoleId} type="submit">
-              <Send className="size-4" aria-hidden="true" />
-              生成邀请
-            </Button>
-          </form>
-          {inviteMessage ? (
-            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
-              {inviteMessage}
-            </p>
-          ) : null}
-
           <div className="overflow-x-auto rounded-md border">
             <table className="w-full min-w-[720px] text-sm">
               <thead className="bg-secondary text-left text-xs text-muted-foreground">
@@ -250,6 +200,12 @@ export function OrganizationDetailClient({
           </div>
         </CardContent>
       </Card>
+      <OrganizationInviteDialog
+        onClose={() => setIsInviteOpen(false)}
+        open={isInviteOpen}
+        organization={organization}
+        roles={roles}
+      />
     </div>
   );
 }

modules/settings/components/OrganizationInviteDialog.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { FormEvent, useMemo, useState } from "react";
+import { Copy, Send } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import type { ApiResult } from "@/modules/core/server/api";
+import type { Organization, OrganizationInvitation, RoleDefinition } from "@/modules/core/types";
+
+type OrganizationInviteDialogProps = {
+  open: boolean;
+  organization: Organization;
+  roles: RoleDefinition[];
+  onClose: () => void;
+};
+
+export function getInviteHref(token: string): string {
+  return `/register?invite=${encodeURIComponent(token)}`;
+}
+
+export function OrganizationInviteDialog({
+  open,
+  organization,
+  roles,
+  onClose,
+}: OrganizationInviteDialogProps): React.ReactElement {
+  const router = useRouter();
+  const [message, setMessage] = useState("");
+  const [lastInviteHref, setLastInviteHref] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const organizationRoles = useMemo(
+    () => roles.filter((role) => role.scope === "organization" && role.organizationId === organization.id && role.isEnabled),
+    [organization.id, roles],
+  );
+  const defaultRoleId = organizationRoles.find((role) => role.key === "caregiver")?.id ?? organizationRoles[0]?.id ?? "";
+
+  function closeDialog(): void {
+    if (isPending) {
+      return;
+    }
+
+    setMessage("");
+    setLastInviteHref("");
+    onClose();
+  }
+
+  async function handleInviteSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setMessage("");
+    setLastInviteHref("");
+    setIsPending(true);
+    const formData = new FormData(event.currentTarget);
+    const response = await fetch(`/api/organizations/${organization.id}/invitations`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        email: String(formData.get("email") ?? ""),
+        roleId: String(formData.get("roleId") ?? ""),
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ invitation: OrganizationInvitation }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    const inviteHref = getInviteHref(result.invitation.token);
+    setMessage(result.reason);
+    setLastInviteHref(inviteHref);
+    event.currentTarget.reset();
+    router.refresh();
+  }
+
+  return (
+    <Dialog
+      className="max-w-xl"
+      description={`生成 ${organization.name} 的邀请链接，可限定邮箱并指定入组角色。`}
+      onClose={closeDialog}
+      open={open}
+      title="发起机构邀请"
+    >
+      <form className="grid gap-4" onSubmit={handleInviteSubmit}>
+        <label className="grid gap-2 text-sm">
+          <span className="font-medium">邮箱</span>
+          <Input name="email" placeholder="可留空生成通用邀请" type="email" />
+        </label>
+        <label className="grid gap-2 text-sm">
+          <span className="font-medium">角色</span>
+          <select
+            className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+            defaultValue={defaultRoleId}
+            disabled={organizationRoles.length === 0}
+            key={organization.id}
+            name="roleId"
+            required
+          >
+            {organizationRoles.map((role) => (
+              <option key={role.id} value={role.id}>
+                {role.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        {message ? (
+          <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+            {message}
+          </p>
+        ) : null}
+        {lastInviteHref ? (
+          <div className="flex flex-col gap-2 rounded-md border bg-secondary/20 p-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+            <span className="break-all text-muted-foreground">{lastInviteHref}</span>
+            <Button
+              onClick={() => void navigator.clipboard.writeText(lastInviteHref)}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <Copy className="size-4" aria-hidden="true" />
+              复制
+            </Button>
+          </div>
+        ) : null}
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <Button disabled={isPending} onClick={closeDialog} type="button" variant="outline">
+            取消
+          </Button>
+          <Button disabled={isPending || !defaultRoleId} type="submit">
+            <Send className="size-4" aria-hidden="true" />
+            生成邀请
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}

modules/settings/components/OrganizationManagementClient.tsx

@@ -1,21 +1,35 @@
 "use client";
 
 import { FormEvent, useState } from "react";
-import { Pencil, Plus, Power } from "lucide-react";
+import { Pencil, Plus, Power, Send } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import type { ApiResult } from "@/modules/core/server/api";
-import type { Organization } from "@/modules/core/types";
+import type { Organization, RoleDefinition } from "@/modules/core/types";
+import { OrganizationInviteDialog } from "@/modules/settings/components/OrganizationInviteDialog";
 
 export function OrganizationManagementClient(): React.ReactElement {
   const router = useRouter();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
 
+  function openCreateDialog(): void {
+    setMessage("");
+    setIsCreateOpen(true);
+  }
+
+  function closeCreateDialog(): void {
+    if (isPending) {
+      return;
+    }
+
+    setIsCreateOpen(false);
+  }
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
     setMessage("");
@@ -38,42 +52,61 @@ export function OrganizationManagementClient(): React.ReactElement {
     }
 
     setMessage(result.reason);
+    setIsCreateOpen(false);
     event.currentTarget.reset();
     router.refresh();
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>新增机构</CardTitle>
-        <CardDescription>创建后会自动初始化机构内置角色。</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form className="grid gap-3 md:grid-cols-[1fr_1fr_auto]" onSubmit={handleSubmit}>
+    <>
+      <Button onClick={openCreateDialog} type="button">
+        <Plus className="size-4" aria-hidden="true" />
+        新增机构
+      </Button>
+      <Dialog
+        className="max-w-xl"
+        description="创建后会自动初始化机构内置角色。"
+        onClose={closeCreateDialog}
+        open={isCreateOpen}
+        title="新增机构"
+      >
+        <form className="grid gap-4" onSubmit={handleSubmit}>
           <Input name="name" placeholder="机构名称" required />
           <Input name="slug" placeholder="机构标识，可留空" />
-          <Button disabled={isPending} type="submit">
-            <Plus className="size-4" aria-hidden="true" />
-            新增机构
-          </Button>
+          {message ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {message}
+            </p>
+          ) : null}
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={closeCreateDialog} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending} type="submit">
+              <Plus className="size-4" aria-hidden="true" />
+              新增机构
+            </Button>
+          </div>
         </form>
-        {message ? (
-          <p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
-            {message}
-          </p>
-        ) : null}
-      </CardContent>
-    </Card>
+      </Dialog>
+    </>
   );
 }
 
 type OrganizationRowActionsProps = {
+  canInvite: boolean;
   organization: Organization;
+  roles: RoleDefinition[];
 };
 
-export function OrganizationRowActions({ organization }: OrganizationRowActionsProps): React.ReactElement {
+export function OrganizationRowActions({
+  canInvite,
+  organization,
+  roles,
+}: OrganizationRowActionsProps): React.ReactElement {
   const router = useRouter();
   const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isInviteOpen, setIsInviteOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
 
@@ -131,6 +164,12 @@ export function OrganizationRowActions({ organization }: OrganizationRowActionsP
         <Pencil className="size-4" aria-hidden="true" />
         编辑
       </Button>
+      {canInvite ? (
+        <Button onClick={() => setIsInviteOpen(true)} size="sm" type="button" variant="outline">
+          <Send className="size-4" aria-hidden="true" />
+          邀请
+        </Button>
+      ) : null}
       {organization.status === "disabled" ? (
         <Button
           disabled={isPending}
@@ -189,6 +228,12 @@ export function OrganizationRowActions({ organization }: OrganizationRowActionsP
           </div>
         </form>
       </Dialog>
+      <OrganizationInviteDialog
+        onClose={() => setIsInviteOpen(false)}
+        open={isInviteOpen}
+        organization={organization}
+        roles={roles}
+      />
     </div>
   );
 }

modules/settings/components/RoleManagementClient.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { FormEvent, useState } from "react";
+import { FormEvent, useMemo, useState } from "react";
 import { Pencil, Plus, Power } from "lucide-react";
 import { useRouter } from "next/navigation";
 
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import type { ApiResult } from "@/modules/core/server/api";
@@ -22,11 +22,149 @@ type RoleManagementClientProps = {
   permissions: PermissionDefinition[];
 };
 
+type PermissionGroup = {
+  category: string;
+  permissions: PermissionDefinition[];
+};
+
+type PermissionTreeProps = {
+  permissions: PermissionDefinition[];
+  selectedPermissions: Permission[];
+  onChange: (permissions: Permission[]) => void;
+};
+
+function groupPermissions(permissions: PermissionDefinition[]): PermissionGroup[] {
+  const groups = new Map<string, PermissionDefinition[]>();
+
+  for (const permission of permissions) {
+    const currentGroup = groups.get(permission.category) ?? [];
+    currentGroup.push(permission);
+    groups.set(permission.category, currentGroup);
+  }
+
+  return Array.from(groups.entries()).map(([category, groupPermissions]) => ({
+    category,
+    permissions: groupPermissions,
+  }));
+}
+
+function orderSelectedPermissions(permissions: PermissionDefinition[], selectedSet: ReadonlySet<Permission>): Permission[] {
+  return permissions.filter((permission) => selectedSet.has(permission.id)).map((permission) => permission.id);
+}
+
+function PermissionTree({
+  permissions,
+  selectedPermissions,
+  onChange,
+}: PermissionTreeProps): React.ReactElement {
+  const groups = useMemo(() => groupPermissions(permissions), [permissions]);
+  const selectedSet = useMemo(() => new Set(selectedPermissions), [selectedPermissions]);
+
+  function togglePermission(permissionId: Permission, isChecked: boolean): void {
+    const nextSelected = new Set(selectedSet);
+    if (isChecked) {
+      nextSelected.add(permissionId);
+    } else {
+      nextSelected.delete(permissionId);
+    }
+
+    onChange(orderSelectedPermissions(permissions, nextSelected));
+  }
+
+  function toggleCategory(groupPermissions: PermissionDefinition[], isChecked: boolean): void {
+    const nextSelected = new Set(selectedSet);
+    for (const permission of groupPermissions) {
+      if (isChecked) {
+        nextSelected.add(permission.id);
+      } else {
+        nextSelected.delete(permission.id);
+      }
+    }
+
+    onChange(orderSelectedPermissions(permissions, nextSelected));
+  }
+
+  return (
+    <div className="grid gap-3">
+      <div className="flex items-center justify-between gap-3 rounded-md border bg-secondary/35 px-3 py-2 text-sm">
+        <span className="font-medium">权限树</span>
+        <Badge variant="secondary">
+          {selectedPermissions.length}/{permissions.length}
+        </Badge>
+      </div>
+      <div className="grid gap-3">
+        {groups.map((group) => {
+          const selectedCount = group.permissions.filter((permission) => selectedSet.has(permission.id)).length;
+          const isAllSelected = selectedCount === group.permissions.length && group.permissions.length > 0;
+
+          return (
+            <div className="rounded-md border bg-card" key={group.category}>
+              <label className="flex items-center justify-between gap-3 border-b px-3 py-3 text-sm">
+                <span className="flex min-w-0 items-center gap-3">
+                  <input
+                    checked={isAllSelected}
+                    className="size-4 rounded border-input"
+                    onChange={(event) => toggleCategory(group.permissions, event.target.checked)}
+                    type="checkbox"
+                  />
+                  <span>
+                    <span className="block font-medium">{group.category}</span>
+                    <span className="block text-xs text-muted-foreground">
+                      已选 {selectedCount} / {group.permissions.length}
+                    </span>
+                  </span>
+                </span>
+                <Badge variant={selectedCount > 0 ? "success" : "secondary"}>{selectedCount}</Badge>
+              </label>
+              <div className="grid gap-2 bg-secondary/15 p-3 md:grid-cols-2">
+                {group.permissions.map((permission) => (
+                  <label
+                    className="flex min-h-16 items-start gap-3 rounded-md border bg-background p-3 text-sm transition-colors hover:bg-secondary/50"
+                    key={permission.id}
+                  >
+                    <input
+                      checked={selectedSet.has(permission.id)}
+                      className="mt-1 size-4 rounded border-input"
+                      onChange={(event) => togglePermission(permission.id, event.target.checked)}
+                      type="checkbox"
+                    />
+                    <span className="min-w-0">
+                      <span className="block font-medium">{permission.label}</span>
+                      <span className="block break-all text-xs text-muted-foreground">{permission.id}</span>
+                      <span className="mt-1 block text-xs text-muted-foreground">{permission.description}</span>
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 export function RoleManagementClient({ permissions }: RoleManagementClientProps): React.ReactElement {
   const router = useRouter();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [selectedPermissions, setSelectedPermissions] = useState<Permission[]>([]);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
 
+  function openCreateDialog(): void {
+    setMessage("");
+    setSelectedPermissions([]);
+    setIsCreateOpen(true);
+  }
+
+  function closeCreateDialog(): void {
+    if (isPending) {
+      return;
+    }
+
+    setIsCreateOpen(false);
+  }
+
   async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
     setMessage("");
@@ -39,7 +177,7 @@ export function RoleManagementClient({ permissions }: RoleManagementClientProps)
         label: String(formData.get("label") ?? ""),
         key: String(formData.get("key") ?? ""),
         description: String(formData.get("description") ?? ""),
-        permissions: formData.getAll("permissions").map(String),
+        permissions: selectedPermissions,
       }),
     });
     const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
@@ -51,46 +189,53 @@ export function RoleManagementClient({ permissions }: RoleManagementClientProps)
     }
 
     setMessage(result.reason);
+    setSelectedPermissions([]);
+    setIsCreateOpen(false);
     event.currentTarget.reset();
     router.refresh();
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>新增角色</CardTitle>
-        <CardDescription>角色由系统注册权限点组合而成。</CardDescription>
-      </CardHeader>
-      <CardContent>
+    <>
+      <Button onClick={openCreateDialog} type="button">
+        <Plus className="size-4" aria-hidden="true" />
+        新增角色
+      </Button>
+      <Dialog
+        className="max-w-5xl"
+        description="角色由系统注册权限点组合而成。"
+        onClose={closeCreateDialog}
+        open={isCreateOpen}
+        title="新增角色"
+      >
         <form className="grid gap-4" onSubmit={handleSubmit}>
           <div className="grid gap-3 md:grid-cols-3">
             <Input name="label" placeholder="角色名称" required />
             <Input name="key" placeholder="角色标识，可留空" />
             <Input name="description" placeholder="角色说明" />
           </div>
-          <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
-            {permissions.map((permission) => (
-              <label className="flex items-start gap-2 rounded-md border p-3 text-sm" key={permission.id}>
-                <input className="mt-1" name="permissions" type="checkbox" value={permission.id} />
-                <span>
-                  <span className="block font-medium">{permission.label}</span>
-                  <span className="block text-xs text-muted-foreground">{permission.id}</span>
-                </span>
-              </label>
-            ))}
+          <PermissionTree
+            onChange={setSelectedPermissions}
+            permissions={permissions}
+            selectedPermissions={selectedPermissions}
+          />
+          {message ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {message}
+            </p>
+          ) : null}
+          <div className="flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={closeCreateDialog} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending} type="submit">
+              <Plus className="size-4" aria-hidden="true" />
+              新增角色
+            </Button>
           </div>
-          <Button className="w-fit" disabled={isPending} type="submit">
-            <Plus className="size-4" aria-hidden="true" />
-            新增角色
-          </Button>
         </form>
-        {message ? (
-          <p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
-            {message}
-          </p>
-        ) : null}
-      </CardContent>
-    </Card>
+      </Dialog>
+    </>
   );
 }
 
@@ -102,9 +247,24 @@ type RoleRowActionsProps = {
 export function RoleRowActions({ permissions, role }: RoleRowActionsProps): React.ReactElement {
   const router = useRouter();
   const [isEditOpen, setIsEditOpen] = useState(false);
+  const [selectedPermissions, setSelectedPermissions] = useState<Permission[]>(role.permissions);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
 
+  function openEditDialog(): void {
+    setMessage("");
+    setSelectedPermissions(role.permissions);
+    setIsEditOpen(true);
+  }
+
+  function closeEditDialog(): void {
+    if (isPending) {
+      return;
+    }
+
+    setIsEditOpen(false);
+  }
+
   async function updateRole(payload: Record<string, string | boolean | string[]>): Promise<void> {
     setMessage("");
     setIsPending(true);
@@ -151,7 +311,7 @@ export function RoleRowActions({ permissions, role }: RoleRowActionsProps): Reac
       key: String(formData.get("key") ?? ""),
       description: String(formData.get("description") ?? ""),
       isEnabled: String(formData.get("isEnabled") ?? "") === "true",
-      permissions: formData.getAll("permissions").map(String),
+      permissions: selectedPermissions,
     });
   }
 
@@ -161,7 +321,7 @@ export function RoleRowActions({ permissions, role }: RoleRowActionsProps): Reac
 
   return (
     <div className="flex items-center justify-end gap-2">
-      <Button onClick={() => setIsEditOpen(true)} size="sm" type="button" variant="outline">
+      <Button onClick={openEditDialog} size="sm" type="button" variant="outline">
         <Pencil className="size-4" aria-hidden="true" />
         编辑
       </Button>
@@ -183,8 +343,9 @@ export function RoleRowActions({ permissions, role }: RoleRowActionsProps): Reac
         </Button>
       )}
       <Dialog
+        className="max-w-5xl"
         description="编辑自定义角色的名称、说明、状态和权限点。"
-        onClose={() => setIsEditOpen(false)}
+        onClose={closeEditDialog}
         open={isEditOpen}
         title="编辑角色"
       >
@@ -214,30 +375,18 @@ export function RoleRowActions({ permissions, role }: RoleRowActionsProps): Reac
               <option value="false">停用</option>
             </select>
           </label>
-          <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
-            {permissions.map((permission) => (
-              <label className="flex items-start gap-2 rounded-md border p-3 text-sm" key={permission.id}>
-                <input
-                  className="mt-1"
-                  defaultChecked={role.permissions.includes(permission.id)}
-                  name="permissions"
-                  type="checkbox"
-                  value={permission.id}
-                />
-                <span>
-                  <span className="block font-medium">{permission.label}</span>
-                  <span className="block text-xs text-muted-foreground">{permission.id}</span>
-                </span>
-              </label>
-            ))}
-          </div>
+          <PermissionTree
+            onChange={setSelectedPermissions}
+            permissions={permissions}
+            selectedPermissions={selectedPermissions}
+          />
           {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 onClick={() => setIsEditOpen(false)} type="button" variant="outline">
+            <Button onClick={closeEditDialog} type="button" variant="outline">
               取消
             </Button>
             <Button disabled={isPending} type="submit">

modules/settings/components/UserManagementClient.tsx

@@ -13,6 +13,7 @@ import type { ApiResult } from "@/modules/core/server/api";
 import type { JoinRequest, Organization, PublicAccount, RoleDefinition } from "@/modules/core/types";
 
 type UserManagementClientProps = {
+  canManageAccounts?: boolean;
   organizations: Organization[];
   roles: RoleDefinition[];
   joinRequests: JoinRequest[];
@@ -27,11 +28,13 @@ function getDefaultOrganizationId(organizations: Organization[]): string {
 }
 
 export function UserManagementClient({
+  canManageAccounts = false,
   organizations,
   roles,
   joinRequests,
 }: UserManagementClientProps): React.ReactElement {
   const router = useRouter();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [selectedOrganizationId, setSelectedOrganizationId] = useState(() => getDefaultOrganizationId(organizations));
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
@@ -42,8 +45,26 @@ export function UserManagementClient({
   );
   const pendingJoinRequests = joinRequests.filter((request) => request.status === "pending");
 
+  function openCreateDialog(): void {
+    setMessage("");
+    setIsCreateOpen(true);
+  }
+
+  function closeCreateDialog(): void {
+    if (isPending) {
+      return;
+    }
+
+    setIsCreateOpen(false);
+  }
+
   async function handleCreateAccount(event: FormEvent<HTMLFormElement>): Promise<void> {
     event.preventDefault();
+    if (!canManageAccounts) {
+      setMessage("当前角色无权创建用户");
+      return;
+    }
+
     setMessage("");
     setIsPending(true);
 
@@ -68,11 +89,17 @@ export function UserManagementClient({
     }
 
     setMessage(result.reason);
+    setIsCreateOpen(false);
     event.currentTarget.reset();
     router.refresh();
   }
 
   async function reviewJoinRequest(requestId: string, decision: "approved" | "rejected", roleId: string): Promise<void> {
+    if (!canManageAccounts) {
+      setMessage("当前角色无权审批加入申请");
+      return;
+    }
+
     setMessage("");
     setIsPending(true);
     const response = await fetch(`/api/settings/join-requests/${requestId}`, {
@@ -95,63 +122,37 @@ export function UserManagementClient({
   return (
     <section className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
       <Card>
-        <CardHeader>
-          <CardTitle>创建机构用户</CardTitle>
-          <CardDescription>管理员创建账号后立即分配到机构和角色。</CardDescription>
+        <CardHeader className="gap-4 md:flex-row md:items-start md:justify-between">
+          <div>
+            <CardTitle>用户操作</CardTitle>
+            <CardDescription>创建账号和审批入口已收进弹窗，列表区域保持可扫描。</CardDescription>
+          </div>
+          <Button
+            disabled={!canManageAccounts || organizations.length === 0}
+            onClick={openCreateDialog}
+            type="button"
+          >
+            <Plus className="size-4" aria-hidden="true" />
+            创建用户
+          </Button>
         </CardHeader>
-        <CardContent>
-          <form className="grid gap-3" onSubmit={handleCreateAccount}>
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">机构</span>
-              <select
-                className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-                name="organizationId"
-                onChange={(event) => setSelectedOrganizationId(event.target.value)}
-                value={selectedOrganizationId}
-              >
-                {organizations.map((organization) => (
-                  <option key={organization.id} value={organization.id}>
-                    {organization.name}
-                  </option>
-                ))}
-              </select>
-            </label>
-
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">角色</span>
-              <select
-                className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-                name="roleId"
-                required
-              >
-                {organizationRoles.map((role) => (
-                  <option key={role.id} value={role.id}>
-                    {role.label}
-                  </option>
-                ))}
-              </select>
-            </label>
-
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">姓名</span>
-              <Input name="name" required />
-            </label>
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">邮箱</span>
-              <Input name="email" required type="email" />
-            </label>
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">初始密码</span>
-              <Input minLength={6} name="password" required type="password" />
-            </label>
-
-            <Button disabled={isPending || organizationRoles.length === 0} type="submit">
-              <Plus className="size-4" aria-hidden="true" />
-              创建用户
-            </Button>
-          </form>
+        <CardContent className="grid gap-3">
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="rounded-md border bg-secondary/20 p-3">
+              <p className="text-xs text-muted-foreground">可选机构</p>
+              <p className="mt-1 text-2xl font-semibold">{organizations.length}</p>
+            </div>
+            <div className="rounded-md border bg-secondary/20 p-3">
+              <p className="text-xs text-muted-foreground">当前机构角色</p>
+              <p className="mt-1 text-2xl font-semibold">{organizationRoles.length}</p>
+            </div>
+            <div className="rounded-md border bg-secondary/20 p-3">
+              <p className="text-xs text-muted-foreground">待审批</p>
+              <p className="mt-1 text-2xl font-semibold">{pendingJoinRequests.length}</p>
+            </div>
+          </div>
           {message ? (
-            <p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
               {message}
             </p>
           ) : null}
@@ -191,7 +192,7 @@ export function UserManagementClient({
                     ))}
                   </select>
                   <Button
-                    disabled={isPending || !defaultRoleId}
+                    disabled={isPending || !defaultRoleId || !canManageAccounts}
                     onClick={() => {
                       const element = document.getElementById(`role-${request.id}`);
                       const roleId = element instanceof HTMLSelectElement ? element.value : defaultRoleId;
@@ -204,7 +205,7 @@ export function UserManagementClient({
                     通过
                   </Button>
                   <Button
-                    disabled={isPending}
+                    disabled={isPending || !canManageAccounts}
                     onClick={() => void reviewJoinRequest(request.id, "rejected", "")}
                     size="sm"
                     type="button"
@@ -220,6 +221,76 @@ export function UserManagementClient({
           {pendingJoinRequests.length === 0 ? <p className="text-sm text-muted-foreground">暂无待审批申请</p> : null}
         </CardContent>
       </Card>
+
+      <Dialog
+        description="管理员创建账号后立即分配到机构和角色。"
+        onClose={closeCreateDialog}
+        open={isCreateOpen}
+        title="创建机构用户"
+      >
+        <form className="grid gap-3" onSubmit={handleCreateAccount}>
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">机构</span>
+            <select
+              className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+              name="organizationId"
+              onChange={(event) => setSelectedOrganizationId(event.target.value)}
+              value={selectedOrganizationId}
+            >
+              {organizations.map((organization) => (
+                <option key={organization.id} value={organization.id}>
+                  {organization.name}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">角色</span>
+            <select
+              className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+              disabled={organizationRoles.length === 0}
+              key={selectedOrganizationId}
+              name="roleId"
+              required
+            >
+              {organizationRoles.map((role) => (
+                <option key={role.id} value={role.id}>
+                  {role.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">姓名</span>
+            <Input name="name" required />
+          </label>
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">邮箱</span>
+            <Input name="email" required type="email" />
+          </label>
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">初始密码</span>
+            <Input minLength={6} name="password" required type="password" />
+          </label>
+
+          <div className="flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={closeCreateDialog} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending || organizationRoles.length === 0} type="submit">
+              <Plus className="size-4" aria-hidden="true" />
+              创建用户
+            </Button>
+          </div>
+        </form>
+        {message ? (
+          <p className="mt-3 rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+            {message}
+          </p>
+        ) : null}
+      </Dialog>
     </section>
   );
 }