fix(admin): 日志页默认定位到最新而非最早
渲染顺序(最新在前)与滚动逻辑假设(正序+贴底=最新)相互矛盾: 自动刷新(默认开启)每 10s 强制贴底,而底部恰好是最早的日志, 用户打开页面被钉在最旧的一条上。 改为渲染时间正序(旧→新),与贴底滚动/上滚暂停跟随的 tail -f 行为一致:打开页面即定位最新。
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
* - 缓冲上限 2000 条,进程重启后清零
|
* - 缓冲上限 2000 条,进程重启后清零
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useEffect, useState, useCallback, useRef } from 'react'
|
import { useEffect, useState, useCallback, useRef, useMemo } from 'react'
|
||||||
import { fetchLogs } from '../dal'
|
import { fetchLogs } from '../dal'
|
||||||
import type { LogEntry } from '../types'
|
import type { LogEntry } from '../types'
|
||||||
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'
|
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'
|
||||||
@@ -63,6 +63,10 @@ export default function LogsPage() {
|
|||||||
userScrolledUp.current = !atBottom
|
userScrolledUp.current = !atBottom
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 后端返回最新在前;渲染转为时间正序(旧→新),配合「自动贴底」滚动:
|
||||||
|
// 打开页面/自动刷新默认定位到最新日志,用户上滚回看时暂停跟随
|
||||||
|
const ordered = useMemo(() => [...entries].reverse(), [entries])
|
||||||
|
|
||||||
// 加载后自动滚动到底部(仅当用户未向上滚动时)
|
// 加载后自动滚动到底部(仅当用户未向上滚动时)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (autoRefresh && !userScrolledUp.current && scrollRef.current) {
|
if (autoRefresh && !userScrolledUp.current && scrollRef.current) {
|
||||||
@@ -142,7 +146,7 @@ export default function LogsPage() {
|
|||||||
<p className="py-10 text-center text-xs text-ink-400">暂无匹配的日志</p>
|
<p className="py-10 text-center text-xs text-ink-400">暂无匹配的日志</p>
|
||||||
) : (
|
) : (
|
||||||
<div ref={scrollRef} onScroll={handleScroll} className="max-h-[60vh] overflow-y-auto">
|
<div ref={scrollRef} onScroll={handleScroll} className="max-h-[60vh] overflow-y-auto">
|
||||||
{entries.map((e, i) => {
|
{ordered.map((e, i) => {
|
||||||
const badge = LEVEL_BADGE[e.level] ?? { status: 'info' as const, text: e.level }
|
const badge = LEVEL_BADGE[e.level] ?? { status: 'info' as const, text: e.level }
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user