20222670105/novel-app/src/app/name-generator/name-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-col size="12">
        <ion-label>小说类型</ion-label>
        <ion-input [(ngModel)]="type" (ionInput)="typeInput($event)" placeholder="请输入小说类型"
          class="input-field"></ion-input>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size="12">
        <ion-label>读者人群</ion-label>
        <ion-row>
          <ion-col size="4">
            <ion-button (click)="selectReaderGroup('不限人群')"
              [color]="selectedReaderGroup === '不限人群' ? 'primary' : 'default'"
              class="reader-group-button">不限人群</ion-button>
          </ion-col>
          <ion-col size="4">
            <ion-button (click)="selectReaderGroup('男频小说')"
              [color]="selectedReaderGroup === '男频小说' ? 'primary' : 'default'"
              class="reader-group-button">男频小说</ion-button>
          </ion-col>
          <ion-col size="4">
            <ion-button (click)="selectReaderGroup('女频小说')"
              [color]="selectedReaderGroup === '女频小说' ? 'primary' : 'default'" color="warning"
              class="reader-group-button">女频小说</ion-button>
          </ion-col>
        </ion-row>
      </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>