fix: make settings controls editable

components/ui/input.tsx

@@ -1 +1,28 @@
-export { Input, Textarea, type InputProps, type InputAreaProps as TextareaProps } from "@cloudflare/kumo/components/input";
+"use client";
+
+import * as React from "react";
+import {
+  Input as KumoInput,
+  Textarea as KumoTextarea,
+  type InputAreaProps as KumoTextareaProps,
+  type InputProps as KumoInputProps,
+} from "@cloudflare/kumo/components/input";
+
+import { cn } from "@/lib/utils";
+
+export type InputProps = KumoInputProps;
+export type TextareaProps = KumoTextareaProps;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, ...props },
+  ref,
+): React.ReactElement {
+  return <KumoInput ref={ref} className={cn("w-full", className)} {...props} />;
+});
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { className, ...props },
+  ref,
+): React.ReactElement {
+  return <KumoTextarea ref={ref} className={cn("min-h-24 w-full", className)} {...props} />;
+});

components/ui/select.tsx

@@ -3,6 +3,8 @@
 import * as React from "react";
 import { Select as KumoSelect } from "@cloudflare/kumo/components/select";
 
+import { cn } from "@/lib/utils";
+
 export type SelectOption = {
   value: string;
   label: React.ReactNode;
@@ -24,6 +26,7 @@ type SelectProps = {
 };
 
 export function Select({
+  className,
   onValueChange,
   options,
   placeholder,
@@ -33,6 +36,7 @@ export function Select({
 }: SelectProps): React.ReactElement {
   return (
     <KumoSelect<string>
+      className={cn("w-full", className)}
       defaultValue={defaultValue}
       onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
       placeholder={placeholder}

modules/settings/components/GlobalSettingsClient.tsx

@@ -65,29 +65,47 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
           <CardDescription>控制全站公开注册能力和 OIDC 登录入口总开关。</CardDescription>
         </CardHeader>
         <CardContent className="grid gap-4">
-          <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
-            <span>
+          <div className="rounded-md border p-3 text-sm">
+            <Checkbox
+              controlFirst={false}
+              defaultChecked={settings.registrationEnabled}
+              label={
+                <span className="min-w-0">
                   <span className="block font-medium">开放公开注册</span>
                   <span className="block text-xs text-muted-foreground">关闭后普通注册不可用；邀请链接仍可使用。</span>
                 </span>
-            <Checkbox aria-label="开放公开注册" defaultChecked={settings.registrationEnabled} name="registrationEnabled" />
-          </label>
+              }
+              name="registrationEnabled"
+            />
+          </div>
 
-          <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
-            <span>
+          <div className="rounded-md border p-3 text-sm">
+            <Checkbox
+              controlFirst={false}
+              defaultChecked={settings.oidcEnabled}
+              label={
+                <span className="min-w-0">
                   <span className="block font-medium">启用 OIDC 登录</span>
                   <span className="block text-xs text-muted-foreground">作为平台级总开关，机构级 OIDC 配置仍可单独管理。</span>
                 </span>
-            <Checkbox aria-label="启用 OIDC 登录" defaultChecked={settings.oidcEnabled} name="oidcEnabled" />
-          </label>
+              }
+              name="oidcEnabled"
+            />
+          </div>
 
-          <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
-            <span>
+          <div className="rounded-md border p-3 text-sm">
+            <Checkbox
+              controlFirst={false}
+              defaultChecked={settings.oidcAutoProvision}
+              label={
+                <span className="min-w-0">
                   <span className="block font-medium">OIDC 自动开户</span>
                   <span className="block text-xs text-muted-foreground">首次 OIDC 登录时按声明信息创建账号，默认进入等待分配。</span>
                 </span>
-            <Checkbox aria-label="OIDC 自动开户" defaultChecked={settings.oidcAutoProvision} name="oidcAutoProvision" />
-          </label>
+              }
+              name="oidcAutoProvision"
+            />
+          </div>
         </CardContent>
       </Card>
 
@@ -101,40 +119,33 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
         </CardHeader>
         <CardContent className="grid gap-4">
           <div className="grid gap-3 md:grid-cols-2">
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">Issuer URL</span>
-              <Input defaultValue={settings.oidcIssuerUrl} name="oidcIssuerUrl" placeholder="https://idp.example.com" />
-            </label>
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">Client ID</span>
-              <Input defaultValue={settings.oidcClientId} name="oidcClientId" />
-            </label>
+            <Input
+              defaultValue={settings.oidcIssuerUrl}
+              label="Issuer URL"
+              name="oidcIssuerUrl"
+              placeholder="https://idp.example.com"
+            />
+            <Input defaultValue={settings.oidcClientId} label="Client ID" name="oidcClientId" />
           </div>
 
-          <label className="grid gap-2 text-sm">
-            <span className="font-medium">Client Secret</span>
           <Input
+            label="Client Secret"
             name="oidcClientSecret"
             placeholder={settings.oidcHasClientSecret ? "已配置，留空则不修改" : "未配置"}
             type="password"
           />
-          </label>
 
           <div className="grid gap-3 md:grid-cols-2">
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">Scopes</span>
-              <Input defaultValue={settings.oidcScopes} name="oidcScopes" placeholder="openid profile email" />
-            </label>
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">Redirect URI</span>
-              <Input defaultValue={settings.oidcRedirectUri} name="oidcRedirectUri" placeholder="/api/auth/oidc/callback" />
-            </label>
+            <Input defaultValue={settings.oidcScopes} label="Scopes" name="oidcScopes" placeholder="openid profile email" />
+            <Input
+              defaultValue={settings.oidcRedirectUri}
+              label="Redirect URI"
+              name="oidcRedirectUri"
+              placeholder="/api/auth/oidc/callback"
+            />
           </div>
 
-          <label className="grid gap-2 text-sm">
-            <span className="font-medium">Avatar Claim</span>
-            <Input defaultValue={settings.oidcAvatarClaim} name="oidcAvatarClaim" placeholder="picture" />
-          </label>
+          <Input defaultValue={settings.oidcAvatarClaim} label="Avatar Claim" name="oidcAvatarClaim" placeholder="picture" />
 
           {message ? (
             <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">

modules/settings/components/OrganizationDetailClient.tsx

@@ -71,73 +71,86 @@ export function OrganizationDetailClient({
         </CardHeader>
         <CardContent>
           <form className="grid gap-4" onSubmit={handleSettingsSubmit}>
-            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
-              <span>
+            <div className="rounded-md border p-3 text-sm">
+              <Checkbox
+                controlFirst={false}
+                defaultChecked={organization.registrationEnabled}
+                label={
+                  <span className="min-w-0">
                     <span className="block font-medium">开放公开注册</span>
                     <span className="block text-xs text-muted-foreground">关闭后，注册页不再展示该机构；邀请链接仍可使用。</span>
                   </span>
-              <Checkbox
-                aria-label="开放公开注册"
-                defaultChecked={organization.registrationEnabled}
+                }
                 name="registrationEnabled"
               />
-            </label>
+            </div>
 
-            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
-              <span>
+            <div className="rounded-md border p-3 text-sm">
+              <Checkbox
+                controlFirst={false}
+                defaultChecked={organization.oidcEnabled}
+                label={
+                  <span className="min-w-0">
                     <span className="block font-medium">启用 OIDC 登录</span>
                     <span className="block text-xs text-muted-foreground">保存标准 OIDC 配置，后续登录入口按该开关展示。</span>
                   </span>
-              <Checkbox aria-label="启用 OIDC 登录" defaultChecked={organization.oidcEnabled} name="oidcEnabled" />
-            </label>
-
-            <div className="grid gap-3 md:grid-cols-2">
-              <label className="grid gap-2 text-sm">
-                <span className="font-medium">Issuer URL</span>
-                <Input defaultValue={organization.oidcIssuerUrl} name="oidcIssuerUrl" placeholder="https://idp.example.com" />
-              </label>
-              <label className="grid gap-2 text-sm">
-                <span className="font-medium">Client ID</span>
-                <Input defaultValue={organization.oidcClientId} name="oidcClientId" />
-              </label>
+                }
+                name="oidcEnabled"
+              />
             </div>
 
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">Client Secret</span>
+            <div className="grid gap-3 md:grid-cols-2">
               <Input
+                defaultValue={organization.oidcIssuerUrl}
+                label="Issuer URL"
+                name="oidcIssuerUrl"
+                placeholder="https://idp.example.com"
+              />
+              <Input defaultValue={organization.oidcClientId} label="Client ID" name="oidcClientId" />
+            </div>
+
+            <Input
+              label="Client Secret"
               name="oidcClientSecret"
               placeholder={organization.oidcHasClientSecret ? "已配置，留空则不修改" : "未配置"}
               type="password"
             />
-            </label>
 
             <div className="grid gap-3 md:grid-cols-2">
-              <label className="grid gap-2 text-sm">
-                <span className="font-medium">Scopes</span>
-                <Input defaultValue={organization.oidcScopes} name="oidcScopes" placeholder="openid profile email" />
-              </label>
-              <label className="grid gap-2 text-sm">
-                <span className="font-medium">Redirect URI</span>
-                <Input defaultValue={organization.oidcRedirectUri} name="oidcRedirectUri" placeholder="/api/auth/oidc/callback" />
-              </label>
+              <Input
+                defaultValue={organization.oidcScopes}
+                label="Scopes"
+                name="oidcScopes"
+                placeholder="openid profile email"
+              />
+              <Input
+                defaultValue={organization.oidcRedirectUri}
+                label="Redirect URI"
+                name="oidcRedirectUri"
+                placeholder="/api/auth/oidc/callback"
+              />
             </div>
 
-            <label className="grid gap-2 text-sm">
-              <span className="font-medium">Avatar Claim</span>
-              <Input defaultValue={organization.oidcAvatarClaim} name="oidcAvatarClaim" placeholder="picture" />
-            </label>
+            <Input
+              defaultValue={organization.oidcAvatarClaim}
+              label="Avatar Claim"
+              name="oidcAvatarClaim"
+              placeholder="picture"
+            />
 
-            <label className="flex items-center justify-between gap-4 rounded-md border p-3 text-sm">
-              <span>
+            <div className="rounded-md border p-3 text-sm">
+              <Checkbox
+                controlFirst={false}
+                defaultChecked={organization.oidcAutoProvision}
+                label={
+                  <span className="min-w-0">
                     <span className="block font-medium">OIDC 自动开户</span>
                     <span className="block text-xs text-muted-foreground">首次 OIDC 登录时自动创建账号并进入本机构。</span>
                   </span>
-              <Checkbox
-                aria-label="OIDC 自动开户"
-                defaultChecked={organization.oidcAutoProvision}
+                }
                 name="oidcAutoProvision"
               />
-            </label>
+            </div>
 
             {settingsMessage ? (
               <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">

modules/settings/components/RoleManagementClient.tsx

@@ -101,40 +101,41 @@ function PermissionTree({
 
           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">
+              <div 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">
                   <Checkbox
-                    aria-label={`切换 ${group.category} 权限`}
                     checked={isAllSelected}
-                    onCheckedChange={(checked) => toggleCategory(group.permissions, checked)}
-                  />
-                  <span>
+                    label={
+                      <span className="min-w-0">
                         <span className="block font-medium">{group.category}</span>
                         <span className="block text-xs text-muted-foreground">
                           已选 {selectedCount} / {group.permissions.length}
                         </span>
                       </span>
+                    }
+                    onCheckedChange={(checked) => toggleCategory(group.permissions, checked)}
+                  />
                 </span>
                 <Badge variant={selectedCount > 0 ? "success" : "secondary"}>{selectedCount}</Badge>
-              </label>
+              </div>
               <div className="grid gap-2 bg-secondary/15 p-3 md:grid-cols-2">
                 {group.permissions.map((permission) => (
-                  <label
+                  <div
                     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}
                   >
                     <Checkbox
-                      aria-label={`切换 ${permission.label}`}
                       checked={selectedSet.has(permission.id)}
-                      className="mt-1"
-                      onCheckedChange={(checked) => togglePermission(permission.id, checked)}
-                    />
+                      label={
                         <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>
+                      }
+                      onCheckedChange={(checked) => togglePermission(permission.id, checked)}
+                    />
+                  </div>
                 ))}
               </div>
             </div>
@@ -211,9 +212,9 @@ export function RoleManagementClient({ permissions }: RoleManagementClientProps)
       >
         <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="角色说明" />
+            <Input label="角色名称" name="label" placeholder="角色名称" required />
+            <Input label="角色标识" name="key" placeholder="可留空" />
+            <Input label="角色说明" name="description" placeholder="角色说明" />
           </div>
           <PermissionTree
             onChange={setSelectedPermissions}
@@ -352,31 +353,19 @@ export function RoleRowActions({ permissions, role }: RoleRowActionsProps): Reac
       >
         <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>
+            <Input defaultValue={role.label} label="角色名称" name="label" required />
+            <Input defaultValue={role.key} label="角色标识" name="key" required />
           </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>
+          <Input defaultValue={role.description} label="角色说明" name="description" />
           <Select
-              aria-label="角色状态"
             defaultValue={String(role.isEnabled)}
+            label="状态"
             name="isEnabled"
             options={[
               { value: "true", label: "启用" },
               { value: "false", label: "停用" },
             ]}
           />
-          </label>
           <PermissionTree
             onChange={setSelectedPermissions}
             permissions={permissions}