hyb-oa/.trellis/tasks/07-30-pc-login-desktop-layout/prd.md

PC 登录页桌面布局优化

Goal

让普通 PC 浏览器中的 OA 登录页呈现明确的桌面端信息层级和合理空间利用，不再像放大后的手机卡片；同时保持已经完成真实验收的企业微信扫码登录、账号密码、邮箱验证码、找回密码、回跳和错误提示行为不变。

Background

• 当前普通浏览器登录页由共享 AuthLayout 约束为最大宽度 460px，桌面视口仍使用单列卡片，因此用户明确反馈“过窄、像手机页面”。
• 登录页同时承载企业微信扫码入口、账号密码和邮箱验证码；现有企业微信扫码链路已经完成生产真实验收。
• AuthLayout 也被找回密码和修改密码页面复用，不能为了登录页变宽而无意改变全部认证页面。
• 现有移动端和企业微信 WebView 登录路径已有独立行为，本任务只处理普通 PC 浏览器的桌面布局表达。

Scope

• 普通 PC 浏览器 /login 的页面级宽版容器和响应式功能双栏。
• 企业微信扫码主入口、密码/邮箱验证码备用登录区的视觉层级与布局重组。
• 375px、768px、1024px、1440px 代表性视口和企业微信 WebView 的布局回归。
• 登录页聚焦 Playwright、截图复核和前端/项目治理门禁。

Requirements

R1 桌面布局

• 普通 PC 浏览器在桌面断点采用“左侧企业微信主入口、右侧备用登录表单”的功能双栏，使用更符合桌面操作的宽度、分区和留白，不能只把现有 460px 单列卡片机械拉宽。
• 登录方式的优先级必须清晰：企业微信扫码为日常首选，账号密码和邮箱验证码为可见、可用的回退方式。
• 表单控件保持适合阅读和输入的宽度，不因外层加宽而出现过长输入框。
• PC 扫码入口不可用时，页面应自然退回受控的单栏表单表达，不保留空白主入口栏。

R2 响应式与共享页面边界

• 手机和窄屏继续使用现有单列登录体验，不出现横向滚动、截断或双栏挤压。
• 企业微信 WebView 继续优先展示一键进入及必要的密码回退，不套用普通 PC 扫码布局。
• 找回密码、修改密码等共享 AuthLayout 页面默认保持现状；如需调整共享容器，只能通过页面级布局能力显式启用。

R3 认证行为零变更

• 不修改企业微信配置接口、扫码跳转、OAuth/state/cookie、回调、账号映射、会话、审计和生产开关。
• 不修改账号密码、邮箱验证码、找回密码、PWA 更新提示、安全 redirect 或设备指纹行为。
• 保留现有自动化依赖的登录控件语义和 data-testid；仅在视觉验收确有需要时增加布局测试标识。

R4 视觉与可访问性

• 复用现有品牌、主题 token、AuthPanel、按钮、输入框和状态提示，不新建平行设计系统，不引入额外 UI 依赖。
• 保持可见标签、键盘焦点、足够对比度、状态提示语义和 prefers-reduced-motion 边界。
• 桌面布局至少覆盖 1024px 和 1440px；响应式回归至少覆盖 375px 和 768px。

Acceptance Criteria

• 1024px 与 1440px 普通浏览器中，登录页形成明确的桌面端布局，不再呈现居中的 460px 手机式窄卡片。
• 企业微信扫码入口在桌面首屏具有清晰主入口地位，账号密码和邮箱验证码仍可直接找到并正常切换。
• 375px 与 768px 视口保持单列、无横向滚动，现有输入、提示和按钮完整可用。
• 企业微信 WebView 的一键进入、失败提示和账号密码回退布局及行为不回退。
• 找回密码和修改密码页面未被登录页的桌面专属布局意外扩宽或改版。
• 现有登录方式、returnTo、设备指纹、PWA 输入保持和扫码入口自动化回归通过。
• 前端 typecheck、build、聚焦 Playwright、代表性视口截图、Trellis 治理检查和 git diff --check 通过。
• 未经另行批准未修改生产配置或部署；当前仅能说明本地验证通过，尚未线上可测。

Local Verification Evidence (2026-07-31)

• 1024px 与 1440px 截图确认桌面功能双栏、企业微信主入口和约 404px 备用表单列；375px 与 768px 截图确认单列、表单先于企业入口且无横向滚动。
• 聚焦 Playwright 共 19 项通过，覆盖扫码跳转参数、企微 WebView、密码/邮箱验证码、找回密码、PWA 输入保持、扫码关闭回退及四档视口布局。
• npm run build 通过，Vite 转换 2383 个模块，PWA 生成 102 个预缓存条目。
• task validate、流程合同、文档注册审计、Trellis 治理和 git diff --check 通过；文档审计保留 22 个未注册 docs 文件的既有 warning，本任务未新增文档。
• 未修改服务端、认证接口、企微配置、生产配置或业务数据，未执行部署和公网检查。

Out of Scope

• 认证协议、服务端接口、企业微信后台配置、生产功能开关和账号映射规则。
• 在 OA 页面内嵌企业微信二维码、引入企微 SDK/script/iframe 或重做扫码流程。
• 找回密码、验证码失效提示、首次改密和全员账号回退体验收口。
• 移动端或企业微信 WebView 的视觉重构。
• 新增营销式欢迎页、功能宣传、轮播、客户背书或无实际作用的装饰内容。

Key Decision

• 用户已确认：普通 PC 浏览器在桌面断点采用功能双栏，左侧突出企业微信扫码入口，右侧承载账号密码与邮箱验证码回退；窄屏和企业微信 WebView 不采用该双栏。

Test Plan

• Playwright 覆盖 1024px/1440px 双栏，375px/768px 单栏，扫码关闭单栏和企业微信 WebView 单栏，并断言实际布局边界与无横向滚动。
• 回归企业微信扫码入口的 entrySource、returnTo 和设备指纹，密码/邮箱验证码切换、找回密码入口及 PWA 输入保持。
• 生成桌面与移动代表性截图，人工复核信息层级、表单宽度、间距、对比度和焦点状态。
• 执行 cd client && npm run typecheck && npm run build、聚焦 Playwright、Trellis task validate、流程/文档/治理检查及 git diff --check。