修改：增加卡片标题，增加补充说明控制台反馈

E-Cover-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",

E-Cover-app/src/app/generate-option/generate-option.component.html

@@ -1,20 +1,22 @@
 <ion-header>
-  个性化生成
+  <div class="header-container">
+    <ion-icon name="arrow-back-outline" size="large" class="back-icon" (click)="goBack()"></ion-icon>
+    <p class="header-title">个性化生成</p>
+  </div>
 </ion-header>
+
 <ion-content>
-  <ion-icon name="pause" size="large"></ion-icon>示例标签
   <ion-card *ngFor="let card of cards">
-    <ion-chip *ngFor="let chip of card.chips" 
-    [class.isElected]="chip.isElected" 
-    (click)="toggleChip(card.id, chip.id)">
-    {{ chip.label }}
+    <ion-card-header>
+      <ion-card-title>{{ card.id }}</ion-card-title>
+    </ion-card-header>
+    <ion-chip *ngFor="let chip of card.chips" [class.isElected]="chip.isElected" (click)="toggleChip(card.id, chip.id)">
+      {{ chip.label }}
     </ion-chip>
   </ion-card>
-  <ion-textarea label="补充" [autoGrow]="true">
-
-  </ion-textarea>
+  <ion-textarea label="补充" [autoGrow]="true" [(ngModel)]="suppleInput"></ion-textarea>
 
-  <ion-button (click)="generateResult()">
+  <ion-button (click)="sendMsgAndGoGenerateResult()">
     生成
   </ion-button>
 </ion-content>

E-Cover-app/src/app/generate-option/generate-option.component.scss

