jiapuapp/design-qa.md

M09 VIP 与订单：设计核验

对比对象

• Source visual truth: C:\Users\Administrator\.codex\generated_images\019fa647-03b4-7901-9b6a-175d07d56512\exec-f3e0331f-59c3-4f01-a48f-d069bdab2d58.png
• 同状态真机截图：tmp/vip-redesign-audit/20-uniform-footer-cards.png
• 下单面板真机截图：tmp/vip-redesign-audit/21-uniform-footer-sheet.png
• 并排对比：tmp/vip-redesign-audit/22-uniform-main-reference-and-implementation.png
• 设备：MuMu Android 基座，720 × 1280（360 × 640 CSS px，device scale factor 2）。参考图裁去底部已露出的面板后，按同一高度归一化进行并排检查。

视觉验收

• 顶部：水墨山景、竹影、留白与居中的标题层级已落地；新增背景资产为 static/assets/modules/profile/opaque/m09-vip-hero-landscape.png。
• 套餐：基础版、宗族版、永久纪念版使用同一主推卡片规格，均有同样的朱砂描边、庭院水墨资产、底部价格/期限栏与圆角“立即开通”按钮。
• 卡片资产：使用 static/assets/modules/profile/opaque/m09-featured-courtyard.png，在三张卡上保持统一的透明度和裁切方式，文字与按钮在真实窄屏上保持可读。
• 下单：原居中装饰弹窗替换为底部确认单；套餐、有效期、应付金额、微信支付方式和取消入口均清晰可见。

交互验收

• MuMu 真机已点击“立即开通”，成功打开“确认下单”底部面板。
• 已点击“暂不购买”安全关闭面板；关闭后确认页面仍保留 3 个“立即开通”入口，未由这次视觉验收新增订单。
• 套餐和订单数据仍由现有接口读取；本次只改页面结构、样式与图片资产，不改接口字段或订单创建逻辑。

已知合同边界

• 当前 OpenAPI 未提供第三方支付调起参数或支付结果回调，因此主操作保持“创建订单”，不虚假宣称已完成微信支付。

结果

final result: passed

---

T01 世系谱：设计核验

对比对象

• Source visual truth：用户在本次会话提供的 Jiapu-App 世系谱截图（408 × 936 px），并已核对参考源码 C:\Users\Administrator\Desktop\job\Jiapu-App\pages\index\tree\index.vue。
• Implementation screenshot：tmp/t01-pedigree-paged-order-final2.png（720 × 1280 px，MuMu Android；360 × 640 CSS px，density 2）。
• 当前真实数据状态：已授权的“真机联调10159371”仅有 1 位成员；页面已显示一列始祖资料与右侧世代切换，不能据此核验多人横向滚动。

Findings

• [P1] 当前授权家谱只有一位成员，无法以真实数据复核参考图的“多位同世成员横向展开”状态。
  • 影响：实际单列、世代切换和纵向文字已验证，但多人列宽、横向滚动和同代排序仍缺少真机证据。
  • 修复：使用至少 5 位同世成员的测试家谱再次打开 T01；不应以本地伪造数据替代真实家谱数据。

已完成的源码核验

• T01 使用现有 appApi.getTree 单一数据 owner，按 generation 分组后每 5 人补齐空列并使用 swiper 横向分页；不引入参考项目的旧 getGenealogyUserByParentsId 接口。
• 列结构为关系、姓名、资料三段纵向阅读；同世人员位于横向滚动容器，右侧切换上一世/下一世。
• 静态合同、关系布局合同、人物操作合同和树接口运行时 smoke 均已通过。

final result: blocked

---

T01 relationship-compass redesign: MuMu comparison rerun

Evidence

• Source visual truth: C:\Users\Rain\.codex\generated_images\019fad7d-b30e-7e42-b40a-586bade6fec2\exec-dce4de58-d938-4ab5-ad7f-dfdacb399de0.png (853 × 1844 px).
• Accepted implementation capture: tmp/t01-relationship-compass-round6.png (MuMu Android, 900 × 1600 physical px; Chrome DevTools viewport 451 × 800 CSS px at 2× density).
• Full-view comparison: tmp/t01-relationship-compass-round6-comparison.png; the source and implementation were width-normalized to 853 px and placed side by side.
• State: T01 tree overview, selected member 真机联调始祖, relationship-action sheet open. The capture was taken after native image assets had loaded; the earlier immediate capture was rejected because the images had not painted yet.

