workspace/.history/soul-app/src/app/topic-detail/topic-detail.component_20241216084316.html

<ion-header>
  <ion-toolbar>
    <div class="toolbar-content">
      <div class="button-container">
        <ion-button (click)="goTab1()" fill="clear">
          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
        </ion-button>
      </div>
      <ion-title class="title-text">
        管理焦虑情绪的指南
      </ion-title>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 管理焦虑的技巧区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>管理焦虑的技巧</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let tip of tips">
        <ion-label>
          <h2>{{ tip.title }}</h2>
          <p>{{ tip.description }}</p>
        </ion-label>
        <ion-icon name="chevron-down" slot="end" (click)="tip.expanded = !tip.expanded"></ion-icon>
        <ion-item *ngIf="tip.expanded">
          <ion-label>{{ tip.details }}</ion-label>
        </ion-item>
      </ion-item>
    </ion-list>
  </section>

  <!-- 实用工具区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>实用工具</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let tool of tools">
        <ion-label>
          <h2>{{ tool.name }}</h2>
          <p>{{ tool.description }}</p>
        </ion-label>
        <ion-button slot="end" [href]="tool.link">{{ tool.buttonText }}</ion-button>
      </ion-item>
    </ion-list>
  </section>

  <!-- 资源区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>相关文章和视频</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let resource of resources">
        <ion-label>
          <h2>{{ resource.title }}</h2>
        </ion-label>
        <ion-button slot="end" [href]="resource.link">{{ resource.buttonText }}</ion-button>
      </ion-item>
    </ion-list>
  </section>

  <!-- 社区支持区 -->
  <section>
    <ion-list>
      <ion-list-header>
        <ion-label>社区讨论</ion-label>
      </ion-list-header>
      <ion-item *ngFor="let discussion of discussions">
        <ion-label>
          <h2>{{ discussion.title }}</h2>
        </ion-label>
        <ion-button slot="end" [href]="discussion.link">参与讨论</ion-button>
      </ion-item>
    </ion-list>
  </section>
</ion-content>