From e7812396dfeb75972553473f0f296353ae6dba2c Mon Sep 17 00:00:00 2001
From: Slinetrac <realakayuki@gmail.com>
Date: Tue, 18 Nov 2025 17:39:56 +0800
Subject: [PATCH] feat(logs): support reverse chronological order #5513

Closes #5513
---
 Changelog.md                          |  1 +
 src/locales/ar/logs.json              |  4 +++
 src/locales/de/logs.json              |  4 +++
 src/locales/en/logs.json              |  4 +++
 src/locales/es/logs.json              |  4 +++
 src/locales/fa/logs.json              |  4 +++
 src/locales/id/logs.json              |  4 +++
 src/locales/jp/logs.json              |  4 +++
 src/locales/ko/logs.json              |  4 +++
 src/locales/ru/logs.json              |  4 +++
 src/locales/tr/logs.json              |  4 +++
 src/locales/tt/logs.json              |  4 +++
 src/locales/zh/logs.json              |  4 +++
 src/locales/zhtw/logs.json            |  4 +++
 src/pages/logs.tsx                    | 45 ++++++++++++++++++++++++---
 src/services/states.ts                |  3 ++
 src/types/generated/i18n-keys.ts      |  2 ++
 src/types/generated/i18n-resources.ts |  4 +++
 18 files changed, 103 insertions(+), 4 deletions(-)

diff --git a/Changelog.md b/Changelog.md
index 857b204ce..d6e65dcdb 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -17,6 +17,7 @@
 - 支持连接页面各个项目的排序
 - 实现可选的自动备份
 - 连接页面支持查看已关闭的连接（最近最多 500 个已关闭连接）
+- 日志页面支持按时间倒序
 
 </details>
 
diff --git a/src/locales/ar/logs.json b/src/locales/ar/logs.json
index 06f3c65e0..f603527c3 100644
--- a/src/locales/ar/logs.json
+++ b/src/locales/ar/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "السجلات"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/de/logs.json b/src/locales/de/logs.json
index aec2ccf02..5c30be040 100644
--- a/src/locales/de/logs.json
+++ b/src/locales/de/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Protokolle"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/en/logs.json b/src/locales/en/logs.json
index 85afa00bb..9fca86496 100644
--- a/src/locales/en/logs.json
+++ b/src/locales/en/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Logs"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/es/logs.json b/src/locales/es/logs.json
index fe479175f..6eb288dd8 100644
--- a/src/locales/es/logs.json
+++ b/src/locales/es/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Registros"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/fa/logs.json b/src/locales/fa/logs.json
index 18d2842d1..36be0f7c2 100644
--- a/src/locales/fa/logs.json
+++ b/src/locales/fa/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "لاگ‌ها"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/id/logs.json b/src/locales/id/logs.json
index b41b2a76b..2896570b0 100644
--- a/src/locales/id/logs.json
+++ b/src/locales/id/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Log"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/jp/logs.json b/src/locales/jp/logs.json
index 3ae97f236..cdbfb0ff7 100644
--- a/src/locales/jp/logs.json
+++ b/src/locales/jp/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "ログ"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/ko/logs.json b/src/locales/ko/logs.json
index a5e30a1da..542d40fc3 100644
--- a/src/locales/ko/logs.json
+++ b/src/locales/ko/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "로그"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/ru/logs.json b/src/locales/ru/logs.json
index 523666c1c..1465500f5 100644
--- a/src/locales/ru/logs.json
+++ b/src/locales/ru/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Логи"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/tr/logs.json b/src/locales/tr/logs.json
index 4fa81c059..ed373cc24 100644
--- a/src/locales/tr/logs.json
+++ b/src/locales/tr/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Günlükler"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/tt/logs.json b/src/locales/tt/logs.json
index 5e4931c77..93e8394bb 100644
--- a/src/locales/tt/logs.json
+++ b/src/locales/tt/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "Логлар"
+  },
+  "actions": {
+    "showDescending": "Newest first",
+    "showAscending": "Oldest first"
   }
 }
diff --git a/src/locales/zh/logs.json b/src/locales/zh/logs.json
index 1e38a12ce..d0fea4e4f 100644
--- a/src/locales/zh/logs.json
+++ b/src/locales/zh/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "日志"
+  },
+  "actions": {
+    "showDescending": "按时间倒序",
+    "showAscending": "按时间正序"
   }
 }
diff --git a/src/locales/zhtw/logs.json b/src/locales/zhtw/logs.json
index 183916d3c..53305bf4a 100644
--- a/src/locales/zhtw/logs.json
+++ b/src/locales/zhtw/logs.json
@@ -1,5 +1,9 @@
 {
   "page": {
     "title": "日誌"
+  },
+  "actions": {
+    "showDescending": "按時間倒序",
+    "showAscending": "按時間正序"
   }
 }
diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx
index 73e4d7fb1..c3dbb9e31 100644
--- a/src/pages/logs.tsx
+++ b/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}
-          data={filterLogs}
+          initialTopMostItemIndex={isDescending ? 0 : 999}
+          data={filteredLogs}
           style={{
             flex: 1,
           }}
           itemContent={(index, item) => (
             <LogItem value={item} searchState={searchState} />
           )}
-          followOutput={"smooth"}
+          followOutput={isDescending ? false : "smooth"}
         />
       ) : (
         <BaseEmpty />
diff --git a/src/services/states.ts b/src/services/states.ts
index d4df0f775..895d9b9c9 100644
--- a/src/services/states.ts
+++ b/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, {
diff --git a/src/types/generated/i18n-keys.ts b/src/types/generated/i18n-keys.ts
index 5f1c376b1..39722fe83 100644
--- a/src/types/generated/i18n-keys.ts
+++ b/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",
diff --git a/src/types/generated/i18n-resources.ts b/src/types/generated/i18n-resources.ts
index 225338e1e..d3d6b34c2 100644
--- a/src/types/generated/i18n-resources.ts
+++ b/src/types/generated/i18n-resources.ts
@@ -197,6 +197,10 @@ export interface TranslationResources {
       };
     };
     logs: {
+      actions: {
+        showAscending: string;
+        showDescending: string;
+      };
       page: {
         title: string;
       };