s202226701001/tailor-app/myapp/src/app/me/me.page.html

<ion-content class="my-page-content">
  <!-- 添加空白区域 -->
  <div class="header-space"></div>

  <!-- 用户信息区域 -->
    <ion-avatar>
      <img src="assets/avatar.png" alt="用户头像"/>
    </ion-avatar>
    <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>您没有访问权限，请登录。</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)="logout()" fill="clear" color="danger">
              退出登录
            </ion-button>
          }
        </div>
        </ion-item>

  <ion-list>
    <!-- 我的定制 -->
    <ion-item button (click)="customizations()" class="my-item">
      <ion-icon slot="start" name="shirt-outline"></ion-icon>
      <ion-label>我的定制</ion-label>
    </ion-item>

    <!-- 我的收藏 -->
    <ion-item button (click)="favorites()" class="my-item">
      <ion-icon slot="start" name="heart-outline"></ion-icon>
      <ion-label>我的收藏</ion-label>
    </ion-item>

    <!-- 会员服务 -->
    <ion-item button (click)="AIchat()" class="my-item">
      <ion-icon slot="start" name="star-outline"></ion-icon>
      <ion-label>AI服务</ion-label>
    </ion-item>

    <!-- 系统设置 -->
    <ion-item button (click)="systemsettings()" class="my-item">
      <ion-icon slot="start" name="settings-outline"></ion-icon>
      <ion-label>系统设置</ion-label>
    </ion-item>

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

    <!-- 登出 -->
    <ion-item button (click)="logout()" class="my-item">
      <ion-icon slot="start" name="log-out-outline"></ion-icon>
      <ion-label>登出</ion-label>
    </ion-item>
  </ion-list>
</ion-content>