From c76d6b639609f6c2973786b8b3022674e661252e Mon Sep 17 00:00:00 2001
From: elky <elky0401@gmail.com>
Date: Fri, 26 Jun 2026 01:32:45 +0800
Subject: [PATCH] Add admin operations dashboard and usage state fixes

---
 .../observability/usage/detail_routes.rs      |   16 +
 .../observability/usage/summary_routes.rs     |   60 +-
 .../src/tests/control/admin/usage.rs          |   76 ++
 .../usage/components/RequestDetailDrawer.vue  |    9 +-
 frontend/src/layouts/MainLayout.vue           |    2 +-
 frontend/src/mocks/handler.ts                 |  370 +++++-
 frontend/src/router/index.ts                  |    2 +-
 .../views/admin/AdminOperationsDashboard.vue  | 1129 +++++++++++++++++
 8 files changed, 1656 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/views/admin/AdminOperationsDashboard.vue

diff --git a/apps/aether-gateway/src/handlers/admin/observability/usage/detail_routes.rs b/apps/aether-gateway/src/handlers/admin/observability/usage/detail_routes.rs
index bfa5d7c52..598cd55cf 100644
--- a/apps/aether-gateway/src/handlers/admin/observability/usage/detail_routes.rs
+++ b/apps/aether-gateway/src/handlers/admin/observability/usage/detail_routes.rs
@@ -7,6 +7,9 @@ use super::replay::{
     admin_usage_resolve_request_capture_body_for_item, build_admin_usage_curl_response,
     build_admin_usage_detail_payload, build_admin_usage_replay_response,
 };
+use super::summary_routes::{
+    admin_usage_terminal_candidate_state_override, apply_admin_usage_state_override,
+};
 use crate::handlers::admin::request::{AdminAppState, AdminRequestContext};
 use crate::handlers::admin::shared::{attach_admin_audit_response, query_param_bool};
 use crate::GatewayError;
