s202226701018/wisdom-app/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <div class="search-bar">
      <ion-searchbar
        placeholder="搜索"
        class="custom-searchbar"
        (ionInput)="searchProducts($event)">
      </ion-searchbar>
    </div>
    <ng-container *ngIf="!searchTerm">
      <div class="header">
        <ion-card-header>
          <ion-card-title>
            <ion-segment
              [(ngModel)]="selectedSegment"
              (ionChange)="segmentChanged($event)"
              scrollable>
              <ion-segment-button
                *ngFor="let segment of segments"
                [value]="segment">
                {{ segment }}
              </ion-segment-button>
            </ion-segment>
          </ion-card-title>
        </ion-card-header>
      </div>
    </ng-container>
  </ion-toolbar>
</ion-header>

<ion-content class="knowledge" [fullscreen]="true">
  <ion-loading
    *ngIf="isLoading"
    message="加载中...">
  </ion-loading>

<ion-content class="knowledge" [fullscreen]="true">
  <ng-container *ngIf="!searchTerm; else searchResults">
    <div class="content">
      <ion-card>
        <ion-card-content>
          <!-- 轮播图区域 -->
          <div class="carousel-container">
            <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
              <div class="slide" *ngFor="let image of images; trackBy: trackByIndex">
                <img [src]="image" alt="轮播图" />
              </div>
            </div>
            <button class="prev" (click)="prevSlide()">&#10094;</button>
            <button class="next" (click)="nextSlide()">&#10095;</button>
            <div class="dots">
              <span
                class="dot"
                *ngFor="let image of images; let i = index"
                [class.active]="i === currentSlide"
                (click)="goToSlide(i)">
              </span>
            </div>
          </div>
          <!-- 文章卡片区域 -->
          <app-article-card
            *ngFor="let card of cards; trackBy: trackById"
            [card]="card"
            (click)="openDetailModal(card)">
          </app-article-card>
        </ion-card-content>
      </ion-card>
    </div>
  </ng-container>

  <!-- 搜索结果 -->
  <ng-template #searchResults>
    <div>
      <app-article-card
        *ngFor="let product of products; trackBy: trackById"
        [card]="product"
        (click)="openDetailModal(product)">
      </app-article-card>
      <div *ngIf="products.length === 0" class="no-results">
        <h2>寻找中··· 请耐性等待 ····</h2>
      </div>
    </div>
  </ng-template>

  <!-- 详细信息模态 -->
  <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button (click)="closeDetailModal()">关闭</ion-button>
          </ion-buttons>
          <ion-title>{{ currentProduct?.get('category') }}</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="shareDetailModal()">分享</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <div class="modal-content" *ngIf="currentProduct">
          <h1 class="product-name">{{ currentProduct.get('title') }}</h1>
          <p><strong>作者：</strong>{{ currentProduct.get('author') }}</p>
          <p>{{ currentProduct.get('content')[0] }}</p>
          <div class="image-container">
            <img [src]="currentProduct.get('image')[0]" alt="图片" class="medicine-image" />
          </div>
          <p>{{ currentProduct.get('content')[1] }}</p>
          <div class="image-container">
            <img [src]="currentProduct.get('image')[1]" alt="图片" class="medicine-image" />
          </div>
          <div class="stats">
            <p><strong>阅读量：</strong>{{ currentProduct.get('views') }}</p>
            <p><strong>点赞量：</strong>{{ currentProduct.get('likes') }}</p>
          </div>
        </div>
      </ion-content>

      <ion-footer>
        <ion-item>
          <ion-input
            [(ngModel)]="comment"
            (ionInput)="onCommentInput($event)"
            placeholder="请输入评论">
          </ion-input>
          <ion-button (click)="postComment()">发布</ion-button>
        </ion-item>
      </ion-footer>
    </ng-template>
  </ion-modal>

  <!-- 分享模态 -->
  <ion-modal class="share-modal" [isOpen]="shareDetail">
    <ng-template>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="end">
            <ion-button (click)="closeShareModal()">X</ion-button>
          </ion-buttons>
          <ion-title>分享</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-item>
          <ion-label position="stacked">分享链接</ion-label>
          <ion-input [value]="shareLink" readonly></ion-input>
        </ion-item>
        <ion-button expand="block" (click)="copyLink()">复制链接</ion-button>
      </ion-content>
      <ion-footer>
        <ion-item>
          <ion-input
            [(ngModel)]="comment"
            (ionInput)="onCommentInput($event)"
            placeholder="请输入评论">
          </ion-input>
          <ion-button (click)="postComment()">发布</ion-button>
        </ion-item>
      </ion-footer>
    </ng-template>
  </ion-modal>
</ion-content>