From 4ceb7e6043efb87fc075c8d7a1696ef0f9f8d081 Mon Sep 17 00:00:00 2001 From: wysha-object <152023695+wysha-object@users.noreply.github.com> Date: Mon, 16 Mar 2026 16:17:12 +0800 Subject: [PATCH] feat: Allow toggling pause of traffic stats animation on blur (#6463) * feat: Allow toggling pause of traffic stats animation on blur * fix: React Hook useCallback has a missing dependency * chore: i18n --------- Co-authored-by: Slinetrac --- src-tauri/src/config/verge.rs | 5 +++++ .../home/enhanced-canvas-traffic-graph.tsx | 20 ++++++++++++----- src/components/setting/mods/layout-viewer.tsx | 22 +++++++++++++++++++ src/locales/ar/settings.json | 3 ++- src/locales/de/settings.json | 3 ++- src/locales/en/settings.json | 3 ++- src/locales/es/settings.json | 3 ++- src/locales/fa/settings.json | 3 ++- src/locales/id/settings.json | 3 ++- src/locales/jp/settings.json | 3 ++- src/locales/ko/settings.json | 3 ++- src/locales/ru/settings.json | 3 ++- src/locales/tr/settings.json | 3 ++- src/locales/tt/settings.json | 3 ++- src/locales/zh/settings.json | 3 ++- src/locales/zhtw/settings.json | 3 ++- src/types/generated/i18n-keys.ts | 1 + src/types/generated/i18n-resources.ts | 1 + src/types/global.d.ts | 1 + 19 files changed, 71 insertions(+), 18 deletions(-) diff --git a/src-tauri/src/config/verge.rs b/src-tauri/src/config/verge.rs index 7f9bcd9e5..1f0952859 100644 --- a/src-tauri/src/config/verge.rs +++ b/src-tauri/src/config/verge.rs @@ -49,6 +49,9 @@ pub struct IVerge { #[serde(skip_serializing_if = "Option::is_none")] pub enable_group_icon: Option, + /// pause render traffic stats on blur + pub pause_render_traffic_stats_on_blur: Option, + /// common tray icon #[serde(skip_serializing_if = "Option::is_none")] pub common_tray_icon: Option, @@ -391,6 +394,7 @@ impl IVerge { traffic_graph: Some(true), enable_memory_usage: Some(true), enable_group_icon: Some(true), + pause_render_traffic_stats_on_blur: Some(true), #[cfg(target_os = "macos")] tray_icon: Some("monochrome".into()), menu_icon: Some("monochrome".into()), @@ -478,6 +482,7 @@ impl IVerge { patch!(traffic_graph); patch!(enable_memory_usage); patch!(enable_group_icon); + patch!(pause_render_traffic_stats_on_blur); #[cfg(target_os = "macos")] patch!(tray_icon); patch!(menu_icon); diff --git a/src/components/home/enhanced-canvas-traffic-graph.tsx b/src/components/home/enhanced-canvas-traffic-graph.tsx index a3d7dd992..3b0a1ded1 100644 --- a/src/components/home/enhanced-canvas-traffic-graph.tsx +++ b/src/components/home/enhanced-canvas-traffic-graph.tsx @@ -13,6 +13,7 @@ import { import { useTranslation } from 'react-i18next' import { useTrafficGraphDataEnhanced } from '@/hooks/use-traffic-monitor' +import { useVerge } from '@/hooks/use-verge' import { debugLog } from '@/utils/debug' import parseTraffic from '@/utils/parse-traffic' @@ -105,6 +106,9 @@ export const EnhancedCanvasTrafficGraph = memo( }: EnhancedCanvasTrafficGraphProps) { const theme = useTheme() const { t } = useTranslation() + const verge = useVerge() + const pause_render_traffic_stats_on_blur = + verge.verge?.pause_render_traffic_stats_on_blur ?? true // 使用增强版全局流量数据管理 const { dataPoints, requestRange, samplerStats } = @@ -227,7 +231,7 @@ export const EnhancedCanvasTrafficGraph = memo( const highResNow = getNow() lastRenderTimeRef.current = highResNow - if (focused) { + if (focused || !pause_render_traffic_stats_on_blur) { resumeCooldownRef.current = Date.now() const controller = fpsControllerRef.current const resumeTarget = Math.max( @@ -242,7 +246,7 @@ export const EnhancedCanvasTrafficGraph = memo( resumeCooldownRef.current = 0 } }, - [setIsWindowFocused, setCurrentFPS], + [setIsWindowFocused, setCurrentFPS, pause_render_traffic_stats_on_blur], ) useEffect(() => { @@ -985,7 +989,7 @@ export const EnhancedCanvasTrafficGraph = memo( // 受控的动画循环 useEffect(() => { if ( - !isWindowFocused || + (!isWindowFocused && pause_render_traffic_stats_on_blur) || displayData.length === 0 || dataStaleRef.current ) { @@ -998,7 +1002,7 @@ export const EnhancedCanvasTrafficGraph = memo( } const animate = (currentTime: number) => { - if (!isWindowFocusedRef.current) { + if (!isWindowFocusedRef.current && pause_render_traffic_stats_on_blur) { lastRenderTimeRef.current = getNow() animationFrameRef.current = undefined return @@ -1046,7 +1050,13 @@ export const EnhancedCanvasTrafficGraph = memo( animationFrameRef.current = undefined } } - }, [drawGraph, displayData.length, isWindowFocused, collectFrameSample]) + }, [ + drawGraph, + displayData.length, + isWindowFocused, + pause_render_traffic_stats_on_blur, + collectFrameSample, + ]) // 切换时间范围 const handleTimeRangeClick = useCallback((event: React.MouseEvent) => { diff --git a/src/components/setting/mods/layout-viewer.tsx b/src/components/setting/mods/layout-viewer.tsx index cc8f91a1b..e96ffa631 100644 --- a/src/components/setting/mods/layout-viewer.tsx +++ b/src/components/setting/mods/layout-viewer.tsx @@ -189,6 +189,28 @@ export const LayoutViewer = forwardRef((_, ref) => { + + + + onChangeData({ pause_render_traffic_stats_on_blur: e }) + } + onGuard={(e) => + patchVerge({ pause_render_traffic_stats_on_blur: e }) + } + > + + + +