fix(web,agent): P1 正确性与鉴权加固，P2 抽 fsutil 并补测试（v1.2.8）

web/src/composables/useVisibilityPolling.ts

@@ -0,0 +1,44 @@
+import { onBeforeUnmount, onMounted, type Ref } from 'vue'
+
+/**
+ * 页面可见时才轮询：标签页隐藏期间跳过这一轮，回到前台立即补一次。
+ *
+ * 各页原来的写法是「自己 setInterval + 在回调里判断 document.visibilityState」，
+ * 但只有仪表盘这么做了，其余页面在后台标签页里仍在持续打接口（公网反代页每轮 7 个请求）。
+ *
+ * @param fn 每轮执行的回调；由调用方自行保证幂等与「无数据时直接 return」
+ * @param intervalMs 轮询间隔
+ * @param enabled 可选开关，为 false 时整轮跳过（例如未选中服务端）
+ */
+export function useVisibilityPolling(fn: () => void | Promise<void>, intervalMs: number, enabled?: Ref<boolean>) {
+  let timer: number | undefined
+
+  const tick = () => {
+    if (document.visibilityState === 'hidden') return
+    if (enabled && !enabled.value) return
+    void fn()
+  }
+
+  const stop = () => {
+    if (timer === undefined) return
+    window.clearInterval(timer)
+    timer = undefined
+  }
+
+  const onVisibilityChange = () => {
+    if (document.visibilityState === 'hidden') return
+    tick() // 回到前台立刻补一次，不用等下一个周期
+  }
+
+  onMounted(() => {
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    timer = window.setInterval(tick, intervalMs)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('visibilitychange', onVisibilityChange)
+    stop()
+  })
+
+  return { stop }
+}

web/src/utils/format.spec.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest'
+import { formatBytes, formatLogLine, formatLogTime, formatRate, formatRelativeTime, formatUptime } from './format'
+
+describe('formatBytes', () => {
+  it('按 1024 进制换算并按量级保留有效位', () => {
+    expect(formatBytes(0)).toBe('0 B')
+    expect(formatBytes(512)).toBe('512 B')
+    expect(formatBytes(1024)).toBe('1.00 KB')
+    expect(formatBytes(1536)).toBe('1.50 KB')
+    expect(formatBytes(20 * 1024)).toBe('20.0 KB')
+    expect(formatBytes(200 * 1024)).toBe('200 KB')
+    expect(formatBytes(3 * 1024 ** 3)).toBe('3.00 GB')
+  })
+
+  it('非法输入回落 0 B，不产生 NaN', () => {
+    expect(formatBytes(Number.NaN)).toBe('0 B')
+    expect(formatBytes(Number.POSITIVE_INFINITY)).toBe('0 B')
+    expect(formatBytes(-1)).toBe('0 B')
+  })
+})
+
+describe('formatRate', () => {
+  it('复用字节格式化并加 /s', () => {
+    expect(formatRate(0)).toBe('0 B/s')
+    expect(formatRate(2048)).toBe('2.00 KB/s')
+  })
+})
+
+describe('formatUptime', () => {
+  it('小时为 0 时只显示分钟', () => {
+    expect(formatUptime(90)).toBe('1 分钟')
+    expect(formatUptime(3661)).toBe('1 小时 1 分钟')
+  })
+})
+
+describe('formatRelativeTime', () => {
+  it('按分钟 / 小时 / 天分档', () => {
+    const ago = (minutes: number) => new Date(Date.now() - minutes * 60_000).toISOString()
+    expect(formatRelativeTime(undefined)).toBe('-')
+    expect(formatRelativeTime(ago(0))).toBe('刚刚')
+    expect(formatRelativeTime(ago(5))).toBe('5 分钟前')
+    expect(formatRelativeTime(ago(3 * 60))).toBe('3 小时前')
+    expect(formatRelativeTime(ago(2 * 24 * 60))).toBe('2 天前')
+  })
+
+  it('无法解析的字符串原样返回，不显示 NaN', () => {
+    expect(formatRelativeTime('not-a-date')).toBe('not-a-date')
+  })
+})
+
+describe('formatLogTime', () => {
+  it('三种日志时间格式统一成 YYYY-MM-DD HH:mm:ss', () => {
+    expect(formatLogTime('2026-09-24 18:30:05')).toBe('2026-09-24 18:30:05')
+    expect(formatLogTime('2026-09-24T18:30:05Z')).toBe('2026-09-24 18:30:05')
+    expect(formatLogTime('2026/09/24 18:30:05')).toBe('2026-09-24 18:30:05')
+    expect(formatLogTime('')).toBe('-')
+  })
+})
+
+describe('formatLogLine', () => {
+  it('只改写行首时间戳，保留其余内容', () => {
+    expect(formatLogLine('2026/09/24 18:30:05 [error] boom')).toBe('2026-09-24 18:30:05 [error] boom')
+    expect(formatLogLine('2026-09-24T18:30:05Z upstream timeout')).toBe('2026-09-24 18:30:05 upstream timeout')
+  })
+
+  it('JSON 日志只替换 time 字段', () => {
+    expect(formatLogLine('{"time":"2026-09-24T18:30:05Z","level":"info"}')).toBe('{"time":"2026-09-24 18:30:05","level":"info"}')
+  })
+})

