refactor(health): add dashboard overview and related drill-down

- Replace health monitor tabs with a dashboard layout
- Add related health drill-down for endpoint, model, and provider cards
- Render provider health as cards and hide empty monitors

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

@@ -6,7 +6,7 @@
     <HealthMonitorHeader
       v-model:lookback-hours="lookbackHours"
       :title="title"
-      description="仅展示活跃提供商，展开后查看该提供商下的模型健康明细"
+      description="仅展示活跃提供商，点击详情查看该提供商关联的端点与模型健康"
       :loading="loading"
       @refresh="refreshData"
     />
@@ -21,159 +21,106 @@
       </div>
 
       <div
-        v-else-if="providers.length === 0"
+        v-else-if="visibleProviders.length === 0"
         class="flex flex-col items-center justify-center py-12 text-muted-foreground"
       >
         <Server class="w-12 h-12 mb-3 opacity-30" />
-        <p>暂无活跃提供商健康数据</p>
+        <p>暂无提供商健康数据</p>
         <p class="text-xs mt-1">
-          当前没有活跃提供商或尚未产生请求记录
+          当前没有提供商产生请求记录
         </p>
       </div>
 
       <div
         v-else
-        class="space-y-3"
+        class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
       >
-        <Collapsible
-          v-for="provider in providers"
+        <div
+          v-for="provider in visibleProviders"
           :key="provider.provider_id"
-          v-model:open="expandedProviders[provider.provider_id]"
-          class="overflow-hidden rounded-xl border border-border/60 bg-card/60"
+          class="relative overflow-hidden rounded-xl border border-border/60 bg-card/60 p-4 transition-colors hover:border-primary/50"
         >
-          <CollapsibleTrigger as-child>
-            <button
-              type="button"
-              class="flex w-full flex-col gap-4 p-4 text-left transition-colors hover:bg-muted/30 lg:flex-row lg:items-center lg:justify-between"
-            >
-              <div class="flex min-w-0 items-start 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">
-                  <Server class="h-5 w-5 text-muted-foreground" />
-                </div>
-                <div class="min-w-0">
-                  <div class="flex min-w-0 flex-wrap items-center gap-2">
-                    <ChevronRight
-                      class="h-4 w-4 text-muted-foreground transition-transform"
-                      :class="{ 'rotate-90': expandedProviders[provider.provider_id] }"
-                    />
-                    <h4 class="truncate text-sm font-semibold">
-                      {{ provider.provider_name }}
-                    </h4>
-                    <Badge
-                      variant="outline"
-                      class="font-mono text-[11px]"
-                    >
-                      {{ provider.provider_type || 'custom' }}
-                    </Badge>
-                    <Badge :variant="getHealthBadgeVariant(provider)">
-                      {{ getHealthLabel(provider) }}
-                    </Badge>
-                  </div>
-                  <p class="mt-1 text-xs text-muted-foreground">
-                    {{ getProviderMetaText(provider) }}
-                  </p>
-                </div>
+          <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">
+                <Server class="h-5 w-5 text-muted-foreground" />
               </div>
-
-              <HealthMetricGrid
-                class="lg:max-w-2xl"
-                :avg-latency-ms="provider.avg_latency_ms"
-                :avg-first-byte-ms="provider.avg_first_byte_ms"
-                :avg-tps="provider.avg_tps"
-                :total-attempts="provider.total_attempts"
-                :success-rate="provider.success_rate"
-              />
-            </button>
-          </CollapsibleTrigger>
-
-          <CollapsibleContent class="border-t border-border/50 px-4 pb-4 pt-4">
-            <div
-              v-if="provider.models.length === 0"
-              class="rounded-lg border border-dashed border-border/60 py-8 text-center text-sm text-muted-foreground"
-            >
-              该提供商在当前时间范围内暂无模型请求
-            </div>
-            <div
-              v-else
-              class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
-            >
-              <div
-                v-for="model in provider.models"
-                :key="`${provider.provider_id}-${model.model}`"
-                class="relative overflow-hidden rounded-xl border border-border/60 bg-card/80 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="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">
-                      <Bot class="h-5 w-5 text-muted-foreground" />
-                    </div>
-                    <h4 class="min-w-0 truncate text-sm font-semibold">
-                      {{ model.display_name || model.model }}
-                    </h4>
-                  </div>
-                  <Badge
-                    :variant="getHealthBadgeVariant(model)"
-                    class="shrink-0"
-                  >
-                    {{ getHealthLabel(model) }}
-                  </Badge>
-                </div>
-
-                <HealthMetricGrid
-                  class="mt-4"
-                  :avg-latency-ms="model.avg_latency_ms"
-                  :avg-first-byte-ms="model.avg_first_byte_ms"
-                  :avg-tps="model.avg_tps"
-                  :total-attempts="model.total_attempts"
-                  :success-rate="model.success_rate"
-                />
-
-                <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">
-                    {{ formatCompactNumber(model.total_attempts) }} 次请求
-                  </span>
-                </div>
-
-                <HealthStatusTimeline
-                  class="mt-2"
-                  :timeline="model.timeline"
-                  :time-range-start="model.time_range_start"
-                  :time-range-end="model.time_range_end"
-                  :generated-at="generatedAt"
-                  :lookback-hours="parseInt(lookbackHours)"
-                  entity-label="模型"
-                  :entity-name="model.model"
-                />
+              <div class="min-w-0">
+                <h4 class="truncate text-sm font-semibold">
+                  {{ provider.provider_name }}
+                </h4>
               </div>
             </div>
