fix: stabilize settings controls

app/(app)/app/settings/global/page.tsx

@@ -1,6 +1,5 @@
 import { redirect } from "next/navigation";
 
-import { Badge } from "@/components/ui/badge";
 import { getCurrentAuthContext } from "@/modules/core/server/auth";
 import { hasPermission } from "@/modules/core/server/permissions";
 import { getSystemSettings } from "@/modules/core/server/system-settings";
@@ -20,12 +19,6 @@ export default async function GlobalSettingsPage(): Promise<React.ReactElement>
 
   return (
     <div className="flex flex-col gap-5">
-      <section>
-        <Badge variant="success">Global</Badge>
-        <h2 className="mt-3 text-xl font-semibold">全局配置</h2>
-        <p className="mt-1 text-sm text-muted-foreground">平台级注册策略、OIDC 默认配置和用户头像声明映射。</p>
-      </section>
-
       <GlobalSettingsClient settings={settings} />
     </div>
   );

app/globals.css

@@ -124,17 +124,6 @@ a,
   }
 }
 
-@keyframes dialog-panel-enter {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
 .page-enter {
   animation: page-enter 180ms ease-out both;
 }
@@ -147,10 +136,6 @@ a,
   animation: page-enter 160ms ease-out both;
 }
 
-.dialog-panel-enter {
-  animation: dialog-panel-enter 160ms ease-out both;
-}
-
 :where([role="presentation"].fixed.inset-0.bg-kumo-recessed) {
   z-index: 40;
 }
@@ -380,6 +365,22 @@ a,
   font-weight: 600;
 }
 
