s202226701003/AiStudy-app/src/app/tab-community/tab-community.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>学习社区</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 下拉刷新 -->
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <!-- 帖子列表 -->
  <ion-list>
    <!-- 加载状态 -->
    <ion-card *ngIf="isLoading">
      <ion-card-content>
        <ion-item lines="none">
          <ion-avatar slot="start">
            <ion-skeleton-text [animated]="true"></ion-skeleton-text>
          </ion-avatar>
          <ion-label>
            <h3><ion-skeleton-text [animated]="true" style="width: 50%"></ion-skeleton-text></h3>
            <p><ion-skeleton-text [animated]="true" style="width: 80%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
      </ion-card-content>
    </ion-card>

    <!-- 帖子内容 -->
    <ion-card *ngFor="let post of posts">
      <ion-card-content>
        <ion-item lines="none" class="author-info">
          <ion-avatar slot="start">
            <img [src]="post.author.avatar" alt="avatar">
          </ion-avatar>
          <ion-label>
            <h3>{{post.author.name}}</h3>
            <p>{{post.createdAt | date:'MM-dd HH:mm'}}</p>
          </ion-label>
        </ion-item>
        
        <p class="post-content">{{post.content}}</p>
        
        <!-- 图片展示区域 -->
        <div class="post-images" *ngIf="post.images?.length > 0">
          <!-- 单张图片 -->
          <div class="single-image" *ngIf="post.images.length === 1">
            <img [src]="post.images[0]" (click)="viewImage(post.images[0])">
          </div>
          
          <!-- 两张图片 -->
          <div class="double-images" *ngIf="post.images.length === 2">
            <img *ngFor="let img of post.images" 
                 [src]="img" 
                 (click)="viewImage(img)">
          </div>
          
          <!-- 三张及以上图片 -->
          <div class="multiple-images" *ngIf="post.images.length >= 3">
            <img *ngFor="let img of post.images.slice(0, 9)" 
                 [src]="img" 
                 (click)="viewImage(img)">
            <div class="more-images" *ngIf="post.images.length > 9">
              +{{post.images.length - 9}}
            </div>
          </div>
        </div>
        
        <!-- 添加标签 -->
        <div class="post-tags">
          <ion-chip *ngFor="let tag of post.tags" color="primary" outline>
            <ion-label>{{tag}}</ion-label>
          </ion-chip>
        </div>
        
        <div class="post-actions">
          <ion-button fill="clear" (click)="toggleLike(post)">
            <ion-icon [name]="post.isLiked ? 'heart' : 'heart-outline'" 
                      [color]="post.isLiked ? 'danger' : 'medium'"
                      slot="start">
            </ion-icon>
            {{post.likes}}
          </ion-button>
          <ion-button fill="clear">
            <ion-icon name="chatbubble-outline" slot="start"></ion-icon>
            {{post.comments}}
          </ion-button>
          <ion-button fill="clear">
            <ion-icon name="share-outline" slot="start"></ion-icon>
          </ion-button>
        </div>
      </ion-card-content>
    </ion-card>
  </ion-list>

  <!-- 无限滚动 -->
  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <!-- 发帖按钮 -->
  <ion-button class="fab-button" shape="round" (click)="createPost()">
    <ion-icon name="add-outline"></ion-icon>
    发帖
  </ion-button>
</ion-content>