lingzhuxing/myapp/src/app/tab5/tab5.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>用户中心</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 登录部分 -->
  <div *ngIf="!isLoggedIn">
    <ion-item>
      <ion-label position="floating">用户名</ion-label>
      <ion-input [(ngModel)]="username"></ion-input>
    </ion-item>
    
    <ion-item>
      <ion-label position="floating">密码</ion-label>
      <ion-input type="password" [(ngModel)]="password"></ion-input>
    </ion-item>
    
    <ion-button expand="block" (click)="login()">登录</ion-button>
    <ion-button expand="block" (click)="goToRegister()">注册</ion-button>
  </div>

  <!-- 已登录部分 -->
  <div *ngIf="isLoggedIn">
    <ion-card>
      <ion-card-header>
        <ion-card-title>欢迎, {{currentUser?.data?.username}}</ion-card-title>
        <ion-button slot="end" size="small" (click)="enterEditMode()" *ngIf="!editMode">编辑</ion-button>
      </ion-card-header>
      <ion-card-content *ngIf="!editMode">
        <p>用户ID: {{currentUser?.id}}</p>
        <p>注册时间: {{currentUser?.data?.createdAt | date}}</p>
        <p>邮箱: {{currentUser?.data?.email}}</p>
      </ion-card-content>

      <!-- 用户信息编辑表单 -->
      <ion-card-content *ngIf="editMode">
        <ion-item>
          <ion-label position="floating">用户名</ion-label>
          <ion-input [(ngModel)]="editedUsername"></ion-input>
        </ion-item>
        
        <ion-item>
          <ion-label position="floating">邮箱</ion-label>
          <ion-input [(ngModel)]="editedEmail"></ion-input>
        </ion-item>
        
        <ion-button expand="block" color="success" (click)="saveEdit()">保存</ion-button>
        <ion-button expand="block" (click)="cancelEdit()">取消</ion-button>
      </ion-card-content>
    </ion-card>
    
    <ion-button expand="block" color="danger" (click)="logout()">登出</ion-button>
  </div>
</ion-content>