v0.2.0 沉浸式 + 按手机重排版 + 去掉导航模块

三条用户反馈一次处理完。 ## ① 不够沉浸：首页距顶太远 + 底部白条根因是**重复避让 + 颜色断裂**，两处都是我自己的错： · 早先没开全屏时，系统已把窗口推到状态栏下方，我却又加了一个等高的白色 Column「让出安全区」⇒ 重复避让，实测顶部空出 156px； · 状态栏底色被设成「页面底色（宣纸米）」，而顶栏是白色 ⇒ 顶部出现「米色状态栏 + 白色顶栏」的拼接感，看着就是"没对齐"。改法： · EntryAbility 调 setWindowLayoutFullScreen(true)，窗口铺满整屏； · 状态栏底色一律取**顶栏底色**，底部手势条取**页面底色** —— 各自与紧邻元素同色； · 页面侧用 getWindowAvoidArea 自己让位（顶栏顶部内边距 = 状态栏高度，底色一直画到屏幕最上沿）； · 底部那条全宽白 Column 删掉。避让值走**异步** window.getLastWindow + windowSizeChange 监听（早先"Ability 取窗存 AppStorage 再同步读"的做法实测读不到值，恒为 0）；旋转/折叠后会自动重算。验证（像素级，非目测）：y=0..200 全为顶栏白（原先 y=0..121 是米色状态条），底部 y=2224..2444 全为纸色、白条消失。 ## ② 去掉「导航」模块用户原话：「导航是专门为电脑端开发的，都是网站，主要用在浏览器的主页，所以不需要」。 ⇒ 删掉 FbNavPage、FbNavLink 类型、FB_DEMO_NAV、fbGroupNav、图标分支与演示数据。 ⚠️ 模块清单自此与 Web 端 Module::LIST **有意不等**，注释里写明了别补回去。 ## ③ 排版按手机重做（不照搬电脑端）首页：删掉 hero 招牌整块（它只重复信息面板已有的信息），信息面板升为首块并改成**无卡片的页面头部**（问候/日期大字、天气右上、三数字贴底）—— 套白卡片会在首屏就切出一块白、压缩可用高度，也破坏沉浸感。卡片从「今天的日程」才开始用，页面层次反而更清楚。其余按手机重排：观影两列定格（原瀑布流）、任务按状态三段（原多列看板）、家谱圈层（原折线树）。README 里列了逐项取舍与理由。 ## 编译 hvigorw assembleHap --mode module -p product=default --no-daemon → BUILD SUCCESSFUL，0 error / 0 warning
2026-10-11 23:20:49 +08:00
parent 41e3aa3d95
commit 0548a45da1
11 changed files with 307 additions and 370 deletions
@@ -13,6 +13,7 @@

 import { display, window } from '@kit.ArkUI';
 import { hilog } from '@kit.PerformanceAnalysisKit';
+import { BusinessError } from '@kit.BasicServicesKit';
 import { FbColors, FbMetric } from '../common/Theme';
 import { FbAppState, FB_WIDE_BREAKPOINT, fbAppState } from '../common/Store';
 import { FbDrawerShell } from '../components/Drawer';
@@ -27,7 +28,7 @@ import { FbResourcesPage } from './resources/FbResourcesPage';
 import { FbDaysPage } from './days/FbDaysPage';
 import { FbLedgerPage } from './ledger/FbLedgerPage';
 import { FbBooksPage } from './books/FbBooksPage';
