rain
313 lines
16 KiB
Markdown
313 lines
16 KiB
Markdown
# 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-licensed-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`；缺少任何规则或效果稿时抛出明确错误。
|
||
|
||
- [x] **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"
|
||
}
|
||
```
|
||
|
||
- [x] **Step 2: 运行审计并确认它先失败**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-design-record-audit.ps1
|
||
```
|
||
|
||
Expected: `Missing A01 layout rule: 内容宽度 638rpx`。
|
||
|
||
- [x] **Step 3: 保持红灯测试未提交并进入 Task 2**
|
||
|
||
红灯只用于证明固定栅格规则确实缺失。不要单独提交失败测试；在 Task 2 将设计记录补齐并转绿后，再与设计记录一起提交。
|
||
|
||
### Task 2: 写入 A-01 固定栅格与状态边界
|
||
|
||
**Files:**
|
||
|
||
- Modify: `docs/design/A01_启动登录引导_设计记录.md`
|
||
- Test: `tests/a01-design-record-audit.ps1`
|
||
|
||
**Interfaces:**
|
||
|
||
- Consumes: Task 1 的 `$layoutRules` 与当前入口结构断言。
|
||
- Produces: 以 750rpx 设计画布表达的固定栅格、四类进入状态和明确的非运行时验收边界。
|
||
|
||
- [x] **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 上重新验收。
|
||
```
|
||
|
||
- [x] **Step 2: 在第 3 节加入状态表**
|
||
|
||
紧接固定栅格条目，加入以下表格：
|
||
|
||
```markdown
|
||
| 状态 | 触发 | A-01 可见结果 | 去向 |
|
||
| --- | --- | --- | --- |
|
||
| 初始未勾选 | 首次进入 | 两个按钮、注册文字与空复选框 | 留在 A-01 |
|
||
| 未同意协议 | 点击登录、微信登录或注册账号 | 提示“请先阅读并同意相关协议”，不跳转、不改变勾选状态 | 留在 A-01 |
|
||
| 登录已确认协议 | 点击“登录” | 结束 A-01 引导 | A-02，默认账号密码登录标签 |
|
||
| 微信已确认协议 | 点击“微信登录” | 结束 A-01 引导 | A-03，显示授权中、取消或失败回跳 |
|
||
| 注册已确认协议 | 点击“注册账号”文字 | 结束 A-01 引导 | A-04 |
|
||
```
|
||
|
||
- [x] **Step 3: 运行审计并确认通过**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-design-record-audit.ps1
|
||
```
|
||
|
||
Expected: `A01-DESIGN-RECORD-AUDIT PASS`。
|
||
|
||
- [x] **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-licensed-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 验收结论的资产清单。
|
||
|
||
- [x] **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'
|
||
```
|
||
|
||
- [x] **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`。
|
||
|
||
- [x] **Step 3: 生成或下载并记录资产**
|
||
|
||
生成以下三张独立背景，不能裁切或复用 G-01 背景：朱砂家祠头图 `750 × 196px`、暖宣纸纹理 `750 × 1334px`、淡墨建筑竹影山水叠层 `750 × 1334px`。将它们存到本任务列出的精确路径。
|
||
|
||
为登录按钮准备古金或白色线性人物图标，保存为 `login-outline-v1.png`；从官方或明确许可来源取得未经改色的微信图标，保存为 `wechat-licensed-v1.png`。两个文件均为 `96 × 96px` RGBA PNG，四个角完全透明。
|
||
|
||
在 A-01 设计记录新增“资产清单”表格，并写入以下列：资产路径、用途、来源或生成提示、尺寸、透明验收。微信条目必须填入直接来源页面与获取日期；其余四项必须写入生成提示或公开许可证来源。
|
||
|
||
- [x] **Step 4: 运行资产审计并确认通过**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
powershell -NoProfile -ExecutionPolicy Bypass -File tests/a01-asset-alpha-audit.ps1
|
||
```
|
||
|
||
Expected: 每个图标输出一行 `PASS`，最后输出 `A01-ASSET-ALPHA-AUDIT PASS`。
|
||
|
||
- [x] **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-licensed-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 运行时验收。
|