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

<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 class="custom-card">
  <!-- 饮食规划按钮 -->
  <ion-item button (click)="goToplans()" class="tight-button">
    <ion-icon slot="start" name="leaf-outline"></ion-icon>
    <ion-label>饮食规划</ion-label>
  </ion-item>
  
  <!-- 历史记录按钮 -->
  <ion-item button class="tight-button">
    <ion-icon slot="start" name="time"></ion-icon>
    <ion-label>历史记录</ion-label>
  </ion-item>

<!-- 收藏按钮 -->
  <ion-item button class="tight-button">
    <ion-icon slot="start" name="heart-outline"></ion-icon>
    <ion-label>收藏</ion-label>
  </ion-item>
</ion-card>


  

 <ion-card class="custom-card">

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

    <ion-item button class="tight-button">
      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
      <ion-label>帮助与反馈</ion-label>
    </ion-item>

  <!-- 设置按钮 -->

    <ion-item button class="tight-button">
      <ion-icon slot="start" name="settings-outline"></ion-icon>
      <ion-label>设置</ion-label>
    </ion-item>
</ion-card>
</ion-content>