jiapuapp/.superpowers/sdd/task-2-brief.md

Task 2: 用公共 PageHeader 替换 G03 自建页头

Files:

• Modify: tests/g03-visual-states-contract.ps1
• Modify: tests/g03-create-flow-contract.ps1
• Modify: tests/g03-document-flow-contract.ps1
• Modify: pages/genealogy/g03-create-genealogy.vue

Interfaces:

• Consumes: Task 1 的 <PageHeader :title="String" custom-back @back="Function" />。

• Produces: G03 动态标题 isAncestorStep ? "录入首代人物" : "创建家谱"，以及现有 goBack() 对第一、第二步的业务分流。

• Step 1: 将 G03 契约改成公共页头要求

在 tests/g03-visual-states-contract.ps1 删除 .flow-header__back、.flow-header__side 和 .flow-header__back-icon 尺寸断言，改为：

Assert-Match -Content $g03 -Pattern '(?s)<PageHeader\s+:title="isAncestorStep \? .录入首代人物. : .创建家谱."\s+custom-back\s+@back="goBack"\s*/>' -Message 'G03 must use PageHeader with its dynamic title and custom back handler'
if ($g03 -match 'flow-header|flow-header__back|flow-header__title') { throw 'G03 must not retain a private header implementation' }

在 tests/g03-create-flow-contract.ps1 的 required 项中加入：

'import PageHeader from "@/components/PageHeader.vue";',
'<PageHeader',
'custom-back',
'@back="goBack"'

并从 required 项删除 'root-header-cinnabar.jpg'；在 forbidden 项加入：

'class="flow-header"',
'flow-header__back',
'root-header-cinnabar.jpg'

在 tests/g03-document-flow-contract.ps1 删除页头背景的 required 项，并加入：

foreach ($forbidden in @('flow-header', 'root-header-cinnabar.jpg')) {
  if ($page -match [regex]::Escape($forbidden)) { throw "G03 must not retain private header token: $forbidden" }
}

• Step 2: 运行 G03 聚焦契约并确认 RED

Run:

& powershell -ExecutionPolicy Bypass -File tests/g03-visual-states-contract.ps1
& powershell -ExecutionPolicy Bypass -File tests/g03-create-flow-contract.ps1
& powershell -ExecutionPolicy Bypass -File tests/g03-document-flow-contract.ps1

Expected: 契约因 G03 仍含私有 flow-header 且尚未导入 PageHeader 而 FAIL。

• Step 3: 替换 G03 页头结构并删除私有样式

在 pages/genealogy/g03-create-genealogy.vue 中把整个 .flow-header 模板替换为：

<PageHeader
  :title="isAncestorStep ? '录入首代人物' : '创建家谱'"
  custom-back
  @back="goBack"
/>

在 <script setup> 中加入：

import PageHeader from "@/components/PageHeader.vue";

完整删除 .flow-header、.flow-header__content、.flow-header__back、.flow-header__side、.flow-header__back-icon、.flow-header__title 六组样式。保留现有 goBack()：第二步 redirectTo 第一页，第一步 navigateBack。

• Step 4: 运行 G03 聚焦契约并确认 GREEN

Run:

& powershell -ExecutionPolicy Bypass -File tests/g03-visual-states-contract.ps1
& powershell -ExecutionPolicy Bypass -File tests/g03-create-flow-contract.ps1
& powershell -ExecutionPolicy Bypass -File tests/g03-document-flow-contract.ps1
git diff --check

Expected: 三项输出 PASS，git diff --check 退出码为 0。

• Step 5: 提交 G03 接入改动

git add pages/genealogy/g03-create-genealogy.vue tests/g03-visual-states-contract.ps1 tests/g03-create-flow-contract.ps1 tests/g03-document-flow-contract.ps1
git commit -m "refactor: reuse shared header on G03"