31 lines
2.8 KiB
Markdown
31 lines
2.8 KiB
Markdown
# 财神背景与主导航优化（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，不扣款、不连接设备；未确认分支及拟定接口继续见 [天宫交付说明](./tiangong-delivery.md)。
|
||
|
||
## 验证记录
|
||
|
||
- 37 项自动化测试、TypeScript 检查、H5 与微信代码构建通过；仍存在既有 vendor/chunk 体积警告。
|
||
- 浏览器确认三个 Tab 各保留一个 DOM 页面实例，隐藏页面不显示；首页“明日”、我的生日显示状态切回后保留，框架默认导航隐藏。
|
||
- 340×531、320×568、432×932 CSS 视口检查财神，神像图像中轴与容器中轴一致，供桌切换前后同尺寸同位置，五个动作完整，没有横向溢出。
|
||
- 不将浏览器验证与构建通过等同于微信真机验收；未做真机帧率测量，首次资源加载仍受设备与网络影响。
|