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();

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

  /**
   * 量屏幕断点（同步，首帧就能用）。
   *
   * ⚠️ 这里**只测宽窄屏**。状态栏/手势条高度**不再自己算** ——
   *    沉浸式改用「系统栏透明 + expandSafeArea」方案后，
   *    窗口布局不动、系统已把内容排在安全区内，自己再算一遍必然错（踩过）。
   */
  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));
    }
  }

  build() {
    Column() {
      FbDrawerShell({ app: this.app }) {
        this.mainArea()
      }
    }
    .width('100%')
    .height('100%')
    // 🔴 沉浸式的全部秘诀在这一句（照 SyncCalendar 的写法）：
    //    `expandSafeArea` 让**根容器的背景**延伸到状态栏/手势条区域，
    //    但**不移动任何子组件** —— 内容仍在安全区内正常排版，
    //    只有背景色一路铺到屏幕边缘。
    //    再配合 EntryAbility 里"系统栏全透明"，顶部通知栏透出的就是这层背景色，
    //    于是「上面那一块和通知栏完全融为一体」。
    //    ⇒ 不需要手算状态栏高度、不需要给顶栏加 padding，也就不会算错。
    .backgroundColor(FbColors.paper)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }

  /** 内容区：当前模块页（含顶栏 —— 顶栏由页面放进自己的滚动流，见 topBarSlot） */
  @Builder
  mainArea() {
    Column() {
      this.moduleContent()
    }
    .width('100%')
    .height('100%')
    .backgroundColor(FbColors.paper)
  }

  /**
   * 顶栏内容（交给各模块页放进**自己的滚动流最前面** ⇒ 跟着内容一起滚走）。
   *
   * 🔴 用户要求：「向上滑动的时候，标题栏也跟着向上滑动，不需要固定在当前位置」
   *    ⇒ 顶栏不能再像以前那样摆在滚动容器**外面**（那样它是固定的）。
   *    交给页面承载、页面把它放在 Scroll/List 的内容最前面，才会跟着滚。
   *
   * ⚠️ 状态栏由系统直接涂成白色（EntryAbility 里 `statusBarColor = surface`，
   *    与顶栏同色）。所以顶栏滚走之后，通知栏区域仍由系统保持白色，
   *    不会露出页面底色 —— 不需要在页面上再铺"白色压条"。
   */
  @Builder
  topBarSlot() {
    FbTopBar({ app: this.app }) {
    }
  }


  /** 按当前模块渲染对应页面（用 if/else 分发：ArkUI 的 build 里不允许 switch） */
  @Builder
  moduleContent() {
    if (this.app.activeModule === 'home') {
      FbHomePage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'people' || this.app.activeModule === 'kin') {
      FbPeoplePage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'movies') {
      FbMoviesPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'trips') {
      FbTripsPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'calendar') {
      FbCalendarPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'tasks') {
      FbTasksPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'resources') {
      FbResourcesPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'days') {
      FbDaysPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'ledger') {
      FbLedgerPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'books') {
      FbBooksPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === 'notes') {
      FbNotesPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === '__notifications') {
      FbNotificationsPage({ app: this.app, topBar: this.topBarSlot })
    } else if (this.app.activeModule === '__settings') {
      FbSettingsPage({ app: this.app, topBar: this.topBarSlot })
    } 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)
    }
  }
}