调整代码

src/index.less

@@ -2,6 +2,7 @@
 @import '~antd/dist/antd.less';
 @import './mixins.less';
 @import './variables.less';
+@import './view/Manage/VirtualTable/mixins.less';
 
 //与center-home中的样式保持统一
 body {
@@ -365,121 +366,4 @@ svg {
 .yy-notification-notice-description {
   max-height: 70vh;
   overflow: auto;
-}
-
+}
\ No newline at end of file
-
-.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;
-    outline: none !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 {
-  &:hover {
-    background-color: #fafafa;
-  }
-
-  .rdg-cell {
-    box-shadow: none !important;
-    color: #363636 !important;
-    border-block-end: 1px solid #f0f0f0 !important;
-    border-inline-end: none !important;
-    outline: none !important;
-  }
-}
-
-.react-contextmenu-wrapper {
-  display: contents;
-}
-
-.react-contextmenu {
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem;
-  color: #373a3c;
-  font-size: 16px;
-  margin-block-start: 2px;
-  margin-block-end: 0;
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  min-inline-size: 160px;
-  outline: none;
-  opacity: 0;
-  padding-block: 5px;
-  padding-inline: 0;
-  pointer-events: none;
-  text-align: start;
-  transition: opacity 250ms ease !important;
-}
-.react-contextmenu.react-contextmenu--visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-.react-contextmenu-item {
-  background: 0 0;
-  border: 0;
-  color: #373a3c;
-  cursor: pointer;
-  font-weight: 400;
-  line-height: 1.5;
-  padding-block: 3px;
-  padding-inline: 20px;
-  text-align: inherit;
-  white-space: nowrap;
-}
-.react-contextmenu-item.react-contextmenu-item--active,
-.react-contextmenu-item.react-contextmenu-item--selected {
-  color: #fff;
-  background-color: #20a0ff;
-  border-color: #20a0ff;
-  text-decoration: none;
-}
-.react-contextmenu-item.react-contextmenu-item--disabled,
-.react-contextmenu-item.react-contextmenu-item--disabled:hover {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.15);
-  color: #878a8c;
-}
-.react-contextmenu-item--divider {
-  border-block-end: 1px solid rgba(0, 0, 0, 0.15);
-  cursor: inherit;
-  margin-block-end: 3px;
-  padding-block: 2px;
-  padding-inline: 0;
-}
-.react-contextmenu-item--divider:hover {
-  background-color: transparent;
-  border-color: rgba(0, 0, 0, 0.15);
-}
-.react-contextmenu-item.react-contextmenu-submenu {
-  padding: 0;
-}
-.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
-  content: '▶';
-  display: inline-block;
-  position: absolute;
-  inset-inline-end: 7px;
-} 

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

@@ -249,6 +249,7 @@ const ExpandedModelTable = (props) => {
   useEffect(() => {
     setSelectedRowKeys(checked?[id]:[]);
 
+    console.log('data map', dataMap);
     if (dataMap.has(id)) {
       setData([dataMap.get(id)]);
     } else {

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

@@ -4,7 +4,7 @@ import SmoothScroll from 'smooth-scroll';
 import { MenuItem } from 'react-contextmenu';
 import LocalStorage from 'local-storage';
 
-import DataGrid from '../../VirtualTable/test-table';
+import DataGrid from '../../VirtualTable';
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
 import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId, DataModelerRoleReader } from '../../../../util/constant';
@@ -12,7 +12,6 @@ import ExpandedModelTable from "./ExpandedModelTable";
 // import Tag from "../../Tag";
 
 import './ModelTable.less';
-import 'react-contexify/dist/ReactContexify.css';
 
 const { Text } = Typography;
 
@@ -99,8 +98,8 @@ const ModelTable = (props) => {
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]);
 
+  const expandedDataMapRef = useRef(new Map());
   const shouldScrollRef = useRef(false);
-  const expandedDataMapRef = useRef(new Set());
 
   const anchorId = getQueryParam(AnchorId, props?.location?.search);
   const anchorTimestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
@@ -257,9 +256,7 @@ const ModelTable = (props) => {
 
   const modelEventChange = (e) => {
     if (e.key === 'modelChange') {
-      const newExpandedDataMap = new Set(expandedDataMapRef.current);
-      newExpandedDataMap.delete(LocalStorage.get('modelId'));
-      expandedDataMapRef.current = newExpandedDataMap;
+      expandedDataMapRef.current.delete(LocalStorage.get('modelId'));
     }
   }
 
@@ -357,9 +354,7 @@ const ModelTable = (props) => {
   }
 
   const onExpandedDataMapChange = (id, value) => {
-    const newExpandedDataMap = new Set(expandedDataMapRef.current);
-    newExpandedDataMap.set(id, value);
-    expandedDataMapRef.current = newExpandedDataMap;
+    expandedDataMapRef.current.set(id, value);
   }
 
   let expandRow = undefined;

src/view/Manage/VirtualTable/index.less

+.anchor {
+  background-color: #e7f7ff;
+}
\ No newline at end of file

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

@@ -3,15 +3,14 @@ import { createPortal } from 'react-dom';
 import { ContextMenu, ContextMenuTrigger } from 'react-contextmenu';
 import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
 import type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
-import classNames from 'classnames';
 import { Checkbox, Empty } from 'antd';
 import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 
 import { nanoid } from 'nanoid';
-import { downNode, upNode } from './test-table-helper';
+import { downNode, upNode } from './virtual-table-helper';
 
-import css from './test-table.module.less'
+import './index.less';
 
 export enum RowAction {
   None, Expand, Select
@@ -213,7 +212,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
 
   const contextMenuId = contextMenu?.id ?? nanoid()
   return (
-    <div className={css.virtualTable}>
+    <React.Fragment>
       <DataGrid
         ref={gridRef}
 
@@ -262,21 +261,19 @@ 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));
         }}
         // 滚动
         onScroll={loadMoreRows ? handleScroll : undefined}
       />
       {contextMenu && createPortal(
-        <div className={classNames(css.contextMenu)}>
-          <ContextMenu id={contextMenuId} rtl={false}>
-            {contextMenu.menu(contextItem)}
-          </ContextMenu>
-        </div>,
+        <ContextMenu id={contextMenuId} rtl={false}>
+          {contextMenu.menu(contextItem)}
+        </ContextMenu>
+        ,
         document.body
       )}
-    </div>
+    </React.Fragment>
   );
 }
 

