hera-web/docs/navigation-alignment-fix.md

财神背景与主导航优化（2026-10-17）

修改

• 神像区独立使用等比云纹背景，不再把背景拉伸到供桌。H5 aspectFit 内部图片显式居中，长屏神像落在供桌上方。
• 供桌使用固定比例裁切容器去掉素材白色侧边，未点香/已点香共用同一位置，切换时不移动。
• 首页、天宫、我的均注册为真实 Tab，统一 switchTab，不再混用入栈和重定向。H5 隐藏框架自带栏并恢复完整高度，只展示现有自绘导航。
• 页面实例保留，首页日期选择、我的生日显示状态不因切换重置；重复点击防止重入。
• 资料增加 30 秒内存缓存与并发请求合并，过期后台刷新时保留快照，失败提示正在使用上次资料。账号隔离；资料/头像保存成功后用服务器返回值更新缓存，编辑页强制读取最新资料。

验收

H5 打开 http://127.0.0.1:4173/?preview=1#/pages/fortune/index。微信开发者工具重新编译 dist 后按相同步骤操作（真实资料需要已有后端与登录状态，本次不启动后端）。

1. 天宫 → 财神：神像、香炉处于页面中轴；背景不横向拉伸，供桌两侧没有白色窄条。点击上香：供桌点亮但位置不跳动，五个按钮完整显示。
2. 首页 → 选明日 → 天宫 → 我的 → 首页：仍选中明日；无重复导航，不反复出现整页资料加载占位。
3. 我的 → 显示生日 → 天宫 → 我的：生日显示状态保留，点击开关不进入编辑页。
4. 在真实联调环境保存生日/时辰后返回：首页、我的使用新资料重算；预览模式仍不保存，不假装保存成功。
5. 小屏、长屏反复切换三个入口并返回详情：底部不被裁切，没有横向滚动；连续点击不叠加路由。

边界与接口

本次无新增业务接口，无后端修改。沿用 GET /api/user/profile、PUT /api/user/profile、POST /api/user/avatar，仅调整前端缓存；登录成功跳转同步改为 Tab 跳转。天宫仍是原有隔离 Mock，不扣款、不连接设备；未确认分支及拟定接口继续见 天宫交付说明。

验证记录

• 37 项自动化测试、TypeScript 检查、H5 与微信代码构建通过；仍存在既有 vendor/chunk 体积警告。
• 浏览器确认三个 Tab 各保留一个 DOM 页面实例，隐藏页面不显示；首页“明日”、我的生日显示状态切回后保留，框架默认导航隐藏。
• 340×531、320×568、432×932 CSS 视口检查财神，神像图像中轴与容器中轴一致，供桌切换前后同尺寸同位置，五个动作完整，没有横向溢出。
• 不将浏览器验证与构建通过等同于微信真机验收；未做真机帧率测量，首次资源加载仍受设备与网络影响。