web/src/utils/status.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { httpStatusKind, statusKind, statusLabel } from './status'
+
+describe('statusKind', () => {
+  it('把后端状态值映射成 StatusKind', () => {
+    expect(statusKind('ok')).toBe('success')
+    expect(statusKind('running')).toBe('success')
+    expect(statusKind('warning')).toBe('warning')
+    expect(statusKind('error')).toBe('error')
+    expect(statusKind('stopped')).toBe('disabled')
+    expect(statusKind('none')).toBe('disabled')
+    expect(statusKind(undefined)).toBe('unknown')
+    expect(statusKind('')).toBe('unknown')
+  })
+
+  it('回归：n-tag 的 type 值不是状态值，必须落到 unknown', () => {
+    // 曾把 serverStartupType() 返回的 'success'/'default' 传给 StatusBadge :value，
+    // 导致服务端详情弹窗「运行中」也显示灰点。
+    expect(statusKind('success')).toBe('unknown')
+    expect(statusKind('default')).toBe('unknown')
+  })
+})
+
+describe('statusLabel', () => {
+  it('已知值给中文，未知值原样返回', () => {
+    expect(statusLabel('ok')).toBe('正常')
+    expect(statusLabel('stopped')).toBe('已停止')
+    expect(statusLabel('weird')).toBe('weird')
+    expect(statusLabel()).toBe('未知')
+  })
+})
+
+describe('httpStatusKind', () => {
+  it('按状态码分段', () => {
+    expect(httpStatusKind(200)).toBe('success')
+    expect(httpStatusKind(301)).toBe('unknown')
+    expect(httpStatusKind(404)).toBe('warning')
+    expect(httpStatusKind(503)).toBe('error')
+  })
+})

web/src/views/AgentView.vue

@@ -1859,9 +1859,6 @@ onBeforeUnmount(() => { if (timer) window.clearInterval(timer) })
 .detail-subgroup { margin-top: var(--fonu-space-3); padding-top: var(--fonu-space-3); border-top: 1px solid var(--fonu-border); }
 .detail-subgroup__title { margin-bottom: var(--fonu-space-2); font-size: 12px; font-weight: 600; color: var(--fonu-text-secondary); }
 .detail-muted { color: var(--fonu-text-secondary); font-size: 12px; }
-.detail-subgroup { margin-top: var(--fonu-space-3); padding-top: var(--fonu-space-3); border-top: 1px solid var(--fonu-border); }
-.detail-subgroup__title { margin-bottom: var(--fonu-space-2); font-size: 12px; font-weight: 600; color: var(--fonu-text-secondary); }
-.detail-muted { color: var(--fonu-text-secondary); font-size: 12px; }
 .diag-checks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
 .server-detail__location { display: flex; align-items: center; gap: 5px; }
 .detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fonu-space-4); margin-bottom: var(--fonu-space-4); }

web/src/views/DashboardView.vue

