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

<ion-header>
  <ion-toolbar color="primary">
    <ion-title (click)="initializeSampleData()">我的农场</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="toggleFieldForm()">
        <ion-icon [name]="showFieldForm ? 'close' : 'add'" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 添加/编辑农田表单 -->
  <ion-card *ngIf="showFieldForm" class="form-card">
    <ion-card-header>
      <ion-card-title>{{ editingField ? '编辑农田' : '添加新农田' }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <form [formGroup]="fieldForm" (ngSubmit)="saveField()">
        <ion-item>
          <ion-label position="floating">农田名称</ion-label>
          <ion-input formControlName="name" type="text"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">面积(亩)</ion-label>
          <ion-input formControlName="area" type="number"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">位置</ion-label>
          <ion-input formControlName="location" type="text"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>当前作物</ion-label>
          <ion-select formControlName="currentCrop">
            <ion-select-option value="冬小麦">冬小麦</ion-select-option>
            <ion-select-option value="春玉米">春玉米</ion-select-option>
            <ion-select-option value="水稻">水稻</ion-select-option>
            <ion-select-option value="大豆">大豆</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>土壤类型</ion-label>
          <ion-select formControlName="soilType">
            <ion-select-option value="粘壤土">粘壤土</ion-select-option>
            <ion-select-option value="砂壤土">砂壤土</ion-select-option>
            <ion-select-option value="壤土">壤土</ion-select-option>
            <ion-select-option value="粘土">粘土</ion-select-option>
          </ion-select>
        </ion-item>

        <div class="form-buttons">
          <ion-button type="button" fill="outline" (click)="cancelEdit()">取消</ion-button>
          <ion-button type="submit" [disabled]="!fieldForm.valid">保存</ion-button>
        </div>
      </form>
    </ion-card-content>
  </ion-card>

  <!-- 农场概览 -->
  <ion-card class="summary-card">
    <ion-card-header>
      <ion-card-title>农场概览</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="summary-grid">
        <div class="summary-item">
          <ion-icon name="map" color="primary"></ion-icon>
          <h3>{{ fields.length }}</h3>
          <p>地块数量</p>
        </div>
        <div class="summary-item">
          <ion-icon name="leaf" color="success"></ion-icon>
          <h3>{{ totalArea }}亩</h3>
          <p>种植面积</p>
        </div>
        <div class="summary-item">
          <ion-icon name="alarm" color="warning"></ion-icon>
          <h3>{{ pendingTasks }}</h3>
          <p>待办农事</p>
        </div>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 农田地块列表 -->
  <ion-list>
    <ion-item-sliding *ngFor="let field of fields">
      <ion-item (click)="editField(field)">
        <ion-avatar slot="start">
          <img [src]="getCropImage(field.currentCrop)">
        </ion-avatar>
        <ion-label>
          <h2>{{ field.name }}</h2>
          <p>{{ field.area }}亩 • {{ field.currentCrop }}</p>
          <p class="field-status">
            <ion-badge *ngIf="field.status" [color]="getStatusColor(field.status)">
              {{ field.status }}
            </ion-badge>
            <span>种植 {{ field.daysPlanted }}天</span>
          </p>
        </ion-label>
        <ion-note slot="end">
          {{ field.nextTask || '暂无农事' }}
        </ion-note>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="deleteField(field.id)">
          <ion-icon name="trash" slot="icon-only"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <!-- 无地块提示 -->
  <div class="empty-tip" *ngIf="fields.length === 0 && !showFieldForm">
    <ion-icon name="earth"></ion-icon>
    <p>您还没有添加农田地块</p>
    <ion-button fill="outline" (click)="toggleFieldForm()">添加第一块地</ion-button>
  </div>

  <!-- 农事提醒 -->
  <ion-card class="task-card" *ngIf="fields.length > 0">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="notifications" color="warning"></ion-icon>
        近期农事提醒
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item *ngFor="let task of recentTasks" (click)="viewTaskDetail(task)">
          <ion-icon [name]="getTaskIcon(task.type)" slot="start" [color]="getTaskColor(task.type)"></ion-icon>
          <ion-label>
            <h3>{{ task.fieldName }}：{{ task.name }}</h3>
            <p>{{ task.dueDate | date:'MM月dd日' }} • {{ task.notes || '暂无备注' }}</p>
          </ion-label>
          <ion-badge slot="end" [color]="task.urgent ? 'danger' : 'medium'">
            {{ task.urgent ? '紧急' : '常规' }}
          </ion-badge>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <!-- 生长记录 -->
  <ion-card *ngIf="fields.length > 0">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="calendar" color="primary"></ion-icon>
        近期生长记录
      </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="record-timeline">
        <div class="record-item" *ngFor="let record of recentRecords">
          <div class="record-date">{{ record.date | date:'MM.dd' }}</div>
          <div class="record-content">
            <h4>{{ record.fieldName }} {{ record.activity }}</h4>
            <p>{{ record.notes }}</p>
          </div>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>