feat: split settings management pages

modules/settings/components/IncidentStatusActions.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { CheckCheck, CircleCheck, CircleDot } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { ApiResult } from "@/modules/core/server/api";
+import type { IncidentStatus, SystemIncident } from "@/modules/core/types";
+
+type IncidentStatusActionsProps = {
+  incident: SystemIncident;
+};
+
+type StatusAction = {
+  label: string;
+  status: IncidentStatus;
+  icon: LucideIcon;
+};
+
+const STATUS_ACTIONS: Record<IncidentStatus, StatusAction[]> = {
+  open: [
+    { label: "确认", status: "acknowledged", icon: CircleDot },
+    { label: "解决", status: "resolved", icon: CircleCheck },
+  ],
+  acknowledged: [
+    { label: "解决", status: "resolved", icon: CircleCheck },
+    { label: "关闭", status: "closed", icon: CheckCheck },
+  ],
+  resolved: [{ label: "关闭", status: "closed", icon: CheckCheck }],
+  closed: [],
+};
+
+export function IncidentStatusActions({ incident }: IncidentStatusActionsProps): React.ReactElement {
+  const router = useRouter();
+  const [message, setMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const actions = STATUS_ACTIONS[incident.status];
+
+  async function updateStatus(status: IncidentStatus): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch(`/api/system/incidents/${incident.id}`, {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ status }),
+    });
+    const result = (await response.json()) as ApiResult<{ incident: SystemIncident }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    router.refresh();
+  }
+
+  if (actions.length === 0) {
+    return <span className="block text-right text-xs text-muted-foreground">已关闭</span>;
+  }
+
+  return (
+    <div className="grid justify-end gap-2">
+      <div className="flex items-center justify-end gap-2">
+        {actions.map((action) => (
+          <Button
+            disabled={isPending}
+            key={action.status}
+            onClick={() => void updateStatus(action.status)}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            <action.icon className="size-4" aria-hidden="true" />
+            {action.label}
+          </Button>
+        ))}
+      </div>
+      {message ? <p className="text-right text-xs text-destructive">{message}</p> : null}
+    </div>
+  );
+}

