diff --git a/.gitignore b/.gitignore index f2e10a1..4c5993c 100644 --- a/.gitignore +++ b/.gitignore @@ -9,5 +9,6 @@ /docs/design/assets/a01-vnext/candidates/ /docs/design/assets/a01-vnext/review/ /.superpowers/ +/runtime/ **/__pycache__/ *.py[cod] diff --git a/components/AppButton.vue b/components/AppButton.vue new file mode 100644 index 0000000..89db12e --- /dev/null +++ b/components/AppButton.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/components/AppDialog.vue b/components/AppDialog.vue new file mode 100644 index 0000000..eb27517 --- /dev/null +++ b/components/AppDialog.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/components/AppLoading.vue b/components/AppLoading.vue new file mode 100644 index 0000000..ca7e440 --- /dev/null +++ b/components/AppLoading.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/components/AppTabbar.vue b/components/AppTabbar.vue index 9aeb8e1..c26e67c 100644 --- a/components/AppTabbar.vue +++ b/components/AppTabbar.vue @@ -1,25 +1,55 @@ diff --git a/components/AppToast.vue b/components/AppToast.vue new file mode 100644 index 0000000..6fe8a3f --- /dev/null +++ b/components/AppToast.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/components/GenealogyCard.vue b/components/GenealogyCard.vue index 9b8f417..4d4a088 100644 --- a/components/GenealogyCard.vue +++ b/components/GenealogyCard.vue @@ -34,6 +34,9 @@ + + 更新于 {{ genealogy.updatedAt }} + {{ genealogy.memberCount }} 位成员 - - 更新于 {{ genealogy.updatedAt }} - @@ -73,7 +73,7 @@ defineEmits(["select"]); .genealogy-card { position: relative; display: flex; - min-height: 156rpx; + min-height: 178rpx; align-items: center; padding: 18rpx 24rpx; box-sizing: border-box; @@ -177,25 +177,34 @@ defineEmits(["select"]); .card-detail-row { display: flex; min-width: 0; + flex-wrap: wrap; align-items: center; justify-content: space-between; - margin-top: 12rpx; + margin-top: 8rpx; } .card-metas { display: flex; min-width: 0; + width: 100%; align-items: center; + margin-top: 2rpx; } .card-meta-item { display: flex; min-width: 0; align-items: center; - margin-right: 14rpx; + margin-right: 0; +} +.card-meta-item + .card-meta-item { + margin-left: 18rpx; } .card-meta-icon { - width: 28rpx; - height: 28rpx; + width: 46rpx; + height: 46rpx; + flex: 0 0 auto; margin-right: 6rpx; + opacity: 1; + filter: saturate(1.35) brightness(0.82) contrast(1.15); } .card-meta { color: #62584c; @@ -204,9 +213,12 @@ defineEmits(["select"]); } .card-updated { display: flex; + width: 100%; flex: 0 0 auto; align-items: center; - margin-left: 10rpx; + justify-content: flex-end; + margin-top: 0; + margin-left: 0; color: #62584c; font-size: 24rpx; font-weight: 500; diff --git a/components/GenealogyPageBackground.vue b/components/GenealogyPageBackground.vue new file mode 100644 index 0000000..8cc5d78 --- /dev/null +++ b/components/GenealogyPageBackground.vue @@ -0,0 +1,30 @@ + + + diff --git a/components/ModulePageBackground.vue b/components/ModulePageBackground.vue new file mode 100644 index 0000000..76ca72e --- /dev/null +++ b/components/ModulePageBackground.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/components/PageHeader.vue b/components/PageHeader.vue index 3f6e6a6..ac02058 100644 --- a/components/PageHeader.vue +++ b/components/PageHeader.vue @@ -2,25 +2,58 @@ @@ -28,12 +61,12 @@ diff --git a/components/tree/TreeMemberForm.vue b/components/tree/TreeMemberForm.vue index c5967cc..dbd230e 100644 --- a/components/tree/TreeMemberForm.vue +++ b/components/tree/TreeMemberForm.vue @@ -1,28 +1,51 @@ diff --git a/design-pipeline/manifests/module-page-backgrounds.json b/design-pipeline/manifests/module-page-backgrounds.json new file mode 100644 index 0000000..7e37741 --- /dev/null +++ b/design-pipeline/manifests/module-page-backgrounds.json @@ -0,0 +1,32 @@ +{ + "version": 1, + "width": 1440, + "height": 3600, + "backgrounds": [ + { + "module": "tree", + "source": "docs/design/assets/module-backgrounds/masters/tree-page-background-imagegen-source.png", + "output": "static/assets/modules/tree/opaque/tree-page-background-long.png" + }, + { + "module": "family", + "source": "docs/design/assets/module-backgrounds/masters/family-page-background-imagegen-source.png", + "output": "static/assets/modules/family/opaque/family-page-background-long.png" + }, + { + "module": "records", + "source": "docs/design/assets/module-backgrounds/masters/records-page-background-imagegen-source.png", + "output": "static/assets/modules/records/opaque/records-page-background-long.png" + }, + { + "module": "notification", + "source": "docs/design/assets/module-backgrounds/masters/notification-page-background-imagegen-source.png", + "output": "static/assets/modules/notification/opaque/notification-page-background-long.png" + }, + { + "module": "profile", + "source": "docs/design/assets/module-backgrounds/masters/profile-page-background-imagegen-source.png", + "output": "static/assets/modules/profile/opaque/profile-page-background-long.png" + } + ] +} diff --git a/design-pipeline/package.json b/design-pipeline/package.json index b29503e..53d7371 100644 --- a/design-pipeline/package.json +++ b/design-pipeline/package.json @@ -11,7 +11,8 @@ "verify:assets": "node scripts/verify-assets.mjs", "build:a01-scroll-skins": "node scripts/build-a01-scroll-skins.mjs", "verify:a01-scroll-skins": "node scripts/verify-a01-scroll-skins.mjs", - "build:g01-background-candidates": "node scripts/build-g01-backgrounds.mjs" + "build:g01-background-candidates": "node scripts/build-g01-backgrounds.mjs", + "build:g01-empty-frame": "node scripts/build-g01-empty-frame.mjs" }, "dependencies": { "sharp": "0.34.5" diff --git a/design-pipeline/scripts/build-g01-empty-frame.mjs b/design-pipeline/scripts/build-g01-empty-frame.mjs new file mode 100644 index 0000000..ab5d424 --- /dev/null +++ b/design-pipeline/scripts/build-g01-empty-frame.mjs @@ -0,0 +1,51 @@ +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import sharp from 'sharp' + +const scriptDirectory = path.dirname(fileURLToPath(import.meta.url)) +const projectRoot = path.resolve(scriptDirectory, '..', '..') +const sourcePath = path.join(projectRoot, 'static', 'assets', 'modules', 'genealogy', 'opaque', 'g01-empty-panel.png') +const outputPath = path.join(projectRoot, 'static', 'assets', 'modules', 'genealogy', 'transparent', 'g01-empty-panel-frame.png') +const borderBand = 110 + +const { data, info } = await sharp(sourcePath) + .ensureAlpha() + .raw() + .toBuffer({ resolveWithObject: true }) + +for (let y = 0; y < info.height; y += 1) { + for (let x = 0; x < info.width; x += 1) { + const offset = (y * info.width + x) * info.channels + const red = data[offset] + const green = data[offset + 1] + const blue = data[offset + 2] + const alpha = data[offset + 3] + const distanceToEdge = Math.min(x, y, info.width - 1 - x, info.height - 1 - y) + const isWarmGold = red > green + && green > blue + && red - green >= 15 + && green - blue >= 12 + && red - blue >= 35 + && red < 245 + && blue < 180 + + if (distanceToEdge >= borderBand || !isWarmGold) { + data[offset + 3] = 0 + continue + } + + const edgeAlpha = Math.max(0, Math.min(255, (red - blue - 25) * 6)) + data[offset + 3] = Math.min(alpha, edgeAlpha) + } +} + +await sharp(data, { + raw: { + width: info.width, + height: info.height, + channels: info.channels + } +}).png().toFile(outputPath) + +process.stdout.write(`BUILT ${path.relative(projectRoot, outputPath)}\n`) + diff --git a/design-pipeline/scripts/build_module_page_backgrounds.py b/design-pipeline/scripts/build_module_page_backgrounds.py new file mode 100644 index 0000000..3f16772 --- /dev/null +++ b/design-pipeline/scripts/build_module_page_backgrounds.py @@ -0,0 +1,61 @@ +from __future__ import annotations + +import hashlib +import json +from pathlib import Path + +from PIL import Image + + +ROOT = Path(__file__).resolve().parents[2] +MANIFEST = ROOT / "design-pipeline/manifests/module-page-backgrounds.json" + + +def sha256(path: Path) -> str: + digest = hashlib.sha256() + with path.open("rb") as stream: + for chunk in iter(lambda: stream.read(1024 * 1024), b""): + digest.update(chunk) + return digest.hexdigest() + + +def normalize(source: Path, output: Path, width: int, height: int) -> None: + with Image.open(source) as image: + image = image.convert("RGB") + scale = max(width / image.width, height / image.height) + resized = image.resize( + (round(image.width * scale), round(image.height * scale)), + Image.Resampling.LANCZOS, + ) + left = max(0, (resized.width - width) // 2) + top = max(0, (resized.height - height) // 2) + normalized = resized.crop((left, top, left + width, top + height)) + output.parent.mkdir(parents=True, exist_ok=True) + normalized.save(output, format="PNG", optimize=True) + + +def main() -> None: + manifest = json.loads(MANIFEST.read_text(encoding="utf-8")) + width = int(manifest["width"]) + height = int(manifest["height"]) + report = [] + for item in manifest["backgrounds"]: + source = ROOT / item["source"] + output = ROOT / item["output"] + if not source.is_file(): + raise FileNotFoundError(source) + normalize(source, output, width, height) + report.append( + { + "module": item["module"], + "source": item["source"], + "output": item["output"], + "size": [width, height], + "sha256": sha256(output), + } + ) + print(json.dumps(report, ensure_ascii=False, indent=2)) + + +if __name__ == "__main__": + main() diff --git a/docs/design/全模块长背景与A系列控件交接.md b/docs/design/全模块长背景与A系列控件交接.md new file mode 100644 index 0000000..4e1f6ad --- /dev/null +++ b/docs/design/全模块长背景与A系列控件交接.md @@ -0,0 +1,46 @@ +# 全模块长背景与 A 系列控件交接 + +## 当前决定 + +- A 系列现有按钮、弹窗、Toast 和对话框视觉已经由用户确认，作为全局唯一标准。 +- G01 是 G 系列风格母体；9 个活动 G 页面继续共用 `GenealogyPageBackground.vue` 与既定 G01 长背景。 +- T、F、R、N、M 各自保留模块性格，但共享浅色国风、楷体、宣纸、朱砂、古金与 A 系列控件。 +- 本轮按用户要求不生成新的运行截图；页面仍需用户逐页审核和 Android/HBuilderX 复核。 + +## 公共组件 + +- `components/AppButton.vue`：A 系列主／次卷轴按钮。 +- `components/AppDialog.vue`：A 系列单／双按钮卷轴对话框。 +- `components/AppToast.vue`：A 系列卷轴轻提示。 +- `components/AppLoading.vue`：项目自定义水墨加载。 +- `components/PageHeader.vue`：普通页使用真实返回箭头，根页保留品牌头部。 +- `components/ModulePageBackground.vue`：T、F、R、N、M 背景唯一映射入口。 + +## 可恢复输入与运行资产 + +| 模块 | ImageGen 原始输入 | APP 运行资产 | SHA-256 | +| --- | --- | --- | --- | +| T | `tree-page-background-imagegen-source.png` | `static/assets/modules/tree/opaque/tree-page-background-long.png` | `b4322e6d8294c1e30d03baa005aa77122dd49257504da2462db74bfe79e44b37` | +| F | `family-page-background-imagegen-source.png` | `static/assets/modules/family/opaque/family-page-background-long.png` | `9c65aa0526d392e6d03e6c0216e9f5f9f9f917aa539e15c045283195882b5fec` | +| R | `records-page-background-imagegen-source.png` | `static/assets/modules/records/opaque/records-page-background-long.png` | `a420ac3791acc13e25ae68f68782e07754c0040b7f9fbde037bf1588f2ff7007` | +| N | `notification-page-background-imagegen-source.png` | `static/assets/modules/notification/opaque/notification-page-background-long.png` | `7f707153f6ecf53183fc360e6a34b4312975babeb5ccb3f36e048f1f64c65ca5` | +| M | `profile-page-background-imagegen-source.png` | `static/assets/modules/profile/opaque/profile-page-background-long.png` | `c5adb199e5773582775f9f0bab1fef62e0948755c9f22aca647d236f8d4ef8b8` | + +所有原始输入位于 `docs/design/assets/module-backgrounds/masters/`；运行资产统一为 `1440×3600` RGB PNG。 + +## 换机重建 + +```powershell +design-pipeline/.venv/Scripts/python.exe design-pipeline/scripts/build_module_page_backgrounds.py +powershell -NoProfile -ExecutionPolicy Bypass -File tests/global-heritage-visual-system-contract.ps1 +``` + +清单：`design-pipeline/manifests/module-page-backgrounds.json`。 + +## 验证边界 + +- 当前静态合同和无截图 H5 运行 smoke 已覆盖主要页面状态、按钮事件、导航与自定义弹层。 +- 尚未完成 Android/HBuilderX 字体、状态栏、返回手势、软键盘与不同面板亮度复核。 +- 五张 `1440×3600` 图片在 4GB Android 上的解码、切页与回收仍需专项检查。 +- 当前仅为全线基础样式候选，不表示 52 页已由用户正式验收或冻结。 + diff --git a/docs/superpowers/plans/2026-07-16-g01-secondary-text-legibility.md b/docs/superpowers/plans/2026-07-16-g01-secondary-text-legibility.md new file mode 100644 index 0000000..e8342b0 --- /dev/null +++ b/docs/superpowers/plans/2026-07-16-g01-secondary-text-legibility.md @@ -0,0 +1,143 @@ +# 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；不覆盖、删除或清理任何已有工作区内容。 diff --git a/docs/superpowers/plans/2026-07-16-genealogy-background-opacity.md b/docs/superpowers/plans/2026-07-16-genealogy-background-opacity.md new file mode 100644 index 0000000..4acba0d --- /dev/null +++ b/docs/superpowers/plans/2026-07-16-genealogy-background-opacity.md @@ -0,0 +1,144 @@ +# G 模块公共背景 28% 透明度实施计划 + +> **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:** 让 9 个活动 G 页面通过共享背景组件统一使用 28% 不透明度的连续长背景画层，同时保持宣纸底色、内容层和现有布局不变。 + +**Architecture:** `components/GenealogyPageBackground.vue` 继续作为背景显示规则的唯一所有者，只在图片画层增加 `opacity: 0.28`。`tests/genealogy-shared-background-contract.ps1` 锁定该值及单一所有权，页面级运行 smoke 和截图负责验证布局与可读性没有回归。 + +**Tech Stack:** uni-app、Vue 3、SCSS/CSS、PowerShell 契约测试、Node.js Chrome DevTools Protocol 运行 smoke。 + +## Global Constraints + +- 只修改共享背景图片画层，不修改背景 PNG、母版、裁切、贴底方式或页面滚动结构。 +- G01、G03、G05、G06、G08、G09、G10、G11、G12 统一生效；各页面不得重复定义透明度。 +- H5 截图仅作为内部候选；Android/HBuilderX 真机或模拟器仍待复核。 +- 不使用多代理、worktree，不执行 `git add`、`commit`、`push`、`reset` 或 `checkout`。 +- 保留所有已有修改、未跟踪文件、测试、文档和证据。 + +--- + +### Task 1: 用共享背景契约锁定 28% 不透明度 + +**Files:** +- Modify: `tests/genealogy-shared-background-contract.ps1` +- Test: `tests/genealogy-shared-background-contract.ps1` + +**Interfaces:** +- Consumes: `.genealogy-page-background__art` 作为共享长背景图片画层。 +- Produces: 背景透明度唯一值 `opacity: 0.28` 的仓库契约。 + +- [ ] **Step 1: 写入会失败的透明度与单一所有权断言** + +在组件画层断言之后加入： + +```powershell +Assert-Contract ($componentSource -match '(?s)\.genealogy-page-background__art\s*\{[^}]*opacity:\s*0\.28;') 'shared artwork must use the approved 28% opacity' +``` + +在每个 G 页面循环中加入： + +```powershell +Assert-Contract ($pageSource -notmatch '(?s)\.genealogy-page-background__art\s*\{[^}]*opacity:') "$route must not override the shared background opacity" +``` + +- [ ] **Step 2: 运行契约并确认按预期失败** + +Run: + +```powershell +powershell -NoProfile -ExecutionPolicy Bypass -File tests/genealogy-shared-background-contract.ps1 +``` + +Expected: FAIL，错误包含 `shared artwork must use the approved 28% opacity`。 + +--- + +### Task 2: 在共享组件实现 28% 画层不透明度 + +**Files:** +- Modify: `components/GenealogyPageBackground.vue` +- Test: `tests/genealogy-shared-background-contract.ps1` + +**Interfaces:** +- Consumes: Task 1 的 `opacity: 0.28` 契约。 +- Produces: 9 个活动 G 页面共用的淡化背景，无页面级覆盖。 + +- [ ] **Step 1: 最小修改共享画层样式** + +将画层规则改为： + +```css +.genealogy-page-background__art { + position: absolute; + bottom: 0; + right: 0; + left: 0; + display: block; + width: 100%; + opacity: 0.28; +} +``` + +- [ ] **Step 2: 运行契约并确认通过** + +Run: + +```powershell +powershell -NoProfile -ExecutionPolicy Bypass -File tests/genealogy-shared-background-contract.ps1 +``` + +Expected: `PASS G genealogy shared background contract`。 + +- [ ] **Step 3: 证明契约能捕获回归** + +临时把 `opacity: 0.28` 改回无透明度，运行同一契约并确认失败；随后恢复 `opacity: 0.28`，再次运行并确认通过。临时变化不得保留。 + +--- + +### Task 3: 运行回归、截图并更新内部状态 + +**Files:** +- Modify: `docs/交接记录.md` +- Modify: `docs/验收规划.md` +- Modify: `docs/design/G01_列表背景候选与换机重建.md` +- Modify: `design-qa.md` +- Evidence: `docs/design/screens/runtime/2026-07-16/` + +**Interfaces:** +- Consumes: Task 2 已通过契约的共享组件。 +- Produces: 五档 G01 H5 内部候选证据、其余 G 页面运行回归结果，以及不夸大验收层级的交接记录。 + +- [ ] **Step 1: 顺序运行 G 页面 smoke，避免调试端口竞争** + +Run: + +```powershell +node tests/g01-empty-state-runtime-smoke.js http://localhost:5173 +node tests/g03-create-flow-runtime-smoke.js http://localhost:5173 +node tests/g05-overview-runtime-smoke.js http://localhost:5173 +node tests/g06-search-flow-runtime-smoke.js http://localhost:5173 +node tests/g08-g10-application-flow-runtime-smoke.js http://localhost:5173 +node tests/g11-g12-settings-poems-runtime-smoke.js http://localhost:5173 +``` + +Expected: 六组脚本全部输出 `PASS`，无浏览器异常或 `console.error`。 + +- [ ] **Step 2: 生成并检查 G01 五档截图** + +尺寸为 `320×568`、`360×640`、`360×800`、`412×915`、`412×1000`。截图必须确认：背景比原候选明显变淡；标题、卡片、文字、按钮和底栏未同步变淡；左右不裁剪；内部列表滚动后底栏仍固定。 + +- [ ] **Step 3: 更新权威状态文档** + +文档统一写明：用户确认共享背景画层为 28% 不透明度；当前只有 H5 内部候选证据；G01 及其余 G 页面没有因此获得整页验收；Android/HBuilderX 与 4GB Android 长图性能仍待复核。 + +- [ ] **Step 4: 最终一致性检查** + +Run: + +```powershell +git diff --check +git status --short +``` + +Expected: `git diff --check` 退出码为 0；只报告已有换行符提示，不覆盖或清理工作区中的任何既有修改。 diff --git a/docs/superpowers/plans/2026-07-16-genealogy-bottom-aligned-background.md b/docs/superpowers/plans/2026-07-16-genealogy-bottom-aligned-background.md new file mode 100644 index 0000000..6050e92 --- /dev/null +++ b/docs/superpowers/plans/2026-07-16-genealogy-bottom-aligned-background.md @@ -0,0 +1,83 @@ +# G 类型页面 C 背景贴底自适应 Implementation Plan + +> **For agentic workers:** 本计划由当前主代理在同一会话内执行；用户明确禁止多代理、worktree、git add、commit、push、reset 和 checkout。 + +**Goal:** 让现有 C 背景保持完整比例并贴底显示，把山水视觉集中到 G 页面下半区，减少加入申请区域的大块纯色空白。 + +**Architecture:** 保持 `GenealogyPageBackground.vue` 为 9 个 G 页面的唯一背景入口，不增加图片资产。只把现有图片从 `top: 0` 改为 `bottom: 0`，继续使用 `widthFix` 和满屏宣纸底色。 + +**Tech Stack:** uni-app、Vue 单文件组件、CSS、PowerShell 契约测试、Chrome CDP 截图。 + +## Global Constraints + +- 只使用现有 `genealogy-page-background.png`，不生成或重做图片。 +- 背景完整显示、左右不裁剪、不拉伸。 +- 9 个活动 G 页面继续共用一个公共组件。 +- 不改变 G01 内容、卡片、交互、路由或固定区／滚动区结构。 +- 不使用多代理或 worktree，不执行任何 Git 写操作。 + +--- + +### Task 1: 背景贴底契约与最小实现 + +**Files:** +- Modify: `tests/genealogy-shared-background-contract.ps1` +- Modify: `components/GenealogyPageBackground.vue` + +**Interfaces:** +- Consumes: 现有公共背景组件和 C 运行资产。 +- Produces: `bottom: 0`、全宽、`widthFix` 的固定背景图层。 + +- [ ] **Step 1: 写失败契约** + +在公共背景契约中要求 `.genealogy-page-background__art` 包含 `bottom: 0`，并禁止 `top: 0`。 + +- [ ] **Step 2: 运行契约确认失败** + +Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/genealogy-shared-background-contract.ps1` + +Expected: 因当前组件仍使用 `top: 0` 而失败。 + +- [ ] **Step 3: 最小修改公共组件** + +将图片定位从 `top: 0` 改为 `bottom: 0`，不修改资产、宽度、模式、层级或 9 个页面。 + +- [ ] **Step 4: 运行契约确认通过** + +Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/genealogy-shared-background-contract.ps1` + +Expected: `PASS G genealogy shared background contract`。 + +### Task 2: 运行截图与回归 + +**Files:** +- Modify: `design-qa.md` +- Modify: `docs/交接记录.md` +- Modify: `docs/验收规划.md` +- Runtime evidence: `docs/design/screens/runtime/2026-07-16/` + +**Interfaces:** +- Consumes: 贴底公共背景组件。 +- Produces: 四档 G01 H5 内部候选截图和未验收状态记录。 + +- [ ] **Step 1: 四档真实截图** + +在 320×568、360×640、360×800、412×915 下截取 G01，确认完整画面贴底、上方宣纸区被主要内容覆盖、下方申请区域不再大块空白。 + +- [ ] **Step 2: 源图与实现同轮对照** + +同一比较输入内打开 C 源图与 412×915 实现截图，确认无裁剪、无拉伸、无横向溢出和文字对比度问题。 + +- [ ] **Step 3: 回归验证** + +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/full-page-visual-contract.ps1` + +Run: G01、G03、G05、G06、G08-G10、G11-G12 现有运行 smoke。 + +Run: `git diff --check` + +Expected: 所有命令退出码为 0；仍明确缺少 Android/HBuilderX 真机或模拟器复核。 diff --git a/docs/superpowers/plans/2026-07-16-genealogy-flagship-long-background-candidate.md b/docs/superpowers/plans/2026-07-16-genealogy-flagship-long-background-candidate.md new file mode 100644 index 0000000..b3477fa --- /dev/null +++ b/docs/superpowers/plans/2026-07-16-genealogy-flagship-long-background-candidate.md @@ -0,0 +1,70 @@ +# G 模块旗舰级连续长背景候选 Implementation Plan + +> **For agentic workers:** 当前主代理内联执行；用户明确禁止多代理、worktree、git add、commit、push、reset 和 checkout。 + +**Goal:** 基于现有 C 方向生成连续长背景候选；用户确认后，将其固化为 1536×3840 母版、生成 1440×3600 运行图并接入共享组件。 + +**Architecture:** 使用内置 ImageGen 编辑现有 C 母版，生成完整不透明长图。候选先存入 `design-pipeline/generated/g01-background/`；用户确认后保留原稿，以锁定 Pillow/Lanczos 归一化母版并生成版本化运行图，由 `GenealogyPageBackground.vue` 单一接入。 + +**Tech Stack:** Built-in ImageGen、Pillow 12.3.0、现有 G01 资产流水线。 + +## Global Constraints + +- 候选确认前不替换运行资产或页面引用；用户确认后只切换共享组件，不改 9 个页面业务结构。 +- 目标母版 1536×3840，运行方向 1440×3600。 +- 无文字、Logo、UI、卡片、红色、接缝和重复图案。 +- 不删除、覆盖或清理现有母版、候选、截图和未跟踪文件。 + +--- + +### Task 1: 生成长图候选 + +**Files:** +- Read: `docs/design/assets/g01-background/masters/g01-list-background-direction-c-paper-master.png` +- Create: `design-pipeline/generated/g01-background/genealogy-page-background-long-flagship-candidate.png` + +**Interfaces:** +- Consumes: C 母版的宣纸色、竹影、水墨山水、亭台和中央低对比构图。 +- Produces: 一张未接入页面的长图候选 PNG。 + +- [x] **Step 1: 查看 C 母版并作为 ImageGen 编辑目标** + +确认输入图无文字、无 UI，保持其暖宣纸和灰金水墨语言。 + +- [x] **Step 2: 使用内置 ImageGen 生成 2.5:1 候选** + +提示中明确 2.5:1 连续纵向构图、顶部安全留白、中部低对比、下部山水、无接缝和禁止元素。 + +- [x] **Step 3: 将生成结果复制到被忽略的候选路径** + +不覆盖现有 A/B/C 母版或 `genealogy-page-background.png`。 + +### Task 2: 候选验证与展示 + +**Files:** +- Inspect: `design-pipeline/generated/g01-background/genealogy-page-background-long-flagship-candidate.png` + +**Interfaces:** +- Consumes: ImageGen 候选。 +- Produces: 实际尺寸、文件字节数、SHA-256 和视觉检查结果。 + +- [x] **Step 1: 用 Pillow 检查尺寸、模式和边缘连续性** + +确认不透明 RGB/RGBA、实际像素尺寸及没有异常透明边。 + +- [x] **Step 2: 打开候选检查视觉** + +检查文字／Logo 污染、明显横向色带、重复竹枝、中央过密和亭台位置。 + +- [x] **Step 3: 向用户展示候选** + +只报告候选事实，不宣称已接入、已验收或已完成 Android 验证。 + +### Task 3: 用户确认后的正式接入 + +- [x] 保留 793×1983 ImageGen 原稿，并生成 1536×3840 sRGB 归一化母版。 +- [x] 先新增失败契约，再扩展 manifest、Python 构建器和 Node 包装器为四候选。 +- [x] 生成 1440×3600 版本化运行图，更新共享背景组件；旧 C 文件不覆盖、不删除。 +- [x] 完成 G01 五档 H5 截图、G 页面运行 smoke、Python/Node/PowerShell 契约和内部设计 QA。 +- [ ] Android/HBuilderX 与 4GB Android 图片解码、切页、回收复核。 +- [ ] G01 固定区／独立滚动结构继续与用户讨论，不在本次背景接入中擅自实施。 diff --git a/docs/superpowers/plans/2026-07-16-genealogy-shared-background.md b/docs/superpowers/plans/2026-07-16-genealogy-shared-background.md new file mode 100644 index 0000000..78f1bcb --- /dev/null +++ b/docs/superpowers/plans/2026-07-16-genealogy-shared-background.md @@ -0,0 +1,154 @@ +# 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 页面必须渲染一次 `` 的仓库契约。 + +- [ ] **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: 无属性、无事件的 `` 视觉组件。 + +- [ ] **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: ``。 +- Produces: 每个 G 页面一个公共背景实例，页面内容和交互保持原样。 + +- [ ] **Step 1: 替换模板背景层** + +删除各页开头的旧纸纹和页脚山水图片，或 G01 的私有 C 背景图片，原位置统一放置 ``。 + +- [ ] **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 真机或模拟器复核缺口。 + diff --git a/docs/superpowers/plans/2026-07-16-global-heritage-visual-system.md b/docs/superpowers/plans/2026-07-16-global-heritage-visual-system.md new file mode 100644 index 0000000..cf9e357 --- /dev/null +++ b/docs/superpowers/plans/2026-07-16-global-heritage-visual-system.md @@ -0,0 +1,106 @@ +# 全模块国风视觉系统 Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 以 A 系列已确认控件为全局唯一标准，完成 G、T、F、R、N、M 活动页面的按钮、对话框、提示、返回导航和模块背景统一。 + +**Architecture:** 新建公共视觉组件持有 A 系列资产，G 页面继续消费现有共享背景，T/F/R/N/M 通过模块背景组件与 `ModulePage` 统一壳消费各自长背景。页面只保留业务状态和模块内容，不再自行定义全局控件外观。 + +**Tech Stack:** uni-app、Vue 3 ` +``` + +样式按 Global Constraints 的两档精确尺寸实现，动画继续由 `app-loading-breathe` 唯一维护。 + +- [ ] **Step 4: 更新 G01 消费方式** + +```vue + +``` + +删除 G01 的 `.state-copy--loading` 独立说明节点。 + +- [ ] **Step 5: 验证通过** + +Run: + +```powershell +powershell -NoProfile -ExecutionPolicy Bypass -File tests/app-loading-contract.ps1 +powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-loading-state-contract.ps1 +``` + +Expected: 全部 PASS。 + +--- + +### Task 2: G 系列接入 + +**Files:** +- Create: `tests/g-series-app-loading-contract.ps1` +- Modify: `pages/genealogy/g05-genealogy-overview.vue` +- Modify: `pages/genealogy/g06-search-genealogies.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: Task 1 的 `AppLoading` 属性合同。 +- Produces: G05/G09/G10/G11/G12 页面级 Loading 与 G06 局部 Loading。 + +- [ ] **Step 1: 写入失败契约** + +每页必须导入 `AppLoading`；G05、G09、G10、G11、G12 在自身 `loading` 分支渲染页面级组件；G06 搜索区渲染 `variant="section"`。 + +- [ ] **Step 2: 验证失败** + +Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/g-series-app-loading-contract.ps1` + +Expected: FAIL，指出首个尚未接入的 G 页面。 + +- [ ] **Step 3: 接入页面级分支** + +各页在现有成功／空／失败分支之前加入： + +```vue + +``` + +其中 `pageState` 分别为 `overviewState`、`applicationState`、`reviewState`、`settingsState`、`poemState`；保留各页其他分支和操作。 + +- [ ] **Step 4: 接入 G06 局部加载** + +```vue + +``` + +搜索框、模式切换、地区筛选和分隔线继续可见。 + +- [ ] **Step 5: 验证通过** + +Run: + +```powershell +powershell -NoProfile -ExecutionPolicy Bypass -File tests/g-series-app-loading-contract.ps1 +powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-visual-contract.ps1 +node tests/module-page-runtime-smoke.js http://localhost:5173 +``` + +Expected: 全部 PASS。 + +--- + +### Task 3: T/F/N 页面级接入 + +**Files:** +- Create: `tests/module-app-loading-contract.ps1` +- Modify: `pages/tree/t01-tree-overview.vue` +- Modify: `pages/tree/t03-member-profile.vue` +- Modify: `pages/tree/t07-member-directory.vue` +- Modify: `pages/family/f01-family-feed.vue` +- Modify: `pages/notification/n01-message-center.vue` + +**Interfaces:** +- Consumes: Task 1 的页面级 `AppLoading`。 +- Produces: 五个页面独立且不会误落入错误卡的 `loading` 分支。 + +- [ ] **Step 1: 写入失败契约** + +锁定五页导入组件并在现有列表／详情／树／错误判断之前单独处理 `loading`；Loading 期间不显示错误操作或发布／审核按钮。 + +- [ ] **Step 2: 验证失败** + +Run: `powershell -NoProfile -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1` + +Expected: FAIL，指出首个仍把 `loading` 当成错误／空状态的页面。 + +- [ ] **Step 3: 实施五页分支** + +统一结构： + +```vue + + +…原空／错误状态… +``` + +只调整状态分支，不改变数据、入口、卡片和按钮行为。 + +- [ ] **Step 4: 验证通过** + +Run: + +```powershell +powershell -NoProfile -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1 +node tests/t01-tree-state-runtime-smoke.js http://localhost:5173 +node tests/t03-t08-member-flow-runtime-smoke.js http://localhost:5173 +node tests/root-pages-runtime-smoke.js http://localhost:5173 +``` + +Expected: 全部 PASS。 + +--- + +### Task 4: 全量验证与视觉检查 + +**Files:** +- Verify only: all modified files. + +**Interfaces:** +- Consumes: Tasks 1–3 的加载组件和页面状态分支。 +- Produces: H5 内部候选证据，不改变验收状态。 + +- [ ] **Step 1: 静态与编译验证** + +Run: + +```powershell +powershell -NoProfile -ExecutionPolicy Bypass -File tests/app-loading-contract.ps1 +powershell -NoProfile -ExecutionPolicy Bypass -File tests/g01-loading-state-contract.ps1 +powershell -NoProfile -ExecutionPolicy Bypass -File tests/g-series-app-loading-contract.ps1 +powershell -NoProfile -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1 +powershell -NoProfile -ExecutionPolicy Bypass -File tests/compile-audit.ps1 +``` + +- [ ] **Step 2: 运行态验证** + +Run G01、G 系列、T/F/N 现有 runtime smoke，任何失败均先定位状态分支，不放宽测试。 + +- [ ] **Step 3: 代表性截图** + +捕获 G01 页面级与 G06 局部级在 320×568、360×640、360×800、412×915 的真实 H5 画面，检查无横向溢出、无错误态闪现、固定底栏不遮挡。 + +- [ ] **Step 4: 工作区检查** + +Run: `git diff --check` + +Expected: 无空白错误；现有 LF/CRLF 提示单独报告。 diff --git a/docs/superpowers/plans/2026-07-19-app-loading-essential-motion.md b/docs/superpowers/plans/2026-07-19-app-loading-essential-motion.md new file mode 100644 index 0000000..e26c0ef --- /dev/null +++ b/docs/superpowers/plans/2026-07-19-app-loading-essential-motion.md @@ -0,0 +1,160 @@ +# AppLoading 必要加载动效实施计划 + +> **执行要求：** 使用 `superpowers:executing-plans` 在当前会话内逐步执行。用户明确禁止多代理、worktree、`git add`、commit、push、reset 和 checkout。 + +**目标：** 修复 G01 在 `prefers-reduced-motion: reduce` 下加载态完全静止的问题，使印牌和如意结保留清晰的透明度呼吸，同时不产生缩放、旋转或位移。 + +**架构：** 继续由 `components/AppLoading.vue` 单一维护加载动效，不在 G01 复制样式。正常模式保持现有动画；减少动态效果模式改用独立的透明度关键帧，并强制 `transform: none`。测试先锁定旧行为必须失败，再验证静态契约和当前 Chrome 运行时证据。 + +**技术栈：** Vue 3、uni-app、SCSS、PowerShell 契约测试、Chrome DevTools Protocol、Node.js。 + +## 全局约束 + +- 只修改 G01 加载态直接依赖的公共 `AppLoading`、聚焦测试和当轮内部证据。 +- 不改变 `variant`、`text`、`description` 组件契约。 +- 不改变 G01 状态逻辑、布局、背景、文案、标题栏或底部导航。 +- 不新增图片、CSS 图形、JavaScript 定时器或业务接口。 +- `prefers-reduced-motion: reduce` 下只允许透明度变化，`transform` 必须为 `none`。 +- H5 截图只是内部候选；Android/HBuilderX 仍未验证。 +- 不执行任何 Git 写操作。 + +--- + +### Task 1：修复并验证减少动态效果模式的必要加载反馈 + +**文件：** + +- 修改：`tests/app-loading-contract.ps1` +- 修改：`components/AppLoading.vue` +- 验证：`tests/g01-loading-state-contract.ps1` +- 验证：`tests/g-series-app-loading-contract.ps1` +- 验证：`tests/module-app-loading-contract.ps1` +- 内部证据：`docs/design/screens/runtime/2026-07-19/g01-approval/03-loading-essential-motion-412x915.png` + +**接口：** + +- 消费：`AppLoading` 现有 `variant`、`text`、`description` 属性。 +- 产出：正常模式继续使用 `app-loading-seal-breathe`／`app-loading-knot-breathe`；减少动态效果模式使用 `app-loading-seal-essential-pulse`／`app-loading-knot-essential-pulse`。 +- 不增加新的组件属性、事件或页面状态。 + +- [ ] **Step 1：先补充会失败的公共契约** + +在 `tests/app-loading-contract.ps1` 的现有动画断言之后加入： + +```powershell +Assert-Match -Content $component -Pattern '@keyframes\s+app-loading-seal-essential-pulse' -Message 'Reduced-motion AppLoading must retain an essential seal opacity pulse' +Assert-Match -Content $component -Pattern '@keyframes\s+app-loading-knot-essential-pulse' -Message 'Reduced-motion AppLoading must retain an essential knot opacity pulse' +Assert-Match -Content $component -Pattern '(?s)@media\s*\(prefers-reduced-motion:\s*reduce\).*?\.app-loading__seal\s*\{[^}]*animation:\s*app-loading-seal-essential-pulse\s+1\.2s\s+ease-in-out\s+infinite;[^}]*transform:\s*none;' -Message 'Reduced-motion seal must pulse opacity without transform motion' +Assert-Match -Content $component -Pattern '(?s)@media\s*\(prefers-reduced-motion:\s*reduce\).*?\.app-loading__knot\s*\{[^}]*animation:\s*app-loading-knot-essential-pulse\s+1\.2s\s+ease-in-out\s+\.2s\s+infinite;[^}]*transform:\s*none;' -Message 'Reduced-motion knot must pulse opacity without transform motion' +if ($component -match '(?s)@media\s*\(prefers-reduced-motion:\s*reduce\).*?animation:\s*none') { + throw 'Reduced-motion AppLoading must not become completely static' +} +``` + +- [ ] **Step 2：运行聚焦契约并确认 RED** + +运行： + +```powershell +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/app-loading-contract.ps1 +``` + +预期：退出码非 0，错误首先指向缺少 `app-loading-seal-essential-pulse`，证明测试捕获的是当前完全静止行为，而不是语法或路径错误。 + +- [ ] **Step 3：实现最小降动效透明度脉冲** + +在 `components/AppLoading.vue` 中保留现有正常模式关键帧，并把当前媒体查询替换为： + +```scss +@keyframes app-loading-seal-essential-pulse { + 0%, 100% { opacity: .58; } + 50% { opacity: 1; } +} + +@keyframes app-loading-knot-essential-pulse { + 0%, 100% { opacity: .28; } + 50% { opacity: .86; } +} + +@media (prefers-reduced-motion: reduce) { + .app-loading__seal { + animation: app-loading-seal-essential-pulse 1.2s ease-in-out infinite; + transform: none; + } + + .app-loading__knot { + animation: app-loading-knot-essential-pulse 1.2s ease-in-out .2s infinite; + transform: none; + } +} +``` + +不得修改模板、属性、尺寸、文案或正常模式关键帧。 + +- [ ] **Step 4：运行聚焦契约并确认 GREEN** + +运行： + +```powershell +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/app-loading-contract.ps1 +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/g01-loading-state-contract.ps1 +``` + +预期：分别输出 `APP-LOADING-CONTRACT PASS` 和 `G01-LOADING-STATE-CONTRACT PASS`，退出码均为 0。 + +- [ ] **Step 5：在当前唯一 Chrome 标签页验证真实动画** + +保持 G01 `state=loading` 和 412×915 视口。通过 9222 CDP 在同一次检查中读取： + +```js +const seal = document.querySelector('.app-loading__seal') +const knot = document.querySelector('.app-loading__knot') +const sealStyle = getComputedStyle(seal) +const knotStyle = getComputedStyle(knot) +({ + reduced: matchMedia('(prefers-reduced-motion: reduce)').matches, + sealAnimation: sealStyle.animationName, + sealTransform: sealStyle.transform, + sealOpacity: sealStyle.opacity, + sealAnimations: seal.getAnimations().length, + knotAnimation: knotStyle.animationName, + knotTransform: knotStyle.transform, + knotOpacity: knotStyle.opacity, + knotAnimations: knot.getAnimations().length +}) +``` + +等待约 420ms 后再次读取。预期： + +- `reduced` 为 `true`； +- 两个 `animationName` 分别以新的 essential pulse 名称开头；Vue scoped CSS 可在运行时追加哈希后缀； +- 两个 `getAnimations().length` 均大于 0； +- 两次读取的透明度不同； +- 两个 `transform` 均为 `none`； +- 页面仍为 G01 加载态。 + +- [ ] **Step 6：捕获并人工检查当前候选帧** + +使用当前唯一标签页保存： + +```text +docs/design/screens/runtime/2026-07-19/g01-approval/03-loading-essential-motion-412x915.png +``` + +人工检查：标题栏、背景、印牌、如意结、两行文案和底部导航均完整；没有列表、失败态或原生 Loading 串入。静态截图不作为动画运行证明，动画结论以 Step 5 的多时点数据为准。 + +- [ ] **Step 7：运行受影响合同与空白检查** + +运行： + +```powershell +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/g-series-app-loading-contract.ps1 +powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1 +git diff --check -- components/AppLoading.vue tests/app-loading-contract.ps1 docs/superpowers/specs/2026-07-19-app-loading-essential-motion-design.md docs/superpowers/plans/2026-07-19-app-loading-essential-motion.md +``` + +预期：两个合同均输出各自的 `PASS`，`git diff --check` 退出码为 0。不得把 Android/HBuilderX 写成已验证。 + +- [ ] **Step 8：回到同一加载态等待用户复核** + +保持浏览器停留在修正后的 G01 加载态，不自动切换到失败态。只有用户明确说加载态“通过”后，才继续 G01 下一状态；在此之前 G01 保持 `[!]`。 diff --git a/docs/superpowers/plans/2026-07-19-f01-family-feed-baseline-redesign.md b/docs/superpowers/plans/2026-07-19-f01-family-feed-baseline-redesign.md new file mode 100644 index 0000000..33c327c --- /dev/null +++ b/docs/superpowers/plans/2026-07-19-f01-family-feed-baseline-redesign.md @@ -0,0 +1,200 @@ +# F01 Family Feed Baseline Redesign Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. This project explicitly forbids subagents, worktrees, staging, and commits. + +**Goal:** Replace F01's application-status cards with a dedicated transparent family-letter content card and make all four shortcuts usable at every supported viewport. + +**Architecture:** Keep F01 state and navigation logic unchanged. Add one F01-owned raster card skin under the family module, update only F01 markup/styles, and protect the asset, hierarchy, touch-target, and state contracts with a focused PowerShell test plus existing runtime coverage. + +**Tech Stack:** uni-app, Vue 3 ` diff --git a/pages/family/f02-publish-feed.vue b/pages/family/f02-publish-feed.vue index d89b17b..51a67d3 100644 --- a/pages/family/f02-publish-feed.vue +++ b/pages/family/f02-publish-feed.vue @@ -1,4 +1,168 @@ -