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/HealthMonitorCard.vue

@@ -88,6 +88,16 @@
               :lookback-hours="parseInt(lookbackHours)"
             />
           </div>
+
+          <div class="mt-4 flex justify-end">
+            <Button
+              variant="outline"
+              size="sm"
+              @click="openDetails(monitor)"
+            >
+              查看详情
+            </Button>
+          </div>
         </div>
       </div>
     </div>
@@ -99,18 +109,21 @@ import { computed, ref, onMounted, watch } from 'vue'
 import { Activity, Loader2 } from 'lucide-vue-next'
 import Card from '@/components/ui/card.vue'
 import Badge from '@/components/ui/badge.vue'
+import Button from '@/components/ui/button.vue'
 import HealthMetricGrid from './HealthMetricGrid.vue'
 import HealthMonitorHeader from './HealthMonitorHeader.vue'
 import EndpointHealthTimeline from './EndpointHealthTimeline.vue'
 import { getEndpointStatusMonitor, getPublicEndpointStatusMonitor } from '@/api/endpoints/health'
 import type { EndpointStatusMonitor, PublicEndpointStatusMonitor } from '@/api/endpoints/types'
+import type { HealthMonitorDetailTarget, HealthMonitorSectionSummary } from './health-monitor-utils'
 import { useToast } from '@/composables/useToast'
 import { parseApiError } from '@/utils/errorParser'
 import { formatApiFormat } from '@/api/endpoints/types/api-format'
 import {
   formatCompactNumber,
   getHealthBadgeVariant,
-  getHealthLabel
+  getHealthLabel,
+  summarizeHealthMonitorItems
 } from './health-monitor-utils'
 
 type EndpointMonitor = EndpointStatusMonitor | PublicEndpointStatusMonitor
@@ -125,6 +138,11 @@ const props = withDefaults(defineProps<{
   showProviderInfo: false
 })
 
+const emit = defineEmits<{
+  viewDetails: [target: HealthMonitorDetailTarget]
+  summaryUpdated: [summary: HealthMonitorSectionSummary]
+}>()
+
 const { error: showError } = useToast()
 
 const loading = ref(false)
@@ -148,6 +166,7 @@ async function loadMonitors() {
       const data = await getPublicEndpointStatusMonitor(params)
       monitors.value = data.formats || []
     }
