瀏覽代碼

主页代码添加

刘嘉轩 8 月之前
父節點
當前提交
79468e66ab
共有 3 個文件被更改,包括 69 次插入16 次删除
  1. 63 11
      smarteat-app/src/app/tab1/tab1.page.html
  2. 5 4
      smarteat-app/src/app/tab1/tab1.page.ts
  3. 1 1
      smarteat-prod/README.md

+ 63 - 11
smarteat-app/src/app/tab1/tab1.page.html

@@ -1,17 +1,69 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
-  </ion-toolbar>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-logo></ion-logo>
+      </ion-buttons>
+      <ion-searchbar placeholder="搜索食物、食谱、餐厅" show-clear-button="focus"></ion-searchbar>
+      <ion-buttons slot="end">
+        <ion-avatar>
+          <ion-img src="path_to_user_avatar.jpg"></ion-img>
+        </ion-avatar>
+      </ion-buttons>
+    </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<!-- 推荐健康建议 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>健康建议</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-button expand="full" color="secondary" routerLink="/health-tips">
+      <ion-icon slot="start" name="leaf-outline"></ion-icon>
+      今日饮食建议
+    </ion-button>
+    <p>关注每日健康饮食,提供实时饮食建议。</p>
+  </ion-card-content>
+</ion-card>
+
+<!-- 快速入口 -->
+<ion-grid>
+  <ion-row>
+    <ion-col size="6">
+      <ion-button expand="full" color="tertiary" routerLink="/food-recognition">
+        <ion-icon slot="start" name="camera-outline"></ion-icon>
+        今日食物识别
+      </ion-button>
+    </ion-col>
+    <ion-col size="6">
+      <ion-button expand="full" color="tertiary" routerLink="/health-goals">
+        <ion-icon slot="start" name="trophy-outline"></ion-icon>
+        健康目标管理
+      </ion-button>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col size="12">
+      <ion-button expand="full" color="tertiary" routerLink="/meal-delivery">
+        <ion-icon slot="start" name="restaurant-outline"></ion-icon>
+        外卖推荐
+      </ion-button>
+    </ion-col>
+  </ion-row>
+</ion-grid>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+<!-- 推荐食谱 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>今日推荐食谱</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <ion-button expand="full" color="primary" routerLink="/recommended-recipes">
+      <ion-icon slot="start" name="pizza-outline"></ion-icon>
+      查看推荐食谱
+    </ion-button>
+    <p>根据你的饮食偏好,智能推荐今日食谱。</p>
+  </ion-card-content>
+</ion-card>
 </ion-content>

+ 5 - 4
smarteat-app/src/app/tab1/tab1.page.ts

@@ -1,13 +1,14 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  standalone: true, // 使用 standalone 组件
+  imports: [IonicModule, ExploreContainerComponent],  // 通过 IonicModule 导入所有 Ionic 组件
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], 
 })
 export class Tab1Page {
   constructor() {}

+ 1 - 1
smarteat-prod/README.md

@@ -50,7 +50,7 @@
     - 餐饮企业
     - 食品生产商
     - 外卖服务平台
-    - 营养咨询机构
+    - 营养咨询机构 
 ## 主要功能
 - AI营养师咨询:开发AI驱动的虚拟营养师,用户可以随时咨询饮食问题,获取专业建议和指导,提升用户的参与度和满意度。
 - 智能食物识别:利用图像识别技术,用户可以通过拍照上传食物,系统自动识别食物种类和营养成分,简化记录过程。