fix: hover jump navigator
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { Box, Button, Tooltip } from "@mui/material";
|
import { Box, Button, Tooltip } from "@mui/material";
|
||||||
import { useCallback, useMemo } from "react";
|
import { useCallback, useMemo, useRef } from "react";
|
||||||
|
|
||||||
interface ProxyGroupNavigatorProps {
|
interface ProxyGroupNavigatorProps {
|
||||||
proxyGroupNames: string[];
|
proxyGroupNames: string[];
|
||||||
@@ -19,6 +19,8 @@ export const ProxyGroupNavigator = ({
|
|||||||
proxyGroupNames,
|
proxyGroupNames,
|
||||||
onGroupLocation,
|
onGroupLocation,
|
||||||
}: ProxyGroupNavigatorProps) => {
|
}: ProxyGroupNavigatorProps) => {
|
||||||
|
const lastHoveredRef = useRef<string | null>(null);
|
||||||
|
|
||||||
const handleGroupClick = useCallback(
|
const handleGroupClick = useCallback(
|
||||||
(groupName: string) => {
|
(groupName: string) => {
|
||||||
onGroupLocation(groupName);
|
onGroupLocation(groupName);
|
||||||
@@ -26,6 +28,19 @@ export const ProxyGroupNavigator = ({
|
|||||||
[onGroupLocation],
|
[onGroupLocation],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleGroupHover = useCallback(
|
||||||
|
(groupName: string) => {
|
||||||
|
if (lastHoveredRef.current === groupName) return;
|
||||||
|
lastHoveredRef.current = groupName;
|
||||||
|
onGroupLocation(groupName);
|
||||||
|
},
|
||||||
|
[onGroupLocation],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleButtonLeave = useCallback(() => {
|
||||||
|
lastHoveredRef.current = null;
|
||||||
|
}, []);
|
||||||
|
|
||||||
// 处理代理组数据,去重和排序
|
// 处理代理组数据,去重和排序
|
||||||
const processedGroups = useMemo(() => {
|
const processedGroups = useMemo(() => {
|
||||||
return proxyGroupNames
|
return proxyGroupNames
|
||||||
@@ -66,6 +81,9 @@ export const ProxyGroupNavigator = ({
|
|||||||
size="small"
|
size="small"
|
||||||
variant="text"
|
variant="text"
|
||||||
onClick={() => handleGroupClick(name)}
|
onClick={() => handleGroupClick(name)}
|
||||||
|
onMouseEnter={() => handleGroupHover(name)}
|
||||||
|
onFocus={() => handleGroupHover(name)}
|
||||||
|
onMouseLeave={handleButtonLeave}
|
||||||
sx={{
|
sx={{
|
||||||
minWidth: 28,
|
minWidth: 28,
|
||||||
minHeight: 28,
|
minHeight: 28,
|
||||||
|
|||||||
@@ -13,16 +13,12 @@ import { useLockFn } from "ahooks";
|
|||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
|
import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
|
||||||
import useSWR from "swr";
|
|
||||||
import { delayGroup, healthcheckProxyProvider } from "tauri-plugin-mihomo-api";
|
import { delayGroup, healthcheckProxyProvider } from "tauri-plugin-mihomo-api";
|
||||||
|
|
||||||
import { useProxySelection } from "@/hooks/use-proxy-selection";
|
import { useProxySelection } from "@/hooks/use-proxy-selection";
|
||||||
import { useVerge } from "@/hooks/use-verge";
|
import { useVerge } from "@/hooks/use-verge";
|
||||||
import { useAppData } from "@/providers/app-data-context";
|
import { useAppData } from "@/providers/app-data-context";
|
||||||
import {
|
import { updateProxyChainConfigInRuntime } from "@/services/cmds";
|
||||||
getRuntimeConfig,
|
|
||||||
updateProxyChainConfigInRuntime,
|
|
||||||
} from "@/services/cmds";
|
|
||||||
import delayManager from "@/services/delay";
|
import delayManager from "@/services/delay";
|
||||||
|
|
||||||
import { BaseEmpty } from "../base";
|
import { BaseEmpty } from "../base";
|
||||||
@@ -347,22 +343,6 @@ export const ProxyGroups = (props: Props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取运行时配置
|
|
||||||
const { data: runtimeConfig } = useSWR("getRuntimeConfig", getRuntimeConfig, {
|
|
||||||
revalidateOnFocus: false,
|
|
||||||
revalidateIfStale: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取所有代理组名称
|
|
||||||
const getProxyGroupNames = useCallback(() => {
|
|
||||||
const config = runtimeConfig as any;
|
|
||||||
if (!config?.["proxy-groups"]) return [];
|
|
||||||
|
|
||||||
return config["proxy-groups"]
|
|
||||||
.map((group: any) => group.name)
|
|
||||||
.filter((name: string) => name && name.trim() !== "");
|
|
||||||
}, [runtimeConfig]);
|
|
||||||
|
|
||||||
// 定位到指定的代理组
|
// 定位到指定的代理组
|
||||||
const handleGroupLocationByName = useCallback(
|
const handleGroupLocationByName = useCallback(
|
||||||
(groupName: string) => {
|
(groupName: string) => {
|
||||||
@@ -381,10 +361,12 @@ export const ProxyGroups = (props: Props) => {
|
|||||||
[renderList],
|
[renderList],
|
||||||
);
|
);
|
||||||
|
|
||||||
const proxyGroupNames = useMemo(
|
const proxyGroupNames = useMemo(() => {
|
||||||
() => getProxyGroupNames(),
|
const names = renderList
|
||||||
[getProxyGroupNames],
|
.filter((item) => item.type === 0 && item.group?.name)
|
||||||
);
|
.map((item) => item.group!.name);
|
||||||
|
return Array.from(new Set(names));
|
||||||
|
}, [renderList]);
|
||||||
|
|
||||||
if (mode === "direct") {
|
if (mode === "direct") {
|
||||||
return <BaseEmpty text={t("clash_mode_direct")} />;
|
return <BaseEmpty text={t("clash_mode_direct")} />;
|
||||||
|
|||||||
Reference in New Issue
Block a user