1

2026-07-21 21:02:55 +08:00
parent 5d99bae3f2
commit a127280ce6
12 changed files with 1131 additions and 0 deletions
@@ -0,0 +1,98 @@
+### 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` 尺寸断言，改为：
+
+```powershell
+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 项中加入：
+
+```powershell
+'import PageHeader from "@/components/PageHeader.vue";',
+'<PageHeader',
+'custom-back',
+'@back="goBack"'
+```
+
+并从 required 项删除 `'root-header-cinnabar.jpg'`；在 forbidden 项加入：
+
+```powershell
+'class="flow-header"',
+'flow-header__back',
+'root-header-cinnabar.jpg'
+```
+
+在 `tests/g03-document-flow-contract.ps1` 删除页头背景的 required 项，并加入：
+
+```powershell
+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
+& 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` 模板替换为：
+
+```vue
+<PageHeader
+  :title="isAncestorStep ? '录入首代人物' : '创建家谱'"
+  custom-back
+  @back="goBack"
+/>
+```
+
+在 `<script setup>` 中加入：
+
+```js
+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
+& 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 接入改动**
+
+```powershell
+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"
+```
+