modules/settings/components/OrganizationManagementClient.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { Pencil, Plus, Power } 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";
+
+export function OrganizationManagementClient(): React.ReactElement {
+  const router = useRouter();
+  const [message, setMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setMessage("");
+    setIsPending(true);
+    const formData = new FormData(event.currentTarget);
+    const response = await fetch("/api/organizations", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        name: String(formData.get("name") ?? ""),
+        slug: String(formData.get("slug") ?? ""),
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setMessage(result.reason);
+    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}>
+          <Input name="name" placeholder="机构名称" required />
+          <Input name="slug" placeholder="机构标识，可留空" />
+          <Button 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>
+  );
+}
+
+type OrganizationRowActionsProps = {
+  organization: Organization;
+};
+
+export function OrganizationRowActions({ organization }: OrganizationRowActionsProps): React.ReactElement {
+  const router = useRouter();
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [message, setMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+
+  async function updateOrganization(payload: Record<string, string>): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch(`/api/organizations/${organization.id}`, {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setMessage(result.reason);
+    setIsEditOpen(false);
+    router.refresh();
+  }
+
+  async function disableOrganization(): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch(`/api/organizations/${organization.id}`, {
+      method: "DELETE",
+    });
+    const result = (await response.json()) as ApiResult<{ organization: Organization }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    router.refresh();
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    await updateOrganization({
+      name: String(formData.get("name") ?? ""),
+      slug: String(formData.get("slug") ?? ""),
+      status: String(formData.get("status") ?? ""),
+    });
+  }
+
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <Button onClick={() => setIsEditOpen(true)} size="sm" type="button" variant="outline">
+        <Pencil className="size-4" aria-hidden="true" />
+        编辑
+      </Button>
+      {organization.status === "disabled" ? (
+        <Button
+          disabled={isPending}
+          onClick={() => void updateOrganization({ status: "active" })}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <Power className="size-4" aria-hidden="true" />
+          启用
+        </Button>
+      ) : (
+        <Button disabled={isPending} onClick={() => void disableOrganization()} size="sm" type="button" variant="destructive">
+          <Power className="size-4" aria-hidden="true" />
+          停用
+        </Button>
+      )}
+      <Dialog
+        description="编辑机构名称、唯一标识和启停状态。"
+        onClose={() => setIsEditOpen(false)}
+        open={isEditOpen}
+        title="编辑机构"
+      >
+        <form className="grid gap-4" onSubmit={handleSubmit}>
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">机构名称</span>
+            <Input defaultValue={organization.name} name="name" required />
+          </label>
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">机构标识</span>
+            <Input defaultValue={organization.slug} name="slug" required />
+          </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={organization.status}
+              name="status"
+            >
+              <option value="active">启用</option>
+              <option value="disabled">停用</option>
+            </select>
+          </label>
+          {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>
+            <Button disabled={isPending} type="submit">
+              保存
+            </Button>
+          </div>
+        </form>
+      </Dialog>
+    </div>
+  );
+}

modules/settings/components/RoleManagementClient.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { Pencil, Plus, Power } 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 { Permission, RoleDefinition } from "@/modules/core/types";
+
+type PermissionDefinition = {
+  id: Permission;
+  label: string;
+  category: string;
+  description: string;
+};
+
+type RoleManagementClientProps = {
+  permissions: PermissionDefinition[];
+};
+
+export function RoleManagementClient({ permissions }: RoleManagementClientProps): React.ReactElement {
+  const router = useRouter();
+  const [message, setMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    setMessage("");
+    setIsPending(true);
+    const formData = new FormData(event.currentTarget);
+    const response = await fetch("/api/settings/roles", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        label: String(formData.get("label") ?? ""),
+        key: String(formData.get("key") ?? ""),
+        description: String(formData.get("description") ?? ""),
+        permissions: formData.getAll("permissions").map(String),
+      }),
+    });
+    const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setMessage(result.reason);
+    event.currentTarget.reset();
+    router.refresh();
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>新增角色</CardTitle>
+        <CardDescription>角色由系统注册权限点组合而成。</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <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>
+            ))}
+          </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>
+  );
+}
+
+type RoleRowActionsProps = {
+  permissions: PermissionDefinition[];
+  role: RoleDefinition;
+};
+
+export function RoleRowActions({ permissions, role }: RoleRowActionsProps): React.ReactElement {
+  const router = useRouter();
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [message, setMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+
+  async function updateRole(payload: Record<string, string | boolean | string[]>): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch(`/api/settings/roles/${role.id}`, {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setMessage(result.reason);
+    setIsEditOpen(false);
+    router.refresh();
+  }
+
+  async function disableRole(): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch(`/api/settings/roles/${role.id}`, {
+      method: "DELETE",
+    });
+    const result = (await response.json()) as ApiResult<{ role: RoleDefinition }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    router.refresh();
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    await updateRole({
+      label: String(formData.get("label") ?? ""),
+      key: String(formData.get("key") ?? ""),
+      description: String(formData.get("description") ?? ""),
+      isEnabled: String(formData.get("isEnabled") ?? "") === "true",
+      permissions: formData.getAll("permissions").map(String),
+    });
+  }
+
+  if (role.isSystem) {
+    return <span className="block text-right text-xs text-muted-foreground">内置只读</span>;
+  }
+
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <Button onClick={() => setIsEditOpen(true)} size="sm" type="button" variant="outline">
+        <Pencil className="size-4" aria-hidden="true" />
+        编辑
+      </Button>
+      {role.isEnabled ? (
+        <Button disabled={isPending} onClick={() => void disableRole()} size="sm" type="button" variant="destructive">
+          <Power className="size-4" aria-hidden="true" />
+          停用
+        </Button>
+      ) : (
+        <Button
+          disabled={isPending}
+          onClick={() => void updateRole({ isEnabled: true })}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <Power className="size-4" aria-hidden="true" />
+          启用
+        </Button>
+      )}
+      <Dialog
+        description="编辑自定义角色的名称、说明、状态和权限点。"
+        onClose={() => setIsEditOpen(false)}
+        open={isEditOpen}
+        title="编辑角色"
+      >
+        <form className="grid gap-4" onSubmit={handleSubmit}>
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="grid gap-2 text-sm">
+              <span className="font-medium">角色名称</span>
+              <Input defaultValue={role.label} name="label" required />
+            </label>
+            <label className="grid gap-2 text-sm">
+              <span className="font-medium">角色标识</span>
+              <Input defaultValue={role.key} name="key" required />
+            </label>
+          </div>
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">角色说明</span>
+            <Input defaultValue={role.description} name="description" />
+          </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={String(role.isEnabled)}
+              name="isEnabled"
+            >
+              <option value="true">启用</option>
+              <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>
+          {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>
+            <Button disabled={isPending} type="submit">
+              保存
+            </Button>
+          </div>
+        </form>
+      </Dialog>
+    </div>
+  );
+}

modules/settings/components/TableToolbar.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { buildPageHref } from "@/modules/settings/lib/pagination";
+
+type TableToolbarProps = {
+  actionLabel?: string;
+  page: number;
+  pageCount: number;
+  pathname: string;
+  query: string;
+  searchPlaceholder: string;
+  total: number;
+};
+
+export function TableToolbar({
+  actionLabel,
+  page,
+  pageCount,
+  pathname,
+  query,
+  searchPlaceholder,
+  total,
+}: TableToolbarProps): React.ReactElement {
+  return (
+    <div className="flex flex-col gap-3 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
+      <form className="flex w-full max-w-xl gap-2" action={pathname}>
+        <Input name="q" placeholder={searchPlaceholder} defaultValue={query} />
+        <Button type="submit" variant="outline">
+          搜索
+        </Button>
+      </form>
+      <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
+        <span>{actionLabel ?? `共 ${total} 条`}</span>
+        <div className="flex items-center gap-2">
+          {page <= 1 ? (
+            <Button disabled size="sm" variant="outline">
+              上一页
+            </Button>
+          ) : (
+            <Button asChild size="sm" variant="outline">
+              <Link href={buildPageHref(pathname, query, page - 1)}>上一页</Link>
+            </Button>
+          )}
+          <span className="min-w-16 text-center">
+            {page}/{pageCount}
+          </span>
+          {page >= pageCount ? (
+            <Button disabled size="sm" variant="outline">
+              下一页
+            </Button>
+          ) : (
+            <Button asChild size="sm" variant="outline">
+              <Link href={buildPageHref(pathname, query, page + 1)}>下一页</Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

modules/settings/components/UserManagementClient.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { FormEvent, useMemo, useState } from "react";
-import { Check, Plus, X } from "lucide-react";
+import { Check, Pencil, Plus, Power, X } 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";
-import type { JoinRequest, Organization, RoleDefinition } from "@/modules/core/types";
+import type { JoinRequest, Organization, PublicAccount, RoleDefinition } from "@/modules/core/types";
 
 type UserManagementClientProps = {
   organizations: Organization[];
@@ -222,3 +223,184 @@ export function UserManagementClient({
     </section>
   );
 }
+
+type UserAccountActionsProps = {
+  account: PublicAccount;
+  currentAccountId: string;
+  organizations: Organization[];
+  roles: RoleDefinition[];
+};
+
+export function UserAccountActions({
+  account,
+  currentAccountId,
+  organizations,
+  roles,
+}: UserAccountActionsProps): React.ReactElement {
+  const router = useRouter();
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [selectedOrganizationId, setSelectedOrganizationId] = useState(
+    () => account.organizationId ?? getDefaultOrganizationId(organizations),
+  );
+  const [message, setMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+  const organizationRoles = useMemo(
+    () => getOrganizationRoles(roles, selectedOrganizationId),
+    [roles, selectedOrganizationId],
+  );
+  const defaultRoleId =
+    organizationRoles.find((role) => role.key === account.role || role.id === account.role)?.id ?? organizationRoles[0]?.id ?? "";
+  const isCurrentAccount = account.id === currentAccountId;
+
+  async function updateAccount(payload: Record<string, string>): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch(`/api/settings/accounts/${account.id}`, {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const result = (await response.json()) as ApiResult<{ account: PublicAccount }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    setMessage(result.reason);
+    setIsEditOpen(false);
+    router.refresh();
+  }
+
+  async function disableAccount(): Promise<void> {
+    setMessage("");
+    setIsPending(true);
+    const response = await fetch(`/api/settings/accounts/${account.id}`, {
+      method: "DELETE",
+    });
+    const result = (await response.json()) as ApiResult<{ account: PublicAccount }>;
+    setIsPending(false);
+
+    if (!result.success) {
+      setMessage(result.reason);
+      return;
+    }
+
+    router.refresh();
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    await updateAccount({
+      name: String(formData.get("name") ?? ""),
+      status: String(formData.get("status") ?? ""),
+      organizationId: String(formData.get("organizationId") ?? ""),
+      roleId: String(formData.get("roleId") ?? ""),
+    });
+  }
+
+  return (
+    <div className="flex items-center justify-end gap-2">
+      <Button onClick={() => setIsEditOpen(true)} size="sm" type="button" variant="outline">
+        <Pencil className="size-4" aria-hidden="true" />
+        编辑
+      </Button>
+      {account.status === "disabled" ? (
+        <Button
+          disabled={isPending}
+          onClick={() => void updateAccount({ status: "active" })}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          <Power className="size-4" aria-hidden="true" />
+          启用
+        </Button>
+      ) : (
+        <Button
+          disabled={isPending || isCurrentAccount}
+          onClick={() => void disableAccount()}
+          size="sm"
+          type="button"
+          variant="destructive"
+        >
+          <Power className="size-4" aria-hidden="true" />
+          停用
+        </Button>
+      )}
+      <Dialog
+        description="调整账号基础信息、状态和机构角色。"
+        onClose={() => setIsEditOpen(false)}
+        open={isEditOpen}
+        title="编辑用户"
+      >
+        <form className="grid gap-4" onSubmit={handleSubmit}>
+          <label className="grid gap-2 text-sm">
+            <span className="font-medium">姓名</span>
+            <Input defaultValue={account.name} name="name" required />
+          </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={account.status}
+              disabled={isCurrentAccount}
+              name="status"
+            >
+              <option value="active">启用</option>
+              <option value="disabled">停用</option>
+            </select>
+          </label>
+          <div className="grid gap-3 md:grid-cols-2">
+            <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"
+                defaultValue={defaultRoleId}
+                disabled={organizationRoles.length === 0}
+                key={selectedOrganizationId}
+                name="roleId"
+              >
+                {organizationRoles.map((role) => (
+                  <option key={role.id} value={role.id}>
+                    {role.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+          {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>
+            <Button disabled={isPending} type="submit">
+              保存
+            </Button>
+          </div>
+        </form>
+      </Dialog>
+    </div>
+  );
+}