workspace/soul-app/src/app/tab3/tab3.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      我的
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 用户登录状态 -->
  <ion-card>
    <!-- 未登录 -->
     @if(!currentUser?.id){
       <ion-card-header>
         <ion-card-title>未登录，请先登录</ion-card-title>
        </ion-card-header>
      }
        <!-- 已登录 -->
     @if(currentUser?.id){
      <ion-card-header>
        <div style="display: flex; align-items: center;">
          <img src="{{currentUser?.get('avatar')}}" alt="头像" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">
          <div>
            <ion-card-title>{{currentUser?.get("username")}} </ion-card-title>
            <ion-card-subtitle style="font-size: 16px;">性别: {{currentUser?.get("gender") || "-"}} 年龄: {{currentUser?.get("age") || "-"}}</ion-card-subtitle>
          </div>
        </div>
      </ion-card-header>
      }
      <ion-card-content>
      @if(!currentUser?.id){
        <div style="display: flex; justify-content: space-between;">
          <ion-button expand="block"  color="danger" (click)="signup()" style="flex: 1; margin-right: 5px;">注册</ion-button>
          <ion-button expand="block"  color="danger" (click)="login()" style="flex: 1; margin-left: 5px;">登录</ion-button>
        </div>
      }
     @if(currentUser?.id){
      <div style="display: flex; justify-content: space-between;">
      <ion-button expand="block"  color="danger" (click)="editUser()" style="flex: 1; margin-right: 5px;">编辑资料</ion-button>
      <ion-button expand="block"  color="danger" (click)="logout()" style="flex: 1; margin-right: 5px;">登出</ion-button>
      </div>
    }
    </ion-card-content>
  </ion-card>
  
  <!-- 功能列表 -->
  <ion-card>
  <ion-list>
    <!-- 个人信息设置 -->
    <ion-item>
      <ion-icon name="person-outline" slot="start"></ion-icon>
      <ion-label>个人信息</ion-label>
      <ion-icon name="chevron-forward-outline" slot="end" (click)="presentInfoModal()"></ion-icon>
    </ion-item>

    <!-- 我的收藏 -->
    <ion-item>
      <ion-icon name="heart-outline" slot="start"></ion-icon>
      <ion-label>我的收藏</ion-label>
      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>

    <!-- 消息通知 -->
    <ion-item>
      <ion-icon name="notifications-outline" slot="start"></ion-icon>
      <ion-label>消息通知</ion-label>
      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>

    <!-- 系统设置 -->
    <ion-item>
      <ion-icon name="settings-outline" slot="start"></ion-icon>
      <ion-label>系统设置</ion-label>
      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>

    <!-- 关于我们 -->
    <ion-item>
      <ion-icon name="information-circle-outline" slot="start"></ion-icon>
      <ion-label>关于我们</ion-label>
      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-list>
</ion-card>

</ion-content>