Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 11:42:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: global proxies use virtual list

Browse Source
This commit is contained in:
GyDi 2022-01-25 02:08:10 +08:00
parent 6a8ffe1642
commit f0f45e007d
No known key found for this signature in database
GPG Key ID: 1C95E0D3467B3084
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/proxies.tsx
View File

@ -1,5 +1,6 @@
import useSWR, { useSWRConfig } from "swr"; import useSWR, { useSWRConfig } from "swr";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { Virtuoso } from "react-virtuoso";
import { Button, ButtonGroup, List, Paper } from "@mui/material"; import { Button, ButtonGroup, List, Paper } from "@mui/material";
import { getClashConfig, updateConfigs, updateProxy } from "../services/api"; import { getClashConfig, updateConfigs, updateProxy } from "../services/api";
import { patchClashConfig } from "../services/cmds"; import { patchClashConfig } from "../services/cmds";
@ -74,8 +75,15 @@ const ProxyPage = () => {
setCurProxy(name); setCurProxy(name);
}; };
// difference style
const pageStyle = asGroup ? {} : { height: "100%" };
const paperStyle: any = asGroup
? { mb: 0.5 }
: { py: 1, height: "100%", boxSizing: "border-box" };
return ( return (
<BasePage <BasePage
contentStyle={pageStyle}
title={asGroup ? "Proxy Groups" : "Proxies"} title={asGroup ? "Proxy Groups" : "Proxies"}
header={ header={
<ButtonGroup size="small"> <ButtonGroup size="small">
@ -92,7 +100,7 @@ const ProxyPage = () => {
</ButtonGroup> </ButtonGroup>
} }
> >
<Paper sx={{ borderRadius: 1, boxShadow: 2, mb: 1 }}> <Paper sx={{ borderRadius: 1, boxShadow: 2, ...paperStyle }}>
{asGroup ? ( {asGroup ? (
<List> <List>
{groups.map((group) => ( {groups.map((group) => (
@ -100,18 +108,19 @@ const ProxyPage = () => {
))} ))}
</List> </List>
) : ( ) : (
// todo: virtual list // virtual list
<List> <Virtuoso
{filterProxies.map((proxy) => ( style={{ height: "100%" }}
totalCount={filterProxies.length}
itemContent={(index) => (
<ProxyItem <ProxyItem
key={proxy.name} proxy={filterProxies[index]}
proxy={proxy} selected={filterProxies[index].name === curProxy}
selected={proxy.name === curProxy}
onClick={onChangeProxy} onClick={onChangeProxy}
sx={{ py: 0, px: 2 }} sx={{ py: 0, px: 2 }}
/> />
))} )}
</List> />
)} )}
</Paper> </Paper>
</BasePage> </BasePage>