diff --git a/src/components/proxy/proxy-global.tsx b/src/components/proxy/proxy-global.tsx
index 75d110bca504e4a8879db3ff4c01a7ea53ac0675..7529dcb5fd98ed8e31a7dcb89732cceb05d2df7a 100644
--- a/src/components/proxy/proxy-global.tsx
+++ b/src/components/proxy/proxy-global.tsx
@@ -1,14 +1,15 @@
import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { useLockFn } from "ahooks";
import { Virtuoso } from "react-virtuoso";
import { ApiType } from "../../services/types";
import { updateProxy } from "../../services/api";
import { getProfiles, patchProfile } from "../../services/cmds";
-import useFilterProxy, { ProxySortType } from "./use-filter-proxy";
+import useSortProxy, { ProxySortType } from "./use-sort-proxy";
+import useFilterProxy from "./use-filter-proxy";
import delayManager from "../../services/delay";
-import ProxyItem from "./proxy-item";
import ProxyHead from "./proxy-head";
+import ProxyItem from "./proxy-item";
interface Props {
groupName: string;
@@ -25,34 +26,11 @@ const ProxyGlobal = (props: Props) => {
const [showType, setShowType] = useState(true);
const [sortType, setSortType] = useState<ProxySortType>(0);
-
- const [urlText, setUrlText] = useState("");
const [filterText, setFilterText] = useState("");
const virtuosoRef = useRef<any>();
const filterProxies = useFilterProxy(proxies, groupName, filterText);
-
- const sortedProxies = useMemo(() => {
- if (sortType === 0) return filterProxies;
-
- const list = filterProxies.slice();
-
- if (sortType === 1) {
- list.sort((a, b) => a.name.localeCompare(b.name));
- } else {
- list.sort((a, b) => {
- const ad = delayManager.getDelay(a.name, groupName);
- const bd = delayManager.getDelay(b.name, groupName);
-
- if (ad === -1) return 1;
- if (bd === -1) return -1;
-
- return ad - bd;
- });
- }
-
- return list;
- }, [filterProxies, sortType, groupName]);
+ const sortedProxies = useSortProxy(filterProxies, groupName, sortType);
const { data: profiles } = useSWR("getProfiles", getProfiles);
@@ -129,13 +107,12 @@ const ProxyGlobal = (props: Props) => {
sx={{ px: 3, my: 0.5, button: { mr: 0.5 } }}
showType={showType}
sortType={sortType}
- urlText={urlText}
+ groupName={groupName}
filterText={filterText}
onLocation={onLocation}
onCheckDelay={onCheckAll}
onShowType={setShowType}
onSortType={setSortType}
- onUrlText={setUrlText}
onFilterText={setFilterText}
/>
diff --git a/src/components/proxy/proxy-group.tsx b/src/components/proxy/proxy-group.tsx
index cef5acb89c147661c4b1ec6270dfa37af5cd8abc..61b8298104198041a18ce2db462a52427cad4cc3 100644
--- a/src/components/proxy/proxy-group.tsx
+++ b/src/components/proxy/proxy-group.tsx
@@ -6,28 +6,22 @@ import {
Box,
Collapse,
Divider,
- IconButton,
List,
ListItem,
ListItemText,
- TextField,
} from "@mui/material";
import {
SendRounded,
ExpandLessRounded,
ExpandMoreRounded,
- MyLocationRounded,
- NetworkCheckRounded,
- FilterAltRounded,
- FilterAltOffRounded,
- VisibilityRounded,
- VisibilityOffRounded,
} from "@mui/icons-material";
import { ApiType } from "../../services/types";
import { updateProxy } from "../../services/api";
import { getProfiles, patchProfile } from "../../services/cmds";
-import delayManager from "../../services/delay";
+import useSortProxy, { ProxySortType } from "./use-sort-proxy";
import useFilterProxy from "./use-filter-proxy";
+import delayManager from "../../services/delay";
+import ProxyHead from "./proxy-head";
import ProxyItem from "./proxy-item";
interface Props {
@@ -38,12 +32,14 @@ const ProxyGroup = ({ group }: Props) => {
const { mutate } = useSWRConfig();
const [open, setOpen] = useState(false);
const [now, setNow] = useState(group.now);
+
const [showType, setShowType] = useState(false);
- const [showFilter, setShowFilter] = useState(false);
+ const [sortType, setSortType] = useState<ProxySortType>(0);
const [filterText, setFilterText] = useState("");
const virtuosoRef = useRef<any>();
const filterProxies = useFilterProxy(group.all, group.name, filterText);
+ const sortedProxies = useSortProxy(filterProxies, group.name, sortType);
const { data: profiles } = useSWR("getProfiles", getProfiles);
@@ -81,7 +77,7 @@ const ProxyGroup = ({ group }: Props) => {
});
const onLocation = (smooth = true) => {
- const index = filterProxies.findIndex((p) => p.name === now);
+ const index = sortedProxies.findIndex((p) => p.name === now);
if (index >= 0) {
virtuosoRef.current?.scrollToIndex?.({
@@ -93,7 +89,7 @@ const ProxyGroup = ({ group }: Props) => {
};
const onCheckAll = useLockFn(async () => {
- const names = filterProxies.map((p) => p.name);
+ const names = sortedProxies.map((p) => p.name);
const groupName = group.name;
await delayManager.checkListDelay(
@@ -104,10 +100,6 @@ const ProxyGroup = ({ group }: Props) => {
mutate("getProxies");
});
- useEffect(() => {
- if (!showFilter) setFilterText("");
- }, [showFilter]);
-
// auto scroll to current index
useEffect(() => {
if (open) {
@@ -135,66 +127,20 @@ const ProxyGroup = ({ group }: Props) => {
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
- <Box
- sx={{
- pl: 4,
- pr: 3,
- my: 0.5,
- display: "flex",
- alignItems: "center",
- button: { mr: 0.5 },
- }}
- >
- <IconButton
- size="small"
- title="location"
- color="inherit"
- onClick={() => onLocation(true)}
- >
- <MyLocationRounded />
- </IconButton>
-
- <IconButton
- size="small"
- title="delay check"
- color="inherit"
- onClick={onCheckAll}
- >
- <NetworkCheckRounded />
- </IconButton>
-
- <IconButton
- size="small"
- title="proxy detail"
- color="inherit"
- onClick={() => setShowType(!showType)}
- >
- {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
- </IconButton>
-
- <IconButton
- size="small"
- title="filter"
- color="inherit"
- onClick={() => setShowFilter(!showFilter)}
- >
- {showFilter ? <FilterAltRounded /> : <FilterAltOffRounded />}
- </IconButton>
-
- {showFilter && (
- <TextField
- hiddenLabel
- value={filterText}
- size="small"
- variant="outlined"
- placeholder="Filter conditions"
- onChange={(e) => setFilterText(e.target.value)}
- sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
- />
- )}
- </Box>
-
- {!filterProxies.length && (
+ <ProxyHead
+ sx={{ pl: 4, pr: 3, my: 0.5, button: { mr: 0.5 } }}
+ showType={showType}
+ sortType={sortType}
+ groupName={group.name}
+ filterText={filterText}
+ onLocation={onLocation}
+ onCheckDelay={onCheckAll}
+ onShowType={setShowType}
+ onSortType={setSortType}
+ onFilterText={setFilterText}
+ />
+
+ {!sortedProxies.length && (
<Box
sx={{
py: 3,
@@ -207,16 +153,16 @@ const ProxyGroup = ({ group }: Props) => {
</Box>
)}
- {filterProxies.length >= 10 ? (
+ {sortedProxies.length >= 10 ? (
<Virtuoso
ref={virtuosoRef}
style={{ height: "320px", marginBottom: "4px" }}
- totalCount={filterProxies.length}
+ totalCount={sortedProxies.length}
itemContent={(index) => (
<ProxyItem
groupName={group.name}
- proxy={filterProxies[index]}
- selected={filterProxies[index].name === now}
+ proxy={sortedProxies[index]}
+ selected={sortedProxies[index].name === now}
showType={showType}
sx={{ py: 0, pl: 4 }}
onClick={onChangeProxy}
@@ -229,7 +175,7 @@ const ProxyGroup = ({ group }: Props) => {
disablePadding
sx={{ maxHeight: "320px", overflow: "auto", mb: "4px" }}
>
- {filterProxies.map((proxy) => (
+ {sortedProxies.map((proxy) => (
<ProxyItem
key={proxy.name}
groupName={group.name}
diff --git a/src/components/proxy/proxy-head.tsx b/src/components/proxy/proxy-head.tsx
index ac3a680ee176bf0d0956f2067807d123a47014e0..366325552e294b49e778164dd950fd0b785ed0a6 100644
--- a/src/components/proxy/proxy-head.tsx
+++ b/src/components/proxy/proxy-head.tsx
@@ -13,27 +13,29 @@ import {
SortByAlphaRounded,
SortRounded,
} from "@mui/icons-material";
-import type { ProxySortType } from "./use-filter-proxy";
+import delayManager from "../../services/delay";
+import type { ProxySortType } from "./use-sort-proxy";
interface Props {
sx?: SxProps;
+ groupName: string;
showType: boolean;
sortType: ProxySortType;
- urlText: string;
filterText: string;
onLocation: () => void;
onCheckDelay: () => void;
onShowType: (val: boolean) => void;
onSortType: (val: ProxySortType) => void;
- onUrlText: (val: string) => void;
onFilterText: (val: string) => void;
}
const ProxyHead = (props: Props) => {
- const { sx = {}, showType, sortType, urlText, filterText } = props;
+ const { sx = {}, groupName, showType, sortType, filterText } = props;
const [textState, setTextState] = useState<"url" | "filter" | null>(null);
+ const [testUrl, setTestUrl] = useState(delayManager.getUrl(groupName) || "");
+
return (
<Box sx={{ display: "flex", alignItems: "center", ...sx }}>
<IconButton
@@ -49,7 +51,13 @@ const ProxyHead = (props: Props) => {
size="small"
color="inherit"
title="delay check"
- onClick={props.onCheckDelay}
+ onClick={() => {
+ // Remind the user that it is custom test url
+ if (testUrl?.trim() && textState !== "filter") {
+ setTextState("url");
+ }
+ props.onCheckDelay();
+ }}
>
<NetworkCheckRounded />
</IconButton>
@@ -57,12 +65,12 @@ const ProxyHead = (props: Props) => {
<IconButton
size="small"
color="inherit"
- title={["sort by default", "sort by name", "sort by delay"][sortType]}
+ title={["sort by default", "sort by delay", "sort by name"][sortType]}
onClick={() => props.onSortType(((sortType + 1) % 3) as ProxySortType)}
>
{sortType === 0 && <SortRounded />}
- {sortType === 1 && <SortByAlphaRounded />}
- {sortType === 2 && <AccessTimeRounded />}
+ {sortType === 1 && <AccessTimeRounded />}
+ {sortType === 2 && <SortByAlphaRounded />}
</IconButton>
<IconButton
@@ -119,11 +127,16 @@ const ProxyHead = (props: Props) => {
<TextField
autoFocus
hiddenLabel
- value={urlText}
+ autoSave="off"
+ autoComplete="off"
+ value={testUrl}
size="small"
variant="outlined"
placeholder="Test url"
- onChange={(e) => props.onUrlText(e.target.value)}
+ onChange={(e) => {
+ setTestUrl(e.target.value);
+ delayManager.setUrl(groupName, e.target.value);
+ }}
sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
/>
)}
diff --git a/src/components/proxy/use-filter-proxy.ts b/src/components/proxy/use-filter-proxy.ts
index 231a09cd34ad955c031dd9bbec9ea2df453cf555..66cea1a1735cf231cae5ec4619a6539951df91e6 100644
--- a/src/components/proxy/use-filter-proxy.ts
+++ b/src/components/proxy/use-filter-proxy.ts
@@ -5,9 +5,6 @@ import delayManager from "../../services/delay";
const regex1 = /delay([=<>])(\d+|timeout|error)/i;
const regex2 = /type=(.*)/i;
-// default | alpha | delay
-export type ProxySortType = 0 | 1 | 2;
-
/**
* filter the proxy
* according to the regular conditions
diff --git a/src/components/proxy/use-sort-proxy.ts b/src/components/proxy/use-sort-proxy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e80736ffbe7c09da33688a3ee71c4377cda7a80c
--- /dev/null
+++ b/src/components/proxy/use-sort-proxy.ts
@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { ApiType } from "../../services/types";
+import delayManager from "../../services/delay";
+
+// default | delay | alpha
+export type ProxySortType = 0 | 1 | 2;
+
+/**
+ * sort the proxy
+ */
+export default function useSortProxy(
+ proxies: ApiType.ProxyItem[],
+ groupName: string,
+ sortType: ProxySortType
+) {
+ return useMemo(() => {
+ if (!proxies) return [];
+ if (sortType === 0) return proxies;
+
+ const list = proxies.slice();
+
+ if (sortType === 1) {
+ list.sort((a, b) => {
+ const ad = delayManager.getDelay(a.name, groupName);
+ const bd = delayManager.getDelay(b.name, groupName);
+
+ if (ad === -1) return 1;
+ if (bd === -1) return -1;
+
+ return ad - bd;
+ });
+ } else {
+ list.sort((a, b) => a.name.localeCompare(b.name));
+ }
+
+ return list;
+ }, [proxies, groupName, sortType]);
+}
diff --git a/src/services/delay.ts b/src/services/delay.ts
index 8004144f23ef49330933a1e8254c4a91014970b9..9cdf90c493422a187e0dc83580cc5b69c37594fd 100644
--- a/src/services/delay.ts
+++ b/src/services/delay.ts
@@ -4,6 +4,15 @@ const hashKey = (name: string, group: string) => `${group ?? ""}::${name}`;
class DelayManager {
private cache = new Map<string, [number, number]>();
+ private urlMap = new Map<string, string>();
+
+ setUrl(group: string, url: string) {
+ this.urlMap.set(group, url);
+ }
+
+ getUrl(group: string) {
+ return this.urlMap.get(group);
+ }
setDelay(name: string, group: string, delay: number) {
this.cache.set(hashKey(name, group), [Date.now(), delay]);
@@ -23,7 +32,8 @@ class DelayManager {
let delay = -1;
try {
- const result = await getProxyDelay(name);
+ const url = this.getUrl(group);
+ const result = await getProxyDelay(name, url);
delay = result.delay;
} catch {
delay = 1e6; // error