From e29052f107c16493a81e048841a7a9f770a8cece Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Sun, 20 Sep 2026 02:02:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E9=A6=96=E9=A1=B5):=20=E6=9D=A5=E4=BF=A1?=
 =?UTF-8?q?=E5=8D=A1=E9=BB=98=E8=AE=A4=E6=94=B6=E8=B5=B7=EF=BC=8C=E7=AD=89?=
 =?UTF-8?q?=20/letters=20=E7=BB=93=E6=9E=9C=E5=86=8D=E5=86=B3=E5=AE=9A?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=20=E2=80=94=E2=80=94=20=E4=BF=AE=E6=8E=89?=
 =?UTF-8?q?=E3=80=8C=E5=85=88=E5=86=92=E5=87=BA=E6=9D=A5=E5=86=8D=E7=BC=A9?=
 =?UTF-8?q?=E5=9B=9E=E5=8E=BB=E3=80=8D=E7=9A=84=E9=97=AA=E7=83=81=20(v2609?=
 =?UTF-8?q?2003)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

现象：从商城切回首页加载 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
---
 index.html | 19 +++++++++++++++----
 js/app.js  | 45 +++++++++++++++++++++++++++++++++++++++------
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index e8fc719..862d365 100644
--- a/index.html
+++ b/index.html
@@ -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，不再是标题底下一行贴边的灰字。
diff --git a/js/app.js b/js/app.js
index c6d0615..72f087f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26092002';
+  var VER = '26092003';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -1319,10 +1319,30 @@
      全读完了还硬顶一封旧信在首页正中间，是在假装有新消息。
      收起来会空出 64px 的流高（卡是 margin-top:-16 + height:80），
      所以同时给 .home-body 挂 .no-letter 把下面的标题往下推一点，
-     免得「孕期必用工具」直接贴到橙色头图底边上。 */
+     免得「孕期必用工具」直接贴到橙色头图底边上。
+
+     ⚠️⚠️ 2026-09-20：卡的显隐**要等 /letters 回来才算数**（lettersResolved）。
+     之前的写法是「先把内置样例/本地队列拼出来的卡显示出来，数据回来再决定」——
+     结果商城↔首页来回切时会闪一下：先冒出一张（甚至写着「宝宝回信啦」）的卡，
+     几百毫秒后数据说没有未读，又缩回去。现在反过来：
+       · index.html 里 #homeLetter 默认带 .hide、#homeBody 默认带 .no-letter；
+       · 没确定（!lettersResolved）→ 一律保持收起；
+       · 确定之后才可能显示，且只有在真有未读/新回信时才显示。
+     代价是「有信」的用户看到卡出现在数据回来那一刻（晚一点点，但不闪）。 */
+  let lettersResolved = false;   // /letters 已经问过结果（含失败/访客态）—— 见 applyRemoteLetters
+
+  function hideLetterCard() {
+    const card = $('#homeLetter'), body = $('#homeBody');
+    if (card) { card.classList.add('hide'); card.classList.remove('has-new'); }
+    if (body) body.classList.add('no-letter');
+  }
+
   function pushLatestToHome() {
     const card = $('#homeLetter');
     const body = $('#homeBody');
+    /* 还没问出结果、访客态（没身份）、或后端明确说该用户没建档 —— 都别显示。
+       ⚠️ hashParam 是函数声明（在文件靠后定义），这里调用靠提升，没问题。 */
+    if (!lettersResolved || !hashParam('openid') || state.pregEmpty) { hideLetterCard(); return; }
     const show = () => { card.classList.remove('hide'); body.classList.remove('no-letter'); };
     let msg = null, owner = null;
     LETTERS.forEach(L => L.thread.forEach(m => {
@@ -3988,6 +4008,10 @@
       state.curLetter = ''; state.homeLetter = '';
       syncPregnancy();        /* 占位 + 隐藏脚印时间轴 + 信件引导态 */
       syncLetterCounts();     /* hero 计数切 '--'（角标 #tabBadge 已不由本地信件数驱动） */
+      /* ⚠️ 必须重算首页来信卡：上面刚把 LETTERS 清空、pregEmpty 置真，
+         不重算的话那张卡会停在「显示」状态，顶着一封已经不存在的信。 */
+      lettersResolved = true;
+      pushLatestToHome();
       return;
     }
     const base = '/api/mp/public/mama-box/';
@@ -4119,14 +4143,22 @@
      拉不到 —— 无 openid / 接口挂 / 返回码不对 —— 就静默回落内置样例，页面照常可用。 */
   function applyRemoteLetters() {
     var openid = hashParam('openid');
-    if (!openid) return;
+    /* ⚠️ 下面每条**终态**都必须把 lettersResolved 置 true（含失败/无身份），
+       否则首页那张来信卡会永远停在收起态（宁可收起也不能闪，见 pushLatestToHome）。
+       无身份这条：卡本来就不该出现，置 true 只是让状态机收敛。 */
+    if (!openid) { lettersResolved = true; pushLatestToHome(); return; }
     var base = '/api/mp/public/mama-box/';
     var j = function (u) { return fetch(u).then(function (r) { return r.ok ? r.json() : null; }).catch(function () { return null; }); };
     j(base + 'letters?openid=' + encodeURIComponent(openid)).then(function (lj) {
-      if (!lj || lj.code !== 200 || !lj.result || !lj.result.items) return;
+      /* 拉不到（接口挂/断网/返回码不对）→ 静默回落内置样例。
+         这**也是**一个终态：样板信照样要能上首页卡（离线可用），所以这里要置位并重算。 */
+      if (!lj || lj.code !== 200 || !lj.result || !lj.result.items) {
+        lettersResolved = true; pushLatestToHome(); return;
+      }
       /* 新用户空态：后端成功返回空列表 → 清掉内置样例信，展示「这里还没有内容」。
          ⚠️ 不能直接 return —— 那会把 LETTERS 留在内置样例上，新用户看到演示信。 */
       if (!lj.result.items.length) {
+        lettersResolved = true;
         LETTERS.splice(0, LETTERS.length);
         state.curLetter = '';
         state.homeLetter = '';
@@ -4155,12 +4187,13 @@
           LETTERS.splice(0, LETTERS.length, ...apiList);
           state.curLetter = LETTERS[0].id;
           state.homeLetter = LETTERS[0].id;
+          lettersResolved = true;
           renderLetters();
           syncLetterCounts();
           pushLatestToHome();
         } catch (e) { /* 映射 / 渲染异常就回退内置样例 */ }
-      }).catch(function () { /* 静默回退内置样例 */ });
-    }).catch(function () { /* 静默回退内置样例 */ });
+      }).catch(function () { lettersResolved = true; pushLatestToHome(); /* 静默回退内置样例 */ });
+    }).catch(function () { lettersResolved = true; pushLatestToHome(); /* 静默回退内置样例 */ });
   }
 
   /* ---------- 今日脚印（box_app → 数胎动对外 API，动态获取） ----------