feat: display proxy group type

src/components/proxy/proxy-groups.tsx

@@ -1,13 +1,6 @@
 import { useRef } from "react";
 import { useLockFn } from "ahooks";
-import { Box, ListItem, ListItemText, Typography } from "@mui/material";
 import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
-import {
-  ExpandLessRounded,
-  ExpandMoreRounded,
-  InboxRounded,
-  SendRounded,
-} from "@mui/icons-material";
 import {
   getConnections,
   providerHealthCheck,
@@ -16,10 +9,8 @@ import {
 } from "@/services/api";
 import { useProfiles } from "@/hooks/use-profiles";
 import { useVerge } from "@/hooks/use-verge";
-import { useRenderList, type IRenderItem } from "./use-render-list";
-import { HeadState } from "./use-head-state";
-import { ProxyHead } from "./proxy-head";
-import { ProxyItem } from "./proxy-item";
+import { useRenderList } from "./use-render-list";
+import { ProxyRender } from "./proxy-render";
 import delayManager from "@/services/delay";
 
 interface Props {
@@ -39,7 +30,7 @@ export const ProxyGroups = (props: Props) => {
   // 切换分组的节点代理
   const handleChangeProxy = useLockFn(
     async (group: IProxyGroupItem, proxy: IProxyItem) => {
-      if (group.type !== "Selector") return;
+      if (group.type !== "Selector" && group.type !== "Fallback") return;
 
       const { name, now } = group;
       await updateProxy(name, proxy.name);
@@ -118,7 +109,7 @@ export const ProxyGroups = (props: Props) => {
       style={{ height: "100%" }}
       totalCount={renderList.length}
       itemContent={(index) => (
-        <ProxyRenderItem
+        <ProxyRender
           key={renderList[index].key}
           item={renderList[index]}
           indent={mode === "rule" || mode === "script"}
@@ -131,89 +122,3 @@ export const ProxyGroups = (props: Props) => {
     />
   );
 };
-
-interface RenderProps {
-  item: IRenderItem;
-  indent: boolean;
-  onLocation: (group: IProxyGroupItem) => void;
-  onCheckAll: (groupName: string) => void;
-  onHeadState: (groupName: string, patch: Partial<HeadState>) => void;
-  onChangeProxy: (group: IProxyGroupItem, proxy: IProxyItem) => void;
-}
-
-function ProxyRenderItem(props: RenderProps) {
-  const { indent, item, onLocation, onCheckAll, onHeadState, onChangeProxy } =
-    props;
-  const { type, group, headState, proxy } = item;
-
-  if (type === 0) {
-    return (
-      <ListItem
-        button
-        dense
-        onClick={() => onHeadState(group.name, { open: !headState?.open })}
-      >
-        <ListItemText
-          primary={group.name}
-          secondary={
-            <>
-              <SendRounded color="primary" sx={{ mr: 1, fontSize: 14 }} />
-              {/* <span>{group.type}</span> */}
-              <span>{group.now}</span>
-            </>
-          }
-          secondaryTypographyProps={{
-            sx: { display: "flex", alignItems: "center" },
-          }}
-        />
-        {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
-      </ListItem>
-    );
-  }
-
-  if (type === 1) {
-    return (
-      <ProxyHead
-        sx={{ pl: indent ? 4.5 : 2.5, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
-        groupName={group.name}
-        headState={headState!}
-        onLocation={() => onLocation(group)}
-        onCheckDelay={() => onCheckAll(group.name)}
-        onHeadState={(p) => onHeadState(group.name, p)}
-      />
-    );
-  }
-
-  if (type === 2) {
-    return (
-      <ProxyItem
-        groupName={group.name}
-        proxy={proxy!}
-        selected={group.now === proxy?.name}
-        showType={headState?.showType}
-        sx={{ py: 0, pl: indent ? 4 : 2 }}
-        onClick={() => onChangeProxy(group, proxy!)}
-      />
-    );
-  }
-
-  if (type === 3) {
-    return (
-      <Box
-        sx={{
-          py: 2,
-          pl: indent ? 4.5 : 0,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <InboxRounded sx={{ fontSize: "2.5em", color: "inherit" }} />
-        <Typography sx={{ color: "inherit" }}>No Proxies</Typography>
-      </Box>
-    );
-  }
-
-  return null;
-}

src/components/proxy/proxy-item.tsx

@@ -37,7 +37,7 @@ const TypeBox = styled(Box)(({ theme }) => ({
   color: alpha(theme.palette.text.secondary, 0.42),
   borderRadius: 4,
   fontSize: 10,
-  marginLeft: 4,
+  marginRight: "4px",
   padding: "0 2px",
   lineHeight: 1.25,
 }));
@@ -97,7 +97,7 @@ export const ProxyItem = (props: Props) => {
           title={proxy.name}
           secondary={
             <>
-              {proxy.name}
+              <span style={{ marginRight: 4 }}>{proxy.name}</span>
 
               {showType && !!proxy.provider && (
                 <TypeBox component="span">{proxy.provider}</TypeBox>

src/components/proxy/proxy-render.tsx

@@ -0,0 +1,128 @@
+import {
+  alpha,
+  Box,
+  ListItem,
+  ListItemText,
+  Typography,
+  styled,
+} from "@mui/material";
+import {
+  ExpandLessRounded,
+  ExpandMoreRounded,
+  InboxRounded,
+} from "@mui/icons-material";
+import { HeadState } from "./use-head-state";
+import { ProxyHead } from "./proxy-head";
+import { ProxyItem } from "./proxy-item";
+import type { IRenderItem } from "./use-render-list";
+
+interface RenderProps {
+  item: IRenderItem;
+  indent: boolean;
+  onLocation: (group: IProxyGroupItem) => void;
+  onCheckAll: (groupName: string) => void;
+  onHeadState: (groupName: string, patch: Partial<HeadState>) => void;
+  onChangeProxy: (group: IProxyGroupItem, proxy: IProxyItem) => void;
+}
+
+export const ProxyRender = (props: RenderProps) => {
+  const { indent, item, onLocation, onCheckAll, onHeadState, onChangeProxy } =
+    props;
+  const { type, group, headState, proxy } = item;
+
+  if (type === 0) {
+    return (
+      <ListItem
+        button
+        dense
+        onClick={() => onHeadState(group.name, { open: !headState?.open })}
+      >
+        <ListItemText
+          primary={group.name}
+          secondary={
+            <Box
+              sx={{
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                pt: "2px",
+              }}
+            >
+              <StyledTypeBox>{group.type}</StyledTypeBox>
+              <StyledSubtitle>{group.now}</StyledSubtitle>
+            </Box>
+          }
+          secondaryTypographyProps={{
+            sx: { display: "flex", alignItems: "center" },
+          }}
+        />
+        {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
+      </ListItem>
+    );
+  }
+
+  if (type === 1) {
+    return (
+      <ProxyHead
+        sx={{ pl: indent ? 4.5 : 2.5, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
+        groupName={group.name}
+        headState={headState!}
+        onLocation={() => onLocation(group)}
+        onCheckDelay={() => onCheckAll(group.name)}
+        onHeadState={(p) => onHeadState(group.name, p)}
+      />
+    );
+  }
+
+  if (type === 2) {
+    return (
+      <ProxyItem
+        groupName={group.name}
+        proxy={proxy!}
+        selected={group.now === proxy?.name}
+        showType={headState?.showType}
+        sx={{ py: 0, pl: indent ? 4 : 2 }}
+        onClick={() => onChangeProxy(group, proxy!)}
+      />
+    );
+  }
+
+  if (type === 3) {
+    return (
+      <Box
+        sx={{
+          py: 2,
+          pl: indent ? 4.5 : 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <InboxRounded sx={{ fontSize: "2.5em", color: "inherit" }} />
+        <Typography sx={{ color: "inherit" }}>No Proxies</Typography>
+      </Box>
+    );
+  }
+
+  return null;
+};
+
+const StyledSubtitle = styled("span")`
+  font-size: 0.8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledTypeBox = styled(Box)(({ theme }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(theme.palette.primary.main, 0.5),
+  color: alpha(theme.palette.primary.main, 0.8),
+  borderRadius: 4,
+  fontSize: 10,
+  padding: "0 2px",
+  lineHeight: 1.25,
+  marginRight: "4px",
+}));