修复首屏：增加预加载占位并提前恢复主题

tests/review-startup.e2e.test.mjs

@@ -0,0 +1,286 @@
+/** 首屏回归：延迟真实入口脚本时仍显示稳定占位，并在业务代码执行前恢复用户主题。 */
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+  appOrigin,
+  backendOrigin,
+  login,
+  scenario,
+} from "./helpers/console-browser.mjs";
+
+for (const preference of [
+  { stored: "dark", system: "light", dark: true },
+  { stored: "light", system: "dark", dark: false },
+  { stored: "auto", system: "dark", dark: true },
+  { stored: "auto", system: "light", dark: false },
+  { stored: "unknown", system: "dark", dark: true },
+]) {
+  test(
+    `cold refresh keeps a styled loading shell before scripts: ${preference.stored}/${preference.system}`,
+    { timeout: 25000 },
+    (t) =>
+      scenario(t, {}, async (page) => {
+        await page.emulateMedia({ colorScheme: preference.system });
+        await page.addInitScript((mode) => {
+          localStorage.setItem("theme", mode);
+        }, preference.stored);
+        let releaseScripts;
+        const scriptsHeld = new Promise((resolve) => {
+          releaseScripts = resolve;
+        });
+        let markRequested;
+        const requested = new Promise((resolve) => {
+          markRequested = resolve;
+        });
+        await page.route(`${appOrigin}/_nuxt/*.js`, async (route) => {
+          markRequested();
+          await scriptsHeld;
+          await route.continue();
+        });
+        let before;
+        try {
+          await page.goto(`${appOrigin}/login`, { waitUntil: "commit" });
+          await requested;
+          await page.getByRole("status", { name: "页面加载中" }).waitFor();
+          before = await page.evaluate(() => ({
+            dark: document.documentElement.classList.contains("app-dark"),
+            colorScheme: document.documentElement.style.colorScheme,
+            rootChildren: document.getElementById("__nuxt").children.length,
+            viewport: innerWidth,
+            scrollWidth: document.documentElement.scrollWidth,
+            loaderBackground: getComputedStyle(
+              document.getElementById("console-startup"),
+            ).backgroundColor,
+            loaderPosition: getComputedStyle(
+              document.getElementById("console-startup"),
+            ).position,
+          }));
+          assert.equal(before.dark, preference.dark);
+          assert.equal(before.colorScheme, preference.dark ? "dark" : "light");
+          assert.equal(before.rootChildren, 0);
+          assert.equal(before.scrollWidth, before.viewport);
+          assert.equal(before.loaderPosition, "fixed");
+          assert.equal(
+            before.loaderBackground,
+            preference.dark ? "rgb(24, 24, 27)" : "rgb(248, 250, 252)",
+          );
+        } finally {
+          releaseScripts();
+        }
+        await page.locator(".blank-layout").waitFor();
+        await page.getByRole("status", { name: "页面加载中" }).waitFor({
+          state: "detached",
+        });
+        assert.equal(
+          await page
+            .locator("html")
+            .evaluate((html) => html.classList.contains("app-dark")),
+          preference.dark,
+        );
+        await page.getByText("密码登录", { exact: true }).click();
+        await page.locator("input[type=password]").waitFor();
+        return {
+          themeBeforeScripts: before.dark,
+          styledShellBeforeScripts: true,
+          loadingShellRemoved: true,
+          loginInteractive: true,
+        };
+      }),
+  );
+}
+
+for (const boundary of ["bootstrap", "route-css"]) {
+  test(
+    `mobile refresh keeps the shell until ${boundary} is ready`,
+    { timeout: 25000 },
+    (t) =>
+      scenario(t, {}, async (page) => {
+        await page.setViewportSize({ width: 390, height: 844 });
+        await page.emulateMedia({
+          colorScheme: "dark",
+          reducedMotion: "reduce",
+        });
+        await page.addInitScript(() => {
+          window.startupFrames = [];
+          // 在浏览器实际绘制边界采样占位退场后的前三帧，不向产品代码加入测试状态。
+          function sample() {
+            const shell = document.querySelector(".auth-shell");
+            if (shell && !document.getElementById("__nuxt-loader")) {
+              const style = getComputedStyle(shell);
+              window.startupFrames.push({
+                boxSizing: style.boxSizing,
+                display: style.display,
+                width: shell.getBoundingClientRect().width,
+                viewport: innerWidth,
+                scrollWidth: document.documentElement.scrollWidth,
+                dark: document.documentElement.classList.contains("app-dark"),
+              });
+            }
+            if (window.startupFrames.length < 3) requestAnimationFrame(sample);
+          }
+          requestAnimationFrame(sample);
+        });
+        let release;
+        const held = new Promise((resolve) => {
+          release = resolve;
+        });
+        let markRequested;
+        const requested = new Promise((resolve) => {
+          markRequested = resolve;
+        });
+        const url =
+          boundary === "bootstrap"
+            ? `${backendOrigin}/console/v1/common`
+            : `${appOrigin}/_nuxt/login.*.css`;
+        await page.route(url, async (route) => {
+          markRequested();
+          await held;
+          await route.continue();
+        });
+        try {
+          await page.goto(`${appOrigin}/login`, { waitUntil: "commit" });
+          await requested;
+          await page.getByRole("status", { name: "页面加载中" }).waitFor();
+          assert.equal(
+            await page
+              .locator(".startup-spinner")
+              .evaluate((element) => getComputedStyle(element).animationName),
+            "none",
+          );
+        } finally {
+          release();
+        }
+        await page.locator(".auth-shell").waitFor();
+        await page.getByRole("status", { name: "页面加载中" }).waitFor({
+          state: "detached",
+        });
+        await page.waitForFunction(() => window.startupFrames.length === 3);
+        const frames = await page.evaluate(() => window.startupFrames);
+        for (const appearance of frames) {
+          assert.equal(appearance.boxSizing, "border-box");
+          assert.equal(appearance.display, "grid");
+          assert.equal(appearance.dark, true);
+          assert.ok(appearance.width <= appearance.viewport);
+          assert.equal(appearance.scrollWidth, appearance.viewport);
+        }
+        assert.deepEqual(frames[0], frames[2]);
+        return {
+          boundary,
+          shellDuringWait: true,
+          shellRemoved: true,
+          firstVisibleFrames: frames,
+        };
+      }),
+  );
+}
+
+test(
+  "delayed font downloads do not keep the startup shell over a usable page",
+  { timeout: 25000 },
+  (t) =>
+    scenario(t, {}, async (page) => {
+      let release;
+      const held = new Promise((resolve) => {
+        release = resolve;
+      });
+      let markRequested;
+      const requested = new Promise((resolve) => {
+        markRequested = resolve;
+      });
+      await page.route(/\.woff2(?:\?|$)/, async (route) => {
+        markRequested();
+        await held;
+        await route.continue();
+      });
+      try {
+        await page.goto(`${appOrigin}/login`, { waitUntil: "commit" });
+        await requested;
+        await page.getByLabel("密码", { exact: true }).waitFor();
+        await page.getByRole("status", { name: "页面加载中" }).waitFor({
+          state: "detached",
+        });
+        await page
+          .getByLabel("账号", { exact: true })
+          .fill("audit@example.invalid");
+        assert.equal(
+          await page.getByLabel("账号", { exact: true }).inputValue(),
+          "audit@example.invalid",
+        );
+      } finally {
+        release();
+      }
+      return { interactiveBeforeFonts: true, loadingShellRemoved: true };
+    }),
+);
+
+test(
+  "bootstrap failure releases the shell and allows configuration recovery",
+  { timeout: 25000 },
+  (t) =>
+    scenario(t, {}, async (page) => {
+      let configurationAvailable = false;
+      await page.route(`${backendOrigin}/console/v1/common`, async (route) => {
+        if (configurationAvailable) return route.continue();
+        return route.fulfill({
+          json: { status: 500, msg: "站点配置暂不可用", data: {} },
+        });
+      });
+      await page.goto(`${appOrigin}/login`);
+      const retry = page.getByRole("button", { name: "重新加载", exact: true });
+      await retry.waitFor();
+      assert.equal(await page.locator("#__nuxt-loader").count(), 0);
+      configurationAvailable = true;
+      await retry.click();
+      await retry.waitFor({ state: "detached" });
+      await page.getByText("验证码登录", { exact: true }).click();
+      await page
+        .getByRole("button", { name: "获取验证码", exact: true })
+        .waitFor();
+      return { failureDoesNotTrapShell: true, configurationRecovered: true };
+    }),
+);
+
+test(
+  "member deep-link refresh restores layout without a second loading shell on navigation",
+  { timeout: 30000 },
+  (t) =>
+    scenario(t, {}, async (page) => {
+      await page.setViewportSize({ width: 390, height: 844 });
+      await page.emulateMedia({ colorScheme: "light" });
+      await login(page);
+      await page.goto(`${appOrigin}/security/ssh-keys`);
+      await page
+        .getByRole("heading", { name: "SSH 密钥", exact: true })
+        .waitFor();
+      await page.reload();
+      await page
+        .getByRole("heading", { name: "SSH 密钥", exact: true })
+        .waitFor();
+      await page
+        .getByRole("status", { name: "页面加载中" })
+        .waitFor({ state: "detached" });
+      const layout = await page.locator(".deni-layout").evaluate((element) => ({
+        boxSizing: getComputedStyle(element).boxSizing,
+        viewport: innerWidth,
+        scrollWidth: document.documentElement.scrollWidth,
+      }));
+      assert.equal(layout.boxSizing, "border-box");
+      assert.equal(layout.scrollWidth, layout.viewport);
+      await page.getByRole("button", { name: "打开菜单", exact: true }).click();
+      const navigation = page.getByRole("navigation", {
+        name: "会员中心导航",
+        exact: true,
+      });
+      await navigation
+        .getByRole("button", { name: "安全", exact: true })
+        .click();
+      await navigation
+        .getByRole("link", { name: "安全组", exact: true })
+        .click();
+      await page
+        .getByRole("heading", { name: "安全组", exact: true })
+        .waitFor();
+      assert.equal(await page.locator("#__nuxt-loader").count(), 0);
+      return { memberRefreshStyled: true, loadingShellOnlyAtStartup: true };
+    }),
+);