归档认证页布局任务 05-26-oa-auth-layout-wecom-login-ux
这个提交包含在：
@@ -0,0 +1,6 @@
|
||||
{"file": ".trellis/spec/hyb-oa/project-governance.md", "reason": "Validate Trellis task structure, checks and commit readiness."}
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "Verify auth page layout, PWA prompt behavior, typecheck/build and visual checks."}
|
||||
{"file": ".trellis/spec/hyb-oa/wecom-boundary.md", "reason": "Verify Enterprise WeChat login entry remains an entry point only."}
|
||||
{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "Verify no sensitive auth values are persisted or written to evidence."}
|
||||
{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend quality review entry point."}
|
||||
{"file": "docs/产品设计规则.md", "reason": "Verify page style follows Hyinda OA design baseline."}
|
||||
@@ -0,0 +1,8 @@
|
||||
{"file": ".trellis/spec/hyb-oa/index.md", "reason": "hyb-oa Trellis spec entry point and read order."}
|
||||
{"file": ".trellis/spec/hyb-oa/project-governance.md", "reason": "Task contract, implementation approval, context curation and commit rules."}
|
||||
{"file": ".trellis/spec/hyb-oa/frontend-react-vite-design.md", "reason": "Frontend auth page, PWA update and UI verification contracts."}
|
||||
{"file": ".trellis/spec/hyb-oa/wecom-boundary.md", "reason": "Enterprise WeChat ownership and API/write boundaries for login entry changes."}
|
||||
{"file": ".trellis/spec/hyb-oa/security-privacy.md", "reason": "Sensitive-data handling for auth, password and Trellis evidence."}
|
||||
{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend React/Vite guideline entry point."}
|
||||
{"file": "docs/产品设计规则.md", "reason": "Hyinda brand, PC/mobile OA visual and layout rules."}
|
||||
{"file": ".trellis/tasks/05-26-oa-auth-layout-wecom-login-ux/research/login-page-patterns.md", "reason": "Login page pattern research and chosen layout hierarchy."}
|
||||
@@ -0,0 +1,66 @@
|
||||
# 认证页布局与企业微信登录体验优化实施记录
|
||||
|
||||
## Implementation Scope
|
||||
|
||||
- 新增共享认证页组件 `AuthPanel`，统一品牌、标题、副标题、内容区和页脚样式。
|
||||
- 调整 `AuthLayout`，仅保留认证页面背景、居中容器、PWA 更新提示和路由出口。
|
||||
- 重构登录页，移除卡片套卡片；普通浏览器以账号密码登录为主，企业微信/SSO 放入次级登录区。
|
||||
- 修正登录页键盘 Tab 顺序：用户名输入后先进入密码输入，“忘记密码？”视觉仍在密码行右侧但不打断主表单输入流。
|
||||
- 重构企业微信 WebView 登录页层级，企业微信一键进入为主 CTA，账号密码保留为兜底入口。
|
||||
- 重构找回密码页和修改密码页，复用同一认证面板，不改后端认证接口。
|
||||
- 收窄企业微信入口 E2E，避免前端 UI 用例依赖真实登录和个人设置页跳转。
|
||||
|
||||
## Safety Boundaries
|
||||
|
||||
- 不新增邮箱验证码登录。
|
||||
- 不改后端登录、找回密码、企业微信 OAuth 或绑定接口。
|
||||
- 不写入企业微信后台配置，不写真实业务数据。
|
||||
- 不记录账号密码、验证码、token、Secret 或真实 payload。
|
||||
- 部署和公网 smoke 需在本地验证通过后另行确认。
|
||||
|
||||
## Validation Log
|
||||
|
||||
- `cd client && npm run typecheck`：已通过。
|
||||
- `cd client && npm run build`：已通过，production build 和 PWA precache 正常生成。
|
||||
- `node scripts/qa/check-ui-design-rules.mjs --strict`：已通过。
|
||||
- `python3 ./.trellis/scripts/task.py validate 05-26-oa-auth-layout-wecom-login-ux`：已通过。
|
||||
- `node scripts/qa/check-trellis-governance.mjs`：已通过；仅提示 `docs/产品设计规则.md` 是非 spec/task research 上下文。
|
||||
- `git diff --check`：已通过。
|
||||
- 登录/找回密码 focused E2E：已通过，2 passed。
|
||||
- 企业微信入口 E2E：已通过，2 passed。
|
||||
- 2026-05-27 登录页 Tab 顺序回归：
|
||||
- `cd client && npm run typecheck`：已通过。
|
||||
- `cd client && npm run build`：已通过。
|
||||
- `E2E_BASE_URL=http://127.0.0.1:3000 npx playwright test tests/e2e/login-portal-ux.spec.ts -g "登录页提供找回密码" --workers=1 --reporter=list`：已通过，1 passed。
|
||||
- `E2E_BASE_URL=http://127.0.0.1:3000 npx playwright test tests/e2e/login-portal-ux.spec.ts -g "登录页提供|邮箱验证码登录|邮件服务不可用|找回密码流程" --workers=1 --reporter=list`：已通过，4 passed。
|
||||
- `E2E_BASE_URL=http://127.0.0.1:3000 npx playwright test tests/e2e/wecom-entry.spec.ts --workers=1 --reporter=list`：已通过，2 passed。
|
||||
- `node scripts/qa/check-ui-design-rules.mjs --strict`：已通过。
|
||||
- `python3 ./.trellis/scripts/task.py validate 05-26-oa-auth-layout-wecom-login-ux`：已通过。
|
||||
- `node scripts/qa/check-trellis-governance.mjs`：已通过；保留既有 implement/check 非 spec 上下文 warning。
|
||||
- `git diff --check`：已通过。
|
||||
- 2026-05-27 公网部署与验证：
|
||||
- 工作提交：`2a11ab9 修复认证页 Tab 焦点顺序 05-26-oa-auth-layout-wecom-login-ux`。
|
||||
- `SYNC_ENV=0 LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash deploy/trialrun/deploy.sh`：已通过；远端 `.env` 未覆盖。
|
||||
- 部署契约校验：已通过。
|
||||
- 远端构建：前端 `typecheck + vite build` 已通过，server/init 镜像构建成功。
|
||||
- 远端 Prisma：无待应用 migration，migration status up to date。
|
||||
- 公网 `/ready`：已通过。
|
||||
- 公网 `/api/auth/capabilities`：邮件投递、邮箱验证码登录、密码重置均为 ready/enabled。
|
||||
- 公网登录页 Tab 顺序检查：已通过，用户名输入后 Tab 聚焦密码输入。
|
||||
- `E2E_BASE_URL=https://oa.hyinda.com npx playwright test tests/e2e/login-portal-ux.spec.ts -g "登录页提供找回密码" --workers=1 --reporter=list`：已通过，1 passed。
|
||||
- `node scripts/qa/check-live-smoke-env.mjs`：已通过，`liveSmokeReady=true`、`liveOcrReady=true`。
|
||||
- `LIVE_SMOKE_BASE_URL=https://oa.hyinda.com bash scripts/qa/run-web-gates.sh smoke-live`：已通过，3 passed。
|
||||
- 远端 `smoke-external-deps.js`：已补跑通过，未发送真实邮件。
|
||||
- 远端 `smoke-trialrun-runtime.js`：已补跑通过。
|
||||
- 公网前端资源文案扫描：已通过，scanned=92、focused=2、findings=0。
|
||||
- 完整 `login-portal-ux.spec.ts`：认证页、找回密码、企业微信 WebView 相关 5 passed；Portal 历史文案断言 3 failed，见下方已知漂移。
|
||||
- 视觉截图已生成：
|
||||
- `output/playwright/oa-auth-layout-wecom-login-ux/desktop-login.png`
|
||||
- `output/playwright/oa-auth-layout-wecom-login-ux/desktop-forgot-password.png`
|
||||
- `output/playwright/oa-auth-layout-wecom-login-ux/mobile-wecom-login.png`
|
||||
- 移动企业微信主按钮计算背景色：`rgb(0, 57, 138)`。
|
||||
|
||||
## Known Unrelated Test Drift
|
||||
|
||||
- `client/tests/e2e/login-portal-ux.spec.ts` 的完整套件仍有 Portal 历史文案断言漂移，涉及旧文案 `快捷操作栏`、`角色重点`、`常用入口`。
|
||||
- 该漂移不属于本认证页任务，本任务仅保留登录页、找回密码和企业微信入口 focused 用例作为验收依据。
|
||||
@@ -0,0 +1,119 @@
|
||||
# 认证页布局与企业微信登录体验优化
|
||||
|
||||
## Goal
|
||||
|
||||
把登录、找回密码、改密三类认证页统一成成熟、克制、可复用的 OA 认证页模板，解决当前登录页布局随意、卡片嵌套、企业微信入口层级不清的问题。第一期只优化布局和企业微信登录入口，不新增邮箱验证码登录。
|
||||
|
||||
## Scope
|
||||
|
||||
- 前端认证页布局：`AuthLayout`、登录页、找回密码页、修改密码页。
|
||||
- 共享认证页组件：品牌、标题、副标题、内容区和页脚的统一面板。
|
||||
- 企业微信登录入口层级：普通浏览器为次级入口，企业微信 WebView 为主入口。
|
||||
- 认证页自动化验证：登录页、找回密码、企业微信入口和 PWA 更新不打断输入。
|
||||
- Trellis task 治理：PRD、research、implement/check 上下文和验证记录。
|
||||
|
||||
## What I Already Know
|
||||
|
||||
- 用户已确认按推荐方案执行：先重做登录页布局，强化企业微信入口；邮箱验证码登录作为后续增强。
|
||||
- 当前 `LoginPage` 已有账号密码登录、忘记密码入口、企业微信入口和企业微信 WebView 优先逻辑。
|
||||
- 当前 `AuthLayout` 在卡片外展示品牌区，页面内又有主卡片和登录表单内层卡片，视觉层级显得临时拼接。
|
||||
- 当前 `ForgotPasswordPage`、`ChangePasswordPage` 与登录页样式不完全一致。
|
||||
- 项目设计规则要求 OA 页面参考 Hyinda 官网品牌气质，保持浅色工作台、克制字号、清晰边界，不做营销页。
|
||||
- 企业微信边界要求企业微信只做入口、绑定、免登录和消息回流，不替代 OA 主业务页面。
|
||||
|
||||
## Research References
|
||||
|
||||
- `research/login-page-patterns.md`：中后台和开源系统登录页布局共性，结论是主认证面板、忘记密码放密码字段附近、企业微信/SSO 入口作为明确但分层的登录方式。
|
||||
|
||||
## Requirements
|
||||
|
||||
- 新增或重构认证页共享模板，使登录、找回密码、改密页使用一致的面板宽度、内边距、标题层级、表单间距和提示样式。
|
||||
- 登录页只保留一层主面板，不再出现表单卡片套登录卡片。
|
||||
- 品牌区进入主面板顶部，Logo、系统名、标题、表单左侧对齐。
|
||||
- 普通浏览器登录页：
|
||||
- 账号密码表单为主。
|
||||
- “忘记密码？”放在密码 label 同一行右侧。
|
||||
- 登录按钮为主按钮。
|
||||
- 企业微信登录在主按钮下方作为次级入口。
|
||||
- OIDC/SSO 如启用，仍放在次级入口区。
|
||||
- 企业微信 WebView 登录页：
|
||||
- 企业微信一键进入作为主 CTA。
|
||||
- 账号密码登录作为兜底入口，可展开或保留在下方。
|
||||
- 保留未绑定/异常提示。
|
||||
- 找回密码页：
|
||||
- 使用同一认证面板。
|
||||
- 保留邮箱验证码找回流程，不改后端接口。
|
||||
- 返回登录入口放在页脚弱链接。
|
||||
- 改密页：
|
||||
- 使用同一认证面板。
|
||||
- 保留旧密码、新密码、确认新密码和密码显隐。
|
||||
- 不新增邮箱验证码登录 tab，不新增后端验证码登录接口。
|
||||
- 不持久化密码、验证码或 token。
|
||||
- 认证页 PWA 更新提示仍不能自动刷新表单。
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] 登录页无卡片套卡片，主认证面板视觉统一。
|
||||
- [ ] 普通浏览器下账号密码为主，企业微信登录为次级入口。
|
||||
- [ ] 企业微信 WebView 下企业微信一键进入为主，账号密码为兜底入口。
|
||||
- [ ] 忘记密码入口位于密码 label 右侧，密码显隐控件仍可用。
|
||||
- [ ] 键盘 Tab 顺序符合表单习惯：用户名输入后进入密码输入，不被“忘记密码？”链接打断。
|
||||
- [ ] 找回密码页和改密页复用同一认证页视觉模板。
|
||||
- [ ] 原有登录、找回密码、企业微信入口 E2E 仍通过。
|
||||
- [ ] 前端 typecheck、build、设计规则检查通过。
|
||||
- [ ] 不新增或输出真实账号、密码、验证码、token、Secret。
|
||||
|
||||
## Definition of Done
|
||||
|
||||
- 本地验证通过：`cd client && npm run typecheck && npm run build`。
|
||||
- Focused E2E 覆盖登录页布局、忘记密码、企业微信入口。
|
||||
- UI 设计规则检查通过。
|
||||
- Trellis validate、governance、`git diff --check` 通过。
|
||||
- 提交后再请求部署批准；只有部署和公网检查通过后，才能告知可公网测试。
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- 不做邮箱验证码登录。
|
||||
- 不改后端认证接口。
|
||||
- 不新增短信登录。
|
||||
- 不改企业微信 OAuth/绑定后端逻辑。
|
||||
- 不修改真实企业微信后台配置。
|
||||
- 不执行真实账号重置或真实业务写入。
|
||||
|
||||
## Proposed Implementation
|
||||
|
||||
1. 新增共享认证页组件，例如 `AuthPanel`，统一品牌、标题、副标题、内容区和页脚链接。
|
||||
2. 调整 `AuthLayout`，只负责页面背景、居中、PWA 更新提示和 Outlet，不再单独摆放品牌区。
|
||||
3. 重构 `LoginPage`：
|
||||
- 去掉内层登录卡片。
|
||||
- 普通浏览器按账号密码主表单 + 次级企业微信入口布局。
|
||||
- 企业微信 WebView 按企业微信主 CTA + 账号密码兜底布局。
|
||||
4. 重构 `ForgotPasswordPage`、`ChangePasswordPage` 使用共享认证面板。
|
||||
5. 更新 Playwright 用例：
|
||||
- 登录页密码显隐、忘记密码入口、PWA 更新输入不丢失。
|
||||
- 企业微信入口仍显示并跳转。
|
||||
6. 运行本任务测试计划。
|
||||
|
||||
## Test Plan
|
||||
|
||||
```bash
|
||||
cd client && npm run typecheck
|
||||
cd client && npm run build
|
||||
E2E_BASE_URL=http://127.0.0.1:5173 npx playwright test tests/e2e/login-portal-ux.spec.ts tests/e2e/wecom-entry.spec.ts --workers=1 --reporter=list
|
||||
node scripts/qa/check-ui-design-rules.mjs --strict
|
||||
python3 ./.trellis/scripts/task.py validate 05-26-oa-auth-layout-wecom-login-ux
|
||||
node scripts/qa/check-trellis-governance.mjs
|
||||
git diff --check
|
||||
```
|
||||
|
||||
## Technical Notes
|
||||
|
||||
- Design rules: `docs/产品设计规则.md`
|
||||
- Frontend spec: `.trellis/spec/hyb-oa/frontend-react-vite-design.md`
|
||||
- WeCom boundary: `.trellis/spec/hyb-oa/wecom-boundary.md`
|
||||
- Security/privacy: `.trellis/spec/hyb-oa/security-privacy.md`
|
||||
- Login page: `client/src/pages/LoginPage.tsx`
|
||||
- Forgot password page: `client/src/pages/ForgotPasswordPage.tsx`
|
||||
- Change password page: `client/src/pages/ChangePasswordPage.tsx`
|
||||
- Auth layout: `client/src/layouts/AuthLayout.tsx`
|
||||
- Existing auth E2E: `client/tests/e2e/login-portal-ux.spec.ts`、`client/tests/e2e/wecom-entry.spec.ts`
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
# 登录页布局参考研究
|
||||
|
||||
## 参考对象
|
||||
|
||||
- Ant Design ProComponents `LoginForm`：中后台登录常见模式，支持账号密码、验证码、忘记密码、其他登录方式等组合。参考链接：https://procomponents.ant.design/en-US/components/login-form/
|
||||
- `vue-element-admin`：开源后台模板，登录页以账号密码为主，强调简单、稳定、权限系统入口清楚。参考链接：https://github.com/PanJiaChen/vue-element-admin
|
||||
- JeecgBoot：国内低代码/中后台系统，支持账号登录和第三方登录能力，适合参考“企业内部系统需要多登录入口但入口层级要清晰”。参考链接：https://github.com/jeecgboot/JeecgBoot
|
||||
|
||||
## 共性结论
|
||||
|
||||
- 登录页常见结构是一个主认证面板，不使用多层嵌套卡片。
|
||||
- “忘记密码”通常放在密码 label 同一行右侧，或者密码输入框下方右对齐。
|
||||
- 账号密码是默认兜底入口；验证码登录通常作为 tab 或切换项，不和找回密码验证码复用。
|
||||
- 企业微信/微信/SSO 这类第三方入口通常放在主登录按钮下方，或在对应容器内作为主 CTA。
|
||||
- 内部 OA 不需要营销型左右分屏、大图背景或长功能说明；更适合克制、稳定、工作台式页面。
|
||||
|
||||
## 映射到 hyb-oa
|
||||
|
||||
- 当前任务只做第一期：认证页布局统一 + 企业微信入口层级优化。
|
||||
- 邮箱验证码登录需要新增后端登录验证码接口、投递能力和风控，不纳入本期。
|
||||
- 普通浏览器：账号密码为主，企业微信登录为次级入口。
|
||||
- 企业微信 WebView：企业微信一键进入为主，账号密码为兜底入口。
|
||||
- 登录页、找回密码页、改密页应复用同一套认证页面板尺寸、标题层级、表单间距和提示样式。
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"id": "oa-auth-layout-wecom-login-ux",
|
||||
"name": "oa-auth-layout-wecom-login-ux",
|
||||
"title": "认证页布局与企业微信登录体验优化",
|
||||
"description": "统一登录、找回密码、改密三类认证页布局，强化普通浏览器与企业微信 WebView 的登录入口层级；邮箱验证码登录作为后续增强不纳入本期。",
|
||||
"status": "completed",
|
||||
"dev_type": null,
|
||||
"scope": "client/auth-ux",
|
||||
"package": null,
|
||||
"priority": "P2",
|
||||
"creator": "shunli",
|
||||
"assignee": "shunli",
|
||||
"createdAt": "2026-05-26",
|
||||
"completedAt": "2026-05-27",
|
||||
"branch": null,
|
||||
"base_branch": "main",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [
|
||||
"client/src/layouts/AuthLayout.tsx",
|
||||
"client/src/pages/LoginPage.tsx",
|
||||
"client/src/pages/ForgotPasswordPage.tsx",
|
||||
"client/src/pages/ChangePasswordPage.tsx",
|
||||
"client/tests/e2e/login-portal-ux.spec.ts",
|
||||
"client/tests/e2e/wecom-entry.spec.ts"
|
||||
],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户