AI/myapp/src/app/tab2/thanks-cloud/thanks-cloud.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab2"></ion-back-button>
    </ion-buttons>
    <ion-title>感恩清单</ion-title>
    <ion-buttons slot="end">
    <ion-button (click)="importThanks()">
        <ion-icon name="cloud-outline"></ion-icon>
    </ion-button>
    </ion-buttons>
  </ion-toolbar>
  
</ion-header>

<ion-content class="ion-padding" [fullscreen]="true">
  
    
  <div *ngFor="let thanks of thanksList" class="gratitude-container">
    
    <!-- 单个感恩卡片 -->
    <ion-card  class="gratitude-card">
      <ion-card-header class="card-header">
        <div class="date-section">
          <div class="date-number">{{thanks.get('date')}}</div>
          <div class="date-weekday">{{thanks.get('weekday')}}</div>
        </div>
        <div class="time-weather">
          <div class="time">{{thanks.get('time')}}</div>
          <div class="weather-mood">
            <span class="weather">{{thanks.get('weather')}}</span>
            <span class="mood">{{thanks.get('mood')}}</span>
          </div>
        </div>
      </ion-card-header>

      <ion-card-content class="card-content">
        <div class="content-text">{{thanks.get('content')}}</div>
        
        <div class="tags-section">
          <ion-chip *ngFor="let tag of thanks.get('tags')" outline color="primary">
            <ion-label>{{tag}}</ion-label>
          </ion-chip>
        </div>

        <ion-accordion-group>
          <ion-accordion value="reflection">
            <ion-item slot="header" color="light">
              <ion-label>反思记录</ion-label>
            </ion-item>
            <div slot="content" class="accordion-content">{{thanks.get('reflection')}}</div>
          </ion-accordion>
          
          <ion-accordion value="action">
            <ion-item slot="header" color="light">
              <ion-label>行动计划</ion-label>
            </ion-item>
            <div slot="content" class="accordion-content">{{thanks.get('actionStep')}}</div>
          </ion-accordion>
          
          <ion-accordion value="impact">
            <ion-item slot="header" color="light">
              <ion-label>情感影响</ion-label>
            </ion-item>
            <div slot="content" class="accordion-content">{{thanks.get('emotionalImpact')}}</div>
          </ion-accordion>
          
          <ion-accordion value="journal">
            <ion-item slot="header" color="light">
              <ion-label>情绪日记</ion-label>
            </ion-item>
            <div slot="content" class="accordion-content">{{thanks.get('emotionalJournal')}}</div>
          </ion-accordion>
        </ion-accordion-group>
      </ion-card-content>
    </ion-card>
  </div> 
</ion-content>