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

<ion-header>
  <ion-toolbar>
    <ion-title>我的</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 用户信息 -->
  <ion-item lines="none" class="user-info">
    <ion-avatar slot="start">
      <!-- 显示头像，如果没有头像，显示默认头像 -->
      <img [src]="userData?.avatar || 'assets/img/user-avatar.jpg'" alt="User Avatar" />
    </ion-avatar>
    <ion-label>
      <h2>{{ userData?.name}}</h2>
      @if(!currentUser?.id){
        <p> 暂无信息，请登录。</p>
      }
    </ion-label>
    <!-- 登录、注册、编辑和退出登录按钮 -->
    <div class="user-actions" slot="end">
      @if(!currentUser?.id){
        <ion-button (click)="signup()" fill="outline" color="primary">
          注册
        </ion-button>
        <ion-button (click)="login()" fill="outline" color="primary">
          登录
        </ion-button>
      }
      @if(currentUser?.id){
        <ion-button (click)="goToEdit()" fill="clear" color="primary">
          编辑
        </ion-button>
        <ion-button (click)="logout()" fill="clear" color="danger">
          退出登录
        </ion-button>
      }
    </div>
  </ion-item>

  <!-- 我的饮食计划 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>我的饮食计划</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-label>今天的计划</ion-label>
          <ion-button expand="block" color="secondary">
            查看详情
          </ion-button>
        </ion-item>
      </ion-card-content>
    </ion-card>


  <!-- 我的历史记录 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>历史记录</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-label>最近三天记录</ion-label>
          <ion-button expand="block" color="tertiary">
            查看详情
          </ion-button>
        </ion-item>
      </ion-card-content>
    </ion-card>
  

 
    <ion-item button (click)="goToFavorites()">
      <ion-icon slot="start" name="heart-outline"></ion-icon>
      <ion-label>收藏</ion-label>
    </ion-item>
  

  <!-- 帮助与反馈按钮 -->

    <ion-item button (click)="goToHelp()">
      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
      <ion-label>帮助与反馈</ion-label>
    </ion-item>

  <!-- 设置按钮 -->

    <ion-item button (click)="goToSettings()">
      <ion-icon slot="start" name="settings-outline"></ion-icon>
      <ion-label>设置</ion-label>
    </ion-item>

</ion-content>