refactor:Redesign the UI interface

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

@@ -7,19 +7,28 @@
 </ion-header>
 <!--正文部分-->
 <ion-content>
-  <!--性别选择，包含两个大卡片-->
+  <!--性别选择，包含两个卡片-->
   <div id="gender">
-    <ion-card id="gentel" (click)="toggleGentelActive()">
-      <ion-img [src]="getImageSrc(gentelIsActive,'gentel')" class="transition-image"></ion-img>
+    <ion-card *ngFor="let i of [0,1]" (click)="toggleActive(gender,i,'gender')">
+      <ion-img [src]="getImageSrc(gender,i,'gender' + (i+1))"></ion-img>
     </ion-card>
-    <ion-card id="lady" (click)="toggleLadyActive()">
-      <ion-img [src]="getImageSrc(ladyIsActive,'lady')" class="transition-image"></ion-img>
+  </div>
+  <!--年龄选择，包含四个卡片-->
+  <div id="age">
+    <ion-card *ngFor="let i of [0,1,2,3]" (click)="toggleActive(age,i,'age')">
+      <ion-img [src]="getImageSrc(age,i,'age' + (i+1))"></ion-img>
+    </ion-card>
+  </div>
+  <!--身高选择，包含五个卡片-->
+  <div id="height">
+    <ion-card *ngFor="let i of [0,1,2,3,4]" (click)="toggleActive(height,i,'height')">
+      <ion-img [src]="getImageSrc(height,i, 'height' + (i+1))"></ion-img>
     </ion-card>
   </div>
   <!--风格描述输入框-->
   <div id="styleDesc">
     <ion-textarea label="风格描述" labelPlacement="floating" fill="solid" [autoGrow]="true"
-      [(ngModel)]="suppleInput"></ion-textarea>
+      [(ngModel)]="styleDesc"></ion-textarea>
     <ion-text (click)="onHelperTextClick()" class="helper-text">没有想法？点击展开</ion-text>
   </div>
   <!--可供用户选择的提示词，默认隐藏，通过点击风格输入框中的helper-text展开-->

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

@@ -41,16 +41,51 @@ ion-content {
     width: 95%;
     margin: 15px auto;
     text-align: center;
+    background-color: #f0a5d7;
+    border-radius: 15px;
+    padding: 10px;
   }
 
-  #gentel,
-  #lady {
+  #gender ion-card {
     display: inline-block;
     width: 46%;
     margin: 0 2%;
     border-radius: 15px;
   }
 
+  // 以下为年龄选择框的样式
+  #age {
+    width: 95%;
+    margin: 15px auto;
+    text-align: center;
+    background-color: #85e2ff;
+    border-radius: 15px;
+    padding: 10px;
+  }
+
+  #age ion-card {
+    display: inline-block;
+    width: 22%;
+    margin: 0 1%;
+    border-radius: 15px;
+  }
+
+  //以下为身高选择框的样式
+  #height {
+    width: 95%;
+    margin: 15px auto;
+    text-align: center;
+    background-color: #b8a5f0;
+    border-radius: 15px;
+    padding: 10px;
+  }
+
+  #height ion-card {
+    display: inline-block;
+    width: 18%;
+    margin: 0 1%;
+    border-radius: 15px;
+  }
   //以下为风格输入框的样式
   #styleDesc {
     width: 95%;
@@ -61,16 +96,18 @@ ion-content {
     --border-radius: 15px;
     --background: #70e7ab;
     width: 100%;
+
     @font-face {
-      font-family: fangsong;
-      src: url(/assets/generate-option-style/SIMFANG.TTF);
+      font-family: 'handWritten';
+      src: url(/assets/fonts/handWritten.woff);
     }
-    font-family: fangsong;
-    font-size: 20px;
+
+    font-family: 'handWritten';
+    font-size: 22px;
   }
 
   .helper-text {
-    font-family: fangsong;
+    font-family: 'handWritten';
     font-size: 14px;
     color: #999;
   }

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

@@ -13,33 +13,19 @@ addIcons({ 'arrow-back-outline': arrowBackOutline });
   standalone: true,
   imports: [IonicModule, CommonModule, FormsModule],
 })
