Ai/myapp/src/app/tab5/mine/mine.page.html

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

<ion-content [fullscreen]="true" class="ion-padding">
  <div class="login-container">
    @if(currentUser?.id) {
      <!-- 已登录状态 -->
      <div class="user-card">
        <ion-avatar class="user-avatar">
          <img [src]="currentUser?.get('avatar') || 'assets/icon/default-avatar.png'" />
        </ion-avatar>
        <h2 class="username">{{ currentUser?.get("username") || "未设置用户名" }}</h2>
        <ion-button expand="block" color="danger" (click)="logout()">
          <ion-icon slot="start" name="log-out-outline"></ion-icon>
          退出登录
        </ion-button>
      </div>
    } @else {
      <!-- 未登录状态 -->
      <div class="login-card">
        <ion-avatar class="login-avatar">
          <img src="assets/icon/default-avatar.png" />
        </ion-avatar>
        <h2 class="welcome-text">欢迎登录</h2>
        
        <ion-button expand="block" (click)="login()">
          <ion-icon slot="start" name="log-in-outline"></ion-icon>
          使用测试账号登录 (Clym/1234)
        </ion-button>
        
        <div class="divider">
          <span class="divider-line"></span>
          <span class="divider-text">或</span>
          <span class="divider-line"></span>
        </div>
        
        <ion-button expand="block" fill="outline">
          <ion-icon slot="start" name="logo-google"></ion-icon>
          Google登录
        </ion-button>
        
        <ion-button expand="block" fill="outline">
          <ion-icon slot="start" name="logo-wechat"></ion-icon>
          微信登录
        </ion-button>
      </div>
    }
  </div>
</ion-content>