FamilyBook_harmonyos/entry/src/main/ets/pages/Index.ets

/**
 * 家书 FamilyBook · 主界面（鸿蒙端）
 *
 * 骨架：**左侧抽屉 + 右侧内容**，两套形态由窗口短边决定（见 FbAppState.wideLayout）：
 *   · 宽屏（平板 / 折叠屏展开 / 横屏手机）：抽屉常驻，内容区并排；
 *   · 窄屏：内容铺满，抽屉从左侧滑出（点遮罩或选中模块即收起）。
 *
 * 内容区 = 顶栏 + 当前模块页。此处只做**模块分发**，各模块的版面在各自文件里。
 *
 * ⚠️ 当前全部为**演示数据 / 静态界面**：还没有接口，所有「新建 / 编辑 / 删除」
 *    只做入口与样式，不落任何数据。接口到位后只要替换各页面里的数据源即可。
 */

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';
import { FbTopBar } from '../components/TopBar';
import { FbHomePage } from './home/FbHomePage';
import { FbMoviesPage } from './movies/FbMoviesPage';
import { FbTripsPage } from './trips/FbTripsPage';
import { FbCalendarPage } from './calendar/FbCalendarPage';
import { FbTasksPage } from './tasks/FbTasksPage';
import { FbPeoplePage } from './people/FbPeoplePage';
import { FbResourcesPage } from './resources/FbResourcesPage';
import { FbDaysPage } from './days/FbDaysPage';
import { FbLedgerPage } from './ledger/FbLedgerPage';
import { FbBooksPage } from './books/FbBooksPage';
import { FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages';
import { FbSettingsPage } from './settings/FbSettingsPage';

@Entry
@ComponentV2
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();
  }

  /**
   * 量屏幕断点（同步，首帧就能用）。
   */
  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() {
      // 主骨架：抽屉 + 内容（内部已含状态栏留白，见 mainArea）
      Column() {
        FbDrawerShell({ app: this.app, statusBarH: this.statusBarH }) {
          this.mainArea()
        }
      }
      .layoutWeight(1)
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(FbColors.paper)
  }

  /** 内容区：顶栏 + 当前模块页 */
  @Builder
  mainArea() {
    Column() {
      // ---- 顶栏：自身含状态栏留白（底色一直画到屏幕顶），所以这里不再单独加间隔 ----
      FbTopBar({ app: this.app, statusBarH: this.statusBarH }) {
      }

      // ---- 模块页 ----
      Column() {
        this.moduleContent()
      }
      .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() {
    if (this.app.activeModule === 'home') {
      FbHomePage({ app: this.app }) {
      }
    } else if (this.app.activeModule === 'people' || this.app.activeModule === 'kin') {
      FbPeoplePage({ app: this.app })
    } else if (this.app.activeModule === 'movies') {
      FbMoviesPage({ app: this.app })
    } else if (this.app.activeModule === 'trips') {
      FbTripsPage({ app: this.app })
    } else if (this.app.activeModule === 'calendar') {
      FbCalendarPage({ app: this.app })
    } else if (this.app.activeModule === 'tasks') {
      FbTasksPage({ app: this.app })
    } else if (this.app.activeModule === 'resources') {
      FbResourcesPage({ app: this.app })
    } else if (this.app.activeModule === 'days') {
      FbDaysPage({ app: this.app })
    } else if (this.app.activeModule === 'ledger') {
      FbLedgerPage({ app: this.app })
    } else if (this.app.activeModule === 'books') {
      FbBooksPage({ app: this.app })
    } else if (this.app.activeModule === 'notes') {
      FbNotesPage({ app: this.app })
    } else if (this.app.activeModule === '__notifications') {
      FbNotificationsPage({ app: this.app })
    } else if (this.app.activeModule === '__settings') {
      FbSettingsPage({ app: this.app })
    } else {
      // 兜底：模块还没做页面时给一句提示，而不是白屏
      Column({ space: 8 }) {
        Text('这个模块还没有页面')
          .fontSize(FbMetric.fontBody)
          .fontColor(FbColors.muted)
        Text('当前模块：' + this.app.activeModule)
          .fontSize(FbMetric.fontTiny)
          .fontColor(FbColors.faint)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
    }
  }
}