feat: move settings creation flows into dialogs

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">