9

healthyfood-app/angular.json

@@ -32,7 +32,29 @@
               }
             ],
             "styles": ["src/global.scss", "src/theme/variables.scss"],
-            "scripts": []
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "camelcase",
+              "decamelize",
+              "p-retry",
+              "crypto-js",
+              "jquery",
+              "markdown-it-abbr",
+              "markdown-it-deflist",
+              "markdown-it-footnote",
+              "markdown-it-ins",
+              "markdown-it-mark",
+              "markdown-it-ruby",
+              "markdown-it-sub",
+              "markdown-it-sup",
+              "mathjax-full",
+              "microsoft-cognitiveservices-speech-sdk",
+              "plantuml-encoder",
+              "recorder-core",
+              "spark-md5",
+              "querystring",
+              "semver"
+            ]
           },
           "configurations": {
             "production": {
@@ -145,4 +167,4 @@
       "setParserOptionsProject": true
     }
   }
-}
+}

healthyfood-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",

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

@@ -75,5 +75,6 @@
       </ion-button>
     </ion-card-content>
   </ion-card>
-
+`+
+ 
 </ion-content>

healthyfood-app/src/app/tab3/tab3.page.html

@@ -1,17 +1,52 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 3
+      健康轻食
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <div class="container">
+    <h1>饮食习惯</h1>
+    <ion-input 
+      [value]="qunti" 
+      (ionInput)="quntiInput($event)" 
+      placeholder="请写出平日的饮食" 
+      autoGrow="true">
+    </ion-input>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+    <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="full" 
+      class="submit-button">
+      饮食方案生成
+    </ion-button>
+    
+   
+  
+    <div *ngIf="!isComplete">
+      {{responseMsg}}
+    </div>
+  
+    <fm-markdown-preview *ngIf="isComplete" class="content-style" [content]="responseMsg"></fm-markdown-preview>
+
+
+</div>
+</ion-content>

healthyfood-app/src/app/tab3/tab3.page.scss

@@ -0,0 +1,101 @@
+/* 全局样式 */
+ion-header {
+    --background: #3880ff; /* 设置header背景色 */
+    --color: white; /* 设置文字颜色 */
+}
+
+ion-toolbar {
+    --background: #3880ff; /* 设置工具栏背景色 */
+}
+
+ion-title {
+    font-weight: bold;
+    color: white; /* 设置标题文字颜色 */
+}
+
+ion-content {
+    --background: #f4f4f4; /* 设置页面背景色 */
+    padding: 20px;
+    font-family: 'Arial', sans-serif;
+}
+
+.container {
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #ffffff; /* 白色背景 */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+}
+
+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; /* 统一下边距 */
+    --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); /* 按钮悬停效果 */
+}
+
+.response-message {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #e9f7ef; /* 轻绿色背景 */
+    border-radius: 8px;
+    color: #333;
+    font-size: 1em;
+    line-height: 1.4;
+}
+
+.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;
+}
+
+@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;
+    }
+}

healthyfood-app/src/app/tab3/tab3.page.spec.ts

@@ -4,7 +4,7 @@ import { Tab3Page } from './tab3.page';
 
 describe('Tab3Page', () => {
   let component: Tab3Page;
-  let fixture: ComponentFixture<Tab3Page>;
+  let fixture: ComponentFixture<Tab3Page>;;
 
   beforeEach(async () => {
     fixture = TestBed.createComponent(Tab3Page);
@@ -16,3 +16,4 @@ describe('Tab3Page', () => {
     expect(component).toBeTruthy();
   });
 });
+

healthyfood-app/src/app/tab3/tab3.page.ts

@@ -1,14 +1,62 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { IonicModule } from '@ionic/angular';  // 引入 IonicModule
+import { IonTextarea } from '@ionic/angular/standalone';  // 引入 IonicModule
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    ExploreContainerComponent,
+    IonicModule, // 引入 IonicModule
+    MarkdownPreviewModule,
+  ],
 })
 export class Tab3Page {
+  qunti: string = "";
+  jikou: string = "";
+  userPrompt: string = "";
+  responseMsg: any = "";
+  isComplete: boolean = false;
+
   constructor() {}
-}
+
+  ngOnInit() {}
+
+  quntiInput(ev: any) {
+    this.qunti = ev.detail.value;
+  }
+
+  jikouInput(ev: any) {
+    this.jikou = ev.detail.value;
+  }
+
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
+  }
+
+  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;
+      }
+    });
+  }
+}

healthyfood-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:bb5812d9a6096cd0cfe815760b8ecf13')
+
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),
+     // 添加HttpClient供应器
+     provideHttpClient(),
+     // 添加Diagnostic
+     Diagnostic,
   ],
 });

healthyfood-app/tsconfig.json

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