feat: adopt kumo green ui system

modules/settings/components/OrganizationDetailClient.tsx

@@ -7,7 +7,9 @@ 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 { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
+import { Table } from "@/components/ui/table";
 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";
@@ -74,7 +76,11 @@ export function OrganizationDetailClient({
                 <span className="block font-medium">开放公开注册</span>
                 <span className="block text-xs text-muted-foreground">关闭后，注册页不再展示该机构；邀请链接仍可使用。</span>
               </span>
-              <input defaultChecked={organization.registrationEnabled} name="registrationEnabled" type="checkbox" />
+              <Checkbox
+                aria-label="开放公开注册"
+                defaultChecked={organization.registrationEnabled}
+                name="registrationEnabled"
+              />
             </label>
 
             <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
@@ -82,7 +88,7 @@ export function OrganizationDetailClient({
                 <span className="block font-medium">启用 OIDC 登录</span>
                 <span className="block text-xs text-muted-foreground">保存标准 OIDC 配置，后续登录入口按该开关展示。</span>
               </span>
-              <input defaultChecked={organization.oidcEnabled} name="oidcEnabled" type="checkbox" />
+              <Checkbox aria-label="启用 OIDC 登录" defaultChecked={organization.oidcEnabled} name="oidcEnabled" />
             </label>
 
             <div className="grid gap-3 md:grid-cols-2">
@@ -126,7 +132,11 @@ export function OrganizationDetailClient({
                 <span className="block font-medium">OIDC 自动开户</span>
                 <span className="block text-xs text-muted-foreground">首次 OIDC 登录时自动创建账号并进入本机构。</span>
               </span>
-              <input defaultChecked={organization.oidcAutoProvision} name="oidcAutoProvision" type="checkbox" />
+              <Checkbox
+                aria-label="OIDC 自动开户"
+                defaultChecked={organization.oidcAutoProvision}
+                name="oidcAutoProvision"
+              />
             </label>
 
             {settingsMessage ? (
@@ -156,28 +166,28 @@ export function OrganizationDetailClient({
         </CardHeader>
         <CardContent className="grid gap-4">
           <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">
-                <tr>
-                  <th className="px-4 py-3 font-medium">对象</th>
-                  <th className="px-4 py-3 font-medium">角色</th>
-                  <th className="px-4 py-3 font-medium">状态</th>
-                  <th className="px-4 py-3 font-medium">有效期</th>
-                  <th className="px-4 py-3 text-right font-medium">链接</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y bg-card">
+            <Table className="w-full min-w-[720px] text-sm">
+              <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
+                <Table.Row>
+                  <Table.Head className="px-4 py-3 font-medium">对象</Table.Head>
+                  <Table.Head className="px-4 py-3 font-medium">角色</Table.Head>
+                  <Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
+                  <Table.Head className="px-4 py-3 font-medium">有效期</Table.Head>
+                  <Table.Head className="px-4 py-3 text-right font-medium">链接</Table.Head>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body className="divide-y bg-card">
                 {invitations.map((invitation) => (
-                  <tr className="hover:bg-secondary/45" key={invitation.id}>
-                    <td className="px-4 py-3">{invitation.email || "通用邀请"}</td>
-                    <td className="px-4 py-3">{invitation.roleLabel}</td>
-                    <td className="px-4 py-3">
+                  <Table.Row className="hover:bg-secondary/45" key={invitation.id}>
+                    <Table.Cell className="px-4 py-3">{invitation.email || "通用邀请"}</Table.Cell>
+                    <Table.Cell className="px-4 py-3">{invitation.roleLabel}</Table.Cell>
+                    <Table.Cell className="px-4 py-3">
                       <Badge variant={invitation.status === "active" ? "success" : "secondary"}>{invitation.status}</Badge>
-                    </td>
-                    <td className="px-4 py-3 text-muted-foreground">
+                    </Table.Cell>
+                    <Table.Cell className="px-4 py-3 text-muted-foreground">
                       {new Date(invitation.expiresAt).toLocaleString("zh-CN")}
-                    </td>
-                    <td className="px-4 py-3 text-right">
+                    </Table.Cell>
+                    <Table.Cell className="px-4 py-3 text-right">
                       <Button
                         onClick={() => void navigator.clipboard.writeText(getInviteHref(invitation.token))}
                         size="sm"
@@ -187,18 +197,18 @@ export function OrganizationDetailClient({
                         <Copy className="size-4" aria-hidden="true" />
                         复制
                       </Button>
-                    </td>
-                  </tr>
+                    </Table.Cell>
+                  </Table.Row>
                 ))}
                 {invitations.length === 0 ? (
-                  <tr>
-                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={5}>
+                  <Table.Row>
+                    <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={5}>
                       暂无邀请
-                    </td>
-                  </tr>
+                    </Table.Cell>
+                  </Table.Row>
                 ) : null}
-              </tbody>
-            </table>
+              </Table.Body>
+            </Table>
           </div>
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
             <LinkIcon className="size-4" aria-hidden="true" />