@nokecy/qc-ui-components 0.0.0-stage → 2.0.0-beta.0

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

@@ -0,0 +1,760 @@
+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); }
+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 _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; }
+/**
+ * 列配置表格组件 - AG-Grid 版本
+ * 使用 AG-Grid 替代 Ant Design Table,性能更优
+ */
+
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { Button, Select, Switch, Space, Popconfirm, message, Tag, theme } from 'antd';
+import { DeleteOutlined, FolderOutlined, FolderAddOutlined, FileOutlined } from '@ant-design/icons';
+import { AgGridReact } from 'ag-grid-react';
+import { generateId, normalizeCellAlign } from "./columnGroupUtils";
+import { DebounceNumberInput } from "./DebounceInputs";
+import { useAgGridTheme } from "../theme";
+import { ColumnNameCellRenderer } from "./ColumnNameCellRenderer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ==================== Cell Renderers ====================
+
+/** 类型标签 */
+var TypeCellRenderer = function TypeCellRenderer(props) {
+  var item = props.data;
+  if (!item) return null;
+  if (item.type === 'group') {
+    return /*#__PURE__*/_jsx(Tag, {
+      color: "blue",
+      icon: /*#__PURE__*/_jsx(FolderOutlined, {}),
+      children: "\u5206\u7EC4"
+    });
+  }
+  return /*#__PURE__*/_jsx(Tag, {
+    color: "green",
+    icon: /*#__PURE__*/_jsx(FileOutlined, {}),
+    children: "\u5217"
+  });
+};
+
+// 名称列渲染器已移至独立文件 ColumnNameCellRenderer.tsx
+
+/** 宽度输入 */
+var WidthCellRenderer = function WidthCellRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/_jsx("span", {
+    children: "-"
+  });
+  return /*#__PURE__*/_jsx(DebounceNumberInput, {
+    value: item.width || 150,
+    onChange: function onChange(val) {
+      if (props.node) {
+        props.node.setDataValue('width', val);
+      }
+    },
+    min: 50,
+    max: 1000,
+    size: "small",
+    style: {
+      width: '100%'
+    }
+  });
+};
+
+/** Switch 渲染器工厂 */
+var createSwitchRenderer = function createSwitchRenderer(field) {
+  return function (props) {
+    var item = props.data;
+    if (!item || item.type !== 'column') return /*#__PURE__*/_jsx("span", {
+      children: "-"
+    });
+
+    // 获取字段值
+    var fieldValue = item[field];
+
+    // 只检查布尔值
+    var isChecked = fieldValue === true;
+    return /*#__PURE__*/_jsx(Switch, {
+      checked: isChecked,
+      onChange: function onChange(checked) {
+        if (props.node) {
+          // 保存时统一为布尔值
+          props.node.setDataValue(field, checked);
+        }
+      },
+      size: "small"
+    });
+  };
+};
+
+/** 列过滤按钮渲染器 (注意：suppressHeaderFilterButton 字段为 true 时表示"禁用"过滤按钮) */
+var SuppressFilterButtonRenderer = function SuppressFilterButtonRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/_jsx("span", {
+    children: "-"
+  });
+
+  // 注意：suppressHeaderFilterButton = true 表示"禁用"过滤按钮
+  // 所以 Switch 显示需要取反：checked 表示"启用"过滤
+  var isFilterEnabled = !item.suppressHeaderFilterButton;
+  return /*#__PURE__*/_jsx(Switch, {
+    checked: isFilterEnabled,
+    onChange: function onChange(checked) {
+      if (props.node) {
+        // 取反保存：checked=true 表示启用过滤，保存为 false
+        props.node.setDataValue('suppressHeaderFilterButton', !checked);
+      }
+    },
+    size: "small"
+  });
+};
+
+/** Select 下拉框渲染器 */
+var FlexCellRenderer = function FlexCellRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/_jsx("span", {
+    children: "-"
+  });
+  return /*#__PURE__*/_jsx(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__*/_jsx("span", {
+    children: "-"
+  });
+
+  // 标准化 pinned 值 - 处理旧版本的 notPinned
+  var normalizedValue = !item.pinned || item.pinned === 'notPinned' ? 'none' : item.pinned;
+  return /*#__PURE__*/_jsx(Select, {
+    value: normalizedValue,
+    onChange: function onChange(val) {
+      if (props.node) {
+        // 保存时将 none 转换为 undefined 或 null
+        props.node.setDataValue('pinned', val === 'none' ? null : val);
+      }
+    },
+    style: {
+      width: '100%'
+    },
+    options: [{
+      value: 'none',
+      label: '不固定'
+    }, {
+      value: 'left',
+      label: '左侧'
+    }, {
+      value: 'right',
+      label: '右侧'
+    }],
+    size: "small"
+  });
+};
+
+/** 对齐方式渲染器 */
+var AlignmentCellRenderer = function AlignmentCellRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/_jsx("span", {
+    children: "-"
+  });
+
+  // 标准化 cellClass 值，默认为左对齐
+  var normalizedValue = normalizeCellAlign(item.cellClass);
+  return /*#__PURE__*/_jsx(Select, {
+    value: normalizedValue,
+    onChange: function onChange(val) {
+      if (props.node) {
+        props.node.setDataValue('cellClass', val);
+      }
+    },
+    style: {
+      width: '100%'
+    },
+    options: [{
+      value: 'custom-cell-left',
+      label: '左对齐'
+    }, {
+      value: 'custom-cell-centered',
+      label: '居中对齐'
+    }, {
+      value: 'custom-cell-right',
+      label: '右对齐'
+    }],
+    size: "small"
+  });
+};
+
+/** 操作列 */
+var ActionCellRenderer = function ActionCellRenderer(props) {
+  var item = props.data;
+  if (!item) return null;
+
+  // 从 props 中获取自定义参数
+  var _ref = props,
+    onDelete = _ref.onDelete,
+    onAddChildGroup = _ref.onAddChildGroup,
+    simple = _ref.simple;
+  return /*#__PURE__*/_jsxs(Space, {
+    size: "small",
+    children: [!simple && item.type === 'group' && /*#__PURE__*/_jsx(Button, {
+      type: "link",
+      size: "small",
+      icon: /*#__PURE__*/_jsx(FolderAddOutlined, {}),
+      onClick: function onClick() {
+        return onAddChildGroup === null || onAddChildGroup === void 0 ? void 0 : onAddChildGroup(item.id);
+      },
+      children: "\u6DFB\u52A0\u5B50\u5206\u7EC4"
+    }), item.type === 'group' && /*#__PURE__*/_jsx(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__*/_jsx(Button, {
+        type: "link",
+        danger: true,
+        size: "small",
+        icon: /*#__PURE__*/_jsx(DeleteOutlined, {}),
+        children: "\u5220\u9664"
+      })
+    })]
+  });
+};
+
+// ==================== 主组件 ====================
+
+var ColumnConfigTable = function ColumnConfigTable(_ref2) {
+  var items = _ref2.items,
+    onChange = _ref2.onChange,
+    _ref2$simple = _ref2.simple,
+    simple = _ref2$simple === void 0 ? false : _ref2$simple,
+    _ref2$scrollY = _ref2.scrollY,
+    scrollY = _ref2$scrollY === void 0 ? 480 : _ref2$scrollY;
+  var gridTheme = useAgGridTheme();
+  var _theme$useToken = theme.useToken(),
+    token = _theme$useToken.token; // 颜色取主题 token,跟随亮/暗主题 @author nokecy
+  var _useState = useState(items),
+    _useState2 = _slicedToArray(_useState, 2),
+    localItems = _useState2[0],
+    setLocalItems = _useState2[1];
+  var _useState3 = useState(new Set()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expandedKeys = _useState4[0],
+    setExpandedKeys = _useState4[1];
+  var gridApiRef = useRef(undefined);
+
+  // 同步外部数据
+  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) {
+    setLocalItems(newItems);
+    onChange(newItems);
+  }, [onChange]);
+
+  // Grid 准备完成
+  var onGridReady = useCallback(function (params) {
+    gridApiRef.current = params.api;
+  }, []);
+
+  // 递归获取节点的所有子孙节点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); // 递归查找子孙
+        }
+      });
+    };
+    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;
+        }
+      }
+
+      // 收集需要移动的所有节点(包括子孙节点)
+      var movingIds = new Set([movingNode.id]);
+      if (movingNode.type === 'group') {
+        var descendants = getAllDescendantIds(movingNode.id);
+        descendants.forEach(function (id) {
+          return movingIds.add(id);
+        });
+      }
+
+      // 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 (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;
+    }
+
+    // 跨级拖拽 - 将节点移到不同的父节点下
+    // 例如：将分组中的列拖到根级别
+    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), {}, {
+          parentId: overNode.parentId,
+          // 使用目标节点的父节点
+          level: overNode.level // 使用目标节点的层级
+        });
+      });
+
+      // 插入到新位置
+      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
+        });
+      });
+      updateItems(_updatedItems);
+      message.success("\u5DF2\u79FB\u52A8\u5230".concat(overNode.parentId ? '分组内' : '根级别'));
+    }
+  }, [localItems, updateItems, getAllDescendantIds]);
+
+  // 添加根级别分组
+  var handleAddRootGroup = useCallback(function () {
+    var newGroup = {
+      id: generateId(),
+      type: 'group',
+      level: 0,
+      order: localItems.length,
+      headerName: '新分组',
+      groupId: generateId(),
+      _isNew: true
+    };
+    updateItems([].concat(_toConsumableArray(localItems), [newGroup]));
+    message.success('已添加根级别分组');
+  }, [localItems, updateItems]);
+
+  // 添加子分组
+  var handleAddChildGroup = useCallback(function (parentId) {
+    var parent = localItems.find(function (item) {
+      return item.id === parentId;
+    });
+    if (!parent || parent.type !== 'group') {
+      message.error('只能为分组添加子分组');
+      return;
+    }
+    var newGroup = {
+      id: generateId(),
+      type: 'group',
+      parentId: parentId,
+      level: (parent.level || 0) + 1,
+      order: localItems.length,
+      headerName: '新子分组',
+      groupId: generateId(),
+      _isNew: true
+    };
+    updateItems([].concat(_toConsumableArray(localItems), [newGroup]));
+    message.success('已添加子分组');
+  }, [localItems, updateItems]);
+
+  // 删除节点
+  var handleDelete = useCallback(function (id) {
+    var item = localItems.find(function (i) {
+      return i.id === 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;
+      });
+      updateItems(updatedItems);
+      message.success('分组已删除,子项已移至根级别');
+    }
+  }, [localItems, updateItems]);
+
+  // 切换展开/折叠
+  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 next;
+    });
+  }, []);
+
+  // 列定义
+  var columnDefs = useMemo(function () {
+    // 通用单元格样式 - 垂直居中
+    var commonCellStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%'
+    };
+    var cols = [{
+      field: 'type',
+      headerName: '类型',
+      width: 120,
+      minWidth: 100,
+      maxWidth: 150,
+      cellRenderer: TypeCellRenderer,
+      cellStyle: commonCellStyle,
+      rowDrag: true,
+      suppressSizeToFit: true
+    }, {
+      field: 'headerName',
+      headerName: '名称',
+      flex: 1,
+      minWidth: 200,
+      cellRenderer: ColumnNameCellRenderer,
+      cellRendererParams: {
+        expandedKeys: expandedKeys,
+        onToggleExpand: toggleExpand,
+        allItems: localItems
+      }
+      // 名称列不需要 cellStyle，因为渲染器内部已经处理了
+    }, {
+      field: 'width',
+      headerName: '宽度',
+      width: 100,
+      cellRenderer: WidthCellRenderer,
+      cellStyle: commonCellStyle
+    }, {
+      field: 'flex',
+      headerName: '占满',
+      width: 120,
+      cellRenderer: FlexCellRenderer,
+      cellStyle: commonCellStyle
+    }, {
+      field: 'pinned',
+      headerName: '固定',
+      width: 120,
+      cellRenderer: PinnedCellRenderer,
+      cellStyle: commonCellStyle
+    }, {
+      field: 'cellClass',
+      headerName: '对齐',
+      width: 120,
+      cellRenderer: AlignmentCellRenderer,
+      cellStyle: commonCellStyle
+    }, {
+      field: 'hide',
+      headerName: '隐藏',
+      width: 80,
+      cellRenderer: createSwitchRenderer('hide'),
+      cellStyle: commonCellStyle
+    }, {
+      field: 'suppressHeaderFilterButton',
+      headerName: '列过滤',
+      width: 80,
+      cellRenderer: SuppressFilterButtonRenderer,
+      cellStyle: commonCellStyle
+    }, {
+      headerName: '操作',
+      width: 200,
+      suppressSizeToFit: true,
+      cellRenderer: ActionCellRenderer,
+      cellRendererParams: {
+        onDelete: handleDelete,
+        onAddChildGroup: handleAddChildGroup,
+        simple: simple
+      },
+      cellStyle: commonCellStyle
+    }];
+    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]);
+
+  // 添加拖拽样式:选择器限定在本表容器(.qc-column-config-table)内,免得弹窗打开期间染到背后列表的行;
+  // 拖拽幽灵挂在 body 上,只能全局。颜色取主题 token。@author nokecy
+  useEffect(function () {
+    var style = document.createElement('style');
+    style.textContent = "\n      /* \u62D6\u62FD\u884C\u6837\u5F0F */\n      .qc-column-config-table .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: ".concat(token.colorBgElevated, " !important;\n        color: ").concat(token.colorText, " !important;\n        border: 2px dashed ").concat(token.colorPrimary, " !important;\n        border-radius: 4px !important;\n        padding: 8px !important;\n        box-shadow: ").concat(token.boxShadowSecondary, " !important;\n        opacity: 0.9 !important;\n        font-size: 14px !important;\n      }\n\n      /* \u53EF\u653E\u7F6E\u76EE\u6807\u9AD8\u4EAE */\n      .qc-column-config-table .ag-row-hover.ag-row {\n        background-color: ").concat(token.controlItemBgHover, " !important;\n        transition: background-color 0.2s ease;\n      }\n\n      /* \u5206\u7EC4\u884C\u7279\u6B8A\u9AD8\u4EAE */\n      .qc-column-config-table .ag-row-hover.ag-row[row-id*=\"group\"] {\n        background-color: ").concat(token.controlItemBgActive, " !important;\n        border: 2px solid ").concat(token.colorPrimary, ";\n        transition: all 0.2s ease;\n      }\n\n      /* \u884C\u52A8\u753B */\n      .qc-column-config-table .ag-row {\n        transition: transform 0.3s ease, opacity 0.3s ease;\n      }\n\n      /* \u62D6\u62FD\u624B\u67C4\u6837\u5F0F */\n      .qc-column-config-table .ag-row .ag-cell[col-id=\"type\"] {\n        cursor: grab !important;\n      }\n\n      .qc-column-config-table .ag-row-dragging .ag-cell[col-id=\"type\"] {\n        cursor: grabbing !important;\n      }\n    ");
+    document.head.appendChild(style);
+    return function () {
+      document.head.removeChild(style);
+    };
+  }, [token]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "qc-column-config-table",
+    style: {
+      width: '100%'
+    },
+    children: [!simple && /*#__PURE__*/_jsx("div", {
+      style: {
+        marginBottom: 8
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        type: "dashed",
+        icon: /*#__PURE__*/_jsx(FolderAddOutlined, {}),
+        onClick: handleAddRootGroup,
+        children: "\u6DFB\u52A0\u6839\u7EA7\u522B\u5206\u7EC4"
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        height: scrollY
+      },
+      children: /*#__PURE__*/_jsx(AgGridReact, {
+        theme: gridTheme,
+        rowData: visibleItems,
+        columnDefs: columnDefs,
+        getRowId: function getRowId(params) {
+          return String(params.data.id);
+        },
+        rowDragManaged: false,
+        onRowDragEnd: onRowDragEnd,
+        onGridReady: onGridReady,
+        animateRows: true,
+        rowDragEntireRow: true,
+        suppressMoveWhenRowDragging: true,
+        suppressMovableColumns: true,
+        domLayout: "normal",
+        getRowHeight: function getRowHeight(params) {
+          var item = params.data;
+          // 如果已修改,显示双行布局(原始名称 + 当前名称)
+          var isModified = (item === null || item === void 0 ? void 0 : item.originalHeaderName) && (item === null || item === void 0 ? void 0 : item.headerName) !== (item === null || item === void 0 ? void 0 : item.originalHeaderName);
+          return isModified ? 56 : 40;
+        }
+      })
+    })]
+  });
+};
+export default ColumnConfigTable;