feat:前端

smarteat-app/src/app/health-tips/health-tips.component.html

@@ -0,0 +1,8 @@
+<!-- 文本域：生成提示词 -->
+<ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+
+<!-- 按钮：执行消息生成函数 -->
+<ion-button (click)="sendMessage()" expand="block">消息生成</ion-button>
+  
+<!-- 展示：返回消息内容 -->
+<div>{{responseMsg}}</div>    

smarteat-app/src/app/health-tips/health-tips.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { HealthTipsComponent } from './health-tips.component';
+
+describe('HealthTipsComponent', () => {
+  let component: HealthTipsComponent;
+  let fixture: ComponentFixture<HealthTipsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HealthTipsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HealthTipsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

smarteat-app/src/app/health-tips/health-tips.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { FmodeChatCompletion } from 'fmode-ng';
+
+@Component({
+  selector: 'app-health-tips',
+  templateUrl: './health-tips.component.html',
+  styleUrls: ['./health-tips.component.scss'],
+  standalone: true,
+  imports: [IonicModule
+    ],
+})
+export class HealthTipsComponent  implements OnInit {
+
+  constructor() {}
+  ngOnInit() {}
+  // 用户输入提示词
+   userPrompt:string = "飞码产品LOGO，独角兽头部形象，极简风格，棱角分明，线条勾勒，蓝色紫色搭配。"
+  promptInput(ev:any){
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg:any = ""
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  sendMessage(){
+    console.log("create")
+    let completion = new FmodeChatCompletion([
+      {role:"system",content:""},
+      {role:"user",content:this.userPrompt}
+    ])
+    completion.sendCompletion().subscribe((message:any)=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+    })
+  }
+}

smarteat-app/src/app/tab1/tab1.page.html

@@ -1,69 +1,61 @@
-<ion-header [translucent]="true">
-    <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>
-          <img src="image/logo.jpg" alt="Logo" />
-        </ion-avatar>
-      </ion-buttons>
-    </ion-toolbar>
-</ion-header>
+
+  <ion-toolbar >
+    <ion-searchbar class="custom-searchbar" placeholder="搜索食物、食谱、餐厅" show-clear-button="focus"></ion-searchbar>
+  </ion-toolbar>
 
 <ion-content [fullscreen]="true">
 <!-- 推荐健康建议 -->
 <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-header>
+  
+  <ion-card-title>
+    <ion-icon  slot="start" name="leaf-outline"></ion-icon>
+    健康建议
+  </ion-card-title>
+</ion-card-header>
+<ion-card-content>
+  <ion-button (click)="goHealthTips()" >
+    <!-- <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-row>
+  <ion-col size="12">
+    <ion-button  >
+      <ion-icon slot="start" name="document-outline"></ion-icon>
+      健康目标管理
+    </ion-button>
+  </ion-col>
+</ion-row>
+<ion-row>
+  <ion-col size="12">
+    <ion-button  >
+      <ion-icon slot="start" name="storefront-outline"></ion-icon>
+      外卖推荐
+    </ion-button>
+  </ion-col>
+</ion-row>
 </ion-grid>
 
 <!-- 推荐食谱 -->
 <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-header>
+  <ion-card-title>
+    <ion-icon slot="start" name="albums-outline"></ion-icon>
+    今日推荐食谱
+  </ion-card-title>
+</ion-card-header>
+<ion-card-content>
+  <ion-button  >
+    <!-- <ion-icon slot="start" name="albums-outline"></ion-icon> -->
+    查看推荐食谱
+  </ion-button>
+  <p>根据你的饮食偏好，智能推荐今日食谱。</p>
+</ion-card-content>
 </ion-card>
-</ion-content>
+</ion-content>

smarteat-app/src/app/tab1/tab1.page.scss

@@ -0,0 +1,75 @@
+/* 设置所有矩形框为圆角矩形 */
+ion-card {
+    border-radius: 12px; /* 卡片圆角 */
+    overflow: hidden; /* 防止内容溢出圆角边界 */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+    margin-bottom: 16px; /* 卡片之间的间距 */
+  }
+  
+  .custom-searchbar {
+    --background: #f8f8f8;
+    --border-radius: 10px; // 可选：调整边角圆滑度
+    --box-shadow: none; // 可选：去掉阴影
+  }
+
+  ion-card-header {
+    // background: linear-gradient(to bottom, #ccffcc, #00ffcc);
+    // background-color: #f8f8f8; /* 设置卡片头部背景颜色 */
+    background: linear-gradient(to right, #ccffcc, #00ffcc), linear-gradient(to bottom, #33ffcc, white);
+    background-blend-mode: multiply; /* 混合模式，确保两个渐变效果结合 */
+    border-top-left-radius: 12px; /* 圆角效果 */
+    border-top-right-radius: 12px; /* 圆角效果 */
+  }
+  
+  ion-card-title {
+    font-weight: bold; /* 标题加粗 */
+    font-size: 18px;
+    color: #333; /* 字体颜色 */
+  }
+  
+  ion-card-content {
+    padding: 16px; /* 内容的内边距 */
+    color: #555; /* 内容字体颜色 */
+  }
+  
+  ion-button:hover {
+    transform: scale(1.05); /* 按钮悬停效果 */
+  }
+
+
+  /* 设置所有按钮的样式 */
+  ion-button {
+    border-radius: 12px; /* 按钮圆角 */
+    color: #333; /* 按钮中文字的颜色 */
+    font-weight: bold; /* 按钮字体加粗 */
+    text-align: center; /* 确保按钮文字水平居中 */
+    display: flex; /* 使用 flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+  }
+  
+  
+  /* 设置图标的间距 */
+  ion-icon {
+    margin-right: 8px; /* 图标与文字之间的间距 */
+  }
+  
+  /* 设置搜索框的样式 */
+  ion-searchbar {
+    border-radius: 20px; /* 搜索框圆角 */
+    margin: 10px 0; /* 上下间距 */
+  }
+  
+  /* 设置页面布局 */
+  ion-grid {
+    padding: 0 16px; /* 网格的内边距 */
+  }
+  
+  ion-row {
+    margin-bottom: 16px; /* 行间距 */
+  }
+  
+  ion-col {
+    padding: 0; /* 去掉每列的默认内边距 */
+  }
+  

smarteat-app/src/app/tab1/tab1.page.ts

@@ -1,6 +1,9 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
+import { IonicModule} from '@ionic/angular'; // 导入 IonicModule
+import { addIcons } from 'ionicons';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import {  albumsOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab1',
@@ -11,5 +14,11 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
   schemas: [CUSTOM_ELEMENTS_SCHEMA], 
 })
 export class Tab1Page {
-  constructor() {}
+  constructor(private router: Router) {
+    addIcons({scanOutline, documentOutline, storefrontOutline,albumsOutline,leafOutline});
+  }
+
+  goHealthTips(){
+    this.router.navigate([`/tabs/tips`])
+  }
 }

smarteat-app/src/app/tab2/tab2.page.html

@@ -27,11 +27,11 @@
   
   <!-- 展示：返回消息内容 -->
    @if(!isComplete){
-    <div>{{responseMsg}}</div>
+    <div class="response-container">{{responseMsg}}</div>
    }
   
   @if(isComplete){
-    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+    <div class="response-container"><fm-markdown-preview class="content-style" [content]="responseMsg" ></fm-markdown-preview></div>
   }
 
 </ion-content>

smarteat-app/src/app/tab2/tab2.page.scss

@@ -1,12 +1,11 @@
-/* 全局样式 */
 ion-header {
-    --background: #3880ff; /* 设置header背景色 */
-    --color: white; /* 设置文字颜色 */
-    // padding: 10px 0;
+    color: #333; /* 中文字的颜色 */
+    font-weight: bold; /* 按钮字体加粗 */
+    box-shadow: none;
   }
   
   ion-toolbar {
-    --background: #3880ff; /* 设置工具栏背景色 */
+    --background: #00ffcc; /* 设置工具栏背景色 */
   }
   
   ion-title {
@@ -49,15 +48,15 @@ ion-header {
   }
   
   
-  ion-button {
-    --background: #3880ff; /* 设置按钮背景色 */
-    --color: white; /* 设置按钮文字颜色 */
-    --border-radius: 8px; /* 设置按钮圆角 */
-    padding: 12px;
-    font-size: 1.1em;
-    margin-top: 20px;
-    transition: transform 0.2s ease-in-out;
-  }
+  // ion-button {
+  //   --background: #33ffcc; /* 设置按钮背景色 */
+  //   --color: white; /* 设置按钮文字颜色 */
+  //   --border-radius: 8px; /* 设置按钮圆角 */
+  //   padding: 12px;
+  //   font-size: 1.1em;
+  //   margin-top: 20px;
+  //   transition: transform 0.2s ease-in-out;
+  // }
   
   ion-button:hover {
     transform: scale(1.05); /* 按钮悬停效果 */
@@ -138,4 +137,21 @@ ion-input {
       padding: 10px;
     }
   }
-  
+  
+
+  .response-container {
+    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
+    border-radius: 12px; /* 圆角边框 */
+    padding: 16px; /* 内边距，确保内容不会贴边 */
+    margin-top: 16px; /* 顶部间距 */
+    margin-bottom: 16px; /* 底部间距 */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+    overflow: hidden; /* 防止内容溢出圆角边界 */
+  }
+  
+  /* 可选：如果需要让Markdown内容更好地展示 */
+  .content-style {
+    font-size: 16px; /* 设置字体大小 */
+    line-height: 1.6; /* 行间距 */
+    color: #333; /* 字体颜色 */
+  }

smarteat-app/src/app/tab2/tab2.page.ts

@@ -1,7 +1,74 @@
+// import { Component } from '@angular/core';
+// import { IonicModule } from '@ionic/angular';  // 这里引入 IonicModule
+// import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+// import { FmodeChatCompletion,MarkdownPreviewModule} from 'fmode-ng';
+
+// @Component({
+//   selector: 'app-tab2',
+//   templateUrl: 'tab2.page.html',
+//   styleUrls: ['tab2.page.scss'],
+//   standalone: true,
+//   imports: [
+//     ExploreContainerComponent,
+//     IonicModule, // 引入 IonicModule
+//     MarkdownPreviewModule,
+//   ],
+// })
+// export class Tab2Page {
+//   ngOnInit(){}
+//   constructor() {}
+
+//   // 用户输入提示词
+//   qunti: string = ""
+  
+//   quntiInput(ev: any) {
+//     this.qunti = ev.detail.value;
+//   }
+//   // 用户输入提示词
+//   jikou: string = ""
+  
+//   jikouInput(ev: any) {
+//     this.jikou = ev.detail.value;
+//   }
+//   // 用户输入提示词
+//   userPrompt: string = ""
+  
+//   promptInput(ev: any) {
+//     this.userPrompt = ev.detail.value;
+//   }
+  
+//   // 属性：组件内用于展示消息内容的变量
+//   responseMsg: any = ""
+//   // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+//   isComplete:boolean=false;
+//   sendMessage() {
+//     console.log("create")
+
+//     let PromptTemplate=`
+//     你是一名专业的饮食营养规划师，拥有丰富的营养学背景和实践经验。你的工作是为不同需求的人群提供个性化的饮食规划，帮助他们实现健康目标，如减肥、增肌、健康维护或疾病管理。
+//     你可以根据用户的需求为客户设计量身定制具体的饮食方案。
+//     当前来咨询的用户群体是${this.qunti},用户的饮食忌口是${this.jikou}需求是${this.userPrompt}`
+//     let completion = new FmodeChatCompletion([
+//       {role: "system", content: ""},
+//       {role: "user", content: this.userPrompt}
+//     ])
+//     completion.sendCompletion().subscribe((message: any) => {
+//       // 打印消息体
+//       console.log(message.content)
+//       // 赋值消息内容给组件内属性
+//       this.responseMsg = message.content
+//       if(message?.complete){
+//         this.isComplete=true
+//       }
+//     })
+//   }
+// }
+
+
 import { Component } from '@angular/core';
 import { IonicModule } from '@ionic/angular';  // 这里引入 IonicModule
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-import { FmodeChatCompletion,MarkdownPreviewModule} from 'fmode-ng';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-tab2',
@@ -15,51 +82,62 @@ import { FmodeChatCompletion,MarkdownPreviewModule} from 'fmode-ng';
   ],
 })
 export class Tab2Page {
-  ngOnInit(){}
+  ngOnInit() {}
   constructor() {}
 
   // 用户输入提示词
-  qunti: string = ""
-  
+  qunti: string = "";
+  jikou: string = "";
+  userPrompt: string = "";
+
+  // 用户输入的需求
   quntiInput(ev: any) {
     this.qunti = ev.detail.value;
   }
-  // 用户输入提示词
-  jikou: string = ""
-  
+
   jikouInput(ev: any) {
     this.jikou = ev.detail.value;
   }
-  // 用户输入提示词
-  userPrompt: string = ""
-  
+
   promptInput(ev: any) {
     this.userPrompt = ev.detail.value;
   }
-  
+
   // 属性：组件内用于展示消息内容的变量
-  responseMsg: any = ""
-  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
-  isComplete:boolean=false;
+  responseMsg: string = "";
+  // 是否完成生成
+  isComplete: boolean = false;
+
   sendMessage() {
-    console.log("create")
+    console.log("create");
+
+    // 每次生成新的饮食规划时，首先清空旧的规划
+    this.responseMsg = "";  // 清空旧的响应消息
+    this.isComplete = false; // 重置完成状态
+    // 拼接用户输入的需求
+    let newPrompt = `
+      你是一名专业的饮食营养规划师，拥有丰富的营养学背景和实践经验。你的工作是为不同需求的人群提供个性化的饮食规划，帮助他们实现健康目标，如减肥、增肌、健康维护或疾病管理。
+      你可以根据用户的需求为客户设计量身定制具体的饮食方案。
+      当前来咨询的用户群体是${this.qunti}，用户的饮食忌口是${this.jikou}，需求是${this.userPrompt}.
+    `;
 
-    let PromptTemplate=`
-    你是一名专业的饮食营养规划师，拥有丰富的营养学背景和实践经验。你的工作是为不同需求的人群提供个性化的饮食规划，帮助他们实现健康目标，如减肥、增肌、健康维护或疾病管理。
-    你可以根据用户的需求为客户设计量身定制具体的饮食方案。
-    当前来咨询的用户群体是${this.qunti},用户的饮食忌口是${this.jikou}需求是${this.userPrompt}`
+    // 创建消息请求，传递完整的需求
     let completion = new FmodeChatCompletion([
-      {role: "system", content: ""},
-      {role: "user", content: this.userPrompt}
-    ])
+      { role: "system", content: "" },
+      { role: "user", content: newPrompt }
+    ]);
+
+    // 执行生成并订阅返回结果
     completion.sendCompletion().subscribe((message: any) => {
-      // 打印消息体
-      console.log(message.content)
-      // 赋值消息内容给组件内属性
-      this.responseMsg = message.content
-      if(message?.complete){
-        this.isComplete=true
+      console.log(message.content);
+
+      // 如果有新内容，更新组件的响应消息，覆盖旧的规划
+      this.responseMsg = message.content;
+
+      // 如果返回内容标记为完成，则更新状态
+      if (message?.complete) {
+        this.isComplete = true;
       }
-    })
+    });
   }
 }

smarteat-app/src/app/tabs/tabs.routes.ts

@@ -26,6 +26,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../page-edit/page-edit.component').then((m) => m.PageEditComponent),
       },
+      {
+        path: 'tips',
+        loadComponent: () =>
+          import('../health-tips/health-tips.component').then((m) => m.HealthTipsComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

smarteat-app/src/theme/variables.scss

@@ -1,2 +1,13 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+
+  ion-button {
+    border-radius: 12px; /* 按钮圆角 */
+    --background: #33ffcc;   /* 设置背景色为 #33ffcc */
+    color: #333; /* 按钮中文字的颜色 */
+    font-weight: bold; /* 按钮字体加粗 */
+    text-align: center; /* 确保按钮文字水平居中 */
+    display: flex; /* 使用 flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+  }