调整样式

src/index.less

@@ -444,3 +444,41 @@ svg {
   position: absolute;
   inset-inline-end: 7px;
 }    
+
+
+//virtual-table
+.rdg {
+  border: none !important;
+}
+
+.rdg-header-row {
+  .rdg-cell {
+    box-shadow: none !important;
+    background-color: #f2f5fc!important;
+    border-block-end: none !important;
+    border-inline-end: none !important;
+    font-weight: normal !important;
+
+    &:before {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 1px;
+      height: 1.6em;
+      background-color: rgba(0,0,0,.06);
+      -webkit-transform: translateY(-50%);
+      transform: translateY(-50%);
+      transition: background-color .3s;
+      content: "";
+    }
+  }
+}
+
+.rdg-row {
+  .rdg-cell {
+    box-shadow: none !important;
+    color: #363636 !important;
+    border-block-end: 1px solid #f0f0f0 !important;
+    border-inline-end: none !important;
+  }
+}

src/view/Manage/Model/Component/ModelTable.jsx

@@ -291,7 +291,7 @@ const ModelTable = (props) => {
 
       const _id = getQueryParam(AnchorId, props.location.search);
       var scroll = new SmoothScroll();
-      var anchor = document.querySelector(`#data-model-${_id}`);
+      var anchor = document.querySelector(`#${_id}`);
 
       if (anchor) {
         scroll.animateScroll(anchor);

src/view/Manage/VirtualTable/test-table.tsx

-import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState, forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
 import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SelectCellFormatter, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
-import type { RowRendererProps, DataGridHandle } from 'react-data-grid';
+import type { RowRendererProps, DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
 import classNames from 'classnames';
+import { Checkbox, Empty } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 import { nanoid } from 'nanoid';
 import { downNode, upNode } from './test-table-helper';
@@ -52,7 +54,15 @@ function RowRenderer<Row, SR>(id: string) {
   );
 }
 
+const CheckboxFormatter = forwardRef<HTMLInputElement, CheckboxFormatterProps>(
+  function CheckboxFormatter({ onChange, ...props }: CheckboxFormatterProps, ref) {
+    function handleChange(e: CheckboxChangeEvent) {
+      onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey);
+    }
 
+    return <Checkbox ref={ref} {...props} onChange={handleChange} />;
+  }
+);
 
 export function getExpandingCol<Row extends RowData, SR>({ colSpan, expand, expandable }: {
   colSpan: () => number
@@ -220,10 +230,12 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         rowKeyGetter={rowKeyGetter}
         components={{
           sortIcon: SortIcon,
+          checkboxFormatter: CheckboxFormatter,
           rowRenderer: (props) => {
             return (
               contextMenu ? <ContextMenuTrigger id={contextMenuId} collect={() => ({ rowIdx: props?.rowIdx })} disable={props.row.__type__===RowType.Detail}>
                 <GridRow
+                  id={props.row.id} 
                   onContextMenu={(e: React.MouseEvent) => {
                     setContextItem(props.row);
                   }} 
@@ -231,7 +243,10 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
                 />
               </ContextMenuTrigger> : <React.Fragment></React.Fragment>
             )
-          }
+          },
+          noRowsFallback: <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
+           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </div>, 
         }}
         onRowsChange={onRowsChange}
 
@@ -249,7 +264,6 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
 
         selectedRows={new Set(selectedRows||[])}
         onSelectedRowsChange={(values: Set<any>) => {
-          console.log('values', values);
           onSelectedRowsChange && onSelectedRowsChange(Array.from(values));
         }}
         // 滚动