src/view/Manage/VirtualTable/test-table.module.less → src/view/Manage/VirtualTable/mixins.less

-:global{
-  .rdg {
-    border: none !important;
-  }
+.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;
-      outline: 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;
+    outline: none !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: "";
-      }
+    &: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;
-      outline: none !important;
-    }
+.rdg-row {
+  &:hover {
+    background-color: #fafafa;
   }
-}
 
-.contextMenu {
-  border: 1px solid black;
-  :global{
-    .react-contextmenu {
-      background-color: #fff;
-      background-clip: padding-box;
-      border: 1px solid rgba(0, 0, 0, 0.15);
-      border-radius: 0.25rem;
-      color: #373a3c;
-      font-size: 16px;
-      margin-block-start: 2px;
-      margin-block-end: 0;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      min-inline-size: 160px;
-      outline: none;
-      opacity: 0;
-      padding-block: 5px;
-      padding-inline: 0;
-      pointer-events: none;
-      text-align: start;
-      transition: opacity 250ms ease !important;
-    }
-    .react-contextmenu.react-contextmenu--visible {
-      opacity: 1;
-      pointer-events: auto;
-    }
-    .react-contextmenu-item {
-      background: 0 0;
-      border: 0;
-      color: #373a3c;
-      cursor: pointer;
-      font-weight: 400;
-      line-height: 1.5;
-      padding-block: 3px;
-      padding-inline: 20px;
-      text-align: inherit;
-      white-space: nowrap;
-    }
-    .react-contextmenu-item.react-contextmenu-item--active,
-    .react-contextmenu-item.react-contextmenu-item--selected {
-      color: #fff;
-      background-color: #20a0ff;
-      border-color: #20a0ff;
-      text-decoration: none;
-    }
-    .react-contextmenu-item.react-contextmenu-item--disabled,
-    .react-contextmenu-item.react-contextmenu-item--disabled:hover {
-      background-color: transparent;
-      border-color: rgba(0, 0, 0, 0.15);
-      color: #878a8c;
-    }
-    .react-contextmenu-item--divider {
-      border-block-end: 1px solid rgba(0, 0, 0, 0.15);
-      cursor: inherit;
-      margin-block-end: 3px;
-      padding-block: 2px;
-      padding-inline: 0;
-    }
-    .react-contextmenu-item--divider:hover {
-      background-color: transparent;
-      border-color: rgba(0, 0, 0, 0.15);
-    }
-    .react-contextmenu-item.react-contextmenu-submenu {
-      padding: 0;
-    }
-    .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
-      content: '▶';
-      display: inline-block;
-      position: absolute;
-      inset-inline-end: 7px;
-    } 
+  .rdg-cell {
+    box-shadow: none !important;
+    color: #363636 !important;
+    border-block-end: 1px solid #f0f0f0 !important;
+    border-inline-end: none !important;
+    outline: none !important;
   }
-  
 }
 
-.anchor {
-  background-color: #e7f7ff;
+.react-contextmenu-wrapper {
+  display: contents;
 }
 
-.loadMoreRowsClassname {
-  inline-size: 180px;
-  padding-block: 8px;
-  padding-inline: 16px;
+.react-contextmenu {
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  color: #373a3c;
+  font-size: 16px;
+  margin-block-start: 2px;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  min-inline-size: 160px;
+  outline: none;
+  opacity: 0;
+  padding-block: 5px;
+  padding-inline: 0;
+  pointer-events: none;
+  text-align: start;
+  transition: opacity 250ms ease !important;
+}
+.react-contextmenu.react-contextmenu--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.react-contextmenu-item {
+  background: 0 0;
+  border: 0;
+  color: #373a3c;
+  cursor: pointer;
+  font-weight: 400;
+  line-height: 1.5;
+  padding-block: 3px;
+  padding-inline: 20px;
+  text-align: inherit;
+  white-space: nowrap;
+}
+.react-contextmenu-item.react-contextmenu-item--active,
+.react-contextmenu-item.react-contextmenu-item--selected {
+  color: #fff;
+  background-color: #20a0ff;
+  border-color: #20a0ff;
+  text-decoration: none;
+}
+.react-contextmenu-item.react-contextmenu-item--disabled,
+.react-contextmenu-item.react-contextmenu-item--disabled:hover {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.15);
+  color: #878a8c;
+}
+.react-contextmenu-item--divider {
+  border-block-end: 1px solid rgba(0, 0, 0, 0.15);
+  cursor: inherit;
+  margin-block-end: 3px;
+  padding-block: 2px;
+  padding-inline: 0;
+}
+.react-contextmenu-item--divider:hover {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.react-contextmenu-item.react-contextmenu-submenu {
+  padding: 0;
+}
+.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
+  content: '▶';
+  display: inline-block;
   position: absolute;
-  inset-block-end: 8px;
-  inset-inline-end: 8px;
-  color: white;
-  line-height: 35px;
-  background: rgb(0 0 0 / 0.6);
-}
+  inset-inline-end: 7px;
+} 
\ No newline at end of file