rain
99 lines
3.4 KiB
Markdown
99 lines
3.4 KiB
Markdown
### 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"
|
||
```
|
||
|