-import { FbNavPage, FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages';
+import { FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages';
 import { FbSettingsPage } from './settings/FbSettingsPage';

@Entry
@@ -35,37 +36,120 @@ import { FbSettingsPage } from './settings/FbSettingsPage';
 struct Index {
  /** 全局状态（抽屉 / 当前模块 / 宽窄屏） */
  @Local app: FbAppState = fbAppState();
-  /** 顶部安全区高度（状态栏），由窗口避让信息算出 */
-  @Local topInset: number = 0;
-  /** 底部安全区高度（手势条） */
-  @Local bottomInset: number = 0;
+  /**
+   * 状态栏高度（vp）。
+   *
+   * 🔴 为什么需要它：EntryAbility 调了 `setWindowLayoutFullScreen(true)`，窗口**铺满整屏**
+   *    （顶栏背景色一直画到屏幕最上沿，这才是"沉浸"）。
+   *    代价是内容会钻到状态栏底下，所以顶栏必须自己让出这一段高度。
+   *
+   * ⚠️ 曾经这里踩过一个错：那时没开全屏，系统**已经把窗口推到状态栏下方**了，
+   *    我却又加了一个等高的白色 Column「让出安全区」⇒ 重复避让 156px，
+   *    用户看到的就是「首页距离上面那么远」。开全屏之后这一段才真正必要。
+   */
+  @Local statusBarH: number = 0;
+  /** 底部手势条高度（vp）——同理，全屏后内容会压到手势条上，需要留出 */
+  @Local bottomBarH: number = 0;

  aboutToAppear(): void {
-    this.measureInsets();
+    this.measureScreen();
+    this.loadWindowInsets();
+  }
+
+  /**
+   * 量屏幕断点（同步，首帧就能用）。
+   */
+  private measureScreen(): void {
+    try {
+      const d: display.Display = display.getDefaultDisplaySync();
+      const density: number = d.densityPixels;
+      if (density <= 0) {
+        return;
+      }
+      // 宽窄屏：按窗口短边（短边旋转时不变，故比例接近 1:1 的设备横竖屏布局天然一致）
+      const shortSide: number = Math.min(d.width, d.height) / density;
+      this.app.wideLayout = shortSide >= FB_WIDE_BREAKPOINT;
+    } catch (err) {
+      hilog.warn(0x0000, 'FamilyBook', 'measureScreen failed: %{public}s', JSON.stringify(err));
+    }
+  }
+
+  /**
+   * 取窗口避让区（状态栏 / 手势条高度）。
+   *
+   * ⚠️ 这里走**异步** `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() {
-      // 顶部安全区：把内容推到状态栏下方（状态栏底色由 EntryAbility 设成页面底色）
-      Column()
-        .width('100%')
-        .height(this.topInset)
-        .backgroundColor(FbColors.surface)
-
-      // 主骨架：抽屉 + 内容
+      // 主骨架：抽屉 + 内容（内部已含状态栏留白，见 mainArea）
      Column() {
-        FbDrawerShell({ app: this.app }) {
+        FbDrawerShell({ app: this.app, statusBarH: this.statusBarH }) {
          this.mainArea()
        }
      }
      .layoutWeight(1)
      .width('100%')
-
-      // 底部安全区
-      Column()
-        .width('100%')
-        .height(this.bottomInset)
-        .backgroundColor(FbColors.surface)
    }
    .width('100%')
    .height('100%')
@@ -76,9 +160,8 @@ struct Index {
  @Builder
  mainArea() {
    Column() {
-      // ---- 顶栏（右侧插槽由各模块页填充；这里统一留空，
-      //      因为「新建/搜索」这类操作已经放进各页自己的操作条里了）----
-      FbTopBar({ app: this.app }) {
+      // ---- 顶栏：自身含状态栏留白（底色一直画到屏幕顶），所以这里不再单独加间隔 ----
+      FbTopBar({ app: this.app, statusBarH: this.statusBarH }) {
      }

      // ---- 模块页 ----
@@ -87,6 +170,16 @@ struct Index {
      }
      .layoutWeight(1)
      .width('100%')
+
+      // ---- 底部手势条留白：保证内容不被手势条压住 ----
+      // ⚠️ 用页面底色而不是白色 —— 之前用一个白 Column 顶在这儿，
+      //    用户看到的就是「下面也有一条白色的东西」。
+      if (this.bottomBarH > 0) {
+        Column()
+          .width('100%')
+          .height(this.bottomBarH)
+          .backgroundColor(FbColors.paper)
+      }
    }
    .width('100%')
    .height('100%')
@@ -117,8 +210,6 @@ struct Index {
      FbLedgerPage({ app: this.app })
    } else if (this.app.activeModule === 'books') {
      FbBooksPage({ app: this.app })
-    } else if (this.app.activeModule === 'nav') {
-      FbNavPage({ app: this.app })
    } else if (this.app.activeModule === 'notes') {
      FbNotesPage({ app: this.app })
    } else if (this.app.activeModule === '__notifications') {
@@ -141,43 +232,4 @@ struct Index {
      .alignItems(HorizontalAlign.Center)
    }
  }
-
-  /**
-   * 量安全区与宽窄屏。
-   *
-   * ⚠️ 状态栏高度**不写死数字**：不同机型（刘海、挖孔、无手势条）差很多，
-   *    写死必然在某些机型上错位。这里按窗口避让信息取真实值。
-   *
-   * ⚠️ 窗口引用从 EntryAbility 放进 AppStorage（`fbMainWindow`）后再取 ——
-   *    `window.getLastWindow()` 只有异步版，在 aboutToAppear 里 await 会把
-   *    首帧的布局延后一帧；而 `windowStage.getMainWindowSync()` 是同步的，
-   *    由 Ability 侧取一次存下来最省事。
-   */
-  private measureInsets(): void {
-    try {
-      const d: display.Display = display.getDefaultDisplaySync();
-      const density: number = d.densityPixels;
-      if (density <= 0) {
-        return;
-      }
-
-      // 宽窄屏：按窗口短边（短边旋转时不变，故比例接近 1:1 的设备横竖屏布局天然一致）
-      const shortSide: number = Math.min(d.width, d.height) / density;
-      this.app.wideLayout = shortSide >= FB_WIDE_BREAKPOINT;
-
-      // 安全区：取窗口的真实避让矩形
-      const win: window.Window | undefined =
-        AppStorage.get<window.Window>('fbMainWindow');
-      if (win !== undefined) {
-        const top: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
-        this.topInset = top.topRect.height / density;
-        const bottom: window.AvoidArea =
-          win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
-        this.bottomInset = bottom.bottomRect.height / density;
-      }
-    } catch (err) {
-      // 取不到就退到「只判宽窄屏、安全区按 0」—— 页面自带 12vp 顶部留白，不会贴边
-      hilog.warn(0x0000, 'FamilyBook', 'measureInsets failed: %{public}s', JSON.stringify(err));
-    }
-  }
-}
+}
@@ -73,99 +73,88 @@ export struct FbHomePage {
    Scroll() {
      Column({ space: 0 }) {

-        // ==================== ① hero ====================
-        Row({ space: 12 }) {
-          Image($r('app.media.fb_logo'))
-            .width(52)
-            .height(52)
-            .borderRadius(14)
-
-          Column({ space: 3 }) {
-            Text(this.app.session.familyTitle)
-              .fontSize(FbMetric.fontH1)
-              .fontWeight(FontWeight.Medium)
-              .fontColor(FbColors.ink)
-            Text(this.app.session.slogan)
-              .fontSize(FbMetric.fontTiny)
-              .fontColor(FbColors.muted)
-              .maxLines(2)
-              .textOverflow({ overflow: TextOverflow.Ellipsis })
-          }
-          .alignItems(HorizontalAlign.Start)
-          .layoutWeight(1)
-
-          // 两个快捷入口：我的资料 / 我的家谱
-          Row({ space: 8 }) {
-            this.heroAction($r('app.media.fb_ic_user'), 'people')
-            this.heroAction($r('app.media.fb_ic_kin'), 'kin')
-          }
-        }
-        .width('100%')
-        .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 16, bottom: 14 })
-        .alignItems(VerticalAlign.Center)
-
-        // ==================== ② 信息面板 ====================
-        Column({ space: 12 }) {
+        // ==================== ① 头部（问候 + 今天 + 天气）====================
+        // 🔴 手机端排版要点：这一块**不套白卡片**，直接铺在纸底上 ——
+        //    它是"页面头部"而不是"一张内容卡"。套上卡片会在第一屏就切出一块白，
+        //    既压缩了首屏可用高度，也破坏了沉浸感（用户反馈「不够沉浸」）。
+        //    卡片从下面的「今天的日程」才开始用，页面层次反而更清楚。
+        Column({ space: 10 }) {
+          // 第一行：问候 + 名字（左） / 温度（右）
          Row() {
-            Column({ space: 6 }) {
+            Column({ space: 5 }) {
              Row({ space: 4 }) {
                Text(this.hello())
-                  .fontSize(FbMetric.fontBody)
+                  .fontSize(22)
                  .fontWeight(FontWeight.Medium)
                  .fontColor(FbColors.ink)
                Text('，' + this.app.session.me.name)
-                  .fontSize(FbMetric.fontBody)
-                  .fontColor(FbColors.muted)
+                  .fontSize(22)
+                  .fontWeight(FontWeight.Medium)
+                  .fontColor(FbColors.ink)
              }
+              .alignItems(VerticalAlign.Bottom)
+
+              // 日期 · 星期 · 农历（一行排开，手机上一行读得完）
              Row({ space: 8 }) {
                Text(this.dateLine())
                  .fontSize(FbMetric.fontSmall)
-                  .fontColor(FbColors.ink)
+                  .fontColor(FbColors.muted)
                Text('八月廿二')
-                  .fontSize(FbMetric.fontTiny)
+                  .fontSize(FbMetric.fontSmall)
                  .fontColor(FbColors.faint)
              }
-              // 日子标记（节气 / 节日 / 生日）
-              Flex({ wrap: FlexWrap.Wrap }) {
-                ForEach(FB_DEMO_MARKS, (mk: string, idx: number) => {
-                  FbTag({ text: mk, tone: idx === 0 ? 'green' : 'brand' })
-                    .margin({ right: 6, top: 2 })
-                }, (mk: string, idx: number): string => 'mk_' + idx.toString() + '_' + mk)
-              }
-              .width('100%')
            }
            .alignItems(HorizontalAlign.Start)
            .layoutWeight(1)

-            // 天气靠右
-            Row({ space: 8 }) {
+            // 天气：靠右，温度大字 + 文案小字
+            Row({ space: 6 }) {
+              Image(this.weatherIcon())
+                .width(26)
+                .height(26)
+                .renderMode(ImageRenderMode.Template)
+                .fillColor(FbColors.brand2)
              Column({ space: 0 }) {
                Text(this.weather().temp.toString() + '°')
-                  .fontSize(26)
+                  .fontSize(24)
                  .fontWeight(FontWeight.Medium)
                  .fontColor(FbColors.ink)
-                Text(this.weather().text + ' · ' + this.weather().wind)
+                Text(this.weather().text)
                  .fontSize(FbMetric.fontTiny)
                  .fontColor(FbColors.muted)
                  .maxLines(1)
              }
              .alignItems(HorizontalAlign.End)
-
-              Image(this.weatherIcon())
-                .width(30)
-                .height(30)
-                .renderMode(ImageRenderMode.Template)
-                .fillColor(fbPalette('#B0763A').brand)
            }
            .alignItems(VerticalAlign.Center)
          }
          .width('100%')
          .alignItems(VerticalAlign.Top)

-          Divider().color(FbColors.line2)
+          // 第二行：天气地点 + 日子标记（节气 / 节日 / 生日）
+          Column({ space: 6 }) {
+            Text(this.weather().place + ' · ' + this.weather().wind)
+              .fontSize(FbMetric.fontTiny)
+              .fontColor(FbColors.faint)
+              .maxLines(1)
+              .width('100%')

+            Flex({ wrap: FlexWrap.Wrap }) {
+              ForEach(FB_DEMO_MARKS, (mk: string, idx: number) => {
+                FbTag({ text: mk, tone: idx === 0 ? 'green' : 'brand' })
+                  .margin({ right: 6, top: 2 })
+              }, (mk: string, idx: number): string => 'mk_' + idx.toString() + '_' + mk)
+            }
+            .width('100%')
+          }
+          .width('100%')
+          .alignItems(HorizontalAlign.Start)
+
+          // 第三行：三个数字（未来七天日程 / 待办 / 逾期）——
+          // 贴在头部末尾，作为"今天要不要操心的快速判断"
+          Divider().color(FbColors.line2).margin({ top: 2 })
          FbStatTriple({
-            labelA: '未来七天日程',
+            labelA: '未来七天',
            valueA: FB_DEMO_WEEK_STAT.events.toString(),
            labelB: '待办',
            valueB: FB_DEMO_WEEK_STAT.todos.toString(),
@@ -175,10 +164,13 @@ export struct FbHomePage {
          })
        }
        .width('100%')
-        .padding(FbMetric.cardPad)
-        .backgroundColor(FbColors.surface)
-        .borderRadius(FbMetric.radius)
-        .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad })
+        .padding({
+          left: FbMetric.pagePad,
+          right: FbMetric.pagePad,
+          top: 14,
+          bottom: 4
+        })
+        .alignItems(HorizontalAlign.Start)

        // ==================== ③ 今天的日程 + 近期任务 ====================
        Column({ space: 0 }) {
@@ -350,25 +342,6 @@ export struct FbHomePage {
    .align(Alignment.TopStart)
  }

-  /** hero 上的方形快捷入口 */
-  @Builder
-  heroAction(icon: Resource, target: string) {
-    Button({ type: ButtonType.ROUNDED_RECTANGLE }) {
-      Image(icon)
-        .width(20)
-        .height(20)
-        .renderMode(ImageRenderMode.Template)
-        .fillColor(FbColors.muted)
-    }
-    .width(40)
-    .height(40)
-    .backgroundColor(FbColors.inputBg)
-    .borderRadius(FbMetric.radiusS)
-    .onClick(() => {
-      this.app.switchModule(target);
-    })
-  }
-
  /** 一块模块入口卡（图标 + 模块名 + 一句关键数字） */
  @Builder
  moduleCard(c: FbModuleCard) {
@@ -425,7 +398,6 @@ export struct FbHomePage {
      case 'days': return $r('app.media.fb_ic_days');
      case 'ledger': return $r('app.media.fb_ic_ledger');
      case 'books': return $r('app.media.fb_ic_books');
-      case 'nav': return $r('app.media.fb_ic_nav');
      case 'notes': return $r('app.media.fb_ic_notes');
      default: return $r('app.media.fb_ic_home');
    }
@@ -1,145 +1,21 @@
 /**
- * 家书 FamilyBook · 导航 / 笔记 / 通知（鸿蒙端）
+ * 家书 FamilyBook · 笔记 / 通知（鸿蒙端）
 *
- * 这三个模块的 Web 页面（`templates/nav/index.php`、`notes/index.php`、
- * `notifications/index.php`）体量都不大，端上把它们放在同一个文件里 ——
- * 都是「一列条目 + 一个入口」的形态，拆成三个文件反而要重复一堆样板。
+ * 这两个模块的 Web 页面（`templates/notes/index.php`、`notifications/index.php`）
+ * 体量都不大，端上放在同一个文件里 —— 拆成两个文件反而要重复一堆样板。
 *
- * ⚠️ 三个 struct 各自独立，由 Index.ets 按当前模块选一个渲染。
+ * ⚠️ 两个 struct 各自独立，由 Index.ets 按当前模块选一个渲染。
+ *
+ * 🔴 这里**曾经还有第三个：个人导航** —— 已按用户要求删除（2026-10-11）：
+ *    导航本质是网站收藏夹，是给电脑浏览器主页用的，手机上每个网站都有 App，
+ *    没有使用场景。所以本文件现在只承载「体量小、形态相近」的页面。
 */

 import { FbColors, FbMetric } from '../../common/Theme';
 import { FbAppState, fbAppState } from '../../common/Store';
-import { FbGroup, FbNavLink, FbNoteItem, FbNotificationItem } from '../../model/Types';
-import {
-  FB_DEMO_NAV, FB_DEMO_NOTES, FB_DEMO_NOTIFICATIONS, fbGroupNav
-} from '../../model/DemoData';
-import { FbAvatar, FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets';
-
-// ============================================================
-// 导航
-// ============================================================
-
-@ComponentV2
-export struct FbNavPage {
-  @Param app: FbAppState = fbAppState();
-
-  /** 模块主题色（导航 = 蓝） */
-  private accent: string = '#3E7A9E';
-  private all: FbNavLink[] = FB_DEMO_NAV;
-
-  build() {
-    Column() {
-      Row({ space: 8 }) {
-        Column({ space: 2 }) {
-          Text('我的导航')
-            .fontSize(FbMetric.fontTitle)
-            .fontWeight(FontWeight.Medium)
-            .fontColor(FbColors.ink)
-          Text(this.all.length.toString() + ' 个站点 · 按分组排列')
-            .fontSize(FbMetric.fontTiny)
-            .fontColor(FbColors.faint)
-        }
-        .alignItems(HorizontalAlign.Start)
-        .layoutWeight(1)
-
-        FbPrimaryButton({
-          label: '添加',
-          bg: this.accent,
-          icon: $r('app.media.fb_ic_plus')
-        })
-      }
-      .width('100%')
-      .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 })
-      .alignItems(VerticalAlign.Center)
-
-      List({ space: 0 }) {
-        ForEach(this.groups(), (g: FbGroup<FbNavLink>) => {
-          ListItemGroup({ header: this.groupHeader(g.title, g.count + ' 个') }) {
-            ForEach(g.items, (n: FbNavLink) => {
-              ListItem() {
-                this.navRow(n)
-              }
-            }, (n: FbNavLink): string => 'nv_' + n.id.toString())
-          }
-        }, (g: FbGroup<FbNavLink>): string => 'ng_' + g.key)
-      }
-      .layoutWeight(1)
-      .width('100%')
-      .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 })
-      .scrollBar(BarState.Off)
-      .edgeEffect(EdgeEffect.Spring)
-    }
-    .width('100%')
-    .height('100%')
-    .backgroundColor(FbColors.paper)
-    .alignItems(HorizontalAlign.Start)
-  }
-
-  @Builder
-  navRow(n: FbNavLink) {
-    Row({ space: 12 }) {
-      // 首字母方块（Web 端用站点 favicon，端上先用首字，避免引网络图）
-      Text(n.title.substring(0, 1))
-        .width(38)
-        .height(38)
-        .borderRadius(FbMetric.radiusS)
-        .backgroundColor(this.accent + '1A')
-        .fontColor(this.accent)
-        .fontSize(16)
-        .fontWeight(FontWeight.Medium)
-        .textAlign(TextAlign.Center)
-
-      Column({ space: 3 }) {
-        Text(n.title)
-          .fontSize(FbMetric.fontBody)
-          .fontColor(FbColors.ink)
-          .maxLines(1)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-        Text(n.url)
-          .fontSize(10)
-          .fontColor(FbColors.faint)
-          .maxLines(1)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-      }
-      .alignItems(HorizontalAlign.Start)
-      .layoutWeight(1)
-
-      Image($r('app.media.fb_ic_forward'))
-        .width(13)
-        .height(13)
-        .renderMode(ImageRenderMode.Template)
-        .fillColor(FbColors.faint)
-    }
-    .width('100%')
-    .padding(14)
-    .backgroundColor(FbColors.surface)
-    .borderRadius(FbMetric.radius)
-    .margin({ bottom: 8 })
-    .alignItems(VerticalAlign.Center)
-  }
-
-  @Builder
-  groupHeader(title: string, count: string) {
-    Row({ space: 8 }) {
-      Text(title)
-        .fontSize(FbMetric.fontSmall)
-        .fontWeight(FontWeight.Medium)
-        .fontColor(FbColors.ink)
-      Text(count)
-        .fontSize(FbMetric.fontTiny)
-        .fontColor(FbColors.faint)
-      Blank()
-    }
-    .width('100%')
-    .padding({ left: 4, right: 4, top: 12, bottom: 8 })
-    .backgroundColor(FbColors.paper)
-  }
-
-  private groups(): FbGroup<FbNavLink>[] {
-    return fbGroupNav(this.all);
-  }
-}
+import { FbNoteItem, FbNotificationItem } from '../../model/Types';
+import { FB_DEMO_NOTES, FB_DEMO_NOTIFICATIONS } from '../../model/DemoData';
+import { FbAvatar, FbDot, FbEmptyBox, FbPrimaryButton, FbTag } from '../../components/Widgets';

 // ============================================================
 // 笔记
@@ -19,9 +19,9 @@ import { FbAvatar, FbDot, FbTag } from '../../components/Widgets';
 export struct FbSettingsPage {
  @Param app: FbAppState = fbAppState();

-  /** 抽屉里勾选着的模块 key */
+  /** 抽屉里勾选着的模块 key（与 FB_DEFAULT_NAV 一致，不含 nav） */
  @Local checked: string[] = ['home', 'people', 'movies', 'trips', 'calendar',
-    'resources', 'tasks', 'days', 'ledger', 'books', 'nav', 'notes'];
+    'resources', 'tasks', 'days', 'ledger', 'books', 'notes'];
  /** 当前展开的配色分组（'' = 都没展开） */
  @Local colorOpenKey: string = '';

@@ -335,7 +335,6 @@ export struct FbSettingsPage {
      case 'days': return $r('app.media.fb_ic_days');
      case 'ledger': return $r('app.media.fb_ic_ledger');
      case 'books': return $r('app.media.fb_ic_books');
-      case 'nav': return $r('app.media.fb_ic_nav');
      case 'notes': return $r('app.media.fb_ic_notes');
      default: return $r('app.media.fb_ic_dot');
    }