@nokecy/qc-ui 1.1.3 → 1.1.5

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

@@ -1,18 +1,13 @@
 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); }
-import _debounce from "lodash/debounce";
-var _excluded = ["record", "index", "moveRow", "children"];
+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 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 _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; }
 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); }
@@ -20,316 +15,517 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 /**
- * 列配置表格组件
- * 使用简单的 Ant Design Table 替代 Formily ArrayTable
- * 通过 React useState 直接管理数据状态,确保 type 字段不会丢失
+ * 列配置表格组件 - AG-Grid 版本
+ * 使用 AG-Grid 替代 Ant Design Table,性能更优
  */
 
-import React, { useCallback, useMemo, useState, useRef, useEffect, useLayoutEffect } from 'react';
-import { Table, Button, Input, InputNumber, Select, Switch, Space, Popconfirm, message, Tag, Tooltip } from 'antd';
-import { PlusOutlined, DeleteOutlined, FolderOutlined, FolderAddOutlined, FileOutlined, DownOutlined, RightOutlined, DragOutlined, HolderOutlined } from '@ant-design/icons';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import { generateId, findLastDescendantIndex, reorderItems } from "./columnGroupUtils";
-import MoveNodeModal from "./MoveNodeModal";
-var DRAG_TYPE = 'COLUMN_ROW';
-/**
- * 受控的名称输入组件 - 解决光标跳出问题
- * 通过内部维护输入状态,只在失去焦点时同步到父组件
- */
-var NameInput = function NameInput(_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    placeholder = _ref.placeholder,
-    isNew = _ref.isNew;
-  var _useState = useState(value),
-    _useState2 = _slicedToArray(_useState, 2),
-    localValue = _useState2[0],
-    setLocalValue = _useState2[1];
-
-  // 同步外部变化到本地状态
-  useEffect(function () {
-    setLocalValue(value);
-  }, [value]);
-
-  // 处理输入变化 - 只更新本地状态
-  var handleChange = function handleChange(e) {
-    setLocalValue(e.target.value);
-  };
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { Button, Select, Switch, Space, Popconfirm, message, Tag, Input } from 'antd';
+import { DeleteOutlined, FolderOutlined, FolderAddOutlined, FileOutlined, HolderOutlined } from '@ant-design/icons';
+import { AgGridReact } from 'ag-grid-react';
+import { generateId } from "./columnGroupUtils";
+import { DebounceNumberInput } from "./DebounceInputs";
+import { agGridTheme } from "../theme";
+// ==================== Cell Renderers ====================
+
+/** 类型标签 */
+var TypeCellRenderer = function TypeCellRenderer(props) {
+  var item = props.data;
+  if (!item) return null;
+  if (item.type === 'group') {
+    return /*#__PURE__*/React.createElement(Tag, {
+      color: "blue",
+      icon: /*#__PURE__*/React.createElement(FolderOutlined, null)
+    }, "\u5206\u7EC4");
+  }
+  return /*#__PURE__*/React.createElement(Tag, {
+    color: "green",
+    icon: /*#__PURE__*/React.createElement(FileOutlined, null)
+  }, "\u5217");
+};
 
-  // 失去焦点时同步到父组件
-  var handleBlur = function handleBlur() {
-    if (localValue !== value) {
-      onChange(localValue);
+/** 名称列 (带拖拽图标和缩进) */
+var NameCellRenderer = function NameCellRenderer(props) {
+  var item = props.data;
+  if (!item) return null;
+  var paddingLeft = (item.level || 0) * 20;
+
+  // 从 props 中获取自定义参数
+  var _ref = props,
+    expandedKeys = _ref.expandedKeys,
+    onToggleExpand = _ref.onToggleExpand,
+    allItems = _ref.allItems;
+
+  // 检查是否有子节点
+  var hasChildren = allItems === null || allItems === void 0 ? void 0 : allItems.some(function (i) {
+    return i.parentId === item.id;
+  });
+  var isExpanded = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.has(item.id);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      paddingLeft: paddingLeft
     }
-  };
-
-  // 按回车键时也同步并失去焦点
-  var handlePressEnter = function handlePressEnter() {
-    if (localValue !== value) {
-      onChange(localValue);
+  }, item.type === 'group' && hasChildren ? /*#__PURE__*/React.createElement("span", {
+    onClick: function onClick() {
+      return onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand(item.id);
+    },
+    style: {
+      cursor: 'pointer',
+      width: 16,
+      display: 'inline-block'
     }
-  };
-  return /*#__PURE__*/React.createElement(Input, {
-    value: localValue,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onPressEnter: handlePressEnter,
+  }, isExpanded ? '▼' : '▶') : /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 16,
+      display: 'inline-block'
+    }
+  }), /*#__PURE__*/React.createElement(HolderOutlined, {
+    style: {
+      color: '#999',
+      cursor: 'grab'
+    }
+  }), /*#__PURE__*/React.createElement(Input, {
+    value: item.headerName || '',
+    onChange: function onChange(e) {
+      if (props.node) {
+        props.node.setDataValue('headerName', e.target.value);
+      }
+    },
     bordered: false,
-    placeholder: placeholder,
+    placeholder: "\u8F93\u5165\u540D\u79F0",
     style: {
-      flex: 1,
-      background: isNew ? '#fff7e6' : 'transparent'
+      flex: 1
+    }
+  }));
+};
+
+/** 宽度输入 */
+var WidthCellRenderer = function WidthCellRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/React.createElement("span", null, "-");
+  return /*#__PURE__*/React.createElement(DebounceNumberInput, {
+    value: item.width || 150,
+    onChange: function onChange(val) {
+      if (props.node) {
+        props.node.setDataValue('width', val);
+      }
+    },
+    min: 50,
+    max: 1000,
+    style: {
+      width: '100%'
     }
   });
 };
 