@@ -794,7 +794,12 @@ function recordRateSample() {
   rateHistory.value = rateHistory.value.filter((p) => p.at >= cutoff)
 }
 
+let trafficInFlight = false
+
 async function refreshTraffic() {
+  // 2 秒一轮且链路慢时会堆积并发请求：上一轮没回来就跳过这一轮
+  if (trafficInFlight) return
+  trafficInFlight = true
   try {
     const rows = asList(await api.getProxyTraffic())
     const next: Record<number, ProxyTraffic> = {}
@@ -805,6 +810,8 @@ async function refreshTraffic() {
     recordRateSample()
   } catch {
     // ignore polling errors
+  } finally {
+    trafficInFlight = false
   }
 }
 

web/src/views/FrpView.vue

@@ -657,6 +657,7 @@ import { formatBytes, formatDate, formatRate } from '../utils/format'
 import type { FrpBinary, FrpDownloadTask, FrpProxy, FrpProxyOptions, FrpProxyPayload, FrpRelease, FrpRuntimeInfo, FrpServer, FrpStatus } from '../api/types'
 import FonuCard from '../components/FonuCard.vue'
 import EmptyState from '../components/EmptyState.vue'
+import { useVisibilityPolling } from '../composables/useVisibilityPolling'
 import LoadError from '../components/LoadError.vue'
 import PageHeader from '../components/PageHeader.vue'
 import StatusBadge from '../components/StatusBadge.vue'
@@ -698,7 +699,6 @@ const downloadProxyOptions = [
   { label: 'cdn.gh-proxy.org', value: 'https://cdn.gh-proxy.org/' },
 ]
 const editingProxy = ref<FrpProxy | null>(null)
-let timer: number | undefined
 let downloadTimer: number | undefined
 
 function defaultProxyOptions(): FrpProxyOptions & { allow_ips_text?: string } {
@@ -1204,8 +1204,11 @@ function proxyTransportTags(proxy: FrpProxy) {
   return tags
 }
 
-onMounted(async () => { await load(); timer = window.setInterval(load, 5_000) })
-onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer) { window.clearInterval(proxyRateTimer); proxyRateTimer = null } stopDownloadPolling() })
+// 轮询走 useVisibilityPolling：标签页隐藏时暂停，回到前台补一次
+useVisibilityPolling(() => load(), 5_000)
+
+onMounted(async () => { await load() })
+onUnmounted(() => { if (proxyRateTimer) { window.clearInterval(proxyRateTimer); proxyRateTimer = null } stopDownloadPolling() })
 </script>
 
 <style scoped>
@@ -1223,24 +1226,7 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer)
 .stat-card__value--sm { font-size: 18px; }
 .stat-card__label { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--fonu-text); }
 .stat-card__sub { margin-top: 4px; font-size: 12px; color: var(--fonu-text-muted); }
-.section-card { margin-bottom: var(--fonu-space-5); }
-.section-actions, .switch-row, .modal-actions, .logs-toolbar { display: flex; align-items: center; gap: var(--fonu-space-2); flex-wrap: wrap; }
 /* 公网服务端列表：n-data-table（与规则表一致）；单元格由 render 创建，样式必须 :deep() */
-.frp-server-table-wrap { border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius-sm); overflow: hidden; }
-.frp-server-table :deep(.cell-name) { display: flex; align-items: center; gap: 6px; font-weight: 600; }
-.frp-server-table :deep(.cell-inline) { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
-.frp-server-table :deep(.cell-inline .n-icon) { flex: 0 0 auto; color: var(--fonu-text-muted); font-size: 15px; }
-.frp-server-table :deep(.cell-wrap) { overflow-wrap: anywhere; }
-.frp-server-table :deep(.mono) { font-family: var(--fonu-mono); font-size: 13px; }
-.frp-server-table :deep(.cell-actions) { display: flex; align-items: center; justify-content: flex-end; gap: var(--fonu-space-2); flex-wrap: wrap; }
-.frp-server-table :deep(.n-data-table-td) { vertical-align: middle; }
-.logs-modal { width: min(860px, calc(100vw - 32px)); }
-.logs-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--fonu-space-3); }
-.logs-toolbar__filter { width: 200px; }
-.rule-detail__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fonu-space-3) var(--fonu-space-5); }
-.rule-detail__fields label { display: block; margin-bottom: 4px; color: var(--fonu-text-secondary); font-size: 12px; }
-.rule-detail__fields strong { font-weight: 500; overflow-wrap: anywhere; }
-.rule-detail__transport { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--fonu-space-4); }
 .rule-detail__logs { max-height: 420px; }
 .rule-detail__log-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fonu-space-3); }
 /* 详情弹窗概览区：与反代详情同版式 */
