diff --git a/src/components/logs-viewer/index.less b/src/components/logs-viewer/index.less index 3b479918..3d7144aa 100644 --- a/src/components/logs-viewer/index.less +++ b/src/components/logs-viewer/index.less @@ -7,11 +7,16 @@ .content { word-wrap: break-word; + height: 100%; &.line-break { word-wrap: break-word; } + .text { + height: 100%; + } + color: var(--color-logs-text); font-size: var(--font-size-small); line-height: 22px; @@ -20,7 +25,26 @@ } } - .xterm .xterm-viewport { - overflow-y: hidden !important; + .xterm { + height: 100% !important; + + .xterm-viewport { + overflow-y: auto !important; + // custom scrollbar + &::-webkit-scrollbar { + width: 8px; + height: 6px; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-thumb); + border-radius: 4px; + } + + &::-webkit-scrollbar-track { + background-color: var(--color-scrollbar-track); + border-radius: 4px; + } + } } } diff --git a/src/components/logs-viewer/index.tsx b/src/components/logs-viewer/index.tsx index eaad12c0..c69c050f 100644 --- a/src/components/logs-viewer/index.tsx +++ b/src/components/logs-viewer/index.tsx @@ -4,7 +4,7 @@ import { Terminal } from '@xterm/xterm'; import '@xterm/xterm/css/xterm.css'; import classNames from 'classnames'; import _ from 'lodash'; -import { memo, useEffect, useRef, useState } from 'react'; +import { memo, useCallback, useEffect, useRef, useState } from 'react'; import './index.less'; import useSize from './use-size'; @@ -26,11 +26,14 @@ const LogsViewer: React.FC = (props) => { const cacheDatARef = useRef(null); const size = useSize(scroller); - const updateContent = (newVal: string) => { - cacheDatARef.current = newVal; - termRef.current?.reset(); - termRef.current?.write?.(newVal); - }; + const updateContent = useCallback( + _.throttle((data: string) => { + cacheDatARef.current = data; + termRef.current?.reset(); + termRef.current?.write?.(data); + }, 600), + [] + ); const fitTerm = () => { fitAddonRef.current.fit(); @@ -52,13 +55,14 @@ const LogsViewer: React.FC = (props) => { termRef.current?.dispose?.(); termRef.current = new Terminal({ lineHeight: 1.2, - fontSize: 12, + fontSize: 13, fontFamily: "monospace,Menlo,Courier,'Courier New',Consolas,Monaco, 'Liberation Mono'", disableStdin: true, convertEol: true, theme: { - background: '#1e1e1e' + background: '#1e1e1e', + foreground: 'rgba(255,255,255,0.8)' }, cursorInactiveStyle: 'none' // windowOptions: { @@ -74,10 +78,6 @@ const LogsViewer: React.FC = (props) => { }; const handleResize = _.throttle(() => { - termRef.current?.clear(); - if (cacheDatARef.current) { - updateContent(cacheDatARef.current); - } fitTerm(); }, 100); @@ -92,20 +92,17 @@ const LogsViewer: React.FC = (props) => { if (termInsRef.current) { initTerm(); } - }, []); + }, [termInsRef.current]); useEffect(() => { handleResize(); - console.log('size======', size); }, [size]); return (
-
-
-
+
diff --git a/src/components/seal-table/components/seal-column.tsx b/src/components/seal-table/components/seal-column.tsx index 3fd7ba30..cc76f468 100644 --- a/src/components/seal-table/components/seal-column.tsx +++ b/src/components/seal-table/components/seal-column.tsx @@ -38,8 +38,8 @@ const SealColumn: React.FC = (props) => { useEffect(() => { if (editable) { cachedValue.current = row[dataIndex]; - setCurrent(row[dataIndex]); } + setCurrent(row[dataIndex]); }, [row[dataIndex], editable]); const renderContent = () => { diff --git a/src/global.less b/src/global.less index f29f5732..e3f6722f 100644 --- a/src/global.less +++ b/src/global.less @@ -10,6 +10,8 @@ html { --ant-color-fill-tertiary: rgba(0, 0, 0, 4%); --ant-color-fill-quaternary: rgba(0, 0, 0, 2%); --color-fill-1: var(--ant-color-fill-tertiary); + --color-scrollbar-thumb: rgba(193, 193, 193, 80%); + --color-scrollbar-track: var(--ant-color-fill-tertiary); // --color-fill-1: #fff; --ant-color-text: #000; --color-scroll-bg: #d9d9d9; diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index fa71a09e..852a8c1f 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -22,7 +22,7 @@ const ViewCodeModal: React.FC = (props) => { setModalSize((size: any) => { return { width: size.width === 600 ? '100%' : 600, - height: size.height === 420 ? 'calc(100vh - 100px)' : 420 + height: size.height === 420 ? 'calc(100vh - 86px)' : 420 }; }); }; @@ -32,7 +32,7 @@ const ViewCodeModal: React.FC = (props) => { isFullScreenRef.current = false; setModalSize({ width: '100%', - height: 'calc(100vh - 100px)' + height: 'calc(100vh - 86px)' }); } }, [open]); @@ -58,6 +58,11 @@ const ViewCodeModal: React.FC = (props) => { closeIcon={true} maskClosable={false} keyboard={true} + styles={{ + content: { + borderRadius: 0 + } + }} width={modalSize.width} footer={null} >