Merge branch 'dev' into refactor/mihomo-api

src/components/proxy/proxy-groups.tsx

@@ -25,6 +25,7 @@ import { ScrollTopButton } from "../layout/scroll-top-button";
 
 import { ProxyChain } from "./proxy-chain";
 import { ProxyRender } from "./proxy-render";
+import { ProxyGroupNavigator } from "./proxy-group-navigator";
 import { useRenderList } from "./use-render-list";
 import { delayGroup, healthcheckProxyProvider } from "tauri-plugin-mihomo-api";
 
@@ -318,6 +319,45 @@ 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(
+    (groupName: string) => {
+      const index = renderList.findIndex(
+        (item) => item.type === 0 && item.group?.name === groupName,
+      );
+
+      if (index >= 0) {
+        virtuosoRef.current?.scrollToIndex?.({
+          index,
+          align: "start",
+          behavior: "smooth",
+        });
+      }
+    },
+    [renderList],
+  );
+
+  const proxyGroupNames = useMemo(
+    () => getProxyGroupNames(),
+    [getProxyGroupNames],
+  );
+
   if (mode === "direct") {
     return <BaseEmpty text={t("clash_mode_direct")} />;
   }
@@ -514,6 +554,14 @@ export const ProxyGroups = (props: Props) => {
     <div
       style={{ position: "relative", height: "100%", willChange: "transform" }}
     >
+      {/* 代理组导航栏 */}
+      {mode === "rule" && (
+        <ProxyGroupNavigator
+          proxyGroupNames={proxyGroupNames}
+          onGroupLocation={handleGroupLocationByName}
+        />
+      )}
+
       <Virtuoso
         ref={virtuosoRef}
         style={{ height: "calc(100% - 14px)" }}