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

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

import { display, window } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';
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 { FbNavPage, FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages';
import { FbSettingsPage } from './settings/FbSettingsPage';

@Entry
@ComponentV2
struct Index {
  /** 全局状态（抽屉 / 当前模块 / 宽窄屏） */
  @Local app: FbAppState = fbAppState();
  /** 顶部安全区高度（状态栏），由窗口避让信息算出 */
  @Local topInset: number = 0;
  /** 底部安全区高度（手势条） */
  @Local bottomInset: number = 0;

  aboutToAppear(): void {
    this.measureInsets();
  }

  build() {
    Column() {
      // 顶部安全区：把内容推到状态栏下方（状态栏底色由 EntryAbility 设成页面底色）
      Column()
        .width('100%')
        .height(this.topInset)
        .backgroundColor(FbColors.surface)

      // 主骨架：抽屉 + 内容
      Column() {
        FbDrawerShell({ app: this.app }) {
          this.mainArea()
        }
      }
      .layoutWeight(1)
      .width('100%')

      // 底部安全区
      Column()
        .width('100%')
        .height(this.bottomInset)
        .backgroundColor(FbColors.surface)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(FbColors.paper)
  }

  /** 内容区：顶栏 + 当前模块页 */
  @Builder
  mainArea() {
    Column() {
      // ---- 顶栏（右侧插槽由各模块页填充；这里统一留空，
      //      因为「新建/搜索」这类操作已经放进各页自己的操作条里了）----
      FbTopBar({ app: this.app }) {
      }

      // ---- 模块页 ----
      Column() {
        this.moduleContent()
      }
      .layoutWeight(1)
      .width('100%')
    }
    .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 === 'nav') {
      FbNavPage({ 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)
    }
  }

  /**
   * 量安全区与宽窄屏。
   *
   * ⚠️ 状态栏高度**不写死数字**：不同机型（刘海、挖孔、无手势条）差很多，
   *    写死必然在某些机型上错位。这里按窗口避让信息取真实值。
   *
   * ⚠️ 窗口引用从 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));
    }
  }
}