验收20%
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
# A01 资产优先设计落地计划
|
||||
|
||||
> 本计划由 `superpowers:writing-plans` 生成并在当前会话内直接执行。遵守用户最新约束:不使用子代理、不使用 worktree、不执行 `git add/commit/push/reset/checkout`,资产与设计验收通过前不修改 A01 页面代码。
|
||||
|
||||
**目标:** 以冻结的密码/验证码视觉真源为依据,制作一套可投入 uni-app Android 的 A01 最终资产,并使用同一批资产组装可编辑 Figma 设计。
|
||||
|
||||
**架构:** 密码与验证码状态共用唯一的背景、宗祠、卷轴、纹理、按钮和排版组件,仅切换标签、第二输入行和辅助操作。复杂装饰使用最终 PNG,文字、输入框布局、点击区域和状态切换保持可编辑;Figma 和应用后续必须引用相同资产文件与尺寸规则。
|
||||
|
||||
**技术栈:** Figma Design、Figma Plugin API、ImageGen 位图资产、uni-app/Vue、Android WebView/HBuilderX。
|
||||
|
||||
## 全局约束
|
||||
|
||||
- 唯一 Logo:`static/assets/foundation/transparent/brand-seal.png`;后续 Android 桌面图标也以它为源。
|
||||
- 密码状态:左侧使用 `static/assets/modules/auth/transparent/a01-icon-lock-v1.png`,右侧是眼睛按钮,“忘记密码”在输入横线下方右对齐。
|
||||
- 验证码状态:使用“消息气泡+三点”图标和“获取验证码”,不显示眼睛或忘记密码。
|
||||
- 除 `brand-seal` 与 `a01-icon-lock-v1` 外,A01 可见装饰资产全部制作新版本;旧文件保留但最终不引用。
|
||||
- 不使用原生 UniApp 提示组件作为最终视觉;本阶段不做接口对接。
|
||||
- 基础版本只覆盖当前浅色国风主题,以及 320×568、360×640、360×800、412×915;深色与跟随系统延期到下一版本。
|
||||
- 设计审核必须基于真实截图;H5 仅为候选证据,最终需要 Android/HBuilderX 复核。
|
||||
|
||||
---
|
||||
|
||||
### 任务 1:冻结视觉真源
|
||||
|
||||
**文件:**
|
||||
|
||||
- 密码:`docs/design/screens/handoff/2026-07-15/A01-visual-source-password-selected-v2-841x1870.png`
|
||||
- 验证码:`docs/design/screens/handoff/2026-07-15/A01-visual-source-sms-selected-v1-841x1870.png`
|
||||
|
||||
**验收:**
|
||||
|
||||
- 密码稿 SHA256:`A93F201349C1BB1F2DFAB50BA0B5372A6FC1C4762661326ADE17AA29F31960EF`
|
||||
- 验证码稿 SHA256:`31D023A523DA8CA25DF00736793FAF40086B5B46F32664B724E570F432BF9D9E`
|
||||
- 两张均为 `841×1870`,后续按 `412×915` 等比参考,不从聊天缩略图反推。
|
||||
|
||||
### 任务 2:建立 Figma 视觉真源与资产板
|
||||
|
||||
**目标文件:** [A01 登录页重设计(可编辑)](https://www.figma.com/design/fWhC0maHCxh5STQsjlOoWw)
|
||||
|
||||
**页面结构:**
|
||||
|
||||
- `00 视觉真源`:密码与验证码全尺寸参考图并排放置,标注文件名和 SHA256。
|
||||
- `01 资产板`:Logo、宗祠、卷轴分片、纹理、标题纹样、按钮分片、输入图标、Android 图标安全区。
|
||||
- `02 页面状态`:密码隐藏、密码显示、验证码默认、验证码倒计时。
|
||||
- `03 响应式验收`:当前浅色国风主题的四档尺寸状态。
|
||||
|
||||
**验收:** 每个 Figma 写入步骤返回节点 ID,并对新增 Frame 生成截图检查裁切、比例、文字和图标。
|
||||
|
||||
### 任务 3:制作新资产
|
||||
|
||||
**候选目录:** `docs/design/assets/a01-vnext/candidates/`
|
||||
|
||||
**最终目录:**
|
||||
|
||||
- `static/assets/modules/auth/opaque/`
|
||||
- `static/assets/modules/auth/transparent/`
|
||||
- `static/assets/foundation/opaque/`
|
||||
|
||||
**资产边界:**
|
||||
|
||||
- 宗祠头图:独立不透明宽图,包含 `brand-seal` 安全槽,但 Logo 本体仍单独引用。
|
||||
- 卷轴:顶部卷轴、中央纸纹理、左右边框、底部卷轴分离,禁止整张卷轴跨尺寸压缩。
|
||||
- 按钮:左端、中部可延展纹理、右端分离,避免边角被拉伸。
|
||||
- 图标:手机、开眼、闭眼保留瞳孔、消息气泡三点制作新版本;锁继续使用 `a01-icon-lock-v1.png`。
|
||||
- Android 图标:以 `brand-seal.png` 生成自适应图标前景、安全区预览与纯色背景方案,不改变 Logo 本体。
|
||||
|
||||
**验收:** 检查像素尺寸、ARGB/Alpha、透明边角、主体覆盖率、边缘杂色和小尺寸可读性;不合格资产不进入 `static`。
|
||||
|
||||
### 任务 4:用最终资产组装可编辑状态
|
||||
|
||||
**Figma Frame:**
|
||||
|
||||
- `A01 / Password / Hidden / 412×915`
|
||||
- `A01 / Password / Visible / 412×915`
|
||||
- `A01 / SMS / Default / 412×915`
|
||||
- `A01 / SMS / Countdown / 412×915`
|
||||
|
||||
**状态差异:**
|
||||
|
||||
- 密码隐藏:掩码文本、闭眼保留瞳孔。
|
||||
- 密码显示:明文文本、开眼图标。
|
||||
- 验证码默认:气泡三点图标、“获取验证码”。
|
||||
- 验证码倒计时:气泡三点图标、不可点击倒计时文案。
|
||||
|
||||
**验收:** 背景和共用资产必须为同一组件实例;切换状态时公共区域位置不得漂移。
|
||||
|
||||
### 任务 5:设计验收后进入代码实现
|
||||
|
||||
**后续才允许修改:**
|
||||
|
||||
- `pages/auth/a01-entry.vue`
|
||||
- A01 最终资产引用
|
||||
- `manifest.json` 或 HBuilderX Android 图标配置
|
||||
- `tests/a01-a02-ui-contract.ps1`
|
||||
|
||||
**验证命令:**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||||
```
|
||||
|
||||
**完成标准:** 合同测试通过,四档 H5 截图通过视觉比较,并取得 Android/HBuilderX 真机或模拟器截图;在此之前不得声明 A01 完成或验收通过。
|
||||
@@ -0,0 +1,199 @@
|
||||
# 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 仍保持待用户验收,不修改其他页面状态。
|
||||
@@ -0,0 +1,380 @@
|
||||
# A01 分层 PSD 与正式 PNG 资产实施计划
|
||||
|
||||
> **执行要求:** 只允许在当前会话内使用 `superpowers:executing-plans` 逐任务执行。用户明确禁止子代理、worktree、`git add`、`commit`、`push`、`reset`、`checkout` 和上传,因此本计划不包含这些动作;每个任务以测试输出和用户视觉确认作为检查点。
|
||||
|
||||
**目标:** 使用本机 Adobe Photoshop 2021 建立 A01 真正分层的 PSD,并从同一 PSD 导出可直接投入 uni-app 的干净 PNG 资产与密码/验证码代表图。
|
||||
|
||||
**架构:** `a01-psd-manifest.json` 是 PSD 图层、坐标、导出尺寸和文件路径的唯一机器可读所有者;PowerShell 负责校验环境并调用 Photoshop COM,ExtendScript 负责建立 PSD、切换状态和导出。ImageGen 只逐项生成缺少的原始美术层,所有候选先进入设计候选目录,经检查和用户确认后才进入 PSD 与正式资产目录。
|
||||
|
||||
**技术栈:** Windows PowerShell、Adobe Photoshop 2021 COM、ExtendScript JSX、PNG/PSD、ImageGen、uni-app 现有 PowerShell 合同测试。
|
||||
|
||||
## 全局约束
|
||||
|
||||
- 当前只处理 A01 分层 PSD 和 PNG 资产,不修改 `pages/auth/a01-entry.vue`,不进行接口对接。
|
||||
- 不使用 Figma,不把整张效果图作为页面资产,不从扁平图硬裁被遮挡的脏素材。
|
||||
- PSD 工作画布为 `1236 × 2745`,对应 `412 × 915` 的三倍密度基准。
|
||||
- `brand-seal` 唯一来源为 `static/assets/foundation/transparent/brand-seal.png`。
|
||||
- 宗祠背景不得生成空牌匾、替代牌匾或新 Logo 底座;现有 `brand-seal.png` 直接作为独立图层叠放在宗祠中央。
|
||||
- 密码锁唯一复用来源为 `static/assets/modules/auth/transparent/a01-icon-lock-v1.png`。
|
||||
- 闭眼图标必须保留中心瞳孔;短信验证码图标必须是消息气泡加且仅加三个点。
|
||||
- 密码和验证码为独立图层组,共用背景、卷轴、品牌和按钮资产。
|
||||
- 所有生成资产先写入 `docs/design/assets/a01-vnext/candidates/`,不得覆盖现有候选或正式文件。
|
||||
- Photoshop 自动化不得保存、关闭或覆盖用户原先打开的文档,只处理脚本自己创建或打开的临时文档。
|
||||
- 没有 PSD 图层复核、PNG Alpha 检查、412 × 915 代表图和用户确认,不得宣称资产完成。
|
||||
|
||||
## 文件边界
|
||||
|
||||
**新建:**
|
||||
|
||||
- `docs/design/assets/a01-vnext/source/a01-psd-manifest.json`:图层、组、位置、状态和导出规格的唯一机器可读所有者。
|
||||
- `docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`:最终分层源文件。
|
||||
- `scripts/photoshop/a01-build-layered-psd.jsx`:按清单建立 PSD、组和图层。
|
||||
- `scripts/photoshop/a01-export-layered-assets.jsx`:从 PSD 导出 PNG 与四状态代表图。
|
||||
- `scripts/build-a01-layered-psd.ps1`:验证环境和路径后调用构建 JSX。
|
||||
- `scripts/export-a01-layered-assets.ps1`:调用导出 JSX 并校验输出。
|
||||
- `tests/a01-layered-psd-contract.ps1`:审计清单、脚本、PSD 和 PNG 契约。
|
||||
- `docs/design/assets/a01-vnext/review/`:透明检查图、联系表和代表图候选。
|
||||
|
||||
**仅在资产通过用户确认后修改:**
|
||||
|
||||
- `docs/design/A01_启动登录引导_设计记录.md`
|
||||
- `docs/design/P00_页面结构与资产清单.md`
|
||||
- `docs/交接记录.md`
|
||||
|
||||
**本计划禁止修改:**
|
||||
|
||||
- `pages/auth/a01-entry.vue`
|
||||
- `pages.json`
|
||||
- A01 之外的页面、测试和资产
|
||||
|
||||
---
|
||||
|
||||
### 任务 1:建立 PSD 资产契约测试
|
||||
|
||||
**文件:**
|
||||
|
||||
- 新建:`tests/a01-layered-psd-contract.ps1`
|
||||
- 读取:`docs/superpowers/specs/2026-07-15-a01-layered-psd-assets-design.md`
|
||||
|
||||
**接口:** 缺少文件或契约时抛出明确错误;全部满足时输出 `A01-LAYERED-PSD-CONTRACT PASS`。
|
||||
|
||||
- [ ] **步骤 1:编写失败测试**
|
||||
|
||||
测试至少包含以下可执行断言:
|
||||
|
||||
```powershell
|
||||
$ErrorActionPreference = 'Stop'
|
||||
$root = Split-Path -Parent $PSScriptRoot
|
||||
$requiredFiles = @(
|
||||
'docs/design/assets/a01-vnext/source/a01-psd-manifest.json',
|
||||
'scripts/build-a01-layered-psd.ps1',
|
||||
'scripts/export-a01-layered-assets.ps1',
|
||||
'scripts/photoshop/a01-build-layered-psd.jsx',
|
||||
'scripts/photoshop/a01-export-layered-assets.jsx'
|
||||
)
|
||||
foreach ($relative in $requiredFiles) {
|
||||
if (-not (Test-Path -LiteralPath (Join-Path $root $relative))) {
|
||||
throw "Missing layered PSD contract file: $relative"
|
||||
}
|
||||
}
|
||||
$manifestPath = Join-Path $root $requiredFiles[0]
|
||||
$manifest = Get-Content -Raw -Encoding UTF8 -LiteralPath $manifestPath | ConvertFrom-Json
|
||||
if ($manifest.canvas.width -ne 1236 -or $manifest.canvas.height -ne 2745) {
|
||||
throw 'PSD canvas must be 1236x2745.'
|
||||
}
|
||||
foreach ($group in @('00-参考','10-背景','20-卷轴','30-品牌与标题装饰','40-公共控件皮肤','50-密码登录','60-验证码登录','70-内容与标注')) {
|
||||
if ($manifest.groups.name -notcontains $group) { throw "Missing PSD group: $group" }
|
||||
}
|
||||
foreach ($state in @('password-hidden','password-visible','sms-default','sms-countdown')) {
|
||||
if ($manifest.states.name -notcontains $state) { throw "Missing PSD state: $state" }
|
||||
}
|
||||
Write-Output 'A01-LAYERED-PSD-CONTRACT PASS'
|
||||
```
|
||||
|
||||
- [ ] **步骤 2:运行测试并确认按预期失败**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-layered-psd-contract.ps1
|
||||
```
|
||||
|
||||
预期:失败并显示 `Missing layered PSD contract file`。
|
||||
|
||||
- [ ] **步骤 3:观察并保留工作区状态**
|
||||
|
||||
```powershell
|
||||
git status --short
|
||||
```
|
||||
|
||||
预期:只记录输出,不清理、暂存或提交任何文件。
|
||||
|
||||
---
|
||||
|
||||
### 任务 2:建立清单和 Photoshop 自动化空壳
|
||||
|
||||
**文件:**
|
||||
|
||||
- 新建:`docs/design/assets/a01-vnext/source/a01-psd-manifest.json`
|
||||
- 新建:`scripts/build-a01-layered-psd.ps1`
|
||||
- 新建:`scripts/export-a01-layered-assets.ps1`
|
||||
- 新建:`scripts/photoshop/a01-build-layered-psd.jsx`
|
||||
- 新建:`scripts/photoshop/a01-export-layered-assets.jsx`
|
||||
- 测试:`tests/a01-layered-psd-contract.ps1`
|
||||
|
||||
**接口:**
|
||||
|
||||
- 清单提供 `canvas`、`groups`、`layers`、`states`、`exports`。
|
||||
- `build-a01-layered-psd.ps1 -ManifestPath <path> -OutputPath <path>` 使用 `Photoshop.Application.150`。
|
||||
- `export-a01-layered-assets.ps1 -ManifestPath <path> -PsdPath <path>` 使用同一 COM 接口。
|
||||
- JSX 从 `JIAPU_A01_ROOT`、`JIAPU_A01_MANIFEST`、`JIAPU_A01_PSD` 读取路径,不硬编码用户名。
|
||||
|
||||
- [ ] **步骤 1:创建最小清单**
|
||||
|
||||
```json
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"canvas": { "width": 1236, "height": 2745, "logicalWidth": 412, "logicalHeight": 915, "scale": 3 },
|
||||
"groups": [
|
||||
{ "name": "00-参考", "visible": false },
|
||||
{ "name": "10-背景", "visible": true },
|
||||
{ "name": "20-卷轴", "visible": true },
|
||||
{ "name": "30-品牌与标题装饰", "visible": true },
|
||||
{ "name": "40-公共控件皮肤", "visible": true },
|
||||
{ "name": "50-密码登录", "visible": true },
|
||||
{ "name": "60-验证码登录", "visible": false },
|
||||
{ "name": "70-内容与标注", "visible": true }
|
||||
],
|
||||
"layers": [],
|
||||
"states": [
|
||||
{ "name": "password-hidden", "show": ["50-密码登录"], "hide": ["60-验证码登录"] },
|
||||
{ "name": "password-visible", "show": ["50-密码登录"], "hide": ["60-验证码登录"] },
|
||||
{ "name": "sms-default", "show": ["60-验证码登录"], "hide": ["50-密码登录"] },
|
||||
{ "name": "sms-countdown", "show": ["60-验证码登录"], "hide": ["50-密码登录"] }
|
||||
],
|
||||
"exports": []
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 2:创建 PowerShell COM 包装**
|
||||
|
||||
核心调用固定为:
|
||||
|
||||
```powershell
|
||||
$app = New-Object -ComObject 'Photoshop.Application.150'
|
||||
$env:JIAPU_A01_ROOT = $root
|
||||
$env:JIAPU_A01_MANIFEST = $resolvedManifest
|
||||
$env:JIAPU_A01_PSD = $resolvedOutput
|
||||
$jsx = (Resolve-Path -LiteralPath (Join-Path $root 'scripts/photoshop/a01-build-layered-psd.jsx')).Path
|
||||
$escaped = $jsx.Replace('\', '\\')
|
||||
$app.DoJavaScript("$.evalFile(new File('$escaped'));", @(), 1)
|
||||
```
|
||||
|
||||
调用前验证 Photoshop 正在运行、输入输出位于项目根目录,并拒绝覆盖不符合 `A01-layered-source-v*.psd` 的文件。
|
||||
|
||||
- [ ] **步骤 3:创建 JSX 空壳构建器**
|
||||
|
||||
```javascript
|
||||
#target photoshop
|
||||
app.displayDialogs = DialogModes.NO;
|
||||
var created = null;
|
||||
try {
|
||||
var manifestFile = File($.getenv('JIAPU_A01_MANIFEST'));
|
||||
var psdFile = File($.getenv('JIAPU_A01_PSD'));
|
||||
manifestFile.encoding = 'UTF8';
|
||||
manifestFile.open('r');
|
||||
var manifest = eval('(' + manifestFile.read() + ')');
|
||||
manifestFile.close();
|
||||
created = app.documents.add(manifest.canvas.width, manifest.canvas.height, 72, 'JIAPU_A01_SCRIPT_SOURCE', NewDocumentMode.RGB, DocumentFill.TRANSPARENT);
|
||||
for (var i = 0; i < manifest.groups.length; i++) {
|
||||
var group = created.layerSets.add();
|
||||
group.name = manifest.groups[i].name;
|
||||
group.visible = manifest.groups[i].visible;
|
||||
}
|
||||
var options = new PhotoshopSaveOptions();
|
||||
options.layers = true;
|
||||
created.saveAs(psdFile, options, true, Extension.LOWERCASE);
|
||||
created.close(SaveOptions.DONOTSAVECHANGES);
|
||||
created = null;
|
||||
} catch (error) {
|
||||
if (created) { created.close(SaveOptions.DONOTSAVECHANGES); }
|
||||
throw error;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **步骤 4:运行契约测试**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-layered-psd-contract.ps1
|
||||
```
|
||||
|
||||
预期:`A01-LAYERED-PSD-CONTRACT PASS`。
|
||||
|
||||
- [ ] **步骤 5:运行空壳 PSD 冒烟检查**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/build-a01-layered-psd.ps1
|
||||
```
|
||||
|
||||
预期:生成 `docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`,Photoshop 中包含八个命名组;脚本执行前已打开的用户文档未被保存或关闭。
|
||||
|
||||
---
|
||||
|
||||
### 任务 3:制作三类母图并由 Photoshop 拆出干净图层
|
||||
|
||||
**文件:**
|
||||
|
||||
- 新建候选:`docs/design/assets/a01-vnext/candidates/` 下的版本化 PNG
|
||||
- 修改:`docs/design/assets/a01-vnext/source/a01-psd-manifest.json`
|
||||
- 新建检查图:`docs/design/assets/a01-vnext/review/`
|
||||
|
||||
**接口:** ImageGen 只生成完整无字卷轴、无字按钮与装饰板、四枚功能图标板三类母图;Photoshop 将母图拆成每个只承载一个清单图层的 PNG。每个 `layers` 项包含 `name`、`group`、`source`、`x`、`y`、`width`、`height`、`visible`、`exportName`、`alpha`。
|
||||
|
||||
- [ ] **步骤 1:制作宗祠背景候选**
|
||||
|
||||
使用用户已认可的宗祠母图,不再重新生成。保留 ImageGen 原始母图,再由 Photoshop 裁剪为 `1236 × 510` 候选;现有 `brand-seal.png` 后续作为独立图层叠放。
|
||||
|
||||
验收:中央为 `brand-seal` 留出干净视觉空间,但建筑本身不出现空牌匾、替代牌匾或新 Logo 底座;四边没有被截断的文字或控件。
|
||||
|
||||
- [ ] **步骤 2:生成一张完整无字卷轴母图并拆分**
|
||||
|
||||
一次生成完整无字卷轴母图,使用可清除的纯色背景。Photoshop 从同一母图拆出顶部卷轴、无字宣纸平铺纹理、左边框、右边框和底部卷轴,不从完整登录页面截图裁切。
|
||||
|
||||
验收:在纯黑、纯白和项目暖宣纸底色上检查透明边缘;拼接处没有亮线、断纹或重复阴影。
|
||||
|
||||
- [ ] **步骤 3:生成一张无字按钮与装饰母图并拆分**
|
||||
|
||||
主按钮先形成无字完整皮肤,再由 Photoshop 分出左端、可横向延展中段和右端;标题云纹、分隔纹样和四角回纹分别独立。
|
||||
|
||||
验收:按钮三段重新拼接后与完整皮肤一致;所有纹样不包含文字、Logo 或不可复用背景。
|
||||
|
||||
- [ ] **步骤 4:生成一张四图标母板并拆分**
|
||||
|
||||
在同一高分辨率纯色背景母板中生成彼此完全分离的手机、睁眼、保留瞳孔的闭眼、短信气泡三点图标,再由 Photoshop 分别导出;密码锁继续引用 `a01-icon-lock-v1.png`,Logo 继续引用 `brand-seal.png`。微信标志不由 ImageGen 重绘,继续使用具有来源记录的项目资产,只重新制作其容器皮肤。
|
||||
|
||||
验收:目标显示尺寸下仍清楚;短信气泡只有三个点;闭眼中心瞳孔可见。
|
||||
|
||||
- [ ] **步骤 5:每类输出一张检查联系表并等待确认**
|
||||
|
||||
联系表包含原尺寸、白底、黑底和页面底色预览。未收到用户确认前,不把该类候选写入正式导出清单,也不修改 A01 页面。
|
||||
|
||||
---
|
||||
|
||||
### 任务 4:组装真实 PSD
|
||||
|
||||
**文件:**
|
||||
|
||||
- 修改:`docs/design/assets/a01-vnext/source/a01-psd-manifest.json`
|
||||
- 修改:`scripts/photoshop/a01-build-layered-psd.jsx`
|
||||
- 生成:`docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`
|
||||
- 测试:`tests/a01-layered-psd-contract.ps1`
|
||||
|
||||
**接口:** JSX 读取 `layers`,打开 PNG,复制到目标组并设置名称、位置和可见性。目标层名与 `exportName` 一一对应;每次从清单重建,不在旧 PSD 上堆叠。
|
||||
|
||||
- [ ] **步骤 1:扩展失败测试**
|
||||
|
||||
验证每个源文件存在,坐标和尺寸为整数,源路径位于工作区,`exportName` 唯一,且可导出层属于 `10` 至 `60` 的合法组。
|
||||
|
||||
- [ ] **步骤 2:先运行测试确认不完整清单失败**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-layered-psd-contract.ps1
|
||||
```
|
||||
|
||||
预期:报告第一项缺失或重复的图层契约。
|
||||
|
||||
- [ ] **步骤 3:实现 PNG 导入与精确定位**
|
||||
|
||||
JSX 只复制脚本打开的源 PNG 合并像素层,复制后立即关闭源文档且不保存;位置按 `x × 3`、`y × 3` 和清单目标尺寸设置,不手工拖动猜测。
|
||||
|
||||
- [ ] **步骤 4:重建并复核 PSD**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/build-a01-layered-psd.ps1
|
||||
```
|
||||
|
||||
预期:八个组顺序正确,密码和验证码可单独显示,公共图层只有一份,参考图默认隐藏。
|
||||
|
||||
- [ ] **步骤 5:确认用户原文档未受影响**
|
||||
|
||||
检查 Photoshop:脚本运行前用户已打开文档的数量、名称和未保存状态保持不变;脚本临时文档已关闭。
|
||||
|
||||
---
|
||||
|
||||
### 任务 5:从 PSD 导出 PNG 与四状态代表图
|
||||
|
||||
**文件:**
|
||||
|
||||
- 修改:`scripts/photoshop/a01-export-layered-assets.jsx`
|
||||
- 生成候选:`docs/design/assets/a01-vnext/exports/v1/`
|
||||
- 生成联系表:`docs/design/assets/a01-vnext/review/A01-layered-states-v1-contact-sheet.png`
|
||||
- 测试:`tests/a01-layered-psd-contract.ps1`
|
||||
|
||||
**接口:** `exports` 定义来源层、裁切矩形、尺寸、Alpha 和文件名;四状态固定为 `password-hidden`、`password-visible`、`sms-default`、`sms-countdown`。
|
||||
|
||||
- [ ] **步骤 1:添加导出失败测试**
|
||||
|
||||
验证每个 `exports.path` 存在、PNG 文件头正确、像素尺寸与清单一致;透明资产四角 Alpha 为 0,不透明资产四角 Alpha 为 255。未执行导出时测试必须失败。
|
||||
|
||||
- [ ] **步骤 2:实现独立图层导出**
|
||||
|
||||
JSX 打开 PSD 后记录原可见性,只显示目标层或组,按清单矩形复制到新的透明临时文档并保存 PNG;完成后关闭脚本打开的 PSD 副本且不写回可见性变化。
|
||||
|
||||
- [ ] **步骤 3:实现四状态代表图和联系表**
|
||||
|
||||
按清单切换密码/验证码组以及眼睛、倒计时等状态专用层,分别导出 412 × 915 预览,再组合为一张两行两列联系表。代表图只进入 `review`,页面不得引用。
|
||||
|
||||
- [ ] **步骤 4:运行导出验证**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File scripts/export-a01-layered-assets.ps1
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-layered-psd-contract.ps1
|
||||
git diff --check
|
||||
```
|
||||
|
||||
预期:导出成功,合同输出 `A01-LAYERED-PSD-CONTRACT PASS`,无新增空白错误。
|
||||
|
||||
- [ ] **步骤 5:只展示一张联系表并等待用户确认**
|
||||
|
||||
确认宗祠、卷轴、按钮、图标、密码/验证码状态和公共区域。用户未明确通过前,导出仍是候选,不复制到 `static/assets`,不修改页面。
|
||||
|
||||
---
|
||||
|
||||
### 任务 6:冻结资产证据并停在页面实施门禁前
|
||||
|
||||
**文件:**
|
||||
|
||||
- 修改:`docs/design/A01_启动登录引导_设计记录.md`
|
||||
- 修改:`docs/design/P00_页面结构与资产清单.md`
|
||||
- 修改:`docs/交接记录.md`
|
||||
- 保留:`docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`
|
||||
- 保留:`docs/design/assets/a01-vnext/exports/v1/`
|
||||
|
||||
**接口:** A01 设计记录拥有用户视觉决定;P00 拥有正式资产路径、尺寸、Alpha 和引用状态;交接记录只保存真实停点。
|
||||
|
||||
- [ ] **步骤 1:记录文件证据**
|
||||
|
||||
```powershell
|
||||
Get-FileHash -Algorithm SHA256 docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd
|
||||
Get-ChildItem docs/design/assets/a01-vnext/exports/v1 -File | Get-FileHash -Algorithm SHA256
|
||||
```
|
||||
|
||||
把 PSD 和已确认 PNG 的哈希、尺寸、Alpha、用途写入 A01 设计记录和 P00。
|
||||
|
||||
- [ ] **步骤 2:更新真实状态**
|
||||
|
||||
只能写“PSD 与 PNG 资产已获用户确认,A01 页面实现尚未开始”或事实对应的更早状态;不得写 A01 已验收、已冻结或页面已完成。
|
||||
|
||||
- [ ] **步骤 3:运行最终验证**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-layered-psd-contract.ps1
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||||
git diff --check
|
||||
git status --short
|
||||
git status --short --ignored
|
||||
```
|
||||
|
||||
预期:PSD 合同通过;既有 A01/A02 合同保持当前事实,若因页面尚未切换而失败则如实记录、不改页面;所有既有修改和未跟踪文件继续保留。
|
||||
|
||||
- [ ] **步骤 4:停止**
|
||||
|
||||
只有用户再次确认进入页面落地,才新建独立的 A01 image-to-code/TDD 实施计划;不得在本计划中顺手修改页面。
|
||||
@@ -0,0 +1,177 @@
|
||||
# A01 红色宗祠水墨登录页实施计划
|
||||
|
||||
> **For agentic workers:** 本项目明确禁止子代理与 worktree;本计划仅允许当前会话内联执行,并且禁止 `git add`、`commit`、`push`、`reset`、`checkout`。
|
||||
|
||||
**Goal:** 将用户确认的“顶部红色宗祠+下半区淡水墨宣纸”密码/验证码两种状态一比一落到 `pages/auth/a01-entry.vue`,保留现有登录交互并提供真实运行截图证据。
|
||||
|
||||
**Architecture:** A01 使用一张不含表单文字的 412:915 同比例背景底板承载宗祠、品牌印章、宣纸、水墨远山、枝叶和祥云;所有标签、输入、按钮文字与交互仍由 uni-app 组件渲染。密码态与验证码态只切换第二输入行及标签状态,共用同一背景和布局,旧卷轴方向资产保留但不引用。
|
||||
|
||||
**Tech Stack:** uni-app、Vue 3 `<script setup>`、SCSS、PowerShell 契约测试、H5/Android 运行截图。
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- 只修改 A01、A01 专属测试、A01 专属设计证据和 A01 新资产,不修改其他页面。
|
||||
- 基础版本只实现浅色主题;深色和跟随系统延后到下一版本。
|
||||
- A02 已删除并合入 A01;`pages.json` 保持 53 条最终路由。
|
||||
- 保留 `brand-seal.png` 的现有图形,不重新设计项目 Logo。
|
||||
- 密码态必须保留左侧锁图标、右侧眼睛按钮;闭眼图标必须保留中心瞳孔;“忘记密码”位于密码横线下方右侧。
|
||||
- 验证码态必须使用 `a01-icon-sms-code-v2.png` 的“消息气泡+三点”图标,不得出现锁、眼睛、勾选或临时第三方 SVG。
|
||||
- 不使用原生 `uni.showToast`、`uni.showModal`、`uni.showLoading`、`uni.showActionSheet` 作为最终视觉。
|
||||
- 320×568、360×640、360×800、412×915 均保持设计比例;短屏允许页面纵向滚动,不通过高度媒体查询压缩布局。
|
||||
- H5 截图仅为候选证据,最终仍需 Android/HBuilderX 真机或模拟器复核。
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 锁定选定视觉证据与新资产契约
|
||||
|
||||
**Files:**
|
||||
- Create: `docs/design/screens/handoff/2026-07-16/A01-selected-password-red-hall-ink-412x915.png`
|
||||
- Create: `docs/design/screens/handoff/2026-07-16/A01-selected-sms-red-hall-ink-412x915.png`
|
||||
- Modify: `tests/a01-a02-ui-contract.ps1`
|
||||
- Create later: `static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 用户在当前对话确认的密码态与验证码态 ImageGen 结果。
|
||||
- Produces: 唯一选定视觉证据路径,以及页面必须引用新底板、不得引用旧卷轴框的自动契约。
|
||||
|
||||
- [ ] **Step 1: 保存两张选定状态图到交接证据目录**
|
||||
|
||||
原始结果分别为:
|
||||
|
||||
```text
|
||||
C:\Users\Rain\.codex\generated_images\019f653e-e7be-7900-a280-4ded33822764\exec-be61b836-b23d-46f3-99dd-b85cfac91055.png
|
||||
C:\Users\Rain\.codex\generated_images\019f653e-e7be-7900-a280-4ded33822764\exec-6e7d86cb-5b39-467d-abe1-a0afdc1bf0a4.png
|
||||
```
|
||||
|
||||
- [ ] **Step 2: 先修改契约测试**
|
||||
|
||||
`tests/a01-a02-ui-contract.ps1` 要求页面包含:
|
||||
|
||||
```powershell
|
||||
'a01-red-hall-ink-backdrop-v1.png'
|
||||
'brand-seal.png'
|
||||
'a01-icon-lock-v1.png'
|
||||
'a01-icon-eye-closed-pupil-v2.png'
|
||||
'a01-icon-sms-code-v2.png'
|
||||
```
|
||||
|
||||
并明确禁止页面继续引用:
|
||||
|
||||
```powershell
|
||||
'a01-login-scroll-frame-v1.png'
|
||||
'a01-login-header-exact-v2.png'
|
||||
'a01-vnext-scroll-v1.png'
|
||||
```
|
||||
|
||||
- [ ] **Step 3: 运行测试并确认正确失败**
|
||||
|
||||
Run:
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||||
```
|
||||
|
||||
Expected: FAIL,原因是 A01 尚未引用 `a01-red-hall-ink-backdrop-v1.png`。
|
||||
|
||||
### Task 2: 生成无 UI 的共用视觉底板
|
||||
|
||||
**Files:**
|
||||
- Create: `static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png`
|
||||
- Preserve: `static/assets/foundation/transparent/brand-seal.png`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Task 1 的两张选定视觉证据、现有 `brand-seal.png`、现有宗祠候选图。
|
||||
- Produces: 824×1830、2× 像素密度、无表单文字和控件的页面底板。
|
||||
|
||||
- [ ] **Step 1: 用 ImageGen 生成干净底板**
|
||||
|
||||
底板只允许包含顶部红色宗祠、现有品牌印章、象牙白宣纸、边缘淡水墨远山/枝叶/祥云;不得包含标题、标签、输入框、按钮、协议文字或手机状态栏。
|
||||
|
||||
- [ ] **Step 2: 检查并裁切为 824×1830 PNG**
|
||||
|
||||
视觉检查必须确认品牌印章没有被改字,中心表单区域保持低对比留白,顶部宗祠高度与选定状态图一致。
|
||||
|
||||
- [ ] **Step 3: 运行资产尺寸检查**
|
||||
|
||||
Run:
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -Command "$b=[IO.File]::ReadAllBytes('static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png'); if($b.Length -lt 100000){throw 'backdrop too small'}"
|
||||
```
|
||||
|
||||
Expected: exit code 0。
|
||||
|
||||
### Task 3: 一比一实现密码/验证码状态
|
||||
|
||||
**Files:**
|
||||
- Modify: `pages/auth/a01-entry.vue`
|
||||
- Test: `tests/a01-a02-ui-contract.ps1`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `a01-red-hall-ink-backdrop-v1.png` 与现有 A01 图标、按钮、微信和协议资产。
|
||||
- Produces: 同一路由内可交互切换的密码态与验证码态。
|
||||
|
||||
- [ ] **Step 1: 用单一底板替换旧宗祠叠层和卷轴框**
|
||||
|
||||
页面保留真实 UI 组件,移除旧 `login-scroll__skin`、`exact-header-overlay` 以及相关引用;逻辑画布保持 750rpx × 1665rpx,并加底部安全区。
|
||||
|
||||
- [ ] **Step 2: 对齐密码态**
|
||||
|
||||
密码态第二行使用 `a01-icon-lock-v1.png` 和闭眼/睁眼切换图标;“忘记密码”在输入横线下方右侧;所有触控区至少 80rpx 高。
|
||||
|
||||
- [ ] **Step 3: 对齐验证码态**
|
||||
|
||||
验证码态第二行使用 `a01-icon-sms-code-v2.png`,占位文字为“短信验证码”,右侧为“获取验证码”;不得渲染密码态的锁、眼睛和“忘记密码”。
|
||||
|
||||
- [ ] **Step 4: 保留现有交互契约**
|
||||
|
||||
保留登录方式持久化、密码显隐、协议勾选、注册/忘记密码跳转、自定义反馈 Toast 和自定义行为验证层;不接接口。
|
||||
|
||||
- [ ] **Step 5: 运行契约测试并确认通过**
|
||||
|
||||
Run:
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||||
```
|
||||
|
||||
Expected: `A01-LOGIN-MERGE-CONTRACT PASS`。
|
||||
|
||||
### Task 4: 真实运行截图与设计 QA
|
||||
|
||||
**Files:**
|
||||
- Create: `docs/design/screens/runtime/2026-07-16/A01-password-412x915.png`
|
||||
- Create: `docs/design/screens/runtime/2026-07-16/A01-sms-412x915.png`
|
||||
- Modify: `design-qa.md`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 运行中的 A01 H5、两张选定设计图、密码/验证码交互状态。
|
||||
- Produces: 同尺寸参考/实现对比和 QA 结论;Android 复核完成前不得写“用户已验收”。
|
||||
|
||||
- [ ] **Step 1: 启动或连接现有 H5 运行环境**
|
||||
|
||||
若项目缺少可用启动命令,只报告需要 HBuilderX 启动,不能用源码检查代替截图。
|
||||
|
||||
- [ ] **Step 2: 在 412×915 捕获两种状态**
|
||||
|
||||
密码态验证锁、闭眼瞳孔和横线下方“忘记密码”;验证码态验证消息气泡+三点和“获取验证码”。
|
||||
|
||||
- [ ] **Step 3: 检查四种尺寸与关键 Android 场景**
|
||||
|
||||
检查 320×568、360×640、360×800、412×915 的横向溢出、字体放大、状态栏、安全区、软键盘、返回手势;短屏允许纵向滚动。
|
||||
|
||||
- [ ] **Step 4: 更新 `design-qa.md`**
|
||||
|
||||
仅当参考图与真实运行图在同一视口完成比较且 P0/P1/P2 全部解决时写 `final result: passed`;Android/HBuilderX 未复核时明确记录剩余验证,不将 A01 标记为已验收或冻结。
|
||||
|
||||
- [ ] **Step 5: 最终验证**
|
||||
|
||||
Run:
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
|
||||
git diff --check
|
||||
git status --short
|
||||
```
|
||||
|
||||
Expected: 契约 PASS、`git diff --check` 无输出;状态列表仅用于证明已有改动均被保留。
|
||||
@@ -0,0 +1,87 @@
|
||||
# A04 认证系列注册页实施计划
|
||||
|
||||
> **For agentic workers:** 本项目禁止子代理、worktree 和任何 Git 暂存/提交/推送操作;仅允许当前会话内联执行。
|
||||
|
||||
**Goal:** 将 A04 注册页统一到 A01 红色宗祠水墨认证视觉,并用项目自定义反馈完成协议校验与提交前行为验证外观。
|
||||
|
||||
**Architecture:** A04 复用 A01 的 `a01-red-hall-ink-backdrop-v1.png` 和 `brand-seal.png`,表单继续使用真实 uni-app 控件。字段错误和协议错误在页面就近显示;完整本地校验通过后打开 A04 自有的自定义行为验证层,不对接注册接口。
|
||||
|
||||
**Tech Stack:** uni-app、Vue 3 `<script setup>`、SCSS、PowerShell 契约测试、Chrome CDP 运行截图。
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- 只修改 A04、A04 测试、A04 证据和必要的认证截图工具,不修改相邻页面。
|
||||
- 基础版本只实现浅色主题;320×568 允许自然纵向滚动。
|
||||
- 禁止 `uni.showToast`、`uni.showModal`、`uni.showLoading`、`uni.showActionSheet`。
|
||||
- 不对接接口;注册成功登录态与进入 G01 只记录为后续功能合同。
|
||||
- 保留 A01 视觉冻结候选,不修改 A01 页面。
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 收紧 A04 页面合同
|
||||
|
||||
**Files:**
|
||||
- Modify: `tests/a04-registration-contract.ps1`
|
||||
- Modify later: `pages/auth/a04-register.vue`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: A01 认证视觉资产与验收规划 A04 合同。
|
||||
- Produces: 新底板、页内错误、自定义反馈和自定义验证层的静态契约。
|
||||
|
||||
- [ ] **Step 1: 新增失败断言**
|
||||
|
||||
要求页面引用 `a01-red-hall-ink-backdrop-v1.png`、`brand-seal.png`,包含 `fieldErrors`、`agreementError`、`feedback-toast`、`verification-layer`,并禁止四个原生 UniApp 提示 API。
|
||||
|
||||
- [ ] **Step 2: 运行红灯**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a04-registration-contract.ps1
|
||||
```
|
||||
|
||||
Expected: FAIL,首个原因为缺少新宗祠水墨底板。
|
||||
|
||||
### Task 2: 实现 A04 注册候选
|
||||
|
||||
**Files:**
|
||||
- Modify: `pages/auth/a04-register.vue`
|
||||
- Test: `tests/a04-registration-contract.ps1`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: Task 1 契约。
|
||||
- Produces: 手机号、密码、确认密码、协议、返回登录和提交前验证的可交互页面。
|
||||
|
||||
- [ ] **Step 1: 替换旧宗祠与大面板结构**
|
||||
|
||||
使用与 A01 一致的页面底板、独立 Logo、宋体标题和宣纸表单,不保留 `auth-design-scenery-v1.png` 或旧大面板外框。
|
||||
|
||||
- [ ] **Step 2: 实现页内校验**
|
||||
|
||||
`validateForm()` 返回布尔值并写入 `fieldErrors.phone|password|confirmPassword`;协议未勾选只设置 `agreementError`,勾选后立即清除。
|
||||
|
||||
- [ ] **Step 3: 实现自定义反馈与行为验证层**
|
||||
|
||||
协议链接使用 `showFeedback('协议页面准备中')`;完整本地校验后设置 `verificationVisible=true`;验证确认后显示“注册服务待接入”。
|
||||
|
||||
- [ ] **Step 4: 运行绿灯**
|
||||
|
||||
```powershell
|
||||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a04-registration-contract.ps1
|
||||
```
|
||||
|
||||
Expected: `A04-REGISTRATION-CONTRACT PASS`。
|
||||
|
||||
### Task 3: 真实运行检查与证据
|
||||
|
||||
**Files:**
|
||||
- Create: `tests/a04-registration-runtime-smoke.js`
|
||||
- Create: `docs/design/screens/runtime/2026-07-16/A04-*.png`
|
||||
- Update later: `docs/design/screens/handoff/2026-07-16/A04-*.png`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: 运行中的 A04。
|
||||
- Produces: 360×800 代表图、320×568 滚动检查、校验与验证层运行证据。
|
||||
|
||||
- [ ] **Step 1: 验证 A01 注册入口可达 A04**
|
||||
- [ ] **Step 2: 捕获 360×800 正常态并目视检查**
|
||||
- [ ] **Step 3: smoke 检查字段错误、协议错误、验证层和返回登录**
|
||||
- [ ] **Step 4: 运行 `git diff --check`,保持 A04 为 `[~]` 待用户审核**
|
||||
@@ -0,0 +1,37 @@
|
||||
# A05 红色宗祠水墨重设密码实施计划
|
||||
|
||||
> 本项目禁止子代理、worktree 和任何 Git 暂存/提交/推送操作;仅允许当前会话内联执行。
|
||||
|
||||
**Goal:** 将 A05 重设密码页统一到 A01/A04 认证视觉,完整表现发送验证码前行为验证、页内校验、自定义结果和返回登录状态。
|
||||
|
||||
**Architecture:** 复用 `a01-red-hall-ink-backdrop-v1.png`、独立 `brand-seal.png` 与认证按钮资产;真实输入保持 uni-app 控件。请求验证码前先验证手机号再打开自定义行为验证层;重设提交只做本地校验并显示自定义成功结果,不接接口、不重复行为验证。
|
||||
|
||||
**Tech Stack:** uni-app、Vue 3 `<script setup>`、SCSS、PowerShell 契约测试、Chrome CDP 运行烟测与截图。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 只修改 A05、A05 测试、A05 证据与必要文档,不重构相邻页面。
|
||||
- 基础版本只实现浅色主题;320×568 允许自然纵向滚动。
|
||||
- 禁止原生 UniApp Toast、Modal、Loading、ActionSheet。
|
||||
- 用户关闭行为验证时保留所有表单内容;提交重设时不再次验证。
|
||||
- 页面始终保持 `[~]`,内部 H5 QA 不代表用户验收或 Android 通过。
|
||||
|
||||
## Task 1: 收紧页面合同
|
||||
|
||||
- [ ] 要求新底板、独立品牌印、自定义验证层、自定义反馈、自定义成功结果和字段错误。
|
||||
- [ ] 禁止旧 scenery/大面板与四种原生反馈 API。
|
||||
- [ ] 先运行合同得到红灯。
|
||||
|
||||
## Task 2: 实现候选页面
|
||||
|
||||
- [ ] 四字段就近错误与正常比例滚动布局。
|
||||
- [ ] 获取验证码:校验手机号 → 自定义行为验证 → 自定义“验证码已发送”反馈。
|
||||
- [ ] 确认重设:本地校验 → 自定义成功结果;不重复验证。
|
||||
- [ ] 返回登录使用替换式导航,避免认证页堆栈累积。
|
||||
|
||||
## Task 3: 运行与证据
|
||||
|
||||
- [ ] 320×568、360×800、412×915 无横向溢出,短屏自然滚动。
|
||||
- [ ] 烟测字段错误、验证层关闭保值、验证成功、密码不一致、成功结果和返回登录。
|
||||
- [ ] 保存一张 412×915 代表图,更新视觉证据索引和 Design QA。
|
||||
- [ ] 运行静态合同、运行烟测和 `git diff --check`。
|
||||
@@ -0,0 +1,19 @@
|
||||
# A06 阻断登录状态实施计划
|
||||
|
||||
**Goal:** 将 A06 从普通登录错误汇总页收敛为仅处理冻结、停用、风险限制的阻断状态页,并统一到红色宗祠水墨认证视觉。
|
||||
|
||||
**Contract owner:** `pages/auth/a06-auth-status.vue` 的 `statusConfig` 是 A06 状态、原因、影响范围和恢复入口的唯一所有者;旧 normal/failed/register/wechat 状态必须同时从页面与测试移除。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 只修改 A06、A06 测试、证据和必要文档;不修改 A01/A04/A05。
|
||||
- 基础版仅浅色;320×568 正常比例自然滚动。
|
||||
- 不使用任何原生 UniApp 提示;帮助入口使用项目自定义恢复说明层。
|
||||
- 页面保持 `[~]` 待用户审核,Android 复核不冒充完成。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:只允许 `frozen|disabled|risk`,要求原因、影响范围、恢复入口和自定义恢复层,禁止旧状态及原生 UI。
|
||||
- [ ] 实现三状态同页切换和未知状态安全回落到 `risk`。
|
||||
- [ ] 验证恢复层、返回 A01、三档响应式和旧状态回落。
|
||||
- [ ] 保存代表图,更新证据索引与 Design QA。
|
||||
@@ -0,0 +1,20 @@
|
||||
# G01 我的家谱重新审核实施计划
|
||||
|
||||
**Goal:** 保留当前成熟的宣纸、朱砂、题签视觉,同时补齐最新验收规划中的空态三入口、三分组状态、当前谱切换、加载/失败和添加家谱弹层。
|
||||
|
||||
**Architecture:** `g01-my-genealogies.vue` 是本轮页面状态唯一所有者;用本地展示数据覆盖视觉状态,不接接口。可用家谱继续驱动全局上下文候选;申请/失效记录只在 G01 展示,不伪装成可用家谱。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 不改相邻业务页,不接接口,不使用原生 UniApp UI。
|
||||
- 保留现有真实题签、按钮、背景和 Tabbar 资产,避免无必要重做成熟视觉。
|
||||
- 320×568 允许正常滚动;底部 Tabbar 不遮挡内容。
|
||||
- 保持 `[~]` 待用户审核;H5 内部 QA 不代表 Android 或用户验收。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 收紧合同:空态搜索主入口、邀请码快捷入口、创建次入口与防重复提示必须同时存在。
|
||||
- [ ] 默认态补齐我创建的、我加入的、加入申请三组;展示待完善、审核中、被拒绝、已退出/移除状态位置。
|
||||
- [ ] 新建/添加操作统一打开自定义三入口弹层;当前谱提供自定义切换层。
|
||||
- [ ] 覆盖 loading/error/empty/default 查询状态与真实点击。
|
||||
- [ ] 捕获默认/空态联系表,更新证据索引与 Design QA。
|
||||
@@ -0,0 +1,20 @@
|
||||
# G03 创建家谱与首代人物流程实施计划
|
||||
|
||||
**Goal:** 将 G03 两步流程改为纯本地页面样式合同,补齐创建前已有谱提醒、页内校验、提交中/失败、中断恢复和完成后进入 G05。
|
||||
|
||||
**Contract owner:** G03 的 `currentStep`、`createState`、`ancestorState` 是两步页面状态唯一所有者;移除当前页面的远程 API 调用和旧的完成后直跳 T01 路径。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 第一步字段:姓氏、谱名、堂号、所在地、访问规则。
|
||||
- 创建前先显示自定义“搜索潜在已有家谱”提醒,允许去 G06 或确认创建。
|
||||
- 已创建未录始祖时以 `step=ancestor&genealogyId=` 恢复,不重复建谱。
|
||||
- 第二步完成后进入 G05 总览,不直接跳 T01。
|
||||
- 禁止原生 UniApp UI;320×568 正常滚动;页面保持 `[~]`。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:无 appApi/原生 UI,要求提醒层、页内错误、两步状态和 G05 完成路径。
|
||||
- [ ] 实现第一步校验、访问规则、重复建谱提醒、创建中/失败。
|
||||
- [ ] 实现首代校验、中断恢复、保存中/失败/成功结果。
|
||||
- [ ] 两步真实运行和联系表 QA。
|
||||
@@ -0,0 +1,19 @@
|
||||
# G05 公开预览/成员总览实施计划
|
||||
|
||||
**Goal:** 同一路由准确区分未加入用户的公开预览和已加入用户的成员总览,并覆盖所有者/成员入口差异与异常状态。
|
||||
|
||||
**Contract owner:** G05 的 `viewMode`、`accessRole` 与 `overviewFixture` 是页面样式阶段唯一合同;移除远程 API 和当前模糊的单一 ready 状态。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 公开态只展示身份、来源、地区、堂号、支系、公开说明和申请入口;不得暴露成员统计细节、世系和管理入口。
|
||||
- 成员态展示家谱概览;所有者显示审核/设置,普通成员不显示管理入口;世系图保持次级入口。
|
||||
- 无权限、加载、空、失败均同页处理;禁止原生 UniApp UI。
|
||||
- 页面保持 `[~]`,320×568 允许滚动。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:public/member、owner/member、no-permission、无 appApi。
|
||||
- [ ] 实现公开详情与申请入口、成员角色入口差异。
|
||||
- [ ] 真实运行多状态与三档响应式。
|
||||
- [ ] 生成公开/成员联系表并更新 QA。
|
||||
@@ -0,0 +1,20 @@
|
||||
# G06 搜索/邀请码加入双模式实施计划
|
||||
|
||||
**Goal:** 将 G06 收敛为“加入家谱”单页双模式,补齐详细结果卡、六种用户关系操作和邀请码状态,同时保持已选题签视觉资产。
|
||||
|
||||
**Contract owner:** `g06-search-genealogies.vue` 的本地 `resultFixtures` 与 `mode`/`searchState`/`inviteState` 是页面样式阶段唯一状态合同;移除远程 API 调用和旧的“结果卡统一可申请”逻辑。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 只做本地样式状态,不接搜索或邀请码接口。
|
||||
- 结果卡必须明确谱名、姓氏、地区、堂号、上级谱、当前支系、管理/认证、成员数、更新时间。
|
||||
- 六种关系各只有一个明确动作;未加入卡片可进入 G05 公开预览,申请动作进入 G08。
|
||||
- 使用自定义页内错误/状态,不使用原生 UniApp UI;320×568 正常滚动。
|
||||
- 页面保持 `[~]` 待用户审核。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:双模式、详细字段、六种状态、本地数据、无原生 UI/无 appApi。
|
||||
- [ ] 实现搜索初始/加载/结果/空/失败/清空与邀请码初始/无效/有效目标。
|
||||
- [ ] 实现关系动作路由和公开预览入口。
|
||||
- [ ] 三档运行烟测,生成初始/结果/邀请码联系表并更新 QA。
|
||||
@@ -0,0 +1,19 @@
|
||||
# G08 搜索申请/邀请码直加入谱双来源实施计划
|
||||
|
||||
**Goal:** 同一路由根据 `source=search|invite` 准确切换申请语义、第三字段、提交结果和下一步,保留统一家谱视觉。
|
||||
|
||||
**Contract owner:** G08 的 `source` 与 `sourceContract` 是双来源文案和结果路径的唯一所有者;不得在模板散落两套互相矛盾的“申请/直接加入”判断。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 真实姓名与参照已知长辈的文字关系必填,不虚构结构化关系树。
|
||||
- 搜索来源第三字段为申请说明,成功去 G09;邀请来源为可选补充信息,成功回 G01。
|
||||
- 页内字段错误、自定义提交中/成功/失败;禁止原生 UniApp UI。
|
||||
- 320×568 正常滚动;页面保持 `[~]`。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:双来源、字段错误、两条成功路径与无原生 UI。
|
||||
- [ ] 实现来源合同和本地状态,重复点击不重复提交。
|
||||
- [ ] 运行搜索/邀请两套表单和成功路径烟测。
|
||||
- [ ] 生成双来源联系表,更新证据与 QA。
|
||||
@@ -0,0 +1,18 @@
|
||||
# G09 我的申请状态与操作实施计划
|
||||
|
||||
**Goal:** 补齐待审、通过、拒绝、修改后重提、撤回、空和失败状态,并让每张记录只显示符合状态的动作。
|
||||
|
||||
**Architecture:** G09 的 `applicationSamples` 和 `actionFor()` 是页面样式阶段状态与操作的唯一合同;撤回使用自定义确认层并只更新本地候选数据。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 邀请码直接加入不进入 G09;本页只展示搜索申请。
|
||||
- 禁止原生 UniApp UI,不接接口。
|
||||
- 通过进入 G05,拒绝回 G08 搜索来源,待审可撤回。
|
||||
- 页面保持 `[~]`,320×568 允许滚动。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:状态动作、自定义撤回层、无原生 UI。
|
||||
- [ ] 实现卡片动作、撤回结果、空/失败/加载外观。
|
||||
- [ ] 三档运行烟测与代表图 QA。
|
||||
@@ -0,0 +1,17 @@
|
||||
# G10 入谱审核自定义确认实施计划
|
||||
|
||||
**Goal:** 用项目自定义说明/确认/反馈取代原生 Modal/Toast,并补齐无权限状态。
|
||||
|
||||
**Contract owner:** G10 的 `confirmation` 与 `helpVisible` 是审核弹层的唯一状态所有者;禁止保留原生 UniApp UI 备用路径。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 通过/拒绝都必须二次确认并更新当前卡片结果。
|
||||
- 说明、确认、反馈全部项目自定义;无权限同页状态。
|
||||
- 不接接口;页面保持 `[~]`。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:自定义审核层/说明层/反馈,无原生 UI。
|
||||
- [ ] 实现通过/拒绝确认和无权限状态。
|
||||
- [ ] 真实运行与代表图 QA。
|
||||
@@ -0,0 +1,15 @@
|
||||
# G11/G12 设置与字辈诗实施计划
|
||||
|
||||
**Goal:** 保留现有纸面板视觉,补齐页内校验、自定义保存反馈与无权限状态,移除原生 Toast。
|
||||
|
||||
## Constraints
|
||||
|
||||
- G11 只覆盖接口可解释的名称、公开范围、访问说明;无权限独立状态。
|
||||
- G12 覆盖列表、空、编辑、校验、保存失败、无权限;不接接口。
|
||||
- 所有反馈项目自定义;页面保持 `[~]`。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] 契约先行:字段错误、反馈、无权限、禁止原生 UI。
|
||||
- [ ] G11 保存状态与 G12 编辑/保存状态。
|
||||
- [ ] 真实运行和联系表 QA。
|
||||
@@ -0,0 +1,118 @@
|
||||
# A01 分层 PSD 与正式 PNG 资产设计
|
||||
|
||||
## 决策
|
||||
|
||||
A01 不再以 Figma 作为设计与资产生产环节。重新建立一份真正分层的 PSD,将它作为 A01 美术资产的唯一源文件;正式 PNG 必须从 PSD 的对应图层或图层组直接导出,密码登录和验证码登录代表图也必须由同一份 PSD 组装导出。
|
||||
|
||||
现有两张选定效果图只保留为风格、构图和状态参考,不再作为必须反向拆分的扁平像素真值:
|
||||
|
||||
- `docs/design/screens/handoff/2026-07-15/A01-visual-source-password-selected-v2-841x1870.png`
|
||||
- `docs/design/screens/handoff/2026-07-15/A01-visual-source-sms-selected-v1-841x1870.png`
|
||||
|
||||
新的最终视觉真值是用户确认后的 PSD 组装效果。只有这样,设计稿与页面才能使用同一批美术资产,避免重新生成导致的偏差。
|
||||
|
||||
## 目标与成功标准
|
||||
|
||||
- 交付一份可以显示、隐藏、移动和单独导出各资产层的 PSD。
|
||||
- 宗祠、卷轴、宣纸、边框、按钮皮肤和功能图标均为独立、干净的图层或图层组。
|
||||
- PSD 中不以整页截图冒充分层设计,也不从扁平截图硬裁被遮挡或带文字的脏资产。
|
||||
- PSD 导出的正式 PNG 具有明确尺寸、Alpha 属性、拉伸规则和页面用途。
|
||||
- 密码与验证码代表图由正式 PNG 和独立内容层重新组装,不进行第二次美术生成。
|
||||
- 412 × 915 为像素校准基准;页面使用同一批 PNG 后,在该尺寸对齐资产比例与位置。
|
||||
- 320 × 568、360 × 640、360 × 800、412 × 915 使用同一资产体系,依靠分片、平铺和真实布局适配,不压缩整张卷轴。
|
||||
|
||||
## PSD 结构
|
||||
|
||||
PSD 采用 412 × 915 的三倍工作画布,即 1236 × 2745 像素。页面布局仍以 412 × 915 逻辑尺寸记录,正式位图按三倍密度保留细节;导出时在清单中同时记录源像素尺寸和页面显示尺寸。
|
||||
|
||||
图层组固定如下:
|
||||
|
||||
1. `00-参考`
|
||||
- 密码效果图,仅作锁定参考,不导出。
|
||||
- 验证码效果图,仅作锁定参考,不导出。
|
||||
2. `10-背景`
|
||||
- 页面底色。
|
||||
- 宗祠红色头图,不含 Logo、文字和卷轴,也不生成空牌匾、替代牌匾或新的 Logo 底座。
|
||||
3. `20-卷轴`
|
||||
- 顶部卷轴杆与卷边。
|
||||
- 可纵向平铺或延展的无字宣纸主体。
|
||||
- 左边框。
|
||||
- 右边框。
|
||||
- 底部卷轴杆与收口。
|
||||
- 四角回纹及其他可独立复用的装饰。
|
||||
4. `30-品牌与标题装饰`
|
||||
- `brand-seal` 独立层,唯一来源为 `static/assets/foundation/transparent/brand-seal.png`。
|
||||
- `brand-seal` 直接叠放在宗祠中央;宗祠背景只为它保留干净的视觉空间,不重画或补画牌匾。
|
||||
- 标题两侧装饰和分隔纹样。
|
||||
5. `40-公共控件皮肤`
|
||||
- 主按钮左端、中部可延展纹理、右端,或经过验证的九宫格皮肤。
|
||||
- 微信按钮边框和必要装饰,不包含按钮文字。
|
||||
6. `50-密码登录`
|
||||
- 手机图标。
|
||||
- `a01-icon-lock-v1` 密码锁。
|
||||
- 睁眼图标。
|
||||
- 保留中心瞳孔的闭眼图标。
|
||||
- 忘记密码为独立内容层,不烧入卷轴或输入区资产。
|
||||
7. `60-验证码登录`
|
||||
- 与密码状态共用同一个手机图标层实例。
|
||||
- 消息气泡加且仅加三个点的验证码图标。
|
||||
- 获取验证码及倒计时为独立内容层,不烧入输入区资产。
|
||||
8. `70-内容与标注`
|
||||
- 标题、Tab、输入文字、横线、按钮文字、注册与协议等用于代表图组装和定位。
|
||||
- 这些内容不作为页面位图导出;页面中仍由真实 uni-app 组件渲染。
|
||||
|
||||
密码登录与验证码登录通过图层组显示和隐藏形成两种独立状态,共用 `10` 至 `40` 的全部公共资产,不复制背景和卷轴。
|
||||
|
||||
## 资产生产规则
|
||||
|
||||
- 新资产直接以单个图层所需的内容生成或编辑,不让 ImageGen 生成带完整页面、文字或其他控件的混合图。
|
||||
- 为提高速度,相关结构允许先生成一张干净母图,再由 Photoshop 分层拆出正式 PNG;母图只能包含同一资产族,不能退回生成完整登录页面。
|
||||
- 剩余生成收敛为三类母图:完整无字卷轴、无字按钮与装饰板、四枚功能图标板。宗祠头图使用已选候选裁剪,不再重新生成。
|
||||
- 卷轴母图同时提供顶部、底部、左右边框和无字宣纸区域;按钮母图拆为左端、可延展中段和右端;图标板中的四枚图标必须彼此完全分离。
|
||||
- 透明资产必须检查真实 Alpha、边缘杂色、白边、阴影截断和透明区域中的脏像素。
|
||||
- 不透明纹理必须检查接缝、重复感和拉伸后失真;宣纸主体优先使用可平铺纹理。
|
||||
- 卷轴和按钮不得作为整张长图跨尺寸压缩。端部、边框与中部延展区域必须分开。
|
||||
- 图标在目标显示尺寸下检查可读性,不以大图缩略预览代替小尺寸验收。
|
||||
- 除用户明确指定的 `brand-seal` 和 `a01-icon-lock-v1` 外,当前 A01 新视觉使用的新资产不得偷偷回退到旧候选文件。
|
||||
- 候选资产只保存在设计候选目录;通过单项验收后才复制为新的版本化正式文件,不能覆盖现有未提交资产。
|
||||
|
||||
## PSD 与 PNG 导出契约
|
||||
|
||||
每个可导出的图层或图层组使用最终 PNG 文件名作为图层名。导出结果分为:
|
||||
|
||||
- 不透明背景类 PNG:宗祠头图等。
|
||||
- 透明结构类 PNG:卷轴端部、边框、装饰和按钮切片。
|
||||
- 透明图标类 PNG:手机、眼睛和短信气泡等。
|
||||
- 代表图:密码隐藏、密码显示、验证码默认、验证码倒计时;代表图只用于设计对比,不能被页面引用。
|
||||
|
||||
每个导出文件必须同时记录:PSD 图层名、文件路径、像素尺寸、页面显示尺寸、Alpha 属性、平铺或拉伸规则、引用状态和验收结果。该记录后续写入 A01 设计记录与 P00 资产清单,避免同一规则在多个临时文件中重复定义。
|
||||
|
||||
## 制作工具边界
|
||||
|
||||
2026-07-15 已实际检测到正在运行的 Adobe Photoshop 2021:
|
||||
|
||||
- 可执行文件:`E:\Program Files (x86)\Photoshop\Adobe Photoshop 2021\Photoshop.exe`
|
||||
- ProductVersion:`22.0`
|
||||
- COM ProgID:`Photoshop.Application.150`
|
||||
- ExtendScript 目录:`E:\Program Files (x86)\Photoshop\Adobe Photoshop 2021\Presets\Scripts`
|
||||
|
||||
后续实现使用项目内 PowerShell 启动脚本调用已注册的 Photoshop COM,再由项目内 ExtendScript 按资产清单建立命名图层、图层组、PSD 和 PNG 导出结果。脚本、清单与结果均保存在项目允许的目录内,不向 Photoshop 安装目录写文件,也不上传项目资产到第三方服务。
|
||||
|
||||
工具只是容器生成方式,不改变本规格中的图层结构和导出契约。任何自动化脚本都必须关闭自己创建的临时文档,不能关闭、覆盖或保存用户原先在 Photoshop 中打开的文档。
|
||||
|
||||
## 验收流程
|
||||
|
||||
1. 先建立空白分层结构和资产槽位,不修改 A01 页面代码。
|
||||
2. 每次只制作一个资产类别,输出透明底检查图和深浅底联系表,由用户确认后再进入下一类。
|
||||
3. 使用通过检查的图层组装密码和验证码两种 412 × 915 代表图,检查公共区域是否完全一致。
|
||||
4. 用户确认 PSD 组装效果后,冻结 PSD 与导出 PNG 的文件哈希。
|
||||
5. 随后才允许进入页面实现:先更新 A01 资产合同测试,再让页面引用同一批正式 PNG。
|
||||
6. 页面完成后获取四档 H5 真实运行截图,并补做 Android/HBuilderX 真机或模拟器复核;没有这些证据不得宣称 A01 完成或验收通过。
|
||||
|
||||
## 范围外
|
||||
|
||||
- Figma 文件继续制作或同步。
|
||||
- 将整张设计图铺成页面背景。
|
||||
- 接口对接、真实短信、真实微信授权和登录业务实现。
|
||||
- A01 之外的相邻页面、路由和资产调整。
|
||||
- 清理、删除、覆盖现有候选资产或用户未提交修改。
|
||||
@@ -0,0 +1,100 @@
|
||||
# 家谱 APP 纯代码资产流水线设计规格
|
||||
|
||||
> 日期:2026-07-15
|
||||
> 当前试点:A01 登录页
|
||||
> 状态:等待用户复核规格,尚未开始实现
|
||||
|
||||
## 1. 目标
|
||||
|
||||
建立一条不依赖 Photoshop、Figma 或人工反向切图的资产生产链。复杂国风位图只在缺失时由 ImageGen 生成一次原始母图;之后的透明处理、裁切、缩放、组合、预览和运行资产导出全部由代码完成。整页设计预览与 uni-app 使用的独立 PNG 必须来自同一批源像素和同一份布局清单。
|
||||
|
||||
首轮只验证 A01,不修改其他 52 页。成功标准不是脚本能够输出图片,而是 A01 的代码预览、独立资产、uni-app 真实运行画面和验收规划中的页面合同能够形成可重复验证的闭环。
|
||||
|
||||
## 2. 当前版本范围
|
||||
|
||||
- 基础版本固定使用当前浅色国风主题。
|
||||
- 深色与跟随系统整体延期到下一版本,不阻塞本轮 53 页验收。
|
||||
- 下一版本增加主题时必须另建全局主题合同,并对已冻结页面执行影响分析和真实截图回归。
|
||||
- 当前只做页面样式、视觉状态和 Android 兼容性,不对接接口,不宣称 Mock 状态代表功能通过。
|
||||
|
||||
## 3. 保留现场
|
||||
|
||||
- 现有 `docs/design/assets/a01-vnext/`、PSD、Photoshop 脚本、候选图片和历史证据全部保留。
|
||||
- 不删除、不移动、不覆盖旧实验文件。
|
||||
- Photoshop 生产链停止扩展,新流水线不得引用 Photoshop COM、JSX 或 PSD 作为运行依赖。
|
||||
- 旧文件是否归档必须等 A01 新流水线和真实页面通过后另行决定。
|
||||
|
||||
## 4. 唯一所有者与目录边界
|
||||
|
||||
新流水线使用以下边界:
|
||||
|
||||
```text
|
||||
design-pipeline/
|
||||
manifests/ 页面、状态、图层、尺寸和导出合同
|
||||
sources/ 经确认的原始母资产,只读输入
|
||||
scripts/ Node.js 渲染、切图、校验和报告脚本
|
||||
generated/ 可再生成的设计预览、联系表和检查报告
|
||||
static/assets/ 用户确认后进入页面的正式运行资产
|
||||
docs/design/screens/ 真实运行截图证据,不作为页面资源
|
||||
```
|
||||
|
||||
页面清单是坐标、状态、源文件、目标文件、尺寸和复用关系的唯一机器可读所有者。脚本和页面不得重新硬编码同一套资产规则;uni-app 页面只消费已确认的正式运行资产及必要布局常量。
|
||||
|
||||
## 5. 技术结构
|
||||
|
||||
- Node.js:命令入口、清单读取、状态遍历、输出隔离和失败报告。
|
||||
- Sharp/libvips:Alpha、裁切、合成、缩放、PNG 优化、尺寸与体积检查。
|
||||
- JSON:页面画布、图层顺序、资产槽位、状态差异和导出规格。
|
||||
- ImageGen:只生成缺失的完整复杂位图母资产;不生成带表单文字的整页截图,不重绘现有 `brand-seal.png`。
|
||||
- uni-app:最终页面实现与真实交互状态;不把整页设计预览当运行资产。
|
||||
|
||||
## 6. A01 首轮输出
|
||||
|
||||
同一次构建必须生成:
|
||||
|
||||
1. A01 独立透明 PNG 资产及尺寸、Alpha、SHA256 和文件体积报告。
|
||||
2. 密码登录与短信验证码登录的 412×915 代表图。
|
||||
3. 复杂状态联系表,至少覆盖密码隐藏、密码显示、短信默认和短信倒计时。
|
||||
4. 320×568、360×640、360×800、412×915 四尺寸布局预览。
|
||||
5. 可供 A01 契约测试读取的生成清单。
|
||||
|
||||
代码预览必须覆盖 A01 当前合同:现有 `brand-seal.png`、现有锁图标、保留中心瞳孔的闭眼图标、消息气泡加且仅加三点的短信图标、忘记密码位于密码横线下方,以及密码/短信两种独立状态。
|
||||
|
||||
## 7. 验收边界
|
||||
|
||||
- 代码生成图只用于选择和定位视觉问题,不计为真实运行证据。
|
||||
- A01 实施后必须从真实路由进入,获取当前浅色国风主题的运行截图。
|
||||
- 内部检查四档尺寸、默认字号与约 1.3 倍字号、状态栏、安全区、软键盘、返回手势和图片解码表现。
|
||||
- 320×568 下品牌区、登录方式、当前表单、登录按钮、微信入口、注册、忘记密码和协议入口必须同屏可见且不依赖纵向滚动。
|
||||
- 默认只向用户展示一张代表图;密码/短信等复杂状态使用一张联系表。
|
||||
- H5 截图是候选证据,最终仍需 Android/HBuilderX 真机或模拟器复核。
|
||||
- 用户明确确认前,A01 保持 `[~]`,不得写成已验收或冻结。
|
||||
|
||||
## 8. 性能与工程约束
|
||||
|
||||
- 正式 PNG 按实际显示槽位输出,不让页面解码无必要的超大位图。
|
||||
- 同一公共资产只保留一个正式来源;页面状态不得复制公共背景和按钮像素。
|
||||
- 脚本拒绝覆盖已存在的版本化输出,失败时保留旧结果并返回非零退出码。
|
||||
- 生成目录与正式运行目录严格分离;只有用户确认的资产才进入 `static/assets/`。
|
||||
- 不使用整页截图作为运行资产,不用 CSS 或手写 SVG 假造完整卷轴、宗祠、牌匾、按钮和装饰面。
|
||||
- 所有可见提示继续使用项目自定义组件,禁止以原生 UniApp 提示作为最终视觉。
|
||||
|
||||
## 9. 测试与证据
|
||||
|
||||
- 先建立纯代码流水线契约测试并确认因入口和清单缺失而失败。
|
||||
- 最小实现后验证清单、源文件、四尺寸输出、状态输出、PNG 尺寸、Alpha、文件体积和哈希。
|
||||
- A01 页面实施前先更新页面契约测试并确认 RED,实施后恢复 GREEN。
|
||||
- 运行受影响测试、运行时 smoke、真实截图人工复核和 `git diff --check`。
|
||||
- 不执行 `git add`、commit、push、reset、checkout、上传、worktree 或多代理。
|
||||
|
||||
## 10. 推广门槛
|
||||
|
||||
A01 只有同时满足以下条件,纯代码流水线才可推广:
|
||||
|
||||
1. 同一清单能够稳定重复生成全部 A01 候选资产和预览。
|
||||
2. 独立 PNG 与设计预览来自相同源像素,不再需要人工反向切图。
|
||||
3. A01 真实运行截图与选定预览达到用户认可的视觉一致性。
|
||||
4. 四档尺寸、约 1.3 倍字号、软键盘、安全区和 Android 复核有真实证据。
|
||||
5. 用户明确确认 A01 基础版本通过。
|
||||
|
||||
未达到推广门槛时,只修正 A01 流水线和页面,不修改其他页面。
|
||||
Reference in New Issue
Block a user