feat: support closed connections (#5244)

* feat: support closed connections

* fix: clear closed connections

* feat: show footer

* feat: show closed connection detail

* docs: update Changelog.md

* chore: update

Changelog.md

@@ -10,6 +10,7 @@
 - **Mihomo(Meta) 内核升级至 v1.19.16**
 - 支持连接页面各个项目的排序
 - 实现可选的自动备份
+- 连接页面支持查看已关闭的连接（最近最多 500 个已关闭连接）
 
 </details>
 

src/components/connection/connection-detail.tsx

@@ -8,19 +8,21 @@ import { closeConnections } from "tauri-plugin-mihomo-api";
 import parseTraffic from "@/utils/parse-traffic";
 
 export interface ConnectionDetailRef {
-  open: (detail: IConnectionsItem) => void;
+  open: (detail: IConnectionsItem, closed: boolean) => void;
 }
 
 export function ConnectionDetail({ ref }: { ref?: Ref<ConnectionDetailRef> }) {
   const [open, setOpen] = useState(false);
   const [detail, setDetail] = useState<IConnectionsItem>(null!);
+  const [closed, setClosed] = useState(false);
   const theme = useTheme();
 
   useImperativeHandle(ref, () => ({
-    open: (detail: IConnectionsItem) => {
+    open: (detail: IConnectionsItem, closed: boolean) => {
       if (open) return;
       setOpen(true);
       setDetail(detail);
+      setClosed(closed);
     },
   }));
 
@@ -42,7 +44,11 @@ export function ConnectionDetail({ ref }: { ref?: Ref<ConnectionDetailRef> }) {
       }}
       message={
         detail ? (
-          <InnerConnectionDetail data={detail} onClose={onClose} />
+          <InnerConnectionDetail
+            data={detail}
+            closed={closed}
+            onClose={onClose}
+          />
         ) : null
       }
     />
@@ -51,10 +57,11 @@ export function ConnectionDetail({ ref }: { ref?: Ref<ConnectionDetailRef> }) {
 
 interface InnerProps {
   data: IConnectionsItem;
+  closed: boolean;
   onClose?: () => void;
 }
 
-const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
+const InnerConnectionDetail = ({ data, closed, onClose }: InnerProps) => {
   const { t } = useTranslation();
   const { metadata, rulePayload } = data;
   const theme = useTheme();
@@ -134,6 +141,7 @@ const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
         </div>
       ))}
 
+      {!closed && (
         <Box sx={{ textAlign: "right" }}>
           <Button
             variant="contained"
@@ -146,6 +154,7 @@ const InnerConnectionDetail = ({ data, onClose }: InnerProps) => {
             {t("connections.components.actions.closeConnection")}
           </Button>
         </Box>
+      )}
     </Box>
   );
 };

src/components/connection/connection-item.tsx

