20222670105/novel-app/src/app/short-generator/short-generator.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>短篇小说生成器</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <h1>标题</h1>
  <ion-input [value]="title" (ionInput)="titleInput($event)"></ion-input>
  <h1>风格</h1>
  <ion-input [value]="style" (ionInput)="styleInput($event)"></ion-input>
  
  <!-- 词条列表编辑区域 -->
   <span (click)="showEntryList()">
    当前词条 数量{{entryList?.length}}
   </span>
  <comp-word-entry [entryList]="entryList" (entryListChange)="onEntryListChange($event)"></comp-word-entry>
  <!-- 文本域：生成提示词 -->
  <h1>人物词条</h1>
  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词"
    autoGrow="true"></ion-textarea>

  <!-- 按钮：执行消息生成函数 -->
  <ion-button (click)="sendMessage()" expand="block">生成大纲</ion-button>

  <!-- 展示：返回消息内容 -->
  <!-- 实时预览生成的小说大纲 -->
  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
    class="generated-outline"></ion-textarea>
  <!-- 按钮：执行消息生成函数 -->
  <ion-button (click)="sendOutline()" expand="block">生成小说</ion-button>

  <!-- 展示：返回消息内容 -->
  <!-- 实时预览生成的小说 -->
  <ion-textarea [(ngModel)]="generatedContent" placeholder="生成的小说" autoGrow="true"
    class="generated-content"></ion-textarea>

  <!-- 保存按钮 -->
  <ion-button (click)="saveNovel()" expand="block" color="success">保存小说</ion-button>

</ion-content>