-          </CollapsibleContent>
-        </Collapsible>
+            <Badge
+              :variant="getHealthBadgeVariant(provider)"
+              class="shrink-0"
+            >
+              {{ getHealthLabel(provider) }}
+            </Badge>
+          </div>
+
+          <HealthMetricGrid
+            class="mt-4"
+            :avg-latency-ms="provider.avg_latency_ms"
+            :avg-first-byte-ms="provider.avg_first_byte_ms"
+            :avg-tps="provider.avg_tps"
+            :total-attempts="provider.total_attempts"
+            :success-rate="provider.success_rate"
+          />
+
+          <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">
+              {{ getProviderMetaText(provider) }}
+            </span>
+          </div>
+
+          <HealthStatusTimeline
+            class="mt-2"
+            :timeline="provider.timeline"
+            :time-range-start="provider.time_range_start"
+            :time-range-end="provider.time_range_end"
+            :generated-at="generatedAt"
+            :lookback-hours="parseInt(lookbackHours)"
+            entity-label="提供商"
+            :entity-name="provider.provider_name"
+          />
+
+          <div class="mt-4 flex justify-end">
+            <Button
+              variant="outline"
+              size="sm"
+              @click="openDetails(provider)"
+            >
+              查看详情
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   </Card>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-import { Bot, ChevronRight, Loader2, Server } from 'lucide-vue-next'
+import { computed, ref, onMounted, watch } from 'vue'
+import { Loader2, Server } from 'lucide-vue-next'
 import Card from '@/components/ui/card.vue'
 import Badge from '@/components/ui/badge.vue'
-import Collapsible from '@/components/ui/collapsible.vue'
-import CollapsibleTrigger from '@/components/ui/collapsible-trigger.vue'
-import CollapsibleContent from '@/components/ui/collapsible-content.vue'
+import Button from '@/components/ui/button.vue'
 import HealthMetricGrid from './HealthMetricGrid.vue'
 import HealthMonitorHeader from './HealthMonitorHeader.vue'
 import HealthStatusTimeline from './HealthStatusTimeline.vue'
 import { getProviderStatusMonitor } from '@/api/endpoints/health'
 import type { ProviderStatusMonitor } from '@/api/endpoints/types'
+import type { HealthMonitorDetailTarget, HealthMonitorSectionSummary } from './health-monitor-utils'
 import { useToast } from '@/composables/useToast'
 import { parseApiError } from '@/utils/errorParser'
 import {
   formatCompactNumber,
   getHealthBadgeVariant,
-  getHealthLabel
+  getHealthLabel,
+  summarizeHealthMonitorItems
 } from './health-monitor-utils'
 
 const props = withDefaults(defineProps<{
@@ -182,6 +129,11 @@ const props = withDefaults(defineProps<{
   title: '提供商健康监控'
 })
 
+const emit = defineEmits<{
+  viewDetails: [target: HealthMonitorDetailTarget]
+  summaryUpdated: [summary: HealthMonitorSectionSummary]
+}>()
+
 const { error: showError } = useToast()
 
 const loading = ref(false)
@@ -189,7 +141,7 @@ const loadingMonitors = ref(false)
 const providers = ref<ProviderStatusMonitor[]>([])
 const generatedAt = ref<string | null>(null)
 const lookbackHours = ref('6')
-const expandedProviders = ref<Record<string, boolean>>({})
+const visibleProviders = computed(() => providers.value.filter(provider => provider.total_attempts > 0))
 
 async function loadMonitors() {
   loadingMonitors.value = true
@@ -202,7 +154,7 @@ async function loadMonitors() {
     })
     providers.value = data.providers || []
     generatedAt.value = data.generated_at || null
-    ensureExpandedProviderState()
+    emitSummary()
   } catch (err: unknown) {
     showError(parseApiError(err, '加载提供商健康监控数据失败'), '错误')
   } finally {
@@ -219,21 +171,37 @@ async function refreshData() {
   }
 }
 
-function ensureExpandedProviderState() {
-  const next = { ...expandedProviders.value }
-  for (const provider of providers.value) {
-    if (!(provider.provider_id in next)) {
-      next[provider.provider_id] = false
-    }
-  }
-  expandedProviders.value = next
-}
-
 function getProviderMetaText(provider: ProviderStatusMonitor) {
   const attempts = `${formatCompactNumber(provider.total_attempts)} 次请求`
   return `${provider.model_count} 个模型 / ${attempts}`
 }
 
+function openDetails(provider: ProviderStatusMonitor) {
+  emit('viewDetails', {
+    lookbackHours: parseInt(lookbackHours.value),
+    source: {
+      kind: 'provider',
+      value: provider.provider_name,
+      title: provider.provider_name,
+      metaText: null,
+      totalAttempts: provider.total_attempts,
+      successCount: provider.success_count,
+      failedCount: provider.failed_count,
+      successRate: provider.success_rate,
+      avgLatencyMs: provider.avg_latency_ms,
+      avgFirstByteMs: provider.avg_first_byte_ms,
+      avgTps: provider.avg_tps,
+      timeline: provider.timeline || null,
+      timeRangeStart: provider.time_range_start || null,
+      timeRangeEnd: provider.time_range_end || null
+    }
+  })
+}
+
+function emitSummary() {
+  emit('summaryUpdated', summarizeHealthMonitorItems(visibleProviders.value))
+}
+
 watch(lookbackHours, () => {
   loadMonitors()
 })