s202226701040/smarteat-app/src/app/tab2/tab2.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      慧吃小助手
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="input-group-container-wrapper">
    <!-- 选择规划天数 -->
    <div class="input-group-container">
      <h1>规划天数</h1>
      <ion-select [value]="planningDays"  
      (ionChange)="planningDaysInput($event)"  
      placeholder="请选择规划天数"
      interface="popover"
      required>
        <ion-select-option value="3">3天</ion-select-option>
        <ion-select-option value="5">5天</ion-select-option>
        <ion-select-option value="7">一周</ion-select-option>
        <ion-select-option value="14">两周</ion-select-option>
      </ion-select>
    </div>
  </div>

  <!-- 文本域：生成提示词 -->
  <div class="content-style">
    <h1>需求描述</h1>
    <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="需求描述" autoGrow="true"></ion-textarea>
  </div>

  <!-- 按钮：执行消息生成函数 -->
  @if(!currentUser?.id){
    <ion-button (click)="login()" fill="outline" color="primary">
      登录
    </ion-button>
  }
  @if(currentUser?.id){
  <ion-button (click)="sendMessage()" expand="block">饮食方案生成</ion-button>
 }
  <!-- 展示：返回消息内容 -->
  @if(!isComplete && responseMsg!="" && !isNew){
    <!-- <div class="response-container">{{responseMsg}}</div> -->
     <div class="response-container">正在为您生成饮食规划...<br>请不要走开哦</div>
   }
  
  @if(!isComplete && responseMsg!="" && isNew){
    <!-- <div class="response-container">{{responseMsg}}</div> -->
     <div class="response-container">正根据您新的要求为您生成饮食规划...<br>请不要走开哦</div>
  }
  
  @if(isComplete ){
     <div class="response-container">根据您的个人信息与需求为您生成了以下饮食规划<br><div class="content-style" [innerHTML]="responseMsg0"></div><!--<fm-markdown-preview class="content-style" [content]="responseMsg0" ></fm-markdown-preview> --></div>
    <ion-button (click)="exportMealPlan()" expand="block" color="primary">导出饮食规划</ion-button>
  }
  
</ion-content>