202226701041/TFPower-app/src/app/page/aiplan-page/aiplan-page.component.html

<ion-header>
  <ion-toolbar>
    <ion-title>AIplan</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-card color="medium">
    <ion-card-header>
      <ion-card-title>AI小助手</ion-card-title>
      <ion-card-subtitle>填写以下信息，我来给你生成训练计划。</ion-card-subtitle>
    </ion-card-header>
    <ion-list>
      <ion-item>
        <ion-input label="训练类型" [value]="trainingType" [clearInput]="true" type="text" placeholder="修身、锻炼、出汗等"
          (ionInput)="userInputOntrainingType($event)" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-input label="性别" [value]="sex" [clearInput]="true" type="text" placeholder="男（女）"
          (ionInput)="userInputOnsex($event)" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-input label="体重(kg)" [value]="weight" type="number" placeholder="75" (ionInput)="userInputOnweight($event)"
          required></ion-input>
      </ion-item>
      <ion-item>
        <ion-input label="训练时间(min)" [value]="trainingTime" type="number" placeholder="45"
          (ionInput)="userInputOntrainingTime($event)" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-input label="训练强度" [value]="trainingIntensity" [clearInput]="true" type="text" placeholder="弱/中/强"
          (ionInput)="userInputOntrainingIntensity($event)" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-input label="训练部位" [value]="trainingSite" [clearInput]="true" type="text" placeholder="背部、小腿、大腿等"
          (ionInput)="userInputOntrainingSite($event)" required></ion-input>
      </ion-item>
      <ion-item>
        <!-- <ion-textarea label="其他要求" [autoGrow]="true" type="text" placeholder="任何要求都可以在这里提哦，亲"></ion-textarea> -->
        <ion-textarea label="其他需求" [value]="needs" [autoGrow]="true" labelPlacement="floating" [counter]="true"
          maxlength="120" placeholder="任何要求都可以在这里提哦，亲" (ionInput)="userInputOnneeds($event)" required></ion-textarea>
      </ion-item>
      <ion-grid [fixed]="true">
        <ion-row style="text-align: center;">
          <ion-col><ion-button fill="outline" (click)="reset()">重置</ion-button></ion-col>
          <!-- <ion-col><ion-button fill="outline" (click)="submit()">确定</ion-button></ion-col> -->
          <ion-col><ion-button fill="outline" (click)="sendMessage()" [disabled]="!isComplete">确定</ion-button></ion-col>
        </ion-row>
      </ion-grid>
    </ion-list>
  </ion-card>

  <!-- 生成计划 -->
  @if(aiplan.length>0) {
  <ion-card color="light">
    <ion-card-header>
      <ion-card-title>生成计划</ion-card-title>
      <ion-card-subtitle>根据您填写的信息，我给你生成训练计划。</ion-card-subtitle>
    </ion-card-header>
    <ion-list>
      <ion-item>
        <!-- {{aiplan}} -->
        <!-- 展示：返回消息内容 -->
        <!-- 消息传输过程中，实时预览 -->
        @if(!isComplete){
        <div>{{aiplan}}</div>
        }
        <!-- 消息传输完成后，实时预览Markdown格式 -->
        @if(isComplete){
        <fm-markdown-preview class="content-style" [content]="aiplan"></fm-markdown-preview>
        }
      </ion-item>
    </ion-list>
  </ion-card>
  }
</ion-content>