fix: stabilize settings controls

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>
   );
 }