12 KiB
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 × 96pxRGBA 透明 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
0only when设计记录包含四个入口、显式协议规则与 v2 效果稿归档路径。 -
Step 1: 写入会失败的归档审计脚本
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 效果稿路径写入设计记录的已归档美术锚点章节
- 早期效果稿 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: 先在归档审计脚本中加入栅格和状态断言
$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: 将资产存在、尺寸和透明角检查加入审计脚本
$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 × 96pxRGBA 且四角 Alpha 为 0
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: 将四个预览尺寸和无底部遮挡检查加入审计脚本
$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: 更新总规划和交接记录,然后提交
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 页面、接口或构建缓存。