feat(web): 仪表盘补系统资源/中国 IP 段/通知通道与公网穿透卡，修复 frpc 版本读取

仪表盘：修「服务」卡写死的「正常」——改为按 Fonu/Nginx/DDNS/证书四项实际状态聚合，异常时点名并降级徽标

仪表盘：新增「性能」面板（今日异常/平均响应，/api/status 早已返回但从未展示）与「流量 Top 5」（复用已有逐规则流量轮询）；/api/status 每 15 秒刷新并在页面隐藏时暂停（连同流量轮询）

仪表盘：新增「公网穿透」统计卡；运行状态面板增加公网反代行，数据来自新增的 GET /api/frpmulti/routes/summary（逐台服务端聚合，单台失败不中断）

仪表盘：新增一行三卡「系统资源 / 中国 IP 段 / 通知通道」；系统资源为新增跨平台采集 internal/sysinfo（Linux /proc、Windows kernel32，无新依赖）

FRP：修复 frpc 版本读不出来——RuntimeStatus.Version 带 omitempty，--version 探测失败时字段被省略，前端只能显示未检测；现回落按 <FrpDir>/bin/<版本>/ 目录名推导（与「FRP 应用配置」弹窗的 active_version 同源），并逐台服务端探测版本

清理：删除 DashboardView 死样式（.dashboard/.stat-highlight/.proxy-metric*）

web/src/api/client.ts