-/**
- * 可拖拽的表格行组件
- */
-var DraggableRow = function DraggableRow(_ref2) {
-  var record = _ref2.record,
-    index = _ref2.index,
-    moveRow = _ref2.moveRow,
-    children = _ref2.children,
-    restProps = _objectWithoutProperties(_ref2, _excluded);
-  var ref = useRef(null);
-  var _useDrag = useDrag({
-      type: DRAG_TYPE,
-      item: {
-        id: record.id,
-        index: index,
-        parentId: record.parentId,
-        level: record.level
+/** Switch 渲染器工厂 */
+var createSwitchRenderer = function createSwitchRenderer(field) {
+  return function (props) {
+    var item = props.data;
+    if (!item || item.type !== 'column') return /*#__PURE__*/React.createElement("span", null, "-");
+
+    // 获取字段值
+    var fieldValue = item[field];
+
+    // 只检查布尔值
+    var isChecked = fieldValue === true;
+    return /*#__PURE__*/React.createElement(Switch, {
+      checked: isChecked,
+      onChange: function onChange(checked) {
+        if (props.node) {
+          // 保存时统一为布尔值
+          props.node.setDataValue(field, checked);
+        }
       },
-      collect: function collect(monitor) {
-        return {
-          isDragging: monitor.isDragging()
-        };
+      size: "small"
+    });
+  };
+};
+
+/** 列过滤按钮渲染器 (注意：suppressHeaderFilterButton 字段为 true 时表示"禁用"过滤按钮) */
+var SuppressFilterButtonRenderer = function SuppressFilterButtonRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/React.createElement("span", null, "-");
+
+  // 注意：suppressHeaderFilterButton = true 表示"禁用"过滤按钮
+  // 所以 Switch 显示需要取反：checked 表示"启用"过滤
+  var isFilterEnabled = !item.suppressHeaderFilterButton;
+  return /*#__PURE__*/React.createElement(Switch, {
+    checked: isFilterEnabled,
+    onChange: function onChange(checked) {
+      if (props.node) {
+        // 取反保存：checked=true 表示启用过滤，保存为 false
+        props.node.setDataValue('suppressHeaderFilterButton', !checked);
       }
-    }),
-    _useDrag2 = _slicedToArray(_useDrag, 2),
-    isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1];
-  var _useDrop = 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;
+    },
+    size: "small"
+  });
+};
+
+/** Select 下拉框渲染器 */
+var FlexCellRenderer = function FlexCellRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/React.createElement("span", null, "-");
+  return /*#__PURE__*/React.createElement(Select, {
+    value: item.flex || 0,
+    onChange: function onChange(val) {
+      if (props.node) {
+        props.node.setDataValue('flex', val);
+      }
+    },
+    style: {
+      width: '100%'
+    },
+    options: [{
+      value: 1,
+      label: '占满'
+    }, {
+      value: 0,
+      label: '不占满'
+    }],
+    size: "small"
+  });
+};
+var PinnedCellRenderer = function PinnedCellRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/React.createElement("span", null, "-");
+
+  // 标准化 pinned 值 - 处理旧版本的 notPinned
+  var normalizedValue = !item.pinned || item.pinned === 'notPinned' ? 'none' : item.pinned;
+  return /*#__PURE__*/React.createElement(Select, {
+    value: normalizedValue,
+    onChange: function onChange(val) {
+      if (props.node) {
+        // 保存时将 none 转换为 undefined 或 null
+        props.node.setDataValue('pinned', val === 'none' ? null : val);
       }
-    }),
-    _useDrop2 = _slicedToArray(_useDrop, 2),
-    drop = _useDrop2[1];
-  drag(drop(ref));
-  return /*#__PURE__*/React.createElement("tr", _extends({
-    ref: ref
-  }, restProps, {
+    },
     style: {
-      opacity: isDragging ? 0.5 : 1,
-      cursor: 'move'
+      width: '100%'
+    },
+    options: [{
+      value: 'none',
+      label: '不固定'
+    }, {
+      value: 'left',
+      label: '左侧'
+    }, {
+      value: 'right',
+      label: '右侧'
+    }],
+    size: "small"
+  });
+};
+
+/** 操作列 */
+var ActionCellRenderer = function ActionCellRenderer(props) {
+  var item = props.data;
+  if (!item) return null;
+
+  // 从 props 中获取自定义参数
+  var _ref2 = props,
+    onDelete = _ref2.onDelete,
+    onAddChildGroup = _ref2.onAddChildGroup,
+    simple = _ref2.simple;
+  return /*#__PURE__*/React.createElement(Space, {
+    size: "small"
+  }, !simple && item.type === 'group' && /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(FolderAddOutlined, null),
+    onClick: function onClick() {
+      return onAddChildGroup === null || onAddChildGroup === void 0 ? void 0 : onAddChildGroup(item.id);
+    }
+  }, "\u6DFB\u52A0\u5B50\u5206\u7EC4"), item.type === 'group' && /*#__PURE__*/React.createElement(Popconfirm, {
+    title: "\u5220\u9664\u5206\u7EC4\u540E,\u5176\u5B50\u9879\u5C06\u79FB\u81F3\u6839\u7EA7\u522B,\u786E\u5B9A\u5220\u9664\u5417?",
+    onConfirm: function onConfirm() {
+      return onDelete === null || onDelete === void 0 ? void 0 : onDelete(item.id);
     }
-  }), children);
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    danger: true,
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
+  }, "\u5220\u9664")));
 };
 
