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: min(calc(100vw - 1.5rem), 48rem) !important;
+  min-width: 0 !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",
-        oidcEnabled: formData.get("oidcEnabled") === "on",
+        registrationEnabled,
+        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,115 +66,131 @@ export function GlobalSettingsClient({ settings }: GlobalSettingsClientProps): R
   }
 
   return (
-    <form className="grid gap-5 xl:grid-cols-[0.9fr_1.1fr]" onSubmit={handleSubmit}>
-      <Card>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <Globe2 className="size-5 text-primary" aria-hidden="true" />
-            <CardTitle>注册与入口</CardTitle>
-          </div>
-          <CardDescription>控制全站公开注册能力和 OIDC 登录入口总开关。</CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4">
-          <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>
-              }
-              name="registrationEnabled"
-            />
-          </div>
-
-          <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>
-              }
-              name="oidcEnabled"
-            />
-          </div>
-
-          <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>
-              }
-              name="oidcAutoProvision"
-            />
-          </div>
-        </CardContent>
-      </Card>
+    <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>
-        <CardHeader>
-          <div className="flex items-center gap-2">
-            <ShieldCheck className="size-5 text-primary" aria-hidden="true" />
-            <CardTitle>OIDC 默认配置</CardTitle>
-          </div>
-          <CardDescription>保存标准 OIDC issuer、client、scope 和头像 claim。</CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4">
-          <div className="grid gap-3 md:grid-cols-2">
+        <div hidden={activeTab !== "registration"} role="tabpanel">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Globe2 className="size-5 text-primary" aria-hidden="true" />
+              <CardTitle>注册与入口</CardTitle>
+            </div>
+            <CardDescription>控制全站公开注册能力和 OIDC 登录入口总开关。</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-4">
+            <div className="rounded-md border p-3 text-sm">
+              <Checkbox
+                checked={registrationEnabled}
+                label={
+                  <span className="min-w-0">
+                    <span className="block font-medium">开放公开注册</span>
+                    <span className="block text-xs text-muted-foreground">关闭后普通注册不可用；邀请链接仍可使用。</span>
+                  </span>
+                }
+                name="registrationEnabled"
+                onCheckedChange={setRegistrationEnabled}
+              />
+            </div>
+
+            <div className="rounded-md border p-3 text-sm">
+              <Checkbox
+                checked={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>
+                }
+                name="oidcEnabled"
+                onCheckedChange={setOidcEnabled}
+              />
+            </div>
+
+            <div className="rounded-md border p-3 text-sm">
+              <Checkbox
+                checked={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>
+                }
+                name="oidcAutoProvision"
+                onCheckedChange={setOidcAutoProvision}
+              />
+            </div>
+          </CardContent>
+        </div>
+        <div hidden={activeTab !== "oidc"} role="tabpanel">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="size-5 text-primary" aria-hidden="true" />
+              <CardTitle>OIDC 默认配置</CardTitle>
+            </div>
+            <CardDescription>保存标准 OIDC issuer、client、scope 和头像 claim。</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-4">
+            <div className="grid gap-3 md:grid-cols-2">
+              <Input
+                defaultValue={settings.oidcIssuerUrl}
+                label="Issuer URL"
+                name="oidcIssuerUrl"
+                placeholder="https://idp.example.com"
+              />
+              <Input defaultValue={settings.oidcClientId} label="Client ID" name="oidcClientId" />
+            </div>
+
             <Input
-              defaultValue={settings.oidcIssuerUrl}
-              label="Issuer URL"
-              name="oidcIssuerUrl"
-              placeholder="https://idp.example.com"
+              label="Client Secret"
+              name="oidcClientSecret"
+              placeholder={settings.oidcHasClientSecret ? "已配置，留空则不修改" : "未配置"}
+              type="password"
             />
-            <Input defaultValue={settings.oidcClientId} label="Client ID" name="oidcClientId" />
-          </div>
 
-          <Input
-            label="Client Secret"
-            name="oidcClientSecret"
-            placeholder={settings.oidcHasClientSecret ? "已配置，留空则不修改" : "未配置"}
-            type="password"
-          />
+            <div className="grid gap-3 md:grid-cols-2">
+              <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>
 
-          <div className="grid gap-3 md:grid-cols-2">
-            <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>
-
-          <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">
-              {message}
-            </p>
-          ) : null}
-
-          <div className="flex items-center justify-between gap-3 border-t pt-4">
-            <Badge variant={settings.oidcEnabled ? "success" : "secondary"}>
-              {settings.oidcEnabled ? "OIDC 已启用" : "OIDC 未启用"}
-            </Badge>
-            <Button disabled={isPending} type="submit">
-              <Save className="size-4" aria-hidden="true" />
-              保存配置
-            </Button>
-          </div>
-        </CardContent>
+            <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">
+          {message}
+        </p>
+      ) : null}
+
+      <div className="flex items-center justify-between gap-3">
+        <Badge variant={oidcEnabled ? "success" : "secondary"}>
+          {oidcEnabled ? "OIDC 已启用" : "OIDC 未启用"}
+        </Badge>
+        <Button disabled={isPending} type="submit">
+          <Save className="size-4" aria-hidden="true" />
+          保存配置
+        </Button>
+      </div>
     </form>
   );
 }