refactor:Redesign the UI interface and AI task chain

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

@@ -6,6 +6,15 @@
 </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>
+    <ion-card id="lady" (click)="toggleLadyActive()">
+      <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>

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

@@ -1,42 +1,64 @@
 ion-header {
-    background-color: #f8f8f8;
+  background-color: #f8f8f8;
+  padding: 10px;
+  padding-top: 30px;
+  color: black;
+  height: 60px;
+  box-shadow: none;
+
+  .header-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 100%;
+    /* 确保容器占满整个 header 高度 */
     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;
-      }
+  }
+
+  .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;
+  --background: #f8f8f8 !important;
+  --color: black;
+//以下为性别选择框的样式
+  #gender {
+    width: 95%;
+    margin: 0 auto;
+    text-align: center;
+  }
 
-    ion-icon {
-        color: black;
-    }
+  #gentel,
+  #lady {
+    display: inline-block;
+    width: 46%;
+    margin: 0 2%;
+    border-radius: 15px;
+  }
+
+
+  ion-icon {
+    color: black;
+  }
 
-    ion-card {
+  ion-card {
 
-        .isElected {
-            --color: 'success';
-        }
+    .isElected {
+      --color: 'success';
     }
+  }
 }

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

@@ -15,6 +15,8 @@ addIcons({ 'arrow-back-outline': arrowBackOutline });
 })
 
 export class GenerateOptionComponent implements OnInit {
+  gentelIsActive = false;
+  ladyIsActive = false;
   userProfile: {
     gender: string;
     age: string;
@@ -47,15 +49,20 @@ 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;
+  }
+  getImageSrc(isActive: boolean, gender: string): string {
+    return isActive ? '/assets/generate-option-style/' + gender + '-isActive-true.png' : '/assets/generate-option-style/' + gender + '-isActive-false.png';
+  }
   //选项卡结构配置数据
   cards = [
-    {
-      id: '性别',
-      chips: [
-        { id: 1, isElected: false, label: '男' },
-        { id: 2, isElected: false, label: '女' },
-      ],
-    },
     {
       id: '年龄',
       chips: [
@@ -170,7 +177,7 @@ export class GenerateOptionComponent implements OnInit {
   suppleInput: string = '';
   //用户提示词
   userPrompt: string = '';
-  
+
   //点击选项卡事件
   toggleChip(cardId: string, chipId: number): void {
     this.cards.forEach((card) => {
@@ -235,7 +242,7 @@ export class GenerateOptionComponent implements OnInit {
       "手表：佩戴一款简约风格的手表，金属表带或皮表带均可，展现成熟稳重的气质。\n" +
       "公文包：选择一款深色的公文包，材质为皮革或优质帆布，既实用又具有商务气息。\n" +
       "场景功能：适合在办公室、商务会议、午餐约会等场合穿着，整体搭配既显得专业又不失时尚感，适合夏季通勤的需求。\n" +
-      "以上模板仅供参考，可以写的更详细一些，但不要过于繁琐和冗长。\n"+
+      "以上模板仅供参考，可以写的更详细一些，但不要过于繁琐和冗长。\n" +
       "以下内容为用户需求:\n" +
       "性别：" + this.userProfile.gender + "\n" +
       "年龄：" + this.userProfile.age + "\n" +