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

PC 登录页桌面布局优化实施计划

1. Preconditions

• 用户确认创建独立 Trellis task。
• 用户确认桌面端采用“左侧企业微信主入口、右侧备用登录表单”的功能双栏。
• 用户已批准本 PRD、设计和实施计划，可以运行 task.py start 并修改产品代码。

2. Implementation

• 为 AuthLayout 增加显式登录页宽版 variant，并在路由中只对 /login 启用；默认认证页宽度保持不变。
• 重组 LoginPage 的展示层，把全局提示、企业微信主入口和备用登录表单整理为响应式分区。
• 在普通 PC 浏览器且扫码可用时启用桌面功能双栏；扫码不可用、窄屏和企微 WebView 使用受控单栏。
• 保留现有认证查询、跳转、回跳、设备指纹、表单状态、错误处理和全部既有控件测试标识。
• 未增加依赖、平行设计系统或新的 CSS token，仅复用现有 Tailwind、主题 token 和共享组件。

3. Focused Validation

• 扩充登录页 Playwright 覆盖：1440px 双栏、1024px 双栏、768px 单栏、375px 单栏、扫码关闭单栏、企业微信 WebView 单栏。
• 断言桌面双栏的实际边界、相对位置和合理表单宽度，而不只断言元素存在。
• 回归企业微信扫码跳转的 entrySource、returnTo 和设备指纹，以及密码/邮箱切换、找回密码和 PWA 输入保持。
• 生成代表性桌面与移动截图并人工复核信息层级、留白、对比度、焦点和无横向滚动。

建议命令：

cd client && npx playwright test tests/e2e/wecom-entry.spec.ts tests/e2e/login-portal-ux.spec.ts --workers=1 --reporter=list
cd client && npm run typecheck
cd client && npm run build

4. Project Gates

• python3 ./.trellis/scripts/task.py validate 07-30-pc-login-desktop-layout
• node scripts/qa/check-process-contract.mjs --baseline --json
• node scripts/qa/audit-docs.mjs --check-registry
• node scripts/qa/check-trellis-governance.mjs
• git diff --check

5. Review and Rollback

• 对最终 diff 做认证零变更复核，确认没有服务端、接口、配置、回调或生产文件变化。
• 已通过 1024px 首轮测试发现备用列过宽并收敛到约 404px；未通过改认证逻辑绕过视觉问题。
• 已确认生产部署不属于当前规划批准；如需部署，另行申请并按项目公网检查边界执行。

6. Local Evidence (2026-07-31)

• E2E_BASE_URL=http://127.0.0.1:5173 npx playwright test tests/e2e/wecom-entry.spec.ts tests/e2e/login-portal-ux.spec.ts --workers=1 --reporter=list：19 passed。
• npm run build：通过；Vite 2383 modules transformed，PWA 102 entries。
• 代表性截图保存在本地忽略目录 output/playwright/pc-login-{375,768,1024,1440}.png，人工复核通过。
• 项目门禁全部通过；audit-docs 只有既有 22 个未注册 docs 文件 warning。
• 本地开发完成，尚未部署，不能告知用户线上可测。