oa-auth-layout-wecom-login-ux 优化认证页登录布局

client/src/pages/LoginPage.tsx

@@ -5,6 +5,7 @@ import { fetchSsoProviders, fetchWecomConfig } from "../api/auth";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
 import { useAuth } from "../auth/AuthContext";
+import { AuthPanel } from "../components/auth/AuthPanel";
 import { getDeviceFingerprint } from "../auth/deviceFingerprint";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
@@ -108,7 +109,7 @@ export function LoginPage() {
 
   function renderPasswordPanel(testId: string) {
     return (
-      <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" data-testid={testId}>
+      <div data-testid={testId}>
         <form className="space-y-4" onSubmit={handleSubmit}>
           <div className="space-y-2">
             <Label htmlFor="login-identifier">账号</Label>
@@ -150,29 +151,22 @@ export function LoginPage() {
   }
 
   return (
-    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
-      <div>
-        <h1 className="text-xl font-semibold text-slate-900">登录工作台</h1>
-        <p className="mt-1 text-sm text-slate-500">
-          {showWecomPrimary ? "企业微信进入优先。" : "账号密码登录。"}
-        </p>
-      </div>
-
-      <div className="mt-6 space-y-4">
+    <AuthPanel title="登录工作台" subtitle={showWecomPrimary ? "企业微信进入优先" : "账号密码登录"}>
+      <div className="space-y-5">
         {wecomNotice ? (
-          <div className={`rounded-2xl border px-4 py-3 text-sm ${noticeClasses(wecomNotice.tone)}`} data-testid="login-wecom-notice">
+          <div className={`rounded-xl border px-4 py-3 text-sm ${noticeClasses(wecomNotice.tone)}`} data-testid="login-wecom-notice">
             <div className="font-medium">{wecomNotice.title}</div>
             <div className="mt-1 leading-6">{wecomNotice.description}</div>
           </div>
         ) : null}
 
         {showWecomPrimary ? (
-          <div className="rounded-xl border border-primary/20 bg-primary/5 p-4" data-testid="login-wecom-primary-panel">
+          <div className="space-y-3" data-testid="login-wecom-primary-panel">
             <Button className="w-full" data-testid="wecom-entry-primary" disabled={!wecomEntry} type="button" onClick={handleWecomLogin}>
-              {wecomConfigQuery.isLoading ? "准备中..." : "进入工作台"}
+              {wecomConfigQuery.isLoading ? "准备中..." : "企业微信一键进入"}
             </Button>
             {wecomConfig && !wecomEntry ? (
-              <div className="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm leading-6 text-amber-700">
+              <div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm leading-6 text-amber-700">
                 企业微信入口不可用，请用账号密码。
               </div>
             ) : null}
@@ -192,25 +186,35 @@ export function LoginPage() {
           ? renderPasswordPanel(showWecomPrimary ? "login-password-secondary-panel" : "login-password-primary-panel")
           : null}
 
-        {!showWecomPrimary && wecomEntry ? (
-          <Button className="w-full" data-testid="wecom-entry-secondary" type="button" variant="secondary" onClick={handleWecomLogin}>
-            企业微信登录
-          </Button>
-        ) : null}
+        {!showWecomPrimary && (wecomEntry || 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>
 
-        {!showWecomPrimary && oidcProvider ? (
-          <Button
-            className="w-full"
-            type="button"
-            variant="secondary"
-            onClick={() => {
-              window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
-            }}
-          >
-            使用{oidcProvider.label}
-          </Button>
+            {wecomEntry ? (
+              <Button className="w-full" data-testid="wecom-entry-secondary" type="button" variant="secondary" onClick={handleWecomLogin}>
+                企业微信登录
+              </Button>
+            ) : null}
+
+            {oidcProvider ? (
+              <Button
+                className="w-full"
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  window.location.assign(`${oidcProvider.loginUrl}?returnTo=${encodeURIComponent(redirectTo)}`);
+                }}
+              >
+                使用{oidcProvider.label}
+              </Button>
+            ) : null}
+          </div>
         ) : null}
       </div>
-    </div>
+    </AuthPanel>
   );
 }