+.teatea-checkbox {
+  display: inline-flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.teatea-checkbox :where([data-kumo-component="Checkbox"]),
+.teatea-checkbox-control {
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  flex-shrink: 0;
+}
+
 .teatea-checkbox :where([data-kumo-component="Checkbox"]) {
   border: 1px solid var(--input);
   border-radius: var(--radius-sm);
@@ -387,6 +388,12 @@ a,
   color: var(--primary-foreground);
 }
 
+.teatea-checkbox :where([data-kumo-component="Checkbox"][data-checked]),
+.teatea-checkbox :where([data-kumo-component="Checkbox"][aria-checked="true"]) {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
 .teatea-badge {
   border-radius: var(--radius-sm);
   font-weight: 600;
@@ -430,11 +437,9 @@ a,
   inset: 0 !important;
   height: fit-content;
   margin: auto !important;
-  max-width: calc(100vw - 1.5rem);
+  min-width: 0 !important;
-  min-width: min(calc(100vw - 1.5rem), 48rem) !important;
   transform: none !important;
   translate: 0 0 !important;
-  width: min(calc(100vw - 1.5rem), 48rem) !important;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--card);
@@ -453,7 +458,6 @@ a,
   .page-enter,
   .route-transition,
   .table-row-enter,
-  .dialog-panel-enter,
   .teatea-select-panel,
   .loading-progress {
     animation: none;

components/ui/checkbox.tsx

@@ -12,20 +12,27 @@ type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
 };
 
 export function Checkbox({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   checked,
   className,
   defaultChecked = false,
+  label,
   name,
   onCheckedChange,
   ...props
 }: CheckboxProps): React.ReactElement {
+  const generatedId = React.useId().replace(/:/g, "");
+  const labelId = label ? `teatea-checkbox-label-${generatedId}` : undefined;
   const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
   const isControlled = checked !== undefined;
   const currentChecked = isControlled ? checked : uncontrolledChecked;
 
   return (
-    <span className="teatea-checkbox contents">
+    <span className="teatea-checkbox">
       <KumoCheckbox
+        aria-label={label ? undefined : ariaLabel}
+        aria-labelledby={ariaLabelledBy ?? labelId}
         checked={currentChecked}
         className={cn("teatea-checkbox-control", className)}
         onCheckedChange={(nextChecked) => {
@@ -37,6 +44,11 @@ export function Checkbox({
         }}
         {...props}
       />
+      {label ? (
+        <span className="min-w-0 flex-1" id={labelId}>
+          {label}
+        </span>
+      ) : null}
       {name && currentChecked ? <input name={name} type="hidden" value="on" /> : null}
     </span>
   );

modules/settings/components/GlobalSettingsClient.tsx

@@ -16,8 +16,19 @@ type GlobalSettingsClientProps = {
   settings: SystemSettings;
 };
 
+type SettingsTab = "registration" | "oidc";
+
+const tabs: Array<{ label: string; value: SettingsTab }> = [
+  { label: "注册入口", value: "registration" },
+  { label: "OIDC 默认配置", value: "oidc" },
+];
+
 export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): React.ReactElement {
   const router = useRouter();
+  const [activeTab, setActiveTab] = useState<SettingsTab>("registration");
+  const [registrationEnabled, setRegistrationEnabled] = useState(settings.registrationEnabled);
+  const [oidcEnabled, setOidcEnabled] = useState(settings.oidcEnabled);
+  const [oidcAutoProvision, setOidcAutoProvision] = useState(settings.oidcAutoProvision);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
 
@@ -31,15 +42,15 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
       method: "PATCH",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({
-        registrationEnabled: formData.get("registrationEnabled") === "on",
+        registrationEnabled,
-        oidcEnabled: formData.get("oidcEnabled") === "on",
+        oidcEnabled,
         oidcIssuerUrl: String(formData.get("oidcIssuerUrl") ?? ""),
         oidcClientId: String(formData.get("oidcClientId") ?? ""),
         oidcClientSecret: String(formData.get("oidcClientSecret") ?? ""),
         oidcScopes: String(formData.get("oidcScopes") ?? ""),
         oidcRedirectUri: String(formData.get("oidcRedirectUri") ?? ""),
         oidcAvatarClaim: String(formData.get("oidcAvatarClaim") ?? ""),
-        oidcAutoProvision: formData.get("oidcAutoProvision") === "on",
+        oidcAutoProvision,
       }),
     });
     const result = (await response.json()) as ApiResult<{ settings: SystemSettings }>;
@@ -55,8 +66,24 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
   }
 
   return (
-    <form className="grid gap-5 xl:grid-cols-[0.9fr_1.1fr]" onSubmit={handleSubmit}>
+    <form className="grid gap-4" onSubmit={handleSubmit}>
+      <div className="flex flex-wrap gap-2" role="tablist" aria-label="全局配置">
+        {tabs.map((tab) => (
+          <Button
+            aria-selected={activeTab === tab.value}
+            key={tab.value}
+            onClick={() => setActiveTab(tab.value)}
+            role="tab"
+            type="button"
+            variant={activeTab === tab.value ? "default" : "outline"}
+          >
+            {tab.label}
+          </Button>
+        ))}
+      </div>
+
       <Card>
+        <div hidden={activeTab !== "registration"} role="tabpanel">
           <CardHeader>
             <div className="flex items-center gap-2">
               <Globe2 className="size-5 text-primary" aria-hidden="true" />
@@ -67,8 +94,7 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
           <CardContent className="grid gap-4">
             <div className="rounded-md border p-3 text-sm">
               <Checkbox
-              controlFirst={false}
+                checked={registrationEnabled}
-              defaultChecked={settings.registrationEnabled}
                 label={
                   <span className="min-w-0">
                     <span className="block font-medium">开放公开注册</span>
@@ -76,13 +102,13 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
                   </span>
                 }
                 name="registrationEnabled"
+                onCheckedChange={setRegistrationEnabled}
               />
             </div>
 
             <div className="rounded-md border p-3 text-sm">
               <Checkbox
-              controlFirst={false}
+                checked={oidcEnabled}
-              defaultChecked={settings.oidcEnabled}
                 label={
                   <span className="min-w-0">
                     <span className="block font-medium">启用 OIDC 登录</span>
@@ -90,13 +116,13 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
                   </span>
                 }
                 name="oidcEnabled"
+                onCheckedChange={setOidcEnabled}
               />
             </div>
 
             <div className="rounded-md border p-3 text-sm">
               <Checkbox
-              controlFirst={false}
+                checked={oidcAutoProvision}
-              defaultChecked={settings.oidcAutoProvision}
                 label={
                   <span className="min-w-0">
                     <span className="block font-medium">OIDC 自动开户</span>
@@ -104,12 +130,12 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
                   </span>
                 }
                 name="oidcAutoProvision"
+                onCheckedChange={setOidcAutoProvision}
               />
             </div>
           </CardContent>
-      </Card>
+        </div>
-
+        <div hidden={activeTab !== "oidc"} role="tabpanel">
-      <Card>
           <CardHeader>
             <div className="flex items-center gap-2">
               <ShieldCheck className="size-5 text-primary" aria-hidden="true" />
@@ -146,6 +172,9 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
             </div>
 
             <Input defaultValue={settings.oidcAvatarClaim} label="Avatar Claim" name="oidcAvatarClaim" placeholder="picture" />
+          </CardContent>
+        </div>
+      </Card>
 
       {message ? (
         <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
@@ -153,17 +182,15 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
         </p>
       ) : null}
 
-          <div className="flex items-center justify-between gap-3 border-t pt-4">
+      <div className="flex items-center justify-between gap-3">
-            <Badge variant={settings.oidcEnabled ? "success" : "secondary"}>
+        <Badge variant={oidcEnabled ? "success" : "secondary"}>
-              {settings.oidcEnabled ? "OIDC 已启用" : "OIDC 未启用"}
+          {oidcEnabled ? "OIDC 已启用" : "OIDC 未启用"}
         </Badge>
         <Button disabled={isPending} type="submit">
           <Save className="size-4" aria-hidden="true" />
           保存配置
         </Button>
       </div>
-        </CardContent>
-      </Card>
     </form>
   );
 }