feat(logs): support reverse chronological order #5513

Closes #5513

Changelog.md

@@ -17,6 +17,7 @@
 - 支持连接页面各个项目的排序
 - 实现可选的自动备份
 - 连接页面支持查看已关闭的连接（最近最多 500 个已关闭连接）
+- 日志页面支持按时间倒序
 
 </details>
 

src/locales/ar/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "السجلات"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/de/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Protokolle"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/en/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Logs"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/es/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Registros"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/fa/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "لاگ‌ها"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/id/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Log"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/jp/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "ログ"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/ko/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "로그"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/ru/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Логи"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/tr/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Günlükler"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/tt/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Логлар"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }

src/locales/zh/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "日志"
+  },
+  "actions": {
+    "showDescending": "按时间倒序",
+    "showAscending": "按时间正序"
   }
 }

src/locales/zhtw/logs.json

@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "日誌"
+  },
+  "actions": {
+    "showDescending": "按時間倒序",
+    "showAscending": "按時間正序"
   }
 }

src/pages/logs.tsx

@@ -1,6 +1,7 @@
 import {
   PlayCircleOutlineRounded,
   PauseCircleOutlineRounded,
+  SwapVertRounded,
 } from "@mui/icons-material";
 import { Box, Button, IconButton, MenuItem } from "@mui/material";
 import { useMemo, useState } from "react";
@@ -20,6 +21,8 @@ const LogPage = () => {
   const [clashLog, setClashLog] = useClashLog();
   const enableLog = clashLog.enable;
   const logState = clashLog.logFilter;
+  const logOrder = clashLog.logOrder ?? "asc";
+  const isDescending = logOrder === "desc";
 
   const [match, setMatch] = useState(() => (_: string) => true);
   const [searchState, setSearchState] = useState<SearchState>();
@@ -49,6 +52,11 @@ const LogPage = () => {
     });
   }, [logData, logState, match]);
 
+  const filteredLogs = useMemo(
+    () => (isDescending ? [...filterLogs].reverse() : filterLogs),
+    [filterLogs, isDescending],
+  );
+
   const handleLogLevelChange = (newLevel: string) => {
     setClashLog((pre: any) => ({ ...pre, logFilter: newLevel }));
   };
@@ -57,6 +65,13 @@ const LogPage = () => {
     setClashLog((pre: any) => ({ ...pre, enable: !enableLog }));
   };
 
+  const handleToggleOrder = () => {
+    setClashLog((pre: any) => ({
+      ...pre,
+      logOrder: pre.logOrder === "desc" ? "asc" : "desc",
+    }));
+  };
+
   return (
     <BasePage
       full
@@ -86,6 +101,28 @@ const LogPage = () => {
               <PlayCircleOutlineRounded />
             )}
           </IconButton>
+          <IconButton
+            title={t(
+              isDescending
+                ? "logs.actions.showAscending"
+                : "logs.actions.showDescending",
+            )}
+            aria-label={t(
+              isDescending
+                ? "logs.actions.showAscending"
+                : "logs.actions.showDescending",
+            )}
+            size="small"
+            color="inherit"
+            onClick={handleToggleOrder}
+          >
+            <SwapVertRounded
+              sx={{
+                transform: isDescending ? "scaleY(-1)" : "none",
+                transition: "transform 0.2s ease",
+              }}
+            />
+          </IconButton>
 
           <Button
             size="small"
@@ -129,17 +166,17 @@ const LogPage = () => {
         />
       </Box>
 
-      {filterLogs.length > 0 ? (
+      {filteredLogs.length > 0 ? (
         <Virtuoso
-          initialTopMostItemIndex={999}
+          initialTopMostItemIndex={isDescending ? 0 : 999}
-          data={filterLogs}
+          data={filteredLogs}
           style={{
             flex: 1,
           }}
           itemContent={(index, item) => (
             <LogItem value={item} searchState={searchState} />
           )}
-          followOutput={"smooth"}
+          followOutput={isDescending ? false : "smooth"}
         />
       ) : (
         <BaseEmpty />

src/services/states.ts

@@ -7,16 +7,19 @@ const [ThemeModeProvider, useThemeMode, useSetThemeMode] = createContextState<
 >("light");
 
 export type LogFilter = "all" | "debug" | "info" | "warn" | "err";
+export type LogOrder = "asc" | "desc";
 
 interface IClashLog {
   enable: boolean;
   logLevel: LogLevel;
   logFilter: LogFilter;
+  logOrder: LogOrder;
 }
 const defaultClashLog: IClashLog = {
   enable: true,
   logLevel: "info",
   logFilter: "all",
+  logOrder: "asc",
 };
 export const useClashLog = () =>
   useLocalStorage<IClashLog>("clash-log", defaultClashLog, {

src/types/generated/i18n-keys.ts

@@ -108,6 +108,8 @@ export const translationKeys = [
   "layout.components.navigation.menu.unlock",
   "layout.components.navigation.menu.lock",
   "logs.page.title",
+  "logs.actions.showDescending",
+  "logs.actions.showAscending",
   "profiles.page.actions.updateAll",
   "profiles.page.actions.viewRuntimeConfig",
   "profiles.page.actions.reactivate",

src/types/generated/i18n-resources.ts

@@ -197,6 +197,10 @@ export interface TranslationResources {
       };
     };
     logs: {
+      actions: {
+        showAscending: string;
+        showDescending: string;
+      };
       page: {
         title: string;
       };