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) => ( - { /> ); }; - -interface RenderProps { - item: IRenderItem; - indent: boolean; - onLocation: (group: IProxyGroupItem) => void; - onCheckAll: (groupName: string) => void; - onHeadState: (groupName: string, patch: Partial) => 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 ( - onHeadState(group.name, { open: !headState?.open })} - > - - - {/* {group.type} */} - {group.now} - - } - secondaryTypographyProps={{ - sx: { display: "flex", alignItems: "center" }, - }} - /> - {headState?.open ? : } - - ); - } - - if (type === 1) { - return ( - onLocation(group)} - onCheckDelay={() => onCheckAll(group.name)} - onHeadState={(p) => onHeadState(group.name, p)} - /> - ); - } - - if (type === 2) { - return ( - onChangeProxy(group, proxy!)} - /> - ); - } - - if (type === 3) { - return ( - - - No Proxies - - ); - } - - 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} + {proxy.name} {showType && !!proxy.provider && ( {proxy.provider} 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) => 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 ( + onHeadState(group.name, { open: !headState?.open })} + > + + {group.type} + {group.now} + + } + secondaryTypographyProps={{ + sx: { display: "flex", alignItems: "center" }, + }} + /> + {headState?.open ? : } + + ); + } + + if (type === 1) { + return ( + onLocation(group)} + onCheckDelay={() => onCheckAll(group.name)} + onHeadState={(p) => onHeadState(group.name, p)} + /> + ); + } + + if (type === 2) { + return ( + onChangeProxy(group, proxy!)} + /> + ); + } + + if (type === 3) { + return ( + + + No Proxies + + ); + } + + 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", +}));