feat(health): 增加历史状态条指标 Tooltip

- 为健康监控时间轴返回 timeline_details 分段指标
- Hover 历史状态柱时展示总请求/成功/失败/可用率/状态
- 展示平均耗时/TTFB/速度和完整时间范围
- 修复历史状态柱 Tooltip 触发区域不可用的问题
- 补齐前端类型、详情抽屉透传和 mock 数据

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

@@ -2,6 +2,7 @@
   <HealthStatusTimeline
     v-if="hasStatusTimeline"
     :timeline="monitor?.timeline"
+    :timeline-details="monitor?.timeline_details"
     :time-range-start="monitor?.time_range_start"
     :time-range-end="monitor?.time_range_end"
     :lookback-hours="lookbackHours"
@@ -21,8 +22,10 @@
       >
         <Tooltip>
           <TooltipTrigger as-child>
-            <div
-              class="flex-1 h-full rounded-sm transition-all duration-150 cursor-pointer hover:scale-y-110 hover:brightness-110"
+            <button
+              type="button"
+              :title="segment.tooltip"
+              class="h-full flex-1 cursor-pointer rounded-sm border-0 p-0 transition-all duration-150 hover:scale-y-110 hover:brightness-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
               :class="segment.color"
             />
           </TooltipTrigger>
@@ -50,7 +53,7 @@ import { computed } from 'vue'
 import type { EndpointStatusMonitor, EndpointHealthEvent, PublicEndpointStatusMonitor, PublicHealthEvent } from '@/api/endpoints'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import HealthStatusTimeline from './HealthStatusTimeline.vue'
-import { formatTimestamp } from './health-monitor-utils'
+import { formatTimestamp, formatTimelineTooltip } from './health-monitor-utils'
 
 // 组件同时支持管理员端和用户端的监控数据类型
 // - EndpointStatusMonitor: 管理员端，包含 provider_count, key_count 等敏感信息
