From 31163448dadcd82044314c999a7489906edc4300 Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Wed, 23 Sep 2026 01:02:51 +0800
Subject: [PATCH] =?UTF-8?q?style(=E4=BB=8A=E6=97=A5=E8=84=9A=E5=8D=B0):=20?=
 =?UTF-8?q?=E5=BC=95=E5=AF=BC=E5=8D=A0=E4=BD=8D=E6=94=B9=E7=94=A8=20AI=20?=
 =?UTF-8?q?=E6=B0=94=E6=B3=A1=E9=82=A3=E5=A5=97=E8=AF=AD=E8=A8=80=EF=BC=88?=
 =?UTF-8?q?=E7=99=BD=E6=B0=94=E6=B3=A1=20+=20=E7=AB=96=E7=BA=BF=E5=9C=86?=
 =?UTF-8?q?=E7=82=B9=EF=BC=89=EF=BC=8C=E4=B8=8D=E5=86=8D=E6=A8=AA=E8=B7=A8?=
 =?UTF-8?q?=E6=95=B4=E5=9D=97=20(v26092218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈：原来那张横跨整块的白卡「放在这有点突兀」，要求按 AI 气泡的样式、用白色背景实现。

- 标记改为与 .ai-bubble **同构**：空 .ab-badge 占位（宽度 = --tl-time）+ .ab-dot + .ab-body >
  .tl-guide-bubble。于是圆点落在**同一条竖线**上，与时间轴/落款行对齐。
- 样式：白底 + 1px --line 描边 + 4px/16px 圆角 + 指向竖线的尖角。
  ⚠️ 白底必须带描边：AI 气泡靠暖渐变区分，白气泡压白底只剩阴影会糊成一片。
  ⚠️ 尖角用「旋转 45° 的小方块 + 同色描边」（纯 border 三角做不出描边）。
  ⚠️ 文案层级：lead（上游引导语）走 15px/600 主文案，下面那行提示走 12.5px 次要色，芯片左对齐。
- 行为不变（文案仍来自接口 lead，芯片仍来自 unused[] 且可点）。

本地验证：guide 模式渲染为竖线上的白气泡（版式已截图确认）、rows 模式不受影响、无 JS 异常。
---
 index.html   | 18 +++++++++++++-----
 mama-box.css | 20 +++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 4b1d731..6c57e39 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:26092217 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26092218 缓存版本标记：改 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 第四节） -->
@@ -319,11 +319,19 @@
           <!-- 引导占位（fpApply('guide') 才显示，此时 #tlSteps 收起）：
                文案与应用**都来自接口** —— lead 是上游自己的引导语（如「宝妈，先从这几件事记起吧。」），
                unused[] 是今天没用过的应用，能对上 App 表的会渲染成可点芯片（见 js 的 renderGuide）。
-               这里的默认文案只在接口没给 lead 时兜底。 -->
+               ⚠️ 版式**沿用下面 AI 气泡那套语言**（左列 + 圆点 + 带尖角的气泡），只是底色用白 ——
+               用户反馈原来那张横跨整块的白卡「放在这有点突兀」；现在它与时间轴共用同一条竖线。
+               左边的空 .ab-badge 只是**占位**，宽度 = --tl-time，好让圆点落在竖线上（与 AI 行同列）。 -->
           <div class="tl-guide" id="tlGuide" style="display:none">
-            <div class="tl-guide-t" id="tlGuideTitle">还没有你的脚印</div>
-            <div class="tl-guide-s" id="tlGuideSub">去上面的工具记一笔，这里就会长出你今天的脚印</div>
-            <div class="tl-guide-apps" id="tlGuideApps"></div>
+            <span class="ab-badge"></span>
+            <span class="ab-dot"></span>
+            <span class="ab-body">
+              <span class="tl-guide-bubble">
+                <span class="tl-guide-t" id="tlGuideTitle">还没有你的脚印</span>
+                <span class="tl-guide-s" id="tlGuideSub">去上面的工具记一笔，这里就会长出你今天的脚印</span>
+                <span class="tl-guide-apps" id="tlGuideApps"></span>
+              </span>
+            </span>
           </div>
           <!-- 这一天的收尾节点。三个直接子元素刻意和 .step 一样排
                （42px 的左格 + 圆点 + 剩下的），点才落得进同一条竖线里。
diff --git a/mama-box.css b/mama-box.css
index 139307c..3c63a8b 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -639,12 +639,22 @@ a.skip:focus{left:16px;top:16px}
       320px 视口下 .step 一行内容总宽约 311 > 可用 264，flex 就去压唯一压得动的时间列，
       把它压到约 36px，圆点跟着左移，看上去就是「时间贴到竖线上」。
       现在三处统一 flex:0 0 var(--tl-time)，谁都不许缩。 */
-/* 今日脚印：「无档案」时的引导占位（替换掉收起的时间轴） */
-.tl-guide{background:#fff;border-radius:22px;padding:20px 18px;box-shadow:var(--sh);text-align:center}
-.tl-guide-t{font-size:15px;font-weight:800;color:var(--ink)}
-.tl-guide-s{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.6}
+/* 引导占位（今天没有任何足迹时）：**沿用 AI 气泡那套语言** —— 左列 + 圆点 + 带尖角的气泡，
+   与时间轴共用同一条竖线，不再是一张横跨整块的白卡（用户反馈那样突兀）。
+   ⚠️ 底色用白（用户指定）：所以要**加一圈描边**才看得出气泡边界 ——
+      AI 气泡靠暖渐变区分，白气泡压白底只剩阴影会糊成一片。
+   ⚠️ 尖角用「旋转 45° 的小方块 + 同色描边」，这样描边能跟着拐过去；纯 border 三角做不出描边。 */
+.tl-guide{position:relative;display:flex;align-items:flex-start;gap:var(--tl-gap);
+  width:100%;padding:10px var(--tl-pad) 0}
+.tl-guide-bubble{display:block;position:relative;background:#fff;border:1px solid var(--line);
+  border-radius:4px 16px 16px 16px;padding:11px 14px 12px}
+.tl-guide-bubble::before{content:"";position:absolute;left:-5px;top:11px;width:9px;height:9px;
+  background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
+  transform:rotate(45deg);border-radius:0 0 0 2px}
+.tl-guide-t{display:block;font-size:15px;font-weight:600;line-height:1.55;color:#403430}
+.tl-guide-s{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.6}
 /* 引导里可点的应用芯片（名字来自接口 unused[]；identifier 是 box_app 按 App 表 url 路径解析的） */
-.tl-guide-apps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
+.tl-guide-apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
 .tl-guide-apps:empty{display:none}
 .tl-chip{font:inherit;font-size:12.5px;font-weight:700;color:var(--brand-dk);
   background:#FFF1EC;border:1px solid #FFDFD5;border-radius:999px;padding:7px 13px;line-height:1}