feat:new tab4 with home

myapp/package-lock.json

@@ -22,6 +22,7 @@
         "@capacitor/keyboard": "7.0.1",
         "@capacitor/status-bar": "7.0.1",
         "@ionic/angular": "^8.0.0",
+        "@ionic/storage-angular": "^4.0.0",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -3911,6 +3912,29 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ionic/storage": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@ionic/storage/-/storage-4.0.0.tgz",
+      "integrity": "sha512-3N21P19Xk6cICLnSXZ3ilRqbSXAGSFeIF3HNqz+1kARcm0UFT/vwmZreaXtFyq437vvEWOfJ2enlj3JHLKS0FA==",
+      "license": "MIT",
+      "dependencies": {
+        "localforage": "^1.9.0"
+      }
+    },
+    "node_modules/@ionic/storage-angular": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@ionic/storage-angular/-/storage-angular-4.0.0.tgz",
+      "integrity": "sha512-FeSmCMCm1bMRfu5TFSqLtjdfEo/dLLUhLIrPmbhSYomVZdV/dNn4mBZv9SabyxSqn4bF31hw40y+4buhG+durQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ionic/storage": "^4.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "*",
+        "rxjs": "*"
+      }
+    },
     "node_modules/@ionic/utils-array": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.6.tgz",
@@ -10878,6 +10902,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
@@ -12405,6 +12435,15 @@
         }
       }
     },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -12515,6 +12554,15 @@
         "node": ">= 12.13.0"
       }
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmmirror.com/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",

myapp/package.json

@@ -27,6 +27,7 @@
     "@capacitor/keyboard": "7.0.1",
     "@capacitor/status-bar": "7.0.1",
     "@ionic/angular": "^8.0.0",
+    "@ionic/storage-angular": "^4.0.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

myapp/src/app/app.module.ts

@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
-
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 

myapp/src/app/tab4/tab4-routing.module.ts

@@ -13,4 +13,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class Tab3PageRoutingModule {}
+export class Tab4PageRoutingModule {}

myapp/src/app/tab4/tab4.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Tab4Page } from './tab4.page';
-import { Tab3PageRoutingModule } from './tab4-routing.module';
+import { Tab4PageRoutingModule } from './tab4-routing.module';
 
 @NgModule({
   imports: [
@@ -11,8 +11,8 @@ import { Tab3PageRoutingModule } from './tab4-routing.module';
     FormsModule,
     ReactiveFormsModule,
     IonicModule,
-    Tab3PageRoutingModule
+    Tab4PageRoutingModule
   ],
   declarations: [Tab4Page]
 })
-export class Tab3PageModule {}
+export class Tab4PageModule {}

myapp/src/app/tab4/tab4.page.html

@@ -1,169 +1,113 @@
 <ion-header>
   <ion-toolbar color="primary">
-    <ion-title>我的农场</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-title>
+      <ion-icon name="person-circle" slot="start"></ion-icon>
+      我的
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <!-- 添加/编辑农田表单 -->
-  <ion-card *ngIf="showFieldForm" class="form-card">
+<ion-content [fullscreen]="true" class="user-profile">
+  <!-- 用户信息卡片 -->
+  <ion-card class="profile-card" *ngIf="isLoggedIn; else guestTemplate">
     <ion-card-header>
-      <ion-card-title>{{ editingField ? '编辑农田' : '添加新农田' }}</ion-card-title>
+      <ion-avatar class="profile-avatar">
+        <img [src]="user.avatar || 'assets/icon/user-default.png'" />
+      </ion-avatar>
+      <ion-card-title>{{ user.name || '神农用户' }}</ion-card-title>
+      <ion-card-subtitle>
+        <ion-chip color="success" outline *ngIf="user.type === 'farmer'">
+          <ion-icon name="leaf"></ion-icon>
+          <ion-label>认证农户</ion-label>
+        </ion-chip>
+        <ion-chip color="warning" outline *ngIf="user.type === 'expert'">
+          <ion-icon name="school"></ion-icon>
+          <ion-label>农业专家</ion-label>
+        </ion-chip>
+      </ion-card-subtitle>
     </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-grid>
