From 2f9bf7f063aa834fb48cca0c9eab75f65618590f Mon Sep 17 00:00:00 2001
From: GyDi <zzzgydi@gmail.com>
Date: Wed, 23 Nov 2022 18:27:57 +0800
Subject: [PATCH] feat: display proxy group type
---
src/components/proxy/proxy-groups.tsx | 103 +--------------------
src/components/proxy/proxy-item.tsx | 4 +-
src/components/proxy/proxy-render.tsx | 128 ++++++++++++++++++++++++++
3 files changed, 134 insertions(+), 101 deletions(-)
create mode 100644 src/components/proxy/proxy-render.tsx
diff --git a/src/components/proxy/proxy-groups.tsx b/src/components/proxy/proxy-groups.tsx
index 47dbf7d..6e0b7cb 100644
--- a/src/components/proxy/proxy-groups.tsx
+++ b/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;
-}
diff --git a/src/components/proxy/proxy-item.tsx b/src/components/proxy/proxy-item.tsx
index c91991a..c597112 100644
--- a/src/components/proxy/proxy-item.tsx
+++ b/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>
diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx
new file mode 100644
index 0000000..2eb4b5f
--- /dev/null
+++ b/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",
+}));
--
GitLab