@aloudata/aloudata-design 2.17.3 → 2.17.5

package/dist/AldSelect/BaseSelect.js

@@ -136,14 +136,13 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
     if (!nextOpen) {
       setShowResponsiveSelectedSection(false);
-      setInnerSearchValue === null || setInnerSearchValue === void 0 ? void 0 : setInnerSearchValue('');
       setFocus(false);
     }
     if (mergedOpen !== nextOpen && !disabled) {
       setInnerOpen(nextOpen);
       onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
     }
-  }, [mergedOpen, disabled, setInnerSearchValue, setInnerOpen, onOpenChange]);
+  }, [mergedOpen, disabled, setInnerOpen, onOpenChange]);
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     showResponsiveSelectedSection = _useState6[0],
@@ -190,18 +189,29 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   }, [disabled, onClick]);
+  React.useEffect(function () {
+    var element = selectRef.current;
+    if (element) {
+      var handleMouseOver = function handleMouseOver() {
+        return setIsHover(true);
+      };
+      var handleMouseOut = function handleMouseOut() {
+        return setIsHover(false);
+      };
+      element.addEventListener('mouseover', handleMouseOver);
+      element.addEventListener('mouseout', handleMouseOut);
+      return function () {
+        element.removeEventListener('mouseover', handleMouseOver);
+        element.removeEventListener('mouseout', handleMouseOut);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: mergedClassName,
     style: _objectSpread(_objectSpread({}, widthStyle), style),
     ref: selectRef,
     id: id,
-    onClick: onSelectClick,
-    onMouseEnter: function onMouseEnter() {
-      setIsHover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      setIsHover(false);
-    }
+    onClick: onSelectClick
   }, /*#__PURE__*/React.createElement(SelectTrigger, {
     open: !!mergedOpen,
     notFoundContent: notFoundContent,

package/dist/AldSelect/components/SearchBox.js

@@ -13,6 +13,7 @@ function SearchBox(_ref) {
     className: "beta-ald-select-search-box",
     value: value,
     size: "small",
+    allowClear: true,
     bordered: false,
     onBlur: onBlur,
     prefix: /*#__PURE__*/React.createElement(SearchLine, {

package/dist/AldSelect/index.js

@@ -18,7 +18,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
 import useOptions, { isRawValue } from "./hooks/useOptions";
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import { toArray } from "./utils/commonUtil";
+import { noOpFilter, toArray } from "./utils/commonUtil";
 import useCache from "./hooks/useCache";
 import BaseSelect, { isMultiple } from "./BaseSelect";
 import { injectPropsWithOption } from "./utils/valueUtil";
@@ -33,6 +33,7 @@ export default /*#__PURE__*/forwardRef(function AldSelect(props, ref) {
     options = props.options,
     onChange = props.onChange,
     onSelect = props.onSelect,
+    onSearch = props.onSearch,
     onDeselect = props.onDeselect,
     labelInValue = props.labelInValue,
     filterOption = props.filterOption,
@@ -205,6 +206,12 @@ export default /*#__PURE__*/forwardRef(function AldSelect(props, ref) {
       });
     }
   };
+  var handleSearch = function handleSearch(value) {
+    setInnerSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
   var selectMenu = useMemo(function () {
     return _objectSpread(_objectSpread({}, mergedMenu), {}, {
       items: (mergedMenu === null || mergedMenu === void 0 ? void 0 : mergedMenu.items) || [],
@@ -229,14 +236,16 @@ export default /*#__PURE__*/forwardRef(function AldSelect(props, ref) {
       }
     });
   }, [mergedMenu, mode, displayValues, triggerChange]);
-  var displayMenu = useDisplayMenu(selectMenu, filterOption, innerSearchValue);
+  var displayMenu = useDisplayMenu(selectMenu,
+  // 如果用户接管了搜索，则默认不做搜索过滤
+  onSearch ? filterOption || noOpFilter : filterOption, innerSearchValue);
   return /*#__PURE__*/React.createElement(BaseSelect, _extends({}, props, {
     ref: ref,
     disabled: mergedDisabled,
     displayValues: displayValues,
     onDisplayValuesChange: onDisplayValuesChange,
-    setInnerSearchValue: setInnerSearchValue,
-    innerSearchValue: innerSearchValue,
+    setInnerSearchValue: handleSearch,
+    innerSearchValue: searchValue === undefined ? innerSearchValue : searchValue,
     onOptionSelect: onOptionSelect,
     menu: selectMenu,
     displayMenu: displayMenu

package/dist/AldSelect/interface.d.ts

@@ -42,6 +42,7 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
     notFoundContent?: React.ReactNode;
+    onSearch?: (value: string) => void;
     filterOption?: (inputValue: string, option: OptionType) => boolean;
     tagRender?: (props: CustomTagProps, isPreview?: boolean) => React.ReactNode;
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);

package/dist/AldSelect/utils/commonUtil.d.ts

@@ -6,3 +6,4 @@ export declare const toString: (value: any) => string;
 /** Is client side and not jsdom */
 export declare const isBrowserClient: false | HTMLElement;
 export declare function convertOptionsToMenu(options: DefaultOptionType[], selectedKeys: React.Key[]): SelectMenuProps;
+export declare function noOpFilter(): boolean;

package/dist/AldSelect/utils/commonUtil.js

@@ -32,4 +32,7 @@ export function convertOptionsToMenu(options, selectedKeys) {
     }),
     selectedKeys: selectedKeys
   };
+}
+export function noOpFilter() {
+  return true;
 }

package/dist/Modal/style/polyfill/index.less

@@ -13,15 +13,12 @@
 }
 
 .ant-modal-wrap {
-  position: fixed;
-  inset: 0;
-  top: 0;
-  inset-inline-end: 0;
-  bottom: 0;
-  inset-inline-start: 0;
-  overflow: auto;
   outline: 0;
   z-index: 1000;
+  display: grid;
+  grid-template-rows: minmax(0, 100px) auto 1fr;
+  place-items: center;
+  height: 100vh;
 }
 
 .ant-modal.ald-modal {
@@ -34,10 +31,10 @@
   list-style: none;
   pointer-events: none;
   position: relative;
-  top: 100px;
+  grid-row: 2;
+  top: 0;
   width: auto;
   max-width: calc(100vw - 32px);
-  padding-bottom: 24px;
 }
 
 .ant-modal-content {

package/dist/Table/helper.d.ts

@@ -23,7 +23,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, con
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "center" | "left" | "right" | undefined;
+        align?: "left" | "center" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
         sortOrder?: "ascend" | "descend" | null | undefined;
     };
@@ -41,3 +41,4 @@ export declare function getNumberFromPercentageStr(str: string): number;
 export declare function isPercentage(str: string): boolean;
 export declare function prefixCls(className: string): string;
 export declare function getRowKey<TDataItem extends object>(row: TDataItem, rowKey: ITableProps<TDataItem>['rowKey'], defaultKey?: string | number): string;
+export declare function hasFixedLeftColumn<TDataItem extends object>(columns: ITableColumn<TDataItem>[]): boolean;

package/dist/Table/helper.js

@@ -155,4 +155,9 @@ export function getRowKey(row, rowKey, defaultKey) {
     rowKeyStr = _.get(row, rowKey);
   }
   return _.toString(rowKeyStr);
+}
+export function hasFixedLeftColumn(columns) {
+  return columns.some(function (col) {
+    return col.fixed === 'left';
+  });
 }

package/dist/Table/hooks/useRowDnd.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ITableProps } from '../types';
+export default function useRowDnd<TDataItem extends object>(props: ITableProps<TDataItem>): IRowDndInfo<TDataItem>;
+interface IRowDndInfo<TDataItem extends object> {
+    columns: ITableProps<TDataItem>['columns'];
+    getRowRef: (record: TDataItem, rowIndex: number) => React.MutableRefObject<HTMLDivElement> | undefined;
+    draggingRowId: string | null;
+    tableData: TDataItem[];
+}
+export {};

package/dist/Table/hooks/useRowDnd.js

@@ -0,0 +1,252 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import DragLightLineSvg from "../../Icon/components/DragLightLine";
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper";
+// 定义拖拽项类型
+var ROW_DND_TYPE = 'ALD_TABLE_ROW_DND_TYPE';
+// 拖拽手柄组件
+var DragHandle = function DragHandle(_ref) {
+  var index = _ref.index,
+    id = _ref.id,
+    onDragging = _ref.onDragging,
+    rowRef = _ref.rowRef,
+    onDragStart = _ref.onDragStart,
+    onDragComplete = _ref.onDragComplete;
+  var ref = useRef(null);
+
+  // 使用 ref 来跟踪是否已经通知拖动开始
+  var dragStartedRef = useRef(false);
+  var _useDrag = useDrag({
+      type: ROW_DND_TYPE,
+      item: function item() {
+        // 只在拖拽真正开始且尚未通知时触发一次
+        if (!dragStartedRef.current) {
+          // 通知开始拖动，传递行的ID
+          onDragStart(id);
+          dragStartedRef.current = true;
+        }
+        return {
+          index: index,
+          id: id
+        };
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      },
+      end: function end() {
+        // 拖拽结束时清除拖动状态和重置标志
+        onDragComplete();
+        dragStartedRef.current = false;
+      }
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 3),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1],
+    preview = _useDrag2[2];
+  var _useDrop = useDrop({
+      accept: ROW_DND_TYPE,
+      // @ts-ignore - react-dnd类型定义有时与实际用法不一致
+      hover: function hover(item, monitor) {
+        // 如果有行引用并且行引用有值，使用行引用来判断位置
+        var dropRef = rowRef === null || rowRef === void 0 ? void 0 : rowRef.current;
+        if (!dropRef) {
+          return;
+        }
+        var dragIndex = item.index;
+        var hoverIndex = index;
+
+        // 如果拖动的是自己，不做任何事
+        if (dragIndex === hoverIndex) {
+          return;
+        }
+
+        // 确定鼠标位置
+        var hoverBoundingRect = dropRef.getBoundingClientRect();
+        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        var clientOffset = monitor.getClientOffset();
+        if (!clientOffset) {
+          return;
+        }
+        var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+        // 向下拖动，但鼠标还没过半
+        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+          return;
+        }
+
+        // 向上拖动，但鼠标还没过半
+        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+          return;
+        }
+
+        // 执行排序
+        onDragging(dragIndex, hoverIndex);
+
+        // 更新拖拽项的索引，react-dnd 官方示例推荐这样做以提高性能并避免奇怪行为
+        item.index = hoverIndex;
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    drop = _useDrop2[1];
+
+  // 将 drag 连接到手柄 ref 上
+  drag(ref);
+
+  // 设置放置目标
+  if (rowRef !== null && rowRef !== void 0 && rowRef.current) {
+    drop(rowRef.current);
+  }
+  preview(getEmptyImage());
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: prefixCls('row-dnd-item'),
+    style: {
+      cursor: 'move',
+      opacity: isDragging ? 0.5 : 1
+    }
+  }, /*#__PURE__*/React.createElement(DragLightLineSvg, null));
+};
+export default function useRowDnd(props) {
+  var columns = props.columns,
+    rowDnd = props.rowDnd,
+    data = props.data,
+    rowKey = props.rowKey;
+  // 跟踪当前正在拖动的行的ID
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    draggingRowId = _useState2[0],
+    setDraggingRowId = _useState2[1];
+
+  // 为每一行创建一个 ref，使用 useMemo 缓存 Map 实例
+  var rowRefs = useMemo(function () {
+    return new Map();
+  }, []);
+
+  // 当拖拽过程中，临时存储数据
+  var _useState3 = useState(data),
+    _useState4 = _slicedToArray(_useState3, 2),
+    draggingTempData = _useState4[0],
+    setDraggingTempData = _useState4[1];
+  var tableData = useMemo(function () {
+    // 拖拽过程中，使用临时数据，这样外部调用方可以不用关心拖拽过程中的数据变化
+    if (draggingRowId) {
+      return draggingTempData;
+    }
+    return data;
+  }, [data, draggingRowId, draggingTempData]);
+
+  // 获取行的 ref，用于设置拖拽预览
+  var getRowRef = useCallback(function (record) {
+    var key = getRowKey(record, rowKey);
+    if (!rowRefs.has(key)) {
+      rowRefs.set(key, /*#__PURE__*/React.createRef());
+    }
+    return rowRefs.get(key);
+  }, [rowKey, rowRefs]);
+  var defaultInfo = useMemo(function () {
+    return {
+      columns: columns,
+      getRowRef: function getRowRef() {
+        return undefined;
+      },
+      draggingRowId: null,
+      tableData: data
+    };
+  }, [columns, data]);
+  if (!rowDnd) {
+    return defaultInfo;
+  }
+  if (props.expandable) {
+    console.error('rowDnd and expandable mode cannot be used together');
+    return defaultInfo;
+  }
+  if (!props.rowKey) {
+    // 如果rowKey没有设置，则无法进行拖拽，因为必须知道每行的唯一标识
+    console.error('rowKey is required in rowDnd mode');
+    return defaultInfo;
+  }
+  var rowDndFixed = rowDnd.fixed,
+    onChange = rowDnd.onChange;
+  var fixed = rowDndFixed || hasFixedLeftColumn(columns);
+  var handleDragging = function handleDragging(dragIndex, hoverIndex) {
+    // 使用函数式更新，确保基于最新的状态进行操作
+    setDraggingTempData(function (currentData) {
+      var newData = _toConsumableArray(currentData);
+
+      // 确保 dragIndex 在有效范围内
+      if (dragIndex < 0 || dragIndex >= newData.length) {
+        console.warn("Drag index ".concat(dragIndex, " out of bounds for data length ").concat(newData.length));
+        return currentData; // 返回当前状态，不作修改
+      }
+
+      // 保存被拖拽的行
+      var draggedRow = newData.splice(dragIndex, 1)[0];
+
+      // 如果因为某些原因未能获取到拖拽的行（理论上不应发生）
+      if (draggedRow === undefined) {
+        console.warn("Dragged item at index ".concat(dragIndex, " was undefined during splice."));
+        return currentData; // 返回当前状态，不作修改
+      }
+
+      // 插入到新位置
+      newData.splice(hoverIndex, 0, draggedRow);
+      return newData;
+    });
+  };
+
+  // 记录拖动开始
+  var handleDragStart = function handleDragStart(id) {
+    setDraggingRowId(id);
+  };
+
+  // 记录拖动结束
+  var handleDragComplete = function handleDragComplete() {
+    var draggingRow = tableData.find(function (item) {
+      return getRowKey(item, rowKey) === draggingRowId;
+    });
+    setDraggingRowId(null);
+    if (!draggingRow) {
+      // 不应该出现这种情况
+      console.error('draggingRow is not found');
+      return;
+    }
+    onChange(tableData, draggingRow);
+  };
+  var dndColumn = {
+    dataIndex: '',
+    title: '',
+    width: 48,
+    render: function render(text, record, rowIndex) {
+      var key = getRowKey(record, rowKey);
+      var rowRef = getRowRef(record);
+      return /*#__PURE__*/React.createElement(DragHandle, {
+        index: rowIndex,
+        id: key,
+        onDragging: handleDragging,
+        onDragStart: handleDragStart,
+        onDragComplete: handleDragComplete,
+        rowRef: rowRef
+      });
+    },
+    fixed: fixed ? 'left' : undefined
+  };
+  return {
+    columns: [dndColumn].concat(_toConsumableArray(columns)),
+    getRowRef: getRowRef,
+    draggingRowId: draggingRowId,
+    tableData: tableData
+  };
+}

package/dist/Table/hooks/useRowSelection.js

@@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useCallback, useState } from 'react';
 import Checkbox from "../../Checkbox";
-import { getRowKey, prefixCls } from "../helper";
+import { getRowKey, hasFixedLeftColumn, prefixCls } from "../helper";
 export default function useRowSelection(props) {
   var _rowSelection$items;
   var columns = props.columns,
@@ -97,6 +97,7 @@ export default function useRowSelection(props) {
   if (!rowKey) {
     throw new Error('rowKey is required when rowSelection is enabled');
   }
+  var fixed = !!rowSelection.fixed || hasFixedLeftColumn(columns);
   var rowSelectionColumn = {
     dataIndex: '',
     title: /*#__PURE__*/React.createElement("div", {
@@ -115,7 +116,7 @@ export default function useRowSelection(props) {
         checked: isChecked
       }, checkboxProps)));
     },
-    fixed: rowSelection.fixed ? 'left' : undefined
+    fixed: fixed ? 'left' : undefined
   };
   var selectedRowKeysInCurrPage = getDataWithoutDisabled(data, rowSelection.getCheckboxProps).map(function (record) {
     return getRowKey(record, rowKey);

package/dist/Table/index.js

@@ -17,6 +17,8 @@ import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { Empty, Spin } from '..';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import ExpandCell from "./components/ExpandCell";
 import Footer from "./components/Footer";
 import { getRowKey, getTableColumns, prefixCls } from "./helper";
@@ -24,6 +26,7 @@ import useExpandable, { getExpandableConfig } from "./hooks/useExpandable";
 import useFixed from "./hooks/useFixed";
 import useRowSelection from "./hooks/useRowSelection";
 import useScroll from "./hooks/useScroll";
+import useRowDnd from "./hooks/useRowDnd";
 var HEADER_HEIGHT = 41;
 var FOOTER_HEIGHT = 52;
 function Table(props, ref) {
@@ -47,7 +50,8 @@ function Table(props, ref) {
     onRowClick = props.onRowClick,
     onError = props.onError,
     onSort = props.onSort,
-    expandable = props.expandable;
+    expandable = props.expandable,
+    rowDnd = props.rowDnd;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     totalSize = _useState2[0],
@@ -87,18 +91,22 @@ function Table(props, ref) {
   });
   var expandableConfig = getExpandableConfig(expandable);
   var rowSelectionInfo = useRowSelection(props);
+  var rowDndInfo = useRowDnd(_objectSpread(_objectSpread({}, props), {}, {
+    columns: rowSelectionInfo.columns,
+    data: expandableInfo.data
+  }));
   var tableColumns = useMemo(function () {
     return getTableColumns({
-      columns: rowSelectionInfo.columns,
+      columns: rowDndInfo.columns,
       containerWidth: containerWidth || 0,
       onError: onError,
       onSort: onSort
     });
-  }, [containerWidth, onError, onSort, rowSelectionInfo.columns]);
+  }, [containerWidth, onError, onSort, rowDndInfo.columns]);
   var tableInstance = useReactTable({
     columns: tableColumns,
     // 排除掉被折叠的行
-    data: expandableInfo.data,
+    data: rowDndInfo.tableData,
     getCoreRowModel: getCoreRowModel(),
     getRowId: function getRowId(row, index) {
       return getRowKey(row, rowKey, index);
@@ -393,9 +401,18 @@ function Table(props, ref) {
     var rowNode = /*#__PURE__*/React.createElement("div", {
       key: rowId,
       "data-index": virtual ? rowData.index : rowIndex,
-      className: classnames(prefixCls('tr'), (_classnames4 = {}, _defineProperty(_classnames4, prefixCls('row-hover'), hoverRowId === rowId), _defineProperty(_classnames4, prefixCls('no-border-tr'), isShowPagination && rowIndex === rows.length - 1), _classnames4), rowClassName(row.original, rowIndex)),
+      className: classnames(prefixCls('tr'), (_classnames4 = {}, _defineProperty(_classnames4, prefixCls('row-hover'), rowDndInfo.draggingRowId ? undefined : hoverRowId === rowId), _defineProperty(_classnames4, prefixCls('row-dragging'), rowDndInfo.draggingRowId === rowId), _defineProperty(_classnames4, prefixCls('no-border-tr'), isShowPagination && rowIndex === rows.length - 1), _classnames4), rowClassName(row.original, rowIndex)),
       ref: function ref(node) {
-        return rowVirtualizer.measureElement(node);
+        // 将引用同时传递给 rowVirtualizer 和 rowDnd
+        rowVirtualizer.measureElement(node);
+
+        // 如果启用了行拖拽，则设置行引用
+        if (rowDnd && node) {
+          var rowRef = rowDndInfo.getRowRef(row.original, rowIndex);
+          if (rowRef) {
+            rowRef.current = node;
+          }
+        }
       },
       onClick: onClickRow(row.original, rowIndex),
       onMouseEnter: function onMouseEnter() {
@@ -474,6 +491,8 @@ function Table(props, ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classnames(prefixCls('main'), (_classnames7 = {}, _defineProperty(_classnames7, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames7, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames7, prefixCls('ping-right'), isPingRight), _classnames7))
-  }, tableContent)));
+  }, rowDnd ? /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, tableContent) : tableContent)));
 }
 export default /*#__PURE__*/forwardRef(Table);

package/dist/Table/style/index.less

@@ -226,6 +226,12 @@
           background-color: #f9fafb;
         }
       }
+
+      &.ald-table-row-dragging {
+        .ald-table-td {
+          background-color: #f9fafb;
+        }
+      }
     }
   }
 
@@ -399,3 +405,17 @@
   flex-shrink: 0;
   flex-grow: 0;
 }
+
+/** 行拖拽 **/
+.ald-table-row-dnd-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}

package/dist/Table/types.d.ts

@@ -21,6 +21,10 @@ export interface ITableProps<TDataItem extends object> {
     rowSelection?: IRowSelection<TDataItem>;
     bordered?: boolean;
     virtual?: boolean;
+    rowDnd?: {
+        fixed?: boolean;
+        onChange: (data: TDataItem[], dataItem: TDataItem) => void;
+    };
 }
 export type TRowKey<TDataItem extends object> = string | ((record: TDataItem) => string | number);
 export interface ITableCellErrorInfo {