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

client/src/layouts/AuthLayout.tsx

@@ -1,9 +1,15 @@
 import { Outlet } from "react-router-dom";
 import { Button } from "../components/ui/button";
 import { usePwaUpdatePrompt } from "../hooks/usePwaUpdatePrompt";
+import { cn } from "../lib/utils";
 
-export function AuthLayout() {
+type AuthLayoutProps = {
+  variant?: "default" | "login";
+};
+
+export function AuthLayout({ variant = "default" }: AuthLayoutProps) {
   const { updateReady, applyUpdate, dismissUpdate } = usePwaUpdatePrompt();
+  const isLoginLayout = variant === "login";
 
   return (
     <div className="auth-shell relative min-h-screen overflow-hidden px-4 py-8 sm:px-6 lg:px-10">
@@ -11,8 +17,23 @@ export function AuthLayout() {
         aria-hidden="true"
         className="auth-shell__grid pointer-events-none absolute inset-0"
       />
-      <div aria-hidden="true" className="auth-shell__rail pointer-events-none absolute inset-y-8 left-[max(1rem,calc((100vw-520px)/2-88px))] hidden w-px lg:block" />
-      <div className="relative mx-auto flex min-h-[calc(100vh-4rem)] max-w-[460px] flex-col justify-center">
+      <div
+        aria-hidden="true"
+        className={cn(
+          "auth-shell__rail pointer-events-none absolute inset-y-8 hidden w-px lg:block",
+          isLoginLayout
+            ? "left-[max(1rem,calc((100vw-960px)/2-48px))]"
+            : "left-[max(1rem,calc((100vw-520px)/2-88px))]",
+        )}
+      />
+      <div
+        className={cn(
+          "relative mx-auto flex min-h-[calc(100vh-4rem)] flex-col justify-center",
+          isLoginLayout ? "max-w-[460px] lg:max-w-[920px]" : "max-w-[460px]",
+        )}
+        data-layout-variant={variant}
+        data-testid="auth-layout-container"
+      >
         {updateReady ? (
           <div className="mb-4 rounded-lg border border-primary/20 bg-white/95 px-4 py-3 text-sm text-slate-700 shadow-sm" data-testid="auth-pwa-update-notice">
             <div className="font-medium text-slate-900">系统有新版本</div>

client/src/pages/LoginPage.tsx

@@ -233,6 +233,78 @@ export function LoginPage() {
     setEmailCodeMessage("");
   }
 
+  function renderBrowserEnterprisePanel() {
+    if (!pcWecomEntry && !showBrowserWecomNotice && !oidcProvider) {
+      return null;
+    }
+
+    return (
+      <section
+        className={pcWecomEntry
+          ? "order-2 space-y-3 lg:order-1 lg:flex lg:min-h-[320px] lg:flex-col lg:justify-center lg:border-r lg:border-slate-200 lg:pr-8"
+          : "space-y-3"}
+        data-testid="login-enterprise-panel"
+      >
+        <div className={pcWecomEntry ? "lg:hidden" : ""}>
+          <div className="flex items-center gap-3 text-xs text-slate-400">
+            <span className="h-px flex-1 bg-slate-100" />
+            <span>企业入口</span>
+            <span className="h-px flex-1 bg-slate-100" />
+          </div>
+        </div>
+
+        {pcWecomEntry ? (
+          <div className="hidden lg:block">
+            <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
+              <Building2 aria-hidden="true" className="h-5 w-5" />
+            </div>
+            <h2 className="mt-5 text-lg font-semibold text-slate-950">企业微信登录</h2>
+            <p className="mt-2 text-sm leading-6 text-slate-600">
+              前往企业微信官方登录页，使用手机企业微信扫码后进入 OA 工作台。
+            </p>
+          </div>
+        ) : null}
+
+        {pcWecomEntry ? (
+          <Button
+            className="w-full lg:h-12 lg:border-transparent lg:bg-[var(--color-accent-primary)] lg:text-white lg:hover:border-transparent lg:hover:bg-[var(--color-accent-primary-hover)]"
+            data-testid="wecom-entry-pc"
+            type="button"
+            variant="secondary"
+            onClick={handlePcWecomLogin}
+          >
+            <Building2 aria-hidden="true" className="mr-2 hidden h-4 w-4 lg:block" />
+            企业微信扫码登录
+          </Button>
+        ) : showBrowserWecomNotice ? (
+          <div
+            className="auth-side-entry flex gap-3 text-slate-600"
+            data-testid="wecom-entry-browser-notice"
+          >
+            <Building2 aria-hidden="true" className="mt-0.5 h-4 w-4 flex-none text-primary" />
+            <div>
+              <div className="font-medium text-slate-900">企业微信一键进入</div>
+              <div>请从企业微信工作台打开 OA；普通浏览器使用密码或邮箱验证码。</div>
+            </div>
+          </div>
+        ) : null}
+
+        {oidcProvider ? (
+          <Button
+            className="w-full"
+            type="button"
+            variant="secondary"
+            onClick={() => {
+              window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
+            }}
+          >
+            使用{oidcProvider.label}
+          </Button>
+        ) : null}
+      </section>
+    );
+  }
+
   function renderPasswordPanel(testId: string) {
     return (
       <div data-testid={testId}>
@@ -376,16 +448,13 @@ export function LoginPage() {
   }
 
   return (
-    <AuthPanel title="海音达 OA" subtitle={showWecomPrimary ? "企业微信环境优先免登" : "选择一种方式进入工作台"}>
+    <AuthPanel
+      className={pcWecomEntry ? "lg:p-8" : "lg:mx-auto lg:max-w-[460px]"}
+      data-testid="login-auth-panel"
+      title="海音达 OA"
+      subtitle={showWecomPrimary ? "企业微信环境优先免登" : "选择一种方式进入工作台"}
+    >
       <div className="space-y-4">
-        {!showWecomPrimary ? (
-          <div className="ux-command-note">
-            {pcWecomEntry
-              ? "可使用企业微信扫码登录；企业邮箱验证码和账号密码作为备用方式。"
-              : "员工日常建议用企业邮箱验证码；固定办公电脑可使用账号密码。企业微信免登需要从企业微信工作台打开。"}
-          </div>
-        ) : null}
-
         {wecomNotice ? (
           <div className={`rounded-lg border px-3.5 py-2.5 text-sm ${noticeClasses(wecomNotice.tone)}`} data-testid="login-wecom-notice">
             <div className="font-medium">{wecomNotice.title}</div>
@@ -415,80 +484,62 @@ export function LoginPage() {
           </div>
         ) : null}
 
-        {!showWecomPrimary ? (
-          <div className="auth-mode-switch" data-testid="login-mode-switch">
-            <button
-              aria-pressed={loginMode === "password"}
-              className={`auth-mode-switch__item ${loginMode === "password" ? "auth-mode-switch__item--active" : "auth-mode-switch__item--idle"}`}
-              data-testid="login-mode-password"
-              type="button"
-              onClick={() => selectLoginMode("password")}
+        {showWecomPrimary ? (
+          showPasswordPanel ? renderPasswordPanel("login-password-secondary-panel") : null
+        ) : (
+          <div
+            className={pcWecomEntry
+              ? "flex flex-col gap-5 lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(360px,404px)] lg:gap-8"
+              : "mx-auto max-w-[404px] space-y-4"}
+            data-layout={pcWecomEntry ? "desktop-split" : "single-column"}
+            data-testid="login-browser-layout"
+          >
+            <section
+              className={pcWecomEntry ? "order-1 space-y-4 lg:order-2" : "space-y-4"}
+              data-testid="login-fallback-panel"
             >
-              账号密码
-            </button>
-            <button
-              aria-pressed={loginMode === "email_code"}
-              className={`auth-mode-switch__item ${loginMode === "email_code" ? "auth-mode-switch__item--active" : "auth-mode-switch__item--idle"}`}
-              data-testid="login-mode-email-code"
-              type="button"
-              onClick={() => selectLoginMode("email_code")}
-            >
-              邮箱验证码
-            </button>
-          </div>
-        ) : null}
-
-        {showPasswordPanel
-          ? !showWecomPrimary && loginMode === "email_code"
-            ? renderEmailCodePanel("login-email-code-panel")
-            : renderPasswordPanel(showWecomPrimary ? "login-password-secondary-panel" : "login-password-primary-panel")
-          : null}
-
-        {!showWecomPrimary && (pcWecomEntry || showBrowserWecomNotice || oidcProvider) ? (
-          <div className="space-y-3">
-            <div className="flex items-center gap-3 text-xs text-slate-400">
-              <span className="h-px flex-1 bg-slate-100" />
-              <span>企业入口</span>
-              <span className="h-px flex-1 bg-slate-100" />
-            </div>
-
-            {pcWecomEntry ? (
-              <Button
-                className="w-full"
-                data-testid="wecom-entry-pc"
-                type="button"
-                variant="secondary"
-                onClick={handlePcWecomLogin}
-              >
-                企业微信扫码登录
-              </Button>
-            ) : showBrowserWecomNotice ? (
-              <div
-                className="auth-side-entry flex gap-3 text-slate-600"
-                data-testid="wecom-entry-browser-notice"
-              >
-                <Building2 aria-hidden="true" className="mt-0.5 h-4 w-4 flex-none text-primary" />
-                <div>
-                  <div className="font-medium text-slate-900">企业微信一键进入</div>
-                  <div>请从企业微信工作台打开 OA；普通浏览器使用密码或邮箱验证码。</div>
-                </div>
+              <div className="ux-command-note lg:hidden">
+                {pcWecomEntry
+                  ? "可使用企业微信扫码登录；企业邮箱验证码和账号密码作为备用方式。"
+                  : "员工日常建议用企业邮箱验证码；固定办公电脑可使用账号密码。企业微信免登需要从企业微信工作台打开。"}
               </div>
-            ) : null}
 
-            {oidcProvider ? (
-              <Button
-                className="w-full"
-                type="button"
-                variant="secondary"
-                onClick={() => {
-                  window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
-                }}
-              >
-                使用{oidcProvider.label}
-              </Button>
-            ) : null}
+              {pcWecomEntry ? (
+                <div className="hidden lg:block">
+                  <h2 className="text-base font-semibold text-slate-950">备用登录</h2>
+                  <p className="mt-1 text-sm leading-6 text-slate-500">使用账号密码或企业邮箱验证码。</p>
+                </div>
+              ) : null}
+
+              <div className="auth-mode-switch" data-testid="login-mode-switch">
+                <button
+                  aria-pressed={loginMode === "password"}
+                  className={`auth-mode-switch__item ${loginMode === "password" ? "auth-mode-switch__item--active" : "auth-mode-switch__item--idle"}`}
+                  data-testid="login-mode-password"
+                  type="button"
+                  onClick={() => selectLoginMode("password")}
+                >
+                  账号密码
+                </button>
+                <button
+                  aria-pressed={loginMode === "email_code"}
+                  className={`auth-mode-switch__item ${loginMode === "email_code" ? "auth-mode-switch__item--active" : "auth-mode-switch__item--idle"}`}
+                  data-testid="login-mode-email-code"
+                  type="button"
+                  onClick={() => selectLoginMode("email_code")}
+                >
+                  邮箱验证码
+                </button>
+              </div>
+
+              {loginMode === "email_code"
+                ? renderEmailCodePanel("login-email-code-panel")
+                : renderPasswordPanel("login-password-primary-panel")}
+            </section>
+
+            {renderBrowserEnterprisePanel()}
           </div>
-        ) : null}
+        )}
       </div>
     </AuthPanel>
   );

client/src/router/index.tsx

@@ -95,7 +95,7 @@ const routeElements = (
         path="/login"
         element={
           <GuestOnly>
-            <AuthLayout />
+            <AuthLayout variant="login" />
           </GuestOnly>
         }
       >

client/tests/e2e/login-portal-ux.spec.ts

@@ -386,6 +386,10 @@ test("登录页提供找回密码、密码显隐，PWA 更新不会清空正在
 
   await page.getByRole("link", { name: "忘记密码？" }).click();
   await expect(page).toHaveURL(/\/forgot-password$/);
+  await expect(page.getByTestId("auth-layout-container")).toHaveAttribute("data-layout-variant", "default");
+  const forgotPasswordLayoutBox = await page.getByTestId("auth-layout-container").boundingBox();
+  expect(forgotPasswordLayoutBox).not.toBeNull();
+  expect(forgotPasswordLayoutBox!.width).toBeLessThanOrEqual(460);
 });
 
 test("邮箱验证码登录可发送验证码并进入工作台", async ({ page }) => {

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