Files
jiapuapp/docs/superpowers/plans/2026-07-14-g03-create-flow-consolidation.md
T
2026-07-14 17:36:43 +08:00

7.9 KiB
Raw Blame History

G03 创建家谱流程收敛实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 把 G04 始祖录入收敛为 G03 的第二步,保留创建/录入的真实数据行为,使独立路由由 57 条降到 56 条。

Architecture: pages/genealogy/g03-create-genealogy.vue 是创建家谱流程的唯一所有者;默认 step=create 创建家谱,step=ancestor&genealogyId=… 录入首代。成功创建后使用同一 G03 URL 进入第二步;首代创建成功后才进入 T01。G04 路由与页面彻底删除,不保留兼容入口。

Tech Stack: uni-app Vue 3、Vue Composition API、uni-app 生命周期、既有 appApi/genealogyContext、PowerShell 契约测试、Chrome DevTools 运行时冒烟、ImageGen 位图资产。

Global Constraints

  • 不触碰已验收 A01、A02、A04、A05、A06、G01 默认态和 G01 空状态的可见效果。
  • 完整页头、表单面板、主按钮均使用完整位图资产;CSS 只负责布局、文字、字段状态与交互。
  • 路由/状态/行为变化先写失败契约;无 G04 兼容路由、重定向或重复页面。
  • 不执行 git addgit commitgit pushgit reset 或 worktree 操作。

Task 1: 固化唯一 G03 创建流程合同

Files:

  • Create: tests/g03-create-flow-contract.ps1
  • Modify: tests/full-page-visual-contract.ps1
  • Modify: tests/a03-route-removal-contract.ps1
  • Test: tests/g03-create-flow-contract.ps1

Interfaces:

  • Consumes: pages.json、当前 G03/G04 页面、appApigenealogyContext

  • Produces: 证明 G03 是唯一创建流程入口、G04 不存在、step=create|ancestor 是唯一状态合同、位图表面不可被 CSS 伪造的静态守卫。

  • Step 1: 写失败契约

Assert-RoutePresent 'pages/genealogy/g03-create-genealogy'
Assert-RouteAbsent 'pages/genealogy/g04-first-ancestor'
Assert-FileAbsent 'pages/genealogy/g04-first-ancestor.vue'
Assert-Contains $g03 'step=ancestor&genealogyId='
Assert-Contains $g03 'appApi.createGenealogy'
Assert-Contains $g03 'appApi.createPerson'
Assert-Contains $g03 'g03-create-flow-panel.png'
Assert-NoCssSurface $g03 'create-flow-panel'
Assert-NoCssSurface $g03 'flow-primary-action'
  • Step 2: 运行并确认失败

Run: powershell -ExecutionPolicy Bypass -File tests/g03-create-flow-contract.ps1

Expected: FAIL,指出 G04 路由和文件仍存在,且 G03 还没有祖先步骤与位图面板。

Task 2: 生成并审视创建流程位图面板

Files:

  • Create: static/assets/modules/genealogy/opaque/g03-create-flow-panel.png
  • Modify: docs/design/P00_页面结构与资产清单.md
  • Test: tests/g03-create-flow-contract.ps1

Interfaces:

  • Consumes: G01 的暖宣纸、古金、淡墨山水视觉语言与 G03 约 656rpx 宽、876rpx 高的面板槽位。

  • Produces: 1122×1500 的不透明表单面板位图,供 G03 两个流程状态共用。

  • Step 1: 用 ImageGen 生成单一最终候选

Use case: ui-mockup。生成暖宣纸全画布、不透明、古金双线框、回纹角饰、极淡右上云纹和底沿淡墨山水的竖向面板;禁止文字、按钮、Logo、人物、黑角、透明区域。

  • Step 2: 将候选移入项目并验证位图

最终文件为 g03-create-flow-panel.png;检查 1122×1500、四角 alpha=255、没有黑角,并在 P00 标注其只服务 G03 的 create|ancestor 两个状态。

Task 3: 实现 G03 的两个真实步骤并移除 G04

Files:

  • Modify: pages/genealogy/g03-create-genealogy.vue
  • Modify: pages.json
  • Delete: pages/genealogy/g04-first-ancestor.vue
  • Test: tests/g03-create-flow-contract.ps1

