ClassMG/entry/src/main/ets/pages/HomePage.ets

import { router } from '@kit.ArkUI';
import logManager, { LogCategory, LogEventType } from '../common/logtext';
import settingsService, { SettingsModel, TextResources } from '../common/SettingsService';

@Entry
@Component
struct HomePage {
  @State message: string = '智慧教室管理系统';
  @State classroomMonitorData: MonitorDataType = {
    roomId: '',
    temperature: 0,
    humidity: 0,
    occupancy: 0,
    status: ''
  };
  @State comprehensiveClassData: ClassDataType = {
    classId: '',
    subjectName: '',
    teacherName: '',
    duration: 0,
    studentCount: 0
  };
  
  // 从设置服务获取设置
  @State settings: SettingsModel = settingsService.getSettings();
  // 获取文本资源
  @State texts: TextResources = settingsService.getTextResources();

  aboutToAppear() {
    // 注册语言变化的回调
    settingsService.registerLanguageChangeCallback(() => {
      this.texts = settingsService.getTextResources();
      this.message = this.texts.title;
    });
    
    // 初始化文本
    this.message = this.texts.title;
  }

  build() {
    Column() {
      // 顶部导航栏
      Row() {
        Text(this.message).fontSize(22).fontColor(Color.White).fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .backgroundColor(this.settings.themeColor)
      .height(60)
      .justifyContent(FlexAlign.Center)
      .padding({ left: 20 })

      // 跑马灯公告
      Row() {
        Image($r('app.media.notification'))
          .width(20)
          .height(20)
          .margin({ right: 8 })

        Marquee({
          start: true,
          step: 6,  // 降低步长，使滚动更慢
          loop: -1,
          fromStart: true,
          src: "欢迎使用【智能教室管理系统】，本项目由【922213102班鸿蒙第一组】制作，相关服务正在完善，欢迎您的使用！！"
        })
          .width('90%')
          .height(30)
          .fontSize(14)
          .fontColor('#FF5A5A')
      }
      .width('100%')
      .padding(10)
      .backgroundColor('#FFF8F8')
      .margin({ top: 5, bottom: 5 })

      // 页面内容区
      Scroll() {
        Column() {
          // 教室监控卡片
          Card({ 
            title: this.texts.classroomMonitor, 
            data: this.classroomMonitorData,
            themeColor: this.settings.themeColor
          })
          .margin({ top: 16, bottom: 16 })


          // 综合上课数据卡片
          Card({ 
            title: this.texts.comprehensiveData, 
            data: this.comprehensiveClassData,
            themeColor: this.settings.themeColor
          })
        }
        .width('100%')
        .padding({ left: 16, right: 16 })
      }
      .layoutWeight(1)
      .scrollBar(BarState.Off)

      // 底部导航栏
      BottomNavigation({
        activePage: 'home',
        themeColor: this.settings.themeColor,
        texts: this.texts
      })
    }
    .width('100%')
    .height('100%')
  }

  // 页面生命周期方法
  onPageShow(): void {
    this.Log_Event('onPageShow');
  }

  onPageHide(): void {
    this.Log_Event('onPageHide');
  }

  onBackPress(): void {
    this.Log_Event('onBackPress');
  }

  aboutToDisappear(): void {
    this.Log_Event('aboutToDisappear');
  }

  // 日志记录方法
  public Log_Event(eventName: string): void {
    // 根据事件名称选择合适的日志事件类型
    switch (eventName) {
      case 'aboutToAppear':
        logManager.info(LogCategory.HOME, LogEventType.PAGE_APPEAR, 'HomePage');
        break;
      case 'aboutToDisappear':
        logManager.info(LogCategory.HOME, LogEventType.PAGE_DISAPPEAR, 'HomePage');
        break;
      case 'onPageShow':
        logManager.info(LogCategory.HOME, LogEventType.PAGE_SHOW, 'HomePage');
        break;
      case 'onPageHide':
        logManager.info(LogCategory.HOME, LogEventType.PAGE_HIDE, 'HomePage');
        break;
      case 'onBackPress':
        logManager.info(LogCategory.HOME, LogEventType.PAGE_BACK, 'HomePage');
        break;
      default:
        logManager.info(LogCategory.HOME, LogEventType.SYSTEM_INFO, `HomePage: ${eventName}`);
    }
  }
}

// Define proper interfaces
export interface MonitorDataType {
  roomId: string;
  temperature: number;
  humidity: number;
  occupancy: number;
  status: string;
}

export interface ClassDataType {
  classId: string;
  subjectName: string;
  teacherName: string;
  duration: number;
  studentCount: number;
}

// 卡片组件
@Component
struct Card {
  title: string = '';
  data: MonitorDataType | ClassDataType = {} as MonitorDataType;
  themeColor: string = '#409eff';

  build() {
    Column() {
      // 卡片标题
      Row() {
        Text(this.title)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333')
      }
      .width('100%')
      .padding({ top: 8, bottom: 16 })

      // 图表内容
      Column() {
        Text('图表内容1')
          .fontSize(16)
          .fontColor('#999')
          .height(150)
          .width('100%')
          .textAlign(TextAlign.Center)
      }
      .backgroundColor('#f5f5f5')
      .borderRadius(8)
      .width('100%')
    }
    .width('100%')
    .backgroundColor(Color.White)
    .borderRadius(12)
    .padding(16)
    .shadow({ radius: 6, color: '#eeeeee' })
  }
}

// 底部导航栏组件
@Component
struct BottomNavigation {
  @Prop activePage: string = 'home';
  @Prop themeColor: string;
  @Prop texts: TextResources = {} as TextResources;

  build() {
    Row() {
      // 首页按钮
      Column() {
        Image($r('app.media.home'))
          .width(24)
          .height(24)
          .fillColor(this.activePage === 'home' ? this.themeColor : '#999')
        Text(this.texts.home)
          .fontSize(12)
          .fontColor(this.activePage === 'home' ? this.themeColor : '#999')
          .margin({ top: 4 })
      }
      .layoutWeight(1)
      .onClick(() => {
        if (this.activePage !== 'home') {
          router.replaceUrl({
            url: 'pages/HomePage'
          });
        }
      })
      
      // 上课按钮
      Column() {
        Image($r('app.media.class'))
          .width(24)
          .height(24)
          .fillColor(this.activePage === 'class' ? this.themeColor : '#999')
        Text(this.texts.class)
          .fontSize(12)
          .fontColor(this.activePage === 'class' ? this.themeColor : '#999')
          .margin({ top: 4 })
      }
      .layoutWeight(1)
      .onClick(() => {
        if (this.activePage !== 'class') {
          router.replaceUrl({
            url: 'pages/ClassPage',
            params: {
              direction: 'right' // 从首页向右切换到上课页
            }
          });
        }
      })
      
      // 设置按钮
      Column() {
        Image($r('app.media.settings'))
          .width(24)
          .height(24)
          .fillColor(this.activePage === 'settings' ? this.themeColor : '#999')
        Text(this.texts.settings)
          .fontSize(12)
          .fontColor(this.activePage === 'settings' ? this.themeColor : '#999')
          .margin({ top: 4 })
      }
      .layoutWeight(1)
      .onClick(() => {
        if (this.activePage !== 'settings') {
          router.replaceUrl({
            url: 'pages/SettingsPage',
            params: {
              direction: 'right' // 从首页向右切换到设置页
            }
          });
        }
      })
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.White)
    .border({ color: '#eeeeee', width: 1, style: BorderStyle.Solid })
  }
}