food-picture/picture-web/src/modules/first-home/image-search/image-search.html

<!-- image-search.html -->
<div class="container">
  <!-- 顶部搜索栏 -->
  <header class="search-header">
    <div class="header-top">
      <div class="back-btn" routerLink="/mobile/home">
        <fa-icon [icon]="faArrowLeft"></fa-icon>
      </div>
      <div class="app-name">播菜汪</div>
      <div style="width: 36px;"></div> <!-- 占位保持对称 -->
    </div>
    <div class="search-bar">
      <fa-icon [icon]="faSearch"></fa-icon>
      <input 
        type="text" 
        [(ngModel)]="searchInput" 
        placeholder="搜索美食图片素材..." 
        (keyup.enter)="onSearch()"
      >
    </div>
  </header>
  
  <!-- 主内容区 -->
  <main class="main-content">
    <!-- 历史搜索 -->
    <div class="section history-section" *ngIf="searchHistory.length > 0">
      <div class="section-title">
        <div><fa-icon [icon]="faHistory"></fa-icon> 历史搜索</div>
        <button class="clear-btn" (click)="clearHistory()">清空</button>
      </div>
      <div class="history-list">
        <div 
          class="history-item" 
          *ngFor="let item of searchHistory; let i = index"
          (click)="performSearch(item)"
        >
          <span>{{ item }}</span>
          <span class="delete-btn" (click)="deleteHistoryItem(i); $event.stopPropagation()">
            <fa-icon [icon]="faTimes"></fa-icon>
          </span>
        </div>
      </div>
    </div>
    
    <!-- 搜索发现 -->
    <div class="section">
      <div class="section-title">
        <div><fa-icon [icon]="faCompass"></fa-icon> 搜索发现</div>
      </div>
      <div class="discovery-grid">
        <div 
          class="grid-item" 
          *ngFor="let item of discoveryItems"
          (click)="onDiscoveryClick(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    
    <!-- 大家都在搜 -->
    <div class="section">
      <div class="section-title">
        <div><fa-icon [icon]="faFire"></fa-icon> 大家都在搜</div>
      </div>
      <div class="hot-list">
        <div 
          class="hot-item" 
          *ngFor="let item of popularSearches; let i = index"
          (click)="onPopularSearchClick(item)"
        >
          <div class="hot-index" [class.top3]="i < 3">{{ i + 1 }}</div>
          <div class="hot-keyword">
            {{ item.keyword }}
            <span class="hot-tag" *ngIf="item.tag">{{ item.tag }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 美食热搜 -->
    <div class="section">
      <div class="section-title">
        <div><fa-icon [icon]="faUtensils"></fa-icon> 美食热搜</div>
      </div>
      <div class="hot-list">
        <div 
          class="hot-item" 
          *ngFor="let item of foodTrends; let i = index"
          (click)="onFoodTrendClick(item)"
        >
          <div class="hot-index" [class.top3]="i < 3">{{ i + 1 }}</div>
          <div class="hot-keyword">
            {{ item.keyword }}
            <span class="hot-tag" *ngIf="item.tag">{{ item.tag }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分类标签 -->
    <div class="section">
      <div class="section-title">
        <div><fa-icon [icon]="faTags"></fa-icon> 热门分类</div>
      </div>
      <div class="category-tags">
        <div 
          class="tag" 
          *ngFor="let category of categories"
          (click)="onCategoryClick(category)"
        >
          {{ category }}
        </div>
      </div>
    </div>
  </main>
</div>