<!-- 顶部标签栏 -->
<div class="header">
  <div class="tab-container">
    <div class="tabs">
      <span
        class="tab"
        [class.active]="activeTab === tab"
        *ngFor="let tab of tabList"
        (click)="selectTab(tab)"
      >
        {{ tab }}
      </span>
    </div>
    <div class="action-buttons">
      <div class="action-btn" (click)="onLogout()"><i class="bi bi-box-arrow-right"></i></div>
      <div class="action-btn" (click)="onProfile()"><i class="bi bi-person-circle"></i></div>
    </div>
  </div>
</div>

<!-- 内容区域 -->
<div class="content">
  <!-- 搜索 -->
  <div class="search-container">
    <input type="text" class="search-input" placeholder="搜索" [(ngModel)]="searchText" />
    <div class="search-buttons">
      <div class="search-btn" (click)="onSearchByCamera()">
        <ion-icon name="camera-outline" style="font-size: 20px; color: white;"></ion-icon>
      </div>
      <div class="search-btn" (click)="onSearchByScan()">
        <ion-icon name="barcode-outline" style="font-size: 20px; color: white;"></ion-icon>
      </div>
    </div>
  </div>

  <!-- 大按钮组 -->
  <div class="big-buttons">
    <div class="big-btn" (click)="onFeatureClick('印花搜枪')">
      <i class="bi bi-search"></i><span>印花搜枪</span>
    </div>
    <div class="big-btn" (click)="onFeatureClick('类型筛选')">
      <i class="bi bi-funnel"></i><span>类型筛选</span>
    </div>
    <div class="big-btn" (click)="onFeatureClick('收藏品总览')">
      <i class="bi bi-collection"></i><span>收藏品总览</span>
    </div>
    <div class="big-btn" (click)="onFeatureClick('季节新品')">
      <i class="bi bi-star"></i><span>季节新品</span>
    </div>
  </div>

  <!-- 饰品列表 -->
  <div class="item-list">
    <div class="item-card" *ngFor="let item of items" (click)="onItemClick(item)">
      <div class="item-image">
        <img [src]="item.image" [alt]="item.name" />
      </div>
      <div class="item-info">
        <div class="item-name">{{ item.name }}</div>
        <div class="item-wear">磨损: {{ item.wear }}</div>
        <div class="item-price">¥ {{ item.price }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 底部Tab栏 -->
<div class="tab-bar">
  <div class="tab-item" *ngFor="let tab of bottomTabs" [class.active]="activeBottomTab === tab" (click)="selectBottomTab(tab)">
    <i class="bi bi-house"></i>
    <span>{{ tab }}</span>
  </div>
</div>
