diff --git a/src/components/logs-viewer/index.less b/src/components/logs-viewer/index.less index 3d7144aa..4c9afd87 100644 --- a/src/components/logs-viewer/index.less +++ b/src/components/logs-viewer/index.less @@ -1,9 +1,9 @@ .logs-viewer-wrap-w2 { .wrap { padding: 5px 0 5px 10px; - overflow: auto; background-color: var(--color-logs-bg); border-radius: var(--border-radius-mini); + overflow: hidden; .content { word-wrap: break-word; diff --git a/src/components/logs-viewer/index.tsx b/src/components/logs-viewer/index.tsx index 0c7ff197..ae6c4277 100644 --- a/src/components/logs-viewer/index.tsx +++ b/src/components/logs-viewer/index.tsx @@ -18,16 +18,16 @@ const LogsViewer: React.FC = (props) => { const { height, content, url } = props; const { setChunkRequest } = useSetChunkRequest(); const chunkRequedtRef = useRef(null); - const scroller = useRef(null); - const termRef = useRef(null); - const termwrapRef = useRef(null); - const fitAddonRef = useRef(null); - const cacheDatARef = useRef(null); + const scroller = useRef({}); + const termRef = useRef({}); + const termwrapRef = useRef({}); + const fitAddonRef = useRef({}); + const cacheDataRef = useRef(null); const size = useSize(scroller); const updateContent = useCallback( _.throttle((data: string) => { - cacheDatARef.current = data; + cacheDataRef.current = data; termRef.current?.clear?.(); termRef.current?.write?.(data); }, 100), @@ -35,7 +35,7 @@ const LogsViewer: React.FC = (props) => { ); const fitTerm = () => { - fitAddonRef.current.fit(); + fitAddonRef.current?.fit?.(); }; const createChunkConnection = async () => { @@ -68,7 +68,7 @@ const LogsViewer: React.FC = (props) => { fitAddonRef.current = new FitAddon(); termRef.current.loadAddon(fitAddonRef.current); termRef.current.open(termwrapRef.current); - fitAddonRef.current?.fit(); + // fitAddonRef.current?.fit?.(); }; const handleResize = _.throttle(() => { @@ -86,10 +86,15 @@ const LogsViewer: React.FC = (props) => { if (termwrapRef.current) { initTerm(); } + return () => { + termRef.current?.dispose?.(); + }; }, [termwrapRef.current]); useEffect(() => { - handleResize(); + if (size) { + handleResize(); + } }, [size]); return ( diff --git a/src/components/logs-viewer/use-size.ts b/src/components/logs-viewer/use-size.ts index f88f874d..df93a8fd 100644 --- a/src/components/logs-viewer/use-size.ts +++ b/src/components/logs-viewer/use-size.ts @@ -5,7 +5,7 @@ export default function useSize(target: any) { const [size, setSize] = React.useState(); React.useLayoutEffect(() => { - setSize(target.current.getBoundingClientRect()); + setSize(target.current?.getBoundingClientRect()); }, [target]); useResizeObserver(target, (entry: any) => setSize(entry?.contentRect)); diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index 852a8c1f..8d5b4715 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -42,13 +42,6 @@ const ViewCodeModal: React.FC = (props) => { title={ {intl.formatMessage({ id: 'common.button.viewlog' })} - {/* */} } open={open}