refactor:Redesign the UI interface and AI task chain

E-Cover-app/angular.json

@@ -126,7 +126,10 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@ionic/angular-toolkit"]
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

E-Cover-app/package-lock.json

@@ -22,7 +22,7 @@
         "@capacitor/keyboard": "6.0.3",
         "@capacitor/status-bar": "6.0.2",
         "@ionic/angular": "^8.0.0",
-        "fmode-ng": "^0.0.62",
+        "fmode-ng": "^0.0.63",
         "ionicons": "^7.2.1",
         "rxjs": "~7.8.0",
         "swiper": "^11.1.15",
@@ -10379,9 +10379,9 @@
       "license": "ISC"
     },
     "node_modules/fmode-ng": {
-      "version": "0.0.62",
-      "resolved": "https://registry.npmmirror.com/fmode-ng/-/fmode-ng-0.0.62.tgz",
-      "integrity": "sha512-F0RzEu47NgKpaHp/vBEzjsU4efJ1lKLAbbdPE5hltj1W1cDaeht/i6UlEidid4FAEdAg7c9rrQrLgOh/zUfCsg==",
+      "version": "0.0.63",
+      "resolved": "https://registry.npmmirror.com/fmode-ng/-/fmode-ng-0.0.63.tgz",
+      "integrity": "sha512-gTiDZO2CchcTYAmlaweapasqV/8PdhG2vizJNn5dYZyXjgtrjyW+KeW5k2EVyIDvM1+bMGjjhGmr76Fc0TElxw==",
       "license": "COPYRIGHT © 未来飞马 未来全栈 www.fmode.cn All RIGHTS RESERVED",
       "dependencies": {
         "tslib": "^2.3.0"

E-Cover-app/package.json

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

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

@@ -10,6 +10,11 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./generate-option/generate-option.component').then((m) => m.GenerateOptionComponent),
   },
+  {
+    path: 'chatPanel',
+    loadComponent: () =>
+      import('./chat-panel/chat-panel.component').then((m) => m.ChatPanelComponent),
+  },
   {
     path: 'generateResult',
     loadComponent: () =>

E-Cover-app/src/app/chat-panel/chat-panel.component.html

@@ -0,0 +1,33 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Chat</ion-title>
+  </ion-toolbar>
+</ion-header>
+<!-- 聊天消息区域 -->
+<ion-content #content>
+  <div class="chat-container">
+    <div *ngFor="let message of messages"
+      [ngClass]="{'my-message': message.isMyMessage, 'other-message': !message.isMyMessage}">
+      <div class="message-content">
+        <ion-avatar slot="start" *ngIf="!message.isMyMessage">
+          <img src="https://via.placeholder.com/40" />
+        </ion-avatar>
+        <div class="message">{{ message.text }}</div> <!-- 消息内容 -->
+        <ion-avatar slot="end" *ngIf="message.isMyMessage">
+          <img src="https://via.placeholder.com/40" />
+        </ion-avatar>
+      </div>
+    </div>
+  </div>
+</ion-content>
+<!-- 输入框和发送按钮 -->
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-input [(ngModel)]="inputText" placeholder="Type a message..." (input)="onInputChange()"></ion-input>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button (click)="sendMessage()" [disabled]="!inputText.trim()">Send</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

E-Cover-app/src/app/chat-panel/chat-panel.component.scss

@@ -0,0 +1,53 @@
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 10px;
+}
+
+.message-content {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.my-message .message-content {
+  justify-content: flex-end;
+}
+
+.other-message .message-content {
+  justify-content: flex-start;
+}
+
+.my-message .message {
+  background-color: #0078ff; /* 自己的消息背景色 */
+  color: white;
+  border-radius: 20px;
+  padding: 10px 15px;
+  max-width: 70%;
+  word-wrap: break-word;
+  display: inline-block;
+}
+
+.other-message .message {
+  background-color: #f0f0f0; /* 对方的消息背景色 */
+  color: black;
+  border-radius: 20px;
+  padding: 10px 15px;
+  max-width: 70%;
+  word-wrap: break-word;
+  display: inline-block;
+}
+
+ion-avatar {
+  margin: 0 10px;
+}
+
+ion-button[disabled] {
+  opacity: 0.5;
+}
+
+ion-input {
+  flex-grow: 1;
+  margin-right: 10px;
+}

E-Cover-app/src/app/chat-panel/chat-panel.component.spec.ts

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

E-Cover-app/src/app/chat-panel/chat-panel.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+
+
+@Component({
+  selector: 'app-chat-panel',
+  templateUrl: './chat-panel.component.html',
+  styleUrls: ['./chat-panel.component.scss'],
+  standalone: true,
+  imports: [IonicModule, FormsModule, CommonModule],
+})
+export class ChatPanelComponent implements OnInit {
+  constructor(private route: ActivatedRoute) { }
+  userPrompt = ""
+  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      this.userPrompt = params['userPrompt'] || '';
+      this.initializeMessages();
+    });
+  }
+
+  initializeMessages() {
+    this.messages = [
+      { text: 'Hello, how are you?', isMyMessage: false },
+      { text: this.userPrompt + 'test', isMyMessage: true },
+    ];
+  }
+  // 模拟聊天消息数据
+  messages = [
+    { text: 'Hello, how are you?', isMyMessage: false },
+    { text: this.userPrompt + 'test', isMyMessage: true },
+  ];
+
+  inputText = ''; // 输入框的内容
+
+  // 处理输入框内容变化
+  onInputChange() {
+    if (this.inputText.trim()) {
+      // Input box resizes automatically based on content
+    }
+  }
+
+  // 发送消息
+  sendMessage() {
+    if (this.inputText.trim()) {
+      const newMessage = {
+        text: this.inputText,
+        isMyMessage: true
+      };
+      this.messages.push(newMessage); // 添加消息到聊天记录
+
+      // 清空输入框
+      this.inputText = '';
+
+      // 模拟对方回复
+      setTimeout(() => {
+        const replyMessage = {
+          text: 'Got it! I will check that.',
+          isMyMessage: false
+        };
+        this.messages.push(replyMessage);
+      }, 1000); // 模拟1秒后收到对方消息
+    }
+  }
+}

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

