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
This commit is contained in:
Sline
2025-10-23 13:14:01 +08:00
committed by GitHub
parent 9ea9704bbf
commit 8657cedca0
9 changed files with 135 additions and 13 deletions
+41 -6
View File
@@ -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,