feat:慧吃小组手

smarteat-app/package.json

@@ -27,6 +27,7 @@
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
     "@ionic/angular": "^8.0.0",
+    "fmode-ng": "^0.0.62",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

@@ -1,17 +1,31 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 2
+      慧吃小助手
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <h1>饮食群体</h1>
+  <ion-input [value]="qunti" (ionInput)="quntiInput($event)" placeholder="文本提示词" autoGrow="true"></ion-input>
+  <h1>饮食忌口</h1>
+  <ion-input [value]="jikou" (ionInput)="jikouInput($event)" placeholder="文本提示词" autoGrow="true"></ion-input>
+  <!-- 文本域：生成提示词 -->
+   <h1>需求描述</h1>
+  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">饮食方案生成</ion-button>
+  
+  <!-- 展示：返回消息内容 -->
+   @if(!isComplete){
+    <div>{{responseMsg}}</div>
+   }
+  
+  @if(isComplete){
+    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+  }
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
 </ion-content>
+

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

@@ -0,0 +1,112 @@
+/* 全局样式 */
+ion-header {
+    --background: #3880ff; /* 设置header背景色 */
+    --color: white; /* 设置文字颜色 */
+    // padding: 10px 0;
+  }
+  
+  ion-toolbar {
+    --background: #3880ff; /* 设置工具栏背景色 */
+  }
+  
+  ion-title {
+    // font-size: 1.8em;
+    font-weight: bold;
+    color: white; /* 设置标题文字颜色 */
+  }
+  
+  ion-content {
+    --background: #f4f4f4; /* 设置页面背景色 */
+    padding: 20px;
+    font-family: 'Arial', sans-serif;
+  }
+  
+  h1 {
+    font-size: 1.6em;
+    margin-bottom: 15px;
+    color: #333;
+  }
+  
+  ion-input,
+  ion-textarea {
+    width: 100%; /* 确保宽度相同 */
+    --padding-start: 10px; /* 设置统一的左内边距 */
+    --padding-end: 10px;   /* 设置统一的右内边距 */
+    --border-radius: 8px;  /* 设置圆角 */
+    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+    font-size: 1em; /* 设置相同的字体大小 */
+    padding: 12px; /* 统一内边距 */
+    margin-bottom: 20px; /* 统一下边距 */
+  }
+  
+  ion-input {
+    --background: white;
+  }
+  
+  ion-textarea {
+    --background: white;
+  }
+  
+  
+  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:hover {
+    transform: scale(1.05); /* 按钮悬停效果 */
+  }
+  
+  .content-style {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加卡片阴影效果 */
+    margin-top: 20px;
+    font-size: 1.2em;
+    line-height: 1.6;
+  }
+
+  ion-input,
+  ion-textarea {
+    --background: white;
+    --box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 添加输入框阴影 */
+    padding: 12px;
+    font-size: 1em;
+  }
+  
+  div {
+    padding: 20px;
+    background-color: #f8f8f8;
+    border-radius: 8px;
+    margin-top: 20px;
+    font-size: 1.1em;
+    color: #333;
+  }
+  
+  @media (max-width: 767px) {
+    ion-title {
+      font-size: 1.4em;
+    }
+  
+    h1 {
+      font-size: 1.4em;
+    }
+  
+    ion-input,
+    ion-textarea {
+      font-size: 1em;
+      padding: 10px;
+    }
+  
+    ion-button {
+      font-size: 1em;
+      padding: 10px;
+    }
+  }
+  

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

@@ -1,16 +1,65 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+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: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  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
+      }
+    })
+  }
 }

smarteat-app/src/main.ts

@@ -5,10 +5,29 @@ import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalo
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 
+
+// 引用HttpClient方法
+import { provideHttpClient } from '@angular/common/http';
+// 引用移动端授权检测供应器
+import { Diagnostic } from '@awesome-cordova-plugins/diagnostic/ngx';
+// 设置Parse服务属性
+import Parse from "parse";
+Parse.initialize("ncloudmaster");
+Parse.serverURL = "https://server.fmode.cn/parse";
+localStorage.setItem("NOVA_APIG_SERVER", 'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY24lMkZhcGklMkZhcGlnJTJG')
+
+// 注意：替换Token 根据Token设置Parse服务帐套权限
+Parse.User.become('r:c103df60759490ed08d6353921975885')
+
+
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),
+    // 添加HttpClient供应器
+    provideHttpClient(),
+    // 添加Diagnostic
+    Diagnostic,
   ],
 });

smarteat-app/tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports":true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,