<ion-content>
  <!-- 主要功能区域 -->
  <div class="main-functions">
    <!-- 梦境记录 -->
    <ion-button
      expand="block"
      size="large"
      color="tertiary"
      (click)="navigateTo('record')"
    >
      <ion-icon slot="start" name="create-outline"></ion-icon>
      记录梦境
    </ion-button>

    <!-- 梦境分析和梦境描绘 -->
    <div class="function-cards">
      <!-- 梦境分析 -->
      <ion-card
        (click)="navigateTo('dream/analysis')"
        style="background-image: url('assets/images/dream-analysis-bg.png'); background-size: cover; background-position: center;"
      >
        <ion-card-header>
          <ion-icon name="search-outline" size="large"></ion-icon>
          <ion-card-title>梦境分析</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          解读您的梦境，提供专业建议。
        </ion-card-content>
      </ion-card>

      <!-- 梦境描绘 -->
      <ion-card
        (click)="navigateTo('visualization')"
        style="background-image: url('assets/images/dream-visualization-bg.png'); background-size: cover; background-position: center;"
      >
        <ion-card-header>
          <ion-icon name="color-palette-outline" size="large"></ion-icon>
          <ion-card-title>梦境描绘</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          根据描述生成梦境的印象图片。
        </ion-card-content>
      </ion-card>
    </div>
  </div>

<ion-button (click)="goTestPage()">进入测试页</ion-button>

  <!-- 星星评分 -->
  <h1>星星评分</h1>
  <div class="dream-list">
    <!-- 使用 *ngFor 实现梦境循环 -->
    <div class="dream-item" *ngFor="let dream of recentDreams; trackBy: trackByDream">
      <h3>{{ dream.title }}</h3>
      <p>{{ dream.date | date: 'yyyy-MM-dd' }}</p>
      <ion-icon [name]="getEmotionIcon(dream.emotion)"></ion-icon>
      <app-edit-rating-star
        [score]="dream.rating || 0"
        [scoreMax]="5"
        (onScoreChange)="updateDreamRating(dream, $event)"
      ></app-edit-rating-star>
    </div>
  </div>

  <!-- 编辑标签 -->
  <h1>编辑标签</h1>
  <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>




  <!-- 父级页面：从子组件输出事件获取属性 -->
  <h1>父级页面：从子组件输出事件获取属性</h1>
  <ul>
    <li *ngFor="let tag of editTags">
      {{ tag }}
    </li>
  </ul>
</ion-content>