20222670105/novel-app/src/app/person/person.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>个人中心</ion-title>
    <ion-buttons slot="end">
      <ion-button *ngIf="!isLoggedIn" (click)="goToRegister()">
        注册
      </ion-button>
      <ion-button *ngIf="!isLoggedIn" (click)="goToLogin()">
        登录
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <div class="background-pattern"></div>

  <!-- 用户信息卡片 -->
  <ion-card class="user-card">
    <div class="avatar-container">
      <ion-avatar>
        <img [src]="user.avatar" alt="avatar" />
      </ion-avatar>
    </div>
    <ion-card-header>
      <ion-card-title class="ion-text-center">{{user.username}}</ion-card-title>
    </ion-card-header>
  </ion-card>

  <!-- 创作中心 -->
  <ion-card class="feature-card" (click)="goToCreativeCenter()">
    <ion-item lines="none">
      <ion-icon name="create-outline" slot="start"></ion-icon>
      <ion-label>创作中心</ion-label>
      <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-card>

  <!-- 设置列表 -->
  <ion-card class="settings-card">
    <ion-list>
      <ion-item (click)="changeAvatar()">
        <ion-icon name="image-outline" slot="start"></ion-icon>
        <ion-label>更换头像</ion-label>
        <input type="file" #fileInput (change)="uploadAvatarFromFile($event)" accept="image/*" style="display: none">
      </ion-item>

      <ion-item (click)="changePassword()">
        <ion-icon name="key-outline" slot="start"></ion-icon>
        <ion-label>修改密码</ion-label>
      </ion-item>

      <ion-item (click)="switchAccount()">
        <ion-icon name="swap-horizontal-outline" slot="start"></ion-icon>
        <ion-label>切换账号</ion-label>
      </ion-item>

      <ion-item (click)="showLogoutConfirm()">
        <ion-icon name="log-out-outline" slot="start" color="danger"></ion-icon>
        <ion-label color="danger">注销账号</ion-label>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>