@@ -1,11 +1,13 @@
+<!--头部内容，包含标题和返回按钮-->
 <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>
+  <!--性别选择，包含两个大卡片-->
   <div id="gender">
     <ion-card id="gentel" (click)="toggleGentelActive()">
       <ion-img [src]="getImageSrc(gentelIsActive,'gentel')" class="transition-image"></ion-img>
@@ -14,16 +16,24 @@
       <ion-img [src]="getImageSrc(ladyIsActive,'lady')" class="transition-image"></ion-img>
     </ion-card>
   </div>
-
-  <ion-card *ngFor="let card of cards">
-    <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" [(ngModel)]="suppleInput"></ion-textarea>
+  <!--风格描述输入框-->
+  <div id="styleDesc">
+    <ion-textarea label="风格描述" labelPlacement="floating" fill="solid" [autoGrow]="true"
+      [(ngModel)]="suppleInput"></ion-textarea>
+    <ion-text (click)="onHelperTextClick()" class="helper-text">没有想法？点击展开</ion-text>
+  </div>
+  <!--可供用户选择的提示词，默认隐藏，通过点击风格输入框中的helper-text展开-->
+  <div id="option-prompt">
+    <ion-card *ngFor="let card of cards">
+      <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>
+  </div>
 
   <ion-button (click)="sendMsgAndGoGenerateResult()">
     生成

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

@@ -35,10 +35,11 @@ ion-header {
 ion-content {
   --background: #f8f8f8 !important;
   --color: black;
-//以下为性别选择框的样式
+
+  //以下为性别选择框的样式
   #gender {
     width: 95%;
-    margin: 0 auto;
+    margin: 15px auto;
     text-align: center;
   }
 
@@ -50,6 +51,30 @@ ion-content {
     border-radius: 15px;
   }
 
+  //以下为风格输入框的样式
+  #styleDesc {
+    width: 95%;
+    margin: 15px auto;
+  }
+
+  ion-textarea {
+    --border-radius: 15px;
+    --background: #70e7ab;
+    width: 100%;
+    @font-face {
+      font-family: fangsong;
+      src: url(/assets/generate-option-style/SIMFANG.TTF);
+    }
+    font-family: fangsong;
+    font-size: 20px;
+  }
+
+  .helper-text {
+    font-family: fangsong;
+    font-size: 14px;
+    color: #999;
+  }
+
 
   ion-icon {
     color: black;

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

@@ -170,7 +170,6 @@ export class GenerateOptionComponent implements OnInit {
       ],
     },
   ];
-  /*变量初始化*/
 
 
   //补充说明
@@ -187,9 +186,6 @@ export class GenerateOptionComponent implements OnInit {
         });
 
         switch (card.id) {
-          case '性别':
-            this.userProfile.gender = card.chips[chipId - 1].label;
-            break;
           case '年龄':
             this.userProfile.age = card.chips[chipId - 1].label;
             break;
@@ -258,15 +254,18 @@ export class GenerateOptionComponent implements OnInit {
     console.log(this.userPrompt)
   }
 
-  goGenerateResult() {
-    this.router.navigate(['/generateResult'], {
+  goChatPanel() {
+    this.router.navigate(['/chatPanel'], {
       queryParams: { userPrompt: this.userPrompt }
     });
   }
-
+  onHelperTextClick() {
+    // 处理点击事件的逻辑，比如打开一个对话框或执行其他操作
+    alert('你点击了帮助文本！');
+  }
   sendMsgAndGoGenerateResult() {
     this.sendMsg();
-    this.goGenerateResult();
+    this.goChatPanel();
   }
 }