refactor: api and command

src/components/connection-item.tsx

@@ -0,0 +1,13 @@
+import { ApiType } from "../services/types";
+
+interface Props {
+  value: ApiType.ConnectionsItem;
+}
+
+const ConnectionItem = (props: Props) => {
+  const { value } = props;
+
+  return <div>{value.metadata.host || value.metadata.destinationIP}</div>;
+};
+
+export default ConnectionItem;

src/components/layout-item.tsx

@@ -2,7 +2,7 @@ import { alpha, ListItem, ListItemButton, ListItemText } from "@mui/material";
 import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
 import type { LinkProps } from "react-router-dom";
 
-const ListItemLink = (props: LinkProps) => {
+const LayoutItem = (props: LinkProps) => {
   const { to, children } = props;
 
   const resolved = useResolvedPath(to);
@@ -41,4 +41,4 @@ const ListItemLink = (props: LinkProps) => {
   );
 };
 
-export default ListItemLink;
+export default LayoutItem;

src/components/log-item.tsx

@@ -1,6 +1,7 @@
 import { styled, Box } from "@mui/material";
+import { ApiType } from "../services/types";
 
-const LogItem = styled(Box)(({ theme }) => ({
+const Item = styled(Box)(({ theme }) => ({
   padding: "8px 0",
   margin: "0 12px",
   lineHeight: 1.35,
@@ -8,8 +9,7 @@ const LogItem = styled(Box)(({ theme }) => ({
   "& .time": {},
   "& .type": {
     display: "inline-block",
-    width: 50,
-    margin: "0 4px",
+    padding: "0 6px",
     textAlign: "center",
     borderRadius: 2,
     textTransform: "uppercase",
@@ -18,4 +18,20 @@ const LogItem = styled(Box)(({ theme }) => ({
   "& .data": {},
 }));
 
+interface Props {
+  value: ApiType.LogItem;
+}
+
+const LogItem = (props: Props) => {
+  const { value } = props;
+
+  return (
+    <Item>
+      <span className="time">{value.time}</span>
+      <span className="type">{value.type}</span>
+      <span className="data">{value.payload}</span>
+    </Item>
+  );
+};
+
 export default LogItem;

src/components/profile-item.tsx

@@ -10,7 +10,7 @@ import {
   IconButton,
 } from "@mui/material";
 import { MenuRounded } from "@mui/icons-material";
-import { ProfileItem } from "../services/command";
+import { CmdType } from "../services/types";
 import parseTraffic from "../utils/parse-traffic";
 import relativeTime from "dayjs/plugin/relativeTime";
 
@@ -29,7 +29,7 @@ const Wrapper = styled(Box)(({ theme }) => ({
 
 interface Props {
   selected: boolean;
-  itemData: ProfileItem;
+  itemData: CmdType.ProfileItem;
   onClick: () => void;
   onUpdate: () => void;
 }

src/components/proxy-group.tsx

@@ -20,11 +20,11 @@ import {
   NetworkCheckRounded,
   CheckCircleOutlineRounded,
 } from "@mui/icons-material";
-import services from "../services";
-import type { ProxyItem, ProxyGroupItem } from "../services/proxy";
+import { updateProxy } from "../services/api";
+import { ApiType } from "../services/types";
 
 interface ItemProps {
-  proxy: ProxyItem;
+  proxy: ApiType.ProxyItem;
   selected: boolean;
   onClick?: (name: string) => void;
 }
@@ -66,7 +66,7 @@ const Item = ({ proxy, selected, onClick }: ItemProps) => {
 };
 
 interface Props {
-  group: ProxyGroupItem;
+  group: ApiType.ProxyGroupItem;
 }
 
 const ProxyGroup = ({ group }: Props) => {
@@ -85,7 +85,7 @@ const ProxyGroup = ({ group }: Props) => {
     const oldValue = now;
     try {
       setNow(name);
-      await services.updateProxy(group.name, name);
+      await updateProxy(group.name, name);
     } catch {
       setNow(oldValue);
       // Todo

src/components/setting-clash.tsx

@@ -8,8 +8,9 @@ import {
   Select,
   MenuItem,
 } from "@mui/material";
-import { ConfigType, getClashConfig, updateConfigs } from "../services/common";
-import { patchClashConfig } from "../services/command";
+import { getClashConfig, updateConfigs } from "../services/api";
+import { patchClashConfig } from "../services/cmds";
+import { ApiType } from "../services/types";
 import GuardState from "./guard-state";
 import SettingItem from "./setting-item";
 
@@ -30,11 +31,11 @@ const SettingClash = ({ onError }: Props) => {
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
 
-  const onChangeData = (patch: Partial<ConfigType>) => {
+  const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
     mutate("getClashConfig", { ...clashConfig, ...patch }, false);
   };
 
-  const onUpdateData = async (patch: Partial<ConfigType>) => {
+  const onUpdateData = async (patch: Partial<ApiType.ConfigData>) => {
     await updateConfigs(patch);
     await patchClashConfig(patch);
   };

src/components/setting-verge.tsx

@@ -4,8 +4,8 @@ import {
   getVergeConfig,
   patchVergeConfig,
   setSysProxy,
-  VergeConfig,
-} from "../services/command";
+} from "../services/cmds";
+import { CmdType } from "../services/types";
 import GuardState from "./guard-state";
 import SettingItem from "./setting-item";
 import PaletteSwitch from "./palette-switch";
@@ -26,7 +26,7 @@ const SettingVerge = ({ onError }: Props) => {
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
 
-  const onChangeData = (patch: Partial<VergeConfig>) => {
+  const onChangeData = (patch: Partial<CmdType.VergeConfig>) => {
     mutate("getVergeConfig", { ...vergeConfig, ...patch }, false);
   };
 

src/components/traffic.tsx

@@ -1,32 +1,22 @@
-import { CancelTokenSource } from "axios";
 import { useEffect, useState } from "react";
 import { Box, Typography } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
+import { getInfomation } from "../services/api";
+import { ApiType } from "../services/types";
 import parseTraffic from "../utils/parse-traffic";
-import services from "../services";
 
 const Traffic = () => {
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
 
   useEffect(() => {
-    let timer: any = null;
-    let source: CancelTokenSource | null = null;
+    const { server, secret } = getInfomation();
+    const ws = new WebSocket(`ws://${server}/traffic?token=${secret}`);
 
-    async function onTraffic() {
-      timer = null;
-      try {
-        source = await services.getTraffic(setTraffic);
-      } catch {
-        timer = setTimeout(onTraffic, 500);
-      }
-    }
+    ws.addEventListener("message", (event) => {
+      setTraffic(JSON.parse(event.data) as ApiType.TrafficItem);
+    });
 
-    onTraffic();
-
-    return () => {
-      if (timer) clearTimeout(timer);
-      source?.cancel();
-    };
+    return () => ws.close();
   }, []);
 
   const [up, upUnit] = parseTraffic(traffic.up);