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

<!-- chapter-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-buttons slot="end">
      <ion-button (click)="saveWork()" color="primary">保存作品</ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 遮罩层 -->
  <div class="overlay" [style.display]="isSideShow ? 'block' : 'none'"></div>

  <!-- 主要内容区域 -->
  <div class="content-container">

    <!-- 侧边栏 -->
    <div [style.display]="isSideShow ? 'flex' : 'none'"
      style="display: flex; width: 200px; flex-direction: column; z-index: 1000;">
      <ion-list>
        <ion-item *ngFor="let chapter of chapters; let i = index;" (click)="selectChapter(i)">
          <ion-label>{{ chapter.title }}</ion-label>
          <ion-buttons slot="end">
            <ion-button (click)="deleteChapter(i)">
              <ion-icon name="trash"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-item>
      </ion-list>
      <ion-button (click)="addChapter()">
        <ion-icon name="add"></ion-icon>添加章节
      </ion-button>

      <ion-button color="light" (click)="toggleSide()">
        <ion-icon name="add"></ion-icon>{{isSideShow ? '折叠' : '展开'}}
      </ion-button>
    </div>

    <!-- 内容区域 -->
    <div class="chapter-edit-container">
      <ion-button (click)="openAiContinueModal()">AI续写</ion-button>
      <ion-button (click)="openAiPolishModal()">AI润色</ion-button>
      <ion-button (click)="openAiExpandModal()">AI扩写</ion-button>

      @if(selectedChapterIndex !== null){
      <ion-item>
        <ion-label position="floating">章节标题</ion-label>
        <ion-input [(ngModel)]="selectedChapterTitle"></ion-input>
      </ion-item>
      <ion-label position="floating">章节内容</ion-label>
      <ion-item>
        <textarea [(ngModel)]="selectedChapterContent" style="width: 100%; height: 300px;"></textarea>
      </ion-item>
      <ion-button (click)="saveChapter()" expand="block" color="success">保存章节</ion-button>
      } @else {
      <p>请选择一个章节进行编辑。</p>
      }
    </div>
  </div>

  <!-- 悬浮球 -->
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button (click)="toggleSide()">
      <ion-icon name="chevron-forward"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>