rain
168 lines
6.2 KiB
Markdown
168 lines
6.2 KiB
Markdown
# A05 向 A01 视觉体系收拢实施计划
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:executing-plans` inline. 本任务集中修改同一 A05 页面，不派发子代理；项目禁止 worktree、Git 暂存、提交和推送。
|
||
|
||
**Goal:** 让 A05 的 Logo、字体、标题分隔、按钮、Toast 和成功结果容器统一使用 A01 已确定的新视觉资产，同时保留四字段重设流程。
|
||
|
||
**Architecture:** `pages/auth/a05-reset-password.vue` 继续独立拥有表单和本地状态。页面直接消费 A01 正式资产；静态 PowerShell 合同负责禁止旧资产回退，Chrome CDP 烟测负责验证交互与多尺寸运行态。
|
||
|
||
**Tech Stack:** uni-app、Vue 3 `<script setup>`、SCSS、PowerShell、Node.js、Chrome CDP。
|
||
|
||
## Global Constraints
|
||
|
||
- 只修改 A05、A05 聚焦测试、A05 QA/验收记录和必要计划文档。
|
||
- 不接接口；真实滑动验证使用后续组件自带样式，本轮只显示待接入 Toast。
|
||
- 不使用原生 UniApp Toast、Modal、Loading、ActionSheet。
|
||
- 320×568 允许自然纵向滚动；同时复核 360×640、360×800、412×915。
|
||
- A05 保持 `[~]`，H5 证据不等于 Android/HBuilderX 或完整用户验收。
|
||
|
||
---
|
||
|
||
### Task 1: 收紧 A05 静态视觉合同
|
||
|
||
**Files:**
|
||
- Modify: `tests/a05-reset-password-contract.ps1`
|
||
- Test: `tests/a05-reset-password-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: `pages/auth/a05-reset-password.vue` UTF-8 源码。
|
||
- Produces: 新资产必需项、旧资产禁用项、Logo/字体/九宫格渲染约束。
|
||
|
||
- [x] **Step 1: 写失败合同**
|
||
|
||
要求以下源码片段存在：
|
||
|
||
```powershell
|
||
'a01-vnext-divider-v1.png'
|
||
'a01-scroll-primary-v3.png'
|
||
'a01-scroll-toast-v3.png'
|
||
'a01-scroll-dialog-v3.png'
|
||
'width: 184rpx;'
|
||
'height: 221rpx;'
|
||
"border-image-source: url('/static/assets/foundation/transparent/a01-scroll-toast-v3.png');"
|
||
'border-image-slice: 58 280 fill;'
|
||
```
|
||
|
||
禁止以下旧路径和结构：
|
||
|
||
```powershell
|
||
'a01-primary-button.png'
|
||
'a01-secondary-button.png'
|
||
'a02-login-panel.png'
|
||
'auth-divider-knot.png'
|
||
'feedback-toast__skin'
|
||
'verificationVisible'
|
||
'verification-layer'
|
||
'font-family:'
|
||
```
|
||
|
||
- [x] **Step 2: 运行合同并确认 RED**
|
||
|
||
Run: `powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a05-reset-password-contract.ps1`
|
||
|
||
Expected: FAIL，首个失败原因是 A05 尚未引用新标题分隔或新按钮资产。
|
||
|
||
---
|
||
|
||
### Task 2: 最小迁移 A05 页面
|
||
|
||
**Files:**
|
||
- Modify: `pages/auth/a05-reset-password.vue`
|
||
- Test: `tests/a05-reset-password-contract.ps1`
|
||
|
||
**Interfaces:**
|
||
- Consumes: A01 的 `brand-seal.png`、`a01-vnext-divider-v1.png`、`a01-scroll-primary-v3.png`、`a01-scroll-toast-v3.png`、`a01-scroll-dialog-v3.png`。
|
||
- Produces: 原选择器和表单 API 保持可用；获取验证码入口改为待接入 Toast。
|
||
|
||
- [x] **Step 1: 替换模板资产**
|
||
|
||
```vue
|
||
<image class="reset-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
|
||
<image class="reset-submit__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||
<image class="success-dialog__skin" src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png" mode="aspectFit" />
|
||
<image class="success-action__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||
```
|
||
|
||
删除旧验证层和 Toast 图片子层；Toast 只保留真实文字节点。
|
||
|
||
- [x] **Step 2: 收敛行为验证占位**
|
||
|
||
```js
|
||
const prepareGetCode = () => {
|
||
if (!/^1\d{10}$/.test(phone.value)) {
|
||
fieldErrors.value.phone = '请输入正确手机号'
|
||
return
|
||
}
|
||
fieldErrors.value.phone = ''
|
||
showFeedback('滑动验证待接口接入')
|
||
}
|
||
```
|
||
|
||
删除 `verificationVisible`、`closeVerification` 和 `confirmVerification`，不伪造验证码已发送。
|
||
|
||
- [x] **Step 3: 对齐样式**
|
||
|
||
Logo 改为 `184×221rpx`；删除全部局部 `font-family`；按钮图片使用 `aspectFit`；Toast 复制 A04 已验证的九宫格 `border-image` 参数；成功卷轴按现有遮罩居中，不改变返回登录逻辑。
|
||
|
||
- [x] **Step 4: 运行合同并确认 GREEN**
|
||
|
||
Run: `powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a05-reset-password-contract.ps1`
|
||
|
||
Expected: `A05-RESET-PASSWORD-CONTRACT PASS`。
|
||
|
||
---
|
||
|
||
### Task 3: 更新运行烟测并完成 RED/GREEN
|
||
|
||
**Files:**
|
||
- Modify: `tests/a05-reset-password-runtime-smoke.js`
|
||
- Test: `tests/a05-reset-password-runtime-smoke.js`
|
||
|
||
**Interfaces:**
|
||
- Consumes: Chrome `9222` 调试端口与 `http://localhost:5173` H5 页面。
|
||
- Produces: 默认态、手机号错误、待接入 Toast、全字段错误、密码不一致和成功结果证据。
|
||
|
||
- [x] **Step 1: 将旧验证层断言改为新 Toast 断言**
|
||
|
||
点击“获取验证码”后等待 `.feedback-toast`，断言文字为“滑动验证待接口接入”；同时断言不存在 `.verification-layer`，表单值未清空。
|
||
|
||
- [x] **Step 2: 运行烟测**
|
||
|
||
Run: `node tests/a05-reset-password-runtime-smoke.js http://localhost:5173`
|
||
|
||
Expected: `A05-RESET-PASSWORD-RUNTIME-SMOKE PASS`。
|
||
|
||
---
|
||
|
||
### Task 4: 真实截图、文档和最终验证
|
||
|
||
**Files:**
|
||
- Modify: `design-qa.md`
|
||
- Modify: `docs/验收规划.md`
|
||
- Modify: `docs/交接记录.md`
|
||
- Modify: `docs/design/P00_页面结构与资产清单.md`
|
||
- Update ignored evidence: `tmp/a05-*.png`
|
||
|
||
**Interfaces:**
|
||
- Consumes: 实际 H5 运行页与静态/运行测试输出。
|
||
- Produces: A05 待审核候选证据，不产生正式验收或冻结结论。
|
||
|
||
- [x] **Step 1: 捕获四档视口并审视**
|
||
|
||
用 Chrome CDP 捕获 320×568、360×640、360×800、412×915，检查 Logo、标题、四字段、验证码入口、按钮边缘、Toast、成功卷轴、滚动和横向溢出。
|
||
|
||
- [x] **Step 2: 更新 A05 记录**
|
||
|
||
只记录新视觉迁移与内部 H5 证据；A05 仍为 `[~]`，真实滑动验证、接口结果和 Android/HBuilderX 仍待审核。
|
||
|
||
- [x] **Step 3: 运行最终验证**
|
||
|
||
```powershell
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/a05-reset-password-contract.ps1
|
||
node tests/a05-reset-password-runtime-smoke.js http://localhost:5173
|
||
powershell.exe -NoProfile -ExecutionPolicy Bypass -File tests/capture-chrome-page-contract.ps1
|
||
git diff --check
|
||
```
|
||
|
||
Expected: 三项测试 PASS；`git diff --check` 退出码 0，允许已有 CRLF 提示。
|