style: logs viewer scroll bar

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;

src/components/logs-viewer/index.tsx

@@ -18,16 +18,16 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const { height, content, url } = props;
   const { setChunkRequest } = useSetChunkRequest();
   const chunkRequedtRef = useRef<any>(null);
-  const scroller = useRef<any>(null);
+  const scroller = useRef<any>({});
-  const termRef = useRef<any>(null);
+  const termRef = useRef<any>({});
-  const termwrapRef = useRef<any>(null);
+  const termwrapRef = useRef<any>({});
-  const fitAddonRef = useRef<any>(null);
+  const fitAddonRef = useRef<any>({});
-  const cacheDatARef = useRef<any>(null);
+  const cacheDataRef = useRef<any>(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<LogsViewerProps> = (props) => {
   );
 
   const fitTerm = () => {
-    fitAddonRef.current.fit();
+    fitAddonRef.current?.fit?.();
   };
 
   const createChunkConnection = async () => {
@@ -68,7 +68,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (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<LogsViewerProps> = (props) => {
     if (termwrapRef.current) {
       initTerm();
     }
+    return () => {
+      termRef.current?.dispose?.();
+    };
   }, [termwrapRef.current]);
 
   useEffect(() => {
-    handleResize();
+    if (size) {
+      handleResize();
+    }
   }, [size]);
 
   return (

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));

src/pages/llmodels/components/view-logs-modal.tsx

@@ -42,13 +42,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       title={
         <span className="flex flex-center">
           <span> {intl.formatMessage({ id: 'common.button.viewlog' })}</span>
-          {/* <Button size="middle" type="text" onClick={handleFullscreenToggle}>
-            {isFullScreenRef.current ? (
-              <FullscreenExitOutlined />
-            ) : (
-              <FullscreenOutlined />
-            )}
-          </Button> */}
         </span>
       }
       open={open}