类似云图日志分析， 后续补充图
    支持功能

    1. 下载
    2. 复制
    3. 搜索
    4. 定位
    5. 行号
    6. 样式
    7. 全屏
    8. 回到顶部
    9. 虚拟加载
    1. import React, { Fragment, PureComponent } from '@alipay/bigfish/react';
    2. import { Empty, BackTop } from '@alipay/bigfish/antd';
    3. import cs from '@alipay/bigfish/util/classnames';
    5. import styles from './index.less';
    7. export interface LogResultProps<T extends any> {
    8.   className?: string;
    9.   style?: React.CSSProperties;
    10.   logRender?: (item: T) => JSX.Element;
    11.   dataSource?: T[];
    12.   empty?: JSX.Element;
    13.   footerRender?: () => JSX.Element;
    14. }
    16. /**
    17.  * 1. 动态计算 height
    18.  * 2. 添加滚动顶部
    19.  * 3. 添加行数
    20.  */
    21. class LogResult<T> extends PureComponent<LogResultProps<T>> {
    22.   domRef: any = React.createRef<HTMLDivElement | null>();
    24.   static defaultProps: LogResultProps<any> = {
    25.     empty: <Empty />,
    26.     dataSource: [],
    27.     footerRender: () => <Fragment />,
    28.   };
    30.   getSnapshotBeforeUpdate(prevProps: LogResultProps<T>) {
    31.     // @ts-ignore
    32.     if (prevProps.dataSource?.length < this.props.dataSource?.length) {
    33.       const list = this.domRef.current;
    34.       return list.scrollHeight - list.scrollTop;
    35.     }
    36.     return null;
    37.   }
    39.   componentDidUpdate(
    40.     _prevProps: LogResultProps<T>,
    41.     _prevState: any,
    42.     snapshot: number
    43.   ) {
    44.     if (snapshot !== null) {
    45.       const list = this.domRef.current;
    46.       list.scrollTop = list.scrollHeight - snapshot;
    47.     }
    48.   }
    50.   goToTop = () => {
    51.     if (this.domRef.current) {
    52.       this.domRef.current.scrollTop = 0;
    53.     }
    54.   };
    56.   renderLine = (item: T) => {
    57.     const { logRender } = this.props;
    58.     if (typeof logRender === 'function') {
    59.       return logRender(item);
    60.     }
    61.     return <span>{JSON.stringify(item)}</span>;
    62.   };
    65.   /** 动态计算最大 height */
    66.   render() {
    67.     const {
    68.       className,
    69.       empty,
    70.       style,
    71.       dataSource = [],
    72.       footerRender,
    73.     } = this.props;
    75.     const cls = cs(styles.wrapper, className);
    77.     return (
    78.       <div className={cls} style={style} ref={this.domRef}>
    79.         <div className={styles.content}>
    80.           {dataSource.length ? (
    81.             <Fragment>
    82.               {dataSource.map((item, index) => (
    83.                 <Fragment key={index}>
    84.                   <div className={styles.line}>{this.renderLine(item)}</div>
    85.                 </Fragment>
    86.               ))}
    87.               <BackTop
    88.                 onClick={this.goToTop}
    89.                 target={() => this.domRef.current}
    90.                 visibilityHeight={200}
    91.               />
    92.             </Fragment>
    93.           ) : (
    94.             empty
    95.           )}
    96.           <div className="footer">{footerRender?.()}</div>
    97.         </div>
    98.       </div>
    99.     );
    100.   }
    101. }
    103. export default LogResult;
    1. .wrapper {
    2.   .content {
    3.     counter-reset: line-numbering;
    5.     .line {
    6.       font-size: 12px;
    7.       line-height: 14px;
    9.       &::before {
    10.         display: inline-block;
    11.         padding-right: 1em;
    12.         content: counter(line-numbering);
    13.         counter-increment: line-numbering;
    14.       }
    15.     }
    16.   }
    17. }