优化 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>
         }
       >