261 lines
12 KiB
Markdown
261 lines
12 KiB
Markdown
# A-01 启动 / 登录引导设计证据执行计划
|
||
|
||
> 已失效：本计划基于“四个独立按钮”入口结构。当前方案改为“登录 + 微信登录 + 文字注册入口”，不得继续执行；待设计记录复核后另写新计划。
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to execute this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** 完成 A-01 的可归档效果稿、固定栅格、状态设计、本地 PNG 资产和小屏验收；不实现任何 uni-app 页面或接口。
|
||
|
||
**Architecture:** `docs/design/A01_启动登录引导_设计记录.md` 是唯一需求所有者。整页效果稿只作为美术锚点，真实背景和图标分别存入 `static/assets/backgrounds/` 与 `static/assets/icons/`，并由 PowerShell 审计脚本验证归档、文件存在和透明 PNG 条件。
|
||
|
||
**Tech Stack:** Markdown、PNG/JPG 静态资产、PowerShell 5.1 审计、HBuilderX Web 浏览器预览。
|
||
|
||
## Global Constraints
|
||
|
||
- 只做 Android `uni-app` 的页面设计；不改 Vue 页面、接口、真实登录、打包或依赖。
|
||
- A-01 的唯一需求所有者是 `docs/design/A01_启动登录引导_设计记录.md`；本计划不可重定义页面规则。
|
||
- 账号密码、手机验证码、微信、注册账号四个入口顺序固定；协议默认不勾选，禁止“登录即同意”。
|
||
- 登录欢迎页使用独立的红头/宣纸欢迎背景，不复用 G-01 的列表页大山水背景。
|
||
- 所有功能图标必须为项目内 `96 × 96px` RGBA 透明 PNG；微信标志必须为本地官方或许可的原色透明 PNG，并记录来源。
|
||
- 每个视觉产物先归档到项目并写入设计记录，再展示或进入下一关；全页效果稿不能代替真实图标资产或小屏验收。
|
||
|
||
---
|
||
|
||
### Task 1: 建立 A-01 设计归档关口
|
||
|
||
**Files:**
|
||
- Create: `tests/a01-design-record-audit.ps1`
|
||
- Modify: `docs/design/A01_启动登录引导_设计记录.md`
|
||
- Test: `tests/a01-design-record-audit.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `docs/design/A01_启动登录引导_设计记录.md`、`docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`
|
||
- Produces: Exit code `0` only when设计记录包含四个入口、显式协议规则与 v2 效果稿归档路径。
|
||
|
||
- [ ] **Step 1: 写入会失败的归档审计脚本**
|
||
|
||
```powershell
|
||
function ConvertFrom-Utf8Base64 {
|
||
param([string]$Value)
|
||
return [Text.Encoding]::UTF8.GetString([Convert]::FromBase64String($Value))
|
||
}
|
||
|
||
$recordPath = ConvertFrom-Utf8Base64 'ZG9jcy9kZXNpZ24vQTAxX+WQr+WKqOeZu+W9leW8leWvvF/orr7orqHorrDlvZUubWQ='
|
||
$effect = ConvertFrom-Utf8Base64 'ZG9jcy9kZXNpZ24vc2NyZWVucy9BMDEt5ZCv5Yqo55m75b2V5byV5a+8LeaViOaenOeovy12Mi3ni6znq4vms6jlhowucG5n'
|
||
$record = Get-Content -LiteralPath $recordPath -Raw -Encoding utf8
|
||
$rules = @(
|
||
(ConvertFrom-Utf8Base64 '6LSm5Y+35a+G56CB55m75b2V'),
|
||
(ConvertFrom-Utf8Base64 '5omL5py66aqM6K+B56CB55m75b2V'),
|
||
(ConvertFrom-Utf8Base64 '5b6u5L+h55m75b2V'),
|
||
(ConvertFrom-Utf8Base64 '5rOo5YaM6LSm5Y+3'),
|
||
(ConvertFrom-Utf8Base64 '5Yid5aeL5pyq5Yu+6YCJ')
|
||
)
|
||
|
||
foreach ($rule in $rules) {
|
||
if ($record -notmatch [regex]::Escape($rule)) {
|
||
throw "Missing A01 rule: $rule"
|
||
}
|
||
}
|
||
|
||
if (-not (Test-Path -LiteralPath $effect)) {
|
||
throw "Missing archived A01 effect: $effect"
|
||
}
|
||
|
||
Write-Output 'A01-DESIGN-RECORD-AUDIT PASS'
|
||
```
|
||
|
||
- [ ] **Step 2: 运行审计并确认因 v2 效果稿不存在而失败**
|
||
|
||
Run: `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`
|
||
Expected: `Missing archived A01 effect`。
|
||
|
||
- [ ] **Step 3: 将 v2 效果稿路径写入设计记录的已归档美术锚点章节**
|
||
|
||
```markdown
|
||
- 早期效果稿 v2 已转入项目外历史归档；当前使用分层 PSD 与 412×915 栅格证据确认完整层级。
|
||
```
|
||
|
||
- [ ] **Step 4: 暂不运行通过态审计**
|
||
|
||
Run: 不运行；通过态必须在 Task 2 的图稿实际归档后执行。
|
||
|
||
### Task 2: 生成并归档 A-01 效果稿 v2
|
||
|
||
**Files:**
|
||
- Keep: `docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`
|
||
- Modify: `docs/design/A01_启动登录引导_设计记录.md`
|
||
- Test: `tests/a01-design-record-audit.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: v1 美术锚点、A-01 四入口结构、D1 的独立登录欢迎背景规则。
|
||
- Produces: 仅作为美术锚点的 v2 PNG；不作为 UI 背景或图标来源。
|
||
|
||
- [ ] **Step 1: 生成竖屏 A-01 效果稿**
|
||
|
||
生成条件：朱砂祠堂红头与金色“谱”牌居中；暖宣纸主体；标题“家谱”和副句；四个纵向单行按钮，第一项朱砂实心，其余三项纸白古金描边；第四项文字为“注册账号”；底部为未勾选协议；淡墨建筑与竹影只作低对比背景，不遮挡文字。
|
||
|
||
- [ ] **Step 2: 先将生成文件保存为精确路径，再更新设计记录**
|
||
|
||
Run: `Get-Item -LiteralPath 'docs\design\assets\a01-vnext\source\A01-layered-source-v1.psd' | Select-Object Name,Length`
|
||
Expected: 文件存在且 `Length` 大于 `0`。
|
||
|
||
- [ ] **Step 3: 运行归档审计并确认通过**
|
||
|
||
Run: `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`
|
||
Expected: `A01-DESIGN-RECORD-AUDIT PASS`。
|
||
|
||
- [ ] **Step 4: 人工比对 v2 与 A-01 记录**
|
||
|
||
检查：四个入口顺序正确；注册按钮独立且不换行；协议未勾选；没有“登录即同意”；没有把 G-01 底部山水直接复制为登录背景。
|
||
|
||
### Task 3: 固定 Android 栅格与状态说明
|
||
|
||
**Files:**
|
||
- Modify: `docs/design/A01_启动登录引导_设计记录.md`
|
||
- Test: `tests/a01-design-record-audit.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: D1 的 `750rpx` 基准、`32rpx` 安全边距、正文最小 `24rpx`、主按钮最小 `88rpx`。
|
||
- Produces: A-01 的四种验收尺寸布局表，以及正常态、协议未勾选提示、页面加载三种状态定义。
|
||
|
||
- [ ] **Step 1: 先在归档审计脚本中加入栅格和状态断言**
|
||
|
||
```powershell
|
||
$requiredDesignText = @('320 × 568', '360 × 640', '360 × 800', '412 × 915', '协议未勾选提示', '页面加载')
|
||
foreach ($item in $requiredDesignText) {
|
||
if ($record -notmatch [regex]::Escape($item)) {
|
||
throw "缺少 A-01 栅格或状态说明：$item"
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 运行审计并确认因新字段未写入而失败**
|
||
|
||
Run: `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`
|
||
Expected: `缺少 A-01 栅格或状态说明`。
|
||
|
||
- [ ] **Step 3: 在设计记录新增固定栅格表和状态表**
|
||
|
||
表格必须为 `320 × 568`、`360 × 640`、`360 × 800`、`412 × 915` 分别写明：红头、标题区、四按钮区、协议区、可滚动区域和底部安全边距。状态表必须说明：正常态、协议未勾选提示、页面加载；微信授权的结果页只链接到 A-03，不在 A-01 重复设计。
|
||
|
||
- [ ] **Step 4: 运行审计并确认通过**
|
||
|
||
Run: `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`
|
||
Expected: `A01-DESIGN-RECORD-AUDIT PASS`。
|
||
|
||
### Task 4: 生成并验收本地背景与功能 PNG 资产
|
||
|
||
**Files:**
|
||
- Create: `static/assets/backgrounds/auth-welcome-hall-v1.png`
|
||
- Create: `static/assets/backgrounds/auth-welcome-paper-v1.jpg`
|
||
- Create: `static/assets/backgrounds/auth-welcome-ink-side-v1.png`
|
||
- Create: `static/assets/icons/auth/account-login-v1.png`
|
||
- Create: `static/assets/icons/auth/phone-code-login-v1.png`
|
||
- Create: `static/assets/icons/auth/register-v1.png`
|
||
- Create: `static/assets/icons/brand/wechat-login-v1.png`
|
||
- Modify: `docs/design/A01_启动登录引导_设计记录.md`
|
||
- Test: `tests/a01-design-record-audit.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: D1 背景和 PNG 规则。
|
||
- Produces: 可由后续 A-01 页面本地引用的独立背景和图标，及其来源/Alpha 验收清单。
|
||
|
||
- [ ] **Step 1: 将资产存在、尺寸和透明角检查加入审计脚本**
|
||
|
||
```powershell
|
||
$pngAssets = @(
|
||
'static/assets/backgrounds/auth-welcome-hall-v1.png',
|
||
'static/assets/backgrounds/auth-welcome-ink-side-v1.png',
|
||
'static/assets/icons/auth/account-login-v1.png',
|
||
'static/assets/icons/auth/phone-code-login-v1.png',
|
||
'static/assets/icons/auth/register-v1.png',
|
||
'static/assets/icons/brand/wechat-login-v1.png'
|
||
)
|
||
foreach ($asset in $pngAssets) {
|
||
if (-not (Test-Path -LiteralPath $asset)) { throw "缺少 A-01 PNG：$asset" }
|
||
}
|
||
if (-not (Test-Path -LiteralPath 'static/assets/backgrounds/auth-welcome-paper-v1.jpg')) {
|
||
throw '缺少 A-01 宣纸背景：auth-welcome-paper-v1.jpg'
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 运行审计并确认因资产不存在而失败**
|
||
|
||
Run: `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`
|
||
Expected: `缺少 A-01 PNG` 或 `缺少 A-01 宣纸背景`。
|
||
|
||
- [ ] **Step 3: 创建独立背景与图标资产，并在设计记录登记用途和来源**
|
||
|
||
规则：自定义背景及账号/手机/注册图标单独生成；微信图标从官方或许可来源获取，不改色、不从截图裁切；账号/手机/注册图标导出 `96 × 96px` RGBA PNG，微信图标保留原色透明背景；设计记录逐项记录路径、用途、来源和透明角检查结果。
|
||
|
||
- [ ] **Step 4: 扩展审计脚本，检查四个登录入口图标为 `96 × 96px` RGBA 且四角 Alpha 为 0**
|
||
|
||
```powershell
|
||
Add-Type -AssemblyName System.Drawing
|
||
$iconPaths = @(
|
||
'static/assets/icons/auth/account-login-v1.png',
|
||
'static/assets/icons/auth/phone-code-login-v1.png',
|
||
'static/assets/icons/auth/register-v1.png',
|
||
'static/assets/icons/brand/wechat-login-v1.png'
|
||
)
|
||
foreach ($iconPath in $iconPaths) {
|
||
$bitmap = [System.Drawing.Bitmap]::FromFile((Resolve-Path -LiteralPath $iconPath))
|
||
try {
|
||
if ($bitmap.Width -ne 96 -or $bitmap.Height -ne 96) { throw "图标尺寸不符：$iconPath" }
|
||
foreach ($point in @(@(0,0), @(95,0), @(0,95), @(95,95))) {
|
||
if ($bitmap.GetPixel($point[0], $point[1]).A -ne 0) { throw "图标透明角不符：$iconPath" }
|
||
}
|
||
} finally { $bitmap.Dispose() }
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 5: 运行完整审计并确认通过**
|
||
|
||
Run: `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`
|
||
Expected: `A01-DESIGN-RECORD-AUDIT PASS`。
|
||
|
||
### Task 5: 小屏视觉验收与正式状态更新
|
||
|
||
**Files:**
|
||
- Modify: `docs/design/A01_启动登录引导_设计记录.md`
|
||
- Modify: `docs/规划.md`
|
||
- Modify: `docs/交接记录.md`
|
||
- Test: `tests/a01-design-record-audit.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: 已归档 v2、已验收资产、A-01 栅格和状态记录。
|
||
- Produces: A-01 的设计完成结论；下一页才可解除冻结并开始设计。
|
||
|
||
- [ ] **Step 1: 将四个预览尺寸和无底部遮挡检查加入审计脚本**
|
||
|
||
```powershell
|
||
$evidenceLabels = @('320 × 568', '360 × 640', '360 × 800', '412 × 915', '无重叠', '无裁切', '无底部遮挡')
|
||
foreach ($label in $evidenceLabels) {
|
||
if ($record -notmatch [regex]::Escape($label)) {
|
||
throw "缺少 A-01 验收证据：$label"
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 在 HBuilderX Web 浏览器中逐一预览四种尺寸，并记录截图结论**
|
||
|
||
验收条件：四个按钮均可见且文字不换行；协议行可到达、默认未选且不被系统导航遮挡；背景不压住文字；点击区不小于 `88rpx`；没有远程图标或 CSS 图形替代。
|
||
|
||
- [ ] **Step 3: 在设计记录写入截图来源、尺寸、正常/协议未勾选提示状态和结论**
|
||
|
||
记录必须明确区分 HBuilderX Web 浏览器预览与未来 Android 原生包验证；不得把后者写成已完成。
|
||
|
||
- [ ] **Step 4: 运行完整审计并确认通过**
|
||
|
||
Run: `powershell -ExecutionPolicy Bypass -File tests\a01-design-record-audit.ps1`
|
||
Expected: `A01-DESIGN-RECORD-AUDIT PASS`。
|
||
|
||
- [ ] **Step 5: 更新总规划和交接记录，然后提交**
|
||
|
||
```powershell
|
||
git add -- tests/a01-design-record-audit.ps1 docs/design/A01_启动登录引导_设计记录.md docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd static/assets/backgrounds/auth-welcome-hall-v1.png static/assets/backgrounds/auth-welcome-paper-v1.jpg static/assets/backgrounds/auth-welcome-ink-side-v1.png static/assets/icons/auth/account-login-v1.png static/assets/icons/auth/phone-code-login-v1.png static/assets/icons/auth/register-v1.png static/assets/icons/brand/wechat-login-v1.png docs/规划.md docs/交接记录.md
|
||
git commit -m "docs: complete A01 login guide design"
|
||
```
|
||
|
||
Expected: 仅 A-01 设计证据、资产与状态记录进入提交；不包含 Vue 页面、接口或构建缓存。
|