新增：接受输入组件

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

@@ -1,3 +1,20 @@
-<p>
-  generate-option works!
-</p>
+<ion-header>
+  个性化生成
+</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-chip>
+  </ion-card>
+  <ion-textarea label="补充" [autoGrow]="true">
+
+  </ion-textarea>
+
+  <ion-button (click)="generateResult()">
+    生成
+  </ion-button>
+</ion-content>

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

@@ -0,0 +1,21 @@
+ion-header {
+    background-color: #f8f8f8;
+    text-align: center;
+    color: black;
+    height: 50px;
+    box-shadow: none;
+}
+
+ion-content {
+    --background: #f8f8f8 !important;
+    --color: black;
+    ion-icon {
+        color: black;
+    }
+    ion-card{
+        
+        .isElected{
+            --color:'success';
+        }
+    }
+}

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

@@ -1,15 +1,79 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { pause } from 'ionicons/icons';
 
 @Component({
   selector: 'app-generate-option',
   templateUrl: './generate-option.component.html',
   styleUrls: ['./generate-option.component.scss'],
   standalone: true,
+  imports: [ IonicModule,CommonModule ],
 })
 export class GenerateOptionComponent  implements OnInit {
 
+  cards = [
+    {
+      id: 'gender',
+      chips: [
+        { id: 1, isElected: false ,label:'男'},
+        { id: 2, isElected: false ,label:'女'},
+      ],
+    },
+    {
+      id: 'season',
+      chips: [
+        { id: 1, isElected: false ,label:'春季'},
+        { id: 2, isElected: false ,label:'夏季'},
+        { id: 3, isElected: false ,label:'秋季'},
+        { id: 4, isElected: false ,label:'冬季'},
+      ],
+    },
+  ];
+
+
   constructor() { }
 
-  ngOnInit() {}
+  ngOnInit() {
+    addIcons({pause})
+  }
+
+  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)
+            break;
+          case 'season':
+            this.setSeason(card.chips[chipId-1].label)
+            break;
+        }
+      }
+    });
+  }
+
+  //性别
+  gender: string='';
+  setGender(gender: string){
+    this.gender = gender;
+  }
+  //季节
+  season: string='';
+  setSeason(season: string){
+    this.season = season;
+  }
+
 
+  //生成结果
+  generateResult(){
+    console.log(this.gender)
+    console.log(this.season)
+    console.log("开始生成！")
+  }
 }

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

@@ -0,0 +1,3 @@
+<p>
+  generate-result works!
+</p>

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

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-generate-result',
+  templateUrl: './generate-result.component.html',
+  styleUrls: ['./generate-result.component.scss'],
+  standalone: true,
+})
+export class GenerateResultComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}