5.2 KiB
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: 写入失败断言
在申请卡片间距断言之后加入：
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 -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: 替换申请文字样式
.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 -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 -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:
git diff --check
git status --short
Expected: git diff --check 退出码为 0；不覆盖、删除或清理任何已有工作区内容。