123

zhang

4 天以前 0a37b816117828dfc216d00c17724900f4bb14e3

 zy-acs-flow/src/map/NewsLogDialog.jsx

@@ -23,12 +23,15 @@
    3: { label: 'ERROR', color: 'error' },
};

const POLLING_INTERVAL = 2000;
const PANEL_WIDTH = 480;
const PANEL_HEIGHT = 360;
const POLLING_INTERVAL = 1000;
const PANEL_WIDTH = 600;
const PANEL_HEIGHT = 420;
const MIN_WIDTH = 320;
const MIN_HEIGHT = 240;
const EDGE_MARGIN = 16;

const MAX_VISIBLE_LOGS = 200;
const MAX_BUFFER_LOGS = 600;

const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

@@ -44,6 +47,12 @@
    const panelRef = useRef(null);
    const pollingRef = useRef(null);
    const dragRef = useRef({ active: false, offsetX: 0, offsetY: 0 });
    const programmaticScrollRef = useRef(false);
    const initialScrollDoneRef = useRef(false);
    const userScrollRef = useRef(false);
    const autoScrollRef = useRef(true);
    const nearBottomRef = useRef(true);
    const pendingLogsRef = useRef(null);
    const resizeRef = useRef({
        active: false,
        startX: 0,
@@ -70,13 +79,52 @@
        };
    }, [getSizeLimits]);

    const applyLogs = useCallback((payload, { programmatic = false } = {}) => {
        if (!payload) {
            return;
        }
        programmaticScrollRef.current = programmatic;
        pendingLogsRef.current = null;
        setLogs(payload.logs);
        setLastUpdated(payload.timestamp);
    }, []);

    const flushPendingLogs = useCallback((options = {}) => {
        if (!pendingLogsRef.current) {
            return false;
        }
        applyLogs(pendingLogsRef.current, options);
        return true;
    }, [applyLogs]);

    const computeNearBottom = useCallback(() => {
        const container = scrollRef.current;
        if (!container) {
            return true;
        }
        const { scrollTop, scrollHeight, clientHeight } = container;
        return scrollHeight - (scrollTop + clientHeight) < 32;
    }, []);

    const fetchLogs = useCallback(async () => {
        const data = await Http.fetchNewsLogs();
        if (Array.isArray(data)) {
            setLogs(data);
            setLastUpdated(new Date());
            let nextLogs = data;
            if (data.length > MAX_VISIBLE_LOGS) {
                const shouldStickToBottom = autoScrollRef.current && nearBottomRef.current;
                const limit = shouldStickToBottom
                    ? MAX_VISIBLE_LOGS
                    : Math.min(MAX_BUFFER_LOGS, data.length);
                nextLogs = data.slice(data.length - limit);
            }
            const payload = { logs: nextLogs, timestamp: new Date() };
            if (autoScrollRef.current && nearBottomRef.current) {
                applyLogs(payload, { programmatic: true });
            } else {
                pendingLogsRef.current = payload;
            }
        }
    }, []);
    }, [applyLogs]);

    useEffect(() => {
        if (!open) {
@@ -86,10 +134,18 @@
            setLastUpdated(null);
            setPosition(null);
            setSize(null);
            initialScrollDoneRef.current = false;
            nearBottomRef.current = true;
            pendingLogsRef.current = null;
            return;
        }
        setSize(buildInitialSize());
        setAutoScroll(true);
        userScrollRef.current = false;
        programmaticScrollRef.current = true;
        initialScrollDoneRef.current = false;
        nearBottomRef.current = true;
        pendingLogsRef.current = null;
        fetchLogs();
        pollingRef.current = setInterval(fetchLogs, POLLING_INTERVAL);
        return () => {
@@ -98,38 +154,92 @@
        };
    }, [open, fetchLogs, buildInitialSize]);

    useEffect(() => {
        if (!autoScroll || !scrollRef.current) {
    const scrollToBottom = useCallback((behavior = 'smooth', attempts = 3) => {
        if (!scrollRef.current) {
            return;
        }
        scrollRef.current.scrollTo({
            top: scrollRef.current.scrollHeight,
            behavior: 'smooth',
        });
    }, [logs, autoScroll]);

    const handleScroll = useCallback(() => {
        if (!scrollRef.current || !autoScroll) {
            return;
        }
        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
        if (scrollHeight - (scrollTop + clientHeight) > 32) {
            setAutoScroll(false);
        }
    }, [autoScroll]);

    const handleJumpLatest = () => {
        setAutoScroll(true);
        if (scrollRef.current) {
        programmaticScrollRef.current = true;
        nearBottomRef.current = true;
        const step = (remaining) => {
            if (!scrollRef.current) {
                return;
            }
            scrollRef.current.scrollTo({
                top: scrollRef.current.scrollHeight,
                behavior: 'smooth',
                behavior,
            });
            if (remaining > 0) {
                requestAnimationFrame(() => step(remaining - 1));
            }
        };
        requestAnimationFrame(() => step(attempts));
    }, []);

    useEffect(() => {
        if (!autoScroll || userScrollRef.current) {
            return;
        }
        if (!logs.length) {
            return;
        }
        const behavior = initialScrollDoneRef.current ? 'smooth' : 'auto';
        const attempts = initialScrollDoneRef.current ? 1 : 5;
        scrollToBottom(behavior, attempts);
        initialScrollDoneRef.current = true;
    }, [logs, autoScroll, scrollToBottom]);

    useEffect(() => {
        autoScrollRef.current = autoScroll;
    }, [autoScroll]);

    const handleScroll = useCallback(() => {
        if (!scrollRef.current) {
            return;
        }
        if (programmaticScrollRef.current) {
            programmaticScrollRef.current = false;
            nearBottomRef.current = computeNearBottom();
            return;
        }
        const isNearBottom = computeNearBottom();
        nearBottomRef.current = isNearBottom;
        if (!autoScroll) {
            userScrollRef.current = !isNearBottom;
            return;
        }
        if (isNearBottom) {
            if (userScrollRef.current) {
                userScrollRef.current = false;
            }
        } else {
            userScrollRef.current = true;
        }
    }, [autoScroll, computeNearBottom]);

    const handleJumpLatest = () => {
        flushPendingLogs({ programmatic: true });
        userScrollRef.current = false;
        setAutoScroll(true);
        scrollToBottom('smooth', 2);
        initialScrollDoneRef.current = true;
    };

    const handleClose = () => {
        onClose?.();
    };

    const handleAutoScrollChange = (event) => {
        const { checked } = event.target;
        setAutoScroll(checked);
        if (checked) {
            flushPendingLogs({ programmatic: true });
            userScrollRef.current = false;
            initialScrollDoneRef.current = false;
            nearBottomRef.current = true;
            scrollToBottom('auto', 5);
        } else {
            userScrollRef.current = true;
        }
    };

    const handleDragging = useCallback((event) => {
@@ -307,7 +417,7 @@
                            <Switch
                                size="small"
                                checked={autoScroll}
                                onChange={(event) => setAutoScroll(event.target.checked)}
                                onChange={handleAutoScrollChange}
                            />
                        )}
                        label={translate('page.map.monitor.log.autoScroll', { _: 'Auto Scroll' })}
@@ -330,8 +440,9 @@
                        flex: 1,
                        minHeight: 0,
                        overflowY: 'auto',
                        px: 3,
                        py: 2,
                        overflowX: 'auto',
                        px: 0,
                        py: 0,
                        backgroundColor: theme.palette.background.default,
                    }}
                >
@@ -340,7 +451,11 @@
                            {translate('page.map.monitor.log.empty', { _: 'No Logs' })}
                        </Typography>
                    ) : (
                        <Stack spacing={1.25}>
                        <Stack
                            spacing={0}
                            divider={<Divider sx={{ borderColor: theme.palette.divider, opacity: 0.8 }} />}
                            sx={{ minWidth: '100%', width: 'fit-content' }}
                        >
                            {logs.map((item, index) => {
                                const level = item?.l;
                                const levelMeta = LOG_LEVEL_META[level] || LOG_LEVEL_META[1];
@@ -348,26 +463,44 @@
                                    <Box
                                        key={`${item?.t}-${index}`}
                                        sx={{
                                            borderRadius: 1.5,
                                            border: `1px solid ${theme.palette.divider}`,
                                            backgroundColor: theme.palette.background.paper,
                                            px: 2,
                                            py: 1.25,
                                            width: '100%',
                                            backgroundColor: index % 2 === 0
                                                ? theme.palette.background.paper
                                                : theme.palette.background.default,
                                        }}
                                    >
                                        <Stack direction="row" spacing={1} alignItems="center">
                                            <Chip
                                                label={levelMeta.label}
                                                size="small"
                                                color={levelMeta.color}
                                                variant="outlined"
                                            />
                                            <Divider orientation="vertical" flexItem />
                                            <Typography variant="caption" color="text.secondary">
                                        <Stack direction="row" spacing={1.5} alignItems="center">
                                            <Typography
                                                variant="caption"
                                                sx={{
                                                    fontWeight: 700,
                                                    letterSpacing: 0.6,
                                                    textTransform: 'uppercase',
                                                    color: theme.palette[levelMeta.color]?.main || theme.palette.text.secondary,
                                                }}
                                            >
                                                {levelMeta.label}
                                            </Typography>
                                            <Typography
                                                variant="caption"
                                                color="text.secondary"
                                                sx={{ fontFamily: 'SFMono-Regular, Menlo, monospace', letterSpacing: 0.3 }}
                                            >
                                                {item?.t || '--'}
                                            </Typography>
                                        </Stack>
                                        <Typography variant="body2" sx={{ mt: 1, whiteSpace: 'pre-wrap' }}>
                                        <Typography
                                            variant="body2"
                                            sx={{
                                                mt: 0.5,
                                                whiteSpace: 'pre-wrap',
                                                fontSize: 13,
                                                lineHeight: 1.5,
                                                color: theme.palette.text.primary,
                                            }}
                                        >
                                            {item?.v || ''}
                                        </Typography>
                                    </Box>