202226701051/fashion-app/src/app/chat-history/chat-history.component.html

<ion-header >
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goBack()">  <!--返回按钮-->
        <ion-icon name="chevron-back-sharp" style="color: black; font-size:27px"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>聊天记录</ion-title>
    <ion-buttons slot="end">
      <ion-button >   <!--更多按钮-->
        <ion-icon name="ellipsis-horizontal" style="color: black; font-size:27px"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 搜索框 -->
  <ion-searchbar animated="true" fill="clear" [(ngModel)]="searchDate" (ionInput)="filterChatHistories()" placeholder="输入日期 (YYYY-MM-DD)" class="search"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let chat of filteredChatHistories; let i = index" fill="clear">
      <div class="chat-item" (click)="selectChatHistory(chat)" [ngClass]="{'first-chat': i === 0}">
        <div class="chat-header">
          <div class="user-info">
            <img [src]="currentUser.get('image')" alt="User Avatar" class="avatar-image">
            <span class="username">{{ currentUser.get('username') }}</span>
          </div>
          <span class="timestamp">{{ chat.createdAt | date:'yyyy-MM-dd HH:mm' }}</span>
        </div>
        <div class="chat-content">
          <p class="chat-text">{{ chat.firstMessage }}</p>
        </div>
      </div>
    </ion-item>
  </ion-list>
</ion-content>