+    emitSummary()
   } catch (err: unknown) {
     showError(parseApiError(err, '加载健康监控数据失败'), '错误')
   } finally {
@@ -175,6 +194,42 @@ function getEndpointMetaText(monitor: EndpointMonitor) {
   return attempts
 }
 
+function openDetails(monitor: EndpointMonitor) {
+  emit('viewDetails', {
+    lookbackHours: parseInt(lookbackHours.value),
+    source: {
+      kind: 'endpoint',
+      value: monitor.api_format,
+      title: formatApiFormat(monitor.api_format),
+      metaText: getEndpointDetailMetaText(monitor),
+      totalAttempts: monitor.total_attempts,
+      successCount: monitor.success_count,
+      failedCount: monitor.failed_count,
+      successRate: monitor.success_rate,
+      avgLatencyMs: monitor.avg_latency_ms,
+      avgFirstByteMs: monitor.avg_first_byte_ms,
+      avgTps: monitor.avg_tps,
+      timeline: monitor.timeline || null,
+      timeRangeStart: monitor.time_range_start || null,
+      timeRangeEnd: monitor.time_range_end || null
+    }
+  })
+}
+
+function getEndpointDetailMetaText(monitor: EndpointMonitor) {
+  if (props.showProviderInfo && hasProviderInfo(monitor)) {
+    return `${monitor.provider_count} 个提供商 / ${monitor.key_count} 个密钥`
+  }
+  if (hasApiPath(monitor)) {
+    return monitor.api_path
+  }
+  return null
+}
+
+function emitSummary() {
+  emit('summaryUpdated', summarizeHealthMonitorItems(visibleMonitors.value))
+}
+
 function hasProviderInfo(monitor: EndpointMonitor): monitor is EndpointStatusMonitor {
   return 'provider_count' in monitor && typeof monitor.provider_count === 'number'
 }

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

@@ -0,0 +1,304 @@
+<template>
+  <Dialog
+    v-model:open="isOpen"
+    :title="dialogTitle"
+    :description="dialogDescription"
+    max-width="6xl"
+    no-padding
+  >
+    <template #header-actions>
+      <Button
+        variant="outline"
+        size="sm"
+        @click="isOpen = false"
+      >
+        关闭
+      </Button>
+    </template>
+
+    <div class="max-h-[78vh] overflow-y-auto px-4 py-4 sm:px-6">
+      <div
+        v-if="sourceMonitor"
+        class="space-y-6"
+      >
+        <section>
+          <div class="mb-3 flex items-center justify-between gap-3">
+            <div>
+              <h4 class="text-sm font-semibold">
+                当前健康
+              </h4>
+              <p class="text-xs text-muted-foreground">
+                当前卡片在相同回溯窗口内的健康概况
+              </p>
+            </div>
+          </div>
+          <HealthRelatedMonitorCard
+            :monitor="sourceMonitor"
+            :lookback-hours="target?.lookbackHours || 6"
+            :show-detail-button="false"
+          />
+        </section>
+
+        <div
+          v-if="loading"
+          class="flex items-center justify-center rounded-xl border border-dashed border-border/60 py-12 text-muted-foreground"
+        >
+          <Loader2 class="h-5 w-5 animate-spin" />
+          <span class="ml-2 text-sm">加载关联健康...</span>
+        </div>
+
+        <div
+          v-else-if="errorMessage"
+          class="rounded-xl border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
+        >
+          <div class="flex items-start gap-2">
+            <AlertTriangle class="mt-0.5 h-4 w-4 flex-shrink-0" />
+            <div class="min-w-0">
+              <p class="font-medium">关联健康加载失败</p>
+              <p class="mt-1 text-xs">{{ errorMessage }}</p>
+            </div>
+          </div>
+          <Button
+            class="mt-3"
+            variant="outline"
+            size="sm"
+            @click="loadRelated"
+          >
+            重试
+          </Button>
+        </div>
+
+        <template v-else>
+          <section
+            v-for="section in relatedSections"
+            :key="section.key"
+            class="space-y-3"
+          >
+            <div>
+              <h4 class="text-sm font-semibold">
+                {{ section.title }}
+              </h4>
+              <p class="text-xs text-muted-foreground">
+                {{ section.description }}
+              </p>
+            </div>
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <HealthRelatedMonitorCard
+                v-for="monitor in section.items"
+                :key="`${monitor.kind}-${monitor.key}`"
+                :monitor="monitor"
+                :lookback-hours="target?.lookbackHours || 6"
+                :generated-at="related?.generated_at || null"
+                @view-details="openRelatedDetails"
+              />
+            </div>
+          </section>
+
+          <div
+            v-if="relatedSections.length === 0"
+            class="rounded-xl border border-dashed border-border/60 py-10 text-center text-sm text-muted-foreground"
+          >
+            当前时间范围内暂无关联健康数据
+          </div>
+        </template>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { AlertTriangle, Loader2 } from 'lucide-vue-next'
+import Dialog from '@/components/ui/dialog/Dialog.vue'
+import Button from '@/components/ui/button.vue'
+import {
+  getHealthRelatedMonitor,
+  getPublicHealthRelatedMonitor
+} from '@/api/endpoints/health'
+import type {
+  HealthRelatedMonitor,
+  HealthRelatedMonitorResponse
+} from '@/api/endpoints/types'
+import { useToast } from '@/composables/useToast'
+import { parseApiError } from '@/utils/errorParser'
+import HealthRelatedMonitorCard from './HealthRelatedMonitorCard.vue'
+import type {
+  HealthMonitorDetailSource,
+  HealthMonitorDetailTarget
+} from './health-monitor-utils'
+
+const props = defineProps<{
+  open: boolean
+  target: HealthMonitorDetailTarget | null
+  isAdmin: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  viewDetails: [target: HealthMonitorDetailTarget]
+}>()
+
+const { error: showError } = useToast()
+
+const related = ref<HealthRelatedMonitorResponse | null>(null)
+const loading = ref(false)
+const errorMessage = ref<string | null>(null)
+let requestSeq = 0
+
+const isOpen = computed({
+  get: () => props.open,
+  set: value => emit('update:open', value)
+})
+
+const dialogTitle = computed(() => {
+  if (!props.target) return '健康详情'
+  return `${props.target.source.title} 详情`
+})
+
+const dialogDescription = computed(() => {
+  if (!props.target) return '查看关联健康维度'
+  const dimensions = props.isAdmin ? '关联端点、模型与提供商健康' : '关联端点与模型健康'
+  return `${props.target.lookbackHours} 小时内的${dimensions}`
+})
+
+const sourceMonitor = computed<HealthRelatedMonitor | null>(() => {
+  const source = props.target?.source
+  if (!source) return null
+  return {
+    kind: source.kind,
+    key: source.value,
+    display_name: source.title,
+    meta_text: source.metaText || null,
+    total_attempts: source.totalAttempts,
+    success_count: source.successCount,
+    failed_count: source.failedCount,
+    success_rate: source.successRate,
+    avg_latency_ms: source.avgLatencyMs,
+    avg_first_byte_ms: source.avgFirstByteMs,
+    avg_tps: source.avgTps,
+    timeline: source.timeline || undefined,
+    time_range_start: source.timeRangeStart || null,
+    time_range_end: source.timeRangeEnd || null
+  }
+})
+
+const relatedSections = computed(() => {
+  const data = related.value
+  const targetKind = props.target?.source.kind
+  if (!data || !targetKind) return []
+
+  const sectionMap = {
+    endpoints: {
+      key: 'endpoints',
+      title: '关联端点健康',
+      description: '当前维度下实际请求涉及的端点健康',
+      items: data.related_endpoints || []
+    },
+    models: {
+      key: 'models',
+      title: '关联模型健康',
+      description: '当前维度下实际请求涉及的模型健康',
+      items: data.related_models || []
+    },
+    providers: {
+      key: 'providers',
+      title: '关联提供商健康',
+      description: '当前维度下实际请求涉及的提供商健康',
+      items: props.isAdmin ? (data.related_providers || []) : []
+    }
+  }
+
+  const orderByKind = {
+    endpoint: ['providers', 'models'],
+    provider: ['endpoints', 'models'],
+    model: ['providers', 'endpoints']
+  } as const
+
+  return orderByKind[targetKind]
+    .map(key => sectionMap[key])
+    .filter(section => section.items.length > 0)
+})
+
+async function loadRelated() {
+  const target = props.target
+  if (!props.open || !target) return
+
+  const seq = ++requestSeq
+  loading.value = true
+  errorMessage.value = null
+  try {
+    const params = {
+      dimension: target.source.kind,
+      value: target.source.value,
+      lookback_hours: target.lookbackHours,
+      related_limit: 8,
+      per_item_limit: 100
+    }
+    if (!props.isAdmin && target.source.kind === 'provider') {
+      throw new Error('公开健康监控不支持 provider 详情')
+    }
+    const data = props.isAdmin
+      ? await getHealthRelatedMonitor(params)
+      : await getPublicHealthRelatedMonitor({
+          ...params,
+          dimension: target.source.kind
+        })
+    if (seq === requestSeq) {
+      related.value = data
+    }
+  } catch (err: unknown) {
+    if (seq === requestSeq) {
+      const message = parseApiError(err, '加载关联健康失败')
+      errorMessage.value = message
+      showError(message, '错误')
+    }
+  } finally {
+    if (seq === requestSeq) {
+      loading.value = false
+    }
+  }
+}
+
+function openRelatedDetails(monitor: HealthRelatedMonitor) {
+  if (!props.isAdmin && monitor.kind === 'provider') return
+  emit('viewDetails', {
+    lookbackHours: props.target?.lookbackHours || 6,
+    source: buildSourceFromRelatedMonitor(monitor)
+  })
+}
+
+function buildSourceFromRelatedMonitor(monitor: HealthRelatedMonitor): HealthMonitorDetailSource {
+  return {
+    kind: monitor.kind,
+    value: monitor.key,
+    title: monitor.display_name || monitor.key,
+    metaText: buildRelatedMetaText(monitor),
+    totalAttempts: monitor.total_attempts,
+    successCount: monitor.success_count,
+    failedCount: monitor.failed_count,
+    successRate: monitor.success_rate,
+    avgLatencyMs: monitor.avg_latency_ms,
+    avgFirstByteMs: monitor.avg_first_byte_ms,
+    avgTps: monitor.avg_tps,
+    timeline: monitor.timeline || null,
+    timeRangeStart: monitor.time_range_start || null,
+    timeRangeEnd: monitor.time_range_end || null
+  }
+}
+
+function buildRelatedMetaText(monitor: HealthRelatedMonitor) {
+  return monitor.meta_text || null
+}
+
+watch([
+  () => props.open,
+  () => props.target?.source.kind,
+  () => props.target?.source.value,
+  () => props.target?.lookbackHours,
+  () => props.isAdmin
+], ([open]) => {
+  if (open) {
+    loadRelated()
+  }
+}, { immediate: true })
+</script>

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

@@ -0,0 +1,132 @@
+<template>
+  <div 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="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">
+          <component
+            :is="iconComponent"
+            class="h-5 w-5 text-muted-foreground"
+          />
+        </div>
+        <div class="min-w-0">
+          <h4 class="truncate text-sm font-semibold">
+            {{ monitor.display_name || monitor.key }}
+          </h4>
+          <p
+            v-if="monitor.meta_text"
+            class="mt-1 truncate text-xs text-muted-foreground"
+          >
+            {{ monitor.meta_text }}
+          </p>
+        </div>
+      </div>
+      <Badge
+        :variant="getHealthBadgeVariant(monitor)"
+        class="shrink-0"
+      >
+        {{ getHealthLabel(monitor) }}
+      </Badge>
+    </div>
+
+    <HealthMetricGrid
+      class="mt-4"
+      :avg-latency-ms="monitor.avg_latency_ms"
+      :avg-first-byte-ms="monitor.avg_first_byte_ms"
+      :avg-tps="monitor.avg_tps"
+      :total-attempts="monitor.total_attempts"
+      :success-rate="monitor.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">
+        {{ metaText }}
+      </span>
+    </div>
+
+    <HealthStatusTimeline
+      class="mt-2"
+      :timeline="monitor.timeline"
+      :time-range-start="monitor.time_range_start"
+      :time-range-end="monitor.time_range_end"
+      :generated-at="generatedAt"
+      :lookback-hours="lookbackHours"
+      :entity-label="entityLabel"
+      :entity-name="monitor.key"
+    />
+
+    <div
+      v-if="showDetailButton"
+      class="mt-4 flex justify-end"
+    >
+      <Button
+        variant="outline"
+        size="sm"
+        @click="$emit('viewDetails', monitor)"
+      >
+        查看详情
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Activity, Bot, Server } from 'lucide-vue-next'
+import Badge from '@/components/ui/badge.vue'
+import Button from '@/components/ui/button.vue'
+import type { HealthRelatedMonitor } from '@/api/endpoints/types'
+import HealthMetricGrid from './HealthMetricGrid.vue'
+import HealthStatusTimeline from './HealthStatusTimeline.vue'
+import {
+  formatCompactNumber,
+  getHealthBadgeVariant,
+  getHealthLabel
+} from './health-monitor-utils'
+
+const props = withDefaults(defineProps<{
+  monitor: HealthRelatedMonitor
+  lookbackHours: number
+  generatedAt?: string | null
+  showDetailButton?: boolean
+}>(), {
+  generatedAt: null,
+  showDetailButton: true
+})
+
+defineEmits<{
+  viewDetails: [monitor: HealthRelatedMonitor]
+}>()
+
+const iconComponent = computed(() => {
+  switch (props.monitor.kind) {
+    case 'model':
+      return Bot
+    case 'provider':
+      return Server
+    default:
+      return Activity
+  }
+})
+
+const entityLabel = computed(() => {
+  switch (props.monitor.kind) {
+    case 'model':
+      return '模型'
+    case 'provider':
+      return '提供商'
+    default:
+      return '端点'
+  }
+})
+
+const metaText = computed(() => {
+  const attempts = `${formatCompactNumber(props.monitor.total_attempts)} 次请求`
+  if (props.monitor.meta_text?.includes('次请求')) return props.monitor.meta_text
+  return props.monitor.meta_text
+    ? `${props.monitor.meta_text} / ${attempts}`
+    : attempts
+})
+</script>

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

