Files
hera-web/docs/tiangong-invitation-layout.md

2.2 KiB

请神页面布局调整(2026-10-20)

本次仅调整 src/pages/tiangong-detail/index.scss 的请神布局,不修改后端、业务流程或接口。

  • 祥云山水背景与神像区域改为随可用高度伸展,取消固定场景高度;底部介绍区结束后不再保留大片空白。
  • 参考用户图片,使用通栏浅绿色名称栏、米黄色介绍区和居中的浅绿渐变「请神」按钮。
  • 长屏由场景填满;小屏、长介绍自然滚动,保留底部安全区;神像保持等比例显示。
  • 敬神页仍使用原场景、供桌和操作栏,不展示介绍。

验收

  1. 开发者工具编译 dist,登录后进入天宫,选择未绑定神仙的请神页。
  2. 检查名称栏水平铺满、介绍排版完整、请神按钮居中,底部没有额外的大块留白。
  3. 切换小屏和长屏机型:小屏可向下滚动看到完整介绍和按钮,长屏背景撑满,不横向溢出。
  4. 点击请神仍沿用原流程;返回已绑定神仙的敬神页,供桌与按钮保持原样且没有介绍。

边界与差异

  • 使用已有祥云山水素材,不将参考截图整张铺入页面;名称采用金棕色以保持浅绿底上的可读性。
  • 正式环境图片仍取 iconDetailUrl,介绍仍取 description,本次没有新增接口或文案。
  • 本地 ?avatarDemo=1 是独立 Mock 演示,不建立真实供奉关系;演示页附加提示文字属于 Mock 边界说明,正式页面没有这些说明。
  • 演示素材中禄星介绍与名称不一致的问题仍明确提示待确认,本次未自行更改。

验证

类型检查、H5 和微信构建、原生 WXSS 编译检查通过;新增 scripts/invitationLayout.test.cjs 两项通过,防止恢复固定高度或影响敬神布局。浏览器通过显式 Demo 验证小屏、常规长屏与更长屏及原有弹窗,不代表正式后端绑定已联调。

最终全量测试为 118 项、116 通过、2 失败:执行期间出现本次范围外的个人信息页安全区改动,avatarEntry.test.cjs 的旧测试替身未提供 getSystemInfoSync 且依赖固定 Hook 下标,导致两项头像入口测试失败。本次保留这些页面改动,未修改头像逻辑或掩盖失败。