1

health-chamberlain/src/app/page-inquiry/page-inquiry.component.html

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

health-chamberlain/src/app/page-inquiry/page-inquiry.component.ts

@@ -1,15 +1,41 @@
 import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent,IonButton,IonTextarea,IonInput } from '@ionic/angular/standalone';
+/** 引用：从fmode-ng库引用FmodeChatCompletion类 */
+import { FmodeChatCompletion } from 'fmode-ng';
 
 @Component({
   selector: 'app-page-inquiry',
   templateUrl: './page-inquiry.component.html',
   styleUrls: ['./page-inquiry.component.scss'],
   standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
+    IonTextarea,IonInput
+    ],
 })
 export class PageInquiryComponent  implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
+  constructor() {}
+  ngOnInit(): void {
+    
+  }
+  // 用户输入提示词
+   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
+    })
+  }
 }

health-chamberlain/src/app/tab1/tab1.page.html

@@ -8,7 +8,7 @@
       <ion-button (click)="navigateToHealthManagement()">健康管理</ion-button>
       <ion-button (click)="navigateToMedicineRecommendations()">药物推荐</ion-button>
       <ion-button (click)="navigateToAbout()">关于我们</ion-button>
-      <ion-button (click)="navigateToUserProfile()">用户中心</ion-button>
+      
     </ion-buttons>
   </ion-toolbar>
 </ion-header>

health-chamberlain/src/app/tab1/tab1.page.ts

@@ -9,16 +9,22 @@ import { Router } from '@angular/router';
 
 
 
+
 @Component({
-  selector: 'app-your-component',
-  templateUrl: './your-component.component.html',
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonButton, IonGrid, IonRow, IonCol, IonCard, IonItem, IonLabel,IonSearchbar ,IonButtons, IonImg,
+IonIcon,IonCardContent,IonCardHeader,IonCardTitle
+   ],
 })
-export class YourComponent {
-
-  constructor(private router: Router) {}
+export class Tab1Page {
+ constructor(private router: Router) {}
 
   navigateToInquiry() {
-    this.router.navigate(['/inquiry']);
+    this.router.navigate(['/tabs/inquiry']);
   }
 
   navigateToHealthManagement() {
@@ -36,21 +42,6 @@ export class YourComponent {
   navigateToAbout() {
     this.router.navigate(['/about']);
   }
-}
-
 
-
-@Component({
-  selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonButton, IonGrid, IonRow, IonCol, IonCard, IonItem, IonLabel,IonSearchbar ,IonButtons, IonImg,
-IonIcon,IonCardContent,IonCardHeader,IonCardTitle
-   ],
-})
-export class Tab1Page {
-  constructor() {}
 }