@@ -79,6 +79,16 @@
             entity-label="模型"
             :entity-name="monitor.model"
           />
+
+          <div class="mt-4 flex justify-end">
+            <Button
+              variant="outline"
+              size="sm"
+              @click="openDetails(monitor)"
+            >
+              查看详情
+            </Button>
+          </div>
         </div>
       </div>
     </div>
@@ -90,6 +100,7 @@ import { ref, onMounted, watch } from "vue";
 import { Bot, Loader2 } from "lucide-vue-next";
 import Card from "@/components/ui/card.vue";
 import Badge from "@/components/ui/badge.vue";
+import Button from "@/components/ui/button.vue";
 import HealthMetricGrid from "./HealthMetricGrid.vue";
 import HealthMonitorHeader from "./HealthMonitorHeader.vue";
 import HealthStatusTimeline from "./HealthStatusTimeline.vue";
@@ -100,10 +111,15 @@ import {
 import type { ModelStatusMonitor } from "@/api/endpoints/types";
 import { useToast } from "@/composables/useToast";
 import { parseApiError } from "@/utils/errorParser";
+import type {
+  HealthMonitorDetailTarget,
+  HealthMonitorSectionSummary,
+} from "./health-monitor-utils";
 import {
   formatCompactNumber,
   getHealthBadgeVariant,
   getHealthLabel,
+  summarizeHealthMonitorItems,
 } from "./health-monitor-utils";
 
 const props = withDefaults(
@@ -119,6 +135,11 @@ const props = withDefaults(
   },
 );
 
+const emit = defineEmits<{
+  viewDetails: [target: HealthMonitorDetailTarget];
+  summaryUpdated: [summary: HealthMonitorSectionSummary];
+}>();
+
 const { error: showError } = useToast();
 
 const loading = ref(false);
@@ -141,6 +162,7 @@ async function loadMonitors() {
       : await getPublicModelStatusMonitor(params);
     monitors.value = data.models || [];
     generatedAt.value = data.generated_at || null;
+    emitSummary();
   } catch (err: unknown) {
     showError(parseApiError(err, "加载模型健康监控数据失败"), "错误");
   } finally {
@@ -165,6 +187,39 @@ function getModelMetaText(monitor: ModelStatusMonitor) {
   return attempts;
 }
 
+function openDetails(monitor: ModelStatusMonitor) {
+  emit("viewDetails", {
+    lookbackHours: parseInt(lookbackHours.value),
+    source: {
+      kind: "model",
+      value: monitor.model,
+      title: monitor.display_name || monitor.model,
+      metaText: getModelDetailMetaText(monitor),
+      totalAttempts: monitor.total_attempts,
+      successCount: monitor.success_count,
+      failedCount: monitor.failed_count,
+      successRate: monitor.success_rate,
+      avgLatencyMs: monitor.avg_latency_ms,
+      avgFirstByteMs: monitor.avg_first_byte_ms,
+      avgTps: monitor.avg_tps,
+      timeline: monitor.timeline || null,
+      timeRangeStart: monitor.time_range_start || null,
+      timeRangeEnd: monitor.time_range_end || null,
+    },
+  });
+}
+
+function getModelDetailMetaText(monitor: ModelStatusMonitor) {
+  if (props.showProviderInfo && typeof monitor.provider_count === "number") {
+    return `${monitor.provider_count} 个提供商`;
+  }
+  return null;
+}
+
+function emitSummary() {
+  emit("summaryUpdated", summarizeHealthMonitorItems(monitors.value));
+}
+
 watch(lookbackHours, () => {
   loadMonitors();
 });

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()
 })

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

