diff --git a/frontend/src/admin/pages/Logs.tsx b/frontend/src/admin/pages/Logs.tsx index 28768e6..5aeb361 100644 --- a/frontend/src/admin/pages/Logs.tsx +++ b/frontend/src/admin/pages/Logs.tsx @@ -7,7 +7,7 @@ * - 缓冲上限 2000 条,进程重启后清零 */ -import { useEffect, useState, useCallback, useRef, useMemo } from 'react' +import { useEffect, useState, useCallback, useRef } from 'react' import { fetchLogs } from '../dal' import type { LogEntry } from '../types' import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components' @@ -53,24 +53,21 @@ export default function LogsPage() { }, [load]) const scrollRef = useRef(null) - const userScrolledUp = useRef(false) + const userScrolledDown = useRef(false) - // 检测用户是否向上滚动过 + // 检测用户是否向下滚动回看历史(旧日志在下方) const handleScroll = () => { const el = scrollRef.current if (!el) return - const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50 - userScrolledUp.current = !atBottom + const atTop = el.scrollTop < 50 + userScrolledDown.current = !atTop } - // 后端返回最新在前;渲染转为时间正序(旧→新),配合「自动贴底」滚动: - // 打开页面/自动刷新默认定位到最新日志,用户上滚回看时暂停跟随 - const ordered = useMemo(() => [...entries].reverse(), [entries]) - - // 加载后自动滚动到底部(仅当用户未向上滚动时) + // 列表最新在最上面(后端倒序返回);打开页面/自动刷新时定位到顶部=最新。 + // 用户向下滚动回看历史时暂停定位,拉回顶部即恢复。 useEffect(() => { - if (autoRefresh && !userScrolledUp.current && scrollRef.current) { - scrollRef.current.scrollTop = scrollRef.current.scrollHeight + if (autoRefresh && !userScrolledDown.current && scrollRef.current) { + scrollRef.current.scrollTop = 0 } }, [entries, autoRefresh]) @@ -146,7 +143,7 @@ export default function LogsPage() {

暂无匹配的日志

) : (
- {ordered.map((e, i) => { + {entries.map((e, i) => { const badge = LEVEL_BADGE[e.level] ?? { status: 'info' as const, text: e.level } return (