@nokecy/qc-ui 1.0.67 → 1.0.68

package/dist/cjs/array-table/hooks.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowDrag = exports.useKeyboardNavigation = exports.useCellFocus = void 0;
+var _react = require("react");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+/**
+ * 单元格聚焦 Hook
+ * 处理 Editable 包装和普通输入框的聚焦逻辑
+ */
+var useCellFocus = exports.useCellFocus = function useCellFocus() {
+  var focusInputInCell = (0, _react.useCallback)(function (cell) {
+    // 首先查找Editable包装的元素
+    var editableElement = cell.querySelector('.ant-formily-editable');
+    if (editableElement) {
+      // 检查Editable是否已经处于编辑状态
+      var isEditing = editableElement.getAttribute('data-editable-state') === 'editing';
+      if (isEditing) {
+        // 如果已经处于编辑状态,查找输入框并直接聚焦
+        var existingInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
+        if (existingInput) {
+          existingInput.focus();
+          if ('setSelectionRange' in existingInput && existingInput.type !== 'number' && existingInput.type !== 'date') {
+            var _existingInput$value;
+            var length = ((_existingInput$value = existingInput.value) === null || _existingInput$value === void 0 ? void 0 : _existingInput$value.length) || 0;
+            setTimeout(function () {
+              existingInput.setSelectionRange(length, length);
+            }, 10);
+          }
+        }
+      } else {
+        // 如果还没有进入编辑状态,触发编辑状态
+        editableElement.click();
+        var focusEvent = new Event('focus', {
+          bubbles: true
+        });
+        editableElement.dispatchEvent(focusEvent);
+
+        // 延迟查找输入框并设置光标
+        setTimeout(function () {
+          var newInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
+          if (newInput) {
+            newInput.focus();
+            if ('setSelectionRange' in newInput && newInput.type !== 'number' && newInput.type !== 'date') {
+              var _newInput$value;
+              var _length = ((_newInput$value = newInput.value) === null || _newInput$value === void 0 ? void 0 : _newInput$value.length) || 0;
+              setTimeout(function () {
+                newInput.setSelectionRange(_length, _length);
+              }, 10);
+            }
+          }
+        }, 150);
+      }
+    } else {
+      // 如果没有Editable包装,尝试多种选择器查找输入框
+      var inputElement = cell.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
+      if (!inputElement) {
+        // 尝试更宽泛的选择器
+        inputElement = cell.querySelector('input, textarea');
+      }
+      if (!inputElement) {
+        // 尝试查找Ant Design的输入框
+        inputElement = cell.querySelector('.ant-input');
+      }
+      if (!inputElement) {
+        // 查找任何可聚焦的元素
+        inputElement = cell.querySelector('[contenteditable="true"], [tabindex]');
+      }
+      if (inputElement) {
+        inputElement.focus();
+
+        // 将光标定位到末尾
+        if ('setSelectionRange' in inputElement && inputElement.type !== 'number' && inputElement.type !== 'date') {
+          var _inputElement$value;
+          var _length2 = ((_inputElement$value = inputElement.value) === null || _inputElement$value === void 0 ? void 0 : _inputElement$value.length) || 0;
+          setTimeout(function () {
+            inputElement.setSelectionRange(_length2, _length2);
+          }, 10);
+        }
+      } else {
+        // 尝试直接聚焦到单元格本身
+        cell.focus();
+      }
+    }
+  }, []);
+  return {
+    focusInputInCell: focusInputInCell
+  };
+};
+
+/**
+ * 键盘导航 Hook
+ * 处理方向键在表格单元格间的导航
+ */
+var useKeyboardNavigation = exports.useKeyboardNavigation = function useKeyboardNavigation(ref, dataSource, focusInputInCell) {
+  var handleCellKeyDown = (0, _react.useCallback)(function (event) {
+    var keyEvent = event.event,
+      node = event.node,
+      colDef = event.colDef,
+      api = event.api;
+    if (!keyEvent) return;
+
+    // 处理上下左右键导航
+    if (keyEvent.key === 'ArrowDown' || keyEvent.key === 'ArrowUp' || keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight') {
+      var currentRowIndex = node.rowIndex;
+      var currentColId = colDef.field;
+      var targetRowIndex = currentRowIndex;
+      var targetColId = currentColId;
+
+      // 确定目标位置
+      if (keyEvent.key === 'ArrowDown') {
+        targetRowIndex = currentRowIndex + 1;
+      } else if (keyEvent.key === 'ArrowUp') {
+        targetRowIndex = currentRowIndex - 1;
+      } else if (keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight') {
+        // 对于左右键,使用AG-Grid的API获取列信息
+        var visibleColumns = api.getAllDisplayedColumns();
+        if (visibleColumns && visibleColumns.length > 0) {
+          // 找到当前列的索引
+          var currentColIndex = visibleColumns.findIndex(function (col) {
+            return col.getColId() === currentColId;
+          });
+          var targetColIndex;
+          if (keyEvent.key === 'ArrowLeft') {
+            targetColIndex = currentColIndex - 1;
+          } else {
+            targetColIndex = currentColIndex + 1;
+          }
+
+          // 检查目标列索引是否有效
+          if (targetColIndex >= 0 && targetColIndex < visibleColumns.length) {
+            targetColId = visibleColumns[targetColIndex].getColId();
+          } else {
+            return; // 无法移动到目标列
+          }
+        } else {
+          return; // 无列信息
+        }
+      }
+
+      // 检查目标位置是否有效
+      var isValidTarget = keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight' || targetRowIndex >= 0 && targetRowIndex < dataSource.length;
+      if (isValidTarget) {
+        // 延迟执行以确保当前编辑完成
+        setTimeout(function () {
+          api.setFocusedCell(targetRowIndex, targetColId);
+
+          // 不使用原生startEditingCell,而是手动触发编辑状态
+          // 使用DOM选择器查找目标单元格
+          setTimeout(function () {
+            var _ref$current;
+            // 通过ref获取网格容器
+            var gridContainer = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.ag-theme-alpine');
+            if (gridContainer) {
+              // 尝试通过行和列分步查找目标单元格
+              var rows = gridContainer.querySelectorAll('.ag-row');
+              if (rows[targetRowIndex]) {
+                var targetRow = rows[targetRowIndex];
+
+                // 在行内查找指定列的单元格
+                var targetCell = targetRow.querySelector(".ag-cell[col-id=\"".concat(targetColId, "\"]"));
+                if (!targetCell) {
+                  // 如果通过col-id找不到,遍历所有单元格查找匹配的列
+                  var cells = targetRow.querySelectorAll('.ag-cell');
+                  var _iterator = _createForOfIteratorHelper(cells),
+                    _step;
+                  try {
+                    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                      var _cell = _step.value;
+                      var colId = _cell.getAttribute('col-id') || _cell.getAttribute('data-col-id');
+                      if (colId === targetColId) {
+                        targetCell = _cell;
+                        break;
+                      }
+                    }
+                  } catch (err) {
+                    _iterator.e(err);
+                  } finally {
+                    _iterator.f();
+                  }
+                }
+                if (targetCell) {
+                  focusInputInCell(targetCell);
+                }
+              }
+            }
+          }, 150);
+        }, 10);
+      }
+      keyEvent.preventDefault();
+      keyEvent.stopPropagation();
+    }
+  }, [dataSource, focusInputInCell, ref]);
+  return {
+    handleCellKeyDown: handleCellKeyDown
+  };
+};
+
+/**
+ * 行拖拽 Hook
+ * 处理行拖拽排序逻辑
+ */
+var useRowDrag = exports.useRowDrag = function useRowDrag(field) {
+  var handleRowDragMove = (0, _react.useCallback)(function (event) {
+    var movingNode = event.node;
+    var overNode = event.overNode;
+    var rowNeedsToMove = movingNode !== overNode;
+    if (rowNeedsToMove) {
+      var movingData = movingNode.data;
+      var overData = overNode.data;
+      var dataSourceCopy = Array.isArray(field.value) ? field.value.slice() : [];
+      var fromIndex = dataSourceCopy.indexOf(movingData);
+      var toIndex = dataSourceCopy.indexOf(overData);
+      var newStore = dataSourceCopy.slice();
+
+      // 移动数组元素
+      var element = newStore[fromIndex];
+      newStore.splice(fromIndex, 1);
+      newStore.splice(toIndex, 0, element);
+      field.setValue(newStore);
+    }
+  }, [field]);
+  return {
+    handleRowDragMove: handleRowDragMove
+  };
+};

