调整代码

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 {
@@ -366,120 +367,3 @@ svg {
   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>,
+        ,
         document.body
       )}
-    </div>
+    </React.Fragment>
   );
 }
 

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

-:global{
-  .rdg {
+.rdg {
   border: none !important;
-  }
+}
 
-  .rdg-header-row {
+.rdg-header-row {
   .rdg-cell {
     box-shadow: none !important;
     background-color: #f2f5fc!important;
@@ -25,9 +24,13 @@
       content: "";
     }
   }
+}
+
+.rdg-row {
+  &:hover {
+    background-color: #fafafa;
   }
 
-  .rdg-row {
   .rdg-cell {
     box-shadow: none !important;
     color: #363636 !important;
@@ -35,13 +38,13 @@
     border-inline-end: none !important;
     outline: none !important;
   }
-  }
 }
 
-.contextMenu {
-  border: 1px solid black;
-  :global{
-    .react-contextmenu {
+.react-contextmenu-wrapper {
+  display: contents;
+}
+
+.react-contextmenu {
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -60,12 +63,12 @@
   pointer-events: none;
   text-align: start;
   transition: opacity 250ms ease !important;
-    }
-    .react-contextmenu.react-contextmenu--visible {
+}
+.react-contextmenu.react-contextmenu--visible {
   opacity: 1;
   pointer-events: auto;
-    }
-    .react-contextmenu-item {
+}
+.react-contextmenu-item {
   background: 0 0;
   border: 0;
   color: #373a3c;
@@ -76,56 +79,37 @@
   padding-inline: 20px;
   text-align: inherit;
   white-space: nowrap;
-    }
-    .react-contextmenu-item.react-contextmenu-item--active,
-    .react-contextmenu-item.react-contextmenu-item--selected {
+}
+.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 {
+}
+.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 {
+}
+.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 {
+}
+.react-contextmenu-item--divider:hover {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.15);
-    }
-    .react-contextmenu-item.react-contextmenu-submenu {
+}
+.react-contextmenu-item.react-contextmenu-submenu {
   padding: 0;
-    }
-    .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
+}
+.react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
   content: '▶';
   display: inline-block;
   position: absolute;
   inset-inline-end: 7px;
-    } 
-  }
-  
-}
-
-.anchor {
-  background-color: #e7f7ff;
-}
-
-.loadMoreRowsClassname {
-  inline-size: 180px;
-  padding-block: 8px;
-  padding-inline: 16px;
-  position: absolute;
-  inset-block-end: 8px;
-  inset-inline-end: 8px;
-  color: white;
-  line-height: 35px;
-  background: rgb(0 0 0 / 0.6);
 }