Comparison history

1. Earlier comparison (tmp/t01-relationship-compass-audit-compare.png) found P1 gaps: no visible relationship connectors, a mismatched central graphic, generic rectangular relationship buttons, and inconsistent sheet hierarchy.
   • Fix: generated and wired the paper panel, six-way relationship map, medallion, close, marker, and arrow assets; restored the independent sheet and removed the mismatched section labels.
2. First recovered MuMu capture (tmp/t01-relationship-compass-round2-recovered.png) confirmed the actual authorized T01 state was reachable, but showed P1 spacing and button-shape drift.
   • Fix: generated the relation-button frame and a smaller, clean four-point compass asset; added the genuine divider asset; tightened the 9:16 layout so all four management actions stay in the viewport.
3. Final MuMu capture (tmp/t01-relationship-compass-round6.png) was compared in the same composite input. No actionable P0/P1/P2 mismatch remains.

Fidelity review

• Typography and copy: the live member name and generation remain readable; relationship and management labels do not wrap. The selected member's live copy intentionally differs from the concept's sample name.
• Spacing and layout rhythm: on the actual 9:16 MuMu viewport, header, divider, six relationship actions, and four management actions form one complete, unobscured sheet. The source canvas is taller (853 × 1844), so its exact vertical crop is not reproduced; this is a P3 reference-canvas difference rather than an app overflow.
• Colors and tokens: warm ivory paper, antique gold, and cinnabar are consistent between the panel, graph, relationship actions, and management cards.
• Image quality and assets: visible non-standard artwork is PNG-backed (panel, compass, relationship frame, portrait medallion, markers, close, arrows, divider). No emoji, inline SVG, CSS-drawn icon, or placeholder was used in place of those assets.
• Residual P3 polish: the reference uses a sample portrait and individually drawn function icons; the running app keeps its neutral medallion and existing generated marker assets so the sheet does not imply an incorrect person identity or operation type.

Verification

• Opened the selected T01 member in MuMu and accepted the delayed native capture.
• Passed: tests/t01-person-action-panel-contract.ps1, tests/t01-relation-layout-contract.ps1, tests/t01-all-states-visual-contract.ps1, and tests/t01-tree-state-contract.ps1.
• Passed: git diff --check (only existing CRLF conversion warnings).

final result: passed

---

T01 人物操作面板：关系罗盘重设计核验

对比对象

• Source visual truth：本次会话选择的第 2 张「关系罗盘」设计图，C:\Users\Rain\.codex\generated_images\019fad7d-b30e-7e42-b40a-586bade6fec2\exec-dce4de58-d938-4ab5-ad7f-dfdacb399de0.png。
• Implementation screenshot：tmp/jiapu-t01-panel-mumu-final.png，MuMu Android 真机运行时的面板打开状态（900 × 1600 px）。
• 同画布对比：tmp/t01-relationship-compass-reference-vs-mumu-final.png；左侧为设计稿面板裁切，右侧为 MuMu 实现面板裁切，并将二者归一至 853 × 1254 px 的同一面板画布。

真机视觉对比

• 信息层级：实机的成员头部、6 个围绕罗盘的亲属入口及下方 2 × 2 人物管理区，与设计稿的阅读顺序一致；四个管理入口在 900 × 1600 实机截图中均完整可见。
• 资产与对比：实机使用纸张底图、人物徽章、关系标记、管理标记、关闭图标、箭头及关系罗盘等生成 PNG 资产；罗盘和边框在真机上没有空白、拉伸或替代图形。
• 有意保留的 P3 差异：设计稿为贴边并带拖拽把手的轻量面板；实现保留当前家谱页面的左右留白、纸张边框及更细密的罗盘插画，以和已存在的朱红/宣纸视觉系统一致。这不影响层级、可读性或操作入口。

真机交互验收

• 初次实机核验发现 scroll-view 与头部同层，关闭按钮会被内容层遮挡。已将 .member-action-panel__head 提升至 z-index: 2；MuMu WebView 点击关闭按钮后，面板节点已消失。
• MuMu 点击第一个关系入口“父亲”后，已进入“新增亲属 / 为真机联调始祖添加父亲”页面，见 tmp/jiapu-t01-father-flow.png；未填写任何字段，并已放弃草稿返回世系图。