@@ -1384,7 +1370,6 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer)
 .form-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--fonu-space-4); font-size: 16px; }
 .form-section h3 :deep(.n-icon) { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--fonu-radius-sm); background: var(--fonu-brand); color: #fff; font-size: 15px; }
 .form-hint { margin: 0 0 var(--fonu-space-4); color: var(--fonu-text-secondary); font-size: 13px; line-height: 1.55; }
-.narrow-input { max-width: 200px; }
 /* 统一卡片式弹窗外壳（运行日志 / 导出配置 / frps 同源配置）：与 .proxy-modal 体系一致的头部 + 滚动区 + 页脚 */
 .frp-card-modal { display: flex; flex-direction: column; width: min(860px, calc(100vw - 32px)); max-height: 90vh; background: var(--fonu-surface); border-radius: var(--fonu-radius); overflow: hidden; box-shadow: var(--fonu-shadow-md); }
 .frp-card-modal .proxy-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); padding: var(--fonu-space-5) var(--fonu-space-5) 0; flex-shrink: 0; }
@@ -1393,9 +1378,6 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer)
 .frp-card-modal .modal-footer { display: flex; justify-content: flex-end; gap: var(--fonu-space-3); padding: var(--fonu-space-4) var(--fonu-space-5) var(--fonu-space-5); border-top: 1px solid var(--fonu-border); margin-top: var(--fonu-space-2); flex-shrink: 0; }
 .frp-runtime-modal { width: min(880px, 92vw); }
 /* 服务端详情弹窗（仍用 naive-ui preset=card）：排版对齐 .proxy-modal */
-.frp-detail-card :deep(.n-card-header) { padding: var(--fonu-space-5) var(--fonu-space-5) 0; }
-.frp-detail-card :deep(.n-card-header__main) { font-size: 18px; font-weight: 600; color: var(--fonu-text); }
-.frp-detail-card :deep(.n-card__content) { padding: var(--fonu-space-4) var(--fonu-space-5) var(--fonu-space-5); }
 
 .frp-guide-modal { display: flex; width: 900px; max-width: 95vw; max-height: 90vh; background: var(--fonu-surface); border-radius: var(--fonu-radius); overflow: hidden; box-shadow: var(--fonu-shadow-md); }
 .frp-guide-modal .proxy-modal__form { flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: 90vh; }
@@ -1420,30 +1402,16 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer)
 .guide-topo { margin: 8px 0; padding: 10px 12px; border-radius: 6px; background: var(--fonu-bg-muted); font-size: 12px; line-height: 1.6; overflow-x: auto; }
 .guide-steps { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.7; }
 .guide-collapse :deep(.n-collapse-item__header) { font-size: 13px; font-weight: 500; }
-.guide-tabs { margin-top: -6px; }
-.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; }
-.agent-grid > div { display: grid; gap: 4px; min-width: 0; }
-.agent-grid label { color: var(--fonu-text-secondary); font-size: 12px; }
-.agent-grid .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.agent-sub { margin-top: 10px; }
-.agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-.frps-install-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
-.agent-output { margin-top: 10px; max-height: 220px; overflow: auto; white-space: pre-wrap; }
 .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--fonu-space-4); }
 .form-grid--wide > :first-child { grid-column: 1 / -1; }
