refactor: use zustand store, rewrite log clearing logic

src/hooks/use-log-data.ts

@@ -3,12 +3,20 @@ import { useEnableLog } from "../services/states";
 import { createSockette } from "../utils/websocket";
 import { useClashInfo } from "./use-clash";
 import dayjs from "dayjs";
+import { create } from "zustand";
 
 const MAX_LOG_NUM = 1000;
 
-// 添加 LogLevel 类型定义
 export type LogLevel = "warning" | "info" | "debug" | "error";
 
+// 添加 ILogItem 接口定义
+interface ILogItem {
+  time?: string;
+  type: string;
+  payload: string;
+  [key: string]: any;
+}
+
 const buildWSUrl = (server: string, secret: string, logLevel: LogLevel) => {
   const baseUrl = `ws://${server}/logs`;
   const params = new URLSearchParams();
@@ -21,12 +29,44 @@ const buildWSUrl = (server: string, secret: string, logLevel: LogLevel) => {
   return queryString ? `${baseUrl}?${queryString}` : baseUrl;
 };
 
+interface LogStore {
+  logs: Record<LogLevel, ILogItem[]>;
+  clearLogs: (level?: LogLevel) => void;
+  appendLog: (level: LogLevel, log: ILogItem) => void;
+}
+
+const useLogStore = create<LogStore>(
+  (set: (fn: (state: LogStore) => Partial<LogStore>) => void) => ({
+    logs: {
+      warning: [],
+      info: [],
+      debug: [],
+      error: [],
+    },
+    clearLogs: (level?: LogLevel) =>
+      set((state: LogStore) => ({
+        logs: level
+          ? { ...state.logs, [level]: [] }
+          : { warning: [], info: [], debug: [], error: [] },
+      })),
+    appendLog: (level: LogLevel, log: ILogItem) =>
+      set((state: LogStore) => {
+        const currentLogs = state.logs[level];
+        const newLogs =
+          currentLogs.length >= MAX_LOG_NUM
+            ? [...currentLogs.slice(1), log]
+            : [...currentLogs, log];
+        return { logs: { ...state.logs, [level]: newLogs } };
+      }),
+  })
+);
+
 export const useLogData = (logLevel: LogLevel) => {
   const { clashInfo } = useClashInfo();
-
   const [enableLog] = useEnableLog();
+  const { logs, appendLog } = useLogStore();
 
-  return useSWRSubscription<ILogItem[], any, [string, LogLevel] | null>(
+  useSWRSubscription<ILogItem[], any, [string, LogLevel] | null>(
     enableLog && clashInfo ? ["getClashLog", logLevel] : null,
     (_key, { next }) => {
       const { server = "", secret = "" } = clashInfo!;
@@ -34,14 +74,8 @@ export const useLogData = (logLevel: LogLevel) => {
       const s = createSockette(buildWSUrl(server, secret, logLevel), {
         onmessage(event) {
           const data = JSON.parse(event.data) as ILogItem;
-
-          // append new log item on socket message
-          next(null, (l = []) => {
-            const time = dayjs().format("MM-DD HH:mm:ss");
-
-            if (l.length >= MAX_LOG_NUM) l.shift();
-            return [...l, { ...data, time }];
-          });
+          const time = dayjs().format("MM-DD HH:mm:ss");
+          appendLog(logLevel, { ...data, time });
         },
         onerror(event) {
           this.close();
@@ -52,10 +86,13 @@ export const useLogData = (logLevel: LogLevel) => {
       return () => {
         s.close();
       };
-    },
-    {
-      fallbackData: [],
-      keepPreviousData: true,
     }
   );
+
+  return logs[logLevel];
+};
+
+// 导出清空日志的方法
+export const clearLogs = (level?: LogLevel) => {
+  useLogStore.getState().clearLogs(level);
 };

src/pages/logs.tsx

@@ -6,7 +6,7 @@ import {
   PlayCircleOutlineRounded,
   PauseCircleOutlineRounded,
 } from "@mui/icons-material";
-import { useLogData, LogLevel } from "@/hooks/use-log-data";
+import { useLogData, LogLevel, clearLogs } from "@/hooks/use-log-data";
 import { useEnableLog } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
@@ -22,7 +22,7 @@ const LogPage = () => {
   const isDark = theme.palette.mode === "dark";
   const [logState, setLogState] = useState<LogLevel>("info");
   const [match, setMatch] = useState(() => (_: string) => true);
-  const { data: logData } = useLogData(logState);
+  const logData = useLogData(logState);
 
   const filterLogs = useMemo(() => {
     return logData
@@ -56,10 +56,8 @@ const LogPage = () => {
             <Button
               size="small"
               variant="contained"
-              // useSWRSubscription adds a prefix "$sub$" to the cache key
-              // https://github.com/vercel/swr/blob/1585a3e37d90ad0df8097b099db38f1afb43c95d/src/subscription/index.ts#L37
               onClick={() => {
-                mutate("$sub$getClashLog", []);
+                clearLogs(logState);
               }}
             >
               {t("Clear")}