12.23(1)

travel-app/src/app/tab2/tab2.page.html

@@ -5,23 +5,35 @@
 </ion-header>
 
 <ion-content class="custom-content">
-  <ion-card class="input" >
+  <ion-card class="input-card">
     <ion-card-content>
-      <ion-input placeholder="时间" type="text" name="text" class="input"></ion-input>
+      <ion-input
+        class="custom-input"
+        name="text"
+        type="text"
+        [(ngModel)]="page2"
+        placeholder="时间"
+        (focus)="clearPlaceholder()"
+      ></ion-input>
     </ion-card-content>
   </ion-card>
 
   <!-- “请输入您的需求”盒子 -->
-  <ion-card>
+  <ion-card class="input-card">
     <ion-card-content>
-      <ion-input [(ngModel)]="userPrompt" placeholder="请输入您的需求" type="text" name="text" class="input"></ion-input>
+      <ion-textarea
+        [(ngModel)]="userPrompt"
+        placeholder="请输入文本提示词"
+        autoGrow="true"
+        class="custom-textarea"
+      ></ion-textarea>
     </ion-card-content>
   </ion-card>
 
-    <ion-button (click)="sendMessage()"  expand="block" class="custom-button">
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block" class="custom-button">
     旅游路线
-    </ion-button>
-
+  </ion-button>
 
   <!-- 展示：返回消息内容 -->
   <div *ngIf="!isComplete" class="response-message">{{responseMsg}}</div>

travel-app/src/app/tab2/tab2.page.ts

@@ -19,7 +19,7 @@ import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
   ]
 })
 export class Tab2Page implements OnInit {
-  page2: string = "时间"; // 用户输入的游玩时间
+  page2: string = ""; // 用户输入的游玩时间
   userPrompt: string = ""; // 用户输入的需求提示
   responseMsg: string = ""; // 用于展示AI返回的消息内容
   isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成