20222670105/novel-app/src/app/home/home.page.html

<ion-content [fullscreen]="true">
  <!-- 顶部图片区域 -->
  <div class="header-section">
    <ion-img src="../../assets/images/首页顶部图.png" alt="header"></ion-img>
  </div>

  <!-- 功能按钮区域 -->
  <div class="features-section">
    <!-- 生成小说按钮 -->
    <ion-button class="feature-button" (click)="navigateTo('/story-generator')" expand="block" fill="clear">
      <div class="button-content">
        <div class="icon-wrapper light-blue">
          <ion-icon name="book"></ion-icon>
        </div>
        <span>生成小说</span>
      </div>
    </ion-button>

    <!-- 创建角色按钮 -->
    <ion-button class="feature-button" (click)="navigateTo('/character-creator')" expand="block" fill="clear">
      <div class="button-content">
        <div class="icon-wrapper light-pink">
          <ion-icon name="person-outline"></ion-icon>
        </div>
        <span>创建角色</span>
      </div>
    </ion-button>

    <!-- 工具箱按钮 -->
    <ion-button class="feature-button" (click)="navigateTo('/toolbox')" expand="block" fill="clear">
      <div class="button-content">
        <div class="icon-wrapper light-purple">
          <ion-icon name="build-outline"></ion-icon>
        </div>
        <span>工具箱</span>
      </div>
    </ion-button>
  </div>

  <!-- 作品区域 -->
  <div class="stories-section">
    <ion-card>
      <ion-card-header>
        <div class="card-header-content">
          <ion-card-title>我的作品</ion-card-title>
          <ion-button fill="clear" size="small" (click)="presentCreateOptions($event)">
            <ion-icon slot="start" name="add-outline"></ion-icon>
            新建作品
          </ion-button>
        </div>
      </ion-card-header>

      <ion-card-content>
        <ion-grid *ngIf="stories.length > 0">
          <ion-row>
            <ion-col size="6" *ngFor="let story of stories">
              <div class="story-card">
                <ion-img [src]="story.cover" alt="story cover"></ion-img>
                <div class="story-info">
                  <h3>{{story.title}}</h3>
                  <p>{{formatDate(story.createTime)}}</p>
                </div>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>

        <div class="empty-state" *ngIf="stories.length === 0">
          <ion-icon name="document-text-outline"></ion-icon>
          <h3>暂无作品</h3>
          <p>点击新建作品按钮开始创作</p>
        </div>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>