rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
89dd20cec06d8989c4c80e6695aed697e4b96a6b
jiapuapp/docs/superpowers/plans/2026-07-13-a01-design-evidence.md
T
rain 1c9830c550 docs: refine A01 login entry hierarchy
2026-07-13 13:00:34 +08:00

12 KiB
Raw Blame History

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: 写入会失败的归档审计脚本

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：[`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: 先在归档审计脚本中加入栅格和状态断言

$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 × 96px RGBA 且四角 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/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 页面、接口或构建缓存。

Reference in New Issue View Git Blame Copy Permalink