feat: split settings management pages

2026-07-02 04:28:35 -07:00
parent 99bcfb1038
commit a555c9dd23
22 changed files with 2131 additions and 37 deletions
--- a/modules/settings/components/OrganizationManagementClient.tsx
+++ b/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>
+  );
+}