@@ -233,6 +236,19 @@ pub(super) async fn maybe_build_local_admin_usage_detail_response(
             let provider_key_name = admin_usage_provider_key_name(&item, &provider_key_names);
 
             let mut detail_item = item.clone();
+            if matches!(detail_item.status.as_str(), "pending" | "streaming")
+                && state.has_request_candidate_data_reader()
+            {
+                let candidates = state
+                    .app()
+                    .read_request_candidates_by_request_id(&detail_item.request_id)
+                    .await?;
+                if let Some(override_payload) =
+                    admin_usage_terminal_candidate_state_override(&candidates)
+                {
+                    apply_admin_usage_state_override(&mut detail_item, &override_payload);
+                }
+            }
             let mut body_load_errors = serde_json::Map::new();
             let request_body = if include_bodies {
                 let (request_body, provider_request_body, response_body, client_response_body) = tokio::join!(
diff --git a/apps/aether-gateway/src/handlers/admin/observability/usage/summary_routes.rs b/apps/aether-gateway/src/handlers/admin/observability/usage/summary_routes.rs
index 559b8a36a..315ef5872 100644
--- a/apps/aether-gateway/src/handlers/admin/observability/usage/summary_routes.rs
+++ b/apps/aether-gateway/src/handlers/admin/observability/usage/summary_routes.rs
@@ -301,7 +301,7 @@ fn admin_usage_unix_millis_to_rfc3339(unix_ms: u64) -> Option<String> {
         .map(|timestamp| timestamp.to_rfc3339())
 }
 
-fn admin_usage_terminal_candidate_state_override(
+pub(super) fn admin_usage_terminal_candidate_state_override(
     candidates: &[StoredRequestCandidate],
 ) -> Option<serde_json::Value> {
     let candidate = admin_usage_current_candidate(candidates)?;
@@ -343,6 +343,49 @@ fn admin_usage_terminal_candidate_state_override(
     Some(payload)
 }
 
+pub(super) fn apply_admin_usage_state_override(
+    item: &mut StoredRequestUsageAudit,
+    override_payload: &serde_json::Value,
+) {
+    if !matches!(item.status.as_str(), "pending" | "streaming") {
+        return;
+    }
+
+    let Some(object) = override_payload.as_object() else {
+        return;
+    };
+
+    if let Some(status) = object
+        .get("status")
+        .and_then(serde_json::Value::as_str)
+        .map(str::trim)
+        .filter(|value| matches!(*value, "completed" | "failed" | "cancelled"))
+    {
+        item.status = status.to_string();
+    }
+    if let Some(status_code) = object
+        .get("status_code")
+        .and_then(serde_json::Value::as_u64)
+        .and_then(|value| u16::try_from(value).ok())
+    {
+        item.status_code = Some(status_code);
+    }
+    if let Some(response_time_ms) = object
+        .get("response_time_ms")
+        .and_then(serde_json::Value::as_u64)
+    {
+        item.response_time_ms = Some(response_time_ms);
+    }
+    if let Some(error_message) = object
+        .get("error_message")
+        .and_then(serde_json::Value::as_str)
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+    {
+        item.error_message = Some(error_message.to_string());
+    }
+}
+
 fn admin_usage_matches_attempt_status(
     item: &StoredRequestUsageAudit,
     status: &str,
@@ -901,6 +944,21 @@ pub(super) async fn maybe_build_local_admin_usage_summary_response(
                 }
             };
 
+            let active_candidate_state =
+                resolve_admin_usage_active_candidate_state(state, &usage).await?;
+            let usage = usage
+                .into_iter()
+                .map(|mut item| {
+                    if let Some(override_payload) = active_candidate_state
+                        .state_overrides_by_request_id
+                        .get(&item.request_id)
+                    {
+                        apply_admin_usage_state_override(&mut item, override_payload);
+                    }
+                    item
+                })
+                .collect::<Vec<_>>();
+
             let user_ids: Vec<String> = usage
                 .iter()
                 .filter_map(|item| item.user_id.clone())
diff --git a/apps/aether-gateway/src/tests/control/admin/usage.rs b/apps/aether-gateway/src/tests/control/admin/usage.rs
index ff0bfef78..0f768049e 100644
--- a/apps/aether-gateway/src/tests/control/admin/usage.rs
+++ b/apps/aether-gateway/src/tests/control/admin/usage.rs
@@ -1170,6 +1170,82 @@ async fn gateway_handles_admin_usage_active_ids_for_terminal_updates() {
     upstream_handle.abort();
 }
 
+#[tokio::test]
+async fn gateway_derives_admin_usage_records_and_detail_status_from_terminal_candidate() {
+    let (_records_upstream_url, records_upstream_hits, records_upstream_handle) =
+        start_usage_upstream("/api/admin/usage/records").await;
+
+    let usage_repository = Arc::new(InMemoryUsageReadRepository::seed(vec![sample_usage_row(
+        "usage-stale-stream",
+        "req-stale-stream",
+        Some("user-1"),
+        Some("key-1"),
+        Some("primary"),
+        "OpenAI",
+        "gpt-5",
+        "streaming",
+        20,
+        5,
+        0.2,
+        0.24,
+        DAY_1_UNIX_SECS,
+    )]));
+    let request_candidate_repository = Arc::new(InMemoryRequestCandidateRepository::seed(vec![
+        sample_request_candidate(
+            "cand-stale-stream-success",
+            "req-stale-stream",
+            0,
+            0,
+            RequestCandidateStatus::Success,
+        ),
+    ]));
+    let gateway = build_router_with_state(
+        AppState::new()
+            .expect("gateway should build")
+            .with_data_state_for_tests(
+                GatewayDataState::with_request_candidate_and_usage_repository_for_tests(
+                    request_candidate_repository,
+                    usage_repository,
+                ),
+            ),
+    );
+    let (gateway_url, gateway_handle) = start_server(gateway).await;
+
+    let records_response = admin_request(reqwest::Client::new().get(format!(
+        "{gateway_url}/api/admin/usage/records?start_date=2024-03-21&end_date=2024-03-21&tz_offset_minutes=0&limit=10&offset=0"
+    )))
+    .send()
+    .await
+    .expect("records request should succeed");
+
+    assert_eq!(records_response.status(), StatusCode::OK);
+    let records_payload: serde_json::Value = records_response
+        .json()
+        .await
+        .expect("records json should parse");
+    assert_eq!(records_payload["records"][0]["id"], "usage-stale-stream");
+    assert_eq!(records_payload["records"][0]["status"], "completed");
+
+    let detail_response = admin_request(
+        reqwest::Client::new().get(format!("{gateway_url}/api/admin/usage/usage-stale-stream")),
+    )
+    .send()
+    .await
+    .expect("detail request should succeed");
+
+    assert_eq!(detail_response.status(), StatusCode::OK);
+    let detail_payload: serde_json::Value = detail_response
+        .json()
+        .await
+        .expect("detail json should parse");
+    assert_eq!(detail_payload["id"], "usage-stale-stream");
+    assert_eq!(detail_payload["status"], "completed");
+    assert_eq!(*records_upstream_hits.lock().expect("mutex should lock"), 0);
+
+    gateway_handle.abort();
+    records_upstream_handle.abort();
+}
+
 #[tokio::test]
 async fn gateway_handles_admin_usage_records_locally_with_trusted_admin_principal() {
     let (_upstream_url, upstream_hits, upstream_handle) =
diff --git a/frontend/src/features/usage/components/RequestDetailDrawer.vue b/frontend/src/features/usage/components/RequestDetailDrawer.vue
index c9cbdd0e2..cfc099792 100644
--- a/frontend/src/features/usage/components/RequestDetailDrawer.vue
+++ b/frontend/src/features/usage/components/RequestDetailDrawer.vue
@@ -2432,9 +2432,12 @@ async function loadDetail(id: string, silent = false) {
       timelineRef.value?.refresh()
     }
 
-    // 已完成请求需要停止自动刷新；进行中的请求只在用户手动开启后才保持刷新
-    if (props.isOpen && isRequestCompleted()) {
-      stopAutoRefresh()
+    if (props.isOpen) {
+      if (isRequestCompleted()) {
+        stopAutoRefresh()
+      } else if (!silent) {
+        startAutoRefresh()
+      }
     }
   } catch (err) {
     if (requestId !== loadDetailRequestId) return
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 06ae342d4..ec293874d 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -1180,7 +1180,7 @@ const navigation = computed(() => {
      {
       title: '概览',
       items: [
-        { name: '仪表盘', href: '/admin/dashboard', icon: Home },
+        { name: '运维总览', href: '/admin/dashboard', icon: Home },
         { name: '健康监控', href: '/admin/health-monitor', icon: Activity },
         { name: '用户统计', href: '/admin/user-stats', icon: BarChart3 },
         { name: '成本分析', href: '/admin/cost-analysis', icon: Gauge },
diff --git a/frontend/src/mocks/handler.ts b/frontend/src/mocks/handler.ts
index 7437b295d..1cb50c4d6 100644
--- a/frontend/src/mocks/handler.ts
+++ b/frontend/src/mocks/handler.ts
@@ -4100,6 +4100,98 @@ mockHandlers['GET /api/admin/stats/performance/percentiles'] = async () => {
   ])
 }
 
+mockHandlers['GET /api/admin/stats/performance/providers'] = async () => {
+  await delay()
+  requireAdmin()
+  return createMockResponse({
+    summary: {
+      request_count: 18420,
+      success_rate: 97.36,
+      avg_output_tps: 78.4,
+      avg_first_byte_time_ms: 318,
+      avg_response_time_ms: 1640,
+      p90_response_time_ms: 2860,
+      p99_response_time_ms: 9120,
+      p90_first_byte_time_ms: 690,
+      p99_first_byte_time_ms: 2210,
+      tps_sample_count: 17120,
+      response_time_sample_count: 18200,
+      first_byte_sample_count: 16840,
+      slow_request_count: 214
+    },
+    providers: [
+      {
+        provider_id: 'provider-openai',
+        provider: 'OpenAI',
+        request_count: 8120,
+        success_count: 7930,
+        error_count: 190,
+        success_rate: 97.66,
+        output_tokens: 1480000,
+        avg_output_tps: 83.2,
+        avg_first_byte_time_ms: 286,
+        avg_response_time_ms: 1420,
+        p90_response_time_ms: 2440,
+        p99_response_time_ms: 7520,
+        p90_first_byte_time_ms: 620,
+        p99_first_byte_time_ms: 1840,
+        tps_sample_count: 7890,
+        response_time_sample_count: 8050,
+        first_byte_sample_count: 7760,
+        slow_request_count: 71
+      },
+      {
+        provider_id: 'provider-anthropic',
+        provider: 'Anthropic',
+        request_count: 6230,
+        success_count: 6044,
+        error_count: 186,
+        success_rate: 97.01,
+        output_tokens: 1120000,
+        avg_output_tps: 62.7,
+        avg_first_byte_time_ms: 410,
+        avg_response_time_ms: 1880,
+        p90_response_time_ms: 3180,
+        p99_response_time_ms: 10120,
+        p90_first_byte_time_ms: 820,
+        p99_first_byte_time_ms: 2680,
+        tps_sample_count: 5900,
+        response_time_sample_count: 6150,
+        first_byte_sample_count: 5810,
+        slow_request_count: 109
+      },
+      {
+        provider_id: 'provider-gemini',
+        provider: 'Gemini',
+        request_count: 4070,
+        success_count: 3960,
+        error_count: 110,
+        success_rate: 97.30,
+        output_tokens: 780000,
+        avg_output_tps: 91.1,
+        avg_first_byte_time_ms: 240,
+        avg_response_time_ms: 1210,
+        p90_response_time_ms: 2190,
+        p99_response_time_ms: 6420,
+        p90_first_byte_time_ms: 520,
+        p99_first_byte_time_ms: 1510,
+        tps_sample_count: 3930,
+        response_time_sample_count: 4000,
+        first_byte_sample_count: 3820,
+        slow_request_count: 34
+      }
+    ],
+    timeline: [
+      { date: '2026-02-01', provider_id: 'provider-openai', provider: 'OpenAI', request_count: 4020, output_tokens: 720000, avg_output_tps: 81.4, avg_first_byte_time_ms: 294, avg_response_time_ms: 1450, success_rate: 97.4, slow_request_count: 38 },
+      { date: '2026-02-02', provider_id: 'provider-openai', provider: 'OpenAI', request_count: 4100, output_tokens: 760000, avg_output_tps: 85.1, avg_first_byte_time_ms: 278, avg_response_time_ms: 1390, success_rate: 97.9, slow_request_count: 33 },
+      { date: '2026-02-01', provider_id: 'provider-anthropic', provider: 'Anthropic', request_count: 3020, output_tokens: 540000, avg_output_tps: 60.8, avg_first_byte_time_ms: 430, avg_response_time_ms: 1940, success_rate: 96.7, slow_request_count: 58 },
+      { date: '2026-02-02', provider_id: 'provider-anthropic', provider: 'Anthropic', request_count: 3210, output_tokens: 580000, avg_output_tps: 64.2, avg_first_byte_time_ms: 392, avg_response_time_ms: 1810, success_rate: 97.3, slow_request_count: 51 },
+      { date: '2026-02-01', provider_id: 'provider-gemini', provider: 'Gemini', request_count: 2020, output_tokens: 382000, avg_output_tps: 88.6, avg_first_byte_time_ms: 252, avg_response_time_ms: 1260, success_rate: 97.0, slow_request_count: 18 },
+      { date: '2026-02-02', provider_id: 'provider-gemini', provider: 'Gemini', request_count: 2050, output_tokens: 398000, avg_output_tps: 93.6, avg_first_byte_time_ms: 228, avg_response_time_ms: 1160, success_rate: 97.6, slow_request_count: 16 }
+    ]
+  })
+}
+
 mockHandlers['GET /api/admin/stats/errors/distribution'] = async () => {
   await delay()
   requireAdmin()
@@ -4249,6 +4341,241 @@ mockHandlers['GET /api/admin/monitoring/resilience/circuit-history'] = async ()
   })
 }
 
+mockHandlers['GET /api/admin/monitoring/cache/stats'] = async () => {
+  await delay()
+  requireAdmin()
+  return createMockResponse({
+    status: 'ok',
+    data: {
+      scheduler: 'adaptive-cache-affinity',
+      total_affinities: 1428,
+      cache_hit_rate: 0.842,
+      provider_switches: 38,
+      key_switches: 74,
+      cache_hits: 93842,
+      cache_misses: 17610,
+      scheduler_metrics: {
+        cache_hits: 93842,
+        cache_misses: 17610,
+        cache_hit_rate: 0.842,
+        total_batches: 0,
+        last_batch_size: 0,
+        total_candidates: 0,
+        last_candidate_count: 0,
+        concurrency_denied: 0,
+        avg_candidates_per_batch: 0,
+        scheduling_mode: 'adaptive',
+        provider_priority_mode: 'weighted'
+      },
+      affinity_stats: {
+        storage_type: 'redis',
+        total_affinities: 1428,
+        active_affinities: 1410,
+        cache_hits: 93842,
+        cache_misses: 17610,
+        cache_hit_rate: 0.842,
+        cache_invalidations: 42,
+        provider_switches: 38,
+        key_switches: 74,
+        config: {
+          default_ttl: 300
+        }
+      }
+    }
+  })
+}
+
+mockHandlers['GET /api/admin/monitoring/cache/redis-keys'] = async () => {
+  await delay()
+  requireAdmin()
+  return createMockResponse({
+    status: 'ok',
+    data: {
+      available: true,
+      categories: [
+        { key: 'cache_affinity', name: '缓存亲和性', pattern: 'cache_affinity:*', description: '请求路由亲和性缓存', count: 1428 },
+        { key: 'concurrency_lock', name: '并发锁', pattern: 'concurrency:*', description: '请求并发控制锁', count: 186 },
+        { key: 'apikey', name: 'API Key', pattern: 'apikey:*', description: 'API Key 认证缓存', count: 263 },
+        { key: 'health', name: '健康检查', pattern: 'health:*', description: '端点健康状态缓存', count: 154 },
+        { key: 'models_list', name: '模型列表', pattern: 'models:list:*', description: '/v1/models 端点模型列表缓存', count: 38 },
+        { key: 'provider_balance', name: 'Provider 余额', pattern: 'provider_ops:balance:*', description: 'Provider 余额查询缓存', count: 24 }
+      ],
+      total_keys: 2093
+    }
+  })
+}
+
+mockHandlers['GET /api/admin/proxy-nodes'] = async () => {
+  await delay()
+  requireAdmin()
+  const now = new Date().toISOString()
+  return createMockResponse({
+    items: [
+      {
+        id: 'proxy-node-1',
+        name: 'edge-shanghai-1',
+        ip: '10.8.0.12',
+        port: 8443,
+        region: 'cn-east',
+        status: 'online',
+        is_manual: false,
+        tunnel_mode: true,
+        tunnel_connected: true,
+        tunnel_connected_at: now,
+        hardware_info: {
+          cpu_cores: 8,
+          total_memory_mb: 16384,
+          os_info: 'linux'
+        },
+        estimated_max_concurrency: 620,
+        remote_config: null,
+        config_version: 12,
+        registered_by: 'agent',
+        last_heartbeat_at: now,
+        heartbeat_interval: 15,
+        active_connections: 82,
+        total_requests: 43820,
+        avg_latency_ms: 42,
+        failed_requests: 34,
+        dns_failures: 2,
+        stream_errors: 7,
+        proxy_metadata: {
+          resource_usage: {
+            system_cpu_usage_percent: 41.8,
+            process_cpu_usage_percent: 18.4,
+            memory_total_bytes: 17179869184,
+            memory_used_bytes: 9878424780,
+            memory_used_percent: 57.5,
+            process_memory_bytes: 438304768,
+            process_memory_percent: 2.6,
+            process_uptime_secs: 86400
+          }
+        },
+        created_at: now,
+        updated_at: now
+      },
+      {
+        id: 'proxy-node-2',
+        name: 'edge-us-west-1',
+        ip: '10.8.1.18',
+        port: 8443,
+        region: 'us-west',
+        status: 'online',
+        is_manual: false,
+        tunnel_mode: true,
+        tunnel_connected: true,
+        tunnel_connected_at: now,
+        hardware_info: {
+          cpu_cores: 16,
+          total_memory_mb: 32768,
+          os_info: 'linux'
+        },
+        estimated_max_concurrency: 980,
+        remote_config: null,
+        config_version: 9,
+        registered_by: 'agent',
+        last_heartbeat_at: now,
+        heartbeat_interval: 15,
+        active_connections: 94,
+        total_requests: 58340,
+        avg_latency_ms: 58,
+        failed_requests: 52,
+        dns_failures: 1,
+        stream_errors: 9,
+        proxy_metadata: {
+          resource_usage: {
+            system_cpu_usage_percent: 55.2,
+            process_cpu_usage_percent: 22.6,
+            memory_total_bytes: 34359738368,
+            memory_used_bytes: 22333829939,
+            memory_used_percent: 65.0,
+            process_memory_bytes: 612368384,
+            process_memory_percent: 1.8,
+            process_uptime_secs: 172800
+          }
+        },
+        created_at: now,
+        updated_at: now
+      }
+    ],
+    total: 2,
+    skip: 0,
+    limit: 200,
+    rollout: null
+  })
+}
+
+mockHandlers['GET /api/admin/proxy-nodes/metrics/fleet'] = async () => {
+  await delay()
+  requireAdmin()
+  const now = Math.floor(Date.now() / 1000)
+  return createMockResponse({
+    step: '1m',
+    from: now - 3600,
+    to: now,
+    items: [
+      {
+        bucket_start_unix_secs: now - 120,
+        bucket_start: new Date((now - 120) * 1000).toISOString(),
+        samples: 2,
+        uptime_samples: 2,
+        uptime_ratio: 1,
+        active_connections_sum: 168,
+        active_connections_max: 92,
+        active_connections_avg: 84,
+        heartbeat_rtt_ms_sum: 86,
+        heartbeat_rtt_ms_max: 52,
+        heartbeat_rtt_ms_avg: 43,
+        connect_errors_delta: 0,
+        disconnects_delta: 0,
+        error_events_delta: 1,
+        ws_in_bytes_delta: 4849664,
+        ws_out_bytes_delta: 12812288,
+        ws_in_frames_delta: 18320,
+        ws_out_frames_delta: 42110
+      },
+      {
+        bucket_start_unix_secs: now - 60,
+        bucket_start: new Date((now - 60) * 1000).toISOString(),
+        samples: 2,
+        uptime_samples: 2,
+        uptime_ratio: 1,
+        active_connections_sum: 176,
+        active_connections_max: 94,
+        active_connections_avg: 88,
+        heartbeat_rtt_ms_sum: 82,
+        heartbeat_rtt_ms_max: 48,
+        heartbeat_rtt_ms_avg: 41,
+        connect_errors_delta: 0,
+        disconnects_delta: 0,
+        error_events_delta: 0,
+        ws_in_bytes_delta: 5154816,
+        ws_out_bytes_delta: 13996032,
+        ws_in_frames_delta: 19120,
+        ws_out_frames_delta: 44710
+      }
+    ],
+    summary: {
+      samples: 4,
+      uptime_samples: 4,
+      uptime_ratio: 1,
+      active_connections_sum: 344,
+      active_connections_max: 94,
+      active_connections_avg: 86,
+      heartbeat_rtt_ms_sum: 168,
+      heartbeat_rtt_ms_max: 52,
+      heartbeat_rtt_ms_avg: 42,
+      connect_errors_delta: 0,
+      disconnects_delta: 0,
+      error_events_delta: 1,
+      ws_in_bytes_delta: 10004480,
+      ws_out_bytes_delta: 26808320,
+      ws_in_frames_delta: 37440,
+      ws_out_frames_delta: 86820
+    }
+  })
+}
+
 mockHandlers['GET /_gateway/metrics'] = async () => {
   await delay(60)
   requireAdmin()
@@ -4288,6 +4615,45 @@ aether_gateway_tunnel_nodes 6
 # HELP aether_gateway_tunnel_active_streams Current number of active local relay streams.
 # TYPE aether_gateway_tunnel_active_streams gauge
 aether_gateway_tunnel_active_streams 164
+# HELP aether_gateway_tunnel_proxy_connections_available Current number of available proxy sockets.
+# TYPE aether_gateway_tunnel_proxy_connections_available gauge
+aether_gateway_tunnel_proxy_connections_available 24
+# HELP aether_gateway_tunnel_proxy_connections_closing Current number of closing proxy sockets.
+# TYPE aether_gateway_tunnel_proxy_connections_closing gauge
+aether_gateway_tunnel_proxy_connections_closing 1
+# HELP aether_gateway_tunnel_proxy_connections_draining Current number of draining proxy sockets.
+# TYPE aether_gateway_tunnel_proxy_connections_draining gauge
+aether_gateway_tunnel_proxy_connections_draining 2
+# HELP aether_gateway_tunnel_proxy_connections_soft_avoid Current number of soft-avoid proxy sockets.
+# TYPE aether_gateway_tunnel_proxy_connections_soft_avoid gauge
+aether_gateway_tunnel_proxy_connections_soft_avoid 3
+# HELP aether_gateway_tunnel_proxy_outbound_queue_depth_total Current outbound queue depth total.
+# TYPE aether_gateway_tunnel_proxy_outbound_queue_depth_total gauge
+aether_gateway_tunnel_proxy_outbound_queue_depth_total 312
+# HELP aether_gateway_tunnel_proxy_outbound_queue_depth_max Current outbound queue max depth.
+# TYPE aether_gateway_tunnel_proxy_outbound_queue_depth_max gauge
+aether_gateway_tunnel_proxy_outbound_queue_depth_max 38
+# HELP aether_gateway_tunnel_proxy_outbound_queue_capacity_total Current outbound queue capacity total.
+# TYPE aether_gateway_tunnel_proxy_outbound_queue_capacity_total gauge
+aether_gateway_tunnel_proxy_outbound_queue_capacity_total 2048
+# HELP aether_gateway_tunnel_proxy_outbound_queue_rejected_full_total Outbound queue full rejections.
+# TYPE aether_gateway_tunnel_proxy_outbound_queue_rejected_full_total counter
+aether_gateway_tunnel_proxy_outbound_queue_rejected_full_total 7
+# HELP aether_gateway_tunnel_proxy_outbound_queue_rejected_closed_total Outbound queue closed rejections.
+# TYPE aether_gateway_tunnel_proxy_outbound_queue_rejected_closed_total counter
+aether_gateway_tunnel_proxy_outbound_queue_rejected_closed_total 2
+# HELP aether_gateway_tunnel_proxy_connection_congested_total Congested proxy selections.
+# TYPE aether_gateway_tunnel_proxy_connection_congested_total counter
+aether_gateway_tunnel_proxy_connection_congested_total 21
+# HELP aether_gateway_tunnel_proxy_soft_avoid_selection_total Soft-avoid proxy selections.
+# TYPE aether_gateway_tunnel_proxy_soft_avoid_selection_total counter
+aether_gateway_tunnel_proxy_soft_avoid_selection_total 18
+# HELP aether_gateway_tunnel_proxy_selection_retry_total Proxy selection retries.
+# TYPE aether_gateway_tunnel_proxy_selection_retry_total counter
+aether_gateway_tunnel_proxy_selection_retry_total 11
+# HELP aether_gateway_tunnel_proxy_selection_unavailable_total Proxy selection unavailable events.
+# TYPE aether_gateway_tunnel_proxy_selection_unavailable_total counter
+aether_gateway_tunnel_proxy_selection_unavailable_total 4
 # HELP aether_gateway_decision_remote_total Number of requests that fell back to Python decision endpoints.
 # TYPE aether_gateway_decision_remote_total counter
 aether_gateway_decision_remote_total{route_kind="chat",reason="local_decision_miss"} 4
@@ -4343,7 +4709,7 @@ mockHandlers['GET /api/admin/stats/time-series'] = async () => {
   await delay()
   requireAdmin()
   return createMockResponse([
-    { date: '2026-02-01', total_requests: 120, input_tokens: 20000, output_tokens: 30000, total_cost: 12.3 },
-    { date: '2026-02-02', total_requests: 140, input_tokens: 22000, output_tokens: 32000, total_cost: 13.8 }
+    { date: '2026-02-01', total_requests: 120, input_tokens: 20000, output_tokens: 30000, total_tokens: 50000, total_cost: 12.3 },
+    { date: '2026-02-02', total_requests: 140, input_tokens: 22000, output_tokens: 32000, total_tokens: 54000, total_cost: 13.8 }
   ])
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index dc639cf1b..17c82db0c 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -169,7 +169,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'dashboard',
         name: 'AdminDashboard',
-        component: () => importWithRetry(() => import('@/views/shared/Dashboard.vue'))
+        component: () => importWithRetry(() => import('@/views/admin/AdminOperationsDashboard.vue'))
       },
       {
         path: 'users',
diff --git a/frontend/src/views/admin/AdminOperationsDashboard.vue b/frontend/src/views/admin/AdminOperationsDashboard.vue
new file mode 100644
index 000000000..af366ade2
--- /dev/null
+++ b/frontend/src/views/admin/AdminOperationsDashboard.vue
@@ -0,0 +1,1129 @@
+<template>
+  <div class="space-y-5 px-4 pb-8 sm:px-6 lg:px-0">
+    <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+      <div>
+        <h1 class="text-lg font-semibold">
+          运维总览
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          统一查看流量、吞吐、延迟、错误、上游健康、缓存与审计风险
+        </p>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <Badge variant="outline">
+          自动刷新 10s
+        </Badge>
+        <span class="text-xs text-muted-foreground">
+          更新 {{ lastUpdatedLabel }}
+        </span>
+        <RefreshButton
+          :loading="refreshing"
+          title="刷新运维总览"
+          @click="refreshAll"
+        />
+        <TimeRangePicker
+          v-model="timeRange"
+          :allow-hourly="true"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="loadWarning"
+      class="rounded-lg border border-yellow-300/70 bg-yellow-50/80 px-3 py-2 text-xs text-yellow-900 dark:border-yellow-900/60 dark:bg-yellow-950/30 dark:text-yellow-100"
+    >
+      {{ loadWarning }}
+    </div>
+
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-8">
+      <Card
+        v-for="card in kpiCards"
+        :key="card.title"
+        class="min-h-[118px] p-4"
+      >
+        <div class="flex items-start justify-between gap-3">
+          <div class="min-w-0">
+            <p class="truncate text-xs text-muted-foreground">
+              {{ card.title }}
+            </p>
+            <div
+              class="mt-2 truncate text-2xl font-semibold tabular-nums"
+              :class="card.valueClass"
+            >
+              {{ card.value }}
+            </div>
+          </div>
+          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-muted/30">
+            <component
+              :is="card.icon"
+              class="h-4 w-4"
+              :class="card.iconClass"
+            />
+          </div>
+        </div>
+        <p class="mt-3 line-clamp-2 text-xs text-muted-foreground">
+          {{ card.hint }}
+        </p>
+      </Card>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
+      <Card class="overflow-hidden xl:col-span-2">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 class="text-sm font-semibold">
+                流量与吞吐
+              </h2>
+              <p class="text-xs text-muted-foreground">
+                请求、Token 与费用趋势，按当前时间窗口聚合
+              </p>
+            </div>
+            <Badge variant="outline">
+              {{ timeRange.granularity || 'day' }}
+            </Badge>
+          </div>
+        </div>
+        <div class="p-4">
+          <div
+            v-if="trendLoading"
+            class="py-12"
+          >
+            <LoadingState message="加载流量趋势中" />
+          </div>
+          <div
+            v-else
+            class="h-[302px]"
+          >
+            <LineChart
+              :data="trafficChartData"
+              :options="trafficChartOptions"
+            />
+          </div>
+        </div>
+      </Card>
+
+      <Card class="overflow-hidden">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-semibold">
+                实时并发
+              </h2>
+              <p class="text-xs text-muted-foreground">
+                网关、全局锁与代理通道
+              </p>
+            </div>
+            <Badge :variant="distributedGateVariant">
+              {{ distributedGateText }}
+            </Badge>
+          </div>
+        </div>
+        <div class="space-y-4 p-4">
+          <div class="grid grid-cols-2 gap-3 text-sm">
+            <MetricCell
+              label="本机处理中"
+              :value="formatMetricNumber(gatewayMetrics?.local.inFlight)"
+            />
+            <MetricCell
+              label="本机可接入"
+              :value="formatMetricNumber(gatewayMetrics?.local.availablePermits)"
+            />
+            <MetricCell
+              label="全局处理中"
+              :value="formatMetricNumber(gatewayMetrics?.distributed.inFlight)"
+            />
+            <MetricCell
+              label="全局可接入"
+              :value="formatMetricNumber(gatewayMetrics?.distributed.availablePermits)"
+            />
+            <MetricCell
+              label="代理活跃流"
+              :value="formatMetricNumber(currentActiveStreams)"
+            />
+            <MetricCell
+              label="代理连接"
+              :value="formatMetricNumber(currentProxyConnections)"
+            />
+          </div>
+          <div class="rounded-lg border border-border/60 bg-background/45 px-3 py-3">
+            <div class="flex items-center justify-between gap-3 text-xs">
+              <span class="text-muted-foreground">队列利用率</span>
+              <span class="font-medium tabular-nums">{{ tunnelQueueUtilizationText }}</span>
+            </div>
+            <div class="mt-2 h-2 overflow-hidden rounded-full bg-muted">
+              <div
+                class="h-full rounded-full bg-primary"
+                :style="{ width: tunnelQueueUtilizationWidth }"
+              />
+            </div>
+            <div class="mt-3 grid grid-cols-2 gap-2 text-xs text-muted-foreground">
+              <span>拒绝 {{ formatMetricNumber(tunnelQueueRejectedTotal) }}</span>
+              <span>选择压力 {{ formatMetricNumber(tunnelSelectionPressureTotal) }}</span>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
+      <Card class="overflow-hidden xl:col-span-2">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 class="text-sm font-semibold">
+                延迟与首字
+              </h2>
+              <p class="text-xs text-muted-foreground">
+                P50/P90/P99 请求耗时与 TTFT 趋势
+              </p>
+            </div>
+            <RouterLink
+              to="/admin/performance-analysis"
+              class="text-xs font-medium text-primary hover:underline"
+            >
+              查看性能分析
+            </RouterLink>
+          </div>
+        </div>
+        <div class="p-4">
+          <div
+            v-if="percentileLoading"
+            class="py-12"
+          >
+            <LoadingState message="加载延迟百分位中" />
+          </div>
+          <div
+            v-else
+            class="h-[288px]"
+          >
+            <LineChart
+              :data="latencyChartData"
+              :options="latencyChartOptions"
+            />
+          </div>
+        </div>
+      </Card>
+
+      <Card class="overflow-hidden">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <h2 class="text-sm font-semibold">
+            SLA 与错误
+          </h2>
+          <p class="text-xs text-muted-foreground">
+            请求错误、上游错误与熔断风险
+          </p>
+        </div>
+        <div class="space-y-4 p-4">
+          <div class="grid grid-cols-2 gap-3">
+            <MetricCell
+              label="成功率"
+              :value="formatPercent(providerPerformance?.summary.success_rate)"
+              :value-class="slaValueClass"
+            />
+            <MetricCell
+              label="错误率"
+              :value="formatErrorRate(providerPerformance?.summary.success_rate)"
+              :value-class="errorRateValueClass"
+            />
+            <MetricCell
+              label="请求错误"
+              :value="formatMetricNumber(summaryStats?.error_requests)"
+            />
+            <MetricCell
+              label="熔断打开"
+              :value="formatMetricNumber(resilienceStatus?.error_statistics.open_circuit_breakers)"
+            />
+          </div>
+
+          <div>
+            <div class="mb-2 flex items-center justify-between gap-3">
+              <span class="text-xs font-medium text-muted-foreground">错误分类</span>
+              <RouterLink
+                to="/admin/audit-logs"
+                class="text-xs font-medium text-primary hover:underline"
+              >
+                审计
+              </RouterLink>
+            </div>
+            <div class="h-[154px]">
+              <DoughnutChart
+                :data="errorDistributionChartData"
+                :options="errorDistributionOptions"
+              />
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
+      <Card class="overflow-hidden xl:col-span-2">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 class="text-sm font-semibold">
+                上游健康与吞吐
+              </h2>
+              <p class="text-xs text-muted-foreground">
+                Provider 维度的 TPS、TTFT、慢请求与错误样本
+              </p>
+            </div>
+            <RouterLink
+              to="/admin/health-monitor"
+              class="text-xs font-medium text-primary hover:underline"
+            >
+              健康监控
+            </RouterLink>
+          </div>
+        </div>
+        <div class="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>上游</TableHead>
+                <TableHead class="text-right">
+                  请求
+                </TableHead>
+                <TableHead class="text-right">
+                  成功率
+                </TableHead>
+                <TableHead class="text-right">
+                  TPS
+                </TableHead>
+                <TableHead class="text-right">
+                  TTFT
+                </TableHead>
+                <TableHead class="text-right">
+                  P99
+                </TableHead>
+                <TableHead class="text-right">
+                  慢请求
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow
+                v-for="provider in providerRows"
+                :key="provider.provider_id"
+              >
+                <TableCell>
+                  <div class="max-w-[220px] truncate text-sm font-medium">
+                    {{ provider.provider }}
+                  </div>
+                </TableCell>
+                <TableCell class="text-right tabular-nums">
+                  {{ formatMetricNumber(provider.request_count) }}
+                </TableCell>
+                <TableCell
+                  class="text-right tabular-nums"
+                  :class="successRateClass(provider.success_rate)"
+                >
+                  {{ formatPercent(provider.success_rate) }}
+                </TableCell>
+                <TableCell class="text-right tabular-nums">
+                  {{ formatTps(provider.avg_output_tps) }}
+                </TableCell>
+                <TableCell class="text-right tabular-nums">
+                  {{ formatMs(provider.avg_first_byte_time_ms) }}
+                </TableCell>
+                <TableCell class="text-right tabular-nums">
+                  {{ formatMs(provider.p99_response_time_ms) }}
+                </TableCell>
+                <TableCell class="text-right tabular-nums">
+                  {{ formatMetricNumber(provider.slow_request_count) }}
+                </TableCell>
+              </TableRow>
+              <TableRow v-if="providerRows.length === 0">
+                <TableCell
+                  colspan="7"
+                  class="py-8 text-center text-sm text-muted-foreground"
+                >
+                  当前时间窗口暂无上游样本
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </Card>
+
+      <Card class="overflow-hidden">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-semibold">
+                资源、数据流与缓存
+              </h2>
+              <p class="text-xs text-muted-foreground">
+                代理节点资源、WebSocket 流量、Redis Key 分类与缓存命中
+              </p>
+            </div>
+            <RouterLink
+              to="/admin/cache-monitoring"
+              class="text-xs font-medium text-primary hover:underline"
+            >
+              缓存页
+            </RouterLink>
+          </div>
+        </div>
+        <div class="space-y-4 p-4">
+          <div class="grid grid-cols-2 gap-3">
+            <MetricCell
+              label="CPU"
+              :value="formatPercentResource(resourceSnapshot?.avgCpuPercent)"
+              :value-class="resourceToneClass(resourceSnapshot?.avgCpuPercent, 70, 90)"
+            />
+            <MetricCell
+              label="内存"
+              :value="formatPercentResource(resourceSnapshot?.avgMemoryPercent)"
+              :value-class="resourceToneClass(resourceSnapshot?.avgMemoryPercent, 75, 90)"
+            />
+            <MetricCell
+              label="WS 入站"
+              :value="formatBytes(resourceSnapshot?.wsInBytes)"
+            />
+            <MetricCell
+              label="WS 出站"
+              :value="formatBytes(resourceSnapshot?.wsOutBytes)"
+            />
+            <MetricCell
+              label="Redis 状态"
+              :value="redisStatusText"
+              :value-class="redisStatusClass"
+            />
+            <MetricCell
+              label="Redis Keys"
+              :value="formatMetricNumber(redisCategories?.total_keys)"
+            />
+            <MetricCell
+              label="亲和缓存"
+              :value="formatMetricNumber(cacheStats?.affinity_stats.total_affinities)"
+            />
+            <MetricCell
+              label="命中率"
+              :value="formatPercent(cacheHitRate)"
+            />
+          </div>
+
+          <div class="space-y-2">
+            <div
+              v-for="item in redisCategoryRows"
+              :key="item.key"
+              class="flex items-center justify-between gap-3 rounded-lg border border-border/50 bg-background/45 px-3 py-2 text-xs"
+            >
+              <div class="min-w-0">
+                <div class="truncate font-medium">
+                  {{ item.name }}
+                </div>
+                <div class="truncate text-muted-foreground">
+                  {{ item.pattern }}
+                </div>
+              </div>
+              <span class="font-semibold tabular-nums">{{ formatMetricNumber(item.count) }}</span>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
+      <Card class="overflow-hidden xl:col-span-2">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <div class="flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-sm font-semibold">
+                错误审计
+              </h2>
+              <p class="text-xs text-muted-foreground">
+                最近错误、熔断事件和可疑活动入口
+              </p>
+            </div>
+            <RouterLink
+              to="/admin/usage?status=error"
+              class="text-xs font-medium text-primary hover:underline"
+            >
+              使用记录
+            </RouterLink>
+          </div>
+        </div>
+        <div class="divide-y divide-border/50">
+          <div
+            v-for="error in recentErrors"
+            :key="error.error_id"
+            class="grid grid-cols-1 gap-2 px-4 py-3 text-sm lg:grid-cols-[180px_1fr_120px]"
+          >
+            <div class="font-medium">
+              {{ error.error_type }}
+            </div>
+            <div class="min-w-0 text-xs text-muted-foreground">
+              <div class="truncate">
+                {{ error.context.error_message || error.operation }}
+              </div>
+              <div class="mt-1 truncate">
+                {{ error.context.provider_name || error.context.provider_id || '-' }} / {{ error.context.model || '-' }}
+              </div>
+            </div>
+            <div class="text-xs text-muted-foreground lg:text-right">
+              {{ formatShortDate(error.timestamp) }}
+            </div>
+          </div>
+          <div
+            v-if="recentErrors.length === 0"
+            class="px-4 py-8 text-center text-sm text-muted-foreground"
+          >
+            当前没有近期错误
+          </div>
+        </div>
+      </Card>
+
+      <Card class="overflow-hidden">
+        <div class="border-b border-border/70 bg-muted/20 px-4 py-3">
+          <h2 class="text-sm font-semibold">
+            运维入口
+          </h2>
+          <p class="text-xs text-muted-foreground">
+            常用排障视角
+          </p>
+        </div>
+        <div class="grid grid-cols-1 gap-2 p-4">
+          <RouterLink
+            v-for="link in opsLinks"
+            :key="link.to"
+            :to="link.to"
+            class="flex items-center justify-between rounded-lg border border-border/60 bg-background/45 px-3 py-3 text-sm transition-colors hover:border-primary/50 hover:bg-primary/5"
+          >
+            <span class="font-medium">{{ link.label }}</span>
+            <component
+              :is="link.icon"
+              class="h-4 w-4 text-muted-foreground"
+            />
+          </RouterLink>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineComponent, h, onMounted, onUnmounted, ref, watch, type Component } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { ChartData, ChartOptions } from 'chart.js'
+import {
+  Activity,
+  AlertTriangle,
+  BarChart3,
+  CircleDollarSign,
+  Database,
+  Gauge,
+  ListChecks,
+  RefreshCw,
+  ShieldCheck,
+  Timer,
+  Zap,
+} from 'lucide-vue-next'
+import { Badge, Card, RefreshButton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
+import { LoadingState, TimeRangePicker } from '@/components/common'
+import LineChart from '@/components/charts/LineChart.vue'
+import DoughnutChart from '@/components/charts/DoughnutChart.vue'
+import { adminApi, type ErrorDistributionItem, type PercentileItem, type ProviderPerformanceResponse } from '@/api/admin'
+import { cacheApi, redisCacheApi, type CacheStats, type RedisCacheCategoriesResponse } from '@/api/cache'
+import { monitoringApi, type AdminMonitoringRecentError, type AdminMonitoringResilienceStatus, type AdminMonitoringSystemStatus, type GatewayMetricsSummary } from '@/api/monitoring'
+import { proxyNodesApi, type ProxyNode, type ProxyNodeMetricsResponse } from '@/api/proxy-nodes'
+import { usageApi, type UsageStats } from '@/api/usage'
+import { getDateRangeFromPeriod } from '@/features/usage/composables'
+import type { DateRangeParams } from '@/features/usage/types'
+import { formatByteSize, formatCurrency, formatNumber, formatTokens } from '@/utils/format'
+import { log } from '@/utils/logger'
+
+interface MetricCellProps {
+  label: string
+  value: string
+  valueClass?: string
+}
+
+const MetricCell = defineComponent<MetricCellProps>({
+  name: 'MetricCell',
+  props: {
+    label: { type: String, required: true },
+    value: { type: String, required: true },
+    valueClass: { type: String, default: '' },
+  },
+  setup(props) {
+    return () => h('div', { class: 'rounded-lg border border-border/60 bg-background/45 px-3 py-3' }, [
+      h('div', { class: 'text-xs text-muted-foreground' }, props.label),
+      h('div', { class: ['mt-1 truncate text-lg font-semibold tabular-nums', props.valueClass] }, props.value),
+    ])
+  },
+})
+
+const AUTO_REFRESH_MS = 10_000
+const DEFAULT_SLOW_THRESHOLD_MS = 10_000
+
+interface ResourceSnapshot {
+  totalNodes: number
+  onlineNodes: number
+  avgCpuPercent: number | null
+  avgMemoryPercent: number | null
+  wsInBytes: number | null
+  wsOutBytes: number | null
+}
+
+const timeRange = ref<DateRangeParams>({
+  ...getDateRangeFromPeriod('today'),
+  granularity: 'hour',
+})
+const summaryStats = ref<UsageStats | null>(null)
+const timeSeries = ref<Array<Record<string, unknown>>>([])
+const percentiles = ref<PercentileItem[]>([])
+const providerPerformance = ref<ProviderPerformanceResponse | null>(null)
+const errorDistribution = ref<ErrorDistributionItem[]>([])
+const systemStatus = ref<AdminMonitoringSystemStatus | null>(null)
+const resilienceStatus = ref<AdminMonitoringResilienceStatus | null>(null)
+const gatewayMetrics = ref<GatewayMetricsSummary | null>(null)
+const cacheStats = ref<CacheStats | null>(null)
+const redisCategories = ref<RedisCacheCategoriesResponse | null>(null)
+const resourceSnapshot = ref<ResourceSnapshot | null>(null)
+const lastUpdatedAt = ref<string | null>(null)
+const loadWarning = ref<string | null>(null)
+const refreshing = ref(false)
+const trendLoading = ref(false)
+const percentileLoading = ref(false)
+let refreshTimer: ReturnType<typeof setInterval> | null = null
+let requestId = 0
+
+const timeRangeParams = computed(() => ({
+  start_date: timeRange.value.start_date,
+  end_date: timeRange.value.end_date,
+  preset: timeRange.value.preset,
+  timezone: timeRange.value.timezone,
+  tz_offset_minutes: timeRange.value.tz_offset_minutes,
+  granularity: timeRange.value.granularity || 'day',
+}))
+
+function numeric(value: unknown): number {
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : 0
+  }
+  return 0
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+  return value as Record<string, unknown>
+}
+
+function numberField(record: Record<string, unknown> | null | undefined, key: string): number | null {
+  if (!record) return null
+  const value = record[key]
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : null
+  }
+  return null
+}
+
+function averageFinite(values: Array<number | null | undefined>): number | null {
+  const numbers = values.filter((value): value is number => typeof value === 'number' && Number.isFinite(value))
+  if (!numbers.length) return null
+  return numbers.reduce((total, value) => total + value, 0) / numbers.length
+}
+
+function memoryUsedPercent(node: ProxyNode): number | null {
+  const metadata = asRecord(node.proxy_metadata)
+  const resource = asRecord(metadata?.resource_usage)
+  const hardware = asRecord(node.hardware_info)
+  const explicitPercent = numberField(resource, 'memory_used_percent')
+  if (explicitPercent != null) return explicitPercent
+  const usedBytes = numberField(resource, 'memory_used_bytes')
+  const totalBytes = numberField(resource, 'memory_total_bytes')
+    ?? numberField(hardware, 'memory_total_bytes')
+    ?? numberField(hardware, 'total_memory_bytes')
+  if (usedBytes == null || totalBytes == null || totalBytes <= 0) return null
+  return usedBytes / totalBytes * 100
+}
+
+function cpuUsedPercent(node: ProxyNode): number | null {
+  const metadata = asRecord(node.proxy_metadata)
+  const resource = asRecord(metadata?.resource_usage)
+  return numberField(resource, 'system_cpu_usage_percent')
+    ?? numberField(resource, 'process_cpu_usage_percent')
+}
+
+async function loadResourceSnapshot(): Promise<ResourceSnapshot | null> {
+  const now = Math.floor(Date.now() / 1000)
+  const from = now - 3600
+  const [nodesResult, fleetResult] = await Promise.allSettled([
+    proxyNodesApi.listProxyNodes({ limit: 200 }),
+    proxyNodesApi.listFleetMetrics({ from, to: now, step: '1m' }),
+  ])
+
+  const nodes = nodesResult.status === 'fulfilled' ? nodesResult.value.items : []
+  const fleet: ProxyNodeMetricsResponse | null = fleetResult.status === 'fulfilled'
+    ? fleetResult.value
+    : null
+  const onlineNodes = nodes.filter(node => node.status === 'online' || node.tunnel_connected)
+
+  return {
+    totalNodes: nodes.length,
+    onlineNodes: onlineNodes.length,
+    avgCpuPercent: averageFinite(onlineNodes.map(cpuUsedPercent)),
+    avgMemoryPercent: averageFinite(onlineNodes.map(memoryUsedPercent)),
+    wsInBytes: fleet?.summary.ws_in_bytes_delta ?? null,
+    wsOutBytes: fleet?.summary.ws_out_bytes_delta ?? null,
+  }
+}
+
+function formatMetricNumber(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) return '-'
+  if (!Number.isInteger(value)) return value.toFixed(value < 10 ? 2 : 1)
+  return formatNumber(value)
+}
+
+function formatPercent(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) return '-'
+  const ratio = value <= 1 ? value * 100 : value
+  return `${ratio.toFixed(2)}%`
+}
+
+function formatErrorRate(successRate: number | null | undefined): string {
+  if (successRate == null || Number.isNaN(successRate)) return '-'
+  const rate = successRate <= 1 ? successRate * 100 : successRate
+  return `${Math.max(0, 100 - rate).toFixed(2)}%`
+}
+
+function formatMs(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) return '-'
+  if (value >= 1000) return `${(value / 1000).toFixed(value >= 10_000 ? 1 : 2)}s`
+  return `${Math.round(value)}ms`
+}
+
+function formatTps(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) return '-'
+  return `${value.toFixed(value < 10 ? 2 : value < 100 ? 1 : 0)} tps`
+}
+
+function formatPercentResource(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) return '-'
+  return `${value.toFixed(value < 10 ? 1 : 0)}%`
+}
+
+function formatBytes(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) return '-'
+  return formatByteSize(value)
+}
+
+function resourceToneClass(value: number | null | undefined, warning: number, critical: number): string {
+  if (value == null || Number.isNaN(value)) return ''
+  if (value >= critical) return 'text-red-600 dark:text-red-400'
+  if (value >= warning) return 'text-amber-600 dark:text-amber-400'
+  return 'text-green-600 dark:text-green-400'
+}
+
+function formatShortDate(value?: string | null): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function successRateClass(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) return ''
+  const rate = value <= 1 ? value * 100 : value
+  if (rate >= 95) return 'text-green-600 dark:text-green-400'
+  if (rate >= 80) return 'text-amber-600 dark:text-amber-400'
+  return 'text-red-600 dark:text-red-400'
+}
+
+function average(values: Array<number | null | undefined>): number | null {
+  const numbers = values.filter((value): value is number => typeof value === 'number' && Number.isFinite(value))
+  if (!numbers.length) return null
+  return numbers.reduce((total, value) => total + value, 0) / numbers.length
+}
+
+function sumSeries(field: string): number {
+  return timeSeries.value.reduce((total, item) => total + numeric(item[field]), 0)
+}
+
+async function refreshAll() {
+  const currentRequestId = ++requestId
+  refreshing.value = true
+  trendLoading.value = timeSeries.value.length === 0
+  percentileLoading.value = percentiles.value.length === 0
+
+  const params = timeRangeParams.value
+  const results = await Promise.allSettled([
+    usageApi.getUsageStats(params, { skipCache: true }),
+    adminApi.getTimeSeries(params),
+    adminApi.getPercentiles(params),
+    adminApi.getProviderPerformance({
+      ...params,
+      granularity: params.granularity === 'hour' ? 'hour' : 'day',
+      limit: 8,
+      slow_threshold_ms: DEFAULT_SLOW_THRESHOLD_MS,
+    }),
+    adminApi.getErrorDistribution(params),
+    monitoringApi.getSystemStatus(),
+    monitoringApi.getResilienceStatus(),
+    monitoringApi.getGatewayMetricsSummary(),
+    cacheApi.getStats(),
+    redisCacheApi.getCategories(),
+    loadResourceSnapshot(),
+  ])
+
+  if (currentRequestId !== requestId) return
+
+  const failed: string[] = []
+  const [
+    summaryResult,
+    timeSeriesResult,
+    percentilesResult,
+    providerPerformanceResult,
+    errorDistributionResult,
+    systemStatusResult,
+    resilienceResult,
+    gatewayResult,
+    cacheResult,
+    redisResult,
+    resourceResult,
+  ] = results
+
+  if (summaryResult.status === 'fulfilled') summaryStats.value = summaryResult.value
+  else failed.push('统计摘要')
+
+  if (timeSeriesResult.status === 'fulfilled') timeSeries.value = timeSeriesResult.value
+  else failed.push('流量趋势')
+
+  if (percentilesResult.status === 'fulfilled') percentiles.value = percentilesResult.value
+  else failed.push('延迟百分位')
+
+  if (providerPerformanceResult.status === 'fulfilled') providerPerformance.value = providerPerformanceResult.value
+  else failed.push('上游性能')
+
+  if (errorDistributionResult.status === 'fulfilled') errorDistribution.value = errorDistributionResult.value.distribution
+  else failed.push('错误分类')
+
+  if (systemStatusResult.status === 'fulfilled') systemStatus.value = systemStatusResult.value
+  else failed.push('系统状态')
+
+  if (resilienceResult.status === 'fulfilled') resilienceStatus.value = resilienceResult.value
+  else failed.push('韧性状态')
+
+  if (gatewayResult.status === 'fulfilled') gatewayMetrics.value = gatewayResult.value
+  else failed.push('网关指标')
+
+  if (cacheResult.status === 'fulfilled') cacheStats.value = cacheResult.value
+  else failed.push('缓存统计')
+
+  if (redisResult.status === 'fulfilled') redisCategories.value = redisResult.value
+  else failed.push('Redis 分类')
+
+  if (resourceResult.status === 'fulfilled') resourceSnapshot.value = resourceResult.value
+
+  results.forEach((result, index) => {
+    if (result.status === 'rejected') {
+      log.error(`运维总览加载失败 ${index}`, result.reason)
+    }
+  })
+
+  loadWarning.value = failed.length ? `部分数据加载失败：${failed.join('、')}` : null
+  lastUpdatedAt.value = new Date().toISOString()
+  refreshing.value = false
+  trendLoading.value = false
+  percentileLoading.value = false
+}
+
+const lastUpdatedLabel = computed(() => formatShortDate(lastUpdatedAt.value))
+
+const totalRequests = computed(() => summaryStats.value?.total_requests ?? sumSeries('total_requests'))
+const totalTokens = computed(() => summaryStats.value?.total_tokens ?? sumSeries('total_tokens'))
+const totalCost = computed(() => summaryStats.value?.total_cost ?? sumSeries('total_cost'))
+const avgResponseMs = computed(() => providerPerformance.value?.summary.avg_response_time_ms ?? (summaryStats.value?.avg_response_time ? summaryStats.value.avg_response_time * 1000 : null))
+const avgFirstByteMs = computed(() => providerPerformance.value?.summary.avg_first_byte_time_ms ?? average(percentiles.value.map(item => item.p50_first_byte_time_ms)))
+const avgOutputTps = computed(() => providerPerformance.value?.summary.avg_output_tps ?? null)
+const windowSeconds = computed(() => {
+  const start = timeRange.value.start_date ? new Date(timeRange.value.start_date).getTime() : NaN
+  const end = timeRange.value.end_date ? new Date(timeRange.value.end_date).getTime() : NaN
+  if (Number.isFinite(start) && Number.isFinite(end) && end > start) {
+    return (end - start) / 1000
+  }
+  switch (timeRange.value.preset) {
+    case 'today': return Math.max(1, (Date.now() - new Date().setHours(0, 0, 0, 0)) / 1000)
+    case 'yesterday': return 86_400
+    case 'last7days': return 7 * 86_400
+    case 'last30days': return 30 * 86_400
+    case 'last90days': return 90 * 86_400
+    default: return Math.max(1, timeSeries.value.length * 86_400)
+  }
+})
+const qps = computed(() => totalRequests.value / windowSeconds.value)
+const rpm = computed(() => qps.value * 60)
+const tokensPerMinute = computed(() => totalTokens.value / Math.max(1, windowSeconds.value / 60))
+const slaRate = computed(() => providerPerformance.value?.summary.success_rate ?? null)
+
+const kpiCards = computed<Array<{
+  title: string
+  value: string
+  hint: string
+  icon: Component
+  iconClass: string
+  valueClass?: string
+}>>(() => [
+  {
+    title: 'QPS',
+    value: qps.value.toFixed(qps.value < 10 ? 2 : 1),
+    hint: `RPM ${rpm.value.toFixed(rpm.value < 100 ? 1 : 0)} · 请求 ${formatMetricNumber(totalRequests.value)}`,
+    icon: Activity,
+    iconClass: 'text-sky-500',
+  },
+  {
+    title: '吞吐 Tokens',
+    value: formatTokens(totalTokens.value),
+    hint: `${formatMetricNumber(tokensPerMinute.value)} TPM`,
+    icon: Zap,
+    iconClass: 'text-amber-500',
+  },
+  {
+    title: 'SLA',
+    value: formatPercent(slaRate.value),
+    hint: `错误率 ${formatErrorRate(slaRate.value)}`,
+    icon: ShieldCheck,
+    iconClass: 'text-emerald-500',
+    valueClass: successRateClass(slaRate.value),
+  },
+  {
+    title: '请求时长',
+    value: formatMs(avgResponseMs.value),
+    hint: `P99 ${formatMs(providerPerformance.value?.summary.p99_response_time_ms)}`,
+    icon: Gauge,
+    iconClass: 'text-violet-500',
+  },
+  {
+    title: 'TTFT',
+    value: formatMs(avgFirstByteMs.value),
+    hint: `P99 首字 ${formatMs(providerPerformance.value?.summary.p99_first_byte_time_ms)}`,
+    icon: Timer,
+    iconClass: 'text-blue-500',
+  },
+  {
+    title: '输出 TPS',
+    value: formatTps(avgOutputTps.value),
+    hint: `慢请求 ${formatMetricNumber(providerPerformance.value?.summary.slow_request_count)}`,
+    icon: BarChart3,
+    iconClass: 'text-cyan-500',
+  },
+  {
+    title: '上游错误',
+    value: formatMetricNumber(resilienceStatus.value?.error_statistics.total_errors),
+    hint: `打开熔断 ${formatMetricNumber(resilienceStatus.value?.error_statistics.open_circuit_breakers)}`,
+    icon: AlertTriangle,
+    iconClass: 'text-red-500',
+  },
+  {
+    title: '费用',
+    value: formatCurrency(totalCost.value),
+    hint: `缓存读 ${formatTokens(cacheStats.value?.affinity_stats.cache_hits ?? 0)} 次`,
+    icon: CircleDollarSign,
+    iconClass: 'text-green-500',
+  },
+])
+
+const trafficChartData = computed<ChartData<'line'>>(() => ({
+  labels: timeSeries.value.map(item => String(item.date ?? item.bucket ?? item.time ?? '')),
+  datasets: [
+    {
+      label: '请求',
+      data: timeSeries.value.map(item => numeric(item.total_requests ?? item.requests)),
+      borderColor: 'rgb(14, 165, 233)',
+      backgroundColor: 'rgba(14, 165, 233, 0.12)',
+      tension: 0.25,
+      pointRadius: 2,
+      yAxisID: 'y',
+    },
+    {
+      label: 'Tokens',
+      data: timeSeries.value.map(item => numeric(item.total_tokens)),
+      borderColor: 'rgb(245, 158, 11)',
+      backgroundColor: 'rgba(245, 158, 11, 0.12)',
+      tension: 0.25,
+      pointRadius: 2,
+      yAxisID: 'y1',
+    },
+  ],
+}))
+
+const trafficChartOptions: ChartOptions<'line'> = {
+  interaction: { mode: 'index', intersect: false },
+  scales: {
+    y: { position: 'left' },
+    y1: {
+      position: 'right',
+      grid: { drawOnChartArea: false },
+    },
+  },
+}
+
+const latencyChartData = computed<ChartData<'line'>>(() => ({
+  labels: percentiles.value.map(item => item.date),
+  datasets: [
+    {
+      label: 'P90 请求',
+      data: percentiles.value.map(item => item.p90_response_time_ms ?? null),
+      borderColor: 'rgb(124, 58, 237)',
+      tension: 0.25,
+      pointRadius: 2,
+    },
+    {
+      label: 'P99 请求',
+      data: percentiles.value.map(item => item.p99_response_time_ms ?? null),
+      borderColor: 'rgb(239, 68, 68)',
+      tension: 0.25,
+      pointRadius: 2,
+    },
+    {
+      label: 'P90 首字',
+      data: percentiles.value.map(item => item.p90_first_byte_time_ms ?? null),
+      borderColor: 'rgb(14, 165, 233)',
+      tension: 0.25,
+      pointRadius: 2,
+    },
+  ],
+}))
+
+const latencyChartOptions: ChartOptions<'line'> = {
+  scales: {
+    y: {
+      ticks: {
+        callback: value => formatMs(Number(value)),
+      },
+    },
+  },
+}
+
+const errorDistributionChartData = computed<ChartData<'doughnut'>>(() => {
+  const rows = errorDistribution.value.length
+    ? errorDistribution.value
+    : [{ category: '无错误', count: 1 }]
+  return {
+    labels: rows.map(item => item.category),
+    datasets: [
+      {
+        data: rows.map(item => item.count),
+        backgroundColor: [
+          'rgba(239, 68, 68, 0.82)',
+          'rgba(245, 158, 11, 0.82)',
+          'rgba(14, 165, 233, 0.82)',
+          'rgba(99, 102, 241, 0.82)',
+          'rgba(34, 197, 94, 0.82)',
+        ],
+      },
+    ],
+  }
+})
+
+const errorDistributionOptions: ChartOptions<'doughnut'> = {
+  plugins: {
+    legend: {
+      position: 'bottom',
+    },
+    tooltip: {
+      callbacks: {
+        label: context => `${context.label}: ${formatMetricNumber(context.raw as number)}`,
+      },
+    },
+  },
+}
+
+const distributedGateVariant = computed<'warning' | 'outline'>(() => (
+  gatewayMetrics.value?.distributed.unavailable ? 'warning' : 'outline'
+))
+const distributedGateText = computed(() => (
+  gatewayMetrics.value?.distributed.unavailable ? '全局不可用' : '全局在线'
+))
+const currentActiveStreams = computed(() => gatewayMetrics.value?.tunnel.activeStreams ?? systemStatus.value?.tunnel.active_streams ?? null)
+const currentProxyConnections = computed(() => gatewayMetrics.value?.tunnel.proxyConnections ?? systemStatus.value?.tunnel.proxy_connections ?? null)
+const tunnelQueueRejectedTotal = computed(() => (
+  (gatewayMetrics.value?.tunnel.outboundQueueRejectedFullTotal ?? 0)
+  + (gatewayMetrics.value?.tunnel.outboundQueueRejectedClosedTotal ?? 0)
+))
+const tunnelSelectionPressureTotal = computed(() => (
+  (gatewayMetrics.value?.tunnel.proxyConnectionCongestedTotal ?? 0)
+  + (gatewayMetrics.value?.tunnel.selectionRetryTotal ?? 0)
+  + (gatewayMetrics.value?.tunnel.selectionUnavailableTotal ?? 0)
+))
+const tunnelQueueUtilization = computed(() => {
+  const depth = gatewayMetrics.value?.tunnel.outboundQueueDepthTotal
+  const capacity = gatewayMetrics.value?.tunnel.outboundQueueCapacityTotal
+  if (depth == null || capacity == null || capacity <= 0) return null
+  return Math.max(0, Math.min(100, depth / capacity * 100))
+})
+const tunnelQueueUtilizationText = computed(() => (
+  tunnelQueueUtilization.value == null ? '-' : `${Math.round(tunnelQueueUtilization.value)}%`
+))
+const tunnelQueueUtilizationWidth = computed(() => (
+  tunnelQueueUtilization.value == null ? '0%' : `${tunnelQueueUtilization.value}%`
+))
+
+const slaValueClass = computed(() => successRateClass(providerPerformance.value?.summary.success_rate))
+const errorRateValueClass = computed(() => {
+  const rate = providerPerformance.value?.summary.success_rate
+  if (rate == null) return ''
+  const successPercent = rate <= 1 ? rate * 100 : rate
+  const errorPercent = Math.max(0, 100 - successPercent)
+  if (errorPercent <= 5) return 'text-green-600 dark:text-green-400'
+  if (errorPercent <= 20) return 'text-amber-600 dark:text-amber-400'
+  return 'text-red-600 dark:text-red-400'
+})
+
+const providerRows = computed(() => providerPerformance.value?.providers.slice(0, 8) ?? [])
+const cacheHitRate = computed(() => cacheStats.value?.affinity_stats.cache_hit_rate ?? null)
+const redisStatusText = computed(() => {
+  if (!redisCategories.value) return '-'
+  return redisCategories.value.available ? '在线' : '未启用'
+})
+const redisStatusClass = computed(() => {
+  if (!redisCategories.value) return ''
+  return redisCategories.value.available ? 'text-green-600 dark:text-green-400' : 'text-amber-600 dark:text-amber-400'
+})
+const redisCategoryRows = computed(() => (
+  redisCategories.value?.categories
+    .slice()
+    .sort((left, right) => right.count - left.count)
+    .slice(0, 6) ?? []
+))
+const recentErrors = computed<AdminMonitoringRecentError[]>(() => resilienceStatus.value?.recent_errors.slice(0, 6) ?? [])
+
+const opsLinks = [
+  { label: '性能分析', to: '/admin/performance-analysis', icon: Gauge },
+  { label: '健康监控', to: '/admin/health-monitor', icon: ShieldCheck },
+  { label: '使用记录', to: '/admin/usage', icon: ListChecks },
+  { label: '缓存监控', to: '/admin/cache-monitoring', icon: Database },
+  { label: '审计日志', to: '/admin/audit-logs', icon: AlertTriangle },
+  { label: '异步任务', to: '/admin/async-tasks', icon: RefreshCw },
+]
+
+watch(timeRange, () => {
+  void refreshAll()
+}, { deep: true })
+
+onMounted(() => {
+  void refreshAll()
+  refreshTimer = setInterval(() => {
+    void refreshAll()
+  }, AUTO_REFRESH_MS)
+})
+
+onUnmounted(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer)
+    refreshTimer = null
+  }
+})
+</script>