rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
086fc3c7e494f1a441b15988e283a4f2a1a6e233
jiapuapp/docs/superpowers/plans/2026-07-16-genealogy-shared-background.md
T
rain 5a31a75da0 Review changes batch 6 of 6
2026-07-20 06:52:33 +08:00

6.8 KiB
Raw Blame History

G 类型页面共用 C 背景 Implementation Plan

For agentic workers: 本计划由当前主代理在同一会话内执行；用户明确禁止多代理、worktree、git add、commit、push、reset 和 checkout。

Goal: 让 9 个活动 G 页面通过一个公共组件完整显示 C 背景，左右不裁剪、不变形，并用宣纸底色延展剩余页面。

Architecture: components/GenealogyPageBackground.vue 是背景资产路径和显示规则的唯一所有者。各 G 页面移除旧背景图片与私有背景样式，只保留一个公共组件实例；测试从 pages.json 推导路由，防止页面清单漂移。

Tech Stack: uni-app、Vue 单文件组件、SCSS、PowerShell 契约测试、Node.js 运行冒烟测试。

Global Constraints

  • 仅修改 G 类型页面背景层，不改变页面内容、结构、交互和接口。
  • C 背景按宽度等比显示，顶部对齐，左右不裁剪、不变形。
  • 高屏和长页面未覆盖区域使用同色宣纸底色延展。
  • 不实施 G01 固定区／列表独立滚动。
  • 不使用多代理或 worktree，不执行任何 Git 写操作。
  • H5 截图仅作为内部候选，不能替代 Android/HBuilderX 复核。

Task 1: 建立公共背景契约

Files:

  • Create: tests/genealogy-shared-background-contract.ps1
  • Read: pages.json

Interfaces:

  • Consumes: pages.json 中所有 pages/genealogy/g*.vue 活动路由。

  • Produces: 每个 G 页面必须渲染一次 <GenealogyPageBackground /> 的仓库契约。

  • Step 1: 写失败测试

测试必须断言：公共组件存在；组件唯一引用 /static/assets/modules/genealogy/opaque/genealogy-page-background.png；使用 mode="widthFix"；包含固定满屏宣纸底层和宽度 100% 的图片；每个实际 G 页面恰好使用一次公共组件；页面不得直接引用旧纸纹、旧页脚或公共背景文件。

  • Step 2: 运行测试确认失败

Run: powershell -NoProfile -ExecutionPolicy Bypass -File tests/genealogy-shared-background-contract.ps1

Expected: 因公共组件和公共资产尚不存在而失败。

Task 2: 实现单一公共背景入口

Files:

  • Create: components/GenealogyPageBackground.vue
  • Create: static/assets/modules/genealogy/opaque/genealogy-page-background.png
  • Modify: design-pipeline/manifests/g01-background-candidates.json
  • Modify: design-pipeline/tests/g01-background-candidates.test.mjs

Interfaces:

  • Consumes: C 母版和可重建生成结果。

  • Produces: 无属性、无事件的 <GenealogyPageBackground /> 视觉组件。

  • Step 1: 将当前 C 生成结果复制为 G 模块公共运行资产

源文件为 design-pipeline/generated/g01-background/g01-list-background-direction-c.png；目标文件为 static/assets/modules/genealogy/opaque/genealogy-page-background.png。复制后验证 SHA-256 仍为 f14aeed81046d2d5e7ae78b1e62f572689c38261a2cc043142bef9f70200dc5b。

  • Step 2: 创建最小公共组件

组件使用固定满屏 view 提供宣纸底色，并在顶部放置 width: 100%、mode="widthFix" 的 C 背景图片；组件必须 pointer-events: none 且位于页面内容下方。

  • Step 3: 更新流水线清单测试和运行输出所有权

将 manifest 的 runtimeOutput 改为公共资产路径，并让 Node 测试断言新路径，避免 G01 私有资产继续成为正式入口。

Task 3: 迁移 9 个 G 页面

Files:

  • Modify: pages/genealogy/g01-my-genealogies.vue
  • Modify: pages/genealogy/g03-create-genealogy.vue
  • Modify: pages/genealogy/g05-genealogy-overview.vue
  • Modify: pages/genealogy/g06-search-genealogies.vue
  • Modify: pages/genealogy/g08-join-application.vue
  • Modify: pages/genealogy/g09-my-applications.vue
  • Modify: pages/genealogy/g10-application-review.vue
  • Modify: pages/genealogy/g11-genealogy-settings.vue
  • Modify: pages/genealogy/g12-generation-poems.vue

Interfaces:

  • Consumes: <GenealogyPageBackground />。

  • Produces: 每个 G 页面一个公共背景实例，页面内容和交互保持原样。

  • Step 1: 替换模板背景层

删除各页开头的旧纸纹和页脚山水图片，或 G01 的私有 C 背景图片，原位置统一放置 <GenealogyPageBackground />。

  • Step 2: 删除仅服务于旧背景的样式

删除 9 个页面中对应 __paper、__footer、page-paper-texture、page-footer-landscape 或 page-background 规则；不改相邻内容样式。

  • Step 3: 运行公共背景契约确认通过

Run: powershell -NoProfile -ExecutionPolicy Bypass -File tests/genealogy-shared-background-contract.ps1

Expected: PASS G genealogy shared background contract。

Task 4: 更新既有契约与权威资料

Files:

  • Modify: tests/g01-visual-contract.ps1
  • Modify: docs/交接记录.md
  • Modify: docs/验收规划.md
  • Modify: docs/design/P00_页面结构与资产清单.md
  • Modify: docs/design/设计资产生产流水线规范.md
  • Modify: docs/design/G01_列表背景候选与换机重建.md
  • Modify: design-qa.md

Interfaces:

  • Consumes: 公共组件、公共资产路径和用户本轮决定。

  • Produces: 文档与实际代码一致的未验收状态说明。

  • Step 1: 更新 G01 视觉契约

契约改为检查公共组件和公共资产 SHA-256，不再要求 G01 私有资产路径。

  • Step 2: 更新权威资料

记录 C 已成为 9 个 G 页面公共背景；明确完整显示和宣纸延展规则，同时保留“G01 未整页验收、其他 G 页面未逐页截图复核、Android 复核缺失”。

Task 5: 验证和截图审核

Files:

  • Runtime evidence only: docs/design/screens/runtime/2026-07-16/

Interfaces:

  • Consumes: H5 运行页和四个目标视口。

  • Produces: 仅供内部审核的运行截图与测试证据。

  • Step 1: 运行聚焦验证

Run: powershell -NoProfile -ExecutionPolicy Bypass -File tests/genealogy-shared-background-contract.ps1

Run: powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1

Run: powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-empty-state-contract.ps1

Run: node --test design-pipeline/tests/g01-background-candidates.test.mjs

Run: design-pipeline/.venv/Scripts/python.exe -m unittest design-pipeline/tests/test_build_g01_backgrounds.py -v

Run: node tests/g01-empty-state-runtime-smoke.js

Run: git diff --check

Expected: 所有测试退出码为 0；git diff --check 无空白错误。

  • Step 2: 四档 H5 截图复核 G01

在 320×568、360×640、360×800、412×915 下确认完整左右边缘、无纵向拉伸、无横向溢出，图片下方自然过渡到宣纸底色。

  • Step 3: 报告验证边界

报告 H5 内部候选结果，不宣称 G01 或其他 G 页面正式验收；保留 Android/HBuilderX 真机或模拟器复核缺口。

Reference in New Issue View Git Blame Copy Permalink