fix: table cell refresh

This commit is contained in:
jialin
2024-09-14 16:53:23 +08:00
parent 05390743e0
commit c1c24b9e5b
5 changed files with 50 additions and 22 deletions
+26 -2
View File
@@ -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;
}
}
}
}
+14 -17
View File
@@ -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<LogsViewerProps> = (props) => {
const cacheDatARef = useRef<any>(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<LogsViewerProps> = (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<LogsViewerProps> = (props) => {
};
const handleResize = _.throttle(() => {
termRef.current?.clear();
if (cacheDatARef.current) {
updateContent(cacheDatARef.current);
}
fitTerm();
}, 100);
@@ -92,20 +92,17 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
if (termInsRef.current) {
initTerm();
}
}, []);
}, [termInsRef.current]);
useEffect(() => {
handleResize();
console.log('size======', size);
}, [size]);
return (
<div className="logs-viewer-wrap-w2">
<div className="wrap" style={{ height: height }} ref={scroller}>
<div className={classNames('content', { 'line-break': nowrap })}>
<div className="text">
<div ref={termInsRef}></div>
</div>
<div className="text" ref={termInsRef}></div>
</div>
</div>
</div>
@@ -38,8 +38,8 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
useEffect(() => {
if (editable) {
cachedValue.current = row[dataIndex];
setCurrent(row[dataIndex]);
}
setCurrent(row[dataIndex]);
}, [row[dataIndex], editable]);
const renderContent = () => {