-.tls-panel { padding: var(--fonu-space-4); border-radius: var(--fonu-radius-sm); background: var(--fonu-bg-muted); }
-.tls-file-field { margin-bottom: var(--fonu-space-4); }
-.tls-file-field__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); margin-bottom: var(--fonu-space-2); font-size: 14px; font-weight: 500; }
-.file-input { display: none; }
-.asset-actions { display: flex; gap: var(--fonu-space-2); margin-top: calc(-1 * var(--fonu-space-2)); }
 .advanced-collapse { margin-top: var(--fonu-space-3); }
+.switch-row, .modal-actions { display: flex; align-items: center; gap: var(--fonu-space-2); flex-wrap: wrap; }
 .switch-row { padding: 4px 0 var(--fonu-space-5); }
 .switch-row span:nth-of-type(2) { margin-left: var(--fonu-space-4); }
 .modal-actions { justify-content: flex-end; }
 .logs-box { margin: var(--fonu-space-3) 0 0; padding: var(--fonu-space-4); min-height: 260px; max-height: 480px; overflow: auto; border: 1px solid var(--fonu-border); background: var(--fonu-bg-muted); color: var(--fonu-text); white-space: pre-wrap; word-break: break-word; font: 12px/1.55 var(--fonu-mono); }
 .error-card__content { color: var(--fonu-error); white-space: pre-wrap; }
 .table-muted { margin-top: 4px; color: var(--fonu-text-muted); font-size: 12px; }
-.type-chip { font-family: var(--fonu-mono); font-size: 12px; color: var(--fonu-brand-text); }
 /* 规则表单元格由 render 函数的 h() 创建，不带 scoped 属性，必须 :deep() 才能命中 */
 .runtime-actions, .runtime-section__title, .binary-row, .binary-row__actions { display: flex; align-items: center; gap: var(--fonu-space-3); }
 .runtime-actions { justify-content: flex-end; margin-bottom: var(--fonu-space-4); }
@@ -1465,46 +1433,6 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer)
 .release-progress__bar { min-width: 0; }
 .release-progress__value { font-variant-numeric: tabular-nums; }
 .release-progress--failed { color: var(--fonu-error); grid-template-columns: minmax(0, 1fr); }