@@ -1,21 +1,42 @@
 ion-header {
     background-color: #f8f8f8;
-    text-align: center;
+    padding: 10px;
     color: black;
     height: 50px;
     box-shadow: none;
+    .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        height: 100%; /* 确保容器占满整个 header 高度 */
+      }
+      
+      .back-icon {
+        position: absolute;
+        left: 10px; /* 图标距左侧的距离 */
+        cursor: pointer;
+      }
+      
+      .header-title {
+        font-size: 18px; /* 根据需要调整字体大小 */
+        font-weight: bold; /* 可选，加粗字体 */
+        margin: 0;
+      }
 }
 
 ion-content {
     --background: #f8f8f8 !important;
     --color: black;
+
     ion-icon {
         color: black;
     }
-    ion-card{
-        
-        .isElected{
-            --color:'success';
+
+    ion-card {
+
+        .isElected {
+            --color: 'success';
         }
     }
 }

E-Cover-app/src/app/generate-option/generate-option.component.ts

@@ -1,79 +1,97 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
+import { Component, input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, NavController } from '@ionic/angular';
 import { addIcons } from 'ionicons';
-import { pause } from 'ionicons/icons';
-
+import { arrowBackOutline } from 'ionicons/icons';
+import { FormsModule } from '@angular/forms';
+addIcons({ 'arrow-back-outline':arrowBackOutline });
 @Component({
   selector: 'app-generate-option',
   templateUrl: './generate-option.component.html',
   styleUrls: ['./generate-option.component.scss'],
   standalone: true,
-  imports: [ IonicModule,CommonModule ],
+  imports: [IonicModule, CommonModule, FormsModule],
 })
-export class GenerateOptionComponent  implements OnInit {
-
+export class GenerateOptionComponent implements OnInit {
+  //构造器
+  constructor(private router:Router,private navCtrl:NavController) { }
+  //初始化
+  ngOnInit() {
+  }
+  //返回按钮事件
+  goBack() {
+    this.navCtrl.back();
+  }
+  //选项卡结构配置数据
   cards = [
     {
-      id: 'gender',
+      id: '性别',
       chips: [
-        { id: 1, isElected: false ,label:'男'},
-        { id: 2, isElected: false ,label:'女'},
+        { id: 1, isElected: false, label: '男' },
+        { id: 2, isElected: false, label: '女' },
       ],
     },
     {
-      id: 'season',
+      id: '季节',
       chips: [
-        { id: 1, isElected: false ,label:'春季'},
-        { id: 2, isElected: false ,label:'夏季'},
-        { id: 3, isElected: false ,label:'秋季'},
-        { id: 4, isElected: false ,label:'冬季'},
+        { id: 1, isElected: false, label: '春季' },
+        { id: 2, isElected: false, label: '夏季' },
+        { id: 3, isElected: false, label: '秋季' },
+        { id: 4, isElected: false, label: '冬季' },
       ],
     },
   ];
-
-
-  constructor() { }
-
-  ngOnInit() {
-    addIcons({pause})
+  //变量初始化
+  //性别
+  gender: string = '';
+  setGender(gender: string) {
+    this.gender = gender;
   }
-
-  toggleChip(cardId: string, chipId: number):void {
+  //季节
+  season: string = '';
+  setSeason(season: string) {
+    this.season = season;
+  }
+  //补充说明
+  suppleInput: string = '';
+  //用户提示词
+  userPrompt: string = '';
+  //点击选项卡事件
+  toggleChip(cardId: string, chipId: number): void {
     this.cards.forEach((card) => {
       if (card.id === cardId) {
         card.chips.forEach((chip) => {
           chip.isElected = chip.id === chipId; // 当前点击的 chip 设为 active，其他设为 false
-          
+
         });
         switch (cardId) {
-          case 'gender':
-            this.setGender(card.chips[chipId-1].label)
+          case '性别':
+            this.setGender(card.chips[chipId - 1].label)
             break;
-          case 'season':
-            this.setSeason(card.chips[chipId-1].label)
+          case '季节':
+            this.setSeason(card.chips[chipId - 1].label)
             break;
         }
       }
     });
   }
 
-  //性别
-  gender: string='';
-  setGender(gender: string){
-    this.gender = gender;
-  }
-  //季节
-  season: string='';
-  setSeason(season: string){
-    this.season = season;
+  //生成传递提示词事件
+  sendMsg() {
+    this.userPrompt = "生成一位" + this.gender + "的" + this.season + "休闲穿搭图像，场景设定在公园的步道上。" +
+      "她穿着一件宽松的针织毛衣，搭配修身的黑色打底裤和白色运动鞋。配饰包括一条简约的手链和一顶时尚的帽子。" +
+      "背景是绿树成荫的公园，体现出轻松愉快的氛围。请注意色彩搭配和整体风格的协调。\n"+
+      "补充："+this.suppleInput;
+    console.log(this.userPrompt)
   }
 
+  goGenerateResult() {
+    this.router.navigate(['/generate-result']);
+  }
 
-  //生成结果
-  generateResult(){
-    console.log(this.gender)
-    console.log(this.season)
-    console.log("开始生成！")
+  sendMsgAndGoGenerateResult() {
+    this.sendMsg();
   }
 }
+

E-Cover-app/src/app/generate-result/generate-result.component.html

@@ -1,3 +1,5 @@
-<p>
-  generate-result works!
-</p>
+<!-- 文本域：生成提示词 -->
+<ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" [autoGrow]="true"></ion-textarea>
+  
+<!-- 展示：返回消息内容 -->
+<div>{{responseMsg}}</div>

E-Cover-app/src/app/generate-result/generate-result.component.ts

@@ -1,14 +1,39 @@
 import { Component, OnInit } from '@angular/core';
-
+import { ActivatedRoute } from '@angular/router';
+import { IonHeader, IonToolbar, IonTitle, IonContent,IonButton,IonTextarea } from '@ionic/angular/standalone';
+/** 引用：从fmode-ng库引用FmodeChatCompletion类 */
+import { FmodeChatCompletion } from 'fmode-ng';
 @Component({
   selector: 'app-generate-result',
   templateUrl: './generate-result.component.html',
   styleUrls: ['./generate-result.component.scss'],
   standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea],
 })
 export class GenerateResultComponent  implements OnInit {
+  userPrompt:string = this.route.snapshot.paramMap.get('prompt') || '你好';
+  responseMsg:any = "";
+
+  constructor(private route:ActivatedRoute) { }
 
-  constructor() { }
+  promptInput(ev:any){
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  fetchAIResponse(){
+    console.log("create")
+    let completion = new FmodeChatCompletion([
+      {role:"system",content:""},
+      {role:"user",content:this.userPrompt}
+    ])
+    completion.sendCompletion().subscribe(message=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+    })
+  }
 
   ngOnInit() {}
 

E-Cover-app/src/app/tab1/tab1.page.html

@@ -13,7 +13,7 @@
   <div style="background:none;">
       <ion-card>
           <ion-button fill="clear" (click)="goGenerateOption()">
-              <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
                   alt="button tab">
           </ion-button>
           <p>
@@ -23,7 +23,7 @@
 
       <ion-card>
           <ion-button fill="clear">
-              <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
                   alt="button tab">
           </ion-button>
           <p>
@@ -33,7 +33,7 @@
 
       <ion-card>
           <ion-button fill="clear">
-              <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
                   alt="button tab">
           </ion-button>
           <p>
@@ -43,7 +43,7 @@
 
       <ion-card>
           <ion-button fill="clear">
-              <img src="https://s1.imagehub.cc/images/2024/11/30/65240adeb8e5429ad600c181ab66d62e.png"
+              <img src="https://s3.bmp.ovh/imgs/2024/11/30/9db4f0142041d11f.png"
                   alt="button tab">
           </ion-button>
           <p>

E-Cover-app/src/app/tab1/tab1.page.ts

@@ -14,9 +14,9 @@ addIcons({ 'location-outline': locationOutline, 'notifications-outline': notific
 })
 export class Tab1Page {
   constructor(private router: Router) { }
-  //
+  //转到GenerateOption页面
   goGenerateOption() {
-    this.router.navigate(['/tabs/generate-option']);
+    this.router.navigate(['generateOption']);
   }
 }
 

E-Cover-app/src/app/tabs/tabs.page.html

@@ -2,7 +2,7 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <img src="https://s1.imagehub.cc/images/2024/11/28/335f5fde21b940a0caf8d8a5a12f6156.png"
+      <img src="https://s3.bmp.ovh/imgs/2024/11/30/446e2578ecf6ce17.png"
        alt="tab1 logo"
        style="height: 50px; width: 50px; ">
       <ion-label>首页</ion-label>

E-Cover-app/src/app/tabs/tabs.routes.ts

@@ -22,9 +22,9 @@ export const routes: Routes = [
           import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
       {
-        path: 'generate-option',
+        path: 'generateResult',
         loadComponent: () =>
-          import('../generate-option/generate-option.component').then((m) => m.GenerateOptionComponent),
+          import('../generate-result/generate-result.component').then((m) => m.GenerateResultComponent),
       },
       {
         path: '',
@@ -33,6 +33,11 @@ export const routes: Routes = [
       },
     ],
   },
+  {
+    path: 'generateOption',
+    loadComponent: () =>
+      import('../generate-option/generate-option.component').then((m) => m.GenerateOptionComponent),
+  },
   {
     path: '',
     redirectTo: '/tabs/tab1',

E-Cover-app/src/main.ts

@@ -5,10 +5,27 @@ 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:6ea5cf38303c672dbf8d47b72eed8d76")
+
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
     provideRouter(routes, withPreloading(PreloadAllModules)),
+    // 添加HttpClient供应器
+    provideHttpClient(),
+    // 添加Diagnostic
+    Diagnostic,
   ],
 });

E-Cover-app/tsconfig.json

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