package/dist/cjs/array-table/index.js

@@ -10,12 +10,13 @@ var _agGridReact = require("ag-grid-react");
 var _react2 = require("@formily/react");
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
 var _utils = require("./utils");
+var _hooks = require("./hooks");
 var _arrayBase = _interopRequireDefault(require("./arrayBase"));
 var _arrayAddBtn = _interopRequireDefault(require("./arrayAddBtn"));
 var _preview = _interopRequireDefault(require("./preview"));
 var _antd = require("antd");
 var _setting = _interopRequireDefault(require("../ag-grid-plus/setting"));
-var _agGridPlus = require("../ag-grid-plus");
+var _useGridPlusColumnState = require("../ag-grid-plus/hooks/useGridPlusColumnState");
 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; }
@@ -24,7 +25,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 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."); }
@@ -32,6 +32,47 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
+/**
+ * ArrayTable 内置的列状态管理 Hook
+ * 使用 localStorage 进行持久化存储
+ */
+var useArrayTableColumnState = function useArrayTableColumnState(gridKey) {
+  var STORAGE_KEY = 'array-table-column-state';
+
+  // 从 localStorage 读取所有列状态
+  var getColumnStateFromStorage = (0, _react.useCallback)(function () {
+    try {
+      var stored = localStorage.getItem(STORAGE_KEY);
+      return stored ? JSON.parse(stored) : {};
+    } catch (error) {
+      console.error('Failed to read column state from localStorage:', error);
+      return {};
+    }
+  }, []);
+
+  // 保存列状态到 localStorage
+  var saveColumnStateToStorage = (0, _react.useCallback)(function (key, state) {
+    try {
+      var allStates = getColumnStateFromStorage();
+      allStates[key] = state;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(allStates));
+    } catch (error) {
+      console.error('Failed to save column state to localStorage:', error);
+    }
+  }, [getColumnStateFromStorage]);
+
+  // 获取指定 gridKey 的列状态
+  var getColumnState = (0, _react.useCallback)(function (key) {
+    if (!key) return undefined;
+    var allStates = getColumnStateFromStorage();
+    return allStates[key];
+  }, [getColumnStateFromStorage]);
+  return {
+    getColumnState: getColumnState,
+    saveColumnState: saveColumnStateToStorage
+  };
+};
+
 //@ts-ignore
 var ArrayTable = (0, _react2.observer)(function (props) {
   var height = props.height;
@@ -47,7 +88,6 @@ var ArrayTable = (0, _react2.observer)(function (props) {
     gridApiState = _useState4[0],
     setGridApiState = _useState4[1];
   var dataSource = Array.isArray(field.value) ? field.value.slice() : [];
-  var dataSourceCopy = dataSource.slice();
   var sources = (0, _utils.useArrayTableSources)();
   var actions = (0, _utils.useArrayTableActions)();
   var columns = (0, _utils.useArrayTableColumns)(dataSource, field, sources);
@@ -59,127 +99,85 @@ var ArrayTable = (0, _react2.observer)(function (props) {
     onMoveDown = props.onMoveDown,
     onMoveUp = props.onMoveUp;
   var addition = (0, _utils.useAddition)();
-  var _useGridPlusColumnSta = (0, _agGridPlus.useGridPlusColumnState)(),
-    onSaveColumnState = _useGridPlusColumnSta.onSaveColumnState,
-    gridPlusColumnState = _useGridPlusColumnSta.columnState;
+
+  // 尝试从 Context 获取列状态管理（如果被 Provider 包裹）
+  var contextColumnState = (0, _useGridPlusColumnState.useGridPlusColumnState)();
+
+  // 使用内置的列状态管理作为后备方案
+  var _useArrayTableColumnS = useArrayTableColumnState(props.gridKey),
+    getColumnState = _useArrayTableColumnS.getColumnState,
+    saveColumnState = _useArrayTableColumnS.saveColumnState;
+
+  // 使用自定义 hooks
+  var _useCellFocus = (0, _hooks.useCellFocus)(),
+    focusInputInCell = _useCellFocus.focusInputInCell;
+  var _useKeyboardNavigatio = (0, _hooks.useKeyboardNavigation)(ref, dataSource, focusInputInCell),
+    handleCellKeyDown = _useKeyboardNavigatio.handleCellKeyDown;
+  var _useRowDrag = (0, _hooks.useRowDrag)(field),
+    handleRowDragMove = _useRowDrag.handleRowDragMove;
+
+  // 恢复列状态（优先使用 Context，否则使用内置的 localStorage）
   (0, _react.useEffect)(function () {
-    if (props.gridKey && gridPlusColumnState && gridPlusColumnState[props.gridKey] && apiRef.current) {
+    var _contextColumnState$c;
+    if (!props.gridKey || !gridApiState) {
+      return;
+    }
+    var stateToApply = null;
+    var hasRealProvider = (contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState) !== undefined;
+
+    // 优先使用 Context 中的列状态（但只有在有真正的 Provider 时）
+    if (hasRealProvider && contextColumnState !== null && contextColumnState !== void 0 && (_contextColumnState$c = contextColumnState.columnState) !== null && _contextColumnState$c !== void 0 && _contextColumnState$c[props.gridKey]) {
+      stateToApply = contextColumnState.columnState[props.gridKey];
+    }
+    // 后备方案：使用内置的 localStorage 列状态
+    else {
+      stateToApply = getColumnState(props.gridKey);
+    }
+    if (stateToApply && Array.isArray(stateToApply)) {
+      // 转换为 AG-Grid 需要的格式
+      var formattedState = stateToApply.map(function (col) {
+        return {
+          colId: col.colId || col.field,
+          width: col.width,
+          hide: col.hide,
+          pinned: col.pinned === 'notPinned' ? null : col.pinned,
+          sort: col.sort,
+          sortIndex: col.sortIndex,
+          aggFunc: col.aggFunc,
+          flex: col.flex
+        };
+      });
       setTimeout(function () {
-        apiRef.current.applyColumnState({
-          state: gridPlusColumnState[props.gridKey],
+        gridApiState.applyColumnState({
+          state: formattedState,
           applyOrder: true
         });
-      }, 10);
+      }, 100);
     }
-  }, [gridPlusColumnState, props.gridKey]);
+  }, [props.gridKey, gridApiState, contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState, getColumnState]);
 
   //@ts-ignore
   if (columns.length > 0) {
     //@ts-ignore
     columns[0].rowDrag = props.onRowDrag ? true : false;
   }
-  var onRowDragMove = (0, _react.useCallback)(function (event) {
-    var movingNode = event.node;
-    var overNode = event.overNode;
-    var rowNeedsToMove = movingNode !== overNode;
-    if (rowNeedsToMove) {
-      var movingData = movingNode.data;
-      var overData = overNode.data;
-      var fromIndex = dataSourceCopy.indexOf(movingData);
-      var toIndex = dataSourceCopy.indexOf(overData);
-      var newStore = dataSourceCopy.slice();
-      moveInArray(newStore, fromIndex, toIndex);
-      dataSourceCopy = newStore;
-      field.setValue(newStore);
-      apiRef.current.clearFocusedCell();
-    }
-    function moveInArray(arr, fromIndex, toIndex) {
-      var element = arr[fromIndex];
-      arr.splice(fromIndex, 1);
-      arr.splice(toIndex, 0, element);
-    }
-  }, [field]);
-  var onColumnStateChanged = function onColumnStateChanged(columnState) {
-    if (props.gridKey) {
-      onSaveColumnState && onSaveColumnState(props.gridKey, columnState);
-    }
-  };
 
-  // 通用的聚焦函数
-  var focusInputInCell = (0, _react.useCallback)(function (cell) {
-    // 首先查找Editable包装的元素
-    var editableElement = cell.querySelector('.ant-formily-editable');
-    if (editableElement) {
-      // 检查Editable是否已经处于编辑状态
-      var isEditing = editableElement.getAttribute('data-editable-state') === 'editing';
-      if (isEditing) {
-        // 如果已经处于编辑状态，查找输入框并直接聚焦
-        var existingInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
-        if (existingInput) {
-          existingInput.focus();
-          if ('setSelectionRange' in existingInput && existingInput.type !== 'number' && existingInput.type !== 'date') {
-            var _existingInput$value;
-            var length = ((_existingInput$value = existingInput.value) === null || _existingInput$value === void 0 ? void 0 : _existingInput$value.length) || 0;
-            setTimeout(function () {
-              existingInput.setSelectionRange(length, length);
-            }, 10);
-          }
-        }
-      } else {
-        // 如果还没有进入编辑状态，触发编辑状态
-        editableElement.click();
-        var focusEvent = new Event('focus', {
-          bubbles: true
-        });
-        editableElement.dispatchEvent(focusEvent);
+  // 保存列状态（优先使用 Context，否则使用内置的 localStorage）
+  var onColumnStateChanged = function onColumnStateChanged(columnState) {
+    if (!props.gridKey) return;
 
-        // 延迟查找输入框并设置光标
-        setTimeout(function () {
-          var newInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
-          if (newInput) {
-            newInput.focus();
-            if ('setSelectionRange' in newInput && newInput.type !== 'number' && newInput.type !== 'date') {
-              var _newInput$value;
-              var _length = ((_newInput$value = newInput.value) === null || _newInput$value === void 0 ? void 0 : _newInput$value.length) || 0;
-              setTimeout(function () {
-                newInput.setSelectionRange(_length, _length);
-              }, 10);
-            }
-          }
-        }, 150);
-      }
-    } else {
-      // 如果没有Editable包装，尝试多种选择器查找输入框
-      var inputElement = cell.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
-      if (!inputElement) {
-        // 尝试更宽泛的选择器
-        inputElement = cell.querySelector('input, textarea');
-      }
-      if (!inputElement) {
-        // 尝试查找Ant Design的输入框
-        inputElement = cell.querySelector('.ant-input');
-      }
-      if (!inputElement) {
-        // 查找任何可聚焦的元素
-        inputElement = cell.querySelector('[contenteditable="true"], [tabindex]');
-      }
-      if (inputElement) {
-        inputElement.focus();
+    // 判断是否有真正的 Provider：检查 columnState 是否不是 undefined（默认值）
+    var hasRealProvider = (contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState) !== undefined;
 
-        // 将光标定位到末尾
-        if ('setSelectionRange' in inputElement && inputElement.type !== 'number' && inputElement.type !== 'date') {
-          var _inputElement$value;
-          var _length2 = ((_inputElement$value = inputElement.value) === null || _inputElement$value === void 0 ? void 0 : _inputElement$value.length) || 0;
-          setTimeout(function () {
-            inputElement.setSelectionRange(_length2, _length2);
-          }, 10);
-        }
-      } else {
-        // 尝试直接聚焦到单元格本身
-        cell.focus();
-      }
+    // 优先使用 Context 的保存方法（但只有在有真正的 Provider 时）
+    if (hasRealProvider && contextColumnState !== null && contextColumnState !== void 0 && contextColumnState.onSaveColumnState) {
+      contextColumnState.onSaveColumnState(props.gridKey, columnState);
     }
-  }, []);
+    // 后备方案：使用内置的 localStorage 保存
+    else {
+      saveColumnState(props.gridKey, columnState);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
@@ -238,6 +236,38 @@ var ArrayTable = (0, _react2.observer)(function (props) {
       params.api.hidePopupMenu();
       apiRef.current = params.api;
       setGridApiState(params.api);
+
+      // 立即尝试恢复列状态
+      if (props.gridKey) {
+        var _contextColumnState$c2;
+        var hasRealProvider = (contextColumnState === null || contextColumnState === void 0 ? void 0 : contextColumnState.columnState) !== undefined;
+        var stateToApply = null;
+        if (hasRealProvider && contextColumnState !== null && contextColumnState !== void 0 && (_contextColumnState$c2 = contextColumnState.columnState) !== null && _contextColumnState$c2 !== void 0 && _contextColumnState$c2[props.gridKey]) {
+          stateToApply = contextColumnState.columnState[props.gridKey];
+        } else {
+          stateToApply = getColumnState(props.gridKey);
+        }
+        if (stateToApply && Array.isArray(stateToApply)) {
+          var formattedState = stateToApply.map(function (col) {
+            return {
+              colId: col.colId || col.field,
+              width: col.width,
+              hide: col.hide,
+              pinned: col.pinned === 'notPinned' ? null : col.pinned,
+              sort: col.sort,
+              sortIndex: col.sortIndex,
+              aggFunc: col.aggFunc,
+              flex: col.flex
+            };
+          });
+          setTimeout(function () {
+            params.api.applyColumnState({
+              state: formattedState,
+              applyOrder: true
+            });
+          }, 50);
+        }
+      }
     },
     suppressColumnVirtualisation: true,
     gridOptions: {
@@ -248,104 +278,7 @@ var ArrayTable = (0, _react2.observer)(function (props) {
       enterNavigatesVertically: true,
       enterNavigatesVerticallyAfterEdit: true
     },
-    onCellKeyDown: function onCellKeyDown(event) {
-      var keyEvent = event.event,
-        node = event.node,
-        colDef = event.colDef,
-        api = event.api;
-      if (!keyEvent) return;
-
-      // 处理上下左右键导航
-      if (keyEvent.key === 'ArrowDown' || keyEvent.key === 'ArrowUp' || keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight') {
-        var currentRowIndex = node.rowIndex;
-        var currentColId = colDef.field;
-        var targetRowIndex = currentRowIndex;
-        var targetColId = currentColId;
-
-        // 确定目标位置
-        if (keyEvent.key === 'ArrowDown') {
-          targetRowIndex = currentRowIndex + 1;
-        } else if (keyEvent.key === 'ArrowUp') {
-          targetRowIndex = currentRowIndex - 1;
-        } else if (keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight') {
-          // 对于左右键，使用AG-Grid的API获取列信息
-          var visibleColumns = api.getAllDisplayedColumns();
-          if (visibleColumns && visibleColumns.length > 0) {
-            // 找到当前列的索引
-            var currentColIndex = visibleColumns.findIndex(function (col) {
-              return col.getColId() === currentColId;
-            });
-            var targetColIndex;
-            if (keyEvent.key === 'ArrowLeft') {
-              targetColIndex = currentColIndex - 1;
-            } else {
-              targetColIndex = currentColIndex + 1;
-            }
-
-            // 检查目标列索引是否有效
-            if (targetColIndex >= 0 && targetColIndex < visibleColumns.length) {
-              targetColId = visibleColumns[targetColIndex].getColId();
-            } else {
-              return; // 无法移动到目标列
-            }
-          } else {
-            return; // 无列信息
-          }
-        }
-
-        // 检查目标位置是否有效
-        var isValidTarget = keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight' || targetRowIndex >= 0 && targetRowIndex < dataSource.length;
-        if (isValidTarget) {
-          // 延迟执行以确保当前编辑完成
-          setTimeout(function () {
-            api.setFocusedCell(targetRowIndex, targetColId);
-
-            // 不使用原生startEditingCell，而是手动触发编辑状态
-            // 使用DOM选择器查找目标单元格
-            setTimeout(function () {
-              var _ref$current;
-              // 通过ref获取网格容器
-              var gridContainer = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.ag-theme-alpine');
-              if (gridContainer) {
-                // 尝试通过行和列分步查找目标单元格
-                var rows = gridContainer.querySelectorAll('.ag-row');
-                if (rows[targetRowIndex]) {
-                  var targetRow = rows[targetRowIndex];
-
-                  // 在行内查找指定列的单元格
-                  var targetCell = targetRow.querySelector(".ag-cell[col-id=\"".concat(targetColId, "\"]"));
-                  if (!targetCell) {
-                    // 如果通过col-id找不到，遍历所有单元格查找匹配的列
-                    var cells = targetRow.querySelectorAll('.ag-cell');
-                    var _iterator = _createForOfIteratorHelper(cells),
-                      _step;
-                    try {
-                      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                        var cell = _step.value;
-                        var colId = cell.getAttribute('col-id') || cell.getAttribute('data-col-id');
-                        if (colId === targetColId) {
-                          targetCell = cell;
-                          break;
-                        }
-                      }
-                    } catch (err) {
-                      _iterator.e(err);
-                    } finally {
-                      _iterator.f();
-                    }
-                  }
-                  if (targetCell) {
-                    focusInputInCell(targetCell);
-                  }
-                }
-              }
-            }, 150);
-          }, 10);
-        }
-        keyEvent.preventDefault();
-        keyEvent.stopPropagation();
-      }
-    },
+    onCellKeyDown: handleCellKeyDown,
     onCellClicked: function onCellClicked(event) {
       var _event$event;
       // 点击单元格时触发编辑状态
@@ -357,7 +290,7 @@ var ArrayTable = (0, _react2.observer)(function (props) {
         }
       }, 10);
     },
-    onRowDragMove: onRowDragMove,
+    onRowDragMove: handleRowDragMove,
     onRowDataUpdated: function onRowDataUpdated(e) {
       if (isAdd) {
         var _apiRef$current;