feat: add configurable hover jump navigator delay (#5178)

* fix: hover options

* feat: add configurable hover jump navigator delay

- Added `hover_jump_navigator_delay` to Verge config defaults, patch flow, and response payload for persistent app-wide settings.
- Made proxy navigator respect configurable delay via `DEFAULT_HOVER_DELAY` and new `hoverDelay` prop.
- Threaded stored delay through proxy list so hover scrolling uses Verge-configured value.
- Added "Hover Jump Navigator Delay" control in Layout settings with clamped numeric input, tooltip, and toggle-aware disabling.
- Localized new labels in English, Simplified Chinese, and Traditional Chinese.
- Extended frontend Verge config type to include delay field for type-safe access.

* docs: UPDATELOG.md

UPDATELOG.md

@@ -39,6 +39,7 @@
 - 卸载 TUN 时会先关闭
 - 优化应用启动页
 - 优化首页当前节点对 MATCH 规则的支持
+- 允许在 `界面设置` 修改 `悬浮跳转导航延迟`
 
 ### 🐞 修复问题
 

src-tauri/src/config/verge.rs

@@ -217,6 +217,9 @@ pub struct IVerge {
     /// 启用代理页面自动滚动
     pub enable_hover_jump_navigator: Option<bool>,
 
+    /// 代理页面自动滚动延迟（毫秒）
+    pub hover_jump_navigator_delay: Option<u64>,
+
     /// 启用外部控制器
     pub enable_external_controller: Option<bool>,
 }
@@ -387,6 +390,7 @@ impl IVerge {
             enable_auto_launch: Some(false),
             enable_silent_start: Some(false),
             enable_hover_jump_navigator: Some(true),
+            hover_jump_navigator_delay: Some(280),
             enable_system_proxy: Some(false),
             proxy_auto_config: Some(false),
             pac_file_content: Some(DEFAULT_PAC.into()),
@@ -468,6 +472,7 @@ impl IVerge {
         patch!(enable_auto_launch);
         patch!(enable_silent_start);
         patch!(enable_hover_jump_navigator);
+        patch!(hover_jump_navigator_delay);
         #[cfg(not(target_os = "windows"))]
         patch!(verge_redir_port);
         #[cfg(not(target_os = "windows"))]
@@ -610,6 +615,7 @@ pub struct IVergeResponse {
     pub enable_dns_settings: Option<bool>,
     pub home_cards: Option<serde_json::Value>,
     pub enable_hover_jump_navigator: Option<bool>,
+    pub hover_jump_navigator_delay: Option<u64>,
     pub enable_external_controller: Option<bool>,
 }
 
@@ -686,6 +692,7 @@ impl From<IVerge> for IVergeResponse {
             enable_dns_settings: verge.enable_dns_settings,
             home_cards: verge.home_cards,
             enable_hover_jump_navigator: verge.enable_hover_jump_navigator,
+            hover_jump_navigator_delay: verge.hover_jump_navigator_delay,
             enable_external_controller: verge.enable_external_controller,
         }
     }

src/components/proxy/proxy-group-navigator.tsx

@@ -1,11 +1,15 @@
 import { Box, Button, Tooltip } from "@mui/material";
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 interface ProxyGroupNavigatorProps {
   proxyGroupNames: string[];
   onGroupLocation: (groupName: string) => void;
+  enableHoverJump?: boolean;
+  hoverDelay?: number;
 }
 
+export const DEFAULT_HOVER_DELAY = 280;
+
 // 提取代理组名的第一个字符
 const getGroupDisplayChar = (groupName: string): string => {
   if (!groupName) return "?";
@@ -18,28 +22,58 @@ const getGroupDisplayChar = (groupName: string): string => {
 export const ProxyGroupNavigator = ({
   proxyGroupNames,
   onGroupLocation,
+  enableHoverJump = true,
+  hoverDelay = DEFAULT_HOVER_DELAY,
 }: ProxyGroupNavigatorProps) => {
   const lastHoveredRef = useRef<string | null>(null);
+  const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const hoverDelayMs = hoverDelay >= 0 ? hoverDelay : 0;
+
+  const clearHoverTimer = useCallback(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enableHoverJump) {
+      clearHoverTimer();
+      lastHoveredRef.current = null;
+    }
+    return () => {
+      clearHoverTimer();
+    };
+  }, [clearHoverTimer, enableHoverJump]);
 
   const handleGroupClick = useCallback(
     (groupName: string) => {
+      clearHoverTimer();
+      lastHoveredRef.current = groupName;
       onGroupLocation(groupName);
     },
-    [onGroupLocation],
+    [clearHoverTimer, onGroupLocation],
   );
 
   const handleGroupHover = useCallback(
     (groupName: string) => {
+      if (!enableHoverJump) return;
       if (lastHoveredRef.current === groupName) return;
+      clearHoverTimer();
+      hoverTimerRef.current = setTimeout(() => {
+        hoverTimerRef.current = null;
         lastHoveredRef.current = groupName;
         onGroupLocation(groupName);
+      }, hoverDelayMs);
     },
-    [onGroupLocation],
+    [clearHoverTimer, enableHoverJump, hoverDelayMs, onGroupLocation],
   );
 
   const handleButtonLeave = useCallback(() => {
+    clearHoverTimer();
     lastHoveredRef.current = null;
-  }, []);
+  }, [clearHoverTimer]);
 
   // 处理代理组数据，去重和排序
   const processedGroups = useMemo(() => {
@@ -84,6 +118,7 @@ export const ProxyGroupNavigator = ({
             onMouseEnter={() => handleGroupHover(name)}
             onFocus={() => handleGroupHover(name)}
             onMouseLeave={handleButtonLeave}
+            onBlur={handleButtonLeave}
             sx={{
               minWidth: 28,
               minHeight: 28,

src/components/proxy/proxy-groups.tsx

@@ -25,7 +25,10 @@ import { BaseEmpty } from "../base";
 import { ScrollTopButton } from "../layout/scroll-top-button";
 
 import { ProxyChain } from "./proxy-chain";
-import { ProxyGroupNavigator } from "./proxy-group-navigator";
+import {
+  ProxyGroupNavigator,
+  DEFAULT_HOVER_DELAY,
+} from "./proxy-group-navigator";
 import { ProxyRender } from "./proxy-render";
 import { useRenderList } from "./use-render-list";
 
@@ -515,11 +518,13 @@ export const ProxyGroups = (props: Props) => {
           anchorEl={ruleMenuAnchor}
           open={Boolean(ruleMenuAnchor)}
           onClose={handleGroupMenuClose}
-          PaperProps={{
+          slotProps={{
+            paper: {
               sx: {
                 maxHeight: 300,
                 minWidth: 200,
               },
+            },
           }}
         >
           {availableGroups.map((group: any) => (
@@ -569,6 +574,8 @@ export const ProxyGroups = (props: Props) => {
         <ProxyGroupNavigator
           proxyGroupNames={proxyGroupNames}
           onGroupLocation={handleGroupLocationByName}
+          enableHoverJump={verge?.enable_hover_jump_navigator ?? true}
+          hoverDelay={verge?.hover_jump_navigator_delay ?? DEFAULT_HOVER_DELAY}
         />
       )}
 

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

@@ -1,11 +1,13 @@
 import {
   Box,
   Button,
+  InputAdornment,
   List,
   ListItem,
   ListItemText,
   MenuItem,
   Select,
+  TextField,
   styled,
 } from "@mui/material";
 import { convertFileSrc } from "@tauri-apps/api/core";
@@ -17,6 +19,7 @@ import { useTranslation } from "react-i18next";
 
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { DEFAULT_HOVER_DELAY } from "@/components/proxy/proxy-group-navigator";
 import { useVerge } from "@/hooks/use-verge";
 import { useWindowDecorations } from "@/hooks/use-window";
 import { copyIconFile, getAppDir } from "@/services/cmds";
@@ -27,6 +30,13 @@ import { GuardState } from "./guard-state";
 
 const OS = getSystem();
 
+const clampHoverDelay = (value: number) => {
+  if (!Number.isFinite(value)) {
+    return DEFAULT_HOVER_DELAY;
+  }
+  return Math.min(5000, Math.max(0, Math.round(value)));
+};
+
 const getIcons = async (icon_dir: string, name: string) => {
   const updateTime = localStorage.getItem(`icon_${name}_update_time`) || "";
 
@@ -39,7 +49,7 @@ const getIcons = async (icon_dir: string, name: string) => {
   };
 };
 
-export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
+export const LayoutViewer = forwardRef<DialogRef>((_, ref) => {
   const { t } = useTranslation();
   const { verge, patchVerge, mutateVerge } = useVerge();
 
@@ -192,6 +202,59 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           </GuardState>
         </Item>
 
+        <Item>
+          <ListItemText
+            primary={
+              <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                <span>{t("Hover Jump Navigator Delay")}</span>
+                <TooltipIcon
+                  title={t("Hover Jump Navigator Delay Info")}
+                  sx={{ opacity: "0.7" }}
+                />
+              </Box>
+            }
+          />
+          <GuardState
+            value={verge?.hover_jump_navigator_delay ?? DEFAULT_HOVER_DELAY}
+            waitTime={400}
+            onCatch={onError}
+            onFormat={(e: any) => clampHoverDelay(Number(e.target.value))}
+            onChange={(value) =>
+              onChangeData({
+                hover_jump_navigator_delay: clampHoverDelay(value),
+              })
+            }
+            onGuard={(value) =>
+              patchVerge({ hover_jump_navigator_delay: clampHoverDelay(value) })
+            }
+          >
+            <TextField
+              type="number"
+              size="small"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              sx={{ width: 120 }}
+              disabled={!(verge?.enable_hover_jump_navigator ?? true)}
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      {t("millis")}
+                    </InputAdornment>
+                  ),
+                },
+                htmlInput: {
+                  min: 0,
+                  max: 5000,
+                  step: 20,
+                },
+              }}
+            />
+          </GuardState>
+        </Item>
+
         <Item>
           <ListItemText primary={t("Nav Icon")} />
           <GuardState

src/locales/en.json

@@ -284,6 +284,8 @@
   "Silent Start Info": "Start the program in background mode without displaying the panel",
   "Hover Jump Navigator": "Hover Jump Navigator",
   "Hover Jump Navigator Info": "Automatically scroll to the corresponding proxy group when hovering over alphabet letters",
+  "Hover Jump Navigator Delay": "Hover Jump Navigator Delay",
+  "Hover Jump Navigator Delay Info": "Delay before auto scrolling when hovering, in milliseconds",
   "TG Channel": "Telegram Channel",
   "Manual": "Manual",
   "Github Repo": "Github Repo",

src/locales/zh.json

@@ -284,6 +284,8 @@
   "Silent Start Info": "程序启动时以后台模式运行，不显示程序面板",
   "Hover Jump Navigator": "悬浮跳转导航",
   "Hover Jump Navigator Info": "鼠标悬停在字母上时自动滚动到对应代理组",
+  "Hover Jump Navigator Delay": "悬浮跳转导航延迟",
+  "Hover Jump Navigator Delay Info": "鼠标悬停后触发自动跳转前等待的毫秒数",
   "TG Channel": "Telegram 频道",
   "Manual": "使用手册",
   "Github Repo": "GitHub 项目地址",

src/locales/zhtw.json

@@ -312,6 +312,10 @@
   "Memory Usage": "內核佔用",
   "Memory Cleanup": "點擊清理內存",
   "Proxy Group Icon": "代理組圖標",
+  "Hover Jump Navigator": "懸浮跳轉導航",
+  "Hover Jump Navigator Info": "滑鼠懸停在字母上時自動捲動到對應代理群組",
+  "Hover Jump Navigator Delay": "懸浮跳轉導航延遲",
+  "Hover Jump Navigator Delay Info": "滑鼠懸停後觸發自動跳轉前等待的毫秒數",
   "Nav Icon": "導航欄圖標",
   "Monochrome": "單色圖標",
   "Colorful": "彩色圖標",

src/services/types.d.ts

@@ -862,6 +862,7 @@ interface IVergeConfig {
   webdav_password?: string;
   home_cards?: Record<string, boolean>;
   enable_hover_jump_navigator?: boolean;
+  hover_jump_navigator_delay?: number;
   enable_external_controller?: boolean;
 }