fix: table cell refresh
This commit is contained in:
@@ -7,11 +7,16 @@
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
&.line-break {
|
&.line-break {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
color: var(--color-logs-text);
|
color: var(--color-logs-text);
|
||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
@@ -20,7 +25,26 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.xterm .xterm-viewport {
|
.xterm {
|
||||||
overflow-y: hidden !important;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { Terminal } from '@xterm/xterm';
|
|||||||
import '@xterm/xterm/css/xterm.css';
|
import '@xterm/xterm/css/xterm.css';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import { memo, useEffect, useRef, useState } from 'react';
|
import { memo, useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
import useSize from './use-size';
|
import useSize from './use-size';
|
||||||
|
|
||||||
@@ -26,11 +26,14 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
|
|||||||
const cacheDatARef = useRef<any>(null);
|
const cacheDatARef = useRef<any>(null);
|
||||||
const size = useSize(scroller);
|
const size = useSize(scroller);
|
||||||
|
|
||||||
const updateContent = (newVal: string) => {
|
const updateContent = useCallback(
|
||||||
cacheDatARef.current = newVal;
|
_.throttle((data: string) => {
|
||||||
termRef.current?.reset();
|
cacheDatARef.current = data;
|
||||||
termRef.current?.write?.(newVal);
|
termRef.current?.reset();
|
||||||
};
|
termRef.current?.write?.(data);
|
||||||
|
}, 600),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const fitTerm = () => {
|
const fitTerm = () => {
|
||||||
fitAddonRef.current.fit();
|
fitAddonRef.current.fit();
|
||||||
@@ -52,13 +55,14 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
|
|||||||
termRef.current?.dispose?.();
|
termRef.current?.dispose?.();
|
||||||
termRef.current = new Terminal({
|
termRef.current = new Terminal({
|
||||||
lineHeight: 1.2,
|
lineHeight: 1.2,
|
||||||
fontSize: 12,
|
fontSize: 13,
|
||||||
fontFamily:
|
fontFamily:
|
||||||
"monospace,Menlo,Courier,'Courier New',Consolas,Monaco, 'Liberation Mono'",
|
"monospace,Menlo,Courier,'Courier New',Consolas,Monaco, 'Liberation Mono'",
|
||||||
disableStdin: true,
|
disableStdin: true,
|
||||||
convertEol: true,
|
convertEol: true,
|
||||||
theme: {
|
theme: {
|
||||||
background: '#1e1e1e'
|
background: '#1e1e1e',
|
||||||
|
foreground: 'rgba(255,255,255,0.8)'
|
||||||
},
|
},
|
||||||
cursorInactiveStyle: 'none'
|
cursorInactiveStyle: 'none'
|
||||||
// windowOptions: {
|
// windowOptions: {
|
||||||
@@ -74,10 +78,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleResize = _.throttle(() => {
|
const handleResize = _.throttle(() => {
|
||||||
termRef.current?.clear();
|
|
||||||
if (cacheDatARef.current) {
|
|
||||||
updateContent(cacheDatARef.current);
|
|
||||||
}
|
|
||||||
fitTerm();
|
fitTerm();
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
@@ -92,20 +92,17 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
|
|||||||
if (termInsRef.current) {
|
if (termInsRef.current) {
|
||||||
initTerm();
|
initTerm();
|
||||||
}
|
}
|
||||||
}, []);
|
}, [termInsRef.current]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
handleResize();
|
handleResize();
|
||||||
console.log('size======', size);
|
|
||||||
}, [size]);
|
}, [size]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="logs-viewer-wrap-w2">
|
<div className="logs-viewer-wrap-w2">
|
||||||
<div className="wrap" style={{ height: height }} ref={scroller}>
|
<div className="wrap" style={{ height: height }} ref={scroller}>
|
||||||
<div className={classNames('content', { 'line-break': nowrap })}>
|
<div className={classNames('content', { 'line-break': nowrap })}>
|
||||||
<div className="text">
|
<div className="text" ref={termInsRef}></div>
|
||||||
<div ref={termInsRef}></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -38,8 +38,8 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (editable) {
|
if (editable) {
|
||||||
cachedValue.current = row[dataIndex];
|
cachedValue.current = row[dataIndex];
|
||||||
setCurrent(row[dataIndex]);
|
|
||||||
}
|
}
|
||||||
|
setCurrent(row[dataIndex]);
|
||||||
}, [row[dataIndex], editable]);
|
}, [row[dataIndex], editable]);
|
||||||
|
|
||||||
const renderContent = () => {
|
const renderContent = () => {
|
||||||
|
|||||||
@@ -10,6 +10,8 @@ html {
|
|||||||
--ant-color-fill-tertiary: rgba(0, 0, 0, 4%);
|
--ant-color-fill-tertiary: rgba(0, 0, 0, 4%);
|
||||||
--ant-color-fill-quaternary: rgba(0, 0, 0, 2%);
|
--ant-color-fill-quaternary: rgba(0, 0, 0, 2%);
|
||||||
--color-fill-1: var(--ant-color-fill-tertiary);
|
--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;
|
// --color-fill-1: #fff;
|
||||||
--ant-color-text: #000;
|
--ant-color-text: #000;
|
||||||
--color-scroll-bg: #d9d9d9;
|
--color-scroll-bg: #d9d9d9;
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
setModalSize((size: any) => {
|
setModalSize((size: any) => {
|
||||||
return {
|
return {
|
||||||
width: size.width === 600 ? '100%' : 600,
|
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<ViewModalProps> = (props) => {
|
|||||||
isFullScreenRef.current = false;
|
isFullScreenRef.current = false;
|
||||||
setModalSize({
|
setModalSize({
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: 'calc(100vh - 100px)'
|
height: 'calc(100vh - 86px)'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [open]);
|
}, [open]);
|
||||||
@@ -58,6 +58,11 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
|||||||
closeIcon={true}
|
closeIcon={true}
|
||||||
maskClosable={false}
|
maskClosable={false}
|
||||||
keyboard={true}
|
keyboard={true}
|
||||||
|
styles={{
|
||||||
|
content: {
|
||||||
|
borderRadius: 0
|
||||||
|
}
|
||||||
|
}}
|
||||||
width={modalSize.width}
|
width={modalSize.width}
|
||||||
footer={null}
|
footer={null}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user