feat(health): refine health monitor metrics

- add TPS to model and provider health payloads

- exclude user-cancelled 499 requests from health statistics

- update model/provider health cards with average latency, average TTFB, TPS, and availability

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

@@ -1,16 +1,15 @@
 <template>
-  <Card
-    variant="default"
-    class="overflow-hidden"
-  >
+  <Card variant="default" class="overflow-hidden">
     <div class="px-6 py-3.5 border-b border-border/60">
-      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div
+        class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+      >
         <div>
           <h3 class="text-base font-semibold">
             {{ title }}
           </h3>
           <p class="mt-1 text-xs text-muted-foreground">
-            基于真实请求统计模型可用率、响应延迟与首包延迟
+            基于真实请求统计模型可用率、平均耗时、平均TTFB 与平均速度
           </p>
         </div>
         <div class="flex items-center gap-3">
@@ -20,27 +19,14 @@
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="1">
-                1 小时
-              </SelectItem>
-              <SelectItem value="6">
-                6 小时
-              </SelectItem>
-              <SelectItem value="12">
-                12 小时
-              </SelectItem>
-              <SelectItem value="24">
-                24 小时
-              </SelectItem>
-              <SelectItem value="48">
-                48 小时
-              </SelectItem>
+              <SelectItem value="1"> 1 小时 </SelectItem>
+              <SelectItem value="6"> 6 小时 </SelectItem>
+              <SelectItem value="12"> 12 小时 </SelectItem>
+              <SelectItem value="24"> 24 小时 </SelectItem>
+              <SelectItem value="48"> 48 小时 </SelectItem>
             </SelectContent>
           </Select>
-          <RefreshButton
-            :loading="loading"
-            @click="refreshData"
-          />
+          <RefreshButton :loading="loading" @click="refreshData" />
         </div>
       </div>
     </div>
@@ -60,59 +46,80 @@
       >
         <Bot class="w-12 h-12 mb-3 opacity-30" />
         <p>暂无模型健康监控数据</p>
-        <p class="text-xs mt-1">
-          模型尚未产生请求记录
-        </p>
+        <p class="text-xs mt-1">模型尚未产生请求记录</p>
       </div>
 
-      <div
-        v-else
-        class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
-      >
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         <div
           v-for="monitor in monitors"
           :key="monitor.model"
           class="relative overflow-hidden rounded-xl border border-border/60 bg-card/60 p-4 transition-colors hover:border-primary/50"
         >
-          <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
+          <div
+            class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent"
+          />
           <div class="flex items-start justify-between gap-3">
             <div class="flex min-w-0 items-center gap-3">
-              <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl border border-border/60 bg-muted/50">
+              <div
+                class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl border border-border/60 bg-muted/50"
+              >
                 <Bot class="h-5 w-5 text-muted-foreground" />
               </div>
               <h4 class="min-w-0 truncate text-sm font-semibold">
                 {{ monitor.display_name || monitor.model }}
               </h4>
             </div>
-            <Badge
-              :variant="getHealthBadgeVariant(monitor)"
-              class="shrink-0"
-            >
+            <Badge :variant="getHealthBadgeVariant(monitor)" class="shrink-0">
               {{ getHealthLabel(monitor) }}
             </Badge>
           </div>
 
-          <div class="mt-4 grid grid-cols-3 gap-2">
-            <div class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2">
-              <div class="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <div class="mt-4 grid grid-cols-4 gap-2">
+            <div
+              class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
+            >
+              <div
+                class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
+              >
                 <Gauge class="h-3.5 w-3.5" />
-                延迟
+                平均耗时
               </div>
               <div class="mt-1 text-sm font-semibold tabular-nums">
                 {{ formatMs(monitor.avg_latency_ms) }}
               </div>
             </div>
-            <div class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2">
-              <div class="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+            <div
+              class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
+            >
+              <div
+                class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
+              >
                 <Radio class="h-3.5 w-3.5" />
-                Ping
+                平均TTFB
               </div>
               <div class="mt-1 text-sm font-semibold tabular-nums">
                 {{ formatMs(monitor.avg_first_byte_ms) }}
               </div>
             </div>
