144 lines
5.2 KiB
Markdown
144 lines
5.2 KiB
Markdown
# G01 次要文字可读性优化实施计划
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 提高 G01“加入申请”卡片说明与状态文字在浅色山水背景上的可读性，同时保持原有信息层级、卡片尺寸和滚动结构。
|
||
|
||
**Architecture:** 样式所有权继续留在 `pages/genealogy/g01-my-genealogies.vue`，不修改共享 `GenealogyCard.vue`。静态视觉契约锁定四类文字的字号、颜色和字重；现有 G01 运行 smoke 与五档截图验证没有重叠、裁切和滚动回归。
|
||
|
||
**Tech Stack:** uni-app、Vue 3、SCSS、PowerShell 静态契约、Node.js Chrome DevTools Protocol 运行 smoke。
|
||
|
||
## Global Constraints
|
||
|
||
- 只修改 G01 申请卡片说明与状态样式，不修改共享家谱卡、28% 公共背景或其他页面。
|
||
- 申请说明固定为 `28rpx / 500 / #62584c / 1.4`；状态固定为 `27rpx / 600`，审核中 `#7f4f16`，被拒绝 `#a7160c`，已退出 `#62584c`。
|
||
- 卡片高度、内边距、相邻 `12rpx` 间距、箭头、文案和点击行为保持不变。
|
||
- H5 证据不等于 Android/HBuilderX 已通过，也不等于 G01 整页已验收。
|
||
- 不使用多代理或 worktree，不执行 `git add`、`commit`、`push`、`reset` 或 `checkout`。
|
||
|
||
---
|
||
|
||
### Task 1: 用视觉契约锁定可读性样式
|
||
|
||
**Files:**
|
||
- Modify: `tests/g01-visual-contract.ps1`
|
||
- Test: `tests/g01-visual-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: G01 的 `.application-record__copy`、`.application-record__status` 及两个状态修饰类。
|
||
- Produces: 已确认字号、颜色、行高和字重的静态合同。
|
||
|
||
- [ ] **Step 1: 写入失败断言**
|
||
|
||
在申请卡片间距断言之后加入：
|
||
|
||
```powershell
|
||
if ($page -notmatch '(?s)\.application-record__copy\s*\{[^}]*color:\s*#62584c;[^}]*font-size:\s*28rpx;[^}]*font-weight:\s*500;[^}]*line-height:\s*1\.4;') { throw 'G-01 application descriptions do not use the approved readable style.' }
|
||
if ($page -notmatch '(?s)\.application-record__status\s*\{[^}]*color:\s*#7f4f16;[^}]*font-size:\s*27rpx;[^}]*font-weight:\s*600;') { throw 'G-01 application statuses do not use the approved readable base style.' }
|
||
if ($page -notmatch '(?s)\.application-record__status--rejected\s*\{[^}]*color:\s*#a7160c;') { throw 'G-01 rejected status must preserve the approved semantic red.' }
|
||
if ($page -notmatch '(?s)\.application-record__status--muted\s*\{[^}]*color:\s*#62584c;') { throw 'G-01 muted status does not use the approved readable color.' }
|
||
```
|
||
|
||
- [ ] **Step 2: 运行契约并确认 RED**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
|
||
```
|
||
|
||
Expected: FAIL，错误包含 `application descriptions do not use the approved readable style`。
|
||
|
||
---
|
||
|
||
### Task 2: 实施最小样式修改
|
||
|
||
**Files:**
|
||
- Modify: `pages/genealogy/g01-my-genealogies.vue`
|
||
- Test: `tests/g01-visual-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: Task 1 的四组视觉契约。
|
||
- Produces: 仅 G01 申请卡片生效的增强可读性样式。
|
||
|
||
- [ ] **Step 1: 替换申请文字样式**
|
||
|
||
```scss
|
||
.application-record__status {
|
||
flex: 0 0 auto;
|
||
margin-left: 16rpx;
|
||
color: #7f4f16;
|
||
font-size: 27rpx;
|
||
font-weight: 600;
|
||
}
|
||
.application-record__status--rejected { color: #a7160c; }
|
||
.application-record__status--muted { color: #62584c; }
|
||
.application-record__copy {
|
||
display: block;
|
||
margin-top: 10rpx;
|
||
color: #62584c;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 运行契约并确认 GREEN**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
|
||
```
|
||
|
||
Expected: `PASS G-01 visual contract`。
|
||
|
||
- [ ] **Step 3: 证明契约可捕获回归**
|
||
|
||
临时把说明字号恢复为首轮 `26rpx`，运行契约确认失败；随后恢复 `28rpx` 并再次确认通过。临时变化不得保留。
|
||
|
||
---
|
||
|
||
### Task 3: 运行、截图和状态更新
|
||
|
||
**Files:**
|
||
- Modify: `docs/交接记录.md`
|
||
- Modify: `docs/验收规划.md`
|
||
- Modify: `design-qa.md`
|
||
- Evidence: `docs/design/screens/runtime/2026-07-16/g01-text-legibility-audit/`
|
||
|
||
**Interfaces:**
|
||
- Consumes: Task 2 已通过静态契约的 G01 页面。
|
||
- Produces: 五档响应式证据、修改前后 412×915 对比和准确的交接状态。
|
||
|
||
- [ ] **Step 1: 运行 G01 静态与运行回归**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-empty-state-contract.ps1
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1
|
||
node tests/g01-empty-state-runtime-smoke.js http://localhost:5173
|
||
```
|
||
|
||
Expected: 三组均输出 `PASS`。
|
||
|
||
- [ ] **Step 2: 生成五档截图并检查布局**
|
||
|
||
覆盖 `320×568`、`360×640`、`360×800`、`412×915`、`412×1000`；确认长说明不与状态或箭头重叠，卡片高度和 12rpx 间距不变，底栏与独立滚动正常。
|
||
|
||
- [ ] **Step 3: 更新状态文档**
|
||
|
||
写明用户确认并实施 G01 申请次要文字增强；H5 只形成内部候选，Android/HBuilderX 与 G01 整页验收仍未完成。
|
||
|
||
- [ ] **Step 4: 最终检查**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
git diff --check
|
||
git status --short
|
||
```
|
||
|
||
Expected: `git diff --check` 退出码为 0；不覆盖、删除或清理任何已有工作区内容。
|