refactor: api and command

src/pages/_layout.tsx

@@ -4,7 +4,8 @@ import { Route, Routes } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { createTheme, List, Paper, ThemeProvider } from "@mui/material";
 import { atomPaletteMode } from "../states/setting";
-import { getVergeConfig } from "../services/command";
+import { getClashInfo, getVergeConfig } from "../services/cmds";
+import { initAxios } from "../services/api";
 import LogoSvg from "../assets/image/logo.svg";
 import LogPage from "./log";
 import HomePage from "./home";
@@ -12,7 +13,7 @@ import ProfilePage from "./profile";
 import ProxyPage from "./proxy";
 import SettingPage from "./setting";
 import ConnectionsPage from "./connections";
-import ListItemLink from "../components/list-item-link";
+import LayoutItem from "../components/layout-item";
 import Traffic from "../components/traffic";
 
 const routers = [
@@ -42,6 +43,12 @@ const Layout = () => {
   const [mode, setMode] = useRecoilState(atomPaletteMode);
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
+  useEffect(() => {
+    getClashInfo()
+      .then((result) => initAxios(result?.controller ?? {}))
+      .catch(() => console.error("can not initialize clash verge"));
+  }, []);
+
   useEffect(() => {
     setMode(vergeConfig?.theme_mode ?? "light");
   }, [vergeConfig?.theme_mode]);
@@ -95,9 +102,9 @@ const Layout = () => {
 
             <List sx={{ userSelect: "none" }}>
               {routers.map((router) => (
-                <ListItemLink key={router.label} to={router.link}>
+                <LayoutItem key={router.label} to={router.link}>
                   {router.label}
-                </ListItemLink>
+                </LayoutItem>
               ))}
             </List>
 

src/pages/connections.tsx

@@ -1,21 +1,45 @@
-import { useEffect } from "react";
-import { Box, Typography } from "@mui/material";
-import services from "../services";
+import { useEffect, useState } from "react";
+import { Box, Paper, Typography } from "@mui/material";
+import { Virtuoso } from "react-virtuoso";
+import { getInfomation } from "../services/api";
+import { ApiType } from "../services/types";
+import ConnectionItem from "../components/connection-item";
 
 const ConnectionsPage = () => {
-  useEffect(() => {
-    const sourcePromise = services.getLogs(console.log);
+  const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
+  const [conn, setConn] = useState<ApiType.Connections>(initConn);
 
-    return () => {
-      sourcePromise.then((src) => src.cancel());
-    };
+  useEffect(() => {
+    const { server, secret } = getInfomation();
+    const ws = new WebSocket(`ws://${server}/connections?token=${secret}`);
+
+    ws.addEventListener("message", (event) => {
+      const data = JSON.parse(event.data) as ApiType.Connections;
+      setConn(data);
+    });
+
+    return () => ws.close();
   }, []);
 
   return (
-    <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
+    <Box
+      sx={{
+        width: 0.9,
+        maxWidth: "850px",
+        height: "100%",
+        mx: "auto",
+      }}
+    >
       <Typography variant="h4" component="h1" sx={{ py: 2 }}>
         Connections
       </Typography>
+
+      <Paper sx={{ boxShadow: 2, height: "calc(100% - 100px)" }}>
+        <Virtuoso
+          data={conn.connections}
+          itemContent={(index, item) => <ConnectionItem value={item} />}
+        />
+      </Paper>
     </Box>
   );
 };

src/pages/log.tsx

@@ -2,24 +2,26 @@ import dayjs from "dayjs";
 import { useEffect, useRef, useState } from "react";
 import { Box, Button, Paper, Typography } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
+import { ApiType } from "../services/types";
+import { getInfomation } from "../services/api";
 import LogItem from "../components/log-item";
-import services from "../services";
 
-let logCache: any[] = [];
+let logCache: ApiType.LogItem[] = [];
 
 const LogPage = () => {
-  const [logData, setLogData] = useState<any[]>(logCache);
+  const [logData, setLogData] = useState(logCache);
 
   useEffect(() => {
-    const sourcePromise = services.getLogs((t) => {
+    const info = getInfomation();
+    const ws = new WebSocket(`ws://${info.server}/logs?token=${info.secret}`);
+
+    ws.addEventListener("message", (event) => {
+      const data = JSON.parse(event.data) as ApiType.LogItem;
       const time = dayjs().format("MM-DD HH:mm:ss");
-      const item = { ...t, time };
-      setLogData((l) => (logCache = [...l, item]));
+      setLogData((l) => (logCache = [...l, { ...data, time }]));
     });
 
-    return () => {
-      sourcePromise.then((src) => src.cancel("cancel"));
-    };
+    return () => ws.close();
   }, []);
 
   return (
@@ -52,15 +54,7 @@ const LogPage = () => {
         <Virtuoso
           initialTopMostItemIndex={999}
           data={logData}
-          itemContent={(index, logItem) => {
-            return (
-              <LogItem>
-                <span className="time">{logItem.time}</span>
-                <span className="type">{logItem.type}</span>
-                <span className="data">{logItem.payload}</span>
-              </LogItem>
-            );
-          }}
+          itemContent={(index, item) => <LogItem value={item} />}
           followOutput={"smooth"}
         />
       </Paper>

src/pages/profile.tsx

@@ -1,13 +1,13 @@
 import { useRef, useState } from "react";
 import useSWR, { useSWRConfig } from "swr";
 import { Box, Button, Grid, TextField, Typography } from "@mui/material";
-import services from "../services";
 import {
   getProfiles,
   importProfile,
   putProfiles,
   updateProfile,
-} from "../services/command";
+} from "../services/cmds";
+import { getProxies } from "../services/api";
 import ProfileItemComp from "../components/profile-item";
 import useNotice from "../utils/use-notice";
 import noop from "../utils/noop";
@@ -44,7 +44,7 @@ const ProfilePage = () => {
     putProfiles(index)
       .then(() => {
         mutate("getProfiles", { ...profiles, current: index }, true);
-        mutate("getProxies", services.getProxies());
+        mutate("getProxies", getProxies());
       })
       .catch((err) => {
         console.error(err);

src/pages/proxy.tsx

@@ -1,10 +1,10 @@
 import useSWR from "swr";
 import { Box, List, Paper, Typography } from "@mui/material";
-import services from "../services";
+import { getProxies } from "../services/api";
 import ProxyGroup from "../components/proxy-group";
 
 const ProxyPage = () => {
-  const { data } = useSWR("getProxies", services.getProxies);
+  const { data } = useSWR("getProxies", getProxies);
   const { groups = [] } = data ?? {};
 
   return (