Files
jiapuapp/docs/superpowers/specs/2026-07-16-a05-a01-visual-system-migration-design.md
T
2026-07-16 18:13:03 +08:00

3.5 KiB
Raw Blame History

A05 向 A01 视觉体系收拢设计

设计决定:2026-07-16 用户确认采用完整收拢方案。本文只约束 A05 的视觉资产与字体迁移,不改变接口边界和重置密码业务流程。

目标

把 A05 重设密码页仍在使用的旧认证视觉替换为 A01 已确定的新体系,使 A01、A04、A05 在品牌 Logo、字体、标题分隔、主按钮和项目自定义 Toast 上保持一致。

唯一视觉真源

  • A01 当前真实运行视觉与 docs/design/screens/handoff/2026-07-16/A01-current-password-sms-contact-824x915.png
  • 全局字体合同:styles/global.scss 中的 "STKaiti", "KaiTi", serif
  • Logostatic/assets/foundation/transparent/brand-seal.pngA05 使用与 A01 相同的 184×221rpx 槽位、top: 64rpx 和水平居中规则。
  • 标题分隔:static/assets/modules/auth/transparent/a01-vnext-divider-v1.png,使用 aspectFit,不得拉伸。
  • 朱砂主按钮:static/assets/foundation/transparent/a01-scroll-primary-v3.png,用于“确认重设”和成功结果中的“返回登录”,使用 aspectFit
  • 浅色卷轴 Toaststatic/assets/foundation/transparent/a01-scroll-toast-v3.png,使用九宫格 border-image,不得用绝对定位图片层拉伸。

页面结构

  1. 保留现有红色宗祠水墨底图、返回按钮、标题、副标题、四字段表单、获取验证码入口、重设提示和返回登录入口。
  2. 删除 A05 内所有局部 font-family,统一继承项目全局楷体。
  3. Logo 缩小到 A01 已确认尺寸;不改底图,不把 Logo 烘焙进背景。
  4. 标题分隔线、页面主按钮和成功结果按钮换成 A01 新资产;按钮文字仍由真实 DOM 承担。
  5. Toast 删除旧 feedback-toast__skin 图片层,改用新浅色卷轴九宫格背景。

行为验证与结果态边界

  • A05 仍在“获取验证码”前校验手机号。
  • 真实滑动验证必须使用后续接口组件自带样式;旧 a02-login-panel.png 验证面板不作为最终视觉证据。
  • 本轮移除旧自定义验证面板的最终视觉依赖。手机号通过后只显示“滑动验证待接口接入”的项目自定义 Toast,不伪造滑块完成、验证码发送成功或倒计时。
  • 四字段本地校验和成功结果层继续保留,用于当前页面视觉流程审核;成功结果层换用 a01-scroll-dialog-v3.png 作为国风卷轴容器,但该资产在滑动验证场景仍不得冒充真实组件。
  • 返回登录仍使用 /pages/auth/a01-entry,不恢复已删除的 A02。

不变范围

  • 不接短信、滑动验证、重置密码或登录接口。
  • 不新增路由,不修改 A01、A04 或其他页面。
  • 不改变手机号、验证码、新密码、确认新密码的字段和现有就近错误文案。
  • 不新增深色主题,不压缩 320×568;短屏继续自然纵向滚动。
  • 不使用 uni.showToastuni.showModaluni.showLoadinguni.showActionSheet

验收标准

  • 静态合同要求 A05 引用新 Logo 尺寸、标题分隔、两处朱砂按钮与九宫格 Toast,且不再引用旧主按钮、旧次按钮、旧登录面板或局部字体。
  • 运行时覆盖默认空表单、手机号错误、滑动验证待接入 Toast、全字段错误、密码不一致和成功结果层。
  • 320×568、360×640、360×800、412×915 无横向溢出;320×568 允许纵向滚动。
  • 只保存一张 412×915 代表图或一张复杂状态联系表;H5 只作为候选证据。
  • Android/HBuilderX、真实滑动验证和真实接口结果继续待审,A05 保持 [~],不冻结。