Bozzys_HMOS/entry/src/main/ets/pages/PageHome.ets

import { EventBus } from '../utils/EventBus'
import { Storage } from '../utils/Storage'
import { VMHome } from '../vm/VMHome'
import { TabHome } from './PageHomeComponents/TabHome'
import { TabJobs } from './PageHomeComponents/TabJobs'
import { TabTasks } from './PageHomeComponents/TabTasks'
import { TabSettings } from './PageHomeComponents/TabSettings'

@Entry
@Component
struct PageHome {
  @State vm: VMHome = new VMHome()

  aboutToAppear(): void {
    const ctx = this.getUIContext()
    const router = ctx.getRouter()
    EventBus.on("EVENT_LOGOUT", () => {
      // 先解绑事件，再处理退出登录操作
      EventBus.off("EVENT_LOGOUT")
      // 标记当前账号为未登录状态
      Storage.setLogin(false)
      router.clear()
      router.replaceUrl({ url: "pages/PageLogin" }).catch()
    })
  }

  aboutToDisappear(): void {
    EventBus.off("EVENT_LOGOUT")
  }

  build() {
    Tabs({ barPosition: BarPosition.End, index: this.vm.tabIndex }) {
      TabContent() {
        TabHome({ vm: this.vm })
      }
      .tabBar(this.TabBuilder({
        label: "首页",
        icon: $r('app.media.home'),
        select: this.vm.tabIndex == 0,
        num: 0
      }))
      .clip(false)

      TabContent() {
        TabJobs({ vm: this.vm })
      }
      .tabBar(this.TabBuilder({
        label: "作业",
        icon: $r('app.media.jobs'),
        select: this.vm.tabIndex == 1,
        num: this.vm.jobProgressCount
      }))
      .clip(false)

      TabContent() {
        TabTasks({ vm: this.vm })
      }
      .tabBar(this.TabBuilder({
        label: "任务",
        icon: $r('app.media.tasks'),
        select: this.vm.tabIndex == 2,
        num: this.vm.taskProgressCount
      }))
      .clip(false)

      TabContent() {
        TabSettings({ vm: this.vm })
      }
      .tabBar(this.TabBuilder({
        label: "设置",
        icon: $r('app.media.settings'),
        select: this.vm.tabIndex == 3,
        num: 0
      }))
      .clip(false)
    }
    .width('100%')
    .height('100%')
    .barMode(BarMode.Fixed)
    .divider({ color: "#EEEEEE", strokeWidth: 1 })
    .scrollable(false)
    .animationMode(AnimationMode.NO_ANIMATION)
    .onChange((index: number) => {
      // 该方法实现双向绑定，以处理非用户点击导致的导航栏变化
      this.vm.updateTabIndex(index)
    })
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

  }

  @Builder
  TabBuilder(tab: HomeTabItem) {
    Stack() {
      Column() {
        Image(tab.icon).width(20).height(20).fillColor(tab.select ? "#1E90FF" : "#333333")
        Text(tab.label)
          .fontSize(12)
          .fontColor(tab.select ? "#1E90FF" : "#333333")
          .margin({ top: 5 })
      }.width("100%").height("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)

      Text(tab.num > 99 ? "99+" : `${tab.num}`)
        .backgroundColor("#FF4500")
        .borderRadius("50%")
        .fontColor(Color.White)
        .fontSize(10)
        .padding({ left: 3, right: 3 })
        .position({ top: 2, left: "55%" })
        .constraintSize({ minWidth: 15, minHeight: 15 })
        .textAlign(TextAlign.Center)
        .visibility(tab.num <= 0 ? Visibility.Hidden : Visibility.Visible)
    }.width("100%").height(56)
  }
}

class HomeTabItem {
  public label: string = ""
  public icon: ResourceStr | undefined = undefined
  public select: boolean = false
  public num: number = 0
}