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
2025-10-23 13:14:01 +08:00
parent 9ea9704bbf
commit 8657cedca0
9 changed files with 135 additions and 13 deletions
--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -38,7 +38,8 @@
 - 启用 TUN 前等待服务就绪
 - 卸载 TUN 时会先关闭
 - 优化应用启动页
- 优化首页当前节点对MATCH规则的支持
+- 优化首页当前节点对 MATCH 规则的支持
+- 允许在 `界面设置` 修改 `悬浮跳转导航延迟`

 ### 🐞 修复问题

--- a/src-tauri/src/config/verge.rs
+++ b/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,
        }
    }
--- a/src/components/proxy/proxy-group-navigator.tsx
+++ b/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;
-      lastHoveredRef.current = groupName;
-      onGroupLocation(groupName);
+      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,
--- a/src/components/proxy/proxy-groups.tsx
+++ b/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,10 +518,12 @@ export const ProxyGroups = (props: Props) => {
          anchorEl={ruleMenuAnchor}
          open={Boolean(ruleMenuAnchor)}
          onClose={handleGroupMenuClose}
-          PaperProps={{
-            sx: {
-              maxHeight: 300,
-              minWidth: 200,
+          slotProps={{
+            paper: {
+              sx: {
+                maxHeight: 300,
+                minWidth: 200,
+              },
            },
          }}
        >
@@ -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}
        />
      )}

--- a/src/components/setting/mods/layout-viewer.tsx
+++ b/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
--- a/src/locales/en.json
+++ b/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",
--- a/src/locales/zh.json
+++ b/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 项目地址",
--- a/src/locales/zhtw.json
+++ b/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": "彩色圖標",
--- a/src/services/types.d.ts
+++ b/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;
 }