优化 PC 登录页桌面布局（07-30-pc-login-desktop-layout）

client/tests/e2e/wecom-entry.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-function mockWecomConfigPayload() {
+function mockWecomConfigPayload(overrides: Record<string, unknown> = {}) {
   return {
     enabled: true,
     entryEnabled: true,
@@ -14,6 +14,7 @@ function mockWecomConfigPayload() {
     defaultReturnTo: "/mobile",
     status: "ready",
     statusReasons: [],
+    ...overrides,
   };
 }
 
@@ -45,12 +46,12 @@ async function mockAuthBase(page: import("@playwright/test").Page) {
   });
 }
 
-async function mockWecomConfig(page: import("@playwright/test").Page) {
+async function mockWecomConfig(page: import("@playwright/test").Page, overrides: Record<string, unknown> = {}) {
   await page.route("**/api/auth/wecom/config", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
-      body: JSON.stringify(envelope(mockWecomConfigPayload())),
+      body: JSON.stringify(envelope(mockWecomConfigPayload(overrides))),
     });
   });
 }
@@ -75,6 +76,7 @@ test("E2E 企微入口：普通浏览器显示托管扫码入口并保留安全
 });
 
 test("E2E 企微入口：企业微信场景优先显示企微 CTA，并展示映射缺失提示", async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 960 });
   await page.addInitScript(() => {
     Object.defineProperty(window.navigator, "userAgent", {
       configurable: true,
@@ -98,4 +100,106 @@ test("E2E 企微入口：企业微信场景优先显示企微 CTA，并展示映
   await expect(page.getByTestId("login-wecom-notice")).toContainText("企业微信账号映射尚未完成");
   await expect(page.getByTestId("login-wecom-notice")).not.toContainText("账号密码登录");
   await expect(page.getByTestId("login-password-secondary-panel")).toBeVisible();
+  await expect(page.getByTestId("login-browser-layout")).toHaveCount(0);
+  const panelBox = await page.getByTestId("login-auth-panel").boundingBox();
+  expect(panelBox).not.toBeNull();
+  expect(panelBox!.width).toBeLessThanOrEqual(460);
+});
+
+for (const viewport of [
+  { width: 1024, height: 768 },
+  { width: 1440, height: 960 },
+]) {
+  test(`PC 登录布局：${viewport.width}px 使用企业微信与备用登录功能双栏`, async ({ page }) => {
+    await page.setViewportSize(viewport);
+    await mockAuthBase(page);
+    await mockWecomConfig(page);
+
+    await page.goto("/login");
+
+    const layout = page.getByTestId("auth-layout-container");
+    const browserLayout = page.getByTestId("login-browser-layout");
+    const enterprise = page.getByTestId("login-enterprise-panel");
+    const fallback = page.getByTestId("login-fallback-panel");
+
+    await expect(layout).toHaveAttribute("data-layout-variant", "login");
+    await expect(browserLayout).toHaveAttribute("data-layout", "desktop-split");
+
+    const [layoutBox, enterpriseBox, fallbackBox] = await Promise.all([
+      layout.boundingBox(),
+      enterprise.boundingBox(),
+      fallback.boundingBox(),
+    ]);
+    expect(layoutBox).not.toBeNull();
+    expect(enterpriseBox).not.toBeNull();
+    expect(fallbackBox).not.toBeNull();
+    expect(layoutBox!.width).toBeGreaterThanOrEqual(880);
+    expect(enterpriseBox!.x).toBeLessThan(fallbackBox!.x);
+    expect(enterpriseBox!.width).toBeGreaterThan(280);
+    expect(fallbackBox!.width).toBeGreaterThan(340);
+    expect(fallbackBox!.width).toBeLessThan(440);
+    expect(Math.abs(enterpriseBox!.y - fallbackBox!.y)).toBeLessThan(2);
+    await expect(page.getByRole("heading", { name: "企业微信登录" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "备用登录" })).toBeVisible();
+    if (process.env.PC_LOGIN_LAYOUT_SCREENSHOTS === "1") {
+      await page.screenshot({
+        fullPage: true,
+        path: `../output/playwright/pc-login-${viewport.width}.png`,
+      });
+    }
+  });
+}
+
+for (const viewport of [
+  { width: 375, height: 812 },
+  { width: 768, height: 900 },
+]) {
+  test(`窄屏登录布局：${viewport.width}px 保持单列且表单先于企业入口`, async ({ page }) => {
+    await page.setViewportSize(viewport);
+    await mockAuthBase(page);
+    await mockWecomConfig(page);
+
+    await page.goto("/login");
+
+    const layoutBox = await page.getByTestId("auth-layout-container").boundingBox();
+    const enterpriseBox = await page.getByTestId("login-enterprise-panel").boundingBox();
+    const fallbackBox = await page.getByTestId("login-fallback-panel").boundingBox();
+    expect(layoutBox).not.toBeNull();
+    expect(enterpriseBox).not.toBeNull();
+    expect(fallbackBox).not.toBeNull();
+    expect(layoutBox!.width).toBeLessThanOrEqual(460);
+    expect(fallbackBox!.y).toBeLessThan(enterpriseBox!.y);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(viewport.width);
+    await expect(page.getByRole("heading", { name: "企业微信登录" })).toBeHidden();
+    await expect(page.getByRole("heading", { name: "备用登录" })).toBeHidden();
+    if (process.env.PC_LOGIN_LAYOUT_SCREENSHOTS === "1") {
+      await page.screenshot({
+        fullPage: true,
+        path: `../output/playwright/pc-login-${viewport.width}.png`,
+      });
+    }
+  });
+}
+
+test("PC 登录布局：扫码配置关闭时回退为受控单栏", async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 960 });
+  await mockAuthBase(page);
+  await mockWecomConfig(page, {
+    pcWebLoginEnabled: false,
+    pcLoginUrl: null,
+  });
+
+  await page.goto("/login");
+
+  await expect(page.getByTestId("login-browser-layout")).toHaveAttribute("data-layout", "single-column");
+  await expect(page.getByTestId("wecom-entry-pc")).toHaveCount(0);
+  await expect(page.getByTestId("wecom-entry-browser-notice")).toBeVisible();
+  const panelBox = await page.getByTestId("login-auth-panel").boundingBox();
+  const fallbackBox = await page.getByTestId("login-fallback-panel").boundingBox();
+  const enterpriseBox = await page.getByTestId("login-enterprise-panel").boundingBox();
+  expect(panelBox).not.toBeNull();
+  expect(fallbackBox).not.toBeNull();
+  expect(enterpriseBox).not.toBeNull();
+  expect(panelBox!.width).toBeLessThanOrEqual(460);
+  expect(fallbackBox!.y).toBeLessThan(enterpriseBox!.y);
 });