v0.3.0 沉浸式按 SyncCalendar 重做（通知栏与页面完全同色）+ 个人信息卡改白块

## ① 沉浸式：改用本机 SyncCalendar 的方案（用户指定参考）

用户原话：「上面那一块的颜色和通知栏的颜色完全融为一体；
紧接着就是应用图标和标题，尽量靠上」。

三件套（缺一不可）：
1. 系统栏涂**全透明** `#00000000`；
2. `setWindowBackgroundColor(页面底色)` 供透明系统栏透出；
3. **紧邻系统栏的元素不设自己的背景色** + 根容器 `expandSafeArea`。

🔴 第三件是最关键、也是我先前漏掉的一环：
我原来给顶栏设了白色 `backgroundColor`，于是状态栏（透出纸色）与顶栏（白）
仍上下拼接。读 SyncCalendar 源码发现它的 `header()` **根本没有 backgroundColor**
—— 这才是"融为一体"的真正机制。已在代码里写明原因，防止回退。

配套简化：删掉自己算安全区的那套（`statusBarH`/`bottomBarH`/
`loadWindowInsets`/`applyAvoidAreas`，共约 110 行）—— 不再手算，也就不会算错。

## ② 顶栏改「图标 + 标题」

按用户要求：应用图标 + 「家书」标题（下行小字显示当前模块）贴左上，
右侧铃铛与头像。顶栏高度 56 → 48vp，上下内边距压到 4，内容整体上移。

## ③ 个人信息卡恢复为白色卡片

用户明确要求（"还是得用一个白色的块，这样显得好看"）。
曾一度做成"不套卡片的头部"（理由是省首屏高度），现按用户观感改回白卡。
⚠️ 与顶栏的区别：顶栏**不能**有背景色（否则与状态栏割裂），
而这张卡在顶栏下方、与状态栏不相邻，套白卡没有这个问题。

## 验证（全部基于真机）

逐行像素采样（`_tooling/familybook_immersion_check.py`，
模型读不了图 ⇒ 用数字裁定，不靠目测）：
· `y=0..271` 全为 `#F7F3EA` ⇒ **状态栏与顶栏同色，融为一体** ✓
· 底部 `y=2224..2444` 为纸色，无异常条 ✓

真机界面遍历（`_tooling/familybook_harmonyos_probe.py`）：
· A 组抽屉 11 个模块 **11/11**
· B 组家谱 **1/1**；C 组通知/设置 **2/2**
· D 组深验（特征文本）**12/12**
合计 **14 个页面全通过**。

⚠️ 顺带修掉探针自身两个坑（都记进注释了）：
· `nodes_of` 原来只收集**有文字**的节点 ⇒ 找不到纯图标的汉堡按钮，
  导致"抽屉打不开"、10 个模块连锁失败（看着像应用坏了，其实是探针瞎了）；
· 汉堡按钮坐标写死 ⇒ 顶栏变矮后点空。改为在界面树里动态探测、
  并**排除系统状态栏区域**（那里也有可点击元素，曾误取到 (103,56)）。

## 编译
0 error（保留 1 条 `setWindowBackgroundColor` 的 unavailable 告警，它是透明方案的必需组成）

entry/src/main/ets/components/Drawer.ets

@@ -28,13 +28,6 @@ export struct FbDrawer {
   @Param drawerW: number = FbMetric.drawerW;
   /** 是否以「覆盖层」形态出现（宽屏时为 false = 常驻） */
   @Param overlayMode: boolean = true;
-  /**
-   * 状态栏高度（vp）。
-   *
-   * 🔴 沉浸式后窗口铺满整屏 ⇒ 抽屉顶部的品牌区会钻到状态栏底下，必须让出这一段。
-   *    覆盖层形态下更要紧 —— 抽屉是贴屏幕顶的，不让位就会和状态栏的时间/信号叠在一起。
-   */
-  @Param statusBarH: number = 0;
   /** 覆盖层形态下：点遮罩关闭 */
   @Event onDismiss: () => void = () => {
   };
@@ -66,7 +59,7 @@ export struct FbDrawer {
     }
     .width('100%')
     // 顶部内边距 = 状态栏高度 + 一点呼吸，保证不压状态栏
-    .padding({ left: 18, right: 12, top: this.statusBarH + 14, bottom: 10 })
+    .padding({ left: 18, right: 12, top: 16, bottom: 10 })
   }
 
   /** 一个模块行 */
