ss202226701006/dream-app/src/app/tab1/tab1.page.html

<ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button>
          <ion-icon name="logo-android"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>好梦</ion-title>
      <ion-buttons slot="end">
        <ion-button (click)="openSettings()">
          <ion-icon name="settings"></ion-icon>
        </ion-button>
        <ion-button (click)="openProfile()">
          <ion-icon name="person-circle"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  
  <ion-content>
    <div class="sleep-status">
      <h2>{{ currentDate | date: 'yyyy-MM-dd HH:mm' }}</h2>
      <div class="sleep-quality">
        <ion-icon name="star" *ngFor="let star of getSleepQualityStars()"></ion-icon>
      </div>
      <p>昨晚睡眠时长：{{ sleepDuration }}</p>
      <p>入睡时间：{{ sleepTime }}</p>
      <p>醒来时间：{{ wakeTime }}</p>
    </div>
  
    <ion-button expand="full" (click)="recordDream()">
      记录梦境
    </ion-button>
    <p class="dream-prompt">随时记录你美好的梦境</p>
  
    <div class="dream-analysis">
      <h3>昨晚梦境</h3>
      <p>{{ lastDreamDescription }}</p>
      <ion-button (click)="analyzeDream()">解梦</ion-button>
      <div class="emotion-analysis">
        <p>情感分析：</p>
        <ion-icon name="happy" *ngIf="emotion === '快乐'"></ion-icon>
        <ion-icon name="sad" *ngIf="emotion === '悲伤'"></ion-icon>
        <ion-icon name="heart" *ngIf="emotion === '放松'"></ion-icon>
      </div>
    </div>
  
    <div class="dream-visualization">
      <h3>最近梦境图片</h3>
      <!-- <ion-slides>
        <ion-slide *ngFor="let image of dreamImages">
          <img [src]="image" />
        </ion-slide>
      </ion-slides> -->
      <ion-button (click)="viewAllDreams()">查看所有梦境</ion-button>
    </div>
  
    <div class="tips">
      <h3>今日改善建议</h3>
      <p>{{ improvementSuggestion }}</p>
      <h4>睡眠健康小贴士</h4>
      <ion-list>
        <ion-item *ngFor="let tip of sleepTips">
          {{ tip }}
        </ion-item>
      </ion-list>
    </div>
  </ion-content>