fix(auth): 登录主题 - 跟随应用外观并补齐回归

2026-09-24 00:05:13 +08:00
parent e8c2c40715
commit d89b55d182
9 changed files with 276 additions and 100 deletions
--- a/web/test/auth-theme.test.ts
+++ b/web/test/auth-theme.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+
+import { DEFAULT_CLASSIC_SKIN, duplicateSkinDefinition, skinCSSVariables } from "../src/lib/skin-themes";
+
+const source = (path: string) => readFileSync(new URL(`../src/${path}`, import.meta.url), "utf8");
+
+describe("authentication follows the application theme", () => {
+    test("classic login surfaces have distinct light and dark palettes", () => {
+        const css = source("styles/globals.css");
+        const dark = css.slice(css.indexOf(".dark {\n    --background:"));
+        for (const [mode, background, panel, card] of [
+            ["light", "#ffffff", "#f7f7f7", "#ffffff"],
+            ["dark", "#08090c", "#0b0c10", "#121318"],
+        ] as const) {
+            const variables = skinCSSVariables(DEFAULT_CLASSIC_SKIN, mode);
+            const modeCSS = mode === "dark" ? dark : css.slice(0, css.indexOf(".auth-scene {"));
+            expect(variables["--auth-page-bg"]).toBe(background);
+            expect(variables["--auth-panel-bg"]).toBe(panel);
+            expect(variables["--auth-card-bg"]).toBe(card);
+            for (const key of ["--auth-page-bg", "--auth-panel-bg", "--auth-card-bg", "--auth-accent", "--auth-muted"]) {
+                expect(modeCSS).toContain(`${key}: ${variables[key]};`);
+            }
+        }
+    });
+
+    test("auth inherits the global Ant Design provider instead of forcing dark controls", () => {
+        const scene = source("pages/auth/auth-scene.tsx");
+        expect(scene).not.toContain("ConfigProvider");
+        expect(scene).not.toContain("getAntThemeConfig");
+        expect(scene).not.toContain("auth-card-dark");
+        expect(scene.match(/<main className="([^"]+)"/)?.[1]).not.toContain("text-white");
+        expect(scene).toContain("auth-scene-hero");
+        expect(scene).toContain("<BrandLogo theme={theme}");
+        expect(source("components/layout/app-providers.tsx")).toContain("getAntThemeConfig(dark, appearance.activeSkin)");
+    });
+
+    test("form labels, links and notices do not assume white text", () => {
+        for (const page of ["login", "register", "forgot-password"]) {
+            const form = source(`pages/auth/${page}.tsx`);
+            expect(form).not.toMatch(/(?:text|border|bg)-white/);
+            expect(form).not.toMatch(/text-(?:blue|amber)-[123]00/);
+            expect(form).toContain("auth-scene-label");
+            expect(form).toContain("auth-scene-icon");
+        }
+        expect(source("pages/auth/register.tsx")).toContain("auth-scene-notice");
+        expect(source("pages/auth/forgot-password.tsx")).toContain("auth-scene-notice");
+    });
+
+    test("focus and autofill keep theme-aware foregrounds and visible focus", () => {
+        const css = source("styles/globals.css");
+        expect(css).not.toContain(".auth-card-dark");
+        expect(css).toContain(".auth-scene-card input:-webkit-autofill");
+        expect(css).toContain("-webkit-text-fill-color: var(--foreground) !important");
+        expect(css).toContain("box-shadow: 0 0 0 1000px var(--auth-card-bg) inset !important");
+        expect(css).toContain(".auth-scene-link:focus-visible");
+        expect(css).toContain("box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--ring) 18%, transparent)");
+    });
+
+    test("custom auth palettes are preserved per mode", () => {
+        const skin = duplicateSkinDefinition(DEFAULT_CLASSIC_SKIN, ["classic"]);
+        skin.tokens.light.authPanel = "#f6ebe3";
+        skin.tokens.light.authCard = "#fffdf9";
+        skin.tokens.dark.authPanel = "#21120e";
+        skin.tokens.dark.authCard = "#361f17";
+        expect(skinCSSVariables(skin, "light")["--auth-panel-bg"]).toBe("#f6ebe3");
+        expect(skinCSSVariables(skin, "light")["--auth-card-bg"]).toBe("#fffdf9");
+        expect(skinCSSVariables(skin, "dark")["--auth-panel-bg"]).toBe("#21120e");
+        expect(skinCSSVariables(skin, "dark")["--auth-card-bg"]).toBe("#361f17");
+    });
+});