+        <ion-row>
+          <ion-col size="4" class="stats-item">
+            <h3>{{ user.fields || 0 }}</h3>
+            <p>农田地块</p>
+          </ion-col>
+          <ion-col size="4" class="stats-item">
+            <h3>{{ user.solved || 0 }}</h3>
+            <p>已解决问题</p>
+          </ion-col>
+          <ion-col size="4" class="stats-item">
+            <h3>{{ user.exp || 0 }}</h3>
+            <p>经验值</p>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </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>
+  <!-- 未登录状态模板 -->
+  <ng-template #guestTemplate>
+    <div class="guest-welcome">
+      <ion-icon name="leaf" color="medium"></ion-icon>
+      <h3>欢迎使用神农百问</h3>
+      <p>登录后享受完整服务</p>
+      <ion-button expand="block" shape="round" (click)="goToLogin()">
+        <ion-icon name="log-in" slot="start"></ion-icon>
+        立即登录
+      </ion-button>
+    </div>
+  </ng-template>
+
+  <!-- 功能菜单 -->
+  <ion-list lines="none" class="feature-list">
+    <ion-item button detail (click)="goToSettings()">
+      <ion-icon name="settings" slot="start" color="primary"></ion-icon>
+      <ion-label>系统设置</ion-label>
+    </ion-item>
+    
+    <ion-item button detail (click)="goToFields()" *ngIf="isLoggedIn">
+      <ion-icon name="map" slot="start" color="success"></ion-icon>
+      <ion-label>我的农田</ion-label>
+    </ion-item>
+    
+    <ion-item button detail (click)="goToQuestions()" *ngIf="isLoggedIn">
+      <ion-icon name="help-circle" slot="start" color="warning"></ion-icon>
+      <ion-label>我的提问</ion-label>
+    </ion-item>
+    
+    <ion-item button detail (click)="goToFavorites()" *ngIf="isLoggedIn">
+      <ion-icon name="bookmark" slot="start" color="danger"></ion-icon>
+      <ion-label>收藏内容</ion-label>
+    </ion-item>
+    
+    <ion-item button detail (click)="goToFeedback()">
+      <ion-icon name="chatbubbles" slot="start" color="tertiary"></ion-icon>
+      <ion-label>意见反馈</ion-label>
+    </ion-item>
+    
+    <ion-item button detail (click)="goToAbout()">
+      <ion-icon name="information-circle" slot="start" color="medium"></ion-icon>
+      <ion-label>关于我们</ion-label>
+    </ion-item>
   </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 class="auth-buttons" *ngIf="!isLoggedIn">
+    <ion-button expand="block" fill="outline" (click)="goToLogin()">
+      <ion-icon name="log-in" slot="start"></ion-icon>
+      登录
+    </ion-button>
+    <ion-button expand="block" fill="outline" (click)="goToRegister()">
+      <ion-icon name="person-add" slot="start"></ion-icon>
+      注册
+    </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-button expand="block" color="light" (click)="logout()" *ngIf="isLoggedIn" class="logout-btn">
+    <ion-icon name="log-out" slot="start"></ion-icon>
+    退出登录
+  </ion-button>
 </ion-content>

myapp/src/app/tab4/tab4.page.scss

