202226701011/FitMind-app/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>运动助手Neon</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="custom-segment">
    <ion-button 
      fill="clear" 
      class="nav-button" 
      [ngClass]="{'activated': isActivated('ai-outfit')}" 
      (click)="selectSegment('ai-outfit')">
      方案生成
    </ion-button>
    <ion-button 
      fill="clear" 
      class="nav-button" 
      [ngClass]="{'activated': isActivated('ai-chat')}" 
      (click)="selectSegment('ai-chat')">
      Neon
    </ion-button>
    <ion-button 
      fill="clear" 
      class="nav-button" 
      [ngClass]="{'activated': isActivated('test')}" 
      (click)="selectSegment('test')">
      测试
    </ion-button>
   
  </div>

  <div *ngIf="selectedSegment === 'ai-outfit'">
    <div class="info-section">
      <div class="input-row">
        <div class="input-group">
          <label>身高</label>
          <input type="number" [(ngModel)]="height" placeholder="" class="input-box" />
          <span class="unit">CM</span>
        </div>
        <div class="input-group">
          <label>体重</label>
          <input type="number" [(ngModel)]="weight" placeholder="" class="input-box" />
          <span class="unit">KG</span>
        </div>
      </div>
      
      <div class="input-row">
        <div class="input-group">
          <label>年龄</label>
          <input type="number" [(ngModel)]="age" placeholder="" class="input-box" />
          <span class="unit">岁</span>
        </div>
        <div class="gender-section">
          <label>性别</label>
          <div class="gender-option" [ngClass]="{'selected': selectedGender === 'male'}" (click)="selectGender('male')">男</div>
          <div class="gender-option" [ngClass]="{'selected': selectedGender === 'female'}" (click)="selectGender('female')">女</div>
        </div>
      </div>
    </div>

    <div class="textarea-section">
      <ion-textarea 
        id="comments" 
        class="textarea-input" 
        [(ngModel)]="comments" 
        [placeholder]="placeholderText" 
        [autoGrow]="true">
      </ion-textarea>
    </div>

<ion-button fill="clear"
  class="analysis-button" 
  (click)="sendMessage()"
  [ngClass]="{'generating': isGenerating}"  >

  获取运动方案
</ion-button>


  
 <!-- AI生成内容区域 -->
 <div class="bigbox1" *ngIf="responseMsg">
  <!-- 展示：返回消息内容 -->
    <!-- 消息传输过程中，实时预览 -->
    @if(!isComplete){
      <div>{{responseMsg}}</div>
    }
    <!-- 消息传输完成后，实时预览Markdown格式 -->
    @if(isComplete){
      <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
    }
  </div>
 

  </div>

  <!--AI聊天-->
  <div *ngIf="selectedSegment === 'ai-chat'">
<app-page-ai-chat></app-page-ai-chat>


  </div>
  
  <!--测试-->
  <div *ngIf="selectedSegment === 'test'" class="center-button">
    <ion-button (click)="goBmipage()">测测你的BMI</ion-button>
  </div>
  
  <div *ngIf="selectedSegment === 'test'" class="center-button">
    <ion-button (click)="goTestpage()">测测你的体脂率</ion-button>
  </div>



  
</ion-content>