add a test page

newwisefitnessapp/src/app/tag-input/tag-input.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonInput, IonButton, IonChip, IonLabel, IonIcon } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -13,18 +13,25 @@ import { close, barbellOutline, personOutline, square, alarmOutline } from 'ioni
 })
 
 export class TagInputComponent {
-  tagInput: string = '';
-  tags: string[] = [];
+  tags: string[] = [];  // 标签列表
+  tagInput: string = '';  // 输入框的值
 
+  // 定义一个事件输出，类型为string[]
+  @Output() tagsChanged: EventEmitter<string[]> = new EventEmitter<string[]>();
+
+  // 添加标签方法
   addTag() {
-    if (this.tagInput.trim()) {
-      this.tags.push(this.tagInput.trim());
+    if (this.tagInput && !this.tags.includes(this.tagInput)) {
+      this.tags.push(this.tagInput);  // 将标签添加到数组
+      this.tagsChanged.emit(this.tags);  // 发射更新后的标签列表
       this.tagInput = '';  // 清空输入框
     }
   }
 
+  // 删除标签方法
   removeTag(tag: string) {
-    this.tags = this.tags.filter(t => t !== tag);  // 删除指定标签
+    this.tags = this.tags.filter(t => t !== tag);  // 从标签数组中移除
+    this.tagsChanged.emit(this.tags);  // 发射更新后的标签列表
   }
   constructor() {
     addIcons({ close, personOutline, barbellOutline, alarmOutline, square });

newwisefitnessapp/src/app/test-page/test-page.component.html

@@ -1 +1,54 @@
-<app-tag-input></app-tag-input>
+<!-- test-page.component.html -->
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>制定健身计划</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <div class="content">
+    <!-- 健身目标选择 -->
+    <h2>选择健身目标</h2>
+    <app-tag-input (tagsChanged)="onTagsChanged($event)"></app-tag-input>
+
+    <!-- 偏好设置 -->
+    <h3>偏好设置</h3>
+    <ion-item>
+      <ion-label>锻炼方式</ion-label>
+      <ion-select [(ngModel)]="exercisePreference">
+        <ion-select-option value="cardio">有氧</ion-select-option>
+        <ion-select-option value="strength">力量</ion-select-option>
+        <ion-select-option value="flexibility">柔韧性</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>每周锻炼频率</ion-label>
+      <ion-select [(ngModel)]="workoutFrequency">
+        <ion-select-option value="1">1次</ion-select-option>
+        <ion-select-option value="2">2次</ion-select-option>
+        <ion-select-option value="3">3次</ion-select-option>
+        <ion-select-option value="4">4次</ion-select-option>
+        <ion-select-option value="5">5次</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <!-- 身体数据输入 -->
+    <h3>身体数据</h3>
+    <ion-item>
+      <ion-label position="floating">身高</ion-label>
+      <ion-input type="number" [(ngModel)]="height" placeholder="请输入身高" required></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">体重</ion-label>
+      <ion-input type="number" [(ngModel)]="weight" placeholder="请输入体重" required></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">年龄</ion-label>
+      <ion-input type="number" [(ngModel)]="age" placeholder="请输入年龄" required></ion-input>
+    </ion-item>
+
+    <!-- 生成计划按钮 -->
+    <ion-button expand="full" (click)="generatePlan()">生成健身计划</ion-button>
+  </div>
+</ion-content>

newwisefitnessapp/src/app/test-page/test-page.component.ts

@@ -1,17 +1,45 @@
+// test-page.component.ts
 import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
 import { TagInputComponent } from '../tag-input/tag-input.component';
 
 @Component({
   selector: 'app-test-page',
   templateUrl: './test-page.component.html',
   styleUrls: ['./test-page.component.scss'],
-  imports: [TagInputComponent],
   standalone: true,
+  imports: [IonicModule, FormsModule, TagInputComponent]  // 导入必要的模块
 })
 export class TestPageComponent implements OnInit {
 
+  selectedTags: string[] = [];  // 用来存储选择的标签
+  exercisePreference: string = '';  // 锻炼方式偏好
+  workoutFrequency: string = '';  // 每周锻炼频率
+  height: number | null = null;  // 身高
+  weight: number | null = null;  // 体重
+  age: number | null = null;  // 年龄
+
   constructor() { }
 
   ngOnInit() { }
 
+  // 处理标签变化事件
+  onTagsChanged(tags: string[]) {
+    this.selectedTags = tags;
+    console.log('当前标签:', this.selectedTags);
+  }
+
+  // 生成健身计划的按钮点击处理
+  generatePlan() {
+    // 这里可以处理生成计划的逻辑
+    console.log('生成健身计划', {
+      tags: this.selectedTags,
+      exercisePreference: this.exercisePreference,
+      workoutFrequency: this.workoutFrequency,
+      height: this.height,
+      weight: this.weight,
+      age: this.age
+    });
+  }
 }