diff --git a/src/components/proxy/proxy-global.tsx b/src/components/proxy/proxy-global.tsx
index ee225429200e3f131b8df493549737ee570ae0d7..75d110bca504e4a8879db3ff4c01a7ea53ac0675 100644
--- a/src/components/proxy/proxy-global.tsx
+++ b/src/components/proxy/proxy-global.tsx
@@ -1,22 +1,14 @@
import useSWR, { useSWRConfig } from "swr";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
import { useLockFn } from "ahooks";
import { Virtuoso } from "react-virtuoso";
-import { Box, IconButton, TextField } from "@mui/material";
-import {
- 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 useFilterProxy, { ProxySortType } from "./use-filter-proxy";
import delayManager from "../../services/delay";
-import useFilterProxy from "./use-filter-proxy";
import ProxyItem from "./proxy-item";
+import ProxyHead from "./proxy-head";
interface Props {
groupName: string;
@@ -30,13 +22,38 @@ const ProxyGlobal = (props: Props) => {
const { mutate } = useSWRConfig();
const [now, setNow] = useState(curProxy || "DIRECT");
+
const [showType, setShowType] = useState(true);
- const [showFilter, setShowFilter] = useState(false);
+ 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 { data: profiles } = useSWR("getProfiles", getProfiles);
const onChangeProxy = useLockFn(async (name: string) => {
@@ -61,7 +78,7 @@ const ProxyGlobal = (props: 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?.({
@@ -73,7 +90,7 @@ const ProxyGlobal = (props: Props) => {
};
const onCheckAll = useLockFn(async () => {
- const names = filterProxies.map((p) => p.name);
+ const names = sortedProxies.map((p) => p.name);
await delayManager.checkListDelay(
{ names, groupName, skipNum: 8, maxTimeout: 600 },
@@ -85,10 +102,6 @@ const ProxyGlobal = (props: Props) => {
useEffect(() => onLocation(false), [groupName]);
- useEffect(() => {
- if (!showFilter) setFilterText("");
- }, [showFilter]);
-
useEffect(() => {
if (groupName === "DIRECT") setNow("DIRECT");
else if (groupName === "GLOBAL") {
@@ -112,74 +125,29 @@ const ProxyGlobal = (props: Props) => {
return (
<>
- <Box
- sx={{
- px: 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
- autoFocus
- 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>
+ <ProxyHead
+ sx={{ px: 3, my: 0.5, button: { mr: 0.5 } }}
+ showType={showType}
+ sortType={sortType}
+ urlText={urlText}
+ filterText={filterText}
+ onLocation={onLocation}
+ onCheckDelay={onCheckAll}
+ onShowType={setShowType}
+ onSortType={setSortType}
+ onUrlText={setUrlText}
+ onFilterText={setFilterText}
+ />
<Virtuoso
ref={virtuosoRef}
style={{ height: "calc(100% - 40px)" }}
- totalCount={filterProxies.length}
+ totalCount={sortedProxies.length}
itemContent={(index) => (
<ProxyItem
groupName={groupName}
- proxy={filterProxies[index]}
- selected={filterProxies[index].name === now}
+ proxy={sortedProxies[index]}
+ selected={sortedProxies[index].name === now}
showType={showType}
onClick={onChangeProxy}
sx={{ py: 0, px: 2 }}
diff --git a/src/components/proxy/proxy-group.tsx b/src/components/proxy/proxy-group.tsx
index 81ff9f4979d024029312b5c9c5cf87db36ff7e3c..cef5acb89c147661c4b1ec6270dfa37af5cd8abc 100644
--- a/src/components/proxy/proxy-group.tsx
+++ b/src/components/proxy/proxy-group.tsx
@@ -42,9 +42,8 @@ const ProxyGroup = ({ group }: Props) => {
const [showFilter, setShowFilter] = useState(false);
const [filterText, setFilterText] = useState("");
- const proxies = group.all ?? [];
const virtuosoRef = useRef<any>();
- const filterProxies = useFilterProxy(proxies, group.name, filterText);
+ const filterProxies = useFilterProxy(group.all, group.name, filterText);
const { data: profiles } = useSWR("getProfiles", getProfiles);
diff --git a/src/components/proxy/proxy-head.tsx b/src/components/proxy/proxy-head.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac3a680ee176bf0d0956f2067807d123a47014e0
--- /dev/null
+++ b/src/components/proxy/proxy-head.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Box, IconButton, TextField, SxProps } from "@mui/material";
+import {
+ AccessTimeRounded,
+ MyLocationRounded,
+ NetworkCheckRounded,
+ FilterAltRounded,
+ FilterAltOffRounded,
+ VisibilityRounded,
+ VisibilityOffRounded,
+ WifiTetheringRounded,
+ WifiTetheringOffRounded,
+ SortByAlphaRounded,
+ SortRounded,
+} from "@mui/icons-material";
+import type { ProxySortType } from "./use-filter-proxy";
+
+interface Props {
+ sx?: SxProps;
+ 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 [textState, setTextState] = useState<"url" | "filter" | null>(null);
+
+ return (
+ <Box sx={{ display: "flex", alignItems: "center", ...sx }}>
+ <IconButton
+ size="small"
+ title="location"
+ color="inherit"
+ onClick={props.onLocation}
+ >
+ <MyLocationRounded />
+ </IconButton>
+
+ <IconButton
+ size="small"
+ color="inherit"
+ title="delay check"
+ onClick={props.onCheckDelay}
+ >
+ <NetworkCheckRounded />
+ </IconButton>
+
+ <IconButton
+ size="small"
+ color="inherit"
+ title={["sort by default", "sort by name", "sort by delay"][sortType]}
+ onClick={() => props.onSortType(((sortType + 1) % 3) as ProxySortType)}
+ >
+ {sortType === 0 && <SortRounded />}
+ {sortType === 1 && <SortByAlphaRounded />}
+ {sortType === 2 && <AccessTimeRounded />}
+ </IconButton>
+
+ <IconButton
+ size="small"
+ color="inherit"
+ title="edit test url"
+ onClick={() => setTextState((ts) => (ts === "url" ? null : "url"))}
+ >
+ {textState === "url" ? (
+ <WifiTetheringRounded />
+ ) : (
+ <WifiTetheringOffRounded />
+ )}
+ </IconButton>
+
+ <IconButton
+ size="small"
+ color="inherit"
+ title="proxy detail"
+ onClick={() => props.onShowType(!showType)}
+ >
+ {showType ? <VisibilityRounded /> : <VisibilityOffRounded />}
+ </IconButton>
+
+ <IconButton
+ size="small"
+ color="inherit"
+ title="filter"
+ onClick={() =>
+ setTextState((ts) => (ts === "filter" ? null : "filter"))
+ }
+ >
+ {textState === "filter" ? (
+ <FilterAltRounded />
+ ) : (
+ <FilterAltOffRounded />
+ )}
+ </IconButton>
+
+ {textState === "filter" && (
+ <TextField
+ autoFocus
+ hiddenLabel
+ value={filterText}
+ size="small"
+ variant="outlined"
+ placeholder="Filter conditions"
+ onChange={(e) => props.onFilterText(e.target.value)}
+ sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+ />
+ )}
+
+ {textState === "url" && (
+ <TextField
+ autoFocus
+ hiddenLabel
+ value={urlText}
+ size="small"
+ variant="outlined"
+ placeholder="Test url"
+ onChange={(e) => props.onUrlText(e.target.value)}
+ sx={{ ml: 0.5, flex: "1 1 auto", input: { py: 0.65, px: 1 } }}
+ />
+ )}
+ </Box>
+ );
+};
+
+export default ProxyHead;
diff --git a/src/components/proxy/use-filter-proxy.ts b/src/components/proxy/use-filter-proxy.ts
index eb320572f4696c375200a7dd9a7119920f440a85..231a09cd34ad955c031dd9bbec9ea2df453cf555 100644
--- a/src/components/proxy/use-filter-proxy.ts
+++ b/src/components/proxy/use-filter-proxy.ts
@@ -5,6 +5,9 @@ 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
@@ -15,6 +18,7 @@ export default function useFilterProxy(
filterText: string
) {
return useMemo(() => {
+ if (!proxies) return [];
if (!filterText) return proxies;
const res1 = regex1.exec(filterText);