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

chore: improve UI in connections page

Browse Source
This commit is contained in:
dongchengjie 2024-06-02 21:52:31 +08:00
parent f5f4ecf46a
commit 4df4995623
2 changed files with 5 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/connection/connection-item.tsx
View File

@ -19,6 +19,7 @@ const Tag = styled("span")(({ theme }) => ({
border: "1px solid", border: "1px solid",
borderRadius: 4, borderRadius: 4,
borderColor: alpha(theme.palette.text.secondary, 0.35), borderColor: alpha(theme.palette.text.secondary, 0.35),
marginTop: "4px",
marginRight: "4px", marginRight: "4px",
})); }));

19
src/pages/connections.tsx
View File

@ -1,15 +1,6 @@
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { useLockFn } from "ahooks"; import { useLockFn } from "ahooks";
import { import { Box, Button, IconButton, MenuItem } from "@mui/material";
Box,
Button,
IconButton,
MenuItem,
Select,
SelectProps,
Typography,
styled,
} from "@mui/material";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { Virtuoso } from "react-virtuoso"; import { Virtuoso } from "react-virtuoso";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -35,7 +26,7 @@ const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[]; type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
const ConnectionsPage = () => { const ConnectionsPage = () => {
const { t, i18n } = useTranslation(); const { t } = useTranslation();
const { clashInfo } = useClashInfo(); const { clashInfo } = useClashInfo();
const { theme } = useCustomTheme(); const { theme } = useCustomTheme();
const isDark = theme.palette.mode === "dark"; const isDark = theme.palette.mode === "dark";
@ -160,9 +151,7 @@ const ConnectionsPage = () => {
</IconButton> </IconButton>
<Button size="small" variant="contained" onClick={onCloseAll}> <Button size="small" variant="contained" onClick={onCloseAll}>
<Typography component="span" style={{ whiteSpace: "nowrap" }}> <span style={{ whiteSpace: "nowrap" }}>{t("Close All")}</span>
{t("Close All")}
</Typography>
</Button> </Button>
</Box> </Box>
} }
@ -212,7 +201,7 @@ const ConnectionsPage = () => {
) : ( ) : (
<Virtuoso <Virtuoso
data={filterConn} data={filterConn}
itemContent={(index, item) => ( itemContent={(_, item) => (
<ConnectionItem <ConnectionItem
value={item} value={item}
onShowDetail={() => detailRef.current?.open(item)} onShowDetail={() => detailRef.current?.open(item)}