qa-etodo/src/app/ai-assistant/ai-assistant.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <!-- 使用自定义返回按钮 -->
      <ion-button (click)="goBack()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>AI日程助手</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="userInput = ''">
        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="header">
    <h1>智能日程规划</h1>
    <p>让AI帮助您创建高效、平衡的日程安排</p>
  </div>

  <div class="suggestion-container" *ngIf="!isLoading">
    <h2>
      <ion-icon name="bulb-outline"></ion-icon>
      快速建议：
    </h2>
    <div class="suggestions">
      <ion-badge 
        *ngFor="let suggestion of suggestions" 
        class="suggestion-chip"
        (click)="useSuggestion(suggestion)">
        {{ suggestion }}
      </ion-badge>
    </div>
  </div>

  <div class="input-container">
    <ion-textarea 
      [(ngModel)]="userInput"
      placeholder="请描述您的日程需求，例如：&#10;&#10;1. 明天需要参加3个会议&#10;2. 需要完成项目报告&#10;3. 希望有1小时健身时间"
      autoGrow="true"
      rows="4">
    </ion-textarea>
  </div>

  <ion-button 
    expand="block"
    class="generate-btn"
    (click)="getAIMessage()">
    <ion-icon slot="start" name="sparkles"></ion-icon>
    生成智能日程
  </ion-button>

  <div class="ai-response" *ngIf="!isLoading && aiContent">
    <h3>
      <ion-icon name="star-outline"></ion-icon>
      AI日程建议
    </h3>
    <div class="response-content">
      <pre>{{ aiContent }}</pre>
    </div>
  </div>

  <div class="loading-container" *ngIf="isLoading">
    <ion-spinner name="crescent"></ion-spinner>
    <p>{{ aiContent }}</p>
  </div>
</ion-content>