+ return (
+
+
+
+
+
+
+
{navMeta?.label ?? ''}
+
{navMeta?.hint}
+
+
+ {statusMeta.line}
+
+ )}
+
+
+
+ {nav === 'network' && (
+
+
+
+ )}
+ {nav === 'proxy' && (
+
+ )}
+ {nav === 'system' && (
+
+
+
+ )}
+
+ {nav === 'record' && (
+
-
-
- {statusMeta.line}
-
{initialLoad && (
@@ -474,6 +545,9 @@ export default function App() {
)}
+
+ )}
+
)
diff --git a/electron/src/renderer/src/NetworkDashboard.tsx b/electron/src/renderer/src/NetworkDashboard.tsx
new file mode 100644
index 0000000..9f63875
--- /dev/null
+++ b/electron/src/renderer/src/NetworkDashboard.tsx
@@ -0,0 +1,204 @@
+import { useCallback, useEffect, useState } from 'react'
+import { apiUrl } from './api'
+
+type SiteInfo = {
+ host: string
+ reachable: boolean
+ latency_ms: number
+ error: string | null
+ resolved_ip: string | null
+ country: string | null
+ country_code: string | null
+ geo_error: string | null
+}
+
+type SpeedBlock = {
+ label: string
+ download_mbps: number | null
+ download_error: string | null
+ download_bytes_sampled: number
+ upload_mbps: number | null
+ upload_error: string | null
+ upload_target: string | null
+}
+
+type NetworkPayload = {
+ google: SiteInfo
+ douyin: SiteInfo
+ routes: { different: boolean | null; note: string }
+ speed: { overseas: SpeedBlock; domestic: SpeedBlock }
+ meta?: { at: number; download_cap_bytes: number; upload_bytes: number }
+ error?: string
+}
+
+function fmtMbps(v: number | null | undefined): string {
+ if (v == null || Number.isNaN(v)) return '—'
+ return `${v.toFixed(2)} Mbps`
+}
+
+function SiteRow({ title, site }: { title: string; site: SiteInfo }) {
+ const ok = site.reachable
+ return (
+
+
+ {title}
+
+ {ok ? '可访问' : '不可访问'}
+
+
+
+ 延迟
+ {site.latency_ms != null ? `${site.latency_ms.toFixed(0)} ms` : '—'}
+ 解析 IP
+ {site.resolved_ip ?? '—'}
+ 地区（参考）
+
+ {site.country ?? '—'}
+ {site.country_code ? ` (${site.country_code})` : ''}
+
+
+ {(site.error || site.geo_error) && (
+
+ {[site.error, site.geo_error].filter(Boolean).join(' · ')}
+
+ )}
+
+ )
+}
+
+export default function NetworkDashboard() {
+ const [data, setData] = useState
(null)
+ const [loading, setLoading] = useState(true)
+ const [err, setErr] = useState(null)
+
+ const load = useCallback(async () => {
+ setLoading(true)
+ setErr(null)
+ try {
+ const res = await fetch(apiUrl('/network_status'))
+ const json = (await res.json()) as NetworkPayload & { error?: string }
+ if (!res.ok) {
+ setErr(json.error || `请求失败 ${res.status}`)
+ setData(null)
+ return
+ }
+ setData(json)
+ } catch (e) {
+ setErr(e instanceof Error ? e.message : String(e))
+ setData(null)
+ } finally {
+ setLoading(false)
+ }
+ }, [])
+
+ useEffect(() => {
+ void load()
+ }, [load])
+
+ useEffect(() => {
+ const id = window.setInterval(() => void load(), 45000)
+ return () => clearInterval(id)
+ }, [load])
+
+ return (
+
+
+
+
+ 网络仪表盘
+
+
+ 检测 Google（偏海外）与抖音（偏国内）是否通畅、解析出口是否像两条线，并估算上下行（采样约 0.6MB
+ 下行 / 256KB 上行）。
+
+
+
+
+ {err}
+
+ )}
+
+ {loading && !data && !err && 正在检测网络…
}
+
+ {data && (
+ <>
+
+
+
+
+
+
+
线路是否像「两条线」
+
+ {data.routes.different === true
+ ? '是（解析国家不同）'
+ : data.routes.different === false
+ ? '否或不确定'
+ : '未知'}
+
+
{data.routes.note}
+
+
网速（估算）
+
+
+
海外
+
+ 下行
+ {fmtMbps(data.speed.overseas.download_mbps)}
+
+
+ 上行
+ {fmtMbps(data.speed.overseas.upload_mbps)}
+
+ {(data.speed.overseas.download_error || data.speed.overseas.upload_error) && (
+
+ {[data.speed.overseas.download_error, data.speed.overseas.upload_error]
+ .filter(Boolean)
+ .join(' · ')}
+
+ )}
+
+
+
国内
+
+ 下行
+ {fmtMbps(data.speed.domestic.download_mbps)}
+
+
+ 上行
+ {fmtMbps(data.speed.domestic.upload_mbps)}
+
+ {(data.speed.domestic.download_error || data.speed.domestic.upload_error) && (
+
+ {[data.speed.domestic.download_error, data.speed.domestic.upload_error]
+ .filter(Boolean)
+ .join(' · ')}
+
+ )}
+
+
+
+ 上行若失败多为网站不接受测试流量，不代表您无法上传直播；海外项走 Google / httpbin，国内项走抖音首页流与门户
+ POST。
+
+
+ 录制专用代理（不改系统网络）
+
+
+ 仅对本软件拉起的 FFmpeg / 录制进程生效，不会修改 Windows
+ 系统代理。若你使用 Clash Verge 等，请在本机开启「混合端口」后，把地址填成与之一致（常见为 7890）。
+ YouTube RTMP 推流若仍失败，可能需要代理软件开启 TUN 或自行调整规则。
+
+ {loading ? (
+ 正在读取配置…
+ ) : (
+
+
+
+
setCfg((c) => ({ ...c, http: e.target.value }))}
+ autoComplete="off"
+ />
+
+
setCfg((c) => ({ ...c, socks: e.target.value }))}
+ autoComplete="off"
+ />
+
+
+
+
+ {msg &&
{msg}
}
+
+ 本机负载与网速
+
+
+ 网速为全机所有网卡合计的估算值（首次刷新可能无速率，约 2 秒后出现）。下方列出当前检测到的
+ ffmpeg 进程。
+
+ {err && (
+
+ {err}
+
+ )}
+ {!data && !err && 正在读取…
}
+ {data && (
+
+
+
CPU
+
+ {data.cpu_percent != null ? `${data.cpu_percent.toFixed(1)}%` : '—'}
+
+
逻辑处理器 {data.cpu_count_logical ?? '—'} 个
+
+
+
内存
+
{m?.percent != null ? `${m.percent.toFixed(1)}%` : '—'}
+
+ {fmtBytes(m?.used)} / {fmtBytes(m?.total)}（可用 {fmtBytes(m?.available)}）
+
+
+
+
全机网速
+
+ ↑ {net?.up_mbps != null ? `${net.up_mbps.toFixed(2)} Mbps` : '—'}
+ ↓ {net?.down_mbps != null ? `${net.down_mbps.toFixed(2)} Mbps` : '—'}
+
+
含所有网卡收发合计
+
+
+ 交换分区 {data.swap.percent != null ? `${data.swap.percent.toFixed(0)}%` : '—'} ·{' '}
+ {fmtBytes(data.swap.used)} / {fmtBytes(data.swap.total)}
+
+ )}
+ {data?.disks && data.disks.length > 0 && (
+
+
磁盘空间
+
+ {data.disks.slice(0, 8).map((d) => (
+ -
+ {d.mountpoint}
+
+ {d.percent != null ? `${d.percent.toFixed(0)}%` : '—'} 已用 · 剩余 {fmtBytes(d.free)}
+
+
+ ))}
+
+
+
ffmpeg 进程
+
+
+
+ | PID |
+ 名称 |
+ 内存 |
+
+
+
+ {data.ffmpeg_processes.map((p) => (
+
+ | {p.pid} |
+ {p.name} |
+ {fmtBytes(p.rss)} |
+
+ ))}
+
+
+