feat: adopt kumo green ui system

modules/settings/components/RoleManagementClient.tsx

@@ -6,8 +6,10 @@ import { useRouter } from "next/navigation";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
 import type { ApiResult } from "@/modules/core/server/api";
 import type { Permission, RoleDefinition } from "@/modules/core/types";
 
@@ -101,11 +103,10 @@ function PermissionTree({
             <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
+                  <Checkbox
+                    aria-label={`切换 ${group.category} 权限`}
                     checked={isAllSelected}
-                    className="size-4 rounded border-input"
-                    onChange={(event) => toggleCategory(group.permissions, event.target.checked)}
-                    type="checkbox"
+                    onCheckedChange={(checked) => toggleCategory(group.permissions, checked)}
                   />
                   <span>
                     <span className="block font-medium">{group.category}</span>
@@ -122,11 +123,11 @@ function PermissionTree({
                     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
+                    <Checkbox
+                      aria-label={`切换 ${permission.label}`}
                       checked={selectedSet.has(permission.id)}
-                      className="mt-1 size-4 rounded border-input"
-                      onChange={(event) => togglePermission(permission.id, event.target.checked)}
-                      type="checkbox"
+                      className="mt-1"
+                      onCheckedChange={(checked) => togglePermission(permission.id, checked)}
                     />
                     <span className="min-w-0">
                       <span className="block font-medium">{permission.label}</span>
@@ -366,14 +367,15 @@ export function RoleRowActions({ permissions, role }: RoleRowActionsProps): Reac
           </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"
+            <Select
+              aria-label="角色状态"
               defaultValue={String(role.isEnabled)}
               name="isEnabled"
-            >
-              <option value="true">启用</option>
-              <option value="false">停用</option>
-            </select>
+              options={[
+                { value: "true", label: "启用" },
+                { value: "false", label: "停用" },
+              ]}
+            />
           </label>
           <PermissionTree
             onChange={setSelectedPermissions}