diff --git a/docs/superpowers/plans/2026-07-13-a01-text-registration-evidence.md b/docs/superpowers/plans/2026-07-13-a01-text-registration-evidence.md new file mode 100644 index 0000000..823421f --- /dev/null +++ b/docs/superpowers/plans/2026-07-13-a01-text-registration-evidence.md @@ -0,0 +1,315 @@ +# A-01 Text Registration Entry Design Evidence 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-01“登录 + 微信登录 + 文字注册入口”的可归档设计证据与 Android 固定栅格验收口径,不修改 uni-app 页面、接口或打包。 + +**Architecture:** `docs/design/A01_启动登录引导_设计记录.md` 是 A-01 当前规则的唯一所有者。PowerShell 审计脚本只验证该记录、归档效果稿和项目内静态资产;四个尺寸的效果稿是静态设计验证,不冒充 uni-app 运行时验收。 + +**Tech Stack:** Markdown、PNG/JPG 静态资产、PowerShell 5.1、内置图像生成工具、HBuilderX Web 浏览器(仅在页面实现阶段用于运行时验收)。 + +## Global Constraints + +- 只做 `D2 / A-01` 的设计证据;不改 `.vue`、路由、接口、真实登录、Android 打包或依赖。 +- 当前设计唯一所有者是 `docs/design/A01_启动登录引导_设计记录.md`;本计划和所有审计脚本不得重复定义入口规则。 +- A-01 只有朱砂红“登录”主按钮、古金描边“微信登录”按钮和“还没有账号?注册账号”文字入口。 +- 登录进入 A-02;A-02 承接“账号密码登录 / 手机验证码登录”双标签;微信授权属于 A-03,注册属于 A-04,忘记密码属于 A-05。 +- 协议复选框默认未勾选。任何进入操作都不能默认视为用户同意协议;未勾选仅提示用户先确认协议。 +- 使用 Android `rpx + flex` 设计口径,不使用 CSS Grid 或 `gap`;底部安全区规则必须使用 `env(safe-area-inset-bottom)`。 +- 登录欢迎页的头图、宣纸和山水必须是 A-01 独立资产,不复用 G-01 的 `footer-mountain-bamboo.png`。 +- 功能图标必须为项目内 `96 × 96px` RGBA 透明 PNG;微信标志只使用官方或许可来源的原色透明 PNG,不重绘或改色。 +- 效果稿 v1、v2 是历史证据,保留但不可作为当前入口结构依据;当前整页效果稿 v3 也不能充当真实背景或图标资产。 + +## File Structure + +| 文件 | 职责 | +| --- | --- | +| `docs/design/A01_启动登录引导_设计记录.md` | A-01 当前入口、栅格、状态、资产清单与静态验收结论的唯一设计来源。 | +| `tests/a01-design-record-audit.ps1` | 验证当前入口、路由归属、栅格约束和 v3 效果稿的归档存在。 | +| `static/assets/backgrounds/auth-ancestral-header-v1.png` | A-01 独立朱砂家祠头图,`750 × 196px`。 | +| `static/assets/backgrounds/auth-rice-paper-v1.jpg` | A-01 独立暖宣纸纹理,`750 × 1334px`。 | +| `static/assets/backgrounds/auth-ink-scenery-v1.png` | A-01 独立淡墨建筑、竹影与山水叠层,`750 × 1334px`。 | +| `static/assets/icons/auth/login-outline-v1.png` | 登录按钮使用的 `96 × 96px` 透明 PNG。 | +| `static/assets/icons/auth/wechat-official-v1.png` | 微信按钮使用的 `96 × 96px` 官方或许可、原色透明 PNG。 | +| `tests/a01-asset-alpha-audit.ps1` | 验证 A-01 图标的尺寸、透明角和可见像素,以及 A-01 独立背景文件。 | +| `docs/design/screens/A01-启动登录引导-栅格验收-320x568.png` | 320 × 568 静态设计效果稿。 | +| `docs/design/screens/A01-启动登录引导-栅格验收-360x640.png` | 360 × 640 静态设计效果稿。 | +| `docs/design/screens/A01-启动登录引导-栅格验收-360x800.png` | 360 × 800 静态设计效果稿。 | +| `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` | 412 × 915 静态设计效果稿。 | + +--- + +### Task 1: 锁定当前入口与固定栅格的审计关口 + +**Files:** + +- Modify: `tests/a01-design-record-audit.ps1` +- Test: `tests/a01-design-record-audit.ps1` + +**Interfaces:** + +- Consumes: UTF-8 Base64 文本解码函数 `ConvertFrom-Utf8Base64`、A-01 设计记录和效果稿 v3。 +- Produces: 退出码 `0` 与 `A01-DESIGN-RECORD-AUDIT PASS`;缺少任何规则或效果稿时抛出明确错误。 + +- [ ] **Step 1: 写入会失败的栅格规则断言** + + 在现有 `$rules` 数组后增加以下代码;这些规则在本任务开始时尚未写入设计记录,因此审计应失败。 + + ```powershell + $layoutRules = @( + (ConvertFrom-Utf8Base64 '5YaF5a655a695bqmIDYzOHJweA=='), + (ConvertFrom-Utf8Base64 '5Li75oyJ6ZKu6auY5bqmIDEwOHJweA=='), + (ConvertFrom-Utf8Base64 'ZW52KHNhZmUtYXJlYS1pbnNldC1ib3R0b20p'), + (ConvertFrom-Utf8Base64 '6LSm5Y+35a+G56CB55m75b2VIC8g5omL5py66aqM6K+B56CB55m75b2V') + ) + + foreach ($rule in $layoutRules) { + if ($record -notmatch [regex]::Escape($rule)) { + throw "Missing A01 layout rule: $rule" + } + } + + $currentStructure = [regex]::Match($record, '(?s)## 2\\..*?(?=## 3\\.)').Value + $currentStructureRule = ConvertFrom-Utf8Base64 '5Lik5Liq5aSn5oyJ6ZKu5ZKM5LiA5Liq5paH5a2X5YWl5Y+j' + if ($currentStructure -notmatch [regex]::Escape($currentStructureRule)) { + throw "Missing current A01 structure rule: $currentStructureRule" + } + ``` + +- [ ] **Step 2: 运行审计并确认它先失败** + + Run: + + ```powershell + powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-design-record-audit.ps1 + ``` + + Expected: `Missing A01 layout rule: 内容宽度 638rpx`。 + +- [ ] **Step 3: 提交失败测试** + + ```powershell + git add tests/a01-design-record-audit.ps1 + git commit -m "test: require A01 fixed-grid design rules" + ``` + +### Task 2: 写入 A-01 固定栅格与状态边界 + +**Files:** + +- Modify: `docs/design/A01_启动登录引导_设计记录.md` +- Test: `tests/a01-design-record-audit.ps1` + +**Interfaces:** + +- Consumes: Task 1 的 `$layoutRules` 与当前入口结构断言。 +- Produces: 以 750rpx 设计画布表达的固定栅格、四类进入状态和明确的非运行时验收边界。 + +- [ ] **Step 1: 在第 3 节加入固定栅格** + + 在“固定布局与状态边界”中加入以下内容,保持现有的入口与协议规则不变: + + ```markdown + - 固定设计画布为 `750rpx` 宽;内容宽度 638rpx,左右各 56rpx。朱砂家祠头图高 196rpx;标题与副标题区域从头图下方开始,操作区首按钮顶边固定为 646rpx。 + - 主按钮高度 108rpx,微信按钮高度 108rpx,二者间距 30rpx;注册文字在微信按钮下方 56rpx,字号 28rpx,整行居中且不得换行。两个按钮文字字号 36rpx,均单行居中。 + - 协议行使用 26rpx 字号,页面最小底部内边距为 `calc(32rpx + env(safe-area-inset-bottom))`。320 × 568 时页面允许纵向滚动,协议行与任一入口均不得落入系统导航区。 + - 仅作静态设计验证,不代表 uni-app 运行时验收;页面实现后仍须在 Android 320 × 568、360 × 640、360 × 800、412 × 915 上重新验收。 + ``` + +- [ ] **Step 2: 在第 3 节加入状态表** + + 紧接固定栅格条目,加入以下表格: + + ```markdown + | 状态 | 触发 | A-01 可见结果 | 去向 | + | --- | --- | --- | --- | + | 初始未勾选 | 首次进入 | 两个按钮、注册文字与空复选框 | 留在 A-01 | + | 未同意协议 | 点击登录、微信登录或注册账号 | 提示“请先阅读并同意相关协议”,不跳转、不改变勾选状态 | 留在 A-01 | + | 登录已确认协议 | 点击“登录” | 结束 A-01 引导 | A-02,默认账号密码登录标签 | + | 微信已确认协议 | 点击“微信登录” | 结束 A-01 引导 | A-03,显示授权中、取消或失败回跳 | + | 注册已确认协议 | 点击“注册账号”文字 | 结束 A-01 引导 | A-04 | + ``` + +- [ ] **Step 3: 运行审计并确认通过** + + Run: + + ```powershell + powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-design-record-audit.ps1 + ``` + + Expected: `A01-DESIGN-RECORD-AUDIT PASS`。 + +- [ ] **Step 4: 检查文档差异并提交** + + ```powershell + git diff --check + git add docs/design/A01_启动登录引导_设计记录.md tests/a01-design-record-audit.ps1 + git commit -m "docs: define A01 grid and entry states" + ``` + +### Task 3: 归档 A-01 独立背景和透明图标 + +**Files:** + +- Create: `static/assets/backgrounds/auth-ancestral-header-v1.png` +- Create: `static/assets/backgrounds/auth-rice-paper-v1.jpg` +- Create: `static/assets/backgrounds/auth-ink-scenery-v1.png` +- Create: `static/assets/icons/auth/login-outline-v1.png` +- Create: `static/assets/icons/auth/wechat-official-v1.png` +- Create: `tests/a01-asset-alpha-audit.ps1` +- Modify: `docs/design/A01_启动登录引导_设计记录.md` +- Test: `tests/a01-asset-alpha-audit.ps1` + +**Interfaces:** + +- Consumes: Task 2 的 A-01 独立美术方向和项目现有 `tests/g01-asset-alpha-audit.ps1` 的透明角审计方式。 +- Produces: 可由页面实现消费的独立背景与两个 `96 × 96px` RGBA 透明图标;设计记录中带来源、用途、路径、尺寸和 Alpha 验收结论的资产清单。 + +- [ ] **Step 1: 创建先失败的资产审计脚本** + + 创建 `tests/a01-asset-alpha-audit.ps1`,内容如下: + + ```powershell + $ErrorActionPreference = 'Stop' + + $root = Split-Path -Parent $PSScriptRoot + Add-Type -AssemblyName System.Drawing + + $backgrounds = @( + 'static/assets/backgrounds/auth-ancestral-header-v1.png', + 'static/assets/backgrounds/auth-rice-paper-v1.jpg', + 'static/assets/backgrounds/auth-ink-scenery-v1.png' + ) + $icons = @( + 'static/assets/icons/auth/login-outline-v1.png', + 'static/assets/icons/auth/wechat-official-v1.png' + ) + + foreach ($asset in $backgrounds + $icons) { + if (-not (Test-Path -LiteralPath (Join-Path $root $asset))) { + throw "Missing A01 asset: $asset" + } + } + + foreach ($asset in $icons) { + $bitmap = [System.Drawing.Bitmap]::FromFile((Join-Path $root $asset)) + $width = [int]$bitmap.Width + $height = [int]$bitmap.Height + $corners = @( + $bitmap.GetPixel(0, 0).A, + $bitmap.GetPixel(($width - 1), 0).A, + $bitmap.GetPixel(0, ($height - 1)).A, + $bitmap.GetPixel(($width - 1), ($height - 1)).A + ) + $visiblePixels = 0 + for ($y = 0; $y -lt $height; $y++) { + for ($x = 0; $x -lt $width; $x++) { + if ($bitmap.GetPixel($x, $y).A -gt 24) { $visiblePixels++ } + } + } + $bitmap.Dispose() + + if ($width -ne 96 -or $height -ne 96) { throw "$asset must be 96 x 96px." } + if (($corners | Where-Object { $_ -ne 0 }).Count -ne 0) { throw "$asset has opaque outer corners." } + if ($visiblePixels -lt 80) { throw "$asset has no usable visible artwork." } + Write-Output "PASS $asset transparent corners and visible artwork" + } + + Write-Output 'A01-ASSET-ALPHA-AUDIT PASS' + ``` + +- [ ] **Step 2: 运行资产审计并确认它先失败** + + Run: + + ```powershell + powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-asset-alpha-audit.ps1 + ``` + + Expected: `Missing A01 asset: static/assets/backgrounds/auth-ancestral-header-v1.png`。 + +- [ ] **Step 3: 生成或下载并记录资产** + + 生成以下三张独立背景,不能裁切或复用 G-01 背景:朱砂家祠头图 `750 × 196px`、暖宣纸纹理 `750 × 1334px`、淡墨建筑竹影山水叠层 `750 × 1334px`。将它们存到本任务列出的精确路径。 + + 为登录按钮准备古金或白色线性人物图标,保存为 `login-outline-v1.png`;从官方或明确许可来源取得未经改色的微信图标,保存为 `wechat-official-v1.png`。两个文件均为 `96 × 96px` RGBA PNG,四个角完全透明。 + + 在 A-01 设计记录新增“资产清单”表格,并写入以下列:资产路径、用途、来源或生成提示、尺寸、透明验收。微信条目必须填入直接来源页面与获取日期;其余四项必须写入生成提示或公开许可证来源。 + +- [ ] **Step 4: 运行资产审计并确认通过** + + Run: + + ```powershell + powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-asset-alpha-audit.ps1 + ``` + + Expected: 每个图标输出一行 `PASS`,最后输出 `A01-ASSET-ALPHA-AUDIT PASS`。 + +- [ ] **Step 5: 提交可消费资产与审计** + + ```powershell + git add static/assets/backgrounds/auth-ancestral-header-v1.png static/assets/backgrounds/auth-rice-paper-v1.jpg static/assets/backgrounds/auth-ink-scenery-v1.png static/assets/icons/auth/login-outline-v1.png static/assets/icons/auth/wechat-official-v1.png tests/a01-asset-alpha-audit.ps1 docs/design/A01_启动登录引导_设计记录.md + git commit -m "assets: add A01 login design resources" + ``` + +### Task 4: 归档四个 Android 尺寸的静态设计验收稿 + +**Files:** + +- Create: `docs/design/screens/A01-启动登录引导-栅格验收-320x568.png` +- Create: `docs/design/screens/A01-启动登录引导-栅格验收-360x640.png` +- Create: `docs/design/screens/A01-启动登录引导-栅格验收-360x800.png` +- Create: `docs/design/screens/A01-启动登录引导-栅格验收-412x915.png` +- Modify: `docs/design/A01_启动登录引导_设计记录.md` +- Modify: `docs/规划.md` +- Modify: `docs/交接记录.md` +- Test: `tests/a01-design-record-audit.ps1` + +**Interfaces:** + +- Consumes: Task 2 的 750rpx 栅格、Task 3 的独立资产和当前 v3 的视觉方向。 +- Produces: 四张按目标尺寸生成的静态设计验收稿;设计记录明确区分静态验收与页面实现后的运行时验收。 + +- [ ] **Step 1: 生成四张静态验收稿** + + 使用当前 v3 作为样式参考,为每个精确尺寸单独生成整页效果稿,不裁切同一张长图。每一张都必须显示:朱砂家祠头图、标题与副标题、两个大按钮、单行文字注册入口、未勾选协议和安全区留白。 + + 验收时逐项检查:320 × 568 的“还没有账号?注册账号”不换行;四个尺寸的两个按钮文字均单行;协议行完整可见;底部内容不进入 `env(safe-area-inset-bottom)` 预留区;没有账号密码或手机验证码的独立大按钮。 + +- [ ] **Step 2: 在设计记录写入静态验收结论** + + 在第 4 节增加四个效果稿链接和以下结论: + + ```markdown + - 静态设计验收已覆盖 320 × 568、360 × 640、360 × 800、412 × 915;四个尺寸均保持两个大按钮与单行文字注册入口。 + - 此结论只验证设计稿与固定栅格,不替代 uni-app 页面实现后的 Android 运行时验收。 + ``` + +- [ ] **Step 3: 运行设计记录审计并检查差异** + + Run: + + ```powershell + powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-design-record-audit.ps1 + git diff --check + ``` + + Expected: `A01-DESIGN-RECORD-AUDIT PASS`,且 `git diff --check` 没有错误输出。 + +- [ ] **Step 4: 更新阶段状态并提交** + + 仅当四张静态验收稿和 Task 3 资产审计均通过时,将 `docs/规划.md` 与 `docs/交接记录.md` 更新为“A-01 静态设计证据已完成,等待页面实现阶段的运行时验收”;不得写成页面已实现、接口已接通或 Android 已打包。 + + ```powershell + git add docs/design/screens/A01-启动登录引导-栅格验收-320x568.png docs/design/screens/A01-启动登录引导-栅格验收-360x640.png docs/design/screens/A01-启动登录引导-栅格验收-360x800.png docs/design/screens/A01-启动登录引导-栅格验收-412x915.png docs/design/A01_启动登录引导_设计记录.md docs/规划.md docs/交接记录.md + git commit -m "docs: archive A01 static size evidence" + ``` + +## Plan Self-Review + +- 规格覆盖:入口层级由 Task 1 审计、Task 2 固定;协议、路由和状态由 Task 2 记录;独立背景、透明图标与微信来源由 Task 3 归档;四个 Android 尺寸由 Task 4 归档。 +- 范围检查:所有任务限于设计记录、静态资源、效果稿和审计;没有 Vue、接口、登录逻辑或打包步骤。 +- 一致性检查:A-02 只承接账号密码与手机验证码双标签;A-03 只承接微信授权;A-04 只承接注册;A-05 只承接忘记密码。 +- 验收边界:四张效果稿是静态设计验证,不能替代页面实现后的真实 Android 运行时验收。