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

/**
 * 家书 FamilyBook · 顶栏（鸿蒙端）
 *
 * 形态照用户指的本机另一应用（SyncCalendar）：
 *   **应用图标 + 标题贴左上，右侧放通知/头像** —— 就是一个普通 Row，
 *   **自己不做任何状态栏留白**。
 *
 * 🔴 沉浸式靠两层配合，顶栏本身不参与：
 *   ① EntryAbility：系统栏涂成全透明（`#00000000`）；
 *   ② 根容器：`expandSafeArea` 让背景铺到状态栏区域。
 *   于是「顶栏上方那一块」（其实是根容器背景）与通知栏完全融为一体，
 *   而顶栏内容本身就在安全区内、位置不动 —— 不用算状态栏高度，也就不会算错。
 *
 * ⚠️ 顶栏**不放**「设置」—— 与 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() {
    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)
        .stateEffect(true)
        .onClick(() => {
          this.app.drawerOpen = true;
        })
      }

      // ---- 应用图标 + 标题（贴左，与抽屉里的品牌区同款，一眼认出是"家书"）----
      Image($r('app.media.fb_logo'))
        .width(30)
        .height(30)
        .borderRadius(8)
        .flexShrink(0)

      Column({ space: 0 }) {
        Text('家书')
          .fontSize(19)
          .fontWeight(FontWeight.Bold)
          .fontColor(FbColors.ink)
          .maxLines(1)
        // 副标题显示当前模块名 —— 这样"品牌 + 当前位置"一行说清，
        // 也省掉原来那个只写模块名的孤零零标题
        Text(this.moduleName())
          .fontSize(FbMetric.fontTiny)
          .fontColor(FbColors.faint)
          .maxLines(1)
      }
      .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)
        .stateEffect(true)
        .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)
    // 左右留 14；上下尽量薄（顶栏默认贴状态栏下方，不留额外空隙）
    .padding({ left: 14, right: 10, top: 4, bottom: 4 })
    .alignItems(VerticalAlign.Center)
    // 🔴 **不设 backgroundColor** —— 这是"融为一体"的最后一块拼图。
    //    顶栏没设背景时，它透出的是根容器的底色（page_bg，宣纸米）；
    //    而状态栏被涂成全透明、透出的也是根容器底色 ⇒ 两者**天然同色**。
    //
    //    ⚠️ 之前给顶栏设了 `FbColors.surface`（白色），于是变成
    //    「状态栏（米色）+ 顶栏（白色）」上下拼接 —— 正是用户说的"没融为一体"。
    //    本机范本 SyncCalendar 的 header() 也**没有 backgroundColor**，就是这个道理。
    //    教训：想与系统栏同色，就别给紧邻元素单独上色，让它透出共同底色。
  }

  private moduleName(): string {
    const m = fbModuleOf(this.app.activeModule);
    return m !== undefined ? m.name : '家书';
  }
}