@@ -299,6 +299,8 @@ export const api = {
     request<{ ok: boolean; manager?: string; output?: string; path?: string; error?: string }>(`/api/frpmulti/servers/${serverId}/agent/nginx/install`, { method: 'POST' }),
   getFrpAgentRouteHealth: (serverId: number) =>
     request<import('./types').FrpAgentRouteHealth[]>(`/api/frpmulti/servers/${serverId}/agent/routes/health`),
+  getFrpRouteHealthSummary: () =>
+    request<import('./types').FrpRouteHealthSummary>('/api/frpmulti/routes/summary'),
   removeFrpAgentRoute: (serverId: number, proxyId: number) => request<{ ok: boolean }>(`/api/frpmulti/servers/${serverId}/agent/routes/${proxyId}`, { method: 'DELETE' }),
   pushFrpConfigToAgent: (id: number) => request<{ ok: boolean }>(`/api/frpmulti/servers/${id}/agent/frps-config`, { method: 'POST' }),
   frpsServerAction: (id: number, action: 'start' | 'stop' | 'restart') =>

web/src/api/types.ts

@@ -147,6 +147,11 @@ export interface DashboardStatus {
   avg_response_ms: number
   started_at: string
   uptime_seconds: number
+  cpu_percent: number
+  mem_used_bytes: number
+  mem_total_bytes: number
+  disk_used_bytes: number
+  disk_total_bytes: number
 }
 
 export interface DDNSDomainRecord {
@@ -720,6 +725,17 @@ export interface FrpAgentRouteHealth {
   service_ok: boolean
 }
 
+export interface FrpRouteHealthSummary {
+  servers: number
+  routes: number
+  healthy: number
+  dns_failed: number
+  cert_missing: number
+  tunnel_down: number
+  service_down: number
+  failed_servers?: string[]
+}
+
 export interface FrpAgentRouteDetail {
   domain: string
   file_exists: boolean

web/src/views/DashboardView.vue

@@ -56,14 +56,25 @@
 
         <StatCard label="服务" tone="teal">
           <template #icon><n-icon :component="GitNetworkOutline" /></template>
-          <template #extra><StatusBadge value="ok" text="正常" /></template>
-          <template #value>{{ coreServiceCountLabel }}</template>
-          <p class="stat-desc">核心服务运行正常</p>
+          <template #extra><StatusBadge :value="serviceHealth.badgeValue" :text="serviceHealth.badgeText" /></template>
+          <template #value>{{ serviceHealth.value }}</template>
+          <p class="stat-desc">{{ serviceHealth.desc }}</p>
           <div class="stat-foot">
             <div class="stat-foot__line">Fonu / Nginx / DDNS / 证书</div>
             <div class="stat-foot__muted">上次检查 {{ formatRelativeTime(status?.started_at) || '刚刚' }}</div>
           </div>
         </StatCard>
+
+        <StatCard label="公网穿透" tone="brand">
+          <template #icon><n-icon :component="SwapVerticalOutline" /></template>
+          <template #extra><StatusBadge :value="frpHealth.badgeValue" :text="frpHealth.badgeText" /></template>
+          <template #value>{{ frpHealth.value }}</template>
+          <p class="stat-desc">{{ frpHealth.desc }}</p>
+          <div class="stat-foot">
+            <div class="stat-foot__line mono">{{ frpHealth.version }}</div>
+            <div class="stat-foot__muted">上次应用 {{ frpHealth.applied }}</div>
+          </div>
+        </StatCard>
       </div>
 
       <div class="metrics-row">
@@ -115,6 +126,15 @@
                 :download="trafficChart.download"
               />
             </div>
+            <div v-if="trafficTop.length > 0" class="traffic-top">
+              <span class="traffic-top__title">流量 Top {{ trafficTop.length }}</span>
+              <ul class="traffic-top__list">
+                <li v-for="item in trafficTop" :key="item.name" class="traffic-top__item">
+                  <span class="traffic-top__name" :title="item.name">{{ item.name }}</span>
+                  <span class="traffic-top__rate">{{ item.rate }}</span>
+                </li>
+              </ul>
+            </div>
           </div>
         </FonuCard>
 
@@ -143,6 +163,123 @@
             </div>
           </div>
         </FonuCard>
+
+        <FonuCard class="panel">
+          <div class="panel__head">
+            <div class="panel-title">
+              <n-icon :component="FlashOutline" class="panel-title__icon panel-title__icon--amber" />
+              <span>性能</span>
+            </div>
+          </div>
+          <div class="panel__body perf-list">
+            <div class="health-item">
+              <div class="health-item__icon health-item__icon--blue">
+                <n-icon :component="PulseOutline" />
+              </div>
+              <div class="health-item__main">
+                <span class="health-item__name">平均响应</span>
+                <span class="health-item__meta">今日访问平均耗时</span>
+                <span class="health-item__detail">{{ avgResponseMeta }}</span>
+              </div>
+              <span class="perf-value">
+                {{ avgResponseLabel }}<small v-if="requestToday > 0">ms</small>
+              </span>
+            </div>
+            <div class="health-item">
+              <div
+                class="health-item__icon"
+                :class="errorToday > 0 ? 'health-item__icon--error' : 'health-item__icon--green'"
+              >
+                <n-icon :component="AlertCircleOutline" />
+              </div>
+              <div class="health-item__main">
+                <span class="health-item__name">今日异常</span>
+                <span class="health-item__meta">状态码 ≥ 400 的请求</span>
+                <span class="health-item__detail">{{ errorRateLabel }}</span>
+              </div>
+              <span class="perf-value" :class="{ 'perf-value--error': errorToday > 0 }">{{ errorTodayLabel }}</span>
+            </div>
+          </div>
+        </FonuCard>
+      </div>
+
+      <div class="ops-row">
+        <FonuCard class="panel">
+          <div class="panel__head">
+            <div class="panel-title">
+              <n-icon :component="ServerOutline" class="panel-title__icon panel-title__icon--teal" />
+              <span>系统资源</span>
+            </div>
+          </div>
+          <div class="panel__body perf-list">
+            <div v-for="item in resourceItems" :key="item.name" class="health-item">
+              <div class="health-item__icon" :class="`health-item__icon--${item.tone}`">
+                <n-icon :component="item.icon" />
+              </div>
+              <div class="health-item__main">
+                <span class="health-item__name">{{ item.name }}</span>
+                <span class="health-item__meta">{{ item.detail }}</span>
+                <span v-if="item.available" class="res-bar" :class="`res-bar--${item.barTone}`">
+                  <span class="res-bar__fill" :style="{ width: item.barWidth }" />
+                </span>
+              </div>
+              <span class="perf-value">{{ item.value }}</span>
+            </div>
+          </div>
+        </FonuCard>
+
+        <FonuCard class="panel">
+          <div class="panel__head">
+            <div class="panel-title">
+              <n-icon :component="GlobeOutline" class="panel-title__icon panel-title__icon--teal" />
+              <span>中国 IP 段</span>
+            </div>
+            <div class="head-actions">
+              <StatusBadge :value="cidrBadge.value" :text="cidrBadge.text" />
+              <n-button size="tiny" quaternary :loading="refreshingCIDR" @click="refreshCIDR">刷新</n-button>
+            </div>
+          </div>
+          <div class="panel__body perf-list">
+            <div v-for="item in cidrItems" :key="item.name" class="health-item">
+              <div class="health-item__icon" :class="`health-item__icon--${item.tone}`">
+                <n-icon :component="item.icon" />
+              </div>
+              <div class="health-item__main">
+                <span class="health-item__name">{{ item.name }}</span>
+                <span class="health-item__meta">{{ item.detail }}</span>
+              </div>
+              <span class="perf-value">{{ item.value }}</span>
+            </div>
+          </div>
+        </FonuCard>
+
+        <FonuCard class="panel">
+          <div class="panel__head">
+            <div class="panel-title">
+              <n-icon :component="ShieldCheckmarkOutline" class="panel-title__icon panel-title__icon--teal" />
+              <span>通知通道</span>
+            </div>
+            <div class="head-actions">
+              <StatusBadge :value="notifyChannel.badge" :text="notifyChannel.badgeText" />
+              <router-link :to="{ name: 'settings' }" class="card-link">
+                去设置
+                <n-icon :component="ChevronForwardOutline" />
+              </router-link>
+            </div>
+          </div>
+          <div class="panel__body perf-list">
+            <div v-for="row in notifyChannel.rows" :key="row.name" class="health-item">
+              <div class="health-item__icon" :class="`health-item__icon--${row.tone}`">
+                <n-icon :component="row.icon" />
+              </div>
+              <div class="health-item__main">
+                <span class="health-item__name">{{ row.name }}</span>
+                <span class="health-item__meta">{{ row.detail }}</span>
+              </div>
+              <span class="perf-value">{{ row.value }}</span>
+            </div>
+          </div>
+        </FonuCard>
       </div>
 
       <div class="bottom-row">
@@ -200,8 +337,9 @@
 
 <script setup lang="ts">
 import { computed, h, onMounted, onUnmounted, ref } from 'vue'
-import { NDataTable, NIcon, NSpin, NTag, useMessage, type DataTableColumns } from 'naive-ui'
+import { NButton, NDataTable, NIcon, NSpin, NTag, useMessage, type DataTableColumns } from 'naive-ui'
 import {
+  AlertCircleOutline,
   AppsOutline,
   CheckmarkCircleOutline,
   ChevronForwardOutline,
@@ -222,10 +360,18 @@ import { api, asList } from '../api/client'
 import type {
   AccessLogEntry,
   CertificateRecord,
+  ChinaCIDRStatus,
   DashboardStatus,
   DDNSConfig,
+  FrpRouteHealthSummary,
+  FrpStatus,
+  NotifyEmailConfig,
+  NotifyTelegramConfig,
+  NotifyType,
+  NotifyWebhookConfig,
   ProxyRule,
   ProxyTraffic,
+  SettingsMap,
   SystemLogEntry,
 } from '../api/types'
 import EmptyState from '../components/EmptyState.vue'
@@ -240,7 +386,14 @@ import {
   buildProxyBindingIndex,
   resolveAccessServiceLabel,
 } from '../utils/accessService'
-import { formatDate, formatLogTime, formatRate, formatRelativeTime, formatUptime } from '../utils/format'
+import {
+  formatBytes,
+  formatDate,
+  formatLogTime,
+  formatRate,
+  formatRelativeTime,
+  formatUptime,
+} from '../utils/format'
 import { displaySystemLog } from '../utils/logDisplay'
 import { httpStatusKind } from '../utils/status'
 
@@ -251,6 +404,12 @@ const certificates = ref<CertificateRecord[]>([])
 const accessLogs = ref<AccessLogEntry[]>([])
 const proxyRules = ref<ProxyRule[]>([])
 const systemLogs = ref<SystemLogEntry[]>([])
+const frpStatus = ref<FrpStatus | null>(null)
+const routeHealth = ref<FrpRouteHealthSummary | null>(null)
+const loadingRemoteHealth = ref(false)
+const chinaCIDR = ref<ChinaCIDRStatus | null>(null)
+const refreshingCIDR = ref(false)
+const settings = ref<SettingsMap | null>(null)
 const proxyBindingIndex = computed(() => buildProxyBindingIndex(proxyRules.value))
 const loading = ref(false)
 const loadError = ref('')
@@ -259,6 +418,7 @@ type RatePoint = { at: number; upload: number; download: number }
 const rateHistory = ref<RatePoint[]>([])
 const RATE_HISTORY_MS = 5 * 60 * 1000
 let trafficTimer: ReturnType<typeof setInterval> | null = null
+let statusTimer: ReturnType<typeof setInterval> | null = null
 
 function timeGreeting(hour: number): string {
   if (hour >= 5 && hour < 12) return '上午好'
@@ -335,7 +495,99 @@ const certSubLabel = computed(() => {
   return '证书需要关注'
 })
 
-const coreServiceCountLabel = computed(() => `${healthItems.value.length} 个`)
+// 「服务」卡按四项实际健康状态聚合：任一项非 running/ok 都降级并点名，避免写死「正常」
+const serviceHealth = computed(() => {
+  const items = healthItems.value
+  const bad = items.filter((item) => item.status !== 'running' && item.status !== 'ok')
+  if (bad.length === 0) {
+    return { value: `${items.length} 个`, desc: '核心服务运行正常', badgeValue: 'ok', badgeText: '正常' }
+  }
+  const severe = bad.some((item) => item.status === 'error' || item.status === 'stopped')
+  return {
+    value: `${items.length - bad.length}/${items.length} 正常`,
+    desc: `异常：${bad.map((item) => item.name).join('、')}`,
+    badgeValue: severe ? 'error' : 'warning',
+    badgeText: '需关注',
+  }
+})
+
+// 今日异常与平均响应：/api/status 早已返回，此前未展示
+const requestToday = computed(() => status.value?.request_today ?? 0)
+const errorToday = computed(() => status.value?.error_today ?? 0)
+// 今日无请求时不显示 0ms / 0（看起来像真实测量值），统一显示为 —
+const avgResponseLabel = computed(() =>
+  requestToday.value > 0 ? String(Math.round(status.value?.avg_response_ms ?? 0)) : '—',
+)
+const avgResponseMeta = computed(() =>
+  requestToday.value > 0 ? `共 ${requestToday.value.toLocaleString()} 次请求` : '今日暂无请求',
+)
+const errorTodayLabel = computed(() => (requestToday.value > 0 ? errorToday.value.toLocaleString() : '—'))
+const errorRateLabel = computed(() => {
+  if (requestToday.value <= 0) return '今日暂无请求'
+  return `占今日请求 ${((errorToday.value / requestToday.value) * 100).toFixed(1)}%`
+})
+
+// 公网穿透（FRP）：frpc 客户端侧状态
+const frpHealth = computed(() => {
+  const frp = frpStatus.value
+  if (!frp) {
+    return {
+      value: '未检测',
+      desc: '未获取到 frpc 状态',
+      badgeValue: 'none',
+      badgeText: '未检测',
+      version: 'frpc 未检测',
+      applied: '暂无',
+    }
+  }
+  if (!frp.configured) {
+    return {
+      value: '未配置',
+      desc: '尚未配置 FRP 服务端',
+      badgeValue: 'disabled',
+      badgeText: '未配置',
+      version: 'frpc 未安装',
+      applied: '暂无',
+    }
+  }
+  const running = frp.status === 'running'
+  return {
+    value: `${frp.enabled_proxies} 条`,
+    desc: running ? 'frpc 已连接服务端' : frp.last_error ? `frpc 异常：${frp.last_error}` : 'frpc 已停止',
+    badgeValue: running ? 'running' : frp.status === 'stopped' ? 'stopped' : 'warning',
+    badgeText: running ? '运行中' : frp.status === 'stopped' ? '已停止' : '未检测',
+    version: frp.frpc_version ? `frpc ${frp.frpc_version}` : 'frpc 版本未知',
+    applied: formatRelativeTime(frp.last_reloaded_at) || '暂无',
+  }
+})
+
+// 公网反代部署健康：逐台服务端联网采集，单独请求（见 loadRouteHealth）
+const remoteHealth = computed(() => {
+  if (loadingRemoteHealth.value) return { status: 'none', label: '检查中' }
+  const summary = routeHealth.value
+  if (!summary) return { status: 'none', label: '未获取' }
+  if (summary.servers === 0) return { status: 'disabled', label: '未配置' }
+  if (summary.routes === 0) return { status: 'none', label: '暂无路由' }
+  const allHealthy = summary.healthy === summary.routes && !summary.failed_servers?.length
+  return { status: allHealthy ? 'ok' : 'warning', label: allHealthy ? '全部健康' : '需关注' }
+})
+
+const remoteHealthMeta = computed(() => {
+  if (loadingRemoteHealth.value) return '正在采集公网侧状态…'
+  const summary = routeHealth.value
+  if (!summary) return '未能获取公网侧状态'
+  if (summary.servers === 0) return '尚未配置 FRP 服务端'
+  if (summary.routes === 0) return '尚无已配置域名的穿透规则'
+  const issues: string[] = []
+  if (summary.dns_failed) issues.push(`DNS ${summary.dns_failed}`)
+  if (summary.cert_missing) issues.push(`证书 ${summary.cert_missing}`)
+  if (summary.tunnel_down) issues.push(`隧道 ${summary.tunnel_down}`)
+  if (summary.service_down) issues.push(`服务 ${summary.service_down}`)
+  const parts = [`${summary.healthy}/${summary.routes} 条健康`]
+  if (issues.length > 0) parts.push(issues.join(' · '))
+  if (summary.failed_servers?.length) parts.push(`采集失败 ${summary.failed_servers.join('、')}`)
+  return parts.join('｜')
+})
 
 const trafficTotals = computed(() => {
   let uploadRate = 0
@@ -368,6 +620,21 @@ const trafficChart = computed(() => {
   return { labels, upload, download }
 })
 
+// 当前流量 Top 5：直接复用已有的逐规则流量轮询，无需额外接口
+const trafficTop = computed(() =>
+  Object.entries(trafficByRule.value)
+    .map(([key, stats]) => {
+      const id = Number(key)
+      const rule = proxyRules.value.find((item) => item.id === id)
+      const name = rule ? rule.name?.trim() || rule.domain || `规则 #${id}` : `规则 #${id}`
+      return { name, rate: stats.upload_rate + stats.download_rate }
+    })
+    .filter((row) => row.rate > 0)
+    .sort((a, b) => b.rate - a.rate)
+    .slice(0, 5)
+    .map((row) => ({ name: row.name, rate: formatRate(row.rate) })),
+)
+
 const calendarHourLabels = Array.from({ length: 12 }, (_, i) =>
   `${String(i * 2).padStart(2, '0')}:00`,
 )
@@ -426,6 +693,15 @@ const healthItems = computed(() => [
     icon: ShieldCheckmarkOutline,
     tone: 'green',
   },
+  {
+    name: '公网反代',
+    desc: '公网侧部署与健康',
+    meta: remoteHealthMeta.value,
+    status: remoteHealth.value.status,
+    label: remoteHealth.value.label,
+    icon: GlobeOutline,
+    tone: 'green',
+  },
 ])
 
 const accessColumns = computed<DataTableColumns<AccessLogEntry>>(() => [
@@ -544,22 +820,269 @@ function stopTrafficPoll() {
   }
 }
 
+// CPU 占用率需要两次采样才有意义，因此 /api/status 每 15 秒刷新一次
+async function refreshStatus() {
+  try {
+    status.value = await api.getStatus()
+  } catch {
+    // 静默失败：保留上一次快照
+  }
+}
+
+function startStatusPoll() {
+  stopStatusPoll()
+  statusTimer = setInterval(refreshStatus, 15000)
+}
+
+function stopStatusPoll() {
+  if (statusTimer) {
+    clearInterval(statusTimer)
+    statusTimer = null
+  }
+}
+
+// 页面隐藏时暂停轮询，避免后台标签页持续请求
+function handleVisibilityChange() {
+  if (document.hidden) {
+    stopTrafficPoll()
+    stopStatusPoll()
+    return
+  }
+  startTrafficPoll()
+  startStatusPoll()
+}
+
+// 系统资源：/api/status 返回的宿主机 CPU / 内存 / 磁盘（容器内为宿主机视角）
+const resourcesAvailable = computed(
+  () => (status.value?.mem_total_bytes ?? 0) > 0 || (status.value?.disk_total_bytes ?? 0) > 0,
+)
+
+function usagePercent(used?: number, total?: number): number {
+  if (!used || !total || total <= 0) return 0
+  return Math.min(100, (used / total) * 100)
+}
+
+const resourceItems = computed(() => {
+  const data = status.value
+  const rows = [
+    {
+      name: 'CPU',
+      icon: AppsOutline,
+      tone: 'blue',
+      detail: '整机 CPU 占用率',
+      percent: Math.min(100, Math.max(0, data?.cpu_percent ?? 0)),
+      available: resourcesAvailable.value,
+    },
+    {
+      name: '内存',
+      icon: ServerOutline,
+      tone: 'green',
+      detail: `${formatBytes(data?.mem_used_bytes ?? 0)} / ${formatBytes(data?.mem_total_bytes ?? 0)}`,
+      percent: usagePercent(data?.mem_used_bytes, data?.mem_total_bytes),
+      available: (data?.mem_total_bytes ?? 0) > 0,
+    },
+    {
+      name: '磁盘',
+      icon: ListOutline,
+      tone: 'teal',
+      detail: `${formatBytes(data?.disk_used_bytes ?? 0)} / ${formatBytes(data?.disk_total_bytes ?? 0)}`,
+      percent: usagePercent(data?.disk_used_bytes, data?.disk_total_bytes),
+      available: (data?.disk_total_bytes ?? 0) > 0,
+    },
+  ]
+  return rows.map((row) => ({
+    ...row,
+    value: row.available ? `${Math.round(row.percent)}%` : '—',
+    barWidth: `${row.percent.toFixed(1)}%`,
+    barTone: row.percent >= 90 ? 'danger' : row.percent >= 75 ? 'warn' : 'ok',
+  }))
+})
+
+// 中国 IP 段：安全模块（china_only）依赖的国内地址库
+const cidrBadge = computed(() => {
+  const data = chinaCIDR.value
+  if (!data) return { value: 'none', text: '未获取' }
+  if (data.last_error) return { value: 'error', text: '更新失败' }
+  if (!data.ready) return { value: 'warning', text: '未就绪' }
+  return { value: 'ok', text: '就绪' }
+})
+
+const cidrItems = computed(() => {
+  const data = chinaCIDR.value
+  return [
+    {
+      name: 'IPv4 条目',
+      icon: GlobeOutline,
+      tone: 'blue',
+      detail: '国内 IPv4 地址段',
+      value: (data?.entry_count_v4 ?? 0).toLocaleString(),
+    },
+    {
+      name: 'IPv6 条目',
+      icon: WifiOutline,
+      tone: 'teal',
+      detail: '国内 IPv6 地址段',
+      value: (data?.entry_count_v6 ?? 0).toLocaleString(),
+    },
+    {
+      name: '上次更新',
+      icon: DocumentTextOutline,
+      tone: 'green',
+      detail: data?.last_error ? `上次错误：${data.last_error}` : '按设置周期自动更新',
+      value: formatRelativeTime(data?.updated_at) || '从未更新',
+    },
+  ]
+})
+
+async function loadChinaCIDR() {
+  try {
+    chinaCIDR.value = await api.getChinaCIDRStatus()
+  } catch {
+    chinaCIDR.value = null
+  }
+}
+
+// 中国 IP 段更新是后端后台任务：刷新后按 2 秒轮询直到就绪或结束
+let cidrPollTimer: ReturnType<typeof setInterval> | null = null
+
+function stopCIDRPoll() {
+  if (cidrPollTimer) {
+    clearInterval(cidrPollTimer)
+    cidrPollTimer = null
+  }
+}
+
+async function pollCIDR() {
+  await loadChinaCIDR()
+  const data = chinaCIDR.value
+  if (!data || data.ready || !data.updating) {
+    stopCIDRPoll()
+    if (data?.ready) message.success('中国 IP 段已更新')
+  }
+}
+
+async function refreshCIDR() {
+  refreshingCIDR.value = true
+  stopCIDRPoll()
+  try {
+    chinaCIDR.value = await api.refreshChinaCIDR()
+    if (chinaCIDR.value.ready) {
+      message.success(
+        `中国 IP 段已更新：IPv4 ${chinaCIDR.value.entry_count_v4} 条，IPv6 ${chinaCIDR.value.entry_count_v6} 条`,
+      )
+    } else if (chinaCIDR.value.updating) {
+      cidrPollTimer = setInterval(() => void pollCIDR(), 2000)
+    } else {
+      message.warning('更新完成，但数据尚未就绪，请查看错误信息')
+    }
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '更新中国 IP 段失败')
+  } finally {
+    refreshingCIDR.value = false
+  }
+}
+
+// 通知通道：设置里的 notify_type + 各通道 JSON（has_* 标记由后端保存时写入）
+function parseSettingsJSON<T>(raw?: string): T | null {
+  if (!raw) return null
+  try {
+    return JSON.parse(raw) as T
+  } catch {
+    return null
+  }
+}
+
+const notifyChannel = computed(() => {
+  const map = settings.value ?? {}
+  const type = (map.notify_type ?? '') as NotifyType
+  const telegram = parseSettingsJSON<NotifyTelegramConfig>(map.notify_telegram_json)
+  const webhook = parseSettingsJSON<NotifyWebhookConfig>(map.notify_webhook_json)
+  const email = parseSettingsJSON<NotifyEmailConfig>(map.notify_email_json)
+  const events = Object.entries(map).filter(
+    ([key, value]) => key.startsWith('notify_on_') && (value === '1' || value === 'true'),
+  ).length
+
+  let name = '未启用'
+  let secret = '通知凭据'
+  let configured = false
+  if (type === 'telegram') {
+    name = 'Telegram'
+    secret = 'Bot Token'
+    configured = Boolean(telegram?.has_bot_token)
+  } else if (type === 'webhook') {
+    name = `Webhook（${webhook?.provider || '未选择服务商'}）`
+    secret = 'Webhook 密钥'
+    configured = Boolean(webhook?.has_secret)
+  } else if (type === 'email') {
+    name = '邮件 SMTP'
+    secret = 'SMTP 密码'
+    configured = Boolean(email?.has_password)
+  }
+
+  return {
+    badge: type ? (configured ? 'ok' : 'warning') : 'disabled',
+    badgeText: type ? (configured ? '已启用' : '待补全') : '未启用',
+    rows: [
+      {
+        name: '当前通道',
+        icon: CheckmarkCircleOutline,
+        tone: 'blue',
+        detail: type ? '告警通知的发送方式' : '尚未选择通知方式',
+        value: name,
+      },
+      {
+        name: '密钥凭据',
+        icon: ShieldCheckmarkOutline,
+        tone: 'green',
+        detail: secret,
+        value: configured ? '已保存' : '未保存',
+      },
+      {
+        name: '已开启告警',
+        icon: PulseOutline,
+        tone: 'teal',
+        detail: 'DDNS、证书、登录失败等事件',
+        value: `${events} 项`,
+      },
+    ],
+  }
+})
+
+// 公网侧健康需逐台服务端联网采集，单独请求，避免拖慢整页加载
+async function loadRouteHealth() {
+  loadingRemoteHealth.value = true
+  try {
+    routeHealth.value = await api.getFrpRouteHealthSummary()
+  } catch {
+    routeHealth.value = null
+  } finally {
+    loadingRemoteHealth.value = false
+  }
+}
+
 async function load() {
   loading.value = true
   loadError.value = ''
   try {
-    const [s, access, system, certs, rules] = await Promise.all([
+    const [s, access, system, certs, rules, frp, cidr, config] = await Promise.all([
       api.getStatus(),
       api.getAccessLogs({ limit: 10 }),
       api.getSystemLogs({ limit: 10 }),
       api.listCertificates(),
       api.listProxies().catch((): ProxyRule[] => []),
+      api.getFrpStatus().catch((): FrpStatus | null => null),
+      api.getChinaCIDRStatus().catch((): ChinaCIDRStatus | null => null),
+      api.getSettings().catch((): SettingsMap | null => null),
     ])
     status.value = s
     accessLogs.value = asList(access)
     proxyRules.value = asList(rules)
     systemLogs.value = asList(system)
     certificates.value = asList(certs)
+    frpStatus.value = frp
+    chinaCIDR.value = cidr
+    settings.value = config
+    void loadRouteHealth()
     api.listDDNSLite()
       .then((ddns) => {
         ddnsConfigs.value = asList(ddns)
@@ -577,18 +1100,19 @@ onMounted(() => {
   load()
   refreshTraffic()
   startTrafficPoll()
+  startStatusPoll()
+  document.addEventListener('visibilitychange', handleVisibilityChange)
 })
 
-onUnmounted(stopTrafficPoll)
+onUnmounted(() => {
+  stopTrafficPoll()
+  stopStatusPoll()
+  stopCIDRPoll()
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+})
 </script>
 
 <style scoped>
-.dashboard {
-  display: flex;
-  flex-direction: column;
-  gap: var(--fonu-space-4);
-}
-
 .hero-banner {
   position: relative;
   overflow: hidden;
@@ -710,7 +1234,7 @@ html.dark .hero-art {
 
 .stats-row {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: var(--fonu-space-4);
   margin-bottom: var(--fonu-space-4);
 }
@@ -751,40 +1275,6 @@ html.dark .hero-art {
   color: var(--fonu-text-muted);
 }
 
-.stat-highlight {
-  color: var(--fonu-brand);
-  font-weight: 600;
-}
-
-.proxy-metrics {
-  display: flex;
-  gap: var(--fonu-space-5);
-  margin-top: var(--fonu-space-3);
-  padding-top: var(--fonu-space-3);
-  border-top: 1px solid var(--fonu-border);
-}
-
-.proxy-metric {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.proxy-metric__val {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--fonu-text);
-}
-
-.proxy-metric__val--ok {
-  color: var(--fonu-brand);
-}
-
-.proxy-metric__lbl {
-  font-size: 12px;
-  color: var(--fonu-text-muted);
-}
-
 .traffic-panel {
   display: flex;
   flex-direction: column;
@@ -855,9 +1345,54 @@ html.dark .hero-art {
   font-variant-numeric: tabular-nums;
 }
 
+.traffic-top {
+  margin-top: var(--fonu-space-3);
+  padding-top: var(--fonu-space-3);
+  border-top: 1px solid var(--fonu-border);
+}
+
+.traffic-top__title {
+  font-size: 12px;
+  color: var(--fonu-text-muted);
+}
+
+.traffic-top__list {
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 4px;
+}
+
+.traffic-top__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--fonu-space-3);
+  font-size: 13px;
+}
+
+.traffic-top__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fonu-text);
+}
+
+.traffic-top__rate {
+  color: var(--fonu-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.ops-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--fonu-space-4);
+  margin-bottom: var(--fonu-space-4);
+}
+
 .metrics-row {
   display: grid;
-  grid-template-columns: 3fr 3fr 2fr;
+  grid-template-columns: 3fr 3fr 2fr 2fr;
   gap: var(--fonu-space-4);
   margin-bottom: var(--fonu-space-4);
   align-items: stretch;
@@ -946,66 +1481,69 @@ html.dark .hero-art {
   flex-direction: column;
 }
 
-.perf-panel :deep(.fonu-card__body) {
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-  height: 100%;
-  padding: var(--fonu-space-5);
-}
-
-.perf-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-.perf-block {
+/* 性能面板的行沿用「运行状态」的 .health-item，但不随面板高度被拉高（该面板只有两项指标） */
+.perf-list {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: var(--fonu-space-3) 0;
+  gap: 8px;
+  min-height: 0;
 }
 
-.perf-block__label {
-  font-size: 12px;
-  color: var(--fonu-text-muted);
+.perf-list .health-item {
+  flex: 0 0 auto;
 }
 
-.perf-block__value {
-  margin-top: 6px;
-  font-size: 30px;
+.perf-value {
+  justify-self: end;
+  font-size: 16px;
   font-weight: 700;
   color: var(--fonu-text);
-  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
-.perf-block__value--error {
-  color: var(--fonu-error);
-}
-
-.perf-block__value small {
-  font-size: 14px;
+.perf-value small {
+  margin-left: 2px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--fonu-text-secondary);
-  margin-left: 2px;
 }
 
-.perf-block__meta {
-  margin-top: 4px;
-  font-size: 11px;
-  color: var(--fonu-text-muted);
-}
-
-.perf-block__meta--error {
+.perf-value--error {
   color: var(--fonu-error);
-  opacity: 0.85;
 }
 
-.perf-divider {
-  height: 1px;
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--fonu-space-2);
+}
+
+.res-bar {
+  display: block;
+  height: 4px;
+  margin-top: 6px;
+  border-radius: 2px;
   background: var(--fonu-border);
-  margin: var(--fonu-space-2) 0;
+  overflow: hidden;
+}
+
+.res-bar__fill {
+  display: block;
+  height: 100%;
+  border-radius: 2px;
+  background: var(--fonu-brand);
+  transition: width 0.3s ease;
+}
+
+.res-bar--warn .res-bar__fill {
+  background: var(--fonu-warning);
+}
+
+.res-bar--danger .res-bar__fill {
+  background: var(--fonu-error);
 }
 
 .health-panel .panel__head {
@@ -1070,6 +1608,11 @@ html.dark .hero-art {
   color: #10b981;
 }
 
+.health-item__icon--error {
+  background: color-mix(in srgb, var(--fonu-error) 12%, transparent);
+  color: var(--fonu-error);
+}
+
 .health-item__main {
   min-width: 0;
   display: flex;
@@ -1200,15 +1743,16 @@ html.dark .hero-art {
 }
 
 @media (max-width: 1199px) {
-  .stats-row { grid-template-columns: repeat(2, 1fr); }
+  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .metrics-row { grid-template-columns: 1fr 1fr; }
-  .health-panel { grid-column: 1 / 3; }
+  .ops-row { grid-template-columns: 1fr 1fr; }
   .bottom-row { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 767px) {
   .stats-row { grid-template-columns: 1fr; }
   .metrics-row { grid-template-columns: 1fr; }
+  .ops-row { grid-template-columns: 1fr; }
   .health-panel { grid-column: auto; }
 }
 </style>