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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>短篇小说生成器</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>作品名称</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-input [(ngModel)]="workTitle" placeholder="请输入作品名称"></ion-input>
    </ion-card-content>
  </ion-card>

  <ion-item>
    <ion-label>风格选择</ion-label>
    <ion-select [(ngModel)]="selectedStyle" (ionChange)="onStyleChange()">
      <ion-select-option value="爱情">爱情</ion-select-option>
      <ion-select-option value="冒险">冒险</ion-select-option>
      <ion-select-option value="科幻">科幻</ion-select-option>
      <ion-select-option value="悬疑">悬疑</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-card>
    <ion-card-header>
      <ion-card-title>人物词条</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-input [(ngModel)]="characterName" placeholder="人物名称"></ion-input>
      <ion-select [(ngModel)]="characterGender" placeholder="性别">
        <ion-select-option value="男">男</ion-select-option>
        <ion-select-option value="女">女</ion-select-option>
      </ion-select>
      <ion-textarea [(ngModel)]="characterDescription" placeholder="人物简介" autoGrow="true"></ion-textarea>
      <ion-button expand="full" (click)="addCharacter()">新建人物</ion-button>
    </ion-card-content>
  </ion-card>

  <ion-list>
    <ion-item *ngFor="let character of characters">
      <ion-label>
        <h2>{{ character.name }}</h2>
        <p>性别: {{ character.gender }}</p>
        <p>简介: {{ character.description }}</p>
      </ion-label>
    </ion-item>
  </ion-list>

</ion-content>