# 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/screens/A01-启动登录引导-效果稿-v2-独立注册.png` - 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:[`screens/A01-启动登录引导-效果稿-v2-独立注册.png`](screens/A01-启动登录引导-效果稿-v2-独立注册.png),用于确认独立“注册账号”按钮后的完整层级。 ``` - [ ] **Step 4: 暂不运行通过态审计** Run: 不运行;通过态必须在 Task 2 的图稿实际归档后执行。 ### Task 2: 生成并归档 A-01 效果稿 v2 **Files:** - Create: `docs/design/screens/A01-启动登录引导-效果稿-v2-独立注册.png` - 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\screens\A01-启动登录引导-效果稿-v2-独立注册.png' | 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/screens/A01-启动登录引导-效果稿-v2-独立注册.png 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 页面、接口或构建缓存。