-.server-detail { display: grid; gap: var(--fonu-space-4); }
-.server-detail__top, .server-detail__section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); }
-.server-detail__top h2 { margin: 0; font-size: 24px; }
-.server-detail__top p { margin: 4px 0 0; color: var(--fonu-text-secondary); font-size: 13px; }
-.server-detail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fonu-space-4); }
-.server-detail__panel { padding: var(--fonu-space-4); border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius-sm); background: var(--fonu-bg); }
-.server-detail__panel h3 { margin: 0 0 var(--fonu-space-4); font-size: 16px; }
-.detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fonu-space-4); }
-.detail-fields--single { grid-template-columns: 1fr; }
-.detail-fields > div { display: grid; gap: 5px; min-width: 0; }
-.detail-fields label, .detail-stats label { color: var(--fonu-text-secondary); font-size: 12px; }
-.detail-fields strong, .detail-fields span { overflow-wrap: anywhere; }
-.detail-subgroup { margin-top: var(--fonu-space-3); padding-top: var(--fonu-space-3); border-top: 1px solid var(--fonu-border); }
-.detail-subgroup__title { margin-bottom: var(--fonu-space-2); font-size: 12px; font-weight: 600; color: var(--fonu-text-secondary); }
-.detail-muted { color: var(--fonu-text-secondary); font-size: 12px; }
-.detail-subgroup { margin-top: var(--fonu-space-3); padding-top: var(--fonu-space-3); border-top: 1px solid var(--fonu-border); }
-.detail-subgroup__title { margin-bottom: var(--fonu-space-2); font-size: 12px; font-weight: 600; color: var(--fonu-text-secondary); }
-.detail-muted { color: var(--fonu-text-secondary); font-size: 12px; }
-.diag-checks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
-.server-detail__location { display: flex; align-items: center; gap: 5px; }
-.detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fonu-space-4); margin-bottom: var(--fonu-space-4); }
-.detail-stats > div { display: grid; gap: 5px; }
-.detail-stats strong { font-size: 20px; color: var(--fonu-success); }
-.server-status-summary { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(110px, 1fr)); align-items: center; gap: var(--fonu-space-4); }
-.server-status-summary__item { display: grid; gap: 6px; min-width: 0; }
-.server-status-summary__item label { color: var(--fonu-text-secondary); font-size: 12px; }
-.server-status-summary__item strong { color: var(--fonu-success); font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
-.server-status-summary__item--state { display: flex; align-items: center; min-height: 28px; padding-right: var(--fonu-space-4); border-right: 1px solid var(--fonu-border); }
-.status-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; margin-top: var(--fonu-space-5); min-height: 36px; }
-.status-bar { position: relative; min-width: 0; height: 36px; border-radius: 4px; background: var(--fonu-bg-muted); cursor: help; outline: none; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
-.status-bar--ok { background: linear-gradient(180deg, color-mix(in srgb, var(--fonu-success) 75%, white), color-mix(in srgb, var(--fonu-success) 48%, white)); }
-.status-bar--failed { background: color-mix(in srgb, var(--fonu-error) 68%, white); }
-.status-bar:hover, .status-bar:focus-visible { z-index: 2; transform: translateY(-2px); filter: brightness(1.1); box-shadow: var(--fonu-shadow-md); }
-.status-bar::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 3; max-width: 240px; padding: 6px 8px; border-radius: 6px; background: var(--fonu-text); color: var(--fonu-surface); font-size: 12px; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 160ms ease, transform 160ms ease; }
-.status-bar::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); z-index: 3; border: 5px solid transparent; border-top-color: var(--fonu-text); pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 160ms ease, transform 160ms ease; }
-.status-bar:hover::after, .status-bar:hover::before, .status-bar:focus-visible::after, .status-bar:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
-.status-bars-empty { display: grid; place-items: center; min-height: 36px; margin-top: var(--fonu-space-5); border: 1px dashed var(--fonu-border); color: var(--fonu-text-muted); font-size: 12px; }
-.status-bars-footer { display: flex; justify-content: space-between; margin-top: var(--fonu-space-3); color: var(--fonu-text-muted); font-size: 12px; }
-.status-bars-footer span:last-child { display: inline-flex; align-items: center; gap: 5px; }
-.status-bars-footer i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--fonu-success) 35%, white); }
 .latency-panel__hint { color: var(--fonu-text-muted); font-size: 12px; }
 .detail-status-meta { display: flex; justify-content: space-between; gap: var(--fonu-space-3); margin: -4px 0 var(--fonu-space-3); color: var(--fonu-text-muted); font-size: 12px; }
 .detail-status-error { color: var(--fonu-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -1550,7 +1478,6 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer)
 .rule-pane__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fonu-space-2); }
 .rule-table-wrap { border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); background: var(--fonu-surface); box-shadow: var(--fonu-shadow); overflow: hidden; padding: var(--fonu-space-2) 0; }
 .frp-rules-table :deep(.table-muted) { color: var(--fonu-text-muted); font-size: 12px; }
-.frp-rules-table :deep(.type-chip) { font-family: var(--fonu-mono); font-size: 12px; color: var(--fonu-brand-text); }
 .frp-rules-table :deep(.mono) { font-family: var(--fonu-mono); font-size: 13px; }
 .frp-rules-table :deep(.text-secondary) { color: var(--fonu-text-secondary); }
 @media (max-width: 1100px) { .frp-layout { grid-template-columns: 1fr; } .server-sidebar__list { max-height: none; } }

web/src/views/ProxyRemoteView.vue

@@ -365,12 +365,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { NButton, NIcon, NPopconfirm, useMessage, type DataTableColumns } from 'naive-ui'
 import {
   CheckmarkCircleOutline, CopyOutline, InformationCircleOutline, LayersOutline, OpenOutline, PulseOutline, RefreshOutline, SwapHorizontalOutline,
 } from '@vicons/ionicons5'
 import EmptyState from '../components/EmptyState.vue'
+import { useVisibilityPolling } from '../composables/useVisibilityPolling'
 import FonuCard from '../components/FonuCard.vue'
 import LoadError from '../components/LoadError.vue'
 import PageHeader from '../components/PageHeader.vue'