@@ -1,212 +1,105 @@
-/* 表单卡片 */
-.form-card {
-  margin: 10px;
-  border-radius: 12px;
-
-  ion-item {
-    --padding-start: 0;
-    --inner-padding-end: 0;
-    margin-bottom: 15px;
-  }
-
-  .form-buttons {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
-
-    ion-button {
-      width: 48%;
-    }
-  }
+.user-profile {
+  --ion-background-color: #f5f9f5;
 }
 
-/* 农场概览卡片 */
-.summary-card {
-  margin: 10px;
+.profile-card {
+  margin: 16px;
   border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
 
-  .summary-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-    text-align: center;
-
-    .summary-item {
-      ion-icon {
-        font-size: 2rem;
-      }
-
-      h3 {
-        margin: 5px 0 0;
-        font-size: 1.4rem;
-        font-weight: bold;
-      }
-
-      p {
-        margin: 2px 0;
-        font-size: 0.8rem;
-        color: var(--ion-color-medium);
-      }
-    }
+  .profile-avatar {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 10px;
+    border: 3px solid var(--ion-color-primary);
   }
-}
 
-/* 地块列表 */
-ion-list {
-  background: transparent;
-  padding-top: 0;
-
-  ion-item {
-    --padding-start: 10px;
-    --inner-padding-end: 10px;
-    margin-bottom: 8px;
-    border-radius: 10px;
-    --background: var(--ion-color-light);
-
-    ion-avatar {
-      width: 50px;
-      height: 50px;
-      background: var(--ion-color-light-shade);
-    }
+  ion-card-title {
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
 
-    h2 {
-      font-weight: 600;
+  .stats-item {
+    text-align: center;
+    border-right: 1px solid var(--ion-color-light-shade);
+    
+    &:last-child {
+      border-right: none;
     }
 
-    .field-status {
-      display: flex;
-      align-items: center;
-      margin-top: 5px;
-
-      ion-badge {
-        margin-right: 8px;
-      }
-
-      span {
-        font-size: 0.8rem;
-        color: var(--ion-color-medium);
-      }
+    h3 {
+      margin: 0;
+      font-size: 1.4rem;
+      font-weight: bold;
+      color: var(--ion-color-primary);
     }
 
-    ion-note {
+    p {
+      margin: 0;
       font-size: 0.8rem;
-      color: var(--ion-color-primary);
+      color: var(--ion-color-medium);
     }
   }
 }
 
-/* 空状态提示 */
-.empty-tip {
+.guest-welcome {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 60vh;
+  padding: 30px 20px;
   text-align: center;
-  padding: 20px;
 
   ion-icon {
     font-size: 3rem;
-    color: var(--ion-color-medium);
     margin-bottom: 15px;
   }
 
+  h3 {
+    margin: 10px 0 5px;
+    font-weight: 600;
+  }
+
   p {
+    margin: 0 0 20px;
     color: var(--ion-color-medium);
-    margin-bottom: 20px;
+  }
+
+  ion-button {
+    max-width: 300px;
+    margin: 0 auto;
   }
 }
 
-/* 农事提醒卡片 */
-.task-card {
-  margin: 15px 10px;
+.feature-list {
+  background: transparent;
+  margin: 10px 0;
 
   ion-item {
-    --padding-start: 0;
-    --inner-padding-end: 0;
-    --border-radius: 8px;
+    --background: white;
+    --border-radius: 10px;
     margin-bottom: 8px;
+    --padding-start: 10px;
+    --inner-padding-end: 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 
     ion-icon {
       font-size: 1.5rem;
     }
-
-    h3 {
-      font-size: 0.95rem;
-      margin-bottom: 3px;
-    }
-
-    p {
-      font-size: 0.8rem;
-      color: var(--ion-color-medium);
-    }
   }
 }
 
-/* 生长记录时间线 */
-.record-timeline {
-  padding-left: 20px;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 6px;
-    top: 0;
-    bottom: 0;
-    width: 2px;
-    background: var(--ion-color-light-shade);
-  }
-
-  .record-item {
-    position: relative;
-    padding-bottom: 15px;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: -20px;
-      top: 5px;
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: var(--ion-color-primary);
-    }
-
-    .record-date {
-      font-weight: bold;
-      color: var(--ion-color-primary);
-      margin-bottom: 5px;
-    }
+.auth-buttons {
+  padding: 0 16px;
+  margin-top: 20px;
 
-    .record-content {
-      background: var(--ion-color-light);
-      padding: 10px;
-      border-radius: 8px;
-
-      h4 {
-        margin: 0 0 5px;
-        font-size: 0.9rem;
-      }
-
-      p {
-        margin: 0 0 8px;
-        font-size: 0.8rem;
-        color: var(--ion-color-medium);
-      }
-
-      .record-images {
-        display: flex;
-        gap: 5px;
-        overflow-x: auto;
-
-        ion-thumbnail {
-          width: 60px;
-          height: 60px;
-          border-radius: 5px;
-          overflow: hidden;
-        }
-      }
-    }
+  ion-button {
+    margin-bottom: 10px;
   }
+}
+
+.logout-btn {
+  margin: 20px 16px;
+  --border-radius: 10px;
 }

myapp/src/app/tab4/tab4.page.spec.ts

@@ -3,7 +3,7 @@ import { IonicModule } from '@ionic/angular';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 import { Tab4Page } from './tab4.page';
 
-describe('Tab3Page', () => {
+describe('Tab4Page', () => {
   let component: Tab4Page;
   let fixture: ComponentFixture<Tab4Page>;
 

myapp/src/app/tab4/tab4.page.ts

@@ -1,283 +1,88 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { AlertController } from '@ionic/angular';
 
-interface FarmField {
-  id: string;
-  name: string;
-  area: number;
-  location: string;
-  currentCrop: string;
-  daysPlanted: number;
-  status?: '需灌溉' | '需施肥' | '需防治' | '正常';
-  nextTask?: string;
-  soilType?: string;
-}
-
-interface FarmTask {
-  id: string;
-  fieldId: string;
-  fieldName: string;
-  name: string;
-  type: 'irrigation' | 'fertilization' | 'pestControl' | 'harvest';
-  dueDate: Date;
-  notes?: string;
-  urgent: boolean;
-  completed: boolean;
-}
-
-interface GrowthRecord {
-  id: string;
-  fieldId: string;
-  fieldName: string;
-  date: Date;
-  activity: string;
-  notes: string;
-  images?: string[];
-}
-
 @Component({
   selector: 'app-tab4',
   templateUrl: './tab4.page.html',
   styleUrls: ['./tab4.page.scss'],
-  standalone: false,
+  standalone:false,
 })
-export class Tab4Page implements OnInit {
-  fields: FarmField[] = [
-    {
-      id: '1',
-      name: '北区小麦田',
-      area: 5.2,
-      location: '农场北侧',
-      currentCrop: '冬小麦',
-      daysPlanted: 45,
-      status: '需施肥',
-      nextTask: '明日追肥',
-      soilType: '粘壤土'
-    },
-    {
-      id: '2',
-      name: '南区玉米地',
-      area: 3.8,
-      location: '农场南侧',
-      currentCrop: '春玉米',
-      daysPlanted: 22,
-      status: '正常',
-      nextTask: '下周除草',
-      soilType: '砂壤土'
-    }
-  ];
-
-  tasks: FarmTask[] = [
-    {
-      id: '1',
-      fieldId: '1',
-      fieldName: '北区小麦田',
-      name: '追施氮肥',
-      type: 'fertilization',
-      dueDate: new Date(new Date().setDate(new Date().getDate() + 1)),
-      urgent: true,
-      completed: false
-    },
-    {
-      id: '2',
-      fieldId: '2',
-      fieldName: '南区玉米地',
-      name: '除草作业',
-      type: 'pestControl',
-      dueDate: new Date(new Date().setDate(new Date().getDate() + 7)),
-      urgent: false,
-      completed: false
-    }
-  ];
-
-  records: GrowthRecord[] = [
-    {
-      id: '1',
-      fieldId: '1',
-      fieldName: '北区小麦田',
-      date: new Date(new Date().setDate(new Date().getDate() - 3)),
-      activity: '病虫害检查',
-      notes: '发现少量蚜虫，已喷施防治',
-      images: [
-        'assets/images/wheat-pest1.jpg',
-        'assets/images/wheat-pest2.jpg'
-      ]
-    },
-    {
-      id: '2',
-      fieldId: '2',
-      fieldName: '南区玉米地',
-      date: new Date(new Date().setDate(new Date().getDate() - 5)),
-      activity: '追肥',
-      notes: '施用复合肥20kg/亩'
-    }
-  ];
-
-  showFieldForm = false;
-  editingField: FarmField | null = null;
-  fieldForm: FormGroup;
+export class Tab4Page {
+  isLoggedIn = true; // 根据实际登录状态切换
+  user = {
+    name: '张老农',
+    avatar: 'assets/icon/farmer-avatar.png',
+    type: 'farmer', // farmer/expert
+    fields: 5,
+    solved: 28,
+    exp: 356
+  };
 
   constructor(
-    private fb: FormBuilder,
+    private router: Router,
     private alertCtrl: AlertController
-  ) {
-    this.fieldForm = this.fb.group({
-      name: ['', Validators.required],
-      area: ['', [Validators.required, Validators.min(0.1)]],
-      location: [''],
-      currentCrop: ['冬小麦', Validators.required],
-      soilType: ['粘壤土']
-    });
-  }
-
-  ngOnInit() {}
+  ) {}
 
-  get totalArea(): number {
-    return this.fields.reduce((sum, field) => sum + field.area, 0);
+  // 导航到设置页面
+  goToSettings() {
+    this.router.navigate(['/settings']);
   }
 
-  get pendingTasks(): number {
-    return this.tasks.filter(t => !t.completed).length;
+  // 导航到登录页面
+  goToLogin() {
+    this.router.navigate(['/login']);
   }
 
-  get recentTasks(): FarmTask[] {
-    return this.tasks
-      .filter(t => !t.completed)
-      .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime())
-      .slice(0, 3);
+  // 导航到注册页面
+  goToRegister() {
+    this.router.navigate(['/register']);
   }
 
-  get recentRecords(): GrowthRecord[] {
-    return [...this.records]
-      .sort((a, b) => b.date.getTime() - a.date.getTime())
-      .slice(0, 4);
+  // 导航到农田管理
+  goToFields() {
+    this.router.navigate(['/my-fields']);
   }
 
-  getCropImage(crop: string): string {
-    const cropImages: {[key: string]: string} = {
-      '冬小麦': 'assets/images/wheat-icon.png',
-      '春玉米': 'assets/images/corn-icon.png',
-      '水稻': 'assets/images/rice-icon.png',
-      '大豆': 'assets/images/soybean-icon.png'
-    };
-    return cropImages[crop] || 'assets/images/crop-default.png';
+  // 导航到我的提问
+  goToQuestions() {
+    this.router.navigate(['/my-questions']);
   }
 
-  getStatusColor(status: string): string {
-    const statusColors: {[key: string]: string} = {
-      '需灌溉': 'primary',
-      '需施肥': 'warning',
-      '需防治': 'danger',
-      '正常': 'success'
-    };
-    return statusColors[status] || 'medium';
+  // 导航到收藏
+  goToFavorites() {
+    this.router.navigate(['/favorites']);
   }
 
-  getTaskIcon(type: string): string {
-    const taskIcons: {[key: string]: string} = {
-      'irrigation': 'water',
-      'fertilization': 'nutrition',
-      'pestControl': 'bug',
-      'harvest': 'leaf'
-    };
-    return taskIcons[type] || 'alert-circle';
+  // 导航到反馈
+  goToFeedback() {
+    this.router.navigate(['/feedback']);
   }
 
-  getTaskColor(type: string): string {
-    const taskColors: {[key: string]: string} = {
-      'irrigation': 'primary',
-      'fertilization': 'warning',
-      'pestControl': 'danger',
-      'harvest': 'success'
-    };
-    return taskColors[type] || 'medium';
+  // 导航到关于我们
+  goToAbout() {
+    this.router.navigate(['/about']);
   }
 
-  toggleFieldForm() {
-    this.showFieldForm = !this.showFieldForm;
-    if (!this.showFieldForm) {
-      this.editingField = null;
-      this.fieldForm.reset({
-        currentCrop: '冬小麦',
-        soilType: '粘壤土'
-      });
-    }
-  }
-
-  editField(field: FarmField) {
-    this.editingField = field;
-    this.fieldForm.patchValue({
-      name: field.name,
-      area: field.area,
-      location: field.location,
-      currentCrop: field.currentCrop,
-      soilType: field.soilType
-    });
-    this.showFieldForm = true;
-  }
-
-  saveField() {
-    if (this.fieldForm.invalid) return;
-
-    const fieldData = this.fieldForm.value;
-    
-    if (this.editingField) {
-      // 更新现有农田
-      const index = this.fields.findIndex(f => f.id === this.editingField?.id);
-      if (index >= 0) {
-        this.fields[index] = {
-          ...this.fields[index],
-          ...fieldData
-        };
-      }
-    } else {
-      // 添加新农田
-      this.fields.push({
-        id: Date.now().toString(),
-        daysPlanted: 0,
-        status: '正常',
-        ...fieldData
-      });
-    }
-
-    this.cancelEdit();
-  }
-
-  cancelEdit() {
-    this.showFieldForm = false;
-    this.editingField = null;
-    this.fieldForm.reset({
-      currentCrop: '冬小麦',
-      soilType: '粘壤土'
-    });
-  }
-
-  async deleteField(fieldId: string) {
+  // 退出登录
+  async logout() {
     const alert = await this.alertCtrl.create({
-      header: '确认删除',
-      message: '确定要删除这个农田地块吗？相关记录也将被删除',
+      header: '确认退出',
+      message: '确定要退出当前账号吗？',
       buttons: [
         {
           text: '取消',
           role: 'cancel'
         },
         {
-          text: '删除',
+          text: '退出',
           handler: () => {
-            this.fields = this.fields.filter(f => f.id !== fieldId);
-            this.tasks = this.tasks.filter(t => t.fieldId !== fieldId);
-            this.records = this.records.filter(r => r.fieldId !== fieldId);
+            this.isLoggedIn = false;
+            // 这里添加实际的退出登录逻辑
           }
         }
       ]
     });
-
     await alert.present();
   }
-
-  viewTaskDetail(task: FarmTask) {
-    console.log('查看任务详情:', task);
-    // 实际应导航到任务详情页
-  }
 }

myapp/src/app/tabs/tabs-routing.module.ts

@@ -21,7 +21,7 @@ const routes: Routes = [
       },
       {
         path: 'tab4',
-        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab3PageModule)
+        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
       },
       {
         path: '',

myapp/src/app/tabs/tabs.page.html

@@ -2,22 +2,22 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+      <ion-icon aria-hidden="true" name="home"></ion-icon>
       <ion-label>Tab 1</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+      <ion-icon aria-hidden="true" name="book"></ion-icon>
       <ion-label>Tab 2</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="hexagon"></ion-icon>
+      <ion-icon aria-hidden="true" name="leaf"></ion-icon>
       <ion-label>Tab 3</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab4" href="/tabs/tab4">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
+      <ion-icon aria-hidden="true" name="person"></ion-icon>
       <ion-label>Tab 4</ion-label>
     </ion-tab-button>
   </ion-tab-bar>