# 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 仍保持待用户验收，不修改其他页面状态。