refactor(health): consolidate monitor components

frontend/src/features/providers/components/HealthMetricGrid.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-4">
+    <div
+      v-for="metric in metrics"
+      :key="metric.label"
+      class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
+    >
+      <div class="text-[11px] leading-tight text-muted-foreground">
+        {{ metric.label }}
+      </div>
+      <div
+        class="mt-1 text-sm font-semibold tabular-nums"
+        :class="metric.valueClass"
+      >
+        {{ metric.value }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  formatAvailability,
+  formatMs,
+  formatTps,
+  getAvailabilityClass
+} from './health-monitor-utils'
+
+const props = defineProps<{
+  avgLatencyMs?: number | null
+  avgFirstByteMs?: number | null
+  avgTps?: number | null
+  totalAttempts: number
+  successRate: number
+}>()
+
+const availabilityItem = computed(() => ({
+  total_attempts: props.totalAttempts,
+  success_rate: props.successRate
+}))
+
+const metrics = computed(() => [
+  {
+    label: '平均耗时',
+    value: formatMs(props.avgLatencyMs),
+    valueClass: ''
+  },
+  {
+    label: '平均TTFB',
+    value: formatMs(props.avgFirstByteMs),
+    valueClass: ''
+  },
+  {
+    label: '平均速度',
+    value: formatTps(props.avgTps),
+    valueClass: ''
+  },
+  {
+    label: '可用率',
+    value: formatAvailability(availabilityItem.value),
+    valueClass: getAvailabilityClass(availabilityItem.value)
+  }
+])
+</script>