优化 PC 登录页桌面布局（07-30-pc-login-desktop-layout）
这个提交包含在：
+130
-79
@@ -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>
|
||||
);
|
||||
|
||||
在新工单中引用
屏蔽一个用户