20222670105/novel-app/src/app/ai-polish-modal/ai-polish-modal.component.html

<!-- ai-polish-modal.component.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>AI 润色</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="dismiss()">关闭</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 文本域：生成提示词 -->
  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="请输入想要润色的内容~"
    autoGrow="true"></ion-textarea>

  <!-- 按钮：执行消息生成函数 -->
  <ion-button (click)="sendMessage()" expand="block" class="primary">开始润色</ion-button>

  <!-- 展示：返回消息内容 -->
  <!-- 消息传输过程中，实时预览 -->
  @if(!isComplete){
  <div>{{responseMsg}}</div>
  }
  <!-- 消息传输完成后，实时预览Markdown格式 -->
  @if(isComplete){
  <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
  <ion-textarea [(ngModel)]="polishedText" rows="10" placeholder="润色后的内容" autoGrow="true"></ion-textarea>

  <!-- 添加复制按钮 -->
  <ion-button (click)="copyPolishedText()" class="secondary">复制</ion-button>

  <!-- 添加填入文末按钮 -->
  <ion-button (click)="insertIntoChapterEnd()" class="secondary">填入文末</ion-button>

  <!-- 添加重新生成按钮 -->
  <ion-button (click)="regenerate()" class="success">重新生成</ion-button>
  }
</ion-content>