-
 export class GenerateOptionComponent implements OnInit {
-  gentelIsActive = false;
-  ladyIsActive = false;
-  userProfile: {
-    gender: string;
-    age: string;
-    height: string;
-    weight: string;
-    season: string;
-    regStyle: string;
-    sceFunction: string;
-    dsgPhilosophy: string;
-    artStyle: string;
-    color: string;
-  } = {
-      gender: '不限制',
-      age: '不限制',
-      height: '不限制',
-      weight: '不限制',
-      season: '不限制',
-      regStyle: '不限制',
-      sceFunction: '不限制',
-      dsgPhilosophy: '不限制',
-      artStyle: '不限制',
-      color: '不限制',
-    }
+  userProfile: UserProfile = {
+    gender: '不限制',
+    age: '不限制',
+    height: '不限制',
+    weight: '不限制',
+    season: '不限制',
+    regStyle: '不限制',
+    sceFunction: '不限制',
+    dsgPhilosophy: '不限制',
+    artStyle: '不限制',
+    color: '不限制',
+   }
   //构造器
   constructor(private router: Router, private navCtrl: NavController) { }
   //初始化
@@ -49,39 +35,56 @@ export class GenerateOptionComponent implements OnInit {
   goBack() {
     this.navCtrl.back();
   }
-
-  toggleGentelActive() {
-    this.gentelIsActive = !this.gentelIsActive;
-    this.ladyIsActive = false;
-  }
-  toggleLadyActive() {
-    this.ladyIsActive = !this.ladyIsActive;
-    this.gentelIsActive = false;
+  //性别选项卡定义变量,第一位为男，第二位为女
+  gender: { [key: string]: boolean } = {
+    '男': false,
+    '女': false
+  };
+  //年龄选项卡定义变量
+  age: { [key: string]: boolean } = {
+    '20岁以下': false,
+    '20-30岁': false,
+    '30-40岁': false,
+    '40岁以上': false
+  };
+  //身高选项卡定义变量
+  height: { [key: string]: boolean } = {
+    '160cm以下': false,
+    '160-170cm': false,
+    '170-180cm': false,
+    '180-190cm': false,
+    '190cm以上': false
+  };
+  /**
+   * @切换选项卡
+   * 1.将其他选项卡设置为false
+   * 2.将当前选项卡设置为true
+   * 3.将true对应的键赋值给userProfile中对应的属性
+   */
+  toggleActive(option: { [key: string]: boolean }, index: number,name: string) {
+    for (const optkey in option) {
+      option[optkey] = false;
+    }
+    const keys = Object.keys(option); // 获取 option 对象中的所有键
+    const selectedKey = keys[index]; // 根据索引找到选中的键
+    // 将选中的键对应的值设置为 true
+    option[selectedKey] = true;
+    // 更新 userProfile 中的对应字段
+    this.userProfile[name as keyof UserProfile] = selectedKey;
+    console.log(this.userProfile);
   }
-  getImageSrc(isActive: boolean, gender: string): string {
-    return isActive ? '/assets/generate-option-style/' + gender + '-isActive-true.png' : '/assets/generate-option-style/' + gender + '-isActive-false.png';
+  /**
+   * 获取图片路径
+  */
+  getImageSrc(option: { [key: string]: boolean }, index: number, String: string): string {
+    const keys = Object.keys(option); // 获取 option 对象中的所有键
+    const selectedKey = keys[index]; // 根据索引找到选中的键
+    const isActive = option[selectedKey];
+    return isActive ? '/assets/generate-option-style/' + String + '-isActive-true.png' : '/assets/generate-option-style/' + String + '-isActive-false.png';
   }
+
   //选项卡结构配置数据
   cards = [
-    {
-      id: '年龄',
-      chips: [
-        { id: 1, isElected: false, label: '20岁以下' },
-        { id: 2, isElected: false, label: '20-30岁' },
-        { id: 3, isElected: false, label: '30-40岁' },
-        { id: 4, isElected: false, label: '40岁以上' },
-      ],
-    },
-    {
-      id: '身高',
-      chips: [
-        { id: 1, isElected: false, label: '160以下' },
-        { id: 2, isElected: false, label: '160-170cm' },
-        { id: 3, isElected: false, label: '170-180cm' },
-        { id: 4, isElected: false, label: '180-190cm' },
-        { id: 5, isElected: false, label: '190以上' },
-      ],
-    },
     {
       id: '体重',
       chips: [
@@ -173,7 +176,7 @@ export class GenerateOptionComponent implements OnInit {
 
 
   //补充说明
-  suppleInput: string = '';
+  styleDesc: string = '';
   //用户提示词
   userPrompt: string = '';
 
@@ -186,12 +189,6 @@ export class GenerateOptionComponent implements OnInit {
         });
 
         switch (card.id) {
-          case '年龄':
-            this.userProfile.age = card.chips[chipId - 1].label;
-            break;
-          case '身高':
-            this.userProfile.height = card.chips[chipId - 1].label;
-            break;
           case '体重':
             this.userProfile.weight = card.chips[chipId - 1].label;
             break;
@@ -250,7 +247,7 @@ export class GenerateOptionComponent implements OnInit {
       "设计理念：" + this.userProfile.dsgPhilosophy + "\n" +
       "艺术风格：" + this.userProfile.artStyle + "\n" +
       "色彩搭配：" + this.userProfile.color + "\n" +
-      "补充说明：" + this.suppleInput + "\n";
+      "补充说明：" + this.styleDesc + "\n";
     console.log(this.userPrompt)
   }
 
@@ -265,7 +262,19 @@ export class GenerateOptionComponent implements OnInit {
   }
   sendMsgAndGoGenerateResult() {
     this.sendMsg();
-    this.goChatPanel();
+    //this.goChatPanel();
   }
 }
 
+type UserProfile = {
+  gender: string;
+  age: string;
+  height: string;
+  weight: string;
+  season: string;
+  regStyle: string;
+  sceFunction: string;
+  dsgPhilosophy: string;
+  artStyle: string;
+  color: string;
+};