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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/toolbox"></ion-back-button>
    </ion-buttons>
    <ion-title>人物设定生成</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding"
  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">

  <!-- 使用 ion-grid 包裹所有行，确保布局正确 -->
  <ion-grid>
    <ion-row>
      <ion-label>人物性别</ion-label>
    </ion-row>
    <ion-row class="type-buttons">
      <ion-col size="4">
        <ion-button (click)="selectGender('男')" [color]="selectedGender === '男' ? 'primary' : 'default'"
          class="type-button">男</ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button (click)="selectGender('女')" [color]="selectedGender === '女' ? 'primary' : 'default'"
          class="type-button">女</ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-label>小说类型</ion-label>
    </ion-row>

    <ion-row class="type-buttons">
      <ion-col size="4">
        <ion-button (click)="selectType('重生')" [color]="selectedType === '重生' ? 'primary' : 'default'"
          class="type-button">重生</ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button (click)="selectType('都市')" [color]="selectedType === '都市' ? 'primary' : 'default'"
          class="type-button">都市</ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button (click)="selectType('穿越')" [color]="selectedType === '穿越' ? 'primary' : 'default'"
          class="type-button">穿越</ion-button>
      </ion-col>
    </ion-row>

    <ion-row class="type-buttons">
      <ion-col size="4">
        <ion-button (click)="selectType('玄幻')" [color]="selectedType === '玄幻' ? 'primary' : 'default'"
          class="type-button">玄幻</ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button (click)="selectType('系统文')" [color]="selectedType === '系统文' ? 'primary' : 'default'"
          class="type-button">系统文</ion-button>
      </ion-col>
      <ion-col size="4">
        <ion-button (click)="selectType('搞笑轻松')" [color]="selectedType === '搞笑轻松' ? 'primary' : 'default'"
          class="type-button">搞笑轻松</ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="12">
        <ion-label>期望描述</ion-label>
        <ion-textarea [value]="userPrompt" (ionChange)="promptInput($event)" placeholder="请输入期望描述"
          class="textarea-field" rows="5"></ion-textarea> <!-- 增加 rows 属性 -->
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="12">
        <ion-button expand="block" (click)="sendMessage()" class="generate-button">生成人物设定</ion-button>
      </ion-col>
    </ion-row>

    <ion-row *ngIf="responseMsg">
      <ion-col size="12">
        <ion-label>生成的人物设定</ion-label>
        <ion-textarea [value]="responseMsg" readonly class="response-textarea" rows="10"></ion-textarea>
        <!-- 增加 rows 属性 -->
        <ion-button expand="block" (click)="copyToClipboard()" class="copy-button">复制</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>