root/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2026-01-29 08:45:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: connection components

Browse Source
This commit is contained in:
Slinetrac
2025-10-14 21:33:36 +08:00
parent 778d506be7
commit 8dbe3f8c48
1 changed files with 91 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/components/connection/connection-table.tsx
View File

@@ -6,8 +6,8 @@ import {
} from "@mui/x-data-grid"; } from "@mui/x-data-grid";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useLocalStorage } from "foxact/use-local-storage"; import { useLocalStorage } from "foxact/use-local-storage";
import { t } from "i18next";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import parseTraffic from "@/utils/parse-traffic"; import parseTraffic from "@/utils/parse-traffic";
import { truncateStr } from "@/utils/truncate-str"; import { truncateStr } from "@/utils/truncate-str";
@@ -19,6 +19,7 @@ interface Props {
export const ConnectionTable = (props: Props) => { export const ConnectionTable = (props: Props) => {
const { connections, onShowDetail } = props; const { connections, onShowDetail } = props;
const { t } = useTranslation();
const apiRef = useGridApiRef(); const apiRef = useGridApiRef();
useEffect(() => { useEffect(() => {
const PATCH_FLAG_KEY = "__clashPatchedPublishEvent" as const; const PATCH_FLAG_KEY = "__clashPatchedPublishEvent" as const;
@@ -152,93 +153,95 @@ export const ConnectionTable = (props: Props) => {
{}, {},
); );
const [columns] = useState<GridColDef[]>([ const columns = useMemo<GridColDef[]>(() => {
{ return [
field: "host", {
headerName: t("Host"), field: "host",
width: columnWidths["host"] || 220, headerName: t("Host"),
minWidth: 180, width: columnWidths["host"] || 220,
}, minWidth: 180,
{ },
field: "download", {
headerName: t("Downloaded"), field: "download",
width: columnWidths["download"] || 88, headerName: t("Downloaded"),
align: "right", width: columnWidths["download"] || 88,
headerAlign: "right", align: "right",
valueFormatter: (value: number) => parseTraffic(value).join(" "), headerAlign: "right",
}, valueFormatter: (value: number) => parseTraffic(value).join(" "),
{ },
field: "upload", {
headerName: t("Uploaded"), field: "upload",
width: columnWidths["upload"] || 88, headerName: t("Uploaded"),
align: "right", width: columnWidths["upload"] || 88,
headerAlign: "right", align: "right",
valueFormatter: (value: number) => parseTraffic(value).join(" "), headerAlign: "right",
}, valueFormatter: (value: number) => parseTraffic(value).join(" "),
{ },
field: "dlSpeed", {
headerName: t("DL Speed"), field: "dlSpeed",
width: columnWidths["dlSpeed"] || 88, headerName: t("DL Speed"),
align: "right", width: columnWidths["dlSpeed"] || 88,
headerAlign: "right", align: "right",
valueFormatter: (value: number) => parseTraffic(value).join(" ") + "/s", headerAlign: "right",
}, valueFormatter: (value: number) => parseTraffic(value).join(" ") + "/s",
{ },
field: "ulSpeed", {
headerName: t("UL Speed"), field: "ulSpeed",
width: columnWidths["ulSpeed"] || 88, headerName: t("UL Speed"),
align: "right", width: columnWidths["ulSpeed"] || 88,
headerAlign: "right", align: "right",
valueFormatter: (value: number) => parseTraffic(value).join(" ") + "/s", headerAlign: "right",
}, valueFormatter: (value: number) => parseTraffic(value).join(" ") + "/s",
{ },
field: "chains", {
headerName: t("Chains"), field: "chains",
width: columnWidths["chains"] || 340, headerName: t("Chains"),
minWidth: 180, width: columnWidths["chains"] || 340,
}, minWidth: 180,
{ },
field: "rule", {
headerName: t("Rule"), field: "rule",
width: columnWidths["rule"] || 280, headerName: t("Rule"),
minWidth: 180, width: columnWidths["rule"] || 280,
}, minWidth: 180,
{ },
field: "process", {
headerName: t("Process"), field: "process",
width: columnWidths["process"] || 220, headerName: t("Process"),
minWidth: 180, width: columnWidths["process"] || 220,
}, minWidth: 180,
{ },
field: "time", {
headerName: t("Time"), field: "time",
width: columnWidths["time"] || 120, headerName: t("Time"),
minWidth: 100, width: columnWidths["time"] || 120,
align: "right", minWidth: 100,
headerAlign: "right", align: "right",
sortComparator: (v1: string, v2: string) => headerAlign: "right",
new Date(v2).getTime() - new Date(v1).getTime(), sortComparator: (v1: string, v2: string) =>
valueFormatter: (value: number) => dayjs(value).fromNow(), new Date(v2).getTime() - new Date(v1).getTime(),
}, valueFormatter: (value: number) => dayjs(value).fromNow(),
{ },
field: "source", {
headerName: t("Source"), field: "source",
width: columnWidths["source"] || 200, headerName: t("Source"),
minWidth: 130, width: columnWidths["source"] || 200,
}, minWidth: 130,
{ },
field: "remoteDestination", {
headerName: t("Destination"), field: "remoteDestination",
width: columnWidths["remoteDestination"] || 200, headerName: t("Destination"),
minWidth: 130, width: columnWidths["remoteDestination"] || 200,
}, minWidth: 130,
{ },
field: "type", {
headerName: t("Type"), field: "type",
width: columnWidths["type"] || 160, headerName: t("Type"),
minWidth: 100, width: columnWidths["type"] || 160,
}, minWidth: 100,
]); },
];
}, [columnWidths, t]);
const handleColumnResize = (params: GridColumnResizeParams) => { const handleColumnResize = (params: GridColumnResizeParams) => {
const { colDef, width } = params; const { colDef, width } = params;