-            <div class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2">
-              <div class="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+            <div
+              class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
+            >
+              <div
+                class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
+              >
+                <Zap class="h-3.5 w-3.5" />
+                平均速度
+              </div>
+              <div class="mt-1 text-sm font-semibold tabular-nums">
+                {{ formatTps(monitor.avg_tps) }}
+              </div>
+            </div>
+            <div
+              class="rounded-lg border border-border/40 bg-muted/20 px-3 py-2"
+            >
+              <div
+                class="flex items-center gap-1.5 text-[11px] leading-tight text-muted-foreground"
+              >
                 <Activity class="h-3.5 w-3.5" />
                 可用率
               </div>
@@ -125,7 +132,9 @@
             </div>
           </div>
 
-          <div class="mt-4 flex items-center justify-between gap-3 text-[11px] uppercase tracking-wide text-muted-foreground">
+          <div
+            class="mt-4 flex items-center justify-between gap-3 text-[11px] uppercase tracking-wide text-muted-foreground"
+          >
             <span>History (60pts)</span>
             <span class="truncate normal-case tracking-normal">
               {{ getModelMetaText(monitor) }}
@@ -144,11 +153,7 @@
                     :class="getTimelineColor(segment)"
                   />
                 </TooltipTrigger>
-                <TooltipContent
-                  side="top"
-                  :side-offset="8"
-                  class="max-w-xs"
-                >
+                <TooltipContent side="top" :side-offset="8" class="max-w-xs">
                   <div class="text-xs whitespace-pre-line">
                     {{ buildTimelineTooltip(monitor, segment, index) }}
                   </div>
@@ -157,9 +162,13 @@
             </div>
           </TooltipProvider>
 
-          <div class="mt-2 flex items-center justify-between text-[10px] text-muted-foreground">
+          <div
+            class="mt-2 flex items-center justify-between text-[10px] text-muted-foreground"
+          >
             <span>{{ formatTimestamp(monitor.time_range_start) }}</span>
-            <span>{{ formatTimestamp(monitor.time_range_end || generatedAt) }}</span>
+            <span>{{
+              formatTimestamp(monitor.time_range_end || generatedAt)
+            }}</span>
           </div>
         </div>
       </div>
@@ -168,182 +177,220 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-import { Activity, Bot, Gauge, Loader2, Radio } from 'lucide-vue-next'
-import Card from '@/components/ui/card.vue'
-import Badge from '@/components/ui/badge.vue'
-import Label from '@/components/ui/label.vue'
-import Select from '@/components/ui/select.vue'
-import SelectTrigger from '@/components/ui/select-trigger.vue'
-import SelectValue from '@/components/ui/select-value.vue'
-import SelectContent from '@/components/ui/select-content.vue'
-import SelectItem from '@/components/ui/select-item.vue'
-import RefreshButton from '@/components/ui/refresh-button.vue'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { getModelStatusMonitor, getPublicModelStatusMonitor } from '@/api/endpoints/health'
-import type { ModelStatusMonitor } from '@/api/endpoints/types'
-import { useToast } from '@/composables/useToast'
-import { parseApiError } from '@/utils/errorParser'
+import { ref, onMounted, watch } from "vue";
+import { Activity, Bot, Gauge, Loader2, Radio, Zap } from "lucide-vue-next";
+import Card from "@/components/ui/card.vue";
+import Badge from "@/components/ui/badge.vue";
+import Label from "@/components/ui/label.vue";
+import Select from "@/components/ui/select.vue";
+import SelectTrigger from "@/components/ui/select-trigger.vue";
+import SelectValue from "@/components/ui/select-value.vue";
+import SelectContent from "@/components/ui/select-content.vue";
+import SelectItem from "@/components/ui/select-item.vue";
+import RefreshButton from "@/components/ui/refresh-button.vue";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  getModelStatusMonitor,
+  getPublicModelStatusMonitor,
+} from "@/api/endpoints/health";
+import type { ModelStatusMonitor } from "@/api/endpoints/types";
+import { useToast } from "@/composables/useToast";
+import { parseApiError } from "@/utils/errorParser";
 