@@ -72,21 +75,24 @@ const segments = computed(() => {
   const gridCount = props.segmentCount ?? GRID_COUNT
   const lookbackHours = props.lookbackHours ?? 6
   const events = props.monitor?.events ?? []
-
-  // 无数据时显示空白格子
-  if (events.length === 0) {
-    return Array.from({ length: gridCount }, () => ({
-      color: 'bg-gray-300 dark:bg-gray-600',
-      tooltip: '暂无请求记录'
-    }))
-  }
-
-  // 计算时间范围：使用 UTC 时间戳避免时区问题
   const nowUtc = Date.now()
   const startTimeUtc = nowUtc - lookbackHours * 60 * 60 * 1000
   const timeRange = lookbackHours * 60 * 60 * 1000
   const timePerGrid = timeRange / gridCount
 
+  // 无数据时显示空白格子
+  if (events.length === 0) {
+    return Array.from({ length: gridCount }, (_, index) => {
+      const cellStartTime = new Date(startTimeUtc + index * timePerGrid)
+      const cellEndTime = new Date(startTimeUtc + (index + 1) * timePerGrid)
+      return {
+        color: 'bg-gray-300 dark:bg-gray-600',
+        tooltip: buildSegmentTooltip('unknown', cellStartTime, cellEndTime, [])
+      }
+    })
+  }
+
+  // 计算时间范围：使用 UTC 时间戳避免时区问题
   const gridEvents: Array<Array<EndpointHealthEvent | PublicHealthEvent>> = Array.from({ length: gridCount }, () => [])
 
   for (const event of events) {
@@ -107,7 +113,7 @@ const segments = computed(() => {
     if (cellEvents.length === 0) {
       result.push({
         color: 'bg-gray-300 dark:bg-gray-600',
-        tooltip: `${formatTimestamp(cellStartTime.toISOString())} - ${formatTimestamp(cellEndTime.toISOString())}\n暂无请求记录`
+        tooltip: buildSegmentTooltip('unknown', cellStartTime, cellEndTime, [])
       })
       continue
     }
@@ -115,7 +121,12 @@ const segments = computed(() => {
     if (cellEvents.length === 1) {
       result.push({
         color: getStatusColor(cellEvents[0].status),
-        tooltip: buildTooltip(cellEvents[0])
+        tooltip: buildSegmentTooltip(
+          getTimelineStatusFromEvents(cellEvents),
+          cellStartTime,
+          cellEndTime,
+          cellEvents
+        )
       })
       continue
     }
@@ -138,11 +149,15 @@ const segments = computed(() => {
       color = 'bg-gray-300 dark:bg-gray-600'
     }
 
-    const firstTime = formatTimestamp(cellEvents[0]?.timestamp)
-    const lastTime = formatTimestamp(cellEvents[cellEvents.length - 1]?.timestamp)
-    const tooltip = `${firstTime} - ${lastTime}\n共 ${total} 次请求\n成功: ${successCount}, 失败: ${failedCount}, 跳过: ${skippedCount}`
-
-    result.push({ color, tooltip })
+    result.push({
+      color,
+      tooltip: buildSegmentTooltip(
+        getTimelineStatusFromEvents(cellEvents),
+        cellStartTime,
+        cellEndTime,
+        cellEvents
+      )
+    })
   }
 
   return result
@@ -163,30 +178,6 @@ function getStatusColor(status: string) {
   }
 }
 
-function buildTooltip(event: EndpointHealthEvent | PublicHealthEvent) {
-  const time = formatTimestamp(event.timestamp)
-  const statusText = getStatusText(event.status)
-  const latency = event.latency_ms ? ` • ${event.latency_ms}ms` : ''
-  const code = event.status_code ? ` • ${event.status_code}` : ''
-  const error = event.error_type ? ` • ${event.error_type}` : ''
-  return `${time} ${statusText}${latency}${code}${error}`
-}
-
-function getStatusText(status: string) {
-  switch (status) {
-    case 'success':
-      return '成功'
-    case 'failed':
-      return '失败'
-    case 'skipped':
-      return '跳过'
-    case 'started':
-      return '执行中'
-    default:
-      return '未知'
-  }
-}
-
 // 计算时间范围显示
 const earliestTime = computed(() => {
   const explicitStart =
@@ -204,4 +195,51 @@ const latestTime = computed(() => {
   return formatTimestamp(new Date().toISOString())
 })
 
+function buildSegmentTooltip(
+  status: string,
+  cellStartTime: Date,
+  cellEndTime: Date,
+  cellEvents: Array<EndpointHealthEvent | PublicHealthEvent>
+) {
+  const successCount = cellEvents.filter(event => event.status === 'success').length
+  const failedCount = cellEvents.filter(event => event.status === 'failed').length
+  const completedCount = successCount + failedCount
+  const latencyValues = cellEvents
+    .map(event => event.latency_ms)
+    .filter((value): value is number => typeof value === 'number' && !Number.isNaN(value))
+  const avgLatencyMs = latencyValues.length > 0
+    ? latencyValues.reduce((sum, value) => sum + value, 0) / latencyValues.length
+    : null
+
+  return formatTimelineTooltip({
+    status,
+    timeRangeStart: cellStartTime.toISOString(),
+    timeRangeEnd: cellEndTime.toISOString(),
+    metrics: {
+      total_attempts: cellEvents.length,
+      success_count: successCount,
+      failed_count: failedCount,
+      success_rate: completedCount > 0 ? successCount / completedCount : null,
+      avg_latency_ms: avgLatencyMs,
+      avg_first_byte_ms: null,
+      avg_tps: null
+    },
+    entityLabel: '端点',
+    entityName: props.monitor?.api_format
+  })
+}
+
+function getTimelineStatusFromEvents(
+  cellEvents: Array<EndpointHealthEvent | PublicHealthEvent>
+) {
+  const successCount = cellEvents.filter(event => event.status === 'success').length
+  const failedCount = cellEvents.filter(event => event.status === 'failed').length
+  const completedCount = successCount + failedCount
+  if (completedCount === 0) return 'unknown'
+  const successRate = successCount / completedCount
+  if (successRate >= 0.95) return 'healthy'
+  if (successRate >= 0.7) return 'warning'
+  return 'unhealthy'
+}
+
 </script>

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

@@ -210,6 +210,7 @@ function openDetails(monitor: EndpointMonitor) {
       avgFirstByteMs: monitor.avg_first_byte_ms,
       avgTps: monitor.avg_tps,
       timeline: monitor.timeline || null,
+      timelineDetails: monitor.timeline_details || null,
       timeRangeStart: monitor.time_range_start || null,
       timeRangeEnd: monitor.time_range_end || null
     }

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

@@ -177,6 +177,7 @@ const sourceMonitor = computed<HealthRelatedMonitor | null>(() => {
     avg_first_byte_ms: source.avgFirstByteMs,
     avg_tps: source.avgTps,
     timeline: source.timeline || undefined,
+    timeline_details: source.timelineDetails || undefined,
     time_range_start: source.timeRangeStart || null,
     time_range_end: source.timeRangeEnd || null
   }
@@ -281,6 +282,7 @@ function buildSourceFromRelatedMonitor(monitor: HealthRelatedMonitor): HealthMon
     avgFirstByteMs: monitor.avg_first_byte_ms,
     avgTps: monitor.avg_tps,
     timeline: monitor.timeline || null,
+    timelineDetails: monitor.timeline_details || null,
     timeRangeStart: monitor.time_range_start || null,
     timeRangeEnd: monitor.time_range_end || null
   }

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

@@ -49,6 +49,7 @@
     <HealthStatusTimeline
       class="mt-2"
       :timeline="monitor.timeline"
+      :timeline-details="monitor.timeline_details"
       :time-range-start="monitor.time_range_start"
       :time-range-end="monitor.time_range_end"
       :generated-at="generatedAt"

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

@@ -8,8 +8,10 @@
       >
         <Tooltip>
           <TooltipTrigger as-child>
-            <div
-              class="h-full flex-1 cursor-pointer rounded-sm transition-all duration-150 hover:scale-y-110 hover:brightness-110"
+            <button
+              type="button"
+              :title="segment.tooltip"
+              class="h-full flex-1 cursor-pointer rounded-sm border-0 p-0 transition-all duration-150 hover:scale-y-110 hover:brightness-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
               :class="getTimelineColor(segment.status)"
             />
           </TooltipTrigger>
@@ -38,12 +40,14 @@ import { computed } from 'vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import {
   formatTimestamp,
+  formatTimelineTooltip,
   getTimelineColor,
-  getTimelineLabel
+  type HealthTimelineTooltipMetrics
 } from './health-monitor-utils'
 
 const props = withDefaults(defineProps<{
   timeline?: string[] | null
+  timelineDetails?: HealthTimelineTooltipMetrics[] | null
   timeRangeStart?: string | null
   timeRangeEnd?: string | null
   generatedAt?: string | null
@@ -96,17 +100,29 @@ const segments = computed(() => {
   return segmentStatuses.map((status, index) => {
     const cellStart = new Date(startMs.value + index * interval).toISOString()
     const cellEnd = new Date(startMs.value + (index + 1) * interval).toISOString()
+    const detail = props.timelineDetails?.[index] ?? null
+    const timeRangeStart = detail?.time_range_start || cellStart
+    const timeRangeEnd = detail?.time_range_end || cellEnd
     return {
       status,
-      tooltip: buildTooltip(status, cellStart, cellEnd)
+      tooltip: buildTooltip(status, timeRangeStart, timeRangeEnd, detail)
     }
   })
 })
 
-function buildTooltip(status: string, cellStart: string, cellEnd: string) {
-  const entity = props.entityLabel && props.entityName
-    ? `\n${props.entityLabel}：${props.entityName}`
-    : ''
-  return `${formatTimestamp(cellStart)} - ${formatTimestamp(cellEnd)}${entity}\n状态：${getTimelineLabel(status)}`
+function buildTooltip(
+  status: string,
+  cellStart: string,
+  cellEnd: string,
+  detail: HealthTimelineTooltipMetrics | null
+) {
+  return formatTimelineTooltip({
+    status,
+    timeRangeStart: cellStart,
+    timeRangeEnd: cellEnd,
+    metrics: detail,
+    entityLabel: props.entityLabel,
+    entityName: props.entityName
+  })
 }
 </script>

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

@@ -72,6 +72,7 @@
           <HealthStatusTimeline
             class="mt-2"
             :timeline="monitor.timeline"
+            :timeline-details="monitor.timeline_details"
             :time-range-start="monitor.time_range_start"
             :time-range-end="monitor.time_range_end"
             :generated-at="generatedAt"
@@ -203,6 +204,7 @@ function openDetails(monitor: ModelStatusMonitor) {
       avgFirstByteMs: monitor.avg_first_byte_ms,
       avgTps: monitor.avg_tps,
       timeline: monitor.timeline || null,
+      timelineDetails: monitor.timeline_details || null,
       timeRangeStart: monitor.time_range_start || null,
       timeRangeEnd: monitor.time_range_end || null,
     },

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

@@ -79,6 +79,7 @@
           <HealthStatusTimeline
             class="mt-2"
             :timeline="provider.timeline"
+            :timeline-details="provider.timeline_details"
             :time-range-start="provider.time_range_start"
             :time-range-end="provider.time_range_end"
             :generated-at="generatedAt"
@@ -192,6 +193,7 @@ function openDetails(provider: ProviderStatusMonitor) {
       avgFirstByteMs: provider.avg_first_byte_ms,
       avgTps: provider.avg_tps,
       timeline: provider.timeline || null,
+      timelineDetails: provider.timeline_details || null,
       timeRangeStart: provider.time_range_start || null,
       timeRangeEnd: provider.time_range_end || null
     }

frontend/src/features/providers/components/health-monitor-utils.ts

@@ -22,6 +22,7 @@ export interface HealthMonitorDetailSource {
   avgFirstByteMs?: number | null
   avgTps?: number | null
   timeline?: string[] | null
+  timelineDetails?: HealthTimelineTooltipMetrics[] | null
   timeRangeStart?: string | null
   timeRangeEnd?: string | null
 }
@@ -36,6 +37,18 @@ export interface HealthMonitorAvailability {
   success_rate: number
 }
 
+export interface HealthTimelineTooltipMetrics {
+  time_range_start?: string | null
+  time_range_end?: string | null
+  total_attempts?: number | null
+  success_count?: number | null
+  failed_count?: number | null
+  success_rate?: number | null
+  avg_latency_ms?: number | null
+  avg_first_byte_ms?: number | null
+  avg_tps?: number | null
+}
+
 export interface HealthMonitorSectionSummary {
   total: number
   healthy: number
@@ -136,6 +149,69 @@ export function formatTps(value?: number | null) {
   }).format(value)} tps`
 }
 
+export function formatFullTimestamp(timestamp?: string | null) {
+  if (!timestamp) return '未知时间'
+  const date = new Date(timestamp)
+  if (Number.isNaN(date.getTime())) return '未知时间'
+  const pad = (value: number) => value.toString().padStart(2, '0')
+  return [
+    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,
+    `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+  ].join(' ')
+}
+
+export function formatTimelineTooltip(input: {
+  status: string
+  timeRangeStart: string
+  timeRangeEnd: string
+  metrics?: HealthTimelineTooltipMetrics | null
+  entityLabel?: string
+  entityName?: string | null
+}) {
+  const metrics = input.metrics
+  const lines = [
+    `总请求/成功/失败/可用率/状态：${formatTimelineRequestBreakdown(metrics, input.status)}`,
+    `平均耗时/TTFB/速度：${formatTimelineAverageMetrics(metrics)}`,
+    `时间范围：${formatFullTimestamp(input.timeRangeStart)} - ${formatFullTimestamp(input.timeRangeEnd)}`
+  ]
+  if (input.entityLabel && input.entityName) {
+    lines.push(`${input.entityLabel}：${input.entityName}`)
+  }
+  return lines.join('\n')
+}
+
+function formatTimelineAverageMetrics(metrics?: HealthTimelineTooltipMetrics | null) {
+  return [
+    formatMs(metrics?.avg_latency_ms),
+    formatMs(metrics?.avg_first_byte_ms),
+    formatTps(metrics?.avg_tps)
+  ].join('/')
+}
+
+function formatTimelineRequestBreakdown(
+  metrics: HealthTimelineTooltipMetrics | null | undefined,
+  status: string
+) {
+  if (!metrics) return '-'
+  const total = formatTimelineCount(metrics.total_attempts)
+  const success = formatTimelineCount(metrics.success_count)
+  const failed = formatTimelineCount(metrics.failed_count)
+  const availability = formatTimelineMetricAvailability(metrics)
+  return `${total}/${success}/${failed}/${availability}/${getTimelineLabel(status)}`
+}
+
+function formatTimelineCount(value?: number | null) {
+  if (typeof value !== 'number' || Number.isNaN(value)) return '-'
+  return `${new Intl.NumberFormat('zh-CN').format(value)} 次`
+}
+
+function formatTimelineMetricAvailability(metrics?: HealthTimelineTooltipMetrics | null) {
+  if (!metrics) return '-'
+  if (typeof metrics.total_attempts === 'number' && metrics.total_attempts <= 0) return '-'
+  if (typeof metrics.success_rate !== 'number' || Number.isNaN(metrics.success_rate)) return '-'
+  return formatPercent(metrics.success_rate)
+}
+
 export function formatCompactNumber(value: number) {
   return new Intl.NumberFormat('zh-CN', {
     notation: 'compact',