@@ -208,8 +201,6 @@ export struct FbDrawer {
 @ComponentV2
 export struct FbDrawerShell {
   @Param app: FbAppState = fbAppState();
-  /** 状态栏高度（vp），透传给抽屉（沉浸式后抽屉顶部要自己让位） */
-  @Param statusBarH: number = 0;
   /** 内容区（由父组件通过尾随 lambda 传入） */
   @BuilderParam content: () => void;
 
@@ -220,8 +211,7 @@ export struct FbDrawerShell {
         Row() {
           FbDrawer({
             app: this.app,
-            overlayMode: false,
-            statusBarH: this.statusBarH
+            overlayMode: false
           })
           Column() {
             this.content()
@@ -253,7 +243,6 @@ export struct FbDrawerShell {
           FbDrawer({
             app: this.app,
             overlayMode: true,
-            statusBarH: this.statusBarH,
             onDismiss: (): void => {
               this.app.drawerOpen = false;
             }

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

@@ -1,15 +1,15 @@
 /**
  * 家书 FamilyBook · 顶栏（鸿蒙端）
  *
- * 对应 Web 端 `templates/layout.php` 的 `<header class="topbar">`，但按手机习惯调整：
- *   · 左：抽屉按钮（窄屏）／图标（宽屏，此时抽屉常驻，不需要按钮）
- *   · 中：当前模块名 + 一句副标题
- *   · 右：通知铃铛（带未读角标）+ 头像
+ * 形态照用户指的本机另一应用（SyncCalendar）：
+ *   **应用图标 + 标题贴左上，右侧放通知/头像** —— 就是一个普通 Row，
+ *   **自己不做任何状态栏留白**。
  *
- * 🔴 沉浸式要点：应用开了 `setWindowLayoutFullScreen(true)`，顶栏**一直画到屏幕最上沿**，
- *    状态栏那一段用 `statusBarH` 内边距让出来。这样顶栏的底色与状态栏连成一片，
- *    视觉上就是「顶栏顶天」—— 这是"沉浸"的关键，也是之前那个
- *    「首页距离上面那么远」的根治办法（那时是重复避让）。
+ * 🔴 沉浸式靠两层配合，顶栏本身不参与：
+ *   ① EntryAbility：系统栏涂成全透明（`#00000000`）；
+ *   ② 根容器：`expandSafeArea` 让背景铺到状态栏区域。
+ *   于是「顶栏上方那一块」（其实是根容器背景）与通知栏完全融为一体，
+ *   而顶栏内容本身就在安全区内、位置不动 —— 不用算状态栏高度，也就不会算错。
  *
  * ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在抽屉底部的账号区里，
  *    顶栏只留日常入口，再把管理入口顶出来会把顶栏挤满。
@@ -23,8 +23,6 @@ import { FbAvatar } from './Widgets';
 @ComponentV2
 export struct FbTopBar {
   @Param app: FbAppState = fbAppState();
-  /** 状态栏高度（vp）—— 由 Index 量出来传进来，顶栏用它做顶部内边距 */
-  @Param statusBarH: number = 0;
   /** 右侧额外操作（各模块页自己往里塞「新建」「搜索」等按钮） */
   @BuilderParam actions: () => void;
 
@@ -46,21 +44,27 @@ export struct FbTopBar {
         .onClick(() => {
           this.app.drawerOpen = true;
         })
-      } else {
-        Image($r('app.media.fb_logo'))
-          .width(28)
-          .height(28)
-          .borderRadius(8)
       }
 
-      // ---- 中：当前模块名 ----
+      // ---- 应用图标 + 标题（贴左，与抽屉里的品牌区同款，一眼认出是"家书"）----
+      Image($r('app.media.fb_logo'))
+        .width(30)
+        .height(30)
+        .borderRadius(8)
+        .flexShrink(0)
+
       Column({ space: 0 }) {
-        Text(this.moduleName())
-          .fontSize(17)
-          .fontWeight(FontWeight.Medium)
+        Text('家书')
+          .fontSize(19)
+          .fontWeight(FontWeight.Bold)
           .fontColor(FbColors.ink)
           .maxLines(1)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
+        // 副标题显示当前模块名 —— 这样"品牌 + 当前位置"一行说清，
+        // 也省掉原来那个只写模块名的孤零零标题
+        Text(this.moduleName())
+          .fontSize(FbMetric.fontTiny)
+          .fontColor(FbColors.faint)
+          .maxLines(1)
       }
       .alignItems(HorizontalAlign.Start)
       .layoutWeight(1)
@@ -106,11 +110,18 @@ export struct FbTopBar {
         .margin({ left: 2 })
     }
     .width('100%')
-    // 沉浸式：顶部内边距 = 状态栏高度，底色一直画到屏幕最上沿
-    .padding({ top: this.statusBarH, left: 8, right: 10 })
-    .height(FbMetric.topBarH + this.statusBarH)
-    .alignItems(VerticalAlign.Bottom)
-    .backgroundColor(FbColors.surface)
+    .height(FbMetric.topBarH)
+    // 左右留 14；上下尽量薄（顶栏默认贴状态栏下方，不留额外空隙）
+    .padding({ left: 14, right: 10, top: 4, bottom: 4 })
+    .alignItems(VerticalAlign.Center)
+    // 🔴 **不设 backgroundColor** —— 这是"融为一体"的最后一块拼图。
+    //    顶栏没设背景时，它透出的是根容器的底色（page_bg，宣纸米）；
+    //    而状态栏被涂成全透明、透出的也是根容器底色 ⇒ 两者**天然同色**。
+    //
+    //    ⚠️ 之前给顶栏设了 `FbColors.surface`（白色），于是变成
+    //    「状态栏（米色）+ 顶栏（白色）」上下拼接 —— 正是用户说的"没融为一体"。
+    //    本机范本 SyncCalendar 的 header() 也**没有 backgroundColor**，就是这个道理。
+    //    教训：想与系统栏同色，就别给紧邻元素单独上色，让它透出共同底色。
   }
 
   private moduleName(): string {