feat: connections page simply support

src/pages/connections.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
-import { Paper } from "@mui/material";
+import { useLockFn } from "ahooks";
+import { Button, Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
 import { ApiType } from "../services/types";
-import { getInfomation } from "../services/api";
+import { closeAllConnections, getInfomation } from "../services/api";
 import BasePage from "../components/base/base-page";
 import ConnectionItem from "../components/connection/connection-item";
 
@@ -29,10 +30,26 @@ const ConnectionsPage = () => {
     return () => ws?.close();
   }, []);
 
+  const onCloseAll = useLockFn(closeAllConnections);
+
   return (
-    <BasePage title={t("Connections")} contentStyle={{ height: "100%" }}>
+    <BasePage
+      title={t("Connections")}
+      contentStyle={{ height: "100%" }}
+      header={
+        <Button
+          size="small"
+          sx={{ mt: 1 }}
+          variant="contained"
+          onClick={onCloseAll}
+        >
+          {t("Close All")}
+        </Button>
+      }
+    >
       <Paper sx={{ boxShadow: 2, height: "100%" }}>
         <Virtuoso
+          initialTopMostItemIndex={999}
           data={conn.connections}
           itemContent={(index, item) => <ConnectionItem value={item} />}
         />