app-snbw/myapp/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>农业知识库</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="toggleFontSize()">
        <ion-icon [name]="isLargeFont ? 'text' : 'text-outline'"></ion-icon>
      </ion-button>
      <ion-button (click)="refreshData()">
        <ion-icon name="refresh"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <!-- 搜索栏 -->
  <ion-toolbar class="search-toolbar">
    <ion-searchbar 
      [(ngModel)]="searchQuery" 
      placeholder="搜索病虫害或种植技术..."
      (ionChange)="onSearch()"
      animated>
    </ion-searchbar>
    <ion-button fill="clear" slot="end" (click)="startVoiceSearch()">
      <ion-icon name="mic"></ion-icon>
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content [class.large-font]="isLargeFont">
  <!-- 分类导航 -->
  <div class="category-container">
    <ion-segment [(ngModel)]="currentCategory" (ionChange)="filterByCategory()">
      <ion-segment-button *ngFor="let cat of categories" [value]="cat.id">
        <ion-icon [name]="cat.icon"></ion-icon>
        <ion-label>{{ cat.name }}</ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>

  <!-- 专家在线 -->
  <ion-card class="expert-card">
    <ion-card-header>
      <ion-card-title>👨🌾 专家在线咨询</ion-card-title>
      <ion-card-subtitle>立即连线农业专家解答疑难</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <div class="expert-list">
        <div class="expert-item" *ngFor="let expert of onlineExperts" (click)="connectExpert(expert)">
          <ion-avatar>
            <img [src]="expert.avatar">
          </ion-avatar>
          <div class="expert-info">
            <h3>{{ expert.name }}</h3>
            <p>{{ expert.specialty }}</p>
            <ion-badge [color]="expert.isOnline ? 'success' : 'medium'">
              {{ expert.isOnline ? '在线' : '离线' }}
            </ion-badge>
          </div>
          <ion-button fill="clear" size="small">
            <ion-icon name="chatbubble-ellipses"></ion-icon>
          </ion-button>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 知识卡片列表 -->
  <div class="knowledge-grid">
    <ion-card *ngFor="let item of filteredKnowledge" 
              [class.emergency]="item.isEmergency"
              (click)="navigateToDetail(item)">
      <ion-badge *ngIf="item.tag" [color]="getTagColor(item.tag)">
        {{ getTagLabel(item.tag) }}
      </ion-badge>
      <ion-img [src]="item.image"></ion-img>
      <ion-card-header>
        <ion-card-title>{{ item.title }}</ion-card-title>
        <ion-card-subtitle>
          <ion-icon name="time"></ion-icon>
          {{ item.duration || '2分钟阅读' }}
        </ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        {{ item.summary }}
      </ion-card-content>
      <ion-footer *ngIf="item.type === 'video'">
        <ion-button fill="clear">
          <ion-icon name="play" slot="start"></ion-icon>
          播放视频
        </ion-button>
      </ion-footer>
    </ion-card>
  </div>

  <!-- 空状态 -->
  <div class="empty-state" *ngIf="filteredKnowledge.length === 0">
    <ion-icon name="book"></ion-icon>
    <h3>未找到相关知识点</h3>
    <p>尝试更换筛选条件或搜索其他关键词</p>
    <ion-button fill="outline" (click)="resetFilters()">重置筛选</ion-button>
  </div>
</ion-content>