178 lines
7.6 KiB
Markdown
178 lines
7.6 KiB
Markdown
# 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:**
|
||
- Keep: `docs/design/screens/handoff/2026-07-16/A01-current-password-sms-contact-824x915.png`
|
||
- Source: `docs/design/assets/a01-vnext/source/A01-layered-source-v1.psd`
|
||
- 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` 无输出；状态列表仅用于证明已有改动均被保留。
|