feat: refactor logging system into a global service

src/pages/_layout.tsx

@@ -13,7 +13,7 @@ import { useVerge } from "@/hooks/use-verge";
 import LogoSvg from "@/assets/image/logo.svg?react";
 import iconLight from "@/assets/image/icon_light.svg?react";
 import iconDark from "@/assets/image/icon_dark.svg?react";
-import { useThemeMode } from "@/services/states";
+import { useThemeMode, useEnableLog } from "@/services/states";
 import { Notice } from "@/components/base";
 import { LayoutItem } from "@/components/layout/layout-item";
 import { LayoutControl } from "@/components/layout/layout-control";
@@ -28,6 +28,8 @@ import React from "react";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { useListen } from "@/hooks/use-listen";
 import { listen } from "@tauri-apps/api/event";
+import { useClashInfo } from "@/hooks/use-clash";
+import { initGlobalLogService } from "@/services/global-log-service";
 
 const appWindow = getCurrentWebviewWindow();
 export let portableFlag = false;
@@ -126,6 +128,8 @@ const Layout = () => {
   const { t } = useTranslation();
   const { theme } = useCustomTheme();
   const { verge } = useVerge();
+  const { clashInfo } = useClashInfo();
+  const [enableLog] = useEnableLog();
   const { language, start_page } = verge ?? {};
   const navigate = useNavigate();
   const location = useLocation();
@@ -140,6 +144,15 @@ const Layout = () => {
     [t, navigate],
   );
 
+  // 初始化全局日志服务
+  useEffect(() => {
+    if (clashInfo) {
+      const { server = "", secret = "" } = clashInfo;
+      // 使用本地存储中的enableLog值初始化全局日志服务
+      initGlobalLogService(server, secret, enableLog, "info");
+    }
+  }, [clashInfo, enableLog]);
+
   // 设置监听器
   useEffect(() => {
     const listeners = [

src/pages/logs.tsx

@@ -8,7 +8,8 @@ import {
   PlayCircleOutlineRounded,
   PauseCircleOutlineRounded,
 } from "@mui/icons-material";
-import { useLogData, LogLevel, clearLogs } from "@/hooks/use-log-data";
+import { LogLevel, clearLogs } from "@/hooks/use-log-data";
+import { useClashInfo } from "@/hooks/use-clash";
 import { useEnableLog } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
@@ -16,10 +17,17 @@ import { useTheme } from "@mui/material/styles";
 import { BaseSearchBox } from "@/components/base/base-search-box";
 import { BaseStyledSelect } from "@/components/base/base-styled-select";
 import { SearchState } from "@/components/base/base-search-box";
+import {
+  useGlobalLogData,
+  clearGlobalLogs,
+  changeLogLevel,
+  toggleLogEnabled,
+} from "@/services/global-log-service";
 
 const LogPage = () => {
   const { t } = useTranslation();
   const [enableLog, setEnableLog] = useEnableLog();
+  const { clashInfo } = useClashInfo();
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
   const [logLevel, setLogLevel] = useLocalStorage<LogLevel>(
@@ -27,7 +35,7 @@ const LogPage = () => {
     "info",
   );
   const [match, setMatch] = useState(() => (_: string) => true);
-  const logData = useLogData(logLevel);
+  const logData = useGlobalLogData(logLevel);
   const [searchState, setSearchState] = useState<SearchState>();
 
   const filterLogs = useMemo(() => {
@@ -44,6 +52,22 @@ const LogPage = () => {
       : [];
   }, [logData, logLevel, match]);
 
+  const handleLogLevelChange = (newLevel: LogLevel) => {
+    setLogLevel(newLevel);
+    if (clashInfo) {
+      const { server = "", secret = "" } = clashInfo;
+      changeLogLevel(newLevel, server, secret);
+    }
+  };
+
+  const handleToggleLog = () => {
+    if (clashInfo) {
+      const { server = "", secret = "" } = clashInfo;
+      toggleLogEnabled(server, secret);
+      setEnableLog(!enableLog);
+    }
+  };
+
   return (
     <BasePage
       full
@@ -60,7 +84,7 @@ const LogPage = () => {
             title={t("Pause")}
             size="small"
             color="inherit"
-            onClick={() => setEnableLog((e) => !e)}
+            onClick={handleToggleLog}
           >
             {enableLog ? (
               <PauseCircleOutlineRounded />
@@ -74,7 +98,7 @@ const LogPage = () => {
               size="small"
               variant="contained"
               onClick={() => {
-                clearLogs();
+                clearGlobalLogs();
               }}
             >
               {t("Clear")}
@@ -95,7 +119,7 @@ const LogPage = () => {
       >
         <BaseStyledSelect
           value={logLevel}
-          onChange={(e) => setLogLevel(e.target.value as LogLevel)}
+          onChange={(e) => handleLogLevelChange(e.target.value as LogLevel)}
         >
           <MenuItem value="all">ALL</MenuItem>
           <MenuItem value="info">INFO</MenuItem>