v0.4.0 顶栏改白色 + 通知栏同色 + 顶栏随页面滚动

用户 08:56 的三条要求：
  1. 家书标题栏用浅色（下面色块的背景色）；
  2. 上面通知栏也是浅色，两者融为一体；
  3. 向上滑动时标题栏跟着向上滑，不固定在原位。
（追问确认：顶栏底色 = 白；「品牌条 + 页面标题条」一起随滚动消失。）

## ① 系统栏改「不透明 + 与顶栏同色」，弃用透明方案
原来走「系统栏全透明 + 让紧邻元素透出同底色」。这版顶栏要用白色，
若仍走透明方案就得再造一层"白色压条"去刷白状态栏，太绕。
⇒ 直接 `statusBarColor = surface`（白）、`navigationBarColor = page_bg`（纸色）。
这是**配置出来的同色**，比"指望紧邻元素恰好同色"稳得多（后者顶栏一改底色就出色带）。
副产品：不再需要 `setWindowBackgroundColor` ⇒ 连那条 unavailable 告警也消失，
编译回到 **0 error / 0 warning**。

## ② 顶栏随滚动：整页包进 Scroll，顶栏作为内容第一个元素
原来 `Column { 页头; List/Grid(layoutWeight 1) }` —— 顶栏在滚动区**外面**，
所以固定不动。改为 `Scroll { Column { this.topBar(); 页头; 列表 } }`。
顶栏由 Index 以 `@BuilderParam topBar` 插槽下发（`topBarSlot`），13 个页面全部接入。

⚠️ 同步必须处理的两点：
· 列表的 `.layoutWeight(1)` 要删 —— Scroll>Column 里高度由内容决定，
  layoutWeight 会去分"剩余空间"(=0) ⇒ 列表塌成 0 高、整页只剩顶栏和页头；
· List/Grid 不能自己再滚动（去 scrollBar/edgeEffect）—— 两层滚动容器会抢手势。
⚠️ ArkUI 限制：带尾随 lambda 的组件只能有 1 个 `@BuilderParam`
（首页原有闲置的 topActions 已删）。

## ③ 顶栏白色 + logo 可辨认
logo 是「米色底(74%) + 砖红图案(24%)」的实心方图，放在米色上底板隐形、
只剩图案发飘（用户说"看不清"）。今加一层极浅描边把底板"托"出来。
顶栏高度 56→48vp。

## 验证（真机，全部通过）
· 沉浸式：状态栏色 `#FFFFFF` == 顶栏色 `#FFFFFF` ✓
· 顶栏随滚动：「家书」标题 y=140 → 滑动后**已滚出可视区** ✓
· 顶栏滚走后状态栏仍为 `#FFFFFF`（未露出页面内容）✓
· 14 个页面遍历 **14/14**；深验（每页特征文本）**12/12**
· 编译 **0 error / 0 warning**

## 过程记录：批量改 12 个文件失败两次（已回滚重做）
第 1 版按缩进正则切分 ⇒ 闭合括号错乱；第 2 版跳字符时**没消费 Column 的
修饰符链** ⇒ 吃掉 `@Builder` 声明、**636 个报错**。
第 3 版改为**按行 + 括号深度解析**，且**改完立刻做结构断言**
（括号配平、`this.topBar()` 恰好 +1），不满足就不写入；先单页试跑再推广。
教训：批量改多文件时正则不可靠，必须配结构自检 + 单页试点。

配套修掉 `_tooling/familybook_harmonyos_run.sh` 一个"假成功"：
`hdc list targets` 无设备时输出字面量 `[Empty]`，原来"非空即通过"
⇒ 拿 `[Empty]` 当序列号去装、还打印「✓ 设备：[Empty]」。已显式排除并 die。

entry/src/main/ets/components/TopBar.ets