-const props = withDefaults(defineProps<{
-  title?: string
-  isAdmin?: boolean
-  showProviderInfo?: boolean
-}>(), {
-  title: '模型健康监控',
-  isAdmin: false,
-  showProviderInfo: false
-})
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    isAdmin?: boolean;
+    showProviderInfo?: boolean;
+  }>(),
+  {
+    title: "模型健康监控",
+    isAdmin: false,
+    showProviderInfo: false,
+  },
+);
 
-const { error: showError } = useToast()
+const { error: showError } = useToast();
 
-const loading = ref(false)
-const loadingMonitors = ref(false)
-const monitors = ref<ModelStatusMonitor[]>([])
-const generatedAt = ref<string | null>(null)
-const lookbackHours = ref('6')
+const loading = ref(false);
+const loadingMonitors = ref(false);
+const monitors = ref<ModelStatusMonitor[]>([]);
+const generatedAt = ref<string | null>(null);
+const lookbackHours = ref("6");
 
 async function loadMonitors() {
-  loadingMonitors.value = true
+  loadingMonitors.value = true;
   try {
     const params = {
       lookback_hours: parseInt(lookbackHours.value),
       model_limit: 12,
-      per_model_limit: 100
-    }
+      per_model_limit: 100,
+    };
 
     const data = props.isAdmin
       ? await getModelStatusMonitor(params)
-      : await getPublicModelStatusMonitor(params)
-    monitors.value = data.models || []
-    generatedAt.value = data.generated_at || null
+      : await getPublicModelStatusMonitor(params);
+    monitors.value = data.models || [];
+    generatedAt.value = data.generated_at || null;
   } catch (err: unknown) {
-    showError(parseApiError(err, '加载模型健康监控数据失败'), '错误')
+    showError(parseApiError(err, "加载模型健康监控数据失败"), "错误");
   } finally {
-    loadingMonitors.value = false
+    loadingMonitors.value = false;
   }
 }
 
 async function refreshData() {
-  loading.value = true
+  loading.value = true;
   try {
-    await loadMonitors()
+    await loadMonitors();
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
 function getHealthLabel(monitor: ModelStatusMonitor) {
-  if (monitor.total_attempts <= 0) return '未知'
-  if (monitor.success_rate >= 0.95) return '正常'
-  if (monitor.success_rate >= 0.8) return '波动'
-  return '异常'
+  if (monitor.total_attempts <= 0) return "未知";
+  if (monitor.success_rate >= 0.95) return "正常";
+  if (monitor.success_rate >= 0.8) return "波动";
+  return "异常";
 }
 
-function getHealthBadgeVariant(monitor: ModelStatusMonitor): 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'dark' {
-  if (monitor.total_attempts <= 0) return 'outline'
-  if (monitor.success_rate >= 0.95) return 'success'
-  if (monitor.success_rate >= 0.8) return 'warning'
-  return 'destructive'
+function getHealthBadgeVariant(
+  monitor: ModelStatusMonitor,
+):
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "warning"
+  | "dark" {
+  if (monitor.total_attempts <= 0) return "outline";
+  if (monitor.success_rate >= 0.95) return "success";
+  if (monitor.success_rate >= 0.8) return "warning";
+  return "destructive";
 }
 
 function getSuccessRateClass(rate: number) {
-  if (rate >= 0.95) return 'text-green-600 dark:text-green-400'
-  if (rate >= 0.8) return 'text-amber-600 dark:text-amber-400'
-  return 'text-red-600 dark:text-red-400'
+  if (rate >= 0.95) return "text-green-600 dark:text-green-400";
+  if (rate >= 0.8) return "text-amber-600 dark:text-amber-400";
+  return "text-red-600 dark:text-red-400";
 }
 
 function getModelMetaText(monitor: ModelStatusMonitor) {
-  const attempts = `${formatCompactNumber(monitor.total_attempts)} 次请求`
-  if (props.showProviderInfo && typeof monitor.provider_count === 'number') {
-    return `${monitor.provider_count} 个提供商 / ${attempts}`
+  const attempts = `${formatCompactNumber(monitor.total_attempts)} 次请求`;
+  if (props.showProviderInfo && typeof monitor.provider_count === "number") {
+    return `${monitor.provider_count} 个提供商 / ${attempts}`;
   }
-  return attempts
+  return attempts;
 }
 
 function formatMs(value?: number | null) {
-  if (typeof value !== 'number' || Number.isNaN(value)) return '-'
-  const absValue = Math.abs(value)
-  if (absValue < 1000) return `${Math.round(value)} ms`
-  if (absValue < 60_000) return `${formatDurationNumber(value / 1000)} s`
-  return `${formatDurationNumber(value / 60_000)} min`
+  if (typeof value !== "number" || Number.isNaN(value)) return "-";
+  const absValue = Math.abs(value);
+  if (absValue < 1000) return `${Math.round(value)} ms`;
+  if (absValue < 60_000) return `${formatDurationNumber(value / 1000)} s`;
+  return `${formatDurationNumber(value / 60_000)} min`;
 }
 
 function formatDurationNumber(value: number) {
-  return new Intl.NumberFormat('zh-CN', {
-    maximumFractionDigits: Math.abs(value) < 10 ? 2 : 1
-  }).format(value)
+  return new Intl.NumberFormat("zh-CN", {
+    maximumFractionDigits: Math.abs(value) < 10 ? 2 : 1,
+  }).format(value);
 }
 
 function formatPercent(value: number) {
-  if (typeof value !== 'number' || Number.isNaN(value)) return '-'
-  return `${(value * 100).toFixed(2)}%`
+  if (typeof value !== "number" || Number.isNaN(value)) return "-";
+  return `${(value * 100).toFixed(2)}%`;
+}
+
+function formatTps(value?: number | null) {
+  if (typeof value !== "number" || Number.isNaN(value)) return "-";
+  return `${new Intl.NumberFormat("zh-CN", {
+    maximumFractionDigits: value < 10 ? 2 : value < 100 ? 1 : 0,
+  }).format(value)} tps`;
 }
 
 function formatCompactNumber(value: number) {
-  return new Intl.NumberFormat('zh-CN', { notation: 'compact', maximumFractionDigits: 1 }).format(value)
+  return new Intl.NumberFormat("zh-CN", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(value);
 }
 
 function timelineSegments(monitor: ModelStatusMonitor) {
-  const timeline = Array.isArray(monitor.timeline) ? monitor.timeline : []
-  if (timeline.length > 0) return timeline
-  return Array.from({ length: 60 }, () => 'unknown')
+  const timeline = Array.isArray(monitor.timeline) ? monitor.timeline : [];
+  if (timeline.length > 0) return timeline;
+  return Array.from({ length: 60 }, () => "unknown");
 }
 
 function getTimelineColor(status: string) {
   switch (status) {
-    case 'healthy':
-      return 'bg-green-500/85 dark:bg-green-400/90'
-    case 'warning':
-      return 'bg-amber-400/85 dark:bg-amber-300/85'
-    case 'unhealthy':
-      return 'bg-red-500/85 dark:bg-red-400/90'
+    case "healthy":
+      return "bg-green-500/85 dark:bg-green-400/90";
+    case "warning":
+      return "bg-amber-400/85 dark:bg-amber-300/85";
+    case "unhealthy":
+      return "bg-red-500/85 dark:bg-red-400/90";
     default:
-      return 'bg-gray-300 dark:bg-gray-600'
+      return "bg-gray-300 dark:bg-gray-600";
   }
 }
 
 function getTimelineLabel(status: string) {
   switch (status) {
-    case 'healthy':
-      return '健康'
-    case 'warning':
-      return '波动'
-    case 'unhealthy':
-      return '异常'
+    case "healthy":
+      return "健康";
+    case "warning":
+      return "波动";
+    case "unhealthy":
+      return "异常";
     default:
-      return '无请求'
+      return "无请求";
   }
 }
 
-function buildTimelineTooltip(monitor: ModelStatusMonitor, status: string, index: number) {
-  const segmentCount = timelineSegments(monitor).length
-  const startMs = monitor.time_range_start ? new Date(monitor.time_range_start).getTime() : Date.now() - parseInt(lookbackHours.value) * 60 * 60 * 1000
-  const endMs = monitor.time_range_end ? new Date(monitor.time_range_end).getTime() : Date.now()
-  const interval = Math.max(endMs - startMs, 1) / segmentCount
-  const cellStart = new Date(startMs + index * interval).toISOString()
-  const cellEnd = new Date(startMs + (index + 1) * interval).toISOString()
-  return `${formatTimestamp(cellStart)} - ${formatTimestamp(cellEnd)}\n模型：${monitor.model}\n状态：${getTimelineLabel(status)}`
+function buildTimelineTooltip(
+  monitor: ModelStatusMonitor,
+  status: string,
+  index: number,
+) {
+  const segmentCount = timelineSegments(monitor).length;
+  const startMs = monitor.time_range_start
+    ? new Date(monitor.time_range_start).getTime()
+    : Date.now() - parseInt(lookbackHours.value) * 60 * 60 * 1000;
+  const endMs = monitor.time_range_end
+    ? new Date(monitor.time_range_end).getTime()
+    : Date.now();
+  const interval = Math.max(endMs - startMs, 1) / segmentCount;
+  const cellStart = new Date(startMs + index * interval).toISOString();
+  const cellEnd = new Date(startMs + (index + 1) * interval).toISOString();
+  return `${formatTimestamp(cellStart)} - ${formatTimestamp(cellEnd)}\n模型：${monitor.model}\n状态：${getTimelineLabel(status)}`;
 }
 
 function formatTimestamp(timestamp?: string | null) {
-  if (!timestamp) return '未知时间'
-  const date = new Date(timestamp)
-  if (Number.isNaN(date.getTime())) return '未知时间'
-  return date.toLocaleString('zh-CN', {
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
+  if (!timestamp) return "未知时间";
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return "未知时间";
+  return date.toLocaleString("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
 }
 
 watch(lookbackHours, () => {
-  loadMonitors()
-})
+  loadMonitors();
+});
 
 onMounted(() => {
-  refreshData()
-})
+  refreshData();
+});
 </script>

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

@@ -109,15 +109,19 @@
                 </div>
               </div>
 
-              <div class="grid w-full grid-cols-3 gap-2 lg:max-w-xl">
+              <div class="grid w-full grid-cols-4 gap-2 lg:max-w-2xl">
                 <MetricBox
-                  label="延迟"
+                  label="平均耗时"
                   :value="formatMs(provider.avg_latency_ms)"
                 />
                 <MetricBox
-                  label="Ping"
+                  label="平均TTFB"
                   :value="formatMs(provider.avg_first_byte_ms)"
                 />
+                <MetricBox
+                  label="平均速度"
+                  :value="formatTps(provider.avg_tps)"
+                />
                 <MetricBox
                   label="可用率"
                   :value="formatPercent(provider.success_rate)"
@@ -161,15 +165,19 @@
                   </Badge>
                 </div>
 
-                <div class="mt-4 grid grid-cols-3 gap-2">
+                <div class="mt-4 grid grid-cols-4 gap-2">
                   <MetricBox
-                    label="延迟"
+                    label="平均耗时"
                     :value="formatMs(model.avg_latency_ms)"
                   />
                   <MetricBox
-                    label="Ping"
+                    label="平均TTFB"
                     :value="formatMs(model.avg_first_byte_ms)"
                   />
+                  <MetricBox
+                    label="平均速度"
+                    :value="formatTps(model.avg_tps)"
+                  />
                   <MetricBox
                     label="可用率"
                     :value="formatPercent(model.success_rate)"
@@ -253,7 +261,7 @@ const MetricBox = defineComponent({
   },
   setup(props) {
     return () => h('div', { class: 'rounded-lg border border-border/40 bg-muted/20 px-3 py-2' }, [
-      h('div', { class: 'text-[11px] text-muted-foreground' }, props.label),
+      h('div', { class: 'text-[11px] leading-tight text-muted-foreground' }, props.label),
       h('div', { class: ['mt-1 text-sm font-semibold tabular-nums', props.valueClass] }, props.value)
     ])
   }
@@ -356,6 +364,13 @@ function formatPercent(value: number) {
   return `${(value * 100).toFixed(2)}%`
 }
 
+function formatTps(value?: number | null) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return '-'
+  return `${new Intl.NumberFormat('zh-CN', {
+    maximumFractionDigits: value < 10 ? 2 : value < 100 ? 1 : 0
+  }).format(value)} tps`
+}
+
 function formatCompactNumber(value: number) {
   return new Intl.NumberFormat('zh-CN', { notation: 'compact', maximumFractionDigits: 1 }).format(value)
 }