diff --git a/src/components/layout/use-log-setup.ts b/src/components/layout/use-log-setup.ts
index 2d05477061..75885a4735 100644
--- a/src/components/layout/use-log-setup.ts
+++ b/src/components/layout/use-log-setup.ts
@@ -5,15 +5,20 @@ import { listen } from "@tauri-apps/api/event";
import { getInformation } from "@/services/api";
import { getClashLogs } from "@/services/cmds";
import { atomLogData } from "@/services/states";
+import useLogToggle from "./use-log-toggle";
const MAX_LOG_NUM = 1000;
// setup the log websocket
export default function useLogSetup() {
const [refresh, setRefresh] = useState({});
+
+ const [enableLog] = useLogToggle();
const setLogData = useSetRecoilState(atomLogData);
useEffect(() => {
+ if (!enableLog) return;
+
getClashLogs().then(setLogData);
let ws: WebSocket = null!;
@@ -41,5 +46,5 @@ export default function useLogSetup() {
ws?.close();
unlisten?.then((fn) => fn());
};
- }, [refresh]);
+ }, [refresh, enableLog]);
}
diff --git a/src/components/layout/use-log-toggle.ts b/src/components/layout/use-log-toggle.ts
new file mode 100644
index 0000000000..36e1f80a3e
--- /dev/null
+++ b/src/components/layout/use-log-toggle.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { atomEnableLog } from "@/services/states";
+
+const LOG_KEY = "enable-log";
+
+export default function useLogToggle() {
+ const [enableLog, setEnableLog] = useRecoilState(atomEnableLog);
+
+ useEffect(() => {
+ try {
+ setEnableLog(localStorage.getItem(LOG_KEY) !== "false");
+ } catch {}
+ }, []);
+
+ const setter = (enable: boolean) => {
+ try {
+ localStorage.setItem(LOG_KEY, enable.toString());
+ } catch {}
+ setEnableLog(enable);
+ };
+
+ return [enableLog, setter];
+}
diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx
index b749291dee..54dd2b2efe 100644
--- a/src/pages/logs.tsx
+++ b/src/pages/logs.tsx
@@ -1,16 +1,29 @@
import { useMemo, useState } from "react";
import { useRecoilState } from "recoil";
-import { Box, Button, MenuItem, Paper, Select, TextField } from "@mui/material";
+import {
+ Box,
+ Button,
+ IconButton,
+ MenuItem,
+ Paper,
+ Select,
+ TextField,
+} from "@mui/material";
import { Virtuoso } from "react-virtuoso";
import { useTranslation } from "react-i18next";
-import { atomLogData } from "@/services/states";
+import {
+ PlayCircleOutlineRounded,
+ PauseCircleOutlineRounded,
+} from "@mui/icons-material";
+import { atomEnableLog, atomLogData } from "@/services/states";
import BasePage from "@/components/base/base-page";
-import LogItem from "@/components/log/log-item";
import BaseEmpty from "@/components/base/base-empty";
+import LogItem from "@/components/log/log-item";
const LogPage = () => {
const { t } = useTranslation();
const [logData, setLogData] = useRecoilState(atomLogData);
+ const [enableLog, setEnableLog] = useRecoilState(atomEnableLog);
const [logState, setLogState] = useState("all");
const [filterText, setFilterText] = useState("");
@@ -29,14 +42,27 @@ const LogPage = () => {
title={t("Logs")}
contentStyle={{ height: "100%" }}
header={
-
+
+ setEnableLog((e) => !e)}
+ >
+ {enableLog ? (
+
+ ) : (
+
+ )}
+
+
+
+
}
>
diff --git a/src/services/states.ts b/src/services/states.ts
index c283d0b52d..3f322e388d 100644
--- a/src/services/states.ts
+++ b/src/services/states.ts
@@ -15,6 +15,11 @@ export const atomLogData = atom({
default: [],
});
+export const atomEnableLog = atom({
+ key: "atomEnableLog",
+ default: true,
+});
+
// save the state of each profile item loading
export const atomLoadingCache = atom>({
key: "atomLoadingCache",