右键

src/index.less

@@ -370,3 +370,77 @@ svg {
   max-height: 70vh;
   overflow: auto;
 }
+
+.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;
+}     
\ No newline at end of file

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { Resizable } from 'react-resizable';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 import ResizeObserver from 'rc-resize-observer';
+import { MenuItem, SubMenu } from 'react-contextmenu';
 
 import DataGrid from '../../VirtualTable/test-table';
 import { dispatch } from '../../../../model'; 
@@ -501,83 +502,94 @@ const ModelTable = (props) => {
     }
   } 
 
+  const onMenuRender = (row) => {
+    if (row) {
+      setCurrentItem(row);
+
       let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
 
-  if (!currentItem?.editable && currentItem?.state?.id!=='4') {
+      if (!row?.editable && row?.state?.id!=='4') {
         disableEdit = true;
 
-    if (currentItem?.state?.id === '2') {
+        if (row?.state?.id === '2') {
           editTip = '待发布的模型不允许编辑';
         }
       }
 
-  if (!currentItem?.permitCheckOut && currentItem?.state?.id==='4') {
+      if (!row?.permitCheckOut && row?.state?.id==='4') {
         disableEdit = true;
-    editTip = `${currentItem.holder||''}正在编辑中, 不允许再编辑`;
-    editMenuTitle = `编辑(${currentItem.holder||''}正在编辑中)`;
+        editTip = `${row.holder||''}正在编辑中, 不允许再编辑`;
+        editMenuTitle = `编辑(${row.holder||''}正在编辑中)`;
       }
 
-  if (!currentItem?.deletable) {
+      if (!row?.deletable) {
         disableDelete = true;
 
-    if (currentItem?.state?.id === '2') {
+        if (row?.state?.id === '2') {
           deleteTip = '待发布的模型不允许删除';
-    } else if (currentItem?.state?.id === '4') {
+        } else if (row?.state?.id === '4') {
           deleteTip = '已发布的模型不允许删除';
         }
       }
 
-  return (
-    <div className={classes}>
-      <DataGrid 
-        style={{ blockSize: modelId?'95px':'calc(100vh - 94px - 37px - 57px - 24px)' }}
-        columns={columns}
-        rows={modelId?(subData||[]):(data||[])}
-        rowExpandable={(row) => {
-          return row?.alreadyCheckedOut;
-        }}
-        expandRow={expandRow}
-        getComparator={getComparator}
-      />
-      <RcMenu id={MENU_ID}>
+      return <React.Fragment>
         {
-          (getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="edit" disabled={disableEdit} onClick={handleItemClick}>
+          (getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem id="edit" disabled={disableEdit} onClick={handleItemClick}>
             <Tooltip title={editTip}>
             { editMenuTitle }
             </Tooltip>
-          </RcItem>
+          </MenuItem>
         }
         {
-          (getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="delete" disabled={disableDelete} onClick={handleItemClick}>
+          (getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem id="delete" disabled={disableDelete} onClick={handleItemClick}>
             <Tooltip title={deleteTip}>
               删除
             </Tooltip>
-          </RcItem>
+          </MenuItem>
         }
-        <RcItem id="history" onClick={handleItemClick}>
+        <MenuItem id="history" onClick={handleItemClick}>
           历史版本
-        </RcItem>
+        </MenuItem>
         {
-          (getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="copy" onClick={handleItemClick}>
+          (getDataModelerRole(user)!==DataModelerRoleReader) && <MenuItem id="copy" onClick={handleItemClick}>
             复制模型
-          </RcItem>
+          </MenuItem>
         }
         {
-          getDataModelerRole(user)!==DataModelerRoleReader && (currentItem?.state?.supportedActions||[]).length>0 && currentItem?.state?.supportedActions.map((item, index) => {
+          getDataModelerRole(user)!==DataModelerRoleReader && (row?.state?.supportedActions||[]).length>0 && row?.state?.supportedActions.map((item, index) => {
             return (
-              <RcItem id={`action-${index}`} onClick={handleItemClick}>
+              <MenuItem id={`action-${index}`} onClick={handleItemClick}>
               {item.cnName||''}
-              </RcItem>
+              </MenuItem>
             );
           }) 
         }
         {
-          getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <RcItem id='createTable' onClick={handleItemClick}>
+          getDataModelerRole(user)!==DataModelerRoleReader &&currentItem?.deployable && <MenuItem id='createTable' onClick={handleItemClick}>
           建表
-          </RcItem>
+          </MenuItem>
+        }
+      </React.Fragment>
     }
 
-      </RcMenu>
+    return <React.Fragment></React.Fragment>;
+  }
+
+  return (
+    <div className={classes}>
+      <DataGrid 
+        style={{ blockSize: modelId?'95px':'calc(100vh - 94px - 37px - 57px - 24px)' }}
+        columns={columns}
+        rows={modelId?(subData||[]):(data||[])}
+        rowExpandable={(row) => {
+          return row?.alreadyCheckedOut;
+        }}
+        contextMenu={{
+          menu: onMenuRender
+        }}
+        expandRow={expandRow}
+        getComparator={getComparator}
+      />
       { contextHolder }
     </div>
   );

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

@@ -31,7 +31,7 @@ export interface RowData {
 interface Props<Row> {
   contextMenu?: {
     id: string
-    menu: ReactElement
+    menu: (row: Row | undefined) => ReactElement
   }
   gridRef?: React.RefObject<DataGridHandle>
   ctxRef?: React.RefObject<{
@@ -154,6 +154,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
   }
 
   const [checkAll, setCheckAll] = useState(false)
+  const [contextItem, setContextItem] = useState<Row|undefined>(undefined)
 
   // 初始化onRowsChange
   const onRowsChange = useCallback((rows: RowData[], { indexes }: RowsChangeData<Row, SR>) => {
@@ -256,7 +257,18 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         rowKeyGetter={rowKeyGetter}
         components={{
           sortIcon: SortIcon,
-          rowRenderer: contextMenu ? RowRenderer<Row, SR>(contextMenuId) : undefined
+          rowRenderer: (props) => {
+            return (
+              contextMenu ? <ContextMenuTrigger id={contextMenuId} collect={() => ({ rowIdx: props?.rowIdx })} disable={props.row.__type__===RowType.Detail}>
+                <GridRow 
+                  onContextMenu={(e: React.MouseEvent) => {
+                    setContextItem(props.row);
+                  }} 
+                  {...props} 
+                />
+              </ContextMenuTrigger> : <React.Fragment></React.Fragment>
+            )
+          }
         }}
         onRowsChange={onRowsChange}
 
@@ -278,7 +290,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
       {contextMenu && createPortal(
         <div className='contextMenu'>
           <ContextMenu id={contextMenuId} rtl={false}>
-            {contextMenu.menu}
+            {contextMenu.menu(contextItem)}
           </ContextMenu>
         </div>,
         document.body