-/**
- * 列配置表格组件
- */
+// ==================== 主组件 ====================
+
 var ColumnConfigTable = function ColumnConfigTable(_ref3) {
   var items = _ref3.items,
     onChange = _ref3.onChange,
     _ref3$simple = _ref3.simple,
     simple = _ref3$simple === void 0 ? false : _ref3$simple,
-    scrollY = _ref3.scrollY;
-  // 本地状态管理(用于优化性能)
-  var _useState3 = useState(items),
+    _ref3$scrollY = _ref3.scrollY,
+    scrollY = _ref3$scrollY === void 0 ? 480 : _ref3$scrollY;
+  var _useState = useState(items),
+    _useState2 = _slicedToArray(_useState, 2),
+    localItems = _useState2[0],
+    setLocalItems = _useState2[1];
+  var _useState3 = useState(new Set()),
     _useState4 = _slicedToArray(_useState3, 2),
-    localItems = _useState4[0],
-    setLocalItems = _useState4[1];
-
-  // 移动节点弹窗状态
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    moveModalVisible = _useState6[0],
-    setMoveModalVisible = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    currentMoveNode = _useState8[0],
-    setCurrentMoveNode = _useState8[1];
-
-  // 表格容器引用和动态高度
-  var containerRef = useRef(null);
-  var _useState9 = useState(scrollY || 480),
-    _useState10 = _slicedToArray(_useState9, 2),
-    tableHeight = _useState10[0],
-    setTableHeight = _useState10[1];
-
-  /**
-   * 同步更新本地状态和通知父组件
-   */
+    expandedKeys = _useState4[0],
+    setExpandedKeys = _useState4[1];
+  var gridApiRef = useRef();
+
+  // 同步外部数据
+  React.useEffect(function () {
+    setLocalItems(items);
+    // 默认展开所有分组
+    var allGroupIds = items.filter(function (item) {
+      return item.type === 'group';
+    }).map(function (item) {
+      return item.id;
+    });
+    setExpandedKeys(new Set(allGroupIds));
+  }, [items]);
+
+  // 更新数据并同步到父组件
   var updateItems = useCallback(function (newItems) {
-    // 重新计算 order
-    reorderItems(newItems);
-    setLocalItems(_toConsumableArray(newItems));
-    onChange(_toConsumableArray(newItems));
+    setLocalItems(newItems);
+    onChange(newItems);
   }, [onChange]);
 
-  /**
-   * 防抖的更新函数 - 用于输入框等高频更新场景
-   * 延迟 300ms 后才通知父组件,减少不必要的重渲染
-   */
-  var debouncedUpdateItems = useMemo(function () {
-    return _debounce(function (newItems) {
-      reorderItems(newItems);
-      onChange(_toConsumableArray(newItems));
-    }, 300);
-  }, [onChange]);
+  // Grid 准备完成
+  var onGridReady = useCallback(function (params) {
+    gridApiRef.current = params.api;
+  }, []);
 
-  // 组件卸载时清理防抖函数
-  useEffect(function () {
-    return function () {
-      debouncedUpdateItems.cancel();
+  // 递归获取节点的所有子孙节点ID
+  var getAllDescendantIds = useCallback(function (nodeId) {
+    var descendants = new Set();
+    var findDescendants = function findDescendants(id) {
+      localItems.forEach(function (item) {
+        if (item.parentId === id) {
+          descendants.add(item.id);
+          findDescendants(item.id); // 递归查找子孙
+        }
+      });
     };
-  }, [debouncedUpdateItems]);
-
-  // 动态计算表格容器高度
-  useLayoutEffect(function () {
-    var _containerRef$current3, _containerRef$current4;
-    // 如果外部传入了 scrollY,使用外部值
-    if (scrollY) {
-      setTableHeight(scrollY);
-      return;
-    }
-    var calculateHeight = function calculateHeight() {
-      if (containerRef.current) {
-        var _containerRef$current, _containerRef$current2;
-        // 查找 Modal 相关元素
-        var _modalContent = containerRef.current.closest('.ant-modal-content');
-        var modalHeader = (_containerRef$current = containerRef.current.closest('.ant-modal')) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector('.ant-modal-header');
-        var modalFooter = (_containerRef$current2 = containerRef.current.closest('.ant-modal')) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelector('.ant-modal-footer');
-        if (_modalContent) {
-          // 获取各部分的实际高度
-          var modalContentRect = _modalContent.getBoundingClientRect();
-          var containerRect = containerRef.current.getBoundingClientRect();
-          var headerHeight = modalHeader ? modalHeader.getBoundingClientRect().height : 0;
-          var footerHeight = modalFooter ? modalFooter.getBoundingClientRect().height : 0;
-
-          // 计算表格可用高度 = Modal Content 高度 - Header - Footer - 容器之前的内容高度 - 底部留白
-          var contentBeforeTable = containerRect.top - modalContentRect.top - headerHeight;
-          var availableHeight = modalContentRect.height - headerHeight - footerHeight - contentBeforeTable - 55;
-
-          // 设置最小高度为300px
-          var finalHeight = Math.max(600, availableHeight);
-          setTableHeight(finalHeight);
+    findDescendants(nodeId);
+    return descendants;
+  }, [localItems]);
+
+  // 递归更新节点及其所有子孙节点的 level
+  var updateNodeLevels = useCallback(function (items, nodeId, newLevel) {
+    return items.map(function (item) {
+      if (item.id === nodeId) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          level: newLevel
+        });
+      }
+      // 如果是子节点，递归更新
+      if (item.parentId === nodeId) {
+        return updateNodeLevels([_objectSpread(_objectSpread({}, item), {}, {
+          level: newLevel + 1
+        })], item.id, newLevel + 1)[0];
+      }
+      return item;
+    });
+  }, []);
+
+  // 行拖拽结束
+  var onRowDragEnd = useCallback(function (event) {
+    var _event$overNode;
+    var movingNode = event.node.data;
+    var overNode = (_event$overNode = event.overNode) === null || _event$overNode === void 0 ? void 0 : _event$overNode.data;
+    if (!movingNode || !overNode || movingNode.id === overNode.id) return;
+
+    // 检查是否拖动到分组上(移入分组)
+    if (overNode.type === 'group') {
+      // 防止将分组拖入其子孙节点
+      if (movingNode.type === 'group') {
+        var descendantIds = getAllDescendantIds(movingNode.id);
+        if (descendantIds.has(overNode.id)) {
+          message.error('不能将分组移入其子孙节点');
+          return;
         }
       }
-    };
 
-    // 延迟执行确保DOM渲染完成
-    setTimeout(calculateHeight, 0);
-    window.addEventListener('resize', calculateHeight);
+      // 收集需要移动的所有节点(包括子孙节点)
+      var movingIds = new Set([movingNode.id]);
+      if (movingNode.type === 'group') {
+        var descendants = getAllDescendantIds(movingNode.id);
+        descendants.forEach(function (id) {
+          return movingIds.add(id);
+        });
+      }
 
-    // 监听 Modal 大小变化
-    var observer = new MutationObserver(function () {
-      // 使用 requestAnimationFrame 确保 flex 布局更新完成
-      requestAnimationFrame(calculateHeight);
-    });
-    var modal = (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.closest('.ant-modal');
-    var modalContent = (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.closest('.ant-modal-content');
-
-    // 同时监听 modal 和 modalContent 的 style 变化
-    if (modal) {
-      observer.observe(modal, {
-        attributes: true,
-        attributeFilter: ['style']
+      // 1. 分离出不移动的节点和要移动的节点
+      var nonMovingItems = [];
+      var movingItems = [];
+      localItems.forEach(function (item) {
+        if (movingIds.has(item.id)) {
+          movingItems.push(item);
+        } else {
+          nonMovingItems.push(item);
+        }
       });
+
+      // 2. 在目标分组的子节点末尾找到插入位置
+      var targetGroupIndex = nonMovingItems.findIndex(function (item) {
+        return item.id === overNode.id;
+      });
+      var insertIndex = targetGroupIndex + 1;
+
+      // 找到目标分组的最后一个子节点位置
+      while (insertIndex < nonMovingItems.length && nonMovingItems[insertIndex].parentId === overNode.id) {
+        insertIndex++;
+      }
+
+      // 3. 更新移动节点的父节点和层级
+      var newLevel = (overNode.level || 0) + 1;
+      var levelDiff = newLevel - (movingNode.level || 0);
+      var updatedMovingItems = movingItems.map(function (item) {
+        if (item.id === movingNode.id) {
+          // 主节点：更新父节点和层级
+          return _objectSpread(_objectSpread({}, item), {}, {
+            parentId: overNode.id,
+            level: newLevel
+          });
+        } else {
+          // 子孙节点：只更新层级(保持原有的 parentId)
+          return _objectSpread(_objectSpread({}, item), {}, {
+            level: (item.level || 0) + levelDiff
+          });
+        }
+      });
+
+      // 4. 合并数组并重新计算 order
+      var result = [].concat(_toConsumableArray(nonMovingItems.slice(0, insertIndex)), _toConsumableArray(updatedMovingItems), _toConsumableArray(nonMovingItems.slice(insertIndex)));
+      var finalItems = result.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          order: index
+        });
+      });
+
+      // 自动展开目标分组
+      setExpandedKeys(function (prev) {
+        return new Set(prev).add(overNode.id);
+      });
+      updateItems(finalItems);
+      message.success("\u5DF2\u79FB\u52A8\u5230 ".concat(overNode.headerName));
+      return;
     }
-    if (modalContent) {
-      observer.observe(modalContent, {
-        attributes: true,
-        attributeFilter: ['style']
+
+    // 同级拖拽排序
+    if (movingNode.parentId === overNode.parentId) {
+      // 收集需要移动的所有节点(包括子孙节点)
+      var _movingIds = new Set([movingNode.id]);
+      if (movingNode.type === 'group') {
+        var _descendants = getAllDescendantIds(movingNode.id);
+        _descendants.forEach(function (id) {
+          return _movingIds.add(id);
+        });
+      }
+
+      // 分离出不移动的节点和要移动的节点
+      var _nonMovingItems = [];
+      var _movingItems = [];
+      localItems.forEach(function (item) {
+        if (_movingIds.has(item.id)) {
+          _movingItems.push(item);
+        } else {
+          _nonMovingItems.push(item);
+        }
+      });
+
+      // 找到目标节点的位置
+      var overIndex = _nonMovingItems.findIndex(function (item) {
+        return item.id === overNode.id;
+      });
+      if (overIndex === -1) return;
+
+      // 找到移动节点原本的位置
+      var originalMovingIndex = localItems.findIndex(function (item) {
+        return item.id === movingNode.id;
+      });
+      var originalOverIndex = localItems.findIndex(function (item) {
+        return item.id === overNode.id;
       });
+
+      // 根据原始位置判断插入位置
+      var _insertIndex = originalMovingIndex < originalOverIndex ? overIndex + 1 : overIndex;
+
+      // 插入到新位置
+      var _result = [].concat(_toConsumableArray(_nonMovingItems.slice(0, _insertIndex)), _movingItems, _toConsumableArray(_nonMovingItems.slice(_insertIndex)));
+
+      // 更新 order 字段
+      var updatedItems = _result.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          order: index
+        });
+      });
+      updateItems(updatedItems);
+      message.success('排序已更新');
+      return;
     }
-    return function () {
-      window.removeEventListener('resize', calculateHeight);
-      observer.disconnect();
-    };
-  }, [scrollY]);
-
-  /**
-   * 切换分组的折叠/展开状态
-   */
-  var handleToggleCollapse = useCallback(function (nodeId) {
-    var newItems = localItems.map(function (item) {
-      if (item.id === nodeId && item.type === 'group') {
+
+    // 跨级拖拽 - 将节点移到不同的父节点下
+    // 例如：将分组中的列拖到根级别
+    if (movingNode.parentId !== overNode.parentId) {
+      // 收集需要移动的节点(只移动单个节点,不包括子孙)
+      var _movingIds2 = new Set([movingNode.id]);
+
+      // 分离出不移动的节点和要移动的节点
+      var _nonMovingItems2 = [];
+      var _movingItems2 = [];
+      localItems.forEach(function (item) {
+        if (_movingIds2.has(item.id)) {
+          _movingItems2.push(item);
+        } else {
+          _nonMovingItems2.push(item);
+        }
+      });
+
+      // 找到目标节点的位置
+      var _overIndex = _nonMovingItems2.findIndex(function (item) {
+        return item.id === overNode.id;
+      });
+      if (_overIndex === -1) return;
+
+      // 找到移动节点原本的位置
+      var _originalMovingIndex = localItems.findIndex(function (item) {
+        return item.id === movingNode.id;
+      });
+      var _originalOverIndex = localItems.findIndex(function (item) {
+        return item.id === overNode.id;
+      });
+
+      // 根据原始位置判断插入位置
+      var _insertIndex2 = _originalMovingIndex < _originalOverIndex ? _overIndex + 1 : _overIndex;
+
+      // 更新移动节点的父节点和层级
+      var _updatedMovingItems = _movingItems2.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
-          _collapsed: !item._collapsed
+          parentId: overNode.parentId,
+          // 使用目标节点的父节点
+          level: overNode.level // 使用目标节点的层级
         });
-      }
-      return item;
-    });
-    setLocalItems(newItems);
-    // 注意: _collapsed 是临时UI状态，不需要通知父组件持久化
-  }, [localItems]);
+      });
 
