Accueil Explorer Aide
S'inscrire Connexion
data_center_platform
/
PR_Min_APP_BA
10
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Branche: develop
Branches Tags
PR_Min_APP_BA
/
docs
/
plans
/
2026-09-16-mrc-mobile-subpage-visual-remediation.md

2026-09-16-mrc-mobile-subpage-visual-remediation.md 8.0 KB
Lien permanent Historique Raw

MRC 小程序申请链子页面视觉整改 Implementation Plan

For Codex: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development to implement this plan task-by-task.

Goal: 将小程序申请链的全部患者子页面恢复为对应 HTML 原型的完整视觉、布局和可操作 Demo 流程；仅数据与受限外部能力使用本地 Mock。

Architecture: 以 01-1-我的申请页.html 至 08-确认支付页.html（含 03-* 与 04-2-新增地址页.html）为逐页唯一视觉来源。新增共享的 MRC 子页壳层（自定义导航、步骤条、滚动区、固定底部操作、卡片和受限能力提示），但每页 WXML 仍显式保留本原型的内容节点与可访问交互。现有 mrcDemoState 继续是唯一的本地内存数据来源；地址输入只在当前 Page data 校验，Adapter 只可保存生成的匿名地址标签，不增加网络、Storage、上传、支付、真实患者、真实地址或跨端同步。

Tech Stack: 微信小程序原生 WXML/WXSS/JavaScript；现有 MRC 本地内存 Adapter；离线 Node 契约测试。

已确认缺陷与验收原则

  1. 当前 identity 等子页面错误复用 entry/index.wxss 与紧凑 Hero/文本步骤骨架；这不是原型页面，导致截图右侧的顶部、四节点步骤卡、身份图标卡、材料清单、材料区和固定 CTA 缺失。
  2. Demo 仅可将上传、支付、地址/物流等未授权能力显示为“本地演示不可用/已提供匿名材料”；不得因能力受限而删除原型结构、交互反馈或流程跳转。
  3. 本轮覆盖：10 个既有子页 my-applications、identity、record-config、record-select、manual-record、application-form、confirm-submit、order-detail、order-progress、settlement，并新增本地匿名地址页 address-create。apply-entry 已有独立整改基线，本轮只保持其路由兼容性。
  4. 每页必须在 375×812、同一状态下与其 HTML 原型比较；无截图证据前，模块继续为“开发中（Demo）”。

Task 1: 建立全链原型映射和 RED 视觉/交互契约

Files:

  • Create: docs/visual-baselines/mrc-mobile-subpages.md
  • Create: 04-新项目源码_source/项目源码/pri-smart-hospital-miniprogram/tests/mrc-subpage-visual-contract.test.js
  • Create: 04-新项目源码_source/项目源码/pri-smart-hospital-miniprogram/tests/mrc-subpage-interaction-contract.test.js
  • Modify: openspec/changes/mrc-demo-mp-apply-001/specs/mrc-demo-mp-application-hub/spec.md

Step 1: 将原型文件、目标路由、页面专属节点、Mock 数据、实际操作、受限能力和截图状态逐页登记。身份验证页必须登记四节点步骤卡、三种申请身份、材料要求、所有上传卡/长条上传占位与固定“下一步：选择复印内容”；新增地址页必须登记地区选择、行内校验、匿名回填与原始输入隔离。

Step 2: 编写 RED 契约。每页必须具备自定义导航、滚动内容区、可见步骤/状态、固定主操作、原型专属卡片；身份页还需有身份切换和随身份更新的材料区。以 Page/wx mock 覆盖列表筛选/空态、内容/记录选择、手录校验、用途/份数/领取方式/地址回填、协议建单、详情/进度/结算受控操作，不可只做字符串断言。

Step 3: 运行两份测试，确认因当前通用骨架而 RED；提交测试和映射。

Wave 分层执行规则

子页面按可串行验收的页面依赖拆成三波。mrc-subpage-visual-contract.test.js 与 mrc-subpage-interaction-contract.test.js 由 MRC_SUBPAGE_WAVE 明确选择覆盖范围；不设置变量时默认 Wave 1，因此 npm test 在 Wave 1 开发期间不执行未开工 Wave 2/3 的 RED 契约。不得删除 Wave 2/3 需求或以默认跳过宣称它们已通过。

