s202226701043/creation-app/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goToHome()">
        <ion-icon name="home-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-searchbar  (ionInput)="onSearchInput($event)" placeholder="搜索小说、角色或创意内容"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-menu-button></ion-menu-button>
      <ion-button (click)="openUserMenu($event)">
        <ion-avatar>
          <img [src]="userAvatar" *ngIf="userAvatar; else defaultAvatar">
          <ng-template #defaultAvatar>
            <ion-icon name="person-outline"></ion-icon>
          </ng-template>
        </ion-avatar>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- <ion-slides pager="true" autoplay="3000">
    <ion-slide *ngFor="let item of recommendedItems; let i = index">
      <img [src]="item.image" />
      <div class="carousel-caption">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
        <button (click)="goToItem(item)">阅读更多</button>
      </div>
    </ion-slide>
  </ion-slides>  -->
  
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let feature of features">
        <ion-card (click)="goToFeature(feature)">
          <ion-card-header>
            <ion-icon [name]="feature.icon"></ion-icon>
            <h2>{{ feature.title }}</h2>
          </ion-card-header>
          <ion-card-content>
            <p>{{ feature.description }}</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-list>
    <ion-item *ngFor="let item of popularItems">
      <ion-avatar slot="start">
        
        <ng-template #defaultAuthorAvatar>
          <ion-icon name="person-outline"></ion-icon>
        </ng-template>
      </ion-avatar>
      <ion-label>
        <h3>{{ item.title }}</h3>
        <p>{{ item.authorName }}</p>
        <p>{{ item.description }}</p>
      </ion-label>
      <ion-buttons slot="end">
        <ion-button (click)="goToItemDetail(item)">阅读</ion-button>
      </ion-buttons>
    </ion-item>
  </ion-list>

  <ion-card>
    <ion-card-header>
      <h2>用户评论</h2>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let comment of comments">
          <ion-avatar slot="start">
            
            <ng-template #defaultCommentAvatar>
              <ion-icon name="person-outline"></ion-icon>
            </ng-template>
          </ion-avatar>
          <ion-label>
            <h3>{{ comment.username }}</h3>
            <p>{{ comment.content }}</p>
            
          </ion-label>
          <ion-buttons slot="end">
            <ion-button (click)="likeComment(comment)">点赞</ion-button>
            <ion-button (click)="replyToComment(comment)">回复</ion-button>
          </ion-buttons>
        </ion-item>
      </ion-list>
      <ion-buttons>
        <ion-button (click)="shareContent()">分享</ion-button>
      </ion-buttons>
    </ion-card-content>
  </ion-card>

</ion-content>