Interfaces:

  • Consumes: 查询参数 stepgenealogyIdappApi.createGenealogyappApi.createPersongenealogyContext

  • Produces: G03 默认创建态、G03 首代录入态、两个状态各自校验和真实跳转。

  • Step 1: 添加明确路由状态同步

onLoad/onShow 同步当前查询参数。缺失或非 ancestorstep 一律为 create;祖先步骤从 genealogyIdgenealogyContext 读取家谱 ID。

  • Step 2: 保留创建行为并改为同路由下一步

submitCreate() 继续验证姓氏与谱名、调用 appApi.createGenealogy() 和设置上下文;成功后:

uni.redirectTo({
  url: `/pages/genealogy/g03-create-genealogy?step=ancestor&genealogyId=${created.id}`,
})
  • Step 3: 内嵌祖先录入行为

submitAncestor() 保留首代姓名校验和 appApi.createPerson();成功后仍跳转 T01。祖先步骤的返回动作回 G03 默认创建态;默认创建态使用 uni.navigateBack()

  • Step 4: 替换通用 CSS 视觉面

采用 G01 的纸纹、下沿山水和 root-header-cinnabar.jpg,在本页构建位图页头;两个步骤共用 g03-create-flow-panel.png;按钮引用 a01-primary-button.pngcreate-flow-panelflow-primary-action 不能有 CSS borderbackgroundborder-radius

  • Step 5: 删除 G04 并运行静态合同

pages.json 删除 G04,删除其 Vue 文件;full-page-visual-contract 与 A03 路由测试的总数改为 56。运行:

powershell -ExecutionPolicy Bypass -File tests/g03-create-flow-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/full-page-visual-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/a03-route-removal-contract.ps1

Expected: 全部 PASS。

Task 4: 真实流程、截图、清理和交接

Files:

  • Create: tests/g03-create-flow-runtime-smoke.js
  • Create: docs/design/screens/runtime/2026-07-14/G03-create-after-360x800.png
  • Create: docs/design/screens/runtime/2026-07-14/G03-ancestor-after-360x800.png
  • Create: docs/design/screens/runtime/2026-07-14/G03-ancestor-after-412x915.png
  • Modify: docs/交接记录.md
  • Modify: docs/规划.md
  • Modify: docs/design/视觉设计交接手册.md
  • Modify: docs/design/2026-07-14_页面与状态合并审计.md

Interfaces:

  • Consumes: G03 两步 URL、Chrome DevTools 9222、当前 56 路由合同。

  • Produces: 可复现的创建链路证据、准确的路线数与“G03 两步视觉等待用户确认”停点。

  • Step 1: 写并运行真实 Chrome 冒烟测试

依次验证:默认 G03 显示创建表单;填写姓氏与谱名并点击主动作后进入 G03 祖先步骤;刷新后祖先步骤仍在;填写首代姓名后进入 T01;直接访问默认 G03 仍是创建步骤。

  • Step 2: 截图并审视

使用相同 Chrome/视口截取两步;并排比较 G01 根页视觉基准与 G03 的纸纹、页头、面板和按钮。检查图片已加载、无黑角、无横向裁切、字段和主动作完整可达。

  • Step 3: 同步当前状态

更新文档为:G01 空态已获用户验收;G04 已合并为 G03 step=ancestor;当前独立路由 56 条;G03 两步已实现/截图/自动验证,等待用户审美确认;下一项是 G07→G06。

  • Step 4: 完成回归

Run:

powershell -ExecutionPolicy Bypass -File tests/g03-create-flow-contract.ps1
node tests/g03-create-flow-runtime-smoke.js http://localhost:5173
powershell -ExecutionPolicy Bypass -File tests/full-page-visual-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/compile-audit.ps1
powershell -ExecutionPolicy Bypass -File tests/g01-empty-state-contract.ps1
node tests/g01-empty-state-runtime-smoke.js http://localhost:5173
powershell -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/a04-registration-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/a05-reset-password-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/a06-auth-status-contract.ps1
git diff --check

Expected: 全部通过;git diff --check 只允许现有 CRLF 警告,不存在空白错误。