@@ -429,7 +430,6 @@ const settingsForm = ref({
 const confModal = ref(false)
 const confDomain = ref('')
 const confContent = ref('')
-let timer: number | undefined
 
 const server = computed(() => servers.value.find((item) => item.id === selectedId.value) ?? null)
 const agentStatusOk = computed(() => statusLoaded.value && agentStatus.value !== null)
@@ -486,6 +486,7 @@ async function load() {
 }
 
 // refreshAll：单个接口失败不再中断整轮，失败项汇总成一句可见提示（原先 loadErrorMsg 从未渲染）
+// 7 个接口彼此独立，并行发：此前串行 await 让每次刷新等于 7 个往返相加
 async function refreshAll(options: { silent?: boolean } = { silent: true }) {
   const current = server.value
   if (!current) return
@@ -496,19 +497,21 @@ async function refreshAll(options: { silent?: boolean } = { silent: true }) {
       failures.push(`${label}${error instanceof Error ? `：${error.message}` : '失败'}`)
     }
   }
-  await track('规则列表', () => api.getFrpAgentRouteCandidates(current.id), (value) => { candidates.value = value })
-  await track('路由文件', () => api.getFrpAgentRoutes(current.id), (value) => { routeDetails.value = value })
-  await track('健康检查', () => api.getFrpAgentRouteHealth(current.id), (value) => { routeHealth.value = value })
-  await track('配置漂移', () => api.getFrpAgentRouteDrift(current.id), (value) => { routeDrift.value = value })
-  await track('证书列表', () => api.listCertificates(), (value) => { certificates.value = value })
-  await track('流量采集', () => api.listFrpProxiesTraffic(), (value) => {
-    proxyTraffic.value = value.items ?? {}
-    trafficErrors.value = value.errors ?? {}
-  })
-  await track('Agent 状态', () => api.getFrpAgentStatus(current.id), (value) => {
-    agentStatus.value = value
-    statusLoaded.value = true
-  })
+  await Promise.all([
+    track('规则列表', () => api.getFrpAgentRouteCandidates(current.id), (value) => { candidates.value = value }),
+    track('路由文件', () => api.getFrpAgentRoutes(current.id), (value) => { routeDetails.value = value }),
+    track('健康检查', () => api.getFrpAgentRouteHealth(current.id), (value) => { routeHealth.value = value }),
+    track('配置漂移', () => api.getFrpAgentRouteDrift(current.id), (value) => { routeDrift.value = value }),
+    track('证书列表', () => api.listCertificates(), (value) => { certificates.value = value }),
+    track('流量采集', () => api.listFrpProxiesTraffic(), (value) => {
+      proxyTraffic.value = value.items ?? {}
+      trafficErrors.value = value.errors ?? {}
+    }),
+    track('Agent 状态', () => api.getFrpAgentStatus(current.id), (value) => {
+      agentStatus.value = value
+      statusLoaded.value = true
+    }),
+  ])
   loadErrorMsg.value = failures.length ? `数据读取不完整 —— ${failures.join('；')}` : ''
   if (options.silent === false) manualRefreshing.value = false
 }
@@ -865,17 +868,14 @@ watch(selectedId, () => {
   void refreshAll({ silent: false })
 })
 
-onMounted(() => {
-  void load()
-  timer = window.setInterval(() => {
-    if (!server.value) return
-    if (document.visibilityState === 'hidden') return // 页面不可见时暂停轮询
-    if (busy.value) return                            // 有操作进行中不叠加轮询
-    void refreshAll()
-  }, 15000)
-})
+// 轮询走 useVisibilityPolling：标签页隐藏时暂停，回到前台补一次
+useVisibilityPolling(() => {
+  if (!server.value) return // 未选服务端时不轮询
+  if (busy.value) return    // 有操作进行中不叠加轮询
+  void refreshAll()
+}, 15000)
 
-onBeforeUnmount(() => { if (timer) window.clearInterval(timer) })
+onMounted(() => { void load() })
 </script>
 
 <style scoped>