@@ -1,18 +1,18 @@
 /**
  * 家书 FamilyBook · 顶栏（鸿蒙端）
  *
- * 形态照用户指的本机另一应用（SyncCalendar）：
- *   **应用图标 + 标题贴左上，右侧放通知/头像** —— 就是一个普通 Row，
- *   **自己不做任何状态栏留白**。
+ * 用户 2026-10-12 定的形态：
+ *   · **应用图标 + 「家书」标题**贴左上（下行小字显示当前模块）；
+ *   · 顶栏底色**白色**（与下面的个人信息卡同色，连成一片）；
+ *   · 顶栏**并入页面滚动流**，向上滑动时跟着内容一起滑走
+ *     （所以它本身不固定、也不自己处理状态栏留白）。
  *
- * 🔴 沉浸式靠两层配合，顶栏本身不参与：
- *   ① EntryAbility：系统栏涂成全透明（`#00000000`）；
- *   ② 根容器：`expandSafeArea` 让背景铺到状态栏区域。
- *   于是「顶栏上方那一块」（其实是根容器背景）与通知栏完全融为一体，
- *   而顶栏内容本身就在安全区内、位置不动 —— 不用算状态栏高度，也就不会算错。
+ * 🔴 与状态栏的关系：顶栏是白色，而系统栏被涂成全透明、透出的是**根容器底色**。
+ *    所以要让"通知栏与顶栏融为一体"，根容器在顶栏这一段必须是白色 ——
+ *    由 `Index.ets` 在顶部铺一层与顶栏同高的白色块来实现（页面滚动时它不动，
+ *    保证通知栏区域永远是白的，不会滚出内容）。
  *
- * ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在抽屉底部的账号区里，
- *    顶栏只留日常入口，再把管理入口顶出来会把顶栏挤满。
+ * ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在抽屉底部的账号区里。
  */
 
 import { FbColors, FbIcon, FbMetric } from '../common/Theme';
@@ -46,11 +46,15 @@ export struct FbTopBar {
         })
       }
 
-      // ---- 应用图标 + 标题（贴左，与抽屉里的品牌区同款，一眼认出是"家书"）----
+      // ---- 应用图标 ----
+      // ⚠️ 必须给描边：logo 是「米色底(74%) + 砖红图案(24%)」的实心方图，
+      //    放在白色/米色上时底板与背景几乎同色，只剩砖红图案发飘、看不清。
+      //    一层极浅的描边就能把底板"托"出来（本机范本 SyncCalendar 也给了描边）。
       Image($r('app.media.fb_logo'))
         .width(30)
         .height(30)
         .borderRadius(8)
+        .border({ width: 1, color: FbColors.line })
         .flexShrink(0)
 
       Column({ space: 0 }) {
@@ -59,11 +63,10 @@ export struct FbTopBar {
           .fontWeight(FontWeight.Bold)
           .fontColor(FbColors.ink)
           .maxLines(1)
-        // 副标题显示当前模块名 —— 这样"品牌 + 当前位置"一行说清，
-        // 也省掉原来那个只写模块名的孤零零标题
+        // 副标题显示当前模块名 —— "品牌 + 当前位置"一行说清
         Text(this.moduleName())
           .fontSize(FbMetric.fontTiny)
-          .fontColor(FbColors.faint)
+          .fontColor(FbColors.muted)
           .maxLines(1)
       }
       .alignItems(HorizontalAlign.Start)
@@ -111,17 +114,12 @@ export struct FbTopBar {
     }
     .width('100%')
     .height(FbMetric.topBarH)
-    // 左右留 14；上下尽量薄（顶栏默认贴状态栏下方，不留额外空隙）
     .padding({ left: 14, right: 10, top: 4, bottom: 4 })
     .alignItems(VerticalAlign.Center)
-    // 🔴 **不设 backgroundColor** —— 这是"融为一体"的最后一块拼图。
-    //    顶栏没设背景时，它透出的是根容器的底色（page_bg，宣纸米）；
-    //    而状态栏被涂成全透明、透出的也是根容器底色 ⇒ 两者**天然同色**。
-    //
-    //    ⚠️ 之前给顶栏设了 `FbColors.surface`（白色），于是变成
-    //    「状态栏（米色）+ 顶栏（白色）」上下拼接 —— 正是用户说的"没融为一体"。
-    //    本机范本 SyncCalendar 的 header() 也**没有 backgroundColor**，就是这个道理。
-    //    教训：想与系统栏同色，就别给紧邻元素单独上色，让它透出共同底色。
+    // 顶栏底色 = 白色（与下面的个人信息卡同色）
+    .backgroundColor(FbColors.surface)
+    // 底线：与下方内容（同是白色卡）之间给一条极浅的分隔，避免"两块白糊在一起"
+    .border({ width: { bottom: 1 }, color: FbColors.line2 })
   }
 
   private moduleName(): string {