rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cb25317412e82cab17c682aa040c528181a8f501
jiapuapp/docs/superpowers/plans/2026-07-16-a01-red-hall-ink-login.md
T
rain cb25317412 验收20%
2026-07-16 07:58:53 +08:00

7.6 KiB
Raw Blame History

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: 保存两张选定状态图到交接证据目录

    原始结果分别为：

    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 要求页面包含：

    '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'

    并明确禁止页面继续引用：

    'a01-login-scroll-frame-v1.png'
'a01-login-header-exact-v2.png'
'a01-vnext-scroll-v1.png'

  • Step 3: 运行测试并确认正确失败

    Run:

    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.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.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.exe -NoProfile -ExecutionPolicy Bypass -File tests/a01-a02-ui-contract.ps1
git diff --check
git status --short

    Expected: 契约 PASS、git diff --check 无输出；状态列表仅用于证明已有改动均被保留。

Reference in New Issue View Git Blame Copy Permalink