-  /**
-   * 检查节点是否应该被隐藏（因为祖先节点折叠）
-   */
-  var isNodeHidden = useCallback(function (item) {
-    var currentId = item.parentId;
-    while (currentId) {
-      var parent = localItems.find(function (i) {
-        return i.id === currentId;
+      // 插入到新位置
+      var _result2 = [].concat(_toConsumableArray(_nonMovingItems2.slice(0, _insertIndex2)), _toConsumableArray(_updatedMovingItems), _toConsumableArray(_nonMovingItems2.slice(_insertIndex2)));
+
+      // 更新 order 字段
+      var _updatedItems = _result2.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          order: index
+        });
       });
-      if (!parent) break;
-      if (parent.type === 'group' && parent._collapsed) {
-        return true;
-      }
-      currentId = parent.parentId;
+      updateItems(_updatedItems);
+      message.success("\u5DF2\u79FB\u52A8\u5230".concat(overNode.parentId ? '分组内' : '根级别'));
     }
-    return false;
-  }, [localItems]);
+  }, [localItems, updateItems, getAllDescendantIds]);
 
-  /**
-   * 获取可见的节点列表（过滤掉被折叠隐藏的节点）
-   */
-  var visibleItems = useMemo(function () {
-    return (localItems === null || localItems === void 0 ? void 0 : localItems.filter(function (item) {
-      return !isNodeHidden(item);
-    })) || [];
-  }, [localItems, isNodeHidden]);
-
-  /**
-   * 添加根级别分组
-   */
+  // 添加根级别分组
   var handleAddRootGroup = useCallback(function () {
     var newGroup = {
       id: generateId(),
       type: 'group',
-      // ⚠️ 关键:明确设置 type
       level: 0,
       order: localItems.length,
       headerName: '新分组',
@@ -340,650 +536,193 @@ var ColumnConfigTable = function ColumnConfigTable(_ref3) {
     message.success('已添加根级别分组');
   }, [localItems, updateItems]);
 
-  /**
-   * 为指定分组添加子分组
-   */
+  // 添加子分组
   var handleAddChildGroup = useCallback(function (parentId) {
-    var parentIndex = localItems.findIndex(function (item) {
+    var parent = localItems.find(function (item) {
       return item.id === parentId;
     });
-    if (parentIndex === -1) {
-      message.error('未找到父节点');
-      return;
-    }
-    var parent = localItems[parentIndex];
-    if (parent.type !== 'group') {
+    if (!parent || parent.type !== 'group') {
       message.error('只能为分组添加子分组');
       return;
     }
-
-    // 找到插入位置(父节点的所有后代节点之后)
-    var insertIndex = findLastDescendantIndex(localItems, parentId) + 1;
     var newGroup = {
       id: generateId(),
       type: 'group',
-      // ⚠️ 关键:明确设置 type
       parentId: parentId,
-      level: parent.level + 1,
-      order: insertIndex,
+      level: (parent.level || 0) + 1,
+      order: localItems.length,
       headerName: '新子分组',
       groupId: generateId(),
       _isNew: true
     };
-    var newItems = _toConsumableArray(localItems);
-    newItems.splice(insertIndex, 0, newGroup);
-    updateItems(newItems);
-    message.success("\u5DF2\u4E3A\u5206\u7EC4\"".concat(parent.headerName, "\"\u6DFB\u52A0\u5B50\u5206\u7EC4"));
+    updateItems([].concat(_toConsumableArray(localItems), [newGroup]));
+    message.success('已添加子分组');
   }, [localItems, updateItems]);
 
-  /**
-   * 打开移动节点弹窗
-   */
-  var handleOpenMoveModal = useCallback(function (node) {
-    setCurrentMoveNode(node);
-    setMoveModalVisible(true);
-  }, [localItems]);
-
-  /**
-   * 关闭移动节点弹窗
-   */
-  var handleCloseMoveModal = useCallback(function () {
-    setMoveModalVisible(false);
-    setCurrentMoveNode(null);
-  }, []);
-
-  /**
-   * 确认移动节点
-   */
-  var handleConfirmMove = useCallback(function (targetParentId) {
-    if (!currentMoveNode) return;
-    var nodeId = currentMoveNode.id;
-
-    // 1. 验证:不能移动到自己的后代节点下
-    if (targetParentId) {
-      var checkId = targetParentId;
-      while (checkId) {
-        if (checkId === nodeId) {
-          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) {
-      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);
-
-    // 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
-      });
+  // 删除节点
+  var handleDelete = useCallback(function (id) {
+    var item = localItems.find(function (i) {
+      return i.id === id;
     });
-
-    // 3.5 找到插入位置
-    var insertIndex;
-    if (targetParentId) {
-      // 插入到目标父节点的所有后代之后
-      insertIndex = findLastDescendantIndex(remainingItems, targetParentId) + 1;
-    } else {
-      // 插入到根级别的末尾
-      insertIndex = remainingItems.length;
-    }
-
-    // 3.6 插入节点
-    remainingItems.splice.apply(remainingItems, [insertIndex, 0].concat(_toConsumableArray(updatedNodesToMove)));
-
-    // 3.7 重新计算 order
-    reorderItems(remainingItems);
-    updateItems(remainingItems);
-    message.success("\u5DF2\u5C06\"".concat(currentMoveNode.headerName, "\"\u79FB\u52A8\u5230\u65B0\u4F4D\u7F6E"));
-    handleCloseMoveModal();
-  }, [currentMoveNode, localItems, updateItems, handleCloseMoveModal]);
-
-  /**
-   * 删除节点(及其所有子节点)
-   */
-  var handleDeleteNode = useCallback(function (nodeId) {
-    var nodeIndex = localItems.findIndex(function (item) {
-      return item.id === nodeId;
-    });
-    if (nodeIndex === -1) {
-      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 ((item === null || item === void 0 ? void 0 : item.type) === 'group') {
+      // 删除分组时,将其直接子项移至根级别
+      var updatedItems = localItems.filter(function (i) {
+        return i.id !== id;
+      }) // 移除分组本身
+      .map(function (i) {
+        // 如果是该分组的直接子项
+        if (i.parentId === id) {
+          return _objectSpread(_objectSpread({}, i), {}, {
+            parentId: undefined,
+            // 移至根级别
+            level: 0 // 设置为根级别
+          });
         }
+        return i;
       });
-    };
-    if (node.type === 'group') {
-      findDescendants(nodeId);
+      updateItems(updatedItems);
+      message.success('分组已删除,子项已移至根级别');
     }
-    var newItems = localItems.filter(function (item) {
-      return !toDelete.includes(item.id);
-    });
-    updateItems(newItems);
-    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]);
 
-  /**
-   * 更新节点属性
-   * @param immediate 是否立即更新父组件(非输入框类更新需要立即生效)
-   */
-  var handleUpdateNode = useCallback(function (nodeId, updates) {
-    var immediate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var newItems = localItems.map(function (item) {
-      if (item.id === nodeId) {
-        // ⚠️ 关键:确保 type 字段不会被覆盖
-        return _objectSpread(_objectSpread(_objectSpread({}, item), updates), {}, {
-          type: item.type,
-          // 强制保留原始 type
-          _isNew: false // 清除新建标记
-        });
+  // 切换展开/折叠
+  var toggleExpand = useCallback(function (id) {
+    setExpandedKeys(function (prev) {
+      var next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
       }
-      return item;
-    });
-
-    // 立即更新本地状态(保证输入框显示最新内容)
-    setLocalItems(_toConsumableArray(newItems));
-
-    // 根据场景选择立即更新或防抖更新
-    if (immediate) {
-      // 非文本输入的更新(如开关、选择器等)需要立即生效
-      reorderItems(newItems);
-      onChange(_toConsumableArray(newItems));
-    } else {
-      // 文本输入使用防抖,避免频繁触发父组件更新
-      debouncedUpdateItems(newItems);
-    }
-  }, [localItems, onChange, debouncedUpdateItems]);
-
-  /**
-   * 处理拖拽排序
-   */
-  var handleDragSort = 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;
+      return next;
     });
-    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);
-    }
-
-    // 从原数组中移除所有要移动的节点
-    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));
-
-    // 使用 updateItems 来同时更新本地状态和通知父组件
-    updateItems(remainingItems);
-  }, [localItems, updateItems]);
-
-  /**
-   * 获取缩进符号
-   */
-  var getIndentSymbol = 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 = useCallback(function (text, record) {
-    var indent = record.level * 20;
-    var indentSymbol = getIndentSymbol(record);
-    var NodeIcon = record.type === 'group' ? /*#__PURE__*/React.createElement(FolderOutlined, {
-      style: {
-        color: '#1890ff',
-        fontSize: 14
-      }
-    }) : /*#__PURE__*/React.createElement(FileOutlined, {
-      style: {
-        color: '#52c41a',
-        fontSize: 14
-      }
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        paddingLeft: indent,
-        display: 'flex',
-        alignItems: 'center',
-        gap: 8
-      }
-    }, record.level > 0 && /*#__PURE__*/React.createElement("span", {
-      style: {
-        color: '#999',
-        fontFamily: 'monospace',
-        fontSize: 12,
-        flexShrink: 0
-      }
-    }, indentSymbol), record.type === 'group' ? /*#__PURE__*/React.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.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null)) : /*#__PURE__*/React.createElement("span", {
-      style: {
-        width: 16,
-        flexShrink: 0
-      }
-    }), /*#__PURE__*/React.createElement("span", {
-      style: {
-        flexShrink: 0
-      }
-    }, NodeIcon), /*#__PURE__*/React.createElement(Tag, {
-      color: record.type === 'group' ? 'blue' : 'green',
-      style: {
-        margin: 0,
-        flexShrink: 0
-      }
-    }, record.type === 'group' ? '分组' : '列'), /*#__PURE__*/React.createElement(NameInput, {
-      value: text,
-      onChange: function onChange(newValue) {
-        return handleUpdateNode(record.id, {
-          headerName: newValue
-        }, true);
-      },
-      placeholder: record.type === 'group' ? '请输入分组名称' : '请输入列名称',
-      isNew: record._isNew
-    }));
-  }, [getIndentSymbol, handleUpdateNode, handleToggleCollapse]);
-
-  /**
-   * 渲染操作列
-   */
-  var renderActionsCell = useCallback(function (_, record) {
-    if (record.type === 'group') {
-      return /*#__PURE__*/React.createElement(Space, {
-        size: "small"
-      }, !simple && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-        title: "\u6DFB\u52A0\u5B50\u5206\u7EC4"
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        icon: /*#__PURE__*/React.createElement(FolderAddOutlined, null),
-        onClick: function onClick() {
-          return handleAddChildGroup(record.id);
-        }
-      }, "\u6DFB\u52A0\u5B50\u5206\u7EC4")), /*#__PURE__*/React.createElement(Tooltip, {
-        title: "\u79FB\u52A8\u8282\u70B9"
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        icon: /*#__PURE__*/React.createElement(DragOutlined, null),
-        onClick: function onClick() {
-          return handleOpenMoveModal(record);
-        }
-      }, "\u79FB\u52A8")), record._isNew && /*#__PURE__*/React.createElement(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.createElement(Tooltip, {
-        title: "\u5220\u9664\u5206\u7EC4"
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        danger: true,
-        icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
-      })))));
-    } else {
-      return /*#__PURE__*/React.createElement(Space, {
-        size: "small"
-      }, !simple && /*#__PURE__*/React.createElement(Tooltip, {
-        title: "\u79FB\u52A8\u8282\u70B9"
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        icon: /*#__PURE__*/React.createElement(DragOutlined, null),
-        onClick: function onClick() {
-          return handleOpenMoveModal(record);
-        }
-      }, "\u79FB\u52A8")));
-    }
-  }, [simple, handleAddChildGroup, handleDeleteNode, handleOpenMoveModal]);
-
-  /**
-   * 表格列配置
-   */
-  var columns = useMemo(function () {
-    return [{
-      title: '排序',
-      key: 'sort',
-      width: 40,
-      align: 'center',
-      render: function render() {
-        return /*#__PURE__*/React.createElement(Tooltip, {
-          title: "\u62D6\u52A8\u6392\u5E8F\uFF08\u4EC5\u652F\u6301\u540C\u7EA7\uFF09"
-        }, /*#__PURE__*/React.createElement(HolderOutlined, {
-          style: {
-            fontSize: 16,
-            color: '#999',
-            cursor: 'move'
-          }
-        }));
-      }
-    }, {
-      title: '操作',
-      key: 'actions',
+  // 列定义
+  var columnDefs = useMemo(function () {
+    var cols = [{
+      field: 'type',
+      headerName: '类型',
       width: 120,
-      align: 'center',
-      render: renderActionsCell
-    }, {
-      title: '名称',
-      dataIndex: 'headerName',
-      key: 'headerName',
-      width: 100,
-      render: renderNameCell
+      minWidth: 100,
+      maxWidth: 150,
+      cellRenderer: TypeCellRenderer,
+      rowDrag: true,
+      suppressSizeToFit: true
     }, {
-      title: '宽度',
-      dataIndex: 'width',
-      key: 'width',
-      width: 80,
-      align: 'center',
-      render: function render(value, record) {
-        if (record.type !== 'column') return '-';
-        return /*#__PURE__*/React.createElement(InputNumber, {
-          value: value,
-          onChange: function onChange(newValue) {
-            return handleUpdateNode(record.id, {
-              width: newValue || undefined
-            }, true);
-          },
-          min: 50,
-          max: 1000,
-          style: {
-            width: '100%'
-          }
-        });
+      field: 'headerName',
+      headerName: '名称',
+      flex: 1,
+      minWidth: 200,
+      cellRenderer: NameCellRenderer,
+      cellRendererParams: {
+        expandedKeys: expandedKeys,
+        onToggleExpand: toggleExpand,
+        allItems: localItems
       }
     }, {
-      title: '占满',
-      dataIndex: 'flex',
-      key: 'flex',
-      width: 50,
-      align: 'center',
-      render: function render(value, record) {
-        if (record.type !== 'column') return '-';
-        return /*#__PURE__*/React.createElement(Select, {
-          value: value || 0,
-          onChange: function onChange(newValue) {
-            return handleUpdateNode(record.id, {
-              flex: newValue
-            }, true);
-          },
-          style: {
-            width: '100%'
-          },
-          options: [{
-            value: 1,
-            label: '占满'
-          }, {
-            value: 0,
-            label: '不占满'
-          }]
-        });
-      }
+      field: 'width',
+      headerName: '宽度',
+      width: 100,
+      cellRenderer: WidthCellRenderer
     }, {
-      title: '固定',
-      dataIndex: 'pinned',
-      key: 'pinned',
-      width: 50,
-      align: 'center',
-      render: function render(value, record) {
-        if (record.type !== 'column') return '-';
-        return /*#__PURE__*/React.createElement(Select, {
-          value: value || 'notPinned',
-          onChange: function onChange(newValue) {
-            return handleUpdateNode(record.id, {
-              pinned: newValue
-            }, true);
-          },
-          style: {
-            width: '100%'
-          },
-          options: [{
-            value: 'left',
-            label: '左固定'
-          }, {
-            value: 'right',
-            label: '右固定'
-          }, {
-            value: 'notPinned',
-            label: '不固定'
-          }]
-        });
-      }
+      field: 'flex',
+      headerName: '占满',
+      width: 120,
+      cellRenderer: FlexCellRenderer
     }, {
-      title: '隐藏',
-      dataIndex: 'hide',
-      key: 'hide',
-      width: 50,
-      align: 'center',
-      render: function render(value, record) {
-        if (record.type !== 'column') return '-';
-        return /*#__PURE__*/React.createElement(Switch, {
-          checked: value || false,
-          onChange: function onChange(checked) {
-            return handleUpdateNode(record.id, {
-              hide: checked
-            }, true);
-          }
-        });
-      }
+      field: 'pinned',
+      headerName: '固定',
+      width: 120,
+      cellRenderer: PinnedCellRenderer
     }, {
-      title: '布局',
-      dataIndex: 'cellClass',
-      key: 'cellClass',
-      width: 50,
-      align: 'center',
-      render: function render(value, record) {
-        if (record.type !== 'column') return '-';
-        return /*#__PURE__*/React.createElement(Select, {
-          value: value || 'custom-cell-left',
-          onChange: function onChange(newValue) {
-            return handleUpdateNode(record.id, {
-              cellClass: newValue
-            }, true);
-          },
-          style: {
-            width: '100%'
-          },
-          options: [{
-            value: 'custom-cell-left',
-            label: '左对齐'
-          }, {
-            value: 'custom-cell-right',
-            label: '右对齐'
-          }, {
-            value: 'custom-cell-centered',
-            label: '居中'
-          }]
-        });
-      }
+      field: 'hide',
+      headerName: '隐藏',
+      width: 80,
+      cellRenderer: createSwitchRenderer('hide')
     }, {
-      title: '列过滤',
-      dataIndex: 'suppressHeaderFilterButton',
-      key: 'suppressHeaderFilterButton',
-      width: 50,
-      align: 'center',
-      render: function render(value, record) {
-        if (record.type !== 'column') return '-';
-        return /*#__PURE__*/React.createElement(Switch, {
-          checked: !value,
-          onChange: function onChange(checked) {
-            return handleUpdateNode(record.id, {
-              suppressHeaderFilterButton: !checked
-            }, true);
-          }
-        });
+      field: 'suppressHeaderFilterButton',
+      headerName: '列过滤',
+      width: 80,
+      cellRenderer: SuppressFilterButtonRenderer
+    }, {
+      headerName: '操作',
+      width: 200,
+      suppressSizeToFit: true,
+      cellRenderer: ActionCellRenderer,
+      cellRendererParams: {
+        onDelete: handleDelete,
+        onAddChildGroup: handleAddChildGroup,
+        simple: simple
       }
     }];
-  }, [renderNameCell, renderActionsCell, handleUpdateNode]);
-  return /*#__PURE__*/React.createElement(DndProvider, {
-    backend: HTML5Backend
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
+    return cols;
+  }, [handleDelete, handleAddChildGroup, simple, expandedKeys, toggleExpand, localItems]);
+
+  // 根据展开状态过滤数据
+  var visibleItems = useMemo(function () {
+    if (simple) return localItems;
+
+    // 递归检查节点的所有祖先是否都展开
+    var isNodeVisible = function isNodeVisible(item) {
+      // 根级别节点始终显示
+      if (!item.parentId) return true;
+
+      // 找到父节点
+      var parent = localItems.find(function (i) {
+        return i.id === item.parentId;
+      });
+      if (!parent) return false;
+
+      // 父节点必须展开
+      if (!expandedKeys.has(parent.id)) return false;
+
+      // 递归检查父节点的可见性
+      return isNodeVisible(parent);
+    };
+    return localItems.filter(isNodeVisible);
+  }, [localItems, expandedKeys, simple]);
+
+  // 添加拖拽样式
+  useEffect(function () {
+    var style = document.createElement('style');
+    style.textContent = "\n      /* \u62D6\u62FD\u884C\u6837\u5F0F */\n      .ag-row-dragging {\n        opacity: 0.5;\n        transition: opacity 0.2s ease;\n      }\n\n      /* \u62D6\u62FD\u5E7D\u7075\u6837\u5F0F */\n      .ag-dnd-ghost {\n        background: #fff !important;\n        border: 2px dashed #1890ff !important;\n        border-radius: 4px !important;\n        padding: 8px !important;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;\n        opacity: 0.9 !important;\n        font-size: 14px !important;\n      }\n\n      /* \u53EF\u653E\u7F6E\u76EE\u6807\u9AD8\u4EAE */\n      .ag-row-hover.ag-row {\n        background-color: #e6f7ff !important;\n        transition: background-color 0.2s ease;\n      }\n\n      /* \u5206\u7EC4\u884C\u7279\u6B8A\u9AD8\u4EAE */\n      .ag-row-hover.ag-row[row-id*=\"group\"] {\n        background-color: #bae7ff !important;\n        border: 2px solid #1890ff;\n        transition: all 0.2s ease;\n      }\n\n      /* \u884C\u52A8\u753B */\n      .ag-row {\n        transition: transform 0.3s ease, opacity 0.3s ease;\n      }\n\n      /* \u62D6\u62FD\u624B\u67C4\u6837\u5F0F */\n      .ag-row .ag-cell[col-id=\"type\"] {\n        cursor: grab !important;\n      }\n\n      .ag-row-dragging .ag-cell[col-id=\"type\"] {\n        cursor: grabbing !important;\n      }\n    ";
+    document.head.appendChild(style);
+    return function () {
+      document.head.removeChild(style);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%'
+    }
   }, !simple && /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: 16
+      marginBottom: 8
     }
   }, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
+    type: "dashed",
+    icon: /*#__PURE__*/React.createElement(FolderAddOutlined, null),
     onClick: handleAddRootGroup
   }, "\u6DFB\u52A0\u6839\u7EA7\u522B\u5206\u7EC4")), /*#__PURE__*/React.createElement("div", {
     style: {
-      maxHeight: tableHeight,
-      overflow: 'auto'
+      height: scrollY
     }
-  }, /*#__PURE__*/React.createElement(Table, {
-    columns: columns,
-    dataSource: visibleItems,
-    rowKey: "id",
-    pagination: false,
-    bordered: true,
-    size: "small",
-    scroll: {
-      x: 1000
+  }, /*#__PURE__*/React.createElement(AgGridReact, {
+    theme: agGridTheme,
+    rowData: visibleItems,
+    columnDefs: columnDefs,
+    getRowId: function getRowId(params) {
+      return params.data.id;
     },
-    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.createElement("tr", props);
-          return /*#__PURE__*/React.createElement(DraggableRow, _extends({
-            record: record,
-            index: index,
-            moveRow: handleDragSort
-          }, props));
-        }
-      }
-    }
-  })), /*#__PURE__*/React.createElement(MoveNodeModal, {
-    visible: moveModalVisible,
-    currentNode: currentMoveNode,
-    allItems: localItems,
-    onCancel: handleCloseMoveModal,
-    onConfirm: handleConfirmMove
+    rowDragManaged: false,
+    onRowDragEnd: onRowDragEnd,
+    onGridReady: onGridReady,
+    animateRows: true,
+    rowDragEntireRow: true,
+    suppressMoveWhenRowDragging: true,
+    suppressMovableColumns: true,
+    domLayout: "normal"
   })));
 };
 export default ColumnConfigTable;