@nokecy/qc-ui 1.0.82 → 1.0.84

package/dist/cjs/ag-grid-plus/setting/ColumnConfigTable.js

@@ -0,0 +1,940 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _reactDnd = require("react-dnd");
+var _reactDndHtml5Backend = require("react-dnd-html5-backend");
+var _columnGroupUtils = require("./columnGroupUtils");
+var _MoveNodeModal = _interopRequireDefault(require("./MoveNodeModal"));
+var _excluded = ["record", "index", "moveRow", "children"];
+/**
+ * 列配置表格组件
+ * 使用简单的 Ant Design Table 替代 Formily ArrayTable
+ * 通过 React useState 直接管理数据状态,确保 type 字段不会丢失
+ */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var DRAG_TYPE = 'COLUMN_ROW';
+/**
+ * 可拖拽的表格行组件
+ */
+var DraggableRow = function DraggableRow(_ref) {
+  var record = _ref.record,
+    index = _ref.index,
+    moveRow = _ref.moveRow,
+    children = _ref.children,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var ref = (0, _react.useRef)(null);
+  var _useDrag = (0, _reactDnd.useDrag)({
+      type: DRAG_TYPE,
+      item: {
+        id: record.id,
+        index: index,
+        parentId: record.parentId,
+        level: record.level
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1];
+  var _useDrop = (0, _reactDnd.useDrop)({
+      accept: DRAG_TYPE,
+      hover: function hover(item, monitor) {
+        if (!ref.current) return;
+        var dragIndex = item.index;
+        var hoverIndex = index;
+        if (dragIndex === hoverIndex) return;
+
+        // 只允许同级别、同父节点的节点之间拖拽
+        if (item.parentId !== record.parentId || item.level !== record.level) {
+          return;
+        }
+        var hoverBoundingRect = ref.current.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;
+        moveRow(dragIndex, hoverIndex, item, {
+          id: record.id,
+          index: hoverIndex,
+          parentId: record.parentId,
+          level: record.level
+        });
+        item.index = hoverIndex;
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    drop = _useDrop2[1];
+  drag(drop(ref));
+  return /*#__PURE__*/_react.default.createElement("tr", _extends({
+    ref: ref
+  }, restProps, {
+    style: {
+      opacity: isDragging ? 0.5 : 1,
+      cursor: 'move'
+    }
+  }), children);
+};
+
+/**
+ * 列配置表格组件
+ */
+var ColumnConfigTable = function ColumnConfigTable(_ref2) {
+  var items = _ref2.items,
+    onChange = _ref2.onChange,
+    _ref2$simple = _ref2.simple,
+    simple = _ref2$simple === void 0 ? false : _ref2$simple;
+  // 本地状态管理(用于优化性能)
+  var _useState = (0, _react.useState)(items),
+    _useState2 = _slicedToArray(_useState, 2),
+    localItems = _useState2[0],
+    setLocalItems = _useState2[1];
+
+  // 移动节点弹窗状态
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    moveModalVisible = _useState4[0],
+    setMoveModalVisible = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentMoveNode = _useState6[0],
+    setCurrentMoveNode = _useState6[1];
+
+  /**
+   * 同步更新本地状态和通知父组件
+   */
+  var updateItems = (0, _react.useCallback)(function (newItems) {
+    // 重新计算 order
+    (0, _columnGroupUtils.reorderItems)(newItems);
+    console.log('[ColumnConfigTable] updateItems 调用,重新计算 order 后:', {
+      itemsCount: newItems.length,
+      items: newItems.map(function (item, idx) {
+        return {
+          index: idx,
+          id: item.id,
+          type: item.type,
+          headerName: item.headerName,
+          field: item.field,
+          order: item.order,
+          parentId: item.parentId
+        };
+      })
+    });
+    setLocalItems(_toConsumableArray(newItems));
+    onChange(_toConsumableArray(newItems));
+  }, [onChange]);
+
+  /**
+   * 切换分组的折叠/展开状态
+   */
+  var handleToggleCollapse = (0, _react.useCallback)(function (nodeId) {
+    var newItems = localItems.map(function (item) {
+      if (item.id === nodeId && item.type === 'group') {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          _collapsed: !item._collapsed
+        });
+      }
+      return item;
+    });
+    setLocalItems(newItems);
+    // 注意: _collapsed 是临时UI状态，不需要通知父组件持久化
+  }, [localItems]);
+
+  /**
+   * 检查节点是否应该被隐藏（因为祖先节点折叠）
+   */
+  var isNodeHidden = (0, _react.useCallback)(function (item) {
+    var currentId = item.parentId;
+    while (currentId) {
+      var parent = localItems.find(function (i) {
+        return i.id === currentId;
+      });
+      if (!parent) break;
+      if (parent.type === 'group' && parent._collapsed) {
+        return true;
+      }
+      currentId = parent.parentId;
+    }
+    return false;
+  }, [localItems]);
+
+  /**
+   * 获取可见的节点列表（过滤掉被折叠隐藏的节点）
+   */
+  var visibleItems = (0, _react.useMemo)(function () {
+    return localItems.filter(function (item) {
+      return !isNodeHidden(item);
+    });
+  }, [localItems, isNodeHidden]);
+
+  /**
+   * 添加根级别分组
+   */
+  var handleAddRootGroup = (0, _react.useCallback)(function () {
+    var newGroup = {
+      id: (0, _columnGroupUtils.generateId)(),
+      type: 'group',
+      // ⚠️ 关键:明确设置 type
+      level: 0,
+      order: localItems.length,
+      headerName: '新分组',
+      groupId: (0, _columnGroupUtils.generateId)(),
+      _isNew: true
+    };
+    updateItems([].concat(_toConsumableArray(localItems), [newGroup]));
+    _antd.message.success('已添加根级别分组');
+  }, [localItems, updateItems]);
+
+  /**
+   * 为指定分组添加子分组
+   */
+  var handleAddChildGroup = (0, _react.useCallback)(function (parentId) {
+    var parentIndex = localItems.findIndex(function (item) {
+      return item.id === parentId;
+    });
+    if (parentIndex === -1) {
+      _antd.message.error('未找到父节点');
+      return;
+    }
+    var parent = localItems[parentIndex];
+    if (parent.type !== 'group') {
+      _antd.message.error('只能为分组添加子分组');
+      return;
+    }
+
+    // 找到插入位置(父节点的所有后代节点之后)
+    var insertIndex = (0, _columnGroupUtils.findLastDescendantIndex)(localItems, parentId) + 1;
+    var newGroup = {
+      id: (0, _columnGroupUtils.generateId)(),
+      type: 'group',
+      // ⚠️ 关键:明确设置 type
+      parentId: parentId,
+      level: parent.level + 1,
+      order: insertIndex,
+      headerName: '新子分组',
+      groupId: (0, _columnGroupUtils.generateId)(),
+      _isNew: true
+    };
+    var newItems = _toConsumableArray(localItems);
+    newItems.splice(insertIndex, 0, newGroup);
+    updateItems(newItems);
+    _antd.message.success("\u5DF2\u4E3A\u5206\u7EC4\"".concat(parent.headerName, "\"\u6DFB\u52A0\u5B50\u5206\u7EC4"));
+  }, [localItems, updateItems]);
+
+  /**
+   * 打开移动节点弹窗
+   */
+  var handleOpenMoveModal = (0, _react.useCallback)(function (node) {
+    console.log('[ColumnConfigTable] 打开移动弹窗:', {
+      node: {
+        id: node.id,
+        headerName: node.headerName,
+        type: node.type,
+        parentId: node.parentId,
+        level: node.level
+      },
+      allItems: localItems.map(function (n) {
+        return {
+          id: n.id,
+          headerName: n.headerName,
+          type: n.type,
+          parentId: n.parentId,
+          level: n.level
+        };
+      })
+    });
+    setCurrentMoveNode(node);
+    setMoveModalVisible(true);
+  }, [localItems]);
+
+  /**
+   * 关闭移动节点弹窗
+   */
+  var handleCloseMoveModal = (0, _react.useCallback)(function () {
+    setMoveModalVisible(false);
+    setCurrentMoveNode(null);
+  }, []);
+
+  /**
+   * 确认移动节点
+   */
+  var handleConfirmMove = (0, _react.useCallback)(function (targetParentId) {
+    if (!currentMoveNode) return;
+    var nodeId = currentMoveNode.id;
+
+    // 1. 验证:不能移动到自己的后代节点下
+    if (targetParentId) {
+      var checkId = targetParentId;
+      while (checkId) {
+        if (checkId === nodeId) {
+          _antd.message.error('不能将节点移动到自己的后代节点下');
+          return;
+        }
+        var parent = localItems.find(function (item) {
+          return item.id === checkId;
+        });
+        checkId = parent === null || parent === void 0 ? void 0 : parent.parentId;
+      }
+    }
+
+    // 2. 验证:不能移动到同一个父节点下(无意义操作)
+    if (currentMoveNode.parentId === targetParentId) {
+      _antd.message.warning('节点已经在该父节点下,无需移动');
+      handleCloseMoveModal();
+      return;
+    }
+
+    // 3. 执行移动
+    var newItems = _toConsumableArray(localItems);
+
+    // 3.1 收集要移动的节点(包括所有后代)
+    var nodesToMove = [];
+    var collectNodes = function collectNodes(id) {
+      var node = newItems.find(function (item) {
+        return item.id === id;
+      });
+      if (!node) return;
+      nodesToMove.push(node);
+
+      // 递归收集子节点
+      newItems.forEach(function (item) {
+        if (item.parentId === id) {
+          collectNodes(item.id);
+        }
+      });
+    };
+    collectNodes(nodeId);
+    console.log('[ColumnConfigTable] 移动节点:', {
+      nodeId: nodeId,
+      targetParentId: targetParentId,
+      nodesToMoveCount: nodesToMove.length,
+      nodesToMove: nodesToMove.map(function (n) {
+        return {
+          id: n.id,
+          headerName: n.headerName,
+          parentId: n.parentId
+        };
+      })
+    });
+
+    // 3.2 从原位置移除这些节点
+    var remainingItems = newItems.filter(function (item) {
+      return !nodesToMove.some(function (n) {
+        return n.id === item.id;
+      });
+    });
+
+    // 3.3 计算新的层级
+    var targetParent = targetParentId ? remainingItems.find(function (item) {
+      return item.id === targetParentId;
+    }) : undefined;
+    var newLevel = targetParent ? targetParent.level + 1 : 0;
+    var levelDelta = newLevel - currentMoveNode.level;
+
+    // 3.4 更新节点的 parentId 和 level
+    var updatedNodesToMove = nodesToMove.map(function (node) {
+      return _objectSpread(_objectSpread({}, node), {}, {
+        parentId: node.id === nodeId ? targetParentId : node.parentId,
+        level: node.level + levelDelta
+      });
+    });
+
+    // 3.5 找到插入位置
+    var insertIndex;
+    if (targetParentId) {
+      // 插入到目标父节点的所有后代之后
+      insertIndex = (0, _columnGroupUtils.findLastDescendantIndex)(remainingItems, targetParentId) + 1;
+    } else {
+      // 插入到根级别的末尾
+      insertIndex = remainingItems.length;
+    }
+    console.log('[ColumnConfigTable] 插入位置:', {
+      insertIndex: insertIndex,
+      targetParentId: targetParentId,
+      remainingItemsCount: remainingItems.length,
+      updatedNodesToMove: updatedNodesToMove.map(function (n) {
+        return {
+          id: n.id,
+          headerName: n.headerName,
+          parentId: n.parentId,
+          level: n.level
+        };
+      })
+    });
+
+    // 3.6 插入节点
+    remainingItems.splice.apply(remainingItems, [insertIndex, 0].concat(_toConsumableArray(updatedNodesToMove)));
+
+    // 3.7 重新计算 order
+    (0, _columnGroupUtils.reorderItems)(remainingItems);
+    console.log('[ColumnConfigTable] 移动完成后的数组:', {
+      totalCount: remainingItems.length,
+      items: remainingItems.map(function (n) {
+        return {
+          id: n.id,
+          headerName: n.headerName,
+          parentId: n.parentId,
+          level: n.level,
+          order: n.order
+        };
+      })
+    });
+    updateItems(remainingItems);
+    _antd.message.success("\u5DF2\u5C06\"".concat(currentMoveNode.headerName, "\"\u79FB\u52A8\u5230\u65B0\u4F4D\u7F6E"));
+    handleCloseMoveModal();
+  }, [currentMoveNode, localItems, updateItems, handleCloseMoveModal]);
+
+  /**
+   * 删除节点(及其所有子节点)
+   */
+  var handleDeleteNode = (0, _react.useCallback)(function (nodeId) {
+    var nodeIndex = localItems.findIndex(function (item) {
+      return item.id === nodeId;
+    });
+    if (nodeIndex === -1) {
+      _antd.message.error('未找到要删除的节点');
+      return;
+    }
+    var node = localItems[nodeIndex];
+
+    // 查找所有需要删除的节点(包括所有后代)
+    var toDelete = [nodeId];
+    var findDescendants = function findDescendants(parentId) {
+      localItems.forEach(function (item) {
+        if (item.parentId === parentId) {
+          toDelete.push(item.id);
+          if (item.type === 'group') {
+            findDescendants(item.id);
+          }
+        }
+      });
+    };
+    if (node.type === 'group') {
+      findDescendants(nodeId);
+    }
+    var newItems = localItems.filter(function (item) {
+      return !toDelete.includes(item.id);
+    });
+    updateItems(newItems);
+    _antd.message.success(node.type === 'group' ? "\u5DF2\u5220\u9664\u5206\u7EC4\"".concat(node.headerName, "\"\u53CA\u5176 ").concat(toDelete.length - 1, " \u4E2A\u5B50\u8282\u70B9") : "\u5DF2\u5220\u9664\u5217\"".concat(node.headerName, "\""));
+  }, [localItems, updateItems]);
+
+  /**
+   * 更新节点属性
+   */
+  var handleUpdateNode = (0, _react.useCallback)(function (nodeId, updates) {
+    var newItems = localItems.map(function (item) {
+      if (item.id === nodeId) {
+        // ⚠️ 关键:确保 type 字段不会被覆盖
+        return _objectSpread(_objectSpread(_objectSpread({}, item), updates), {}, {
+          type: item.type,
+          // 强制保留原始 type
+          _isNew: false // 清除新建标记
+        });
+      }
+      return item;
+    });
+    updateItems(newItems);
+  }, [localItems, updateItems]);
+
+  /**
+   * 处理拖拽排序
+   */
+  var handleDragSort = (0, _react.useCallback)(function (dragIndex, hoverIndex, dragItem, hoverItem) {
+    // 只有同级别、同父节点的节点才能拖拽排序
+    if (dragItem.parentId !== hoverItem.parentId || dragItem.level !== hoverItem.level) {
+      return;
+    }
+
+    // ✅ 关键修复: 通过 ID 找到在 localItems 中的真实索引
+    // dragIndex 和 hoverIndex 是基于 visibleItems 的索引,不能直接用于 localItems
+    var realDragIndex = localItems.findIndex(function (item) {
+      return item.id === dragItem.id;
+    });
+    var realHoverIndex = localItems.findIndex(function (item) {
+      return item.id === hoverItem.id;
+    });
+    if (realDragIndex === -1 || realHoverIndex === -1) {
+      console.error('[ColumnConfigTable] 找不到节点索引:', {
+        dragItem: dragItem,
+        hoverItem: hoverItem
+      });
+      return;
+    }
+    var newItems = _toConsumableArray(localItems);
+    var draggedItem = newItems[realDragIndex];
+
+    // 如果是分组节点,需要收集所有后代节点一起移动
+    var nodesToMove = [draggedItem];
+    if (draggedItem.type === 'group') {
+      // 递归收集所有后代节点
+      var collectDescendants = function collectDescendants(parentId) {
+        newItems.forEach(function (item) {
+          if (item.parentId === parentId) {
+            nodesToMove.push(item);
+            if (item.type === 'group') {
+              collectDescendants(item.id);
+            }
+          }
+        });
+      };
+      collectDescendants(draggedItem.id);
+    }
+    console.log('[ColumnConfigTable] 拖动排序:', {
+      dragIndex: dragIndex,
+      hoverIndex: hoverIndex,
+      realDragIndex: realDragIndex,
+      realHoverIndex: realHoverIndex,
+      draggedItem: {
+        id: draggedItem.id,
+        headerName: draggedItem.headerName,
+        type: draggedItem.type
+      },
+      nodesToMoveCount: nodesToMove.length,
+      nodesToMove: nodesToMove.map(function (n) {
+        return {
+          id: n.id,
+          headerName: n.headerName,
+          parentId: n.parentId
+        };
+      })
+    });
+
+    // 从原数组中移除所有要移动的节点
+    var remainingItems = newItems.filter(function (item) {
+      return !nodesToMove.some(function (n) {
+        return n.id === item.id;
+      });
+    });
+
+    // 计算新的插入位置
+    // 如果拖动到下方,需要调整插入索引(因为移除了节点)
+    var adjustedHoverIndex = realHoverIndex;
+    if (realDragIndex < realHoverIndex) {
+      // 向下拖动:需要减去被移除的节点数量
+      adjustedHoverIndex = realHoverIndex - nodesToMove.length;
+    }
+
+    // 在新位置插入所有节点
+    remainingItems.splice.apply(remainingItems, [adjustedHoverIndex, 0].concat(nodesToMove));
+    console.log('[ColumnConfigTable] 拖动完成,准备更新:', {
+      remainingItemsCount: remainingItems.length,
+      items: remainingItems.map(function (item, idx) {
+        return {
+          index: idx,
+          id: item.id,
+          type: item.type,
+          headerName: item.headerName,
+          field: item.field,
+          order: item.order,
+          parentId: item.parentId
+        };
+      })
+    });
+
+    // 使用 updateItems 来同时更新本地状态和通知父组件
+    updateItems(remainingItems);
+  }, [localItems, updateItems]);
+
+  /**
+   * 获取缩进符号
+   */
+  var getIndentSymbol = (0, _react.useCallback)(function (item) {
+    var _siblings;
+    if (item.level === 0) return '';
+    var siblings = localItems.filter(function (i) {
+      return i.parentId === item.parentId;
+    });
+    var isLast = ((_siblings = siblings[siblings.length - 1]) === null || _siblings === void 0 ? void 0 : _siblings.id) === item.id;
+    return isLast ? '└─ ' : '├─ ';
+  }, [localItems]);
+
+  /**
+   * 渲染名称列
+   */
+  var renderNameCell = (0, _react.useCallback)(function (text, record) {
+    var indent = record.level * 20;
+    var indentSymbol = getIndentSymbol(record);
+    var NodeIcon = record.type === 'group' ? /*#__PURE__*/_react.default.createElement(_icons.FolderOutlined, {
+      style: {
+        color: '#1890ff',
+        fontSize: 14
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_icons.FileOutlined, {
+      style: {
+        color: '#52c41a',
+        fontSize: 14
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        paddingLeft: indent,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      }
+    }, record.level > 0 && /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: '#999',
+        fontFamily: 'monospace',
+        fontSize: 12,
+        flexShrink: 0
+      }
+    }, indentSymbol), record.type === 'group' ? /*#__PURE__*/_react.default.createElement("span", {
+      onClick: function onClick() {
+        return handleToggleCollapse(record.id);
+      },
+      style: {
+        cursor: 'pointer',
+        fontSize: 12,
+        color: '#999',
+        flexShrink: 0,
+        width: 16,
+        textAlign: 'center'
+      }
+    }, record._collapsed ? /*#__PURE__*/_react.default.createElement(_icons.RightOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null)) : /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        width: 16,
+        flexShrink: 0
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        flexShrink: 0
+      }
+    }, NodeIcon), /*#__PURE__*/_react.default.createElement(_antd.Tag, {
+      color: record.type === 'group' ? 'blue' : 'green',
+      style: {
+        margin: 0,
+        flexShrink: 0
+      }
+    }, record.type === 'group' ? '分组' : '列'), /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      value: text,
+      onChange: function onChange(e) {
+        return handleUpdateNode(record.id, {
+          headerName: e.target.value
+        });
+      },
+      bordered: false,
+      placeholder: record.type === 'group' ? '请输入分组名称' : '请输入列名称',
+      style: {
+        flex: 1,
+        background: record._isNew ? '#fff7e6' : 'transparent'
+      }
+    }));
+  }, [getIndentSymbol, handleUpdateNode, handleToggleCollapse]);
+
+  /**
+   * 渲染操作列
+   */
+  var renderActionsCell = (0, _react.useCallback)(function (_, record) {
+    if (record.type === 'group') {
+      return /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        size: "small"
+      }, !simple && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        title: "\u6DFB\u52A0\u5B50\u5206\u7EC4"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        icon: /*#__PURE__*/_react.default.createElement(_icons.FolderAddOutlined, null),
+        onClick: function onClick() {
+          return handleAddChildGroup(record.id);
+        }
+      }, "\u6DFB\u52A0\u5B50\u5206\u7EC4")), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        title: "\u79FB\u52A8\u8282\u70B9"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        icon: /*#__PURE__*/_react.default.createElement(_icons.DragOutlined, null),
+        onClick: function onClick() {
+          return handleOpenMoveModal(record);
+        }
+      }, "\u79FB\u52A8")), record._isNew && /*#__PURE__*/_react.default.createElement(_antd.Popconfirm, {
+        title: "\u786E\u5B9A\u8981\u5220\u9664\u5206\u7EC4\"".concat(record.headerName, "\"\u53CA\u5176\u6240\u6709\u5B50\u8282\u70B9\u5417\uFF1F"),
+        onConfirm: function onConfirm() {
+          return handleDeleteNode(record.id);
+        },
+        okText: "\u786E\u5B9A",
+        cancelText: "\u53D6\u6D88"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        title: "\u5220\u9664\u5206\u7EC4"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        danger: true,
+        icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null)
+      })))));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        size: "small"
+      }, !simple && /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        title: "\u79FB\u52A8\u8282\u70B9"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        icon: /*#__PURE__*/_react.default.createElement(_icons.DragOutlined, null),
+        onClick: function onClick() {
+          return handleOpenMoveModal(record);
+        }
+      }, "\u79FB\u52A8")));
+    }
+  }, [simple, handleAddChildGroup, handleDeleteNode, handleOpenMoveModal]);
+
+  /**
+   * 表格列配置
+   */
+  var columns = (0, _react.useMemo)(function () {
+    return [{
+      title: '排序',
+      key: 'sort',
+      width: 40,
+      align: 'center',
+      render: function render() {
+        return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+          title: "\u62D6\u52A8\u6392\u5E8F\uFF08\u4EC5\u652F\u6301\u540C\u7EA7\uFF09"
+        }, /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, {
+          style: {
+            fontSize: 16,
+            color: '#999',
+            cursor: 'move'
+          }
+        }));
+      }
+    }, {
+      title: '操作',
+      key: 'actions',
+      width: 120,
+      align: 'center',
+      render: renderActionsCell
+    }, {
+      title: '名称',
+      dataIndex: 'headerName',
+      key: 'headerName',
+      width: 100,
+      render: renderNameCell
+    }, {
+      title: '宽度',
+      dataIndex: 'width',
+      key: 'width',
+      width: 80,
+      align: 'center',
+      render: function render(value, record) {
+        if (record.type !== 'column') return '-';
+        return /*#__PURE__*/_react.default.createElement(_antd.InputNumber, {
+          value: value,
+          onChange: function onChange(newValue) {
+            return handleUpdateNode(record.id, {
+              width: newValue || undefined
+            });
+          },
+          min: 50,
+          max: 1000,
+          style: {
+            width: '100%'
+          }
+        });
+      }
+    }, {
+      title: '占满',
+      dataIndex: 'flex',
+      key: 'flex',
+      width: 50,
+      align: 'center',
+      render: function render(value, record) {
+        if (record.type !== 'column') return '-';
+        return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+          value: value || 0,
+          onChange: function onChange(newValue) {
+            return handleUpdateNode(record.id, {
+              flex: newValue
+            });
+          },
+          style: {
+            width: '100%'
+          },
+          options: [{
+            value: 1,
+            label: '占满'
+          }, {
+            value: 0,
+            label: '不占满'
+          }]
+        });
+      }
+    }, {
+      title: '固定',
+      dataIndex: 'pinned',
+      key: 'pinned',
+      width: 50,
+      align: 'center',
+      render: function render(value, record) {
+        if (record.type !== 'column') return '-';
+        return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+          value: value || 'notPinned',
+          onChange: function onChange(newValue) {
+            return handleUpdateNode(record.id, {
+              pinned: newValue
+            });
+          },
+          style: {
+            width: '100%'
+          },
+          options: [{
+            value: 'left',
+            label: '左固定'
+          }, {
+            value: 'right',
+            label: '右固定'
+          }, {
+            value: 'notPinned',
+            label: '不固定'
+          }]
+        });
+      }
+    }, {
+      title: '隐藏',
+      dataIndex: 'hide',
+      key: 'hide',
+      width: 50,
+      align: 'center',
+      render: function render(value, record) {
+        if (record.type !== 'column') return '-';
+        return /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+          checked: value || false,
+          onChange: function onChange(checked) {
+            return handleUpdateNode(record.id, {
+              hide: checked
+            });
+          }
+        });
+      }
+    }, {
+      title: '布局',
+      dataIndex: 'cellClass',
+      key: 'cellClass',
+      width: 50,
+      align: 'center',
+      render: function render(value, record) {
+        if (record.type !== 'column') return '-';
+        return /*#__PURE__*/_react.default.createElement(_antd.Select, {
+          value: value || 'custom-cell-left',
+          onChange: function onChange(newValue) {
+            return handleUpdateNode(record.id, {
+              cellClass: newValue
+            });
+          },
+          style: {
+            width: '100%'
+          },
+          options: [{
+            value: 'custom-cell-left',
+            label: '左对齐'
+          }, {
+            value: 'custom-cell-right',
+            label: '右对齐'
+          }, {
+            value: 'custom-cell-centered',
+            label: '居中'
+          }]
+        });
+      }
+    }, {
+      title: '列过滤',
+      dataIndex: 'suppressHeaderFilterButton',
+      key: 'suppressHeaderFilterButton',
+      width: 50,
+      align: 'center',
+      render: function render(value, record) {
+        if (record.type !== 'column') return '-';
+        return /*#__PURE__*/_react.default.createElement(_antd.Switch, {
+          checked: !value,
+          onChange: function onChange(checked) {
+            return handleUpdateNode(record.id, {
+              suppressHeaderFilterButton: !checked
+            });
+          }
+        });
+      }
+    }];
+  }, [renderNameCell, renderActionsCell, handleUpdateNode]);
+  return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.HTML5Backend
+  }, /*#__PURE__*/_react.default.createElement("div", null, !simple && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    type: "primary",
+    icon: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null),
+    onClick: handleAddRootGroup
+  }, "\u6DFB\u52A0\u6839\u7EA7\u522B\u5206\u7EC4")), /*#__PURE__*/_react.default.createElement(_antd.Table, {
+    columns: columns,
+    dataSource: visibleItems,
+    rowKey: "id",
+    pagination: false,
+    bordered: true,
+    size: "small",
+    scroll: {
+      x: 1000
+    },
+    components: {
+      body: {
+        row: function row(props) {
+          var record = visibleItems.find(function (item) {
+            return item.id === props['data-row-key'];
+          });
+          var index = visibleItems.findIndex(function (item) {
+            return item.id === props['data-row-key'];
+          });
+          if (!record) return /*#__PURE__*/_react.default.createElement("tr", props);
+          return /*#__PURE__*/_react.default.createElement(DraggableRow, _extends({
+            record: record,
+            index: index,
+            moveRow: handleDragSort
+          }, props));
+        }
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_MoveNodeModal.default, {
+    visible: moveModalVisible,
+    currentNode: currentMoveNode,
+    allItems: localItems,
+    onCancel: handleCloseMoveModal,
+    onConfirm: handleConfirmMove
+  })));
+};
+var _default = exports.default = ColumnConfigTable;