103 lines
5.1 KiB
Markdown
103 lines
5.1 KiB
Markdown
# 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/assets/a01-vnext/source/A01-layered-source-v1.psd`
|
||
- 图层与导出清单：`docs/design/assets/a01-vnext/source/a01-psd-manifest.json`
|
||
|
||
**验收：**
|
||
|
||
- 密码稿 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 完成或验收通过。
|