refactor: Simplify log data management and improve search functionality

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>

src/hooks/use-log-data.ts

@@ -34,34 +34,25 @@ const buildWSUrl = (server: string, secret: string, logLevel: LogLevel) => {
 };
 
 interface LogStore {
-  logs: Record<LogLevel, ILogItem[]>;
+  logs: ILogItem[];
-  clearLogs: (level?: LogLevel) => void;
+  clearLogs: () => void;
-  appendLog: (level: LogLevel, log: ILogItem) => void;
+  appendLog: (log: ILogItem) => void;
 }
 
 const useLogStore = create<LogStore>(
   (set: (fn: (state: LogStore) => Partial<LogStore>) => void) => ({
-    logs: {
+    logs: [],
-      warning: [],
+    clearLogs: () =>
-      info: [],
+      set(() => ({
-      debug: [],
+        logs: [],
-      error: [],
-      all: [],
-    },
-    clearLogs: (level?: LogLevel) =>
-      set((state: LogStore) => ({
-        logs: level
-          ? { ...state.logs, [level]: [] }
-          : { warning: [], info: [], debug: [], error: [], all: [] },
       })),
-    appendLog: (level: LogLevel, log: ILogItem) =>
+    appendLog: (log: ILogItem) =>
       set((state: LogStore) => {
-        const currentLogs = state.logs[level];
         const newLogs =
-          currentLogs.length >= MAX_LOG_NUM
+          state.logs.length >= MAX_LOG_NUM
-            ? [...currentLogs.slice(1), log]
+            ? [...state.logs.slice(1), log]
-            : [...currentLogs, log];
+            : [...state.logs, log];
-        return { logs: { ...state.logs, [level]: newLogs } };
+        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) => {
+export const clearLogs = () => {
-  useLogStore.getState().clearLogs(level);
+  useLogStore.getState().clearLogs();
 };

src/pages/logs.tsx

@@ -32,11 +32,15 @@ const LogPage = () => {
 
   const filterLogs = useMemo(() => {
     return logData
-      ? logData.filter((data) =>
+      ? logData.filter((data) => {
-          logLevel === "all"
+          // 构建完整的搜索文本，包含时间、类型和内容
-            ? match(data.payload)
+          const searchText =
-            : data.type.includes(logLevel) && match(data.payload),
+            `${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")}