s202226701049/AIart-app/src/app/user-login/user-login.component.html

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar class="custom-toolbar">
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/tab5"></ion-back-button>
    </ion-buttons>
    <ion-title class="custom-title">
      {{ currentUser?.id ? '个人信息' : '用户登录注册' }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 主卡片 -->
  <ion-card>
    @if(!currentUser?.id) {
    <ion-card-header>
      <ion-card-title style="margin-left: 10px;">欢迎使用 AI艺速</ion-card-title>
      <ion-card-subtitle style="margin: 10px;">登录后体验更多功能</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <img class="login-image" src="assets/img/background.png" alt="登录注册">

      <ion-button expand="block" (click)="signup()">
        注册新账号
      </ion-button>
      <ion-button expand="block" class="outline-button" (click)="login()">
        登录已有账号
      </ion-button>

      <div class="social-login">
        <div class="divider">其他登录方式</div>
        <div class="social-icons">
          <img src="assets/img/login_icon.png" alt="社交登录">
          <img src="assets/img/login_icon2.png" alt="社交登录">
        </div>
        <a href="#" class="forgot-password">忘记密码？</a>
      </div>
    </ion-card-content>
    }

    @if(currentUser?.id) {
    <div class="card-header">
      <img [src]="currentUser?.get('avatar') || 'assets/img/doctor7.png'" alt="头像" class="avatar" />
      <div class="user-info">
        <ion-card-title>{{ currentUser?.get("username") }}</ion-card-title>
        <ion-card-subtitle>
          姓名: {{ currentUser?.get("realname") || "-" }} ·
          性别: {{ currentUser?.get("gender") || "-" }} ·
          年龄: {{ currentUser?.get("age") || "-" }}
        </ion-card-subtitle>
      </div>
    </div>

    <ion-card-content>
      <ion-button expand="block" (click)="editUser()">
        <ion-icon name="create-outline" slot="start"></ion-icon>
        编辑个人资料
      </ion-button>
      <ion-button expand="block" class="outline-button" (click)="logout()">
        <ion-icon name="log-out-outline" slot="start"></ion-icon>
        退出登录
      </ion-button>
    </ion-card-content>
    }
  </ion-card>

  @if(currentUser?.id) {
  <ion-card class="memo-card">
    <div class="memo-header" style="display: flex; align-items: center;">
      <ion-icon name="bookmark-outline" style="margin-bottom: 12px;"></ion-icon>
      <h2 class="memo-title">兴趣跟踪表</h2>
    </div>

    <p class="memo-description">
      请写下您感兴趣的学习方向或者心动的科普知识，便于您下次查找
    </p>

    <div class="tag-editor">
      <edit-tag (onTagAdd)="onTagAdd($event)"></edit-tag>
    </div>

    @if(editTags.length > 0) {
    <div class="favorites-section">
      <div class="section-header" style="display: flex; align-items: center;">
        <h2 class="section-title">收藏夹</h2>
      </div>

      <div class="tag-list">
        @for(tag of editTags; track tag) {
        <div class="tag-item">
          <span class="tag-text">{{ tag }}</span>
          <ion-icon name="close-circle" class="delete-icon" (click)="deleteTag(tag)"></ion-icon>
        </div>
        }
      </div>
    </div>
    }
  </ion-card>
  }
</ion-content>