From 2defa2cc560b89f9f2b78b2fefbb1e96d8360018 Mon Sep 17 00:00:00 2001
From: wonfen <eiwonfen@gmail.com>
Date: Wed, 19 Feb 2025 13:06:15 +0800
Subject: [PATCH] refactor: Simplify log data management and improve search
 functionality

---
 src/components/log/log-item.tsx |  4 +--
 src/hooks/use-log-data.ts       | 44 ++++++++++++++-------------------
 src/pages/logs.tsx              | 16 +++++++-----
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/components/log/log-item.tsx b/src/components/log/log-item.tsx
index 18e3a898..23551473 100644
--- a/src/components/log/log-item.tsx
+++ b/src/components/log/log-item.tsx
@@ -85,9 +85,9 @@ const LogItem = ({ value, searchState }: Props) => {
   return (
     <Item>
       <div>
-        <span className="time">{value.time}</span>
+        <span className="time">{renderHighlightText(value.time || "")}</span>
         <span className="type" data-type={value.type.toLowerCase()}>
-          {value.type}
+          {renderHighlightText(value.type)}
         </span>
       </div>
       <div>
diff --git a/src/hooks/use-log-data.ts b/src/hooks/use-log-data.ts
index f1d59ac8..3db2cf9d 100644
--- a/src/hooks/use-log-data.ts
+++ b/src/hooks/use-log-data.ts
@@ -34,34 +34,25 @@ const buildWSUrl = (server: string, secret: string, logLevel: LogLevel) => {
 };
 
 interface LogStore {
-  logs: Record<LogLevel, ILogItem[]>;
-  clearLogs: (level?: LogLevel) => void;
-  appendLog: (level: LogLevel, log: ILogItem) => void;
+  logs: ILogItem[];
+  clearLogs: () => void;
+  appendLog: (log: ILogItem) => void;
 }
 
 const useLogStore = create<LogStore>(
   (set: (fn: (state: LogStore) => Partial<LogStore>) => void) => ({
-    logs: {
-      warning: [],
-      info: [],
-      debug: [],
-      error: [],
-      all: [],
-    },
-    clearLogs: (level?: LogLevel) =>
-      set((state: LogStore) => ({
-        logs: level
-          ? { ...state.logs, [level]: [] }
-          : { warning: [], info: [], debug: [], error: [], all: [] },
+    logs: [],
+    clearLogs: () =>
+      set(() => ({
+        logs: [],
       })),
-    appendLog: (level: LogLevel, log: ILogItem) =>
+    appendLog: (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 } };
+          state.logs.length >= MAX_LOG_NUM
+            ? [...state.logs.slice(1), log]
+            : [...state.logs, log];
+        return { logs: newLogs };
       }),
   }),
 );
@@ -84,7 +75,7 @@ export const useLogData = (logLevel: LogLevel) => {
         if (!isActive) return;
         const data = JSON.parse(event.data) as ILogItem;
         const time = dayjs().format("MM-DD HH:mm:ss");
-        appendLog(logLevel, { ...data, time });
+        appendLog({ ...data, time });
       },
       onerror() {
         if (!isActive) return;
@@ -98,10 +89,13 @@ export const useLogData = (logLevel: LogLevel) => {
     };
   }, [clashInfo, enableLog, logLevel]);
 
-  return logs[logLevel];
+  // 根据当前选择的日志等级过滤日志
+  return logLevel === "all"
+    ? logs
+    : logs.filter((log) => log.type.toLowerCase() === logLevel);
 };
 
 // 导出清空日志的方法
-export const clearLogs = (level?: LogLevel) => {
-  useLogStore.getState().clearLogs(level);
+export const clearLogs = () => {
+  useLogStore.getState().clearLogs();
 };
diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx
index 80ff6933..0784f3d4 100644
--- a/src/pages/logs.tsx
+++ b/src/pages/logs.tsx
@@ -32,11 +32,15 @@ const LogPage = () => {
 
   const filterLogs = useMemo(() => {
     return logData
-      ? logData.filter((data) =>
-          logLevel === "all"
-            ? match(data.payload)
-            : data.type.includes(logLevel) && match(data.payload),
-        )
+      ? logData.filter((data) => {
+          // 构建完整的搜索文本，包含时间、类型和内容
+          const searchText =
+            `${data.time || ""} ${data.type} ${data.payload}`.toLowerCase();
+
+          return logLevel === "all"
+            ? match(searchText)
+            : data.type.toLowerCase() === logLevel && match(searchText);
+        })
       : [];
   }, [logData, logLevel, match]);
 
@@ -70,7 +74,7 @@ const LogPage = () => {
               size="small"
               variant="contained"
               onClick={() => {
-                clearLogs(logLevel);
+                clearLogs();
               }}
             >
               {t("Clear")}