202226701011/FitMind-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>
      <p *ngIf="!currentUser?.id">您没有访问权限，请登录。</p>
    </ion-label>

    <!-- 登录、注册、编辑和退出登录按钮 -->
    <div class="user-actions" slot="end">
      <ion-button *ngIf="!currentUser?.id" (click)="signup()" fill="outline" color="primary">
        注册
      </ion-button>
      <ion-button *ngIf="!currentUser?.id" (click)="login()" fill="outline" color="primary">
        登录
      </ion-button>

      <ion-button *ngIf="currentUser?.id" (click)="goToEdit()" fill="clear" color="primary">
        编辑
      </ion-button>
      <ion-button *ngIf="currentUser?.id" (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-content>