cfc/cfc-frontend/components/DailySummary.vue

<template>
  <view class="daily-summary" v-if="feedback">
    <view class="ds-header">
      <text class="ds-label">💬 健康小语</text>
      <text class="ds-dismiss" @click="dismiss">×</text>
    </view>
    <text class="ds-content">{{ feedback.content }}</text>
    <view class="ds-footer">
      <text class="ds-source">{{ feedback.source === 'ai_generated' ? 'AI生成' : '暖心提醒' }}</text>
    </view>
  </view>
</template>

<script>
import api from '@/utils/api.js'
export default {
  props: {
    childId: { type: Number, default: null }
  },
  data: function() {
    return {
      feedback: null,
      dismissed: false
    }
  },
  created: function() {
    this.loadFeedback()
  },
  methods: {
    loadFeedback: function() {
      if (!this.childId) return
      var self = this
      api.getTodayFeedback({ childId: self.childId }).then(function(res) {
        if (res.data && res.data.feedback) {
          self.feedback = res.data.feedback
        }
      }).catch(function() {
        // silent fail
      })
    },
    dismiss: function() {
      if (this.feedback && this.feedback.id) {
        api.markFeedbackRead({ id: this.feedback.id })
      }
      this.feedback = null
      this.$emit('dismiss')
    }
  },
  watch: {
    childId: function() {
      this.feedback = null
      this.loadFeedback()
    }
  }
}
</script>

<style scoped>
.daily-summary {
  background: linear-gradient(135deg, #EBF5FF, #E0F2FE);
  border-radius: 20rpx;
  padding: 20rpx 24rpx;
  margin: 20rpx 20rpx 0 20rpx;
  border: 1rpx solid #BAE6FD;
  position: relative;
}
.ds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}
.ds-label { font-size: 24rpx; font-weight: 600; color: #0369A1; }
.ds-dismiss {
  font-size: 36rpx;
  color: #999;
  padding: 0 8rpx;
  line-height: 1;
}
.ds-dismiss:active { color: #666; }
.ds-content { font-size: 28rpx; color: #333; line-height: 1.6; }
.ds-footer { margin-top: 8rpx; }
.ds-source { font-size: 20rpx; color: #94A3B8; }
</style>