@@ -27,11 +27,12 @@ const Tag = styled("span")(({ theme }) => ({
 
 interface Props {
   value: IConnectionsItem;
+  closed: boolean;
   onShowDetail?: () => void;
 }
 
 export const ConnectionItem = (props: Props) => {
-  const { value, onShowDetail } = props;
+  const { value, closed, onShowDetail } = props;
 
   const { id, metadata, chains, start, curUpload, curDownload } = value;
   const { t } = useTranslation();
@@ -44,6 +45,7 @@ export const ConnectionItem = (props: Props) => {
       dense
       sx={{ borderBottom: "1px solid var(--divider-color)" }}
       secondaryAction={
+        !closed && (
           <IconButton
             edge="end"
             color="inherit"
@@ -53,6 +55,7 @@ export const ConnectionItem = (props: Props) => {
           >
             <CloseRounded />
           </IconButton>
+        )
       }
     >
       <ListItemText

src/components/connection/connection-table.tsx

@@ -516,7 +516,6 @@ export const ConnectionTable = (props: Props) => {
       >
         <DataGrid
           apiRef={apiRef}
-          hideFooter
           rows={connRows}
           columns={columns}
           onRowClick={(e) => onShowDetail(e.row.connectionData)}

src/components/home/enhanced-traffic-stats.tsx

@@ -187,7 +187,7 @@ export const EnhancedTrafficStats = () => {
       uploadTotalUnit,
       downloadTotal,
       downloadTotalUnit,
-      connectionsCount: connections?.connections.length,
+      connectionsCount: connections?.activeConnections.length,
     };
   }, [traffic, memory, connections]);
 

src/hooks/use-connection-data.ts

@@ -4,12 +4,22 @@ import { mutate } from "swr";
 import useSWRSubscription from "swr/subscription";
 import { MihomoWebSocket } from "tauri-plugin-mihomo-api";
 
-export const initConnData: IConnections = {
+export const initConnData: ConnectionMonitorData = {
   uploadTotal: 0,
   downloadTotal: 0,
-  connections: [],
+  activeConnections: [],
+  closedConnections: [],
 };
 
+export interface ConnectionMonitorData {
+  uploadTotal: number;
+  downloadTotal: number;
+  activeConnections: IConnectionsItem[];
+  closedConnections: IConnectionsItem[];
+}
+
+const MAX_CLOSED_CONNS_NUM = 500;
+
 export const useConnectionData = () => {
   const [date, setDate] = useLocalStorage("mihomo_connection_date", Date.now());
   const subscriptKey = `getClashConnection-${date}`;
@@ -18,7 +28,11 @@ export const useConnectionData = () => {
   const wsFirstConnection = useRef<boolean>(true);
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
-  const response = useSWRSubscription<IConnections, any, string | null>(
+  const response = useSWRSubscription<
+    ConnectionMonitorData,
+    any,
+    string | null
+  >(
     subscriptKey,
     (_key, { next }) => {
       const reconnect = async () => {
@@ -41,28 +55,44 @@ export const useConnectionData = () => {
                 } else {
                   const data = JSON.parse(msg.data) as IConnections;
                   next(null, (old = initConnData) => {
-                    const oldConn = old.connections;
+                    const oldConn = old.activeConnections;
                     const maxLen = data.connections?.length;
-                    const connections: IConnectionsItem[] = [];
+                    const activeConns: IConnectionsItem[] = [];
                     const rest = (data.connections || []).filter((each) => {
                       const index = oldConn.findIndex((o) => o.id === each.id);
                       if (index >= 0 && index < maxLen) {
                         const old = oldConn[index];
                         each.curUpload = each.upload - old.upload;
                         each.curDownload = each.download - old.download;
-                        connections[index] = each;
+                        activeConns[index] = each;
                         return false;
                       }
                       return true;
                     });
                     for (let i = 0; i < maxLen; ++i) {
-                      if (!connections[i] && rest.length > 0) {
-                        connections[i] = rest.shift()!;
-                        connections[i].curUpload = 0;
-                        connections[i].curDownload = 0;
+                      if (!activeConns[i] && rest.length > 0) {
+                        activeConns[i] = rest.shift()!;
+                        activeConns[i].curUpload = 0;
+                        activeConns[i].curDownload = 0;
                       }
                     }
-                    return { ...data, connections };
+                    const currentClosedConns = oldConn.filter((each) => {
+                      const index = activeConns.findIndex(
+                        (o) => o.id === each.id,
+                      );
+                      return index < 0;
+                    });
+                    let closedConns =
+                      old.closedConnections.concat(currentClosedConns);
+                    if (closedConns.length > 500) {
+                      closedConns = closedConns.slice(-MAX_CLOSED_CONNS_NUM);
+                    }
+                    return {
+                      uploadTotal: data.uploadTotal,
+                      downloadTotal: data.downloadTotal,
+                      activeConnections: activeConns,
+                      closedConnections: closedConns,
+                    };
                   });
                 }
               }
@@ -109,5 +139,14 @@ export const useConnectionData = () => {
     setDate(Date.now());
   };
 
-  return { response, refreshGetClashConnection };
+  const clearClosedConnections = () => {
+    mutate(`$sub$${subscriptKey}`, {
+      uploadTotal: response.data?.uploadTotal ?? 0,
+      downloadTotal: response.data?.downloadTotal ?? 0,
+      activeConnections: response.data?.activeConnections ?? [],
+      closedConnections: [],
+    });
+  };
+
+  return { response, refreshGetClashConnection, clearClosedConnections };
 };

src/locales/ar/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "سرعة التنزيل"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "إغلاق الاتصال"
     },
     "columnManager": {

src/locales/de/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "Download-Geschwindigkeit"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "Verbindung schließen"
     },
     "columnManager": {

src/locales/en/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "Download Speed"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "Close Connection"
     },
     "columnManager": {

src/locales/es/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "Velocidad de descarga"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "Cerrar conexión"
     },
     "columnManager": {

src/locales/fa/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "سرعت دانلود"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "بستن اتصال"
     },
     "columnManager": {

src/locales/id/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "Kecepatan Unduh"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "Tutup Koneksi"
     },
     "columnManager": {

src/locales/jp/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "ダウンロード速度"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "接続を閉じる"
     },
     "columnManager": {

src/locales/ko/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "다운로드 속도"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "연결 닫기"
     },
     "columnManager": {

src/locales/ru/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "Скорость скачивания"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "Закрыть соединение"
     },
     "columnManager": {

src/locales/tr/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "İndirme Hızı"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "Bağlantıyı Kapat"
     },
     "columnManager": {

src/locales/tt/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "Йөкләү тизлеге"
     },
     "actions": {
+      "active": "Active",
+      "closed": "Closed",
       "closeConnection": "Тоташуны ябу"
     },
     "columnManager": {

src/locales/zh/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "下载速度"
     },
     "actions": {
+      "active": "活跃",
+      "closed": "已关闭",
       "closeConnection": "关闭连接"
     },
     "columnManager": {

src/locales/zhtw/connections.json

@@ -22,6 +22,8 @@
       "downloadSpeed": "下載速度"
     },
     "actions": {
+      "active": "活躍",
+      "closed": "已關閉",
       "closeConnection": "關閉連線"
     },
     "columnManager": {

src/pages/connections.tsx

@@ -1,10 +1,17 @@
 import {
-  PauseCircleOutlineRounded,
-  PlayCircleOutlineRounded,
+  DeleteForeverRounded,
   TableChartRounded,
   TableRowsRounded,
 } from "@mui/icons-material";
-import { Box, Button, IconButton, MenuItem } from "@mui/material";
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Fab,
+  IconButton,
+  MenuItem,
+  Zoom,
+} from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -21,16 +28,9 @@ import {
 import { ConnectionItem } from "@/components/connection/connection-item";
 import { ConnectionTable } from "@/components/connection/connection-table";
 import { useConnectionData } from "@/hooks/use-connection-data";
-import { useVisibility } from "@/hooks/use-visibility";
 import { useConnectionSetting } from "@/services/states";
 import parseTraffic from "@/utils/parse-traffic";
 
-const initConn: IConnections = {
-  uploadTotal: 0,
-  downloadTotal: 0,
-  connections: [],
-};
-
 type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
 
 const ORDER_OPTIONS = [
@@ -70,61 +70,42 @@ const orderFunctionMap = ORDER_OPTIONS.reduce<Record<OrderKey, OrderFunc>>(
 
 const ConnectionsPage = () => {
   const { t } = useTranslation();
-  const pageVisible = useVisibility();
   const [match, setMatch] = useState<(input: string) => boolean>(
     () => () => true,
   );
   const [curOrderOpt, setCurOrderOpt] = useState<OrderKey>("default");
+  const [connectionsType, setConnectionsType] = useState<"active" | "closed">(
+    "active",
+  );
 
   const {
     response: { data: connections },
+    clearClosedConnections,
   } = useConnectionData();
 
   const [setting, setSetting] = useConnectionSetting();
 
   const isTableLayout = setting.layout === "table";
 
-  const [isPaused, setIsPaused] = useState(false);
-  const [frozenData, setFrozenData] = useState<IConnections | null>(null);
   const [isColumnManagerOpen, setIsColumnManagerOpen] = useState(false);
 
-  // 使用全局连接数据
-  const displayData = useMemo(() => {
-    if (!pageVisible) return initConn;
-
-    if (isPaused) {
-      return (
-        frozenData ?? {
-          uploadTotal: connections?.uploadTotal,
-          downloadTotal: connections?.downloadTotal,
-          connections: connections?.connections,
-        }
-      );
-    }
-
-    return {
-      uploadTotal: connections?.uploadTotal,
-      downloadTotal: connections?.downloadTotal,
-      connections: connections?.connections,
-    };
-  }, [isPaused, frozenData, connections, pageVisible]);
-
   const [filterConn] = useMemo(() => {
     const orderFunc = orderFunctionMap[curOrderOpt];
-    let conns: IConnectionsItem[] = (displayData.connections ?? []).filter(
-      (conn) => {
+    const conns =
+      (connectionsType === "active"
+        ? connections?.activeConnections
+        : connections?.closedConnections) ?? [];
+    let matchConns = conns.filter((conn) => {
       const { host, destinationIP, process } = conn.metadata;
       return (
-          match(host || "") ||
-          match(destinationIP || "") ||
-          match(process || "")
+        match(host || "") || match(destinationIP || "") || match(process || "")
       );
-      },
-    );
-    if (orderFunc) conns = orderFunc(conns);
+    });
 
-    return [conns];
-  }, [displayData, match, curOrderOpt]);
+    if (orderFunc) matchConns = orderFunc(matchConns ?? []);
+
+    return [matchConns];
+  }, [connections, connectionsType, match, curOrderOpt]);
 
   const onCloseAll = useLockFn(closeAllConnections);
 
@@ -134,21 +115,6 @@ const ConnectionsPage = () => {
     setMatch(() => match);
   }, []);
 
-  const handlePauseToggle = useCallback(() => {
-    setIsPaused((prev) => {
-      if (!prev) {
-        setFrozenData({
-          uploadTotal: connections?.uploadTotal ?? 0,
-          downloadTotal: connections?.downloadTotal ?? 0,
-          connections: connections?.connections ?? [],
-        });
-      } else {
-        setFrozenData(null);
-      }
-      return !prev;
-    });
-  }, [connections]);
-
   const hasTableData = filterConn.length > 0;
 
   return (
@@ -170,11 +136,11 @@ const ConnectionsPage = () => {
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
           <Box sx={{ mx: 1 }}>
             {t("shared.labels.downloaded")}:{" "}
-            {parseTraffic(displayData.downloadTotal)}
+            {parseTraffic(connections?.downloadTotal)}
           </Box>
           <Box sx={{ mx: 1 }}>
             {t("shared.labels.uploaded")}:{" "}
-            {parseTraffic(displayData.uploadTotal)}
+            {parseTraffic(connections?.uploadTotal)}
           </Box>
           <IconButton
             color="inherit"
@@ -193,20 +159,6 @@ const ConnectionsPage = () => {
               <TableChartRounded titleAccess={t("shared.actions.tableView")} />
             )}
           </IconButton>
-          <IconButton
-            color="inherit"
-            size="small"
-            onClick={handlePauseToggle}
-            title={
-              isPaused ? t("shared.actions.resume") : t("shared.actions.pause")
-            }
-          >
-            {isPaused ? (
-              <PlayCircleOutlineRounded />
-            ) : (
-              <PauseCircleOutlineRounded />
-            )}
-          </IconButton>
           <Button size="small" variant="contained" onClick={onCloseAll}>
             <span style={{ whiteSpace: "nowrap" }}>
               {t("shared.actions.closeAll")}
@@ -230,6 +182,24 @@ const ConnectionsPage = () => {
           zIndex: 2,
         }}
       >
+        <ButtonGroup sx={{ mr: 1, flexBasis: "content" }}>
+          <Button
+            size="small"
+            variant={connectionsType === "active" ? "contained" : "outlined"}
+            onClick={() => setConnectionsType("active")}
+          >
+            {t("connections.components.actions.active")}{" "}
+            {connections?.activeConnections.length}
+          </Button>
+          <Button
+            size="small"
+            variant={connectionsType === "closed" ? "contained" : "outlined"}
+            onClick={() => setConnectionsType("closed")}
+          >
+            {t("connections.components.actions.closed")}{" "}
+            {connections?.closedConnections.length}
+          </Button>
+        </ButtonGroup>
         {!isTableLayout && (
           <BaseStyledSelect
             value={curOrderOpt}
@@ -261,7 +231,9 @@ const ConnectionsPage = () => {
       ) : isTableLayout ? (
         <ConnectionTable
           connections={filterConn}
-          onShowDetail={(detail) => detailRef.current?.open(detail)}
+          onShowDetail={(detail) =>
+            detailRef.current?.open(detail, connectionsType === "closed")
+          }
           columnManagerOpen={isTableLayout && isColumnManagerOpen}
           onOpenColumnManager={() => setIsColumnManagerOpen(true)}
           onCloseColumnManager={() => setIsColumnManagerOpen(false)}
@@ -276,12 +248,34 @@ const ConnectionsPage = () => {
           itemContent={(_, item) => (
             <ConnectionItem
               value={item}
-              onShowDetail={() => detailRef.current?.open(item)}
+              closed={connectionsType === "closed"}
+              onShowDetail={() =>
+                detailRef.current?.open(item, connectionsType === "closed")
+              }
             />
           )}
         />
       )}
       <ConnectionDetail ref={detailRef} />
+      <Zoom
+        in={connectionsType === "closed" && filterConn.length > 0}
+        unmountOnExit
+      >
+        <Fab
+          size="medium"
+          variant="extended"
+          sx={{
+            position: "absolute",
+            right: 16,
+            bottom: isTableLayout ? 70 : 16,
+          }}
+          color="primary"
+          onClick={() => clearClosedConnections()}
+        >
+          <DeleteForeverRounded sx={{ mr: 1 }} fontSize="small" />
+          {t("shared.actions.clear")}
+        </Fab>
+      </Zoom>
     </BasePage>
   );
 };

src/types/generated/i18n-keys.ts

@@ -17,6 +17,8 @@ export const translationKeys = [
   "connections.components.order.default",
   "connections.components.order.uploadSpeed",
   "connections.components.order.downloadSpeed",
+  "connections.components.actions.active",
+  "connections.components.actions.closed",
   "connections.components.actions.closeConnection",
   "connections.components.columnManager.title",
   "connections.components.columnManager.dragHandle",

src/types/generated/i18n-resources.ts

@@ -6,7 +6,9 @@ export interface TranslationResources {
     connections: {
       components: {
         actions: {
+          active: string;
           closeConnection: string;
+          closed: string;
         };
         columnManager: {
           dragHandle: string;