200 lines
9.4 KiB
Markdown
200 lines
9.4 KiB
Markdown
# A01 纯代码资产流水线与页面落地实施计划
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:executing-plans` to implement this plan task-by-task. 本项目明确禁止 worktree、子代理和任何 Git 提交操作，执行时以项目规则为准。
|
||
|
||
**Goal:** 不依赖 Photoshop，用同一份清单和源资产生成 A01 正式 PNG、设计预览与状态联系表，并将选定视觉一比一落到 `pages/auth/a01-entry.vue`。
|
||
|
||
**Architecture:** `design-pipeline/manifests/a01.json` 是 A01 源资产、正式输出、状态和尺寸的唯一机器可读所有者。Node.js 调用 Sharp 完成缩放、PNG 优化、同源预览与联系表生成；A01 页面只引用确认后的正式资产，真实运行截图仍是最终视觉证据。
|
||
|
||
**Tech Stack:** Node.js 24、Sharp、PowerShell 契约测试、Vue 3 `<script setup>`、uni-app、SCSS。
|
||
|
||
## Global Constraints
|
||
|
||
- 当前只修改 A01、新流水线、A01 测试和 A01 证据，不修改其他页面。
|
||
- 基础版本只支持当前浅色国风主题；深色与跟随系统延期到下一版本。
|
||
- 保留全部 Photoshop、PSD、候选图、未跟踪文件和用户已有修改，不删除、不移动、不覆盖。
|
||
- 不接接口；密码、短信、微信和行为验证只实现当前页面样式与 Mock 状态。
|
||
- `brand-seal.png` 与 `a01-icon-lock-v1.png` 继续作为唯一正式来源，不重绘。
|
||
- 闭眼图标保留中心瞳孔；短信图标是消息气泡并且仅有三个点。
|
||
- 320×568 下核心入口同屏且页面不依赖纵向滚动；同时检查 360×640、360×800、412×915。
|
||
- 所有可见提示使用项目自定义组件，不使用原生 UniApp Toast、Modal、Loading 或 ActionSheet。
|
||
- 不执行 `git add`、commit、push、reset、checkout、上传、worktree 或多代理。
|
||
|
||
---
|
||
|
||
### Task 1: 建立纯代码流水线契约
|
||
|
||
**Files:**
|
||
- Create: `tests/a01-code-pipeline-contract.ps1`
|
||
- Create later: `design-pipeline/package.json`
|
||
- Create later: `design-pipeline/manifests/a01.json`
|
||
- Create later: `design-pipeline/scripts/build-a01.mjs`
|
||
|
||
**Interfaces:**
|
||
- Consumes: 当前工作区和 A01 规格。
|
||
- Produces: 缺少入口、清单、脚本或正式输出时失败，全部满足时输出 `A01-CODE-PIPELINE-CONTRACT PASS`。
|
||
|
||
- [ ] **Step 1: 写入失败契约测试**
|
||
|
||
测试必须断言：入口文件存在；清单 `schemaVersion=1`；逻辑画布为 412×915；状态包含 `password-hidden`、`password-visible`、`sms-default`、`sms-countdown`；正式输出全部位于 `static/assets/modules/auth/`；运行资产不存在 Photoshop/PSD/整页截图依赖；每个正式 PNG 存在且尺寸、Alpha 和最大体积符合清单。
|
||
|
||
- [ ] **Step 2: 运行 RED**
|
||
|
||
```powershell
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-code-pipeline-contract.ps1
|
||
```
|
||
|
||
Expected: FAIL，首个原因是缺少 `design-pipeline/package.json` 或 `design-pipeline/manifests/a01.json`。
|
||
|
||
---
|
||
|
||
### Task 2: 实现 A01 同源资产生成器
|
||
|
||
**Files:**
|
||
- Create: `design-pipeline/package.json`
|
||
- Create: `design-pipeline/package-lock.json`（由 `npm.cmd install` 生成）
|
||
- Create: `design-pipeline/manifests/a01.json`
|
||
- Create: `design-pipeline/scripts/build-a01.mjs`
|
||
- Generate: `design-pipeline/generated/a01/`
|
||
- Generate: `static/assets/modules/auth/opaque/a01-vnext-header-v1.png`
|
||
- Generate: `static/assets/modules/auth/transparent/a01-vnext-scroll-v1.png`
|
||
- Generate: `static/assets/modules/auth/transparent/a01-vnext-title-ornament-v1.png`
|
||
- Generate: `static/assets/modules/auth/transparent/a01-vnext-divider-v1.png`
|
||
- Generate: `static/assets/modules/auth/opaque/a01-vnext-primary-button-v1.png`
|
||
- Generate: `static/assets/modules/auth/opaque/a01-vnext-secondary-button-v1.png`
|
||
- Generate: `static/assets/modules/auth/transparent/a01-vnext-phone-v1.png`
|
||
- Generate: `static/assets/modules/auth/transparent/a01-vnext-eye-open-v1.png`
|
||
- Generate: `static/assets/modules/auth/transparent/a01-vnext-eye-closed-pupil-v1.png`
|
||
- Generate: `static/assets/modules/auth/transparent/a01-vnext-sms-three-dots-v1.png`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `docs/design/assets/a01-vnext/candidates/*.png`、现有 `brand-seal.png`、现有锁和微信资产。
|
||
- Produces: 正式槽位尺寸 PNG、四尺寸预览、密码／短信联系表及 `build-report.json`。
|
||
|
||
- [ ] **Step 1: 声明最小依赖**
|
||
|
||
`design-pipeline/package.json` 只包含 `sharp` 和 `build:a01` 命令，不引入前端框架或通用构建系统。
|
||
|
||
- [ ] **Step 2: 安装 Sharp**
|
||
|
||
```powershell
|
||
Set-Location design-pipeline
|
||
npm.cmd install
|
||
```
|
||
|
||
Expected: 生成锁文件，`npm.cmd audit` 不报告高危漏洞。
|
||
|
||
- [ ] **Step 3: 写入 A01 清单**
|
||
|
||
清单明确每个源文件、正式输出、目标像素尺寸、Alpha、最大体积、复用角色和四个页面状态；正式资源不得指向 `review/page-v2` 的整页 PNG 或 PSD。
|
||
|
||
- [ ] **Step 4: 实现生成脚本**
|
||
|
||
脚本必须：校验所有源文件；拒绝源输出路径越出工作区；用 Sharp 生成版本化 PNG；用同一正式 PNG 组合 412×915 密码／短信设计预览；生成四尺寸检查图；输出尺寸、Alpha、SHA256 和体积报告；任一失败返回非零退出码。
|
||
|
||
- [ ] **Step 5: 生成并验证 GREEN**
|
||
|
||
```powershell
|
||
npm.cmd --prefix design-pipeline run build:a01
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-code-pipeline-contract.ps1
|
||
```
|
||
|
||
Expected: `A01-CODE-PIPELINE BUILD PASS` 与 `A01-CODE-PIPELINE-CONTRACT PASS`。
|
||
|
||
---
|
||
|
||
### Task 3: 先收紧 A01 页面契约
|
||
|
||
**Files:**
|
||
- Modify: `tests/a01-a02-ui-contract.ps1`
|
||
- Modify later: `pages/auth/a01-entry.vue`
|
||
|
||
**Interfaces:**
|
||
- Consumes: Task 2 的正式资产文件名与 A01 验收合同。
|
||
- Produces: 页面没有引用新资产、仍依赖旧头部／旧卷轴、缺少小屏同屏结构或恢复原生提示时失败。
|
||
|
||
- [ ] **Step 1: 更新页面契约断言**
|
||
|
||
要求 A01 引用全部 `a01-vnext-*` 正式资源、`brand-seal.png`、现有锁、闭眼瞳孔和短信三点图标；禁止引用 `a01-login-header-exact-v2.png`、旧卷轴框、PSD、设计预览和整页截图；要求密码／短信独立状态、协议页内错误、验证码倒计时文案和自定义行为验证层继续存在。
|
||
|
||
- [ ] **Step 2: 运行 RED**
|
||
|
||
```powershell
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||
```
|
||
|
||
Expected: FAIL，原因是 A01 尚未引用 `a01-vnext-header-v1.png`。
|
||
|
||
---
|
||
|
||
### Task 4: 一比一落地 A01 页面
|
||
|
||
**Files:**
|
||
- Modify: `pages/auth/a01-entry.vue`
|
||
- Test: `tests/a01-a02-ui-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: Task 2 正式资产、选定联系表和 Task 3 契约。
|
||
- Produces: 可交互的密码／短信登录页；首次密码态、上次方式恢复、眼睛切换、验证码按钮状态、协议错误、行为验证层和自定义反馈保持可用。
|
||
|
||
- [ ] **Step 1: 替换视觉壳**
|
||
|
||
页面结构固定为宗祠头部、独立 `brand-seal`、完整卷轴容器、标题装饰、Tab、两行表单、主按钮、其他登录方式、微信入口、注册和协议。所有文字保持 DOM 文本和真实控件，不把整页预览当背景。
|
||
|
||
- [ ] **Step 2: 保持两种登录状态**
|
||
|
||
密码态使用现有锁、显示／隐藏眼睛和横线下方忘记密码；短信态使用消息气泡三点图标、验证码输入和“获取验证码／Ns 后重试”位置，不显示眼睛或忘记密码。
|
||
|
||
- [ ] **Step 3: 实现四尺寸响应式布局**
|
||
|
||
默认以 412×915 为视觉基准；对高度不超过 640px 的设备压缩宗祠头部、标题装饰和非触控间距，不把输入框、按钮、协议或交互热区压缩到约 44dp 以下；根容器禁止因主体布局产生纵向滚动。
|
||
|
||
- [ ] **Step 4: 运行 GREEN**
|
||
|
||
```powershell
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-code-pipeline-contract.ps1
|
||
```
|
||
|
||
Expected: 两项均 PASS。
|
||
|
||
---
|
||
|
||
### Task 5: 真实运行截图与视觉闭环
|
||
|
||
**Files:**
|
||
- Generate: `docs/design/screens/runtime/2026-07-15/A01-*.png`
|
||
- Modify: `design-qa.md`
|
||
- Preserve: `docs/design/assets/a01-vnext/review/page-v2/A01-page-password-sms-contact-v2-824x915.png`
|
||
|
||
**Interfaces:**
|
||
- Consumes: 已运行的 A01 H5、选定联系表、四尺寸与状态动作。
|
||
- Produces: 真实密码／短信截图、四尺寸内部证据和基于同视口比较的 QA 结论。
|
||
|
||
- [ ] **Step 1: 确认 H5 服务与真实路由**
|
||
|
||
```powershell
|
||
Invoke-WebRequest 'http://localhost:5173/#/pages/auth/a01-entry' -UseBasicParsing
|
||
```
|
||
|
||
Expected: HTTP 200；若服务未运行，只报告需要 HBuilderX 启动，不伪造截图。
|
||
|
||
- [ ] **Step 2: 捕获密码／短信状态**
|
||
|
||
使用现有 `scripts/capture-chrome-page.js` 捕获 412×915 两种状态，并生成一张联系表；再内部捕获 320×568、360×640、360×800。
|
||
|
||
- [ ] **Step 3: 执行 Product Design 视觉比对**
|
||
|
||
把选定联系表与真实运行联系表放在同一比较输入中，检查结构、比例、间距、字体、裁切、触控区和资源清晰度。P0/P1/P2 必须修复后重截；无法获取真实截图时把 `design-qa.md` 标为 `blocked`，不得写 `passed`。
|
||
|
||
- [ ] **Step 4: 最终验证**
|
||
|
||
```powershell
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-code-pipeline-contract.ps1
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||
git diff --check
|
||
git status --short
|
||
```
|
||
|
||
Expected: 两项测试 PASS、无空白错误；A01 仍保持待用户验收，不修改其他页面状态。
|