@@ -7,11 +7,74 @@ export type HealthBadgeVariant =
   | 'warning'
   | 'dark'
 
+export type HealthMonitorSourceKind = 'endpoint' | 'model' | 'provider'
+
+export interface HealthMonitorDetailSource {
+  kind: HealthMonitorSourceKind
+  value: string
+  title: string
+  metaText?: string | null
+  totalAttempts: number
+  successCount: number
+  failedCount: number
+  successRate: number
+  avgLatencyMs?: number | null
+  avgFirstByteMs?: number | null
+  avgTps?: number | null
+  timeline?: string[] | null
+  timeRangeStart?: string | null
+  timeRangeEnd?: string | null
+}
+
+export interface HealthMonitorDetailTarget {
+  source: HealthMonitorDetailSource
+  lookbackHours: number
+}
+
 export interface HealthMonitorAvailability {
   total_attempts: number
   success_rate: number
 }
 
+export interface HealthMonitorSectionSummary {
+  total: number
+  healthy: number
+  warning: number
+  unhealthy: number
+  empty: number
+  attempts: number
+}
+
+export function summarizeHealthMonitorItems(
+  items: HealthMonitorAvailability[]
+): HealthMonitorSectionSummary {
+  return items.reduce<HealthMonitorSectionSummary>((summary, item) => {
+    summary.total += 1
+    summary.attempts += item.total_attempts
+    if (item.total_attempts <= 0) {
+      summary.empty += 1
+    } else if (item.success_rate >= 0.95) {
+      summary.healthy += 1
+    } else if (item.success_rate >= 0.8) {
+      summary.warning += 1
+    } else {
+      summary.unhealthy += 1
+    }
+    return summary
+  }, createEmptyHealthMonitorSectionSummary())
+}
+
+export function createEmptyHealthMonitorSectionSummary(): HealthMonitorSectionSummary {
+  return {
+    total: 0,
+    healthy: 0,
+    warning: 0,
+    unhealthy: 0,
+    empty: 0,
+    attempts: 0
+  }
+}
+
 export function getHealthLabel(
   item: HealthMonitorAvailability,
   emptyLabel = '暂无请求'