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

/**
 * 家书 FamilyBook · 顶栏（鸿蒙端）
 *
 * 用户 2026-10-12 定的形态：
 *   · **应用图标 + 「家书」标题**贴左上（下行小字显示当前模块）；
 *   · **点图标 = 开抽屉**（用户要求：汉堡按钮去掉后，把这个功能挪到图标上）；
 *   · 顶栏底色**白色**（与下面的个人信息卡同色，连成一片）；
 *   · 顶栏**并入页面滚动流**，向上滑动时跟着内容一起滑走。
 *
 * 🔴 开抽屉的三个入口：
 *   ① **点顶栏图标**（本组件）—— 用户新增要求；
 *   ② **应用内水平滑动**（向右滑→左边出、向左滑→右边出，见 `Drawer.ets`）；
 *   ③ 底部**悬浮快捷栏**（首页几个常用模块直达，见 `Pages` 里的 FloatDock）。
 *   ⚠️ 屏幕边缘是**系统手势区**，应用收不到，所以不做边缘滑动。
 *
 * ⚠️ 顶栏**不放**「设置」—— 与 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() {
    // 🔴 顶栏横向镜像 —— 「质感握姿」（用户 2026-10-16 第 4 条）：
    //    左手握时家书图标在**左**，右手握时它跑到**右**，方便单手点它开抽屉。
    //    ⚠️ 用 `Flex(direction: RowReverse)` 整体镜像，而不是逐个改 padding/margin ——
    //      后者要同时动 4 处、还会把"标题靠左"这类布局搞乱。
    //    ⚠️ 但**图标不能真的反着画**（`RowReverse` 只改主轴顺序、不翻转图形本身），
    //      所以镜像后位置对、图形仍正。
    Flex({
      direction: this.app.drawerSide === 'right' ? FlexDirection.RowReverse : FlexDirection.Row,
      alignItems: ItemAlign.Center
    }) {
      // ---- 应用图标（**点它开抽屉**；左右握姿时自动换边）----
      // ⚠️ 必须给描边：logo 是「米色底(74%) + 砖红图案(24%)」的实心方图，
      //    放在白色/米色上时底板与背景几乎同色，只剩砖红图案发飘、看不清。
      //    一层极浅的描边就能把底板"托"出来（本机范本 SyncCalendar 也给了描边）。
      //
      // 🔴 点击事件直接挂在 Image 上，**不套 Button** ——
      //    Button 自带最小尺寸与内边距，会把图标挤离边线（用户要"图标靠边"）。
      Image($r('app.media.fb_logo'))
        .width(30)
        .height(30)
        .borderRadius(8)
        .border({ width: 1, color: FbColors.line })
        .flexShrink(0)
        .onClick(() => {
          // 点图标 ⇒ 开抽屉（方向由**握姿**定，见 common/FbGrip.ets）
          this.app.drawerOpen = true;
        })

      Column({ space: 0 }) {
        Text('家书')
          .fontSize(19)
          .fontWeight(FontWeight.Bold)
          .fontColor(FbColors.ink)
          .maxLines(1)
        // 副标题显示当前模块名 —— "品牌 + 当前位置"一行说清
        Text(this.moduleName())
          .fontSize(FbMetric.fontTiny)
          .fontColor(FbColors.muted)
          .maxLines(1)
      }
      .alignItems(HorizontalAlign.Start)
      .margin({ left: 10, right: 10 })
      .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
      })
    }
    .width('100%')
    // 🔴 高度 = **状态栏高度 + 顶栏本身高度**（用户 2026-10-13 要"全沉浸"）。
    //
    //    为什么必须自己加这一段：
    //      应用开了 `setWindowLayoutFullScreen(true)`（见 EntryAbility）——
    //      窗口**不再为状态栏让位**，内容会真的画到状态栏底下。
    //      ⇒ 顶栏若不自己让出这一截，"家书"标题会被时间/信号图标压住。
    //
    //    ⚠️ 让位用 **padding.top**（不是 margin）：这样**白底会一并覆盖状态栏区域**，
    //      静止时看起来通知栏与顶栏是一整块；而向上滑动时，
    //      这一整块（含白底）随内容滚走，下面的内容直接顶到屏幕最上沿 ——
    //      这就是用户要的"内容从手机边缘滑上去"的观感。
    //    ⚠️ `statusBarH` 是 `@Trace` 的，量出来（异步）后顶栏会**自动重排**；
    //      量不到时为 0，标题贴到最上面（仍可读），不会把内容推到屏幕中间。
    .height(FbMetric.topBarH + this.app.statusBarH)
    // 左内边距=pagePad（与下面各区块的左边线对齐）；右侧 10（图标可略贴边）
    .padding({
      left: FbMetric.pagePad,
      right: 10,
      top: this.app.statusBarH + 4,
      bottom: 4
    })
    // 顶栏底色 = 白色（与下面的个人信息卡同色）。
    // ⚠️ 它会覆盖上面 `padding.top` 让出来的状态栏区域 —— 这是**有意为之**：
    //    静止时通知栏与顶栏连成一整块白（用户 2026-10-12 定的"融为一体"），
    //    滚动时再一起滑走。**不要**改成"顶栏不设背景色、透出页面底色"，
    //    那样静止时会变成"米色通知栏 + 白色顶栏"上下拼接（踩过这个坑）。
    .backgroundColor(FbColors.surface)
    // 底线：与下方内容（同是白色卡）之间给一条极浅的分隔，避免"两块白糊在一起"
    .border({ width: { bottom: 1 }, color: FbColors.line2 })
  }

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