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/pages/Index.ets

@@ -36,28 +36,17 @@ import { FbSettingsPage } from './settings/FbSettingsPage';
 struct Index {
   /** 全局状态（抽屉 / 当前模块 / 宽窄屏） */
   @Local app: FbAppState = fbAppState();
-  /**
-   * 状态栏高度（vp）。
-   *
-   * 🔴 为什么需要它：EntryAbility 调了 `setWindowLayoutFullScreen(true)`，窗口**铺满整屏**
-   *    （顶栏背景色一直画到屏幕最上沿，这才是"沉浸"）。
-   *    代价是内容会钻到状态栏底下，所以顶栏必须自己让出这一段高度。
-   *
-   * ⚠️ 曾经这里踩过一个错：那时没开全屏，系统**已经把窗口推到状态栏下方**了，
-   *    我却又加了一个等高的白色 Column「让出安全区」⇒ 重复避让 156px，
-   *    用户看到的就是「首页距离上面那么远」。开全屏之后这一段才真正必要。
-   */
-  @Local statusBarH: number = 0;
-  /** 底部手势条高度（vp）——同理，全屏后内容会压到手势条上，需要留出 */
-  @Local bottomBarH: number = 0;
 
   aboutToAppear(): void {
     this.measureScreen();
-    this.loadWindowInsets();
   }
 
   /**
    * 量屏幕断点（同步，首帧就能用）。
+   *
+   * ⚠️ 这里**只测宽窄屏**。状态栏/手势条高度**不再自己算** ——
+   *    沉浸式改用「系统栏透明 + expandSafeArea」方案后，
+   *    窗口布局不动、系统已把内容排在安全区内，自己再算一遍必然错（踩过）。
    */
   private measureScreen(): void {
     try {
@@ -74,94 +63,32 @@ struct Index {
     }
   }
 
-  /**
-   * 取窗口避让区（状态栏 / 手势条高度）。
-   *
-   * ⚠️ 这里走**异步** `window.getLastWindow(ctx)`。
-   *    早先试过「EntryAbility 用 getMainWindowSync 取窗存进 AppStorage，页面侧同步读」——
-   *    实测**读不到**（Store 里存 Window 对象再取回来是不可靠的），结果 statusBarH 恒为 0。
-   *    代价是第一帧还没有避让值（顶栏按 0 让位），拿到后会自动重绘补上，
-   *    视觉上是"顶栏内容往下挪一点点"，可接受。
-   *
-   * ⚠️ 避让值随**旋转 / 折叠**变化，所以同时监听 windowSizeChange 重算。
-   */
-  private loadWindowInsets(): void {
-    try {
-      const ctx = this.getUIContext().getHostContext();
-      if (ctx === undefined) {
-        return;
-      }
-      window.getLastWindow(ctx)
-        .then((win: window.Window) => {
-          this.applyAvoidAreas(win);
-          // 尺寸变化（旋转、折叠展开/合上、分屏）后重算避让区
-          win.on('windowSizeChange', () => {
-            this.applyAvoidAreas(win);
-          });
-        })
-        .catch((err: BusinessError) => {
-          hilog.warn(0x0000, 'FamilyBook', 'getLastWindow failed: %{public}s',
-            JSON.stringify(err));
-        });
-    } catch (err) {
-      hilog.warn(0x0000, 'FamilyBook', 'loadWindowInsets failed: %{public}s',
-        JSON.stringify(err));
-    }
-  }
-
-  /** 从窗口读出避让区并换算成 vp（两个区各自 try —— 一个失败不该带下水另一个） */
-  private applyAvoidAreas(win: window.Window): void {
-    let density: number = 0;
-    try {
-      density = display.getDefaultDisplaySync().densityPixels;
-    } catch (err) {
-      hilog.warn(0x0000, 'FamilyBook', 'read density failed: %{public}s', JSON.stringify(err));
-      return;
-    }
-    if (density <= 0) {
-      return;
-    }
-    try {
-      const top: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
-      this.statusBarH = top.topRect.height / density;
-    } catch (err) {
-      hilog.warn(0x0000, 'FamilyBook', 'status bar inset failed: %{public}s',
-        JSON.stringify(err));
-    }
-    try {
-      const bottom: window.AvoidArea =
-        win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
-      this.bottomBarH = bottom.bottomRect.height / density;
-    } catch (err) {
-      hilog.warn(0x0000, 'FamilyBook', 'nav bar inset failed: %{public}s',
-        JSON.stringify(err));
-    }
-  }
-
   build() {
-    // 根容器铺满整屏；顶栏/内容各自让出状态栏与手势条 —— 这样顶栏的底色能一直
-    // 顶到屏幕最上沿，状态栏看起来就是「融合」在顶栏里的。
     Column() {
-      // 主骨架：抽屉 + 内容（内部已含状态栏留白，见 mainArea）
-      Column() {
-        FbDrawerShell({ app: this.app, statusBarH: this.statusBarH }) {
-          this.mainArea()
-        }
+      FbDrawerShell({ app: this.app }) {
+        this.mainArea()
       }
-      .layoutWeight(1)
-      .width('100%')
     }
     .width('100%')
     .height('100%')
+    // 🔴 沉浸式的全部秘诀在这一句（照 SyncCalendar 的写法）：
+    //    `expandSafeArea` 让**根容器的背景**延伸到状态栏/手势条区域，
+    //    但**不移动任何子组件** —— 内容仍在安全区内正常排版，
+    //    只有背景色一路铺到屏幕边缘。
+    //    再配合 EntryAbility 里"系统栏全透明"，顶部通知栏透出的就是这层背景色，
+    //    于是「上面那一块和通知栏完全融为一体」。
+    //    ⇒ 不需要手算状态栏高度、不需要给顶栏加 padding，也就不会算错。
     .backgroundColor(FbColors.paper)
+    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   }
 
   /** 内容区：顶栏 + 当前模块页 */
   @Builder
   mainArea() {
     Column() {
-      // ---- 顶栏：自身含状态栏留白（底色一直画到屏幕顶），所以这里不再单独加间隔 ----
-      FbTopBar({ app: this.app, statusBarH: this.statusBarH }) {
+      // 顶栏：不再需要自己做状态栏留白（背景已由 expandSafeArea 铺到顶，
+      // 内容本身就在安全区内）
+      FbTopBar({ app: this.app }) {
       }
 
       // ---- 模块页 ----
@@ -170,22 +97,13 @@ struct Index {
       }
       .layoutWeight(1)
       .width('100%')
-
-      // ---- 底部手势条留白：保证内容不被手势条压住 ----
-      // ⚠️ 用页面底色而不是白色 —— 之前用一个白 Column 顶在这儿，
-      //    用户看到的就是「下面也有一条白色的东西」。
-      if (this.bottomBarH > 0) {
-        Column()
-          .width('100%')
-          .height(this.bottomBarH)
-          .backgroundColor(FbColors.paper)
-      }
     }
     .width('100%')
     .height('100%')
     .backgroundColor(FbColors.paper)
   }
 
+
   /** 按当前模块渲染对应页面（用 if/else 分发：ArkUI 的 build 里不允许 switch） */
   @Builder
   moduleContent() {

entry/src/main/ets/pages/home/FbHomePage.ets

@@ -4,7 +4,7 @@
  * 对应 Web 端 `templates/home.php`。版面照搬它的三段：
  *   ① hero（家庭名 + 格言 + 我的资料/家谱两个快捷入口）
  *   ② 信息面板（问候 + 日期/星期/农历 + 日子标记 ｜ 右侧天气）
- *   ③ 今天的日程 + 近期任务（两块并排；窄屏上下堆叠）
+ *   ② 今天的日程 + 近期任务（两块并排；窄屏上下堆叠）
  *   ④ 「往年的今天」回忆条
  *   ⑤ 模块入口卡片（12 个模块的关键数字）
  *
@@ -73,11 +73,12 @@ export struct FbHomePage {
     Scroll() {
       Column({ space: 0 }) {
 
-        // ==================== ① 头部（问候 + 今天 + 天气）====================
-        // 🔴 手机端排版要点：这一块**不套白卡片**，直接铺在纸底上 ——
-        //    它是"页面头部"而不是"一张内容卡"。套上卡片会在第一屏就切出一块白，
-        //    既压缩了首屏可用高度，也破坏了沉浸感（用户反馈「不够沉浸」）。
-        //    卡片从下面的「今天的日程」才开始用，页面层次反而更清楚。
+        // ==================== ① 个人信息卡（问候 + 今天 + 天气）====================
+        // 🔴 用户 2026-10-12 定的：这一块**要白色卡片**（"这样显得好看"）。
+        //    ⚠️ 曾一度做成"不套卡片的页面头部"，理由是省首屏高度；
+        //    用户看了实机后仍要求套白卡 ⇒ **以用户观感为准**，别再改回去。
+        //    注意与顶栏的区别：顶栏**不能**有自己的背景色（否则与状态栏割裂），
+        //    而这张卡在顶栏**下面**、与状态栏不相邻，套白卡没有这个问题。
         Column({ space: 10 }) {
           // 第一行：问候 + 名字（左） / 温度（右）
           Row() {
@@ -151,8 +152,9 @@ export struct FbHomePage {
           .alignItems(HorizontalAlign.Start)
 
           // 第三行：三个数字（未来七天日程 / 待办 / 逾期）——
-          // 贴在头部末尾，作为"今天要不要操心的快速判断"
-          Divider().color(FbColors.line2).margin({ top: 2 })
+          // 贴在卡片底部，作为"今天要不要操心的快速判断"
+          // （卡片内用浅分隔线分开，视觉上比留白更"有层次"）
+          Divider().color(FbColors.line2)
           FbStatTriple({
             labelA: '未来七天',
             valueA: FB_DEMO_WEEK_STAT.events.toString(),
@@ -164,15 +166,18 @@ export struct FbHomePage {
           })
         }
         .width('100%')
-        .padding({
+        .padding(FbMetric.cardPad)
+        // 白色卡片（用户要求）：与下面「今天的日程」等块同一种卡片语言
+        .backgroundColor(FbColors.surface)
+        .borderRadius(FbMetric.radius)
+        .margin({
           left: FbMetric.pagePad,
           right: FbMetric.pagePad,
-          top: 14,
-          bottom: 4
+          top: 8
         })
         .alignItems(HorizontalAlign.Start)
 
-        // ==================== ③ 今天的日程 + 近期任务 ====================
+        // ==================== ② 今天的日程 + 近期任务 ====================
         Column({ space: 0 }) {
           FbSectionTitle({ title: '今天的日程', extra: this.todayEvents.length.toString() + ' 条' })
           Column({ space: 10 }) {
@@ -257,7 +262,7 @@ export struct FbHomePage {
         .width('100%')
         .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
 
-        // ==================== ④ 我的家人 ====================
+        // ==================== ③ 我的家人 ====================
         Column({ space: 0 }) {
           FbSectionTitle({ title: '我的家人', extra: '以我为中心 · 上下三代' })
           Flex({ wrap: FlexWrap.Wrap }) {
@@ -285,7 +290,7 @@ export struct FbHomePage {
         .width('100%')
         .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
 
-        // ==================== ⑤ 未来七天 ====================
+        // ==================== ④ 未来七天 ====================
         Column({ space: 0 }) {
           FbSectionTitle({ title: '未来七天', extra: this.soonEvents.length.toString() + ' 条' })
           Column({ space: 10 }) {
@@ -319,7 +324,7 @@ export struct FbHomePage {
         .width('100%')
         .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
 
-        // ==================== ⑥ 模块入口 ====================
+        // ==================== ⑤ 模块入口 ====================
         Column({ space: 0 }) {
           FbSectionTitle({ title: '全部模块', extra: this.cards.length.toString() + ' 个' })