lifepartner/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>自律计时</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="timer-container">
    <!-- 计时器显示 -->
    <div class="timer-display">
      <h1>{{ currentTime }}</h1>
    </div>

    <!-- 活动类型选择 -->
    <div class="type-selector">
      <ion-segment [(ngModel)]="selectedType" *ngIf="!isTimerRunning">
        <ion-segment-button *ngFor="let type of activityTypes" [value]="type.id">
          <ion-icon [name]="type.icon"></ion-icon>
          <ion-label>{{ type.name }}</ion-label>
        </ion-segment-button>
      </ion-segment>
    </div>

    <!-- 控制按钮 -->
    <div class="timer-controls">
      <ion-button expand="block" (click)="startTimer()" *ngIf="!isTimerRunning" [disabled]="!selectedType">
        开始计时
      </ion-button>
      <ion-button expand="block" color="danger" (click)="stopTimer()" *ngIf="isTimerRunning">
        结束计时
      </ion-button>
    </div>
  </div>

  <!-- 历史记录 -->
  <div class="records-container">
    <h2 class="ion-padding">历史记录</h2>
    <ion-list>
      <ion-item *ngFor="let record of records">
        <ion-icon slot="start" [name]="getTypeIcon(record.type)"></ion-icon>
        <ion-label>
          <h2>{{ getTypeName(record.type) }}</h2>
          <p>{{ record.startTime | date:'yyyy-MM-dd HH:mm' }}</p>
          <p>时长: {{ formatDuration(record.duration) }}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>
</ion-content>