From 36624aff494f2970355ac4ecfa0bdc438666b028 Mon Sep 17 00:00:00 2001
From: Tunglies <77394545+Tunglies@users.noreply.github.com>
Date: Fri, 3 Apr 2026 13:13:57 +0800
Subject: [PATCH] fix(logs): preserve log data and eliminate blank flash on
 page navigation

Preserve SWR cache in onConnected to avoid replacing accumulated logs
with kernel buffer on reconnect. Add KeepAlive for the logs page so
its DOM stays mounted across route changes, removing the visible blank
window when navigating back.
---
 src/hooks/use-log-data.ts |  7 ++++++-
 src/pages/_layout.tsx     | 21 ++++++++++++++++++++-
 src/pages/_routers.tsx    |  3 +--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/hooks/use-log-data.ts b/src/hooks/use-log-data.ts
index 9889812ad..6540216b0 100644
--- a/src/hooks/use-log-data.ts
+++ b/src/hooks/use-log-data.ts
@@ -101,7 +101,12 @@ export const useLogData = () => {
         async onConnected() {
           const logs = await getClashLogs()
           if (isMounted()) {
-            next(null, clampLogs(filterLogsByLevel(logs, allowedTypes)))
+            next(null, (current) => {
+              if (!current || current.length === 0) {
+                return clampLogs(filterLogsByLevel(logs, allowedTypes))
+              }
+              return current
+            })
           }
         },
         cleanup: clearFlushTimer,
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 410e136cc..de43cd3dc 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -26,7 +26,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import type { CSSProperties } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Outlet, useNavigate } from 'react-router'
+import { Outlet, useLocation, useNavigate } from 'react-router'
 import { SWRConfig } from 'swr'
 
 import iconDark from '@/assets/image/icon_dark.svg?react'
@@ -53,6 +53,7 @@ import {
 } from './_layout/hooks'
 import { handleNoticeMessage } from './_layout/utils'
 import { navItems } from './_routers'
+import LogsPage from './logs'
 
 import 'dayjs/locale/ru'
 import 'dayjs/locale/zh-cn'
@@ -120,6 +121,10 @@ const Layout = () => {
   const navCollapsed = verge?.collapse_navbar ?? false
   const { switchLanguage } = useI18n()
   const navigate = useNavigate()
+  const { pathname } = useLocation()
+  const isLogsPage = pathname === '/logs'
+  const logsPageMountedRef = useRef(false)
+  if (isLogsPage) logsPageMountedRef.current = true
   const themeReady = useMemo(() => Boolean(theme), [theme])
 
   const [menuUnlocked, setMenuUnlocked] = useState(false)
@@ -477,6 +482,20 @@ const Layout = () => {
                 <BaseErrorBoundary>
                   <Outlet />
                 </BaseErrorBoundary>
+                {logsPageMountedRef.current && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      display: isLogsPage ? undefined : 'none',
+                    }}
+                  >
+                    <LogsPage />
+                  </div>
+                )}
               </div>
             </div>
           </div>
diff --git a/src/pages/_routers.tsx b/src/pages/_routers.tsx
index d288dfd58..080d13c8b 100644
--- a/src/pages/_routers.tsx
+++ b/src/pages/_routers.tsx
@@ -20,7 +20,6 @@ import UnlockSvg from '@/assets/image/itemicon/unlock.svg?react'
 import Layout from './_layout'
 import ConnectionsPage from './connections'
 import HomePage from './home'
-import LogsPage from './logs'
 import ProfilesPage from './profiles'
 import ProxiesPage from './proxies'
 import RulesPage from './rules'
@@ -62,7 +61,7 @@ export const navItems = [
     label: 'layout.components.navigation.tabs.logs',
     path: '/logs',
     icon: [<SubjectRoundedIcon key="mui" />, <LogsSvg key="svg" />],
-    Component: LogsPage,
+    Component: () => null /* KeepAlive: real LogsPage rendered in Layout */,
   },
   {
     label: 'layout.components.navigation.tabs.unlock',