feat： add Quick navigation bar in the rule mode agent group (#4889)

2026-11-08 19:22:44 +08:00 · 2025-09-29 11:51:53 +08:00
parent 40f0e1bb19
commit d86bdea127
2 changed files with 145 additions and 1 deletions
@@ -0,0 +1,94 @@
+import { Box, Button, Tooltip } from "@mui/material";
+import { useCallback, useMemo } from "react";
+
+interface ProxyGroupNavigatorProps {
+  proxyGroupNames: string[];
+  onGroupLocation: (groupName: string) => void;
+}
+
+// 提取代理组名的第一个字符
+const getGroupDisplayChar = (groupName: string): string => {
+  if (!groupName) return "?";
+
+  // 直接返回第一个字符，支持表情符号
+  const firstChar = Array.from(groupName)[0];
+  return firstChar || "?";
+};
+
+export const ProxyGroupNavigator = ({
+  proxyGroupNames,
+  onGroupLocation,
+}: ProxyGroupNavigatorProps) => {
+  const handleGroupClick = useCallback(
+    (groupName: string) => {
+      onGroupLocation(groupName);
+    },
+    [onGroupLocation],
+  );
+
+  // 处理代理组数据，去重和排序
+  const processedGroups = useMemo(() => {
+    return proxyGroupNames
+      .filter((name) => name && name.trim())
+      .map((name) => ({
+        name,
+        displayChar: getGroupDisplayChar(name),
+      }));
+  }, [proxyGroupNames]);
+
+  if (processedGroups.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        right: 2,
+        top: "50%",
+        transform: "translateY(-50%)",
+        zIndex: 10,
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.25,
+        bgcolor: "transparent",
+        borderRadius: 0.5,
+        boxShadow: 0,
+        p: 0.25,
+        maxHeight: "70vh",
+        overflowY: "auto",
+        minWidth: "auto",
+      }}
+    >
+      {processedGroups.map(({ name, displayChar }) => (
+        <Tooltip key={name} title={name} placement="left" arrow>
+          <Button
+            size="small"
+            variant="text"
+            onClick={() => handleGroupClick(name)}
+            sx={{
+              minWidth: 28,
+              minHeight: 28,
+              width: 28,
+              height: 28,
+              fontSize: "12px",
+              fontWeight: 600,
+              padding: 0,
+              borderRadius: 0.25,
+              color: "text.secondary",
+              textAlign: "center",
+              justifyContent: "center",
+              textTransform: "none",
+              "&:hover": {
+                bgcolor: "primary.light",
+                color: "primary.contrastText",
+              },
+            }}
+          >
+            {displayChar}
+          </Button>
+        </Tooltip>
+      ))}
+    </Box>
+  );
+};