refactor:Redesign the UI interface

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

@@ -25,11 +25,23 @@
       <ion-img [src]="getImageSrc(height,i, 'height' + (i+1))"></ion-img>
     </ion-card>
   </div>
+  <!--体重选择，包含五个卡片-->
+  <div id="weight">
+    <ion-card *ngFor="let i of [0,1,2,3,4]" (click)="toggleActive(weight,i,'weight')">
+      <ion-img [src]="getImageSrc(weight,i, 'weight' + (i+1))"></ion-img>
+    </ion-card>
+  </div>
+  <!--季节选择，包含四个卡片-->
+  <div id="season">
+    <ion-card *ngFor="let i of [0,1,2,3]" (click)="toggleActive(season,i,'season')">
+      <ion-img [src]="getImageSrc(season,i,'season' + (i+1))"></ion-img>
+    </ion-card>
+  </div>
   <!--风格描述输入框-->
   <div id="styleDesc">
     <ion-textarea label="风格描述" labelPlacement="floating" fill="solid" [autoGrow]="true"
       [(ngModel)]="styleDesc"></ion-textarea>
-    <ion-text (click)="onHelperTextClick()" class="helper-text">没有想法？点击展开</ion-text>
+    <ion-text (click)="onHelperTextClick()" id="helper-text">没有想法？点击展开</ion-text>
   </div>
   <!--可供用户选择的提示词，默认隐藏，通过点击风格输入框中的helper-text展开-->
   <div id="option-prompt">
@@ -47,4 +59,11 @@
   <ion-button (click)="sendMsgAndGoGenerateResult()">
     生成
   </ion-button>
-</ion-content>
+</ion-content>
+<div id="container">
+  <div id="popover-container">
+    <img style="width: 100px;" src="/assets/generate-option-style/load_animation.gif">
+    <ion-text>提示</ion-text>
+    <ion-button (click)="hidePopover()">确定</ion-button>
+  </div>
+</div>

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

@@ -86,6 +86,40 @@ ion-content {
     margin: 0 1%;
     border-radius: 15px;
   }
+
+  //以下为体重选择框的样式
+  #weight {
+    width: 95%;
+    margin: 15px auto;
+    text-align: center;
+    background-color: #fafdad;
+    border-radius: 15px;
+    padding: 10px;
+  }
+
+  #weight ion-card {
+    display: inline-block;
+    width: 18%;
+    margin: 0 1%;
+    border-radius: 15px;
+  }
+
+  //以下为季节选择框的样式
+  #season {
+    width: 95%;
+    margin: 15px auto;
+    text-align: center;
+    background-color: #ffd8a1;
+    border-radius: 15px;
+    padding: 10px;
+  }
+
+  #season ion-card {
+    display: inline-block;
+    width: 25%;
+    margin: 0;
+  }
+
   //以下为风格输入框的样式
   #styleDesc {
     width: 95%;
@@ -106,15 +140,14 @@ ion-content {
     font-size: 22px;
   }
 
-  .helper-text {
+  #helper-text {
     font-family: 'handWritten';
     font-size: 14px;
     color: #999;
   }
 
-
-  ion-icon {
-    color: black;
+  #option-prompt {
+    display: none;
   }
 
   ion-card {
@@ -123,4 +156,20 @@ ion-content {
       --color: 'success';
     }
   }
+}
+
+#container {
+  position:absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+#popover-container {
+  position: absolute;
+  width: 50%;
+  height: 20%;
+  top: 40%;
+  left: 25%;
+  background-color: white;
 }

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

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { IonicModule, NavController } from '@ionic/angular';
 import { addIcons } from 'ionicons';
