fix(首页): 来信卡默认收起,等 /letters 结果再决定显示 —— 修掉「先冒出来再缩回去」的闪烁 (v26092003)

现象:从商城切回首页加载 mama-box 时,先渲染出一张「宝宝来信/宝宝回信啦」卡
(用内置样例信 + 本地待投递队列拼的),几百毫秒后 /letters 回来说没有未读,
卡又缩回去,闪一下。

原因:卡在 index.html 里默认可见,pushLatestToHome() 是「先显示、数据回来再决定」;
而首屏渲染远早于 /letters。

改法(反过来:没确定之前一律不显示):
- index.html:#homeLetter 默认带 .hide、#homeBody 默认带 .no-letter(首屏按「无卡」排版,不跳)
- app.js:新增 lettersResolved 开关;pushLatestToHome() 在未确定、访客态(无 openid)、
  或后端明确未建档(pregEmpty)时一律保持收起;applyRemoteLetters 的每条终态
  (成功/空列表/接口挂/无身份)与 applyRemoteProfile 的访客分支都置位并重算
- 访客分支顺手补了一次 pushLatestToHome():此前清空 LETTERS 后没人重算,
  那张卡会顶着一封已不存在的信留在首页

验证(本地 + 延迟代理四态,浏览器实测):
- 有建档 + 0 封信:全程 hidden(修的就是这个)
- 有建档 + 1 封未读:接口回来前 hidden → 回来后显示「小汤圆来信」
- 接口全挂:回退内置样例照旧显示(离线行为不变)
- 访客(无 openid):hidden
This commit is contained in:
2026-09-20 02:02:47 +08:00
parent e9873040f3
commit e29052f107
2 changed files with 54 additions and 10 deletions

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26092002 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26092003 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
@@ -121,8 +121,17 @@
<!-- 宝宝一有新回信,pushLatestToHome() 会把这张卡换成那条回信,
并加上 .has-new(信封右上角冒一个小红点)。
没有未读、也没有新回信时,同一个函数会给它挂 .hide 整张收起来。 -->
<button class="letter-card ripple" id="homeLetter" data-goto="letter-detail">
没有未读、也没有新回信时,同一个函数会给它挂 .hide 整张收起来。
⚠️ 2026-09-20:这张卡**默认就是收起的**(标记里直接带 .hide,
#homeBody 直接带 .no-letter)。原因:卡的最终显隐要等 /letters
回来才知道,而首屏渲染远早于它 —— 默认显示的话,就会出现
「先冒出一张(用内置样例/本地队列拼出来的)来信卡,数据回来发现
没有未读,再缩回去」的闪一下(商城↔首页来回切时特别明显)。
所以规则改成:**没确定之前一律不显示,确认有未读/新回信才显示**。
pushLatestToHome() 里的 lettersResolved 就是这个「已确定」开关,
别把这里的 .hide / .no-letter 去掉 —— 去掉就退回闪烁版。 -->
<button class="letter-card ripple hide" id="homeLetter" data-goto="letter-detail">
<span class="lc-envwrap"><img class="lc-env" src="assets/img/02cf420f0d07.png" alt="" aria-hidden="true"></span>
<div class="lc-body">
<!-- ⚠️ 这句只是**没填小名时的兜底**,屏幕上实际由 pushLatestToHome()
@@ -137,6 +146,8 @@
<!-- id 是给 pushLatestToHome() 用的:来信卡收起来时它挂 .no-letter,
把下面第一块(.tool-dock)的上间距补回来。
⚠️ 2026-09-20:它**默认就带 .no-letter**(与 #homeLetter 默认带 .hide 配套,
首屏按「没有来信卡」排版,避免数据回来时布局跳一下)。
── 这一版首页正文换了骨架 ──
上一版是同一套「竖色条标题 + 灰色说明 + 一块内容」原样重复四遍
@@ -150,7 +161,7 @@
.shelf 横向可滑的书架卡带
页面也因此有了两种宽度节奏:文字型内容仍在 26px 栏内,
托盘和卡带出血到屏幕边缘。 -->
<div class="home-body" id="homeBody">
<div class="home-body no-letter" id="homeBody">
<!-- 模块一 · 工具托盘。
抬头进了托盘里面:标题独占一行,右端「所有工具」做成白底细边胶囊;
说明单独做成一枚浅色 chip,不再是标题底下一行贴边的灰字。