1- import React , { useEffect } from "react" ;
1+ import React , { useEffect , useRef } from "react" ;
22import { BackTop , Button , Card , DatePicker , Input , List , Message , Space , Typography } from "@arco-design/web-react" ;
33import dayjs from "dayjs" ;
44import type { Logger } from "@App/app/repo/logger" ;
@@ -20,14 +20,23 @@ function LoggerPage() {
2020 const [ search , setSearch ] = React . useState < string > ( "" ) ;
2121 const [ startTime , setStartTime ] = React . useState ( dayjs ( ) . subtract ( 24 , "hour" ) . unix ( ) ) ;
2222 const [ endTime , setEndTime ] = React . useState ( dayjs ( ) . unix ( ) ) ;
23+ // 标记 endTime 是否代表"当前时间"，默认为 true
24+ const [ isNow , setIsNow ] = React . useState ( true ) ;
25+ // 用于强制触发数据重新加载
26+ const [ refreshToken , setRefreshToken ] = React . useState ( 0 ) ;
27+ // 标记数据加载后是否需要自动执行过滤
28+ const needFilterRef = useRef ( false ) ;
29+ // 标记本次 onChange 是否由快捷方式触发
30+ const shortcutClickRef = useRef ( false ) ;
2331 const loggerDAO = new LoggerDAO ( ) ;
2432 const systemConfig = { logCleanCycle : 1 } ;
2533 const { t } = useTranslation ( ) ;
2634
27- const onQueryLog = ( ) => {
35+ const onQueryLog = ( logsToFilter ?: Logger [ ] ) => {
36+ const data = logsToFilter ?? logs ;
2837 const newQueryLogs : Logger [ ] = [ ] ;
2938 const regex = search && new RegExp ( search ) ;
30- logs . forEach ( ( log ) => {
39+ data . forEach ( ( log ) => {
3140 for ( let i = 0 ; i < querys . length ; i += 1 ) {
3241 const query = querys [ i ] ;
3342 if ( query . key ) {
@@ -99,12 +108,18 @@ function LoggerPage() {
99108 } ) ;
100109 } ) ;
101110 setLabels ( newLabels ) ;
102- setQueryLogs ( [ ] ) ;
111+ // 如果是查询按钮触发的刷新，自动执行过滤
112+ if ( needFilterRef . current ) {
113+ needFilterRef . current = false ;
114+ onQueryLog ( l ) ;
115+ } else {
116+ setQueryLogs ( [ ] ) ;
117+ }
103118 if ( init === 0 ) {
104119 setInit ( 1 ) ;
105120 }
106121 } ) ;
107- } , [ startTime , endTime ] ) ;
122+ } , [ startTime , endTime , refreshToken ] ) ;
108123
109124 return (
110125 < >
@@ -133,10 +148,27 @@ function LoggerPage() {
133148 style = { { width : 400 } }
134149 showTime
135150 shortcutsPlacementLeft
136- value = { [ startTime * 1000 , endTime * 1000 ] }
151+ placeholder = { isNow ? [ "" , t ( "now" ) ] : undefined }
152+ value = { isNow ? [ startTime * 1000 ] : [ startTime * 1000 , endTime * 1000 ] }
137153 onChange = { ( _ , time ) => {
154+ if ( ! time || ! time [ 0 ] ) {
155+ // 清除操作，恢复默认状态
156+ setStartTime ( dayjs ( ) . subtract ( 24 , "hour" ) . unix ( ) ) ;
157+ setEndTime ( dayjs ( ) . unix ( ) ) ;
158+ setIsNow ( true ) ;
159+ return ;
160+ }
138161 setStartTime ( time [ 0 ] . unix ( ) ) ;
139162 setEndTime ( time [ 1 ] . unix ( ) ) ;
163+ if ( shortcutClickRef . current ) {
164+ shortcutClickRef . current = false ;
165+ setIsNow ( true ) ;
166+ } else {
167+ setIsNow ( false ) ;
168+ }
169+ } }
170+ onSelectShortcut = { ( ) => {
171+ shortcutClickRef . current = true ;
140172 } }
141173 shortcuts = { [
142174 {
@@ -177,7 +209,20 @@ function LoggerPage() {
177209 } ,
178210 ] }
179211 />
180- < Button type = "primary" onClick = { onQueryLog } >
212+ < Button
213+ type = "primary"
214+ onClick = { ( ) => {
215+ if ( isNow ) {
216+ // 刷新 endTime 到当前时间，数据加载后自动过滤
217+ needFilterRef . current = true ;
218+ setEndTime ( dayjs ( ) . unix ( ) ) ;
219+ // 强制触发 useEffect，即使 endTime 值未变（同一秒内多次点击）
220+ setRefreshToken ( ( prev ) => prev + 1 ) ;
221+ } else {
222+ onQueryLog ( ) ;
223+ }
224+ } }
225+ >
181226 { t ( "query" ) }
182227 </ Button >
183228 </ Space >
@@ -289,7 +334,8 @@ function LoggerPage() {
289334 } }
290335 >
291336 < Typography . Text >
292- { formatUnixTime ( startTime ) } { t ( "to" ) } { formatUnixTime ( endTime ) } { t ( "total_logs" , { length : logs . length } ) }
337+ { formatUnixTime ( startTime ) } { t ( "to" ) } { isNow ? t ( "now" ) : formatUnixTime ( endTime ) } { " " }
338+ { t ( "total_logs" , { length : logs . length } ) }
293339 { init === 4
294340 ? `, ${ t ( "filtered_logs" , { length : queryLogs . length } ) }
295341 : `, ${ t ( "enter_filter_conditions" ) } }
0 commit comments