修改完成55%
This commit is contained in:
+49
-76
@@ -1,94 +1,67 @@
|
||||
# A02 账号登录 Design QA
|
||||
# Design QA — G05 家谱总览
|
||||
|
||||
## Comparison target
|
||||
- source visual truth path: `docs/design/screens/runtime/2026-07-14/g-module-audit/before/01-g05-before-360x800.png`、`static/assets/modules/genealogy/opaque/g05-overview-surface.png`、外部思维导图与 `家谱主页.png` 的信息层级参考
|
||||
- implementation screenshot path: `docs/design/screens/runtime/2026-07-14/g-module-audit/g05/01-g05-ready-360x800.png`
|
||||
- viewport: 360×800；另查 412×915
|
||||
- state: `ready`；另查 `empty`、`error`
|
||||
- full-view comparison evidence: `docs/design/screens/runtime/2026-07-14/g-module-audit/g05/05-g05-before-after-comparison.png`
|
||||
- focused region comparison evidence: 未单独裁切；合并图中 360px 单页按原始像素显示，谱名区、四宫格、近况行和底部说明文字均可直接辨认。
|
||||
|
||||
- Source visual truth: `docs/design/screens/runtime/2026-07-13/A01-360x800.png` and `docs/design/screens/runtime/2026-07-13/G01-360x800.png` are the user-approved brand references. They are not a user-approved A02 mockup.
|
||||
- Earlier A02 implementation: `docs/design/screens/runtime/2026-07-13/A02-before-360x800.png`.
|
||||
- Current implementation: `docs/design/screens/runtime/2026-07-13/A02-after-360x800.png`.
|
||||
- Full-view comparison evidence: `docs/design/screens/runtime/2026-07-13/A02-before-after-360x800.png` at 360 × 800.
|
||||
- Focused region review: full-view comparison is sufficient for this iteration because the corrected areas are the whole panel proportion, complete frame, button ratio and background treatment; no text or icon asset is too small to identify in the captured images.
|
||||
## Findings
|
||||
|
||||
没有遗留的 P0/P1/P2 问题。
|
||||
|
||||
- 字体与层级：谱名、核心动作、辅助说明形成三级层级；第一次审计发现元信息和说明文字偏小，已将相关字号提高到 22–23rpx 后重截。
|
||||
- 间距与布局：四个点击区与位图槽位一致；360 与 412 均无横向溢出、裁切或底部操作遮挡。
|
||||
- 颜色与令牌：继续使用朱砂、墨蓝、暖宣纸与古金，没有采用外部参考的灰绿色视觉。
|
||||
- 图片质量：总览面、四宫格边框、分隔和底部说明面全部来自 1122×1506 不透明位图；没有用 CSS 边框、渐变、SVG 或占位图形代替。
|
||||
- 文案与内容：删除了“邀请亲人→申请加入”的角色错误；保留 OpenAPI 能支持的概览、世系、始祖、字辈、审核和设置任务。
|
||||
|
||||
## Comparison history
|
||||
|
||||
### Iteration 1: Before refactor
|
||||
1. 改前 P1：录入族人指向已删除 G04；已改为 G03 `step=ancestor`，静态契约和真实点击通过。
|
||||
2. 改前 P1：管理员邀请动作错误进入申请者 G08；已删除该动作，不臆造 OpenAPI 未提供的邀请功能。
|
||||
3. 改前 P2：完整卡片与面板由 CSS 拼接；已改成 ImageGen 不透明位图并验证尺寸和 alpha。
|
||||
4. 首次改后 P2：部分 360 宽屏辅助文字偏小；已提高字号并重新捕获四张最终证据。
|
||||
|
||||
**Findings**
|
||||
## Evidence limits
|
||||
|
||||
- [P1] The login form was a thin CSS rectangle rather than a complete genealogy panel.
|
||||
Location: `pages/auth/a02-login.vue`, `.login-panel`.
|
||||
Evidence: the left half of `A02-before-after-360x800.png` has a narrow plain outline, unlike A01’s complete buttons and G01’s complete title slips.
|
||||
Fix: introduced `static/assets/modules/auth/opaque/a02-login-panel.png` as the full opaque paper, double-gold-frame and corner-ornament surface.
|
||||
截图能够确认层级、裁切、图像质量和可见点击面积，不能单独证明读屏顺序、外接键盘焦点、Android 系统字体放大或完整 WCAG 合规；这些留给真机专项验证。
|
||||
|
||||
- [P1] The A01 primary button skin was vertically compressed.
|
||||
Location: `pages/auth/a02-login.vue`, `.login-submit`.
|
||||
Evidence: the earlier button had a noticeably flatter appearance than the A01 reference.
|
||||
Fix: set the A02 display slot to 128rpx high and preserved the complete skin as the only button surface.
|
||||
## Implementation checklist
|
||||
|
||||
- [P2] The main task was visually weaker than the scenery below it.
|
||||
Location: the A02 above-the-fold layout.
|
||||
Evidence: the earlier card ended high in the viewport and left more visual weight to the empty mountain background.
|
||||
Fix: aligned the header with A01 and expanded the panel so its lower paper landscape becomes a deliberate task-ending surface.
|
||||
- [x] G01 统一使用 `genealogyId` 查询键
|
||||
- [x] G05 同页承载 `loading|ready|empty|error`
|
||||
- [x] G04 旧路径清除
|
||||
- [x] 误导邀请动作清除
|
||||
- [x] 360×800 与 412×915 截图检查
|
||||
- [x] 静态契约与浏览器运行冒烟通过
|
||||
|
||||
### Iteration 2: Current implementation
|
||||
final result: passed
|
||||
|
||||
**Findings**
|
||||
---
|
||||
|
||||
- [P3] The page uses one existing cloud asset at the heading while the new panel supplies additional pale clouds. This is visually coherent at 360 × 800, but user review should decide whether the heading cloud is one layer too many.
|
||||
Location: A02 heading, right side.
|
||||
Evidence: `A02-after-360x800.png`.
|
||||
Follow-up: remove only the heading cloud if the user finds the top-right decoration busy; do not alter the panel frame or input structure.
|
||||
# Design QA — 54 路由候选覆盖审计
|
||||
|
||||
### Iteration 3: A02 本页协议确认
|
||||
- 审计日期：2026-07-14
|
||||
- 用户验收状态：7 个冻结页为 `[x]`；其余 47 个页面仅为 `[~]` 候选，本文件的 `passed` 只表示本轮内部截图 QA 通过，不代表用户审美验收。
|
||||
- 全量候选截图：`docs/design/screens/runtime/2026-07-14/all-page-candidates/`
|
||||
- G 模块证据：`g-module-audit/`
|
||||
- T 模块证据：`t01-audit/`、`t-module-audit/`
|
||||
- F01/F02/N01/M01 根页证据：`root-pages-audit/`
|
||||
- 六类共享母版证据：`module-page-audit/`
|
||||
|
||||
**Findings**
|
||||
## Audit summary
|
||||
|
||||
- [P1] 直接进入 A02 时，协议确认以前只是一句“请先在登录引导页阅读并确认协议”，用户无法在当前任务页修正状态。
|
||||
Location: `pages/auth/a02-login.vue`，原 `.agreement-reminder`。
|
||||
Evidence: `docs/design/screens/runtime/2026-07-14/A02-without-agreement-360x800.png`。
|
||||
Fix: 以 A02 卷轴面板内的可点击协议行替换提示；未选中与选中状态分别使用两枚 96×96 透明 PNG，文字和链接保留在 Vue 文字层。
|
||||
- 54 条最终路由已按当前信息架构覆盖；G07→G06、T02→T01 的重复状态路由已收敛。
|
||||
- 候选页面继续使用宣纸、朱砂、古金、墨褐视觉体系；按钮、卡片、字段、面板和边框使用完整位图，未在共享母版中使用 CSS 伪元素或 CSS 构造可见表面。
|
||||
- 47 个待审页面均使用本地模拟数据与可操作状态，不调用 `appApi`；接口清单只用于功能位置、字段与状态语义。
|
||||
- 29 个原通用壳页面逐页捕获 360×800 候选图，并按 F、R、M/N 生成模块联系表统一审视。
|
||||
- F01、F02、N01、M01 根页在 360×800 与关键 412×915 下复核；底部导航、主操作和状态卡没有裁切。
|
||||
- 首轮 T01 状态卡横向裁切已按契约先行修复并重截；G09/G10 假按钮槽已用独立状态位图修复；当前没有遗留的 P0/P1/P2 截图问题。
|
||||
|
||||
- [P2] Chrome 捕获脚本在选择器出现 300ms 后就截图，A02 图层尚未加载时会产生黑块或过渡状态，不能作为视觉证据。
|
||||
Location: `scripts/capture-chrome-page.js`。
|
||||
Evidence: 本轮已拒绝的半渲染截图；修复后截图均由 `tests/capture-chrome-page-contract.ps1` 约束为“图片资源加载完成且额外稳定等待后再采集”。
|
||||
Fix: 截图脚本等待全部 `document.images` 加载完成，再等待 900ms；新截图逐张打开检查。
|
||||
## Evidence limits
|
||||
|
||||
### Iteration 4: A02 注册入口与证据隔离
|
||||
H5 Chrome 截图不能证明 Android 真机字体放大、读屏语义、系统返回手势、软键盘遮挡和所有触摸目标；这些项目不在本轮候选 QA 中冒充完成，留到用户视觉审核后的 Android 设备复核。
|
||||
|
||||
**Findings**
|
||||
|
||||
- [P2] 直接进入 A02 的新用户在账号密码与验证码登录之外没有注册路径，页面功能感不完整。
|
||||
Location: `pages/auth/a02-login.vue`，协议行下方。
|
||||
Evidence: 用户审视的 412×915 运行截图与本轮 `A02-register-entry-412x915.png`。
|
||||
Fix: 在协议行下方的既有留白内增加“还没有账号？ 注册账号”；仅朱砂色“注册账号”可点，真实跳转到既有 A04 路由，不新增按钮资产或重做 A04。
|
||||
|
||||
- [P1] Chrome 对同一路由的 hash 导航会复用 Vue 实例；直接进入 URL 的截图可能继承上一次勾选协议的状态，不能证明初始态。
|
||||
Location: `scripts/capture-chrome-page.js`。
|
||||
Evidence: 导航后 URL 已是无参数 A02，但实际图标仍为 `a02-agreement-checked.png`；整页刷新后才回到未选中图标。
|
||||
Fix: 截图脚本在到达目标 URL 后刷新，并等待 `performance.timeOrigin` 变化，再检查选择器、图片和稳定时间。该顺序由 `tests/capture-chrome-page-contract.ps1` 约束。
|
||||
|
||||
## Required fidelity surfaces
|
||||
|
||||
- Fonts and typography: A02 uses the project’s existing STKaiti/KaiTi hierarchy; current capture keeps the title above form labels and retains readable body copy.
|
||||
- Spacing and layout rhythm: the larger panel establishes a clear header → title → tab → form → action cadence; 320 × 568 and 360 × 640 intentionally scroll rather than clip the action.
|
||||
- Colors and visual tokens: cinnabar remains limited to the header, selected Tab, helper action and primary button; antique gold frames and ink-brown body text follow A01/G01.
|
||||
- Image quality and asset fidelity: the panel is a complete opaque PNG with no generated text, placeholder controls, or CSS-drawn frame; the button remains the approved complete A01 asset.
|
||||
- Agreement control: the 96×96 unchecked and checked icons are separate transparent PNGs with transparent corners; A02 does not draw the circle, fill, or checkmark with CSS.
|
||||
- Registration entry: the low-emphasis text path follows the agreement row and uses only the existing panel whitespace; it does not compete with the full-surface cinnabar login button or invent a second button asset.
|
||||
- Copy and content: account and SMS flows retain their original Chinese copy and real input controls; no visible workflow was invented.
|
||||
|
||||
## Primary interactions checked
|
||||
|
||||
- Account/password state captured at 320 × 568, 360 × 640, 360 × 800 and 412 × 915.
|
||||
- SMS Tab was clicked through the Chrome debugging session and captured at 360 × 800: `docs/design/screens/runtime/2026-07-13/A02-sms-360x800.png`.
|
||||
- Form submission behavior is covered by the existing A01/A02 contract and was not changed in this visual pass.
|
||||
- Direct A02 now opens unchecked at 320×568, 360×640, 360×800 and 412×915; `?agreed=1` opens checked at 360×800. A real Chrome click changed the checked icon back to the unchecked PNG, and an unchecked submit displayed the current-page agreement message.
|
||||
- Registration entry was captured at 360×800 and 412×915 after a fresh-document reload; a real Chrome click reached `http://localhost:5173/#/pages/auth/a04-register`.
|
||||
- A03 重复验证码页已删除；删除后重新捕获 A02 的手机验证码 Tab（360×800），手机号、验证码、获取验证码、登录、协议和注册入口均完整显示，作为唯一验证码登录入口的运行证据。
|
||||
|
||||
## Acceptance
|
||||
|
||||
用户已于 2026-07-14 确认 A02 账号密码登录、协议确认和注册入口的视觉结果。本页从待验收样板转为冻结的认证模块参考；后续页面可继承其视觉语言，但不能改动 A02 可见效果。
|
||||
|
||||
## Final result
|
||||
|
||||
final result: accepted
|
||||
final result: passed (internal candidate QA only; user review pending)
|
||||
|
||||
Reference in New Issue
Block a user