Implementation Checklist

• 已落地选中设计的关系罗盘信息架构。
• 已生成并引用对应 PNG 资产，未用 emoji、内联 SVG 或 CSS 图形替代。
• 已捕获 MuMu 实现截图，并与源设计在同一画布中并排对比。
• 已验证关闭和“父亲”关系入口。

第二轮保真收敛（待真机复核）

• 根据 tmp/t01-relationship-compass-audit-compare.png 的 P1 差异，已更换为生成的 t01-action-panel-paper-v3.png 宣纸面板和 t01-relation-map-v3.png 六向连接罗盘；同时移除与设计稿不符的两段区块标题，收紧头部，并将关系按钮与管理卡片改为米纸/朱红配色。
• 已通过 T01 人物操作面板、文档流、全状态视觉、关系布局、树状态合同及编译审计；生成的透明罗盘与面板资产均已检查 alpha。
• 复核阻塞：HBuilderX 热更新后 MuMu 返回 A01 登录页，tmp/t01-relationship-compass-round2.png 不是人物操作面板，不能用于设计比较。为避免访问或猜测测试账号凭据，本轮没有重新登录。
• 解除条件：在 MuMu 恢复已授权测试会话后，打开 T01 人物操作面板并重新截图；随后必须与同一张源设计同画布比较，处理任何残留 P1/P2 后才能改回通过。

final result: blocked

---

T01 树状图与 T02 世系谱：真机回归

对比对象

• Source visual truth：本次会话中用户提供的参考项目“世系谱”截图（408 × 936 px）及 C:\Users\Administrator\Desktop\job\Jiapu-App\pages\index\tree\index.vue 的交互实现。
• Implementation captures：C:\Users\Administrator\AppData\Local\Temp\t01-entry-verify.png、C:\Users\Administrator\AppData\Local\Temp\t02-entry-verify.png、C:\Users\Administrator\AppData\Local\Temp\t02-swipe-verify.png、C:\Users\Administrator\AppData\Local\Temp\t02-return-after-fix.png。
• Device/state：Android 模拟器 720 × 1280 px；真实家谱“界面大数据回归谱0726”；T01 树状图、T02 第 1/2 世。

真机交互验收

• T01 右上角“世系谱”可进入独立 T02 表格页；T02 右上角“树状图”可返回 T01 图谱页。
• T02 从第 1 世直接左滑可切换到第 2 世，未使用点击箭头替代横向手势。
• 点击姓名打开“成员档案”；点击下方生平文字读取人物详情并打开“人物生平”弹窗，两个命中区域和结果不同。
• 返回失败的路由根因已修复：可选 selectedId 为空时不再传入 undefined，以符合导航参数必须为非空字符串的校验。

视觉核验状态

• 字体与排版、列格、纵向文字、朱红页头、右侧世代标识和背景纹理已在真机截图中检查。
• 当前会话里的参考截图没有可供本地重新打开的原始文件路径，因此无法按同一画布把参考图与实现图合成后做逐像素并排对比；不对像素级一致性作虚假通过结论。

Implementation Checklist

• 树状图与世系谱拆分为两个路由。
• 双向页头跳转与原生横向滑动。
• 姓名资料页与生平弹窗的分离点击行为。
• HBuilderX 页面诊断、静态路由合约和 Android 真机回归。

final result: blocked

---

T01 树状图与 T02 世系谱：设计核验

对比对象

• Source visual truth：用户本次会话提供的参考项目“世系谱”截图，以及 C:\Users\Administrator\Desktop\job\Jiapu-App\pages\index\tree\index.vue 的 swiper 实现。
• Implementation capture：未生成。当前 HBuilderX CLI 未识别已连接模拟器作为可部署设备，无法取得包含新 T01/T02 路由的截图。
• 目标状态：从“世系图”进入 T01 树状图；T01 顶部进入 T02 世系谱；T02 顶部返回 T01。

阻塞项

• [P0] 无法取得新版本的真机或浏览器实现截图，因此不能与参考截图进行同视口视觉比较，也不能把直接左右滑动标为已验收。
  • 已完成代码核验：T01 恢复横向树状图；T02 使用原生 swiper 和页内纵向 scroll-view，每页五位成员。
  • 需要：让 HBuilderX 识别任一已连接模拟器，或提供可运行的 H5 预览，以捕获两页入口和横滑状态。

final result: blocked