# 感恩清单

{
    "id": 1,
    "date": "15",
    "weekday": "周三",
    "time": "14:30",
    "content": "今天阳光明媚，去公园散步时看到樱花开了。粉色的花瓣随风飘落，美得像一幅画。坐在长椅上读了一会儿书，感觉心情特别平静。",
    "weather": "晴",
    "mood": "😊"
},


<!-- 主内容区域 -->
  <div class="main-content">
    <!-- 日期天气区 -->
    <div class="meta-section">
      <div class="date-display">
        <h1 class="date">{{ thanks.date }}</h1>
        <div class="date-meta">
          <span class="weekday">{{ thanks.weekday }}</span>
          <span class="time">{{ thanks.time }}</span>
        </div>
      </div>
      
      <div class="weather-mood">
        <ion-chip class="weather-chip" [color]="getWeatherColor()">
          <ion-icon [name]="getWeatherIcon()"></ion-icon>
          <ion-label>{{ thanks.weather }}</ion-label>
        </ion-chip>
        
        <ion-chip class="mood-chip">
          <div class="mood-icon">{{ thanks.mood }}</div>
        </ion-chip>
      </div>
    </div>

    <!-- 日记内容卡片 -->
    <ion-card class="gratitude-card">
      <ion-card-content>
        <div class="content-text">
          <p>{{ thanks.content }}</p>
        </div>
        
        <!-- 情感标记 -->
        <div class="emotional-mark">
          <ion-icon name="heart-circle" color="danger"></ion-icon>
          <span>感恩时刻</span>
        </div>
      </ion-card-content>
    </ion-card>

    <!-- 反思与行动区 -->
    <div class="insight-section">
      <!-- 反思卡片 -->
      <ion-card class="reflection-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="bulb-outline" color="warning"></ion-icon>
            我的领悟
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <p class="reflection-text">{{ thanks.reflection }}</p>
        </ion-card-content>
      </ion-card>
      
      <!-- 行动卡片 -->
      <ion-card class="action-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="walk-outline" color="success"></ion-icon>
            行动计划
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-item lines="none">
            <ion-checkbox slot="start" color="success"></ion-checkbox>
            <ion-label>{{ thanks.actionStep }}</ion-label>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </div>

    <!-- 情感分析区 -->
    <div class="analysis-section">
      <ion-card class="analysis-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="analytics-outline" color="tertiary"></ion-icon>
            情感分析
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="emotion-grid">
            <div class="emotion-item positive">
              <ion-icon name="happy-outline"></ion-icon>
              <span>积极情绪 +3</span>
            </div>
            <div class="emotion-item connection">
              <ion-icon name="people-outline"></ion-icon>
              <span>人际联结 +2</span>
            </div>
            <div class="emotion-item mindfulness">
              <ion-icon name="leaf-outline"></ion-icon>
              <span>正念觉察 +2</span>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
    </div>
  </div>