v0.1.0 界面框架：抽屉骨架 + 13 个模块页面

对应服务端 FamilyBook（家书）的鸿蒙客户端首版。本轮只做**界面框架**，数据全部是演示数据 —— 服务端尚无客户端接口，所有增删改只做入口与样式，不落任何数据。 ## 骨架左侧抽屉 + 右侧内容。抽屉两套形态由窗口短边决定（≥600vp 为宽屏）：宽屏常驻侧栏、窄屏滑出层。判据取「短边」而非「宽度」，因为短边在旋转时不变，比例接近 1:1 的设备横竖屏布局天然一致。 ## 模块（与 Web 端 Module::LIST 一一对应，key 即路由名）首页、家谱、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、导航、笔记；另有通知消息、个人设置两个附加页。 ## 与 Web 端保持一致的几处 · 模块清单唯一来源在 model/Modules.ets，加模块只改那一处； · 模块主题色三档由主色按 HSL 压明度算出，预设色板与 Web 端逐值一致； · 术语沿用 Web 端固定下来的口径（旅程 ⊃ 行程；观影的「影院」不单独占抽屉位，从模块内设置进）； · 页面结构照 Web 端的信息层次（首页信息面板 / 财务概览在账目之前 / 纪念日「即将到来」在顶 / 任务按状态而非按看板）。 ## 编译验证 hvigorw assembleHap --mode module -p product=default → BUILD SUCCESSFUL，0 error / 0 warning（含一次删 build 后的干净重建）过程中修掉的编译期问题： · Circle().fill() 是 API 26 才有的重载（compatibleSdk 是 24） → 换「方块 + 圆角」画圆，零版本风险； · setWindowBackgroundColor 对 phone/tablet 不可用 → 去掉（页面已铺满同色）； · window.getLastWindow() 只有异步版 → 由 Ability 侧同步取窗存 AppStorage； · 颜色类 @Param 声明成 string 导致传 Resource 报错 → 统一改 ResourceColor； · 页面在 pages/<模块>/ 下，公共件 import 相对路径要多退一级。（首轮编译 95 error / 18 warn，逐条定位到 5 类根因后归零。）
2026-10-11 22:07:48 +08:00
commit 41e3aa3d95
80 changed files with 6985 additions and 0 deletions
@@ -0,0 +1,122 @@
+/**
+ * 家书 FamilyBook · 顶栏（鸿蒙端）
+ *
+ * 对应 Web 端 `templates/layout.php` 的 `<header class="topbar">`，但按手机习惯调整：
+ *   · 左：抽屉按钮（窄屏）／模块名（宽屏，此时抽屉常驻，不需要按钮）
+ *   · 中：当前模块名 + 一句副标题（Web 端顶栏只放 logo + 导航，端上加副标题更清楚）
+ *   · 右：通知铃铛（带未读角标）+ 头像（点开是账号菜单）
+ *
+ * ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在头像菜单里，
+ *    顶栏只留日常入口，再把管理入口顶出来会把顶栏挤满。
+ */
+
+import { FbColors, FbIcon, FbMetric } from '../common/Theme';
+import { FbAppState, fbAppState } from '../common/Store';
+import { fbModuleOf } from '../model/Modules';
+import { FbAvatar } from './Widgets';
+
+@ComponentV2
+export struct FbTopBar {
+  @Param app: FbAppState = fbAppState();
+  /** 右侧额外操作（各模块页自己往里塞「新建」「搜索」等按钮） */
+  @BuilderParam actions: () => void;
+
+  build() {
+    // 顶部安全区由外层容器统一处理（见 Index.ets），这里只占视觉高度
+    Row({ space: 10 }) {
+      // ---- 左：窄屏显示抽屉按钮 ----
+      if (!this.app.wideLayout) {
+        Button({ type: ButtonType.Circle }) {
+          Image(FbIcon.ui('menu'))
+            .width(18)
+            .height(18)
+            .renderMode(ImageRenderMode.Template)
+            .fillColor(FbColors.ink)
+        }
+        .width(36)
+        .height(36)
+        .backgroundColor(Color.Transparent)
+        .onClick(() => {
+          this.app.drawerOpen = true;
+        })
+      } else {
+        Image($r('app.media.fb_logo'))
+          .width(28)
+          .height(28)
+          .borderRadius(8)
+      }
+
+      // ---- 中：当前模块名 ----
+      Column({ space: 0 }) {
+        Text(this.moduleName())
+          .fontSize(17)
+          .fontWeight(FontWeight.Medium)
+          .fontColor(FbColors.ink)
+        if (this.moduleDesc().length > 0) {
+          Text(this.moduleDesc())
+            .fontSize(FbMetric.fontTiny)
+            .fontColor(FbColors.faint)
+            .maxLines(1)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+        }
+      }
+      .alignItems(HorizontalAlign.Start)
+      .layoutWeight(1)
+
+      // ---- 右：各模块自己的操作 ----
+      this.actions()
+
+      // 通知铃铛（未读角标）
+      Stack({ alignContent: Alignment.TopEnd }) {
+        Button({ type: ButtonType.Circle }) {
+          Image(FbIcon.ui('bell'))
+            .width(18)
+            .height(18)
+            .renderMode(ImageRenderMode.Template)
+            .fillColor(FbColors.muted)
+        }
+        .width(36)
+        .height(36)
+        .backgroundColor(Color.Transparent)
+        .onClick(() => {
+          this.app.switchModule('__notifications');
+        })
+
+        if (this.app.unread > 0) {
+          Text(this.app.unread > 99 ? '99+' : this.app.unread.toString())
+            .fontSize(10)
+            .fontColor(Color.White)
+            .backgroundColor(FbColors.red)
+            .borderRadius(FbMetric.radiusPill)
+            .padding({ left: 5, right: 5, top: 1, bottom: 1 })
+            .margin({ top: 2, right: 0 })
+        }
+      }
+
+      // 头像（点开账号菜单）
+      FbAvatar({
+        name: this.app.session.me.name,
+        color: this.app.session.me.avatarColor,
+        dia: 32,
+        fontSizeVp: 14
+      })
+        .margin({ left: 2 })
+    }
+    .width('100%')
+    .height(FbMetric.topBarH)
+    .padding({ left: 8, right: 10 })
+    .alignItems(VerticalAlign.Center)
+    .backgroundColor(FbColors.surface)
+    .border({ width: { bottom: 1 }, color: FbColors.line2 })
+  }
+
+  private moduleName(): string {
+    const m = fbModuleOf(this.app.activeModule);
+    return m !== undefined ? m.name : '家书';
+  }
+
+  private moduleDesc(): string {
+    const m = fbModuleOf(this.app.activeModule);
+    return m !== undefined ? m.desc : '';
+  }
+}