<template>
  <article class="kpi-card" :class="`kpi-${metric.highlight || 'normal'}`" :title="metric.note || '关键指标实时刷新'">
    <p class="kpi-label">{{ metric.label }}</p>
    <div class="kpi-value-row">
      <strong class="kpi-value">{{ metric.value }}</strong>
      <span v-if="metric.unit" class="kpi-unit">{{ metric.unit }}</span>
    </div>
  </article>
</template>

<script setup>
defineProps({
  metric: {
    type: Object,
    required: true
  }
});
</script>
