cfc/cfc-frontend/components/HealthAlertBanner.vue

<template>
  <view class="alert-banner" v-if="alerts && alerts.length > 0">
    <view
      class="alert-item"
      v-for="alert in visibleAlerts"
      :key="alert.id"
      :class="'alert-severity-' + alert.severity">
      <view class="alert-icon">
        <text v-if="alert.severity === 'high'">🔴</text>
        <text v-else-if="alert.severity === 'medium'">🟡</text>
        <text v-else>🟢</text>
      </view>
      <view class="alert-body">
        <text class="alert-text">{{ alert.alertText }}</text>
        <text class="alert-suggestion" v-if="alert.actionSuggestion">
          {{ alert.actionSuggestion }}
        </text>
      </view>
      <text class="alert-dismiss" @click="dismiss(alert)">×</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    alerts: { type: Array, default: function() { return [] } }
  },
  computed: {
    visibleAlerts: function() {
      return this.alerts.slice(0, 2)
    }
  },
  methods: {
    dismiss: function(alert) {
      this.$emit('dismiss', alert.id)
    }
  }
}
</script>

<style scoped>
.alert-banner {
  margin: 0 20rpx 16rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  padding: 16rpx;
  border-radius: 16rpx;
  position: relative;
}
.alert-severity-high {
  background: #FEF2F2;
  border: 1rpx solid #FECACA;
}
.alert-severity-medium {
  background: #FFFBEB;
  border: 1rpx solid #FDE68A;
}
.alert-severity-low {
  background: #F0F9FF;
  border: 1rpx solid #BAE6FD;
}
.alert-icon { font-size: 36rpx; flex-shrink: 0; padding-top: 2rpx; }
.alert-body { flex: 1; min-width: 0; }
.alert-text { font-size: 26rpx; font-weight: 600; color: #1E293B; line-height: 1.4; }
.alert-suggestion {
  display: block;
  font-size: 22rpx;
  color: #64748B;
  margin-top: 4rpx;
  line-height: 1.4;
}
.alert-dismiss {
  font-size: 36rpx;
  color: #94A3B8;
  padding: 0 8rpx;
  line-height: 1;
  flex-shrink: 0;
}
.alert-dismiss:active { color: #64748B; }
</style>