Wave 页面 命令与门禁
1 identity、record-config、record-select、manual-record、address-create MRC_SUBPAGE_WAVE=1 node tests/mrc-subpage-visual-contract.test.js 与 MRC_SUBPAGE_WAVE=1 node tests/mrc-subpage-interaction-contract.test.js；完成后必须 GREEN
2 application-form、confirm-submit 使用 MRC_SUBPAGE_WAVE=2 执行相同两份测试；在 Wave 2 开始前保留 RED，不参与 Wave 1 的 npm test
3 my-applications、order-detail、order-progress、settlement 使用 MRC_SUBPAGE_WAVE=3 执行相同两份测试；在 Wave 3 开始前保留 RED，不参与 Wave 1 的 npm test

MRC_SUBPAGE_WAVE=all 仅用于三波均完成后的全链回归；其 RED 不能反向阻断已满足当前波次门禁的实现，但也不得作为最终验收的替代。

Task 2: 重建申请页 1 — 身份验证与复印内容

Files:

  • Modify: packageMRC/pages/identity/index.{wxml,wxss,js,json}
  • Modify: packageMRC/pages/record-config/index.{wxml,wxss,js,json}
  • Modify: packageMRC/pages/record-select/index.{wxml,wxss,js,json}
  • Modify: packageMRC/pages/manual-record/index.{wxml,wxss,js,json}

Step 1: 使 Task 1 的相关断言 RED。

Step 2: 从 02-身份验证页.html、03-病案选择页.html、03-1-就诊记录选择页.html、03-2-老旧病案录入页.html 还原页面结构和布局。保留四步语义、底部固定 CTA、返回导航、材料/记录/手录的空态和弹层/提示反馈。上传材料以可点击的“匿名演示材料已准备/此 Demo 不支持上传”状态替代真实上传。

Step 3: 运行目标契约与现有 MRC 测试，GREEN 后提交。

Task 3: 重建申请页 2 — 申请表单、匿名地址与确认提交

Files:

  • Modify: packageMRC/pages/application-form/index.{wxml,wxss,js,json}
  • Create: packageMRC/pages/address-create/index.{wxml,wxss,js,json}
  • Modify: packageMRC/pages/confirm-submit/index.{wxml,wxss,js,json}
  • Modify: app.json

Step 1: 使表单/确认页契约 RED。

Step 2: 从 04-申请表单页.html、04-2-新增地址页.html、05-确认提交页.html 还原摘要、用途/份数、领取方式、地址展示、费用卡、信息确认、协议/提示及固定提交操作；注册 address-create，支持创建/选择匿名地址、返回申请表单回填。原始地址表单字段只在地址 Page data 校验，Adapter 仅可保存匿名标签；本地 Mock 下保留所有实际页面级选择、校验、跳转，不发起支付/地址服务。

Step 3: GREEN、全量离线验证并提交。

Task 4: 重建申请页 3 — 我的申请、详情、进度、结算

Files:

  • Modify: packageMRC/pages/my-applications/index.{wxml,wxss,js,json}
  • Modify: packageMRC/pages/order-detail/index.{wxml,wxss,js,json}
  • Modify: packageMRC/pages/order-progress/index.{wxml,wxss,js,json}
  • Modify: packageMRC/pages/settlement/index.{wxml,wxss,js,json}

Step 1: 使列表、详情、时间轴、费用/受限支付契约 RED。

Step 2: 从 01-1-我的申请页.html、06-申请详情页.html、07-申请进度页.html、08-确认支付页.html 还原状态标签、申请卡、空态、详情分组、进度轴、费用和交付信息、固定操作；支付只呈现不可用说明，不能伪造支付成功。

Step 3: GREEN、回归测试并提交。

Task 5: 视觉验收、文档与串行集成

Files:

  • Create: docs/visual-baselines/mrc-mobile-subpages-design-qa.md
  • Modify: 01-项目文档_docs/03-功能模块/开发中（Demo）_MRC-MP-APPLY-002_身份验证与材料上传/13-Demo正式复审记录.md
  • Modify: 01-项目文档_docs/00-项目管理/03-交付验收/功能模块总进度表.md

Step 1: 在微信开发者工具逐页捕获 375×812 同状态截图，并对每个原型登记 P0/P1/P2 差异；未取得截图时写入 blocked，绝不以离线测试替代。

Step 2: 修复所有 P0/P1/P2，重新截图。

Step 3: 执行 npm test、npm run validate:source、相关 openspec validate --strict、git diff --check。经规格和质量独立复核后，再串行合入 develop；更新唯一进度表，但视觉验收未完成不得改为待验收/已验收。