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/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