@@ -14,6 +14,21 @@ addIcons({ 'arrow-back-outline': arrowBackOutline });
   imports: [IonicModule, CommonModule, FormsModule],
 })
 export class GenerateOptionComponent implements OnInit {
+  /**
+   * @构造和初始化
+   */
+  //构造器
+  constructor(private router: Router, private navCtrl: NavController) { }
+  //初始化
+  ngOnInit() { }
+  //返回按钮事件
+  goBack() {
+    this.navCtrl.back();
+  }
+  /**
+   * @选项卡定义变量
+  */
+  //用户信息定义变量
   userProfile: UserProfile = {
     gender: '不限制',
     age: '不限制',
@@ -25,17 +40,8 @@ export class GenerateOptionComponent implements OnInit {
     dsgPhilosophy: '不限制',
     artStyle: '不限制',
     color: '不限制',
-   }
-  //构造器
-  constructor(private router: Router, private navCtrl: NavController) { }
-  //初始化
-  ngOnInit() {
-  }
-  //返回按钮事件
-  goBack() {
-    this.navCtrl.back();
-  }
-  //性别选项卡定义变量,第一位为男，第二位为女
+  };
+  //性别选项卡定义变量
   gender: { [key: string]: boolean } = {
     '男': false,
     '女': false
@@ -55,13 +61,28 @@ export class GenerateOptionComponent implements OnInit {
     '180-190cm': false,
     '190cm以上': false
   };
+  //体重选项卡定义变量
+  weight: { [key: string]: boolean } = {
+    '50kg以下': false,
+    '50-60kg': false,
+    '60-70kg': false,
+    '70-80kg': false,
+    '80kg以上': false
+  };
+  //季节选项卡定义变量
+  season: { [key: string]: boolean } = {
+    '春季': false,
+    '夏季': false,
+    '秋季': false,
+    '冬季': false
+  };
   /**
    * @切换选项卡
-   * 1.将其他选项卡设置为false
-   * 2.将当前选项卡设置为true
-   * 3.将true对应的键赋值给userProfile中对应的属性
+   * 1.option:字典对象
+   * 2.index:索引
+   * 3.name:字典变量名
    */
-  toggleActive(option: { [key: string]: boolean }, index: number,name: string) {
+  toggleActive(option: { [key: string]: boolean }, index: number, name: string) {
     for (const optkey in option) {
       option[optkey] = false;
     }
@@ -74,7 +95,10 @@ export class GenerateOptionComponent implements OnInit {
     console.log(this.userProfile);
   }
   /**
-   * 获取图片路径
+   * @获取图片路径
+   * 1.option:字典对象
+   * 2.index:索引
+   * 3.String:图片前缀字符串
   */
   getImageSrc(option: { [key: string]: boolean }, index: number, String: string): string {
     const keys = Object.keys(option); // 获取 option 对象中的所有键
@@ -85,25 +109,6 @@ export class GenerateOptionComponent implements OnInit {
 
   //选项卡结构配置数据
   cards = [
-    {
-      id: '体重',
-      chips: [
-        { id: 1, isElected: false, label: '50kg以下' },
-        { id: 2, isElected: false, label: '50-55kg' },
-        { id: 3, isElected: false, label: '55-60kg' },
-        { id: 4, isElected: false, label: '60-70kg' },
-        { id: 5, isElected: false, label: '70kg以上' },
-      ],
-    },
-    {
-      id: '季节',
-      chips: [
-        { id: 1, isElected: false, label: '春季' },
-        { id: 2, isElected: false, label: '夏季' },
-        { id: 3, isElected: false, label: '秋季' },
-        { id: 4, isElected: false, label: '冬季' },
-      ],
-    },
     {
       id: '区域风格',
       chips: [
@@ -251,21 +256,74 @@ export class GenerateOptionComponent implements OnInit {
     console.log(this.userPrompt)
   }
 
+  /**
+   * @跳转到聊天面板
+   * 调用路由跳转到chatPanel页面，并传递用户需求信息
+   */
   goChatPanel() {
     this.router.navigate(['/chatPanel'], {
       queryParams: { userPrompt: this.userPrompt }
     });
   }
+  /**
+   * @风格描述下的帮助文本点击事件
+   * 1. 将可选提示词展示或隐藏
+   * 2. 切换帮助文本的文字
+   */
   onHelperTextClick() {
-    // 处理点击事件的逻辑，比如打开一个对话框或执行其他操作
-    alert('你点击了帮助文本！');
+    let element = document.getElementById('option-prompt');
+    if (element) {
+      if (element.style.display === 'block') {
+        element.style.display = 'none';
+      } else {
+        element.style.display = 'block';
+      }
+    }
+    element = document.getElementById('helper-text')
+    if (element) {
+      if (element.textContent === '没有想法？点击展开') {
+        element.textContent = '收起'
+      } else {
+        element.textContent = '没有想法？点击展开'
+      }
+    }
   }
+
+  /**
+   * @提交生成判定
+   */
+  submitJudge() {
+    let element = document.getElementById('container');
+      if (element) {
+        // 直接切换元素的显示状态
+        element.style.display = 'block';
+      }
+  }
+  /**
+   * @提交生成终止返回
+   */
+  hidePopover() {
+    let element = document.getElementById('container');
+      if (element) {
+        // 直接切换元素的显示状态
+        element.style.display = 'none';
+      }
+  }
+  /**
+   * @发送提示词到下一个页面并跳转到生成结果页面
+   * 1.调用sendMsg方法
+   * 2.调用goChatPanel方法
+   */
   sendMsgAndGoGenerateResult() {
+    this.submitJudge();
     this.sendMsg();
     //this.goChatPanel();
   }
 }
-
+/**
+ * @用户信息结构
+ * 用于存储用户选择的信息生成提示词
+ */
 type UserProfile = {
   gender: string;
   age: string;

E-Cover-app/src/global.scss

@@ -34,4 +34,4 @@
 
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
-@import '@ionic/angular/css/palettes/dark.system.css';
+@import '@ionic/angular/css/palettes/dark.system.css';