|
@@ -6,58 +6,59 @@
|
|
</ion-toolbar>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
</ion-header>
|
|
|
|
|
|
-<ion-content>
|
|
|
|
|
|
+<ion-content class="ion-padding">
|
|
<!-- 用户输入饮食目标 -->
|
|
<!-- 用户输入饮食目标 -->
|
|
<ion-item>
|
|
<ion-item>
|
|
<ion-label position="floating">饮食目标</ion-label>
|
|
<ion-label position="floating">饮食目标</ion-label>
|
|
- <ion-input [(ngModel)]="dietGoal" placeholder="例如:减脂、增肌等"></ion-input>
|
|
|
|
|
|
+ <ion-input [(ngModel)]="dietGoal"></ion-input>
|
|
</ion-item>
|
|
</ion-item>
|
|
|
|
|
|
<!-- 用户输入食物忌口 -->
|
|
<!-- 用户输入食物忌口 -->
|
|
<ion-item>
|
|
<ion-item>
|
|
<ion-label position="floating">食物忌口</ion-label>
|
|
<ion-label position="floating">食物忌口</ion-label>
|
|
- <ion-input [(ngModel)]="foodRestrictions" placeholder="例如:不吃海鲜、不吃辣等"></ion-input>
|
|
|
|
|
|
+ <ion-input [(ngModel)]="foodRestrictions"></ion-input>
|
|
</ion-item>
|
|
</ion-item>
|
|
|
|
|
|
<!-- 用户输入详细需求 -->
|
|
<!-- 用户输入详细需求 -->
|
|
<ion-item>
|
|
<ion-item>
|
|
<ion-label position="floating">详细需求</ion-label>
|
|
<ion-label position="floating">详细需求</ion-label>
|
|
- <ion-textarea [(ngModel)]="detailedRequirements" placeholder="例如:每天至少摄入 100 克蛋白质"></ion-textarea>
|
|
|
|
|
|
+ <ion-textarea [(ngModel)]="detailedRequirements" autoGrow="true"></ion-textarea>
|
|
</ion-item>
|
|
</ion-item>
|
|
|
|
|
|
<!-- 用户输入饮食偏好 -->
|
|
<!-- 用户输入饮食偏好 -->
|
|
<ion-item>
|
|
<ion-item>
|
|
<ion-label position="floating">饮食偏好</ion-label>
|
|
<ion-label position="floating">饮食偏好</ion-label>
|
|
- <ion-input [(ngModel)]="dietPreference" placeholder="例如:高蛋白、低碳水"></ion-input>
|
|
|
|
|
|
+ <ion-input [(ngModel)]="dietPreference"></ion-input>
|
|
</ion-item>
|
|
</ion-item>
|
|
|
|
|
|
<!-- 用户输入饮食计划时长 -->
|
|
<!-- 用户输入饮食计划时长 -->
|
|
<ion-item>
|
|
<ion-item>
|
|
<ion-label position="floating">饮食计划时长</ion-label>
|
|
<ion-label position="floating">饮食计划时长</ion-label>
|
|
- <ion-input [(ngModel)]="dietDuration" type="number" placeholder="例如:7、14、30 天"></ion-input>
|
|
|
|
|
|
+ <ion-input [(ngModel)]="dietDuration" type="number"></ion-input>
|
|
</ion-item>
|
|
</ion-item>
|
|
|
|
|
|
<!-- 用户输入需求 -->
|
|
<!-- 用户输入需求 -->
|
|
<ion-textarea
|
|
<ion-textarea
|
|
[value]="userPrompt"
|
|
[value]="userPrompt"
|
|
(ionInput)="promptInput($event)"
|
|
(ionInput)="promptInput($event)"
|
|
- placeholder="输入你的饮食需求,如:高蛋白饮食,低糖饮食等"
|
|
|
|
autoGrow="true"
|
|
autoGrow="true"
|
|
|
|
+ class="user-input-textarea"
|
|
></ion-textarea>
|
|
></ion-textarea>
|
|
|
|
|
|
- <!-- 按钮:触发饮食计划生成 -->
|
|
|
|
- <ion-button (click)="sendMessage()" expand="block">生成饮食计划</ion-button>
|
|
|
|
-
|
|
|
|
|
|
+ <!-- 按钮:生成饮食计划 -->
|
|
|
|
+ <ion-button expand="block" (click)="sendMessage()" class="generate-button">
|
|
|
|
+ 生成饮食计划
|
|
|
|
+ </ion-button>
|
|
|
|
+
|
|
<!-- 显示生成的饮食计划 -->
|
|
<!-- 显示生成的饮食计划 -->
|
|
<div *ngIf="responseMsg" class="response-container">
|
|
<div *ngIf="responseMsg" class="response-container">
|
|
- <h2>生成的饮食计划</h2>
|
|
|
|
- <p><strong>饮食目标:</strong> {{ responseMsg.goal }}</p>
|
|
|
|
- <p><strong>饮食偏好:</strong> {{ responseMsg.preference }}</p>
|
|
|
|
- <p><strong>饮食计划时长:</strong> {{ responseMsg.duration }} 天</p>
|
|
|
|
- <p><strong>食物忌口:</strong> {{ responseMsg.foodRestrictions }}</p>
|
|
|
|
- <p><strong>详细需求:</strong> {{ responseMsg.detailedRequirements }}</p>
|
|
|
|
|
|
+ <h2>饮食计划</h2>
|
|
|
|
+ <p><strong>目标:</strong>{{ responseMsg.goal }}</p>
|
|
|
|
+ <p><strong>偏好:</strong>{{ responseMsg.preference }}</p>
|
|
|
|
+ <p><strong>时长:</strong>{{ responseMsg.duration }} 天</p>
|
|
|
|
+ <p><strong>忌口:</strong>{{ responseMsg.foodRestrictions }}</p>
|
|
|
|
+ <p><strong>需求:</strong>{{ responseMsg.detailedRequirements }}</p>
|
|
|
|
|
|
-
|
|
|
|
<!-- 遍历每个餐食并展示 -->
|
|
<!-- 遍历每个餐食并展示 -->
|
|
<div class="meal-plan" *ngFor="let meal of responseMsg.meals">
|
|
<div class="meal-plan" *ngFor="let meal of responseMsg.meals">
|
|
<h3>{{ meal.type }}</h3>
|
|
<h3>{{ meal.type }}</h3>
|