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 <realakayuki@gmail.com>

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<bool>,
 
+    /// pause render traffic stats on blur
+    pub pause_render_traffic_stats_on_blur: Option<bool>,
+
     /// common tray icon
     #[serde(skip_serializing_if = "Option::is_none")]
     pub common_tray_icon: Option<bool>,
@@ -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);

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) => {

src/components/setting/mods/layout-viewer.tsx

@@ -189,6 +189,28 @@ export const LayoutViewer = forwardRef<DialogRef>((_, ref) => {
           </GuardState>
         </Item>
 
+        <Item>
+          <ListItemText
+            primary={t(
+              'settings.components.verge.layout.fields.pauseRenderTrafficStatsOnBlur',
+            )}
+          />
+          <GuardState
+            value={verge?.pause_render_traffic_stats_on_blur ?? true}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) =>
+              onChangeData({ pause_render_traffic_stats_on_blur: e })
+            }
+            onGuard={(e) =>
+              patchVerge({ pause_render_traffic_stats_on_blur: e })
+            }
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </Item>
+
         <Item>
           <ListItemText
             primary={t('settings.components.verge.layout.fields.toastPosition')}

src/locales/ar/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "أيقونة شريط المهام لوكيل النظام",
           "tunTrayIcon": "أيقونة شريط المهام لـ TUN",
           "enableTrayIcon": "Enable Tray Icon",
-          "enableTraySpeed": "تفعيل سرعة التراي"
+          "enableTraySpeed": "تفعيل سرعة التراي",
+          "pauseRenderTrafficStatsOnBlur": "إيقاف عرض إحصاءات حركة المرور مؤقتًا عند فقدان التركيز"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/de/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "Systemproxy-Tray-Symbol",
           "tunTrayIcon": "TUN-Modus-Tray-Symbol",
           "enableTrayIcon": "Tray-Symbol aktivieren",
-          "enableTraySpeed": "Tray-Geschwindigkeit aktivieren"
+          "enableTraySpeed": "Tray-Geschwindigkeit aktivieren",
+          "pauseRenderTrafficStatsOnBlur": "Rendering der Verkehrsstatistiken bei Fokusverlust pausieren"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/en/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "System Proxy Tray Icon",
           "tunTrayIcon": "Tun Tray Icon",
           "enableTrayIcon": "Enable Tray Icon",
-          "enableTraySpeed": "Enable Tray Speed"
+          "enableTraySpeed": "Enable Tray Speed",
+          "pauseRenderTrafficStatsOnBlur": "Pause rendering traffic statistics when blurred"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/es/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "Icono de bandeja del proxy del sistema",
           "tunTrayIcon": "Icono de bandeja del modo TUN",
           "enableTrayIcon": "Habilitar icono de la bandeja",
-          "enableTraySpeed": "Habilitar velocidad en la bandeja"
+          "enableTraySpeed": "Habilitar velocidad en la bandeja",
+          "pauseRenderTrafficStatsOnBlur": "Pausar el renderizado de estadísticas de tráfico al perder el foco"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/fa/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "آیکون سینی پراکسی سیستم",
           "tunTrayIcon": "آیکون سینی Tun",
           "enableTrayIcon": "Enable Tray Icon",
-          "enableTraySpeed": "فعال کردن سرعت ترای"
+          "enableTraySpeed": "فعال کردن سرعت ترای",
+          "pauseRenderTrafficStatsOnBlur": "توقف رندر آمار ترافیک هنگام از دست رفتن فوکوس"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/id/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "Ikon Tray Proksi Sistem",
           "tunTrayIcon": "Ikon Tray Tun",
           "enableTrayIcon": "Enable Tray Icon",
-          "enableTraySpeed": "Aktifkan Tray Speed"
+          "enableTraySpeed": "Aktifkan Tray Speed",
+          "pauseRenderTrafficStatsOnBlur": "Jeda render statistik lalu lintas saat jendela tidak fokus"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/jp/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "システムプロキシトレイアイコン",
           "tunTrayIcon": "TUNモードトレイアイコン",
           "enableTrayIcon": "トレイアイコンを有効にする",
-          "enableTraySpeed": "トレイの速度表示を有効にする"
+          "enableTraySpeed": "トレイの速度表示を有効にする",
+          "pauseRenderTrafficStatsOnBlur": "フォーカスを失ったときにトラフィック統計の描画を一時停止"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/ko/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "시스템 프록시 트레이 아이콘",
           "tunTrayIcon": "TUN 트레이 아이콘",
           "enableTrayIcon": "트레이 아이콘 사용",
-          "enableTraySpeed": "트레이 속도 표시 사용"
+          "enableTraySpeed": "트레이 속도 표시 사용",
+          "pauseRenderTrafficStatsOnBlur": "포커스를 잃으면 트래픽 통계 렌더링 일시 중지"
         },
         "tooltips": {
           "hoverNavigator": "알파벳에 마우스를 올리면 해당 프록시 그룹으로 자동 스크롤합니다",

src/locales/ru/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "Значок системного прокси в трее",
           "tunTrayIcon": "Значок TUN в трее",
           "enableTrayIcon": "Показывать значок в трее",
-          "enableTraySpeed": "Показывать скорость в трее"
+          "enableTraySpeed": "Показывать скорость в трее",
+          "pauseRenderTrafficStatsOnBlur": "При потере фокуса приостанавливать отрисовку статистики трафика"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/tr/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "Sistem Vekil Tepsi Simgesi",
           "tunTrayIcon": "Tun Tepsi Simgesi",
           "enableTrayIcon": "Tepsi Simgesini Etkinleştir",
-          "enableTraySpeed": "Tepsi Hızını Etkinleştir"
+          "enableTraySpeed": "Tepsi Hızını Etkinleştir",
+          "pauseRenderTrafficStatsOnBlur": "Odak kaybolduğunda trafik istatistiklerinin işlenmesini duraklat"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/tt/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "Системалы прокси иконкасы",
           "tunTrayIcon": "Tun (виртуаль адаптер) иконкасы",
           "enableTrayIcon": "Enable Tray Icon",
-          "enableTraySpeed": "Трей скоростьне үстерү"
+          "enableTraySpeed": "Трей скоростьне үстерү",
+          "pauseRenderTrafficStatsOnBlur": "Фокус югалганда трафик статистикасын сызуны туктатып тору"
         },
         "tooltips": {
           "hoverNavigator": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",

src/locales/zh/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "系统代理托盘图标",
           "tunTrayIcon": "TUN 模式托盘图标",
           "enableTrayIcon": "启用托盘图标",
-          "enableTraySpeed": "启用托盘速率"
+          "enableTraySpeed": "启用托盘速率",
+          "pauseRenderTrafficStatsOnBlur": "失去焦点时暂停渲染流量统计"
         },
         "tooltips": {
           "hoverNavigator": "鼠标悬停在字母上时自动滚动到对应代理组",

src/locales/zhtw/settings.json

@@ -240,7 +240,8 @@
           "systemProxyTrayIcon": "系統代理系統匣圖示",
           "tunTrayIcon": "虛擬網路介面卡模式系統匣圖示",
           "enableTrayIcon": "啟用系統匣圖示",
-          "enableTraySpeed": "啟用系統匣速率"
+          "enableTraySpeed": "啟用系統匣速率",
+          "pauseRenderTrafficStatsOnBlur": "失去焦點時暫停渲染流量統計"
         },
         "tooltips": {
           "hoverNavigator": "滑鼠懸停在字母上時自動捲動到對應代理組",

src/types/generated/i18n-keys.ts

@@ -458,6 +458,7 @@ export const translationKeys = [
   'settings.components.verge.layout.fields.tunTrayIcon',
   'settings.components.verge.layout.fields.enableTrayIcon',
   'settings.components.verge.layout.fields.enableTraySpeed',
+  'settings.components.verge.layout.fields.pauseRenderTrafficStatsOnBlur',
   'settings.components.verge.layout.tooltips.hoverNavigator',
   'settings.components.verge.layout.tooltips.hoverNavigatorDelay',
   'settings.components.verge.layout.options.icon.monochrome',

src/types/generated/i18n-resources.ts

@@ -625,6 +625,7 @@ export interface TranslationResources {
               hoverNavigatorDelay: string
               memoryUsage: string
               navIcon: string
+              pauseRenderTrafficStatsOnBlur: string
               preferSystemTitlebar: string
               proxyGroupIcon: string
               proxyGroupsDisplayMode: string

src/types/global.d.ts

@@ -904,6 +904,7 @@ interface IVergeConfig {
   traffic_graph?: boolean
   enable_memory_usage?: boolean
   enable_group_icon?: boolean
+  pause_render_traffic_stats_on_blur?: boolean
   menu_icon?: 'monochrome' | 'colorful' | 'disable'
   menu_order?: string[]
   notice_position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'