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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/character"></ion-back-button>
    </ion-buttons>
    <ion-title>角色管理</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 空状态显示 -->
  <div class="empty-state" *ngIf="characters.length === 0">
    <ion-icon name="people-outline" class="empty-icon"></ion-icon>
    <h2>暂无角色</h2>
    <p>点击下方按钮创建新角色</p>
    <ion-button 
      expand="block" 
      style="--background: #ff69b4"
      (click)="createNewCharacter()">
      创建角色
    </ion-button>
  </div>

  <!-- 角色列表 -->
  <ion-grid *ngIf="characters.length > 0">
    <ion-row>
      <ion-col size="6" size-md="4" size-lg="3" *ngFor="let character of characters">
        <ion-card class="character-card" (click)="navigateToDetail(character.id)">
          <img [src]="character.avatar" [alt]="character.name">
          <ion-card-header>
            <ion-card-title>{{ character.name }}</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 底部创建按钮 -->
  <div class="bottom-button" *ngIf="characters.length > 0">
    <ion-button 
      expand="block" 
      style="--background: #ff69b4" 
      (click)="createNewCharacter()"
      class="create-button">
      创建角色
    </ion-button>
  </div>
</ion-content>