s202226701040/smarteat-app/src/app/tab1/tab1.page.html

<ion-toolbar>
      <ion-searchbar 
        class="custom-searchbar" 
        placeholder="搜索食物、食谱、餐厅" 
        show-clear-button="focus" 
        (ionInput)="setSearchQuery($event.target.value || '')" 
        (ionClear)="searchQuery = ''" 
        (ionCancel)="searchQuery = ''" 
        (ionSearch)="search()">
      </ion-searchbar>
      <ion-buttons slot="end">
        <ion-button (click)="search()">搜索
          <ion-icon slot="icon-only" name="search"></ion-icon>
        </ion-button>
      </ion-buttons>
</ion-toolbar>

<ion-content [fullscreen]="true">
 <!-- 轮播图区域 -->
<div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
  <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
      <div class="slide" *ngFor="let image of images; let i = index">
          <img [src]="image" (click)="onImageClick(i)" style="width: 100%; height: auto;" />
          <!-- 显示图片对应的描述 -->
          <div class="description" [innerHTML]="descriptions[i]" [class.active]="i === currentSlide"></div>
      </div>
  </div>
  <button class="prev" (click)="prevSlide()">&#10094;</button>
  <button class="next" (click)="nextSlide()">&#10095;</button>

  <div class="dots">
      <span class="dot" *ngFor="let image of images; let i = index"
            [class.active]="i === currentSlide"
            (click)="goToSlide(i)"></span>
  </div>
</div>

<!-- 推荐健康建议 -->
<ion-card>
  <ion-card-header>
    <ion-card-title>
      <ion-icon slot="start" name="leaf-outline"></ion-icon>
      健康建议
    </ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <div>
     @if(currentUser?.id){
      @if(!responseMsg){
        <p>加载中...</p>
      }
      <p>{{ responseMsg }}</p>
     }
    </div>
    <!-- 如果用户未登录，显示登录按钮 -->
    @if(!currentUser?.id){
      <ion-button (click)="login()" fill="outline" color="primary">
        请登录后使用该功能
      </ion-button>
    }
  </ion-card-content>
</ion-card>


  <!-- 快速入口 -->
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-button>
          <ion-icon slot="start" name="document-outline"></ion-icon>
          健康目标管理
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-button>
          <ion-icon slot="start" name="storefront-outline"></ion-icon>
          外卖推荐
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 推荐食谱 -->
  <ion-card>
    <ion-card-header>
      <ion-card-title>
        <ion-icon slot="start" name="albums-outline"></ion-icon>
        今日推荐食谱
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-button (click)="viewRecommendedRecipes()">
        查看推荐食谱
      </ion-button>
      <p>{{ recipeMsg }}</p> <!-- 显示 AI 生成的推荐食谱 -->
    </ion-card-content>
  </ion-card>
</ion-content>