@nokecy/qc-ui 1.1.0 → 1.1.1

package/dist/cjs/ag-grid-plus/ag-gridPlus.js

@@ -376,6 +376,53 @@ function AgGridPlus(props) {
     };
   }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, derivedColumnState, ready // 添加 ready 依赖，确保 Grid 初始化完成后再应用方案
   ]);
+
+  /**
+   * 【新增】监听当前方案 ID 变化，当方案被删除时重置列状态
+   *
+   * 场景：
+   * - 用户删除当前正在使用的方案
+   * - currentColumnScheme?.id 从有值变为 null
+   *
+   * 行为：
+   * - 重置列状态为初始状态（默认顺序、宽度等）
+   * - 清除所有过滤器
+   * - 清除列样式配置
+   *
+   * 优势：
+   * - 符合单向数据流架构
+   * - 适用于所有方案切换场景（删除/取消选择）
+   * - 用户体验好，自动恢复到初始状态
+   */
+  var prevSchemeIdRef = (0, _react.useRef)(currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id);
+  (0, _react.useEffect)(function () {
+    if (!gridKey || !apiRef.current || !ready) return;
+    var prevSchemeId = prevSchemeIdRef.current;
+    var currentSchemeId = currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id;
+    // 检测方案被删除：从有值变为 null/undefined
+    if (prevSchemeId && !currentSchemeId) {
+      Promise.resolve().then(function () {
+        if (!apiRef.current) return;
+
+        // 1. 重置列状态为初始状态
+
+        apiRef.current.resetColumnState();
+
+        // 2. 清除所有过滤器
+
+        apiRef.current.setFilterModel(null);
+
+        // 3. 清除列样式配置
+        setColumnCellClass({});
+      }).catch(function (error) {
+        console.error('[AgGridPlus] 重置列状态失败:', error);
+        _logger.logger.error('[AgGridPlus] 重置列状态失败', error);
+      });
+    }
+
+    // 更新引用
+    prevSchemeIdRef.current = currentSchemeId;
+  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, ready]);
   (0, _react.useEffect)(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]);

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

@@ -17,8 +17,6 @@ var _preview = _interopRequireDefault(require("./preview"));
 var _antd = require("antd");
 var _setting = _interopRequireDefault(require("../ag-grid-plus/setting"));
 var _gridContext = require("../ag-grid-plus/context/gridContext");
-var _useSchemeManager = require("../ag-grid-plus/context/useSchemeManager");
-var _localStorageAdapter = require("../ag-grid-plus/shared/storage/localStorageAdapter");
 var _columnGroupUtils = require("../ag-grid-plus/setting/columnGroupUtils");
 var _theme = require("../ag-grid-plus/theme");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,7 +36,14 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // 导入 AG-Grid v33 主题
 //@ts-ignore
 var ArrayTableInner = (0, _react2.observer)(function (props) {
-  var height = props.height;
+  var height = props.height,
+    gridKey = props.gridKey;
+
+  // 【新增】运行时验证 gridKey
+  if (!gridKey) {
+    console.error('[ArrayTable] gridKey 是必需的属性，用于方案管理和状态持久化');
+    throw new Error('[ArrayTable] gridKey 属性是必需的。请在 x-component-props 中提供 gridKey');
+  }
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isAdd = _useState2[0],
@@ -71,10 +76,12 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
   var _useRowDrag = (0, _hooks.useRowDrag)(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
-  // 从 Context 获取方案管理相关的状态和方法
-  var _useContext = (0, _react.useContext)(_gridContext.GridPlusContext),
-    currentSchemes = _useContext.currentSchemes,
-    columnSchemes = _useContext.columnSchemes;
+  // 直接使用 Context 获取方案管理状态
+  // ArrayTable 外层已经提供了完整的 GridPlusContext.Provider
+  var context = (0, _react.useContext)(_gridContext.GridPlusContext);
+  var _ref = context || {},
+    currentSchemes = _ref.currentSchemes,
+    columnSchemes = _ref.columnSchemes;
 
   // 获取当前表格的激活方案
   var currentScheme = (0, _react.useMemo)(function () {
@@ -294,8 +301,8 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
         '    <span data-ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' + '    <span data-ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' + '    <span data-ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>' + "  </div>" + "</div>"
       }
     },
-    getRowId: function getRowId(_ref) {
-      var data = _ref.data;
+    getRowId: function getRowId(_ref2) {
+      var data = _ref2.data;
       return data._id || data.id;
     }
     // rowDragEntireRow={true}
@@ -329,43 +336,36 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
 ArrayTableInner.displayName = "ArrayTableInner";
 
 /**
- * ArrayTable 组件 - 带 GridPlusContext Provider 包装
+ * ArrayTable 组件
+ *
+ * 注意：需要在外部使用 GridPlusContext.Provider 包裹以提供方案管理功能
+ *
+ * @example
+ * ```tsx
+ * const adapter = useMemo(() => new LocalStorageSchemeAdapter({
+ *   storageKey: `array-table-schemes-${gridKey}`
+ * }), [gridKey]);
+ *
+ * const schemeManager = useSchemeManager({ adapter, autoLoad: true });
+ *
+ * const contextValue = useMemo(() => ({
+ *   extensibleColumns: [],
+ *   columnState: undefined,
+ *   onSaveColumnState: () => {},
+ *   applyToGlobal: () => {},
+ *   resetCurrent: () => {},
+ *   resetAll: () => {},
+ *   queryFormItems: [],
+ *   ...schemeManager
+ * }), [schemeManager]);
  *
- * 提供完整的列方案管理功能支持
+ * <GridPlusContext.Provider value={contextValue}>
+ *   <ArrayTable gridKey="my-table" height={400} />
+ * </GridPlusContext.Provider>
+ * ```
  */
 //@ts-ignore
-var ArrayTable = (0, _react2.observer)(function (props) {
-  // 创建 LocalStorage 适配器实例 (使用 useMemo 避免重复创建)
-  var adapter = (0, _react.useMemo)(function () {
-    return new _localStorageAdapter.LocalStorageSchemeAdapter({
-      storageKey: "array-table-schemes-".concat(props.gridKey || 'default'),
-      enableDebugLog: false
-    });
-  }, [props.gridKey]);
-
-  // 初始化方案管理器
-  var schemeManager = (0, _useSchemeManager.useSchemeManager)({
-    adapter: adapter,
-    autoLoad: true,
-    showErrorMessage: true
-  });
-
-  // 构建 Context Value
-  var contextValue = (0, _react.useMemo)(function () {
-    return _objectSpread({
-      extensibleColumns: [],
-      columnState: undefined,
-      onSaveColumnState: function onSaveColumnState() {},
-      applyToGlobal: function applyToGlobal() {},
-      resetCurrent: function resetCurrent() {},
-      resetAll: function resetAll() {},
-      queryFormItems: []
-    }, schemeManager);
-  }, [schemeManager]);
-  return /*#__PURE__*/_react.default.createElement(_gridContext.GridPlusContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(ArrayTableInner, props));
-});
+var ArrayTable = ArrayTableInner;
 ArrayTable.displayName = "ArrayTable";
 ArrayTable.Column = function () {
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null);

package/dist/esm/ag-grid-plus/ag-gridPlus.js

@@ -368,6 +368,53 @@ function AgGridPlus(props) {
     };
   }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, derivedColumnState, ready // 添加 ready 依赖，确保 Grid 初始化完成后再应用方案
   ]);
+
+  /**
+   * 【新增】监听当前方案 ID 变化，当方案被删除时重置列状态
+   *
+   * 场景：
+   * - 用户删除当前正在使用的方案
+   * - currentColumnScheme?.id 从有值变为 null
+   *
+   * 行为：
+   * - 重置列状态为初始状态（默认顺序、宽度等）
+   * - 清除所有过滤器
+   * - 清除列样式配置
+   *
+   * 优势：
+   * - 符合单向数据流架构
+   * - 适用于所有方案切换场景（删除/取消选择）
+   * - 用户体验好，自动恢复到初始状态
+   */
+  var prevSchemeIdRef = useRef(currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id);
+  useEffect(function () {
+    if (!gridKey || !apiRef.current || !ready) return;
+    var prevSchemeId = prevSchemeIdRef.current;
+    var currentSchemeId = currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id;
+    // 检测方案被删除：从有值变为 null/undefined
+    if (prevSchemeId && !currentSchemeId) {
+      Promise.resolve().then(function () {
+        if (!apiRef.current) return;
+
+        // 1. 重置列状态为初始状态
+
+        apiRef.current.resetColumnState();
+
+        // 2. 清除所有过滤器
+
+        apiRef.current.setFilterModel(null);
+
+        // 3. 清除列样式配置
+        setColumnCellClass({});
+      }).catch(function (error) {
+        console.error('[AgGridPlus] 重置列状态失败:', error);
+        logger.error('[AgGridPlus] 重置列状态失败', error);
+      });
+    }
+
+    // 更新引用
+    prevSchemeIdRef.current = currentSchemeId;
+  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, ready]);
   useEffect(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]);

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

@@ -25,8 +25,6 @@ import PreviewArrayTable from "./preview";
 import { Space } from "antd";
 import Setting from "../ag-grid-plus/setting";
 import { GridPlusContext } from "../ag-grid-plus/context/gridContext";
-import { useSchemeManager } from "../ag-grid-plus/context/useSchemeManager";
-import { LocalStorageSchemeAdapter } from "../ag-grid-plus/shared/storage/localStorageAdapter";
 import { flatConfigToColumnState, flatConfigToGridState } from "../ag-grid-plus/setting/columnGroupUtils";
 
 // 导入 AG-Grid v33 主题
@@ -34,7 +32,14 @@ import { agGridTheme } from "../ag-grid-plus/theme";
 
 //@ts-ignore
 var ArrayTableInner = observer(function (props) {
-  var height = props.height;
+  var height = props.height,
+    gridKey = props.gridKey;
+
+  // 【新增】运行时验证 gridKey
+  if (!gridKey) {
+    console.error('[ArrayTable] gridKey 是必需的属性，用于方案管理和状态持久化');
+    throw new Error('[ArrayTable] gridKey 属性是必需的。请在 x-component-props 中提供 gridKey');
+  }
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isAdd = _useState2[0],
@@ -67,10 +72,12 @@ var ArrayTableInner = observer(function (props) {
   var _useRowDrag = useRowDrag(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
-  // 从 Context 获取方案管理相关的状态和方法
-  var _useContext = useContext(GridPlusContext),
-    currentSchemes = _useContext.currentSchemes,
-    columnSchemes = _useContext.columnSchemes;
+  // 直接使用 Context 获取方案管理状态
+  // ArrayTable 外层已经提供了完整的 GridPlusContext.Provider
+  var context = useContext(GridPlusContext);
+  var _ref = context || {},
+    currentSchemes = _ref.currentSchemes,
+    columnSchemes = _ref.columnSchemes;
 
   // 获取当前表格的激活方案
   var currentScheme = useMemo(function () {
@@ -290,8 +297,8 @@ var ArrayTableInner = observer(function (props) {
         '    <span data-ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' + '    <span data-ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' + '    <span data-ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>' + "  </div>" + "</div>"
       }
     },
-    getRowId: function getRowId(_ref) {
-      var data = _ref.data;
+    getRowId: function getRowId(_ref2) {
+      var data = _ref2.data;
       return data._id || data.id;
     }
     // rowDragEntireRow={true}
@@ -325,43 +332,36 @@ var ArrayTableInner = observer(function (props) {
 ArrayTableInner.displayName = "ArrayTableInner";
 
 /**
- * ArrayTable 组件 - 带 GridPlusContext Provider 包装
+ * ArrayTable 组件
+ *
+ * 注意：需要在外部使用 GridPlusContext.Provider 包裹以提供方案管理功能
+ *
+ * @example
+ * ```tsx
+ * const adapter = useMemo(() => new LocalStorageSchemeAdapter({
+ *   storageKey: `array-table-schemes-${gridKey}`
+ * }), [gridKey]);
+ *
+ * const schemeManager = useSchemeManager({ adapter, autoLoad: true });
+ *
+ * const contextValue = useMemo(() => ({
+ *   extensibleColumns: [],
+ *   columnState: undefined,
+ *   onSaveColumnState: () => {},
+ *   applyToGlobal: () => {},
+ *   resetCurrent: () => {},
+ *   resetAll: () => {},
+ *   queryFormItems: [],
+ *   ...schemeManager
+ * }), [schemeManager]);
  *
- * 提供完整的列方案管理功能支持
+ * <GridPlusContext.Provider value={contextValue}>
+ *   <ArrayTable gridKey="my-table" height={400} />
+ * </GridPlusContext.Provider>
+ * ```
  */
 //@ts-ignore
-var ArrayTable = observer(function (props) {
-  // 创建 LocalStorage 适配器实例 (使用 useMemo 避免重复创建)
-  var adapter = useMemo(function () {
-    return new LocalStorageSchemeAdapter({
-      storageKey: "array-table-schemes-".concat(props.gridKey || 'default'),
-      enableDebugLog: false
-    });
-  }, [props.gridKey]);
-
-  // 初始化方案管理器
-  var schemeManager = useSchemeManager({
-    adapter: adapter,
-    autoLoad: true,
-    showErrorMessage: true
-  });
-
-  // 构建 Context Value
-  var contextValue = useMemo(function () {
-    return _objectSpread({
-      extensibleColumns: [],
-      columnState: undefined,
-      onSaveColumnState: function onSaveColumnState() {},
-      applyToGlobal: function applyToGlobal() {},
-      resetCurrent: function resetCurrent() {},
-      resetAll: function resetAll() {},
-      queryFormItems: []
-    }, schemeManager);
-  }, [schemeManager]);
-  return /*#__PURE__*/React.createElement(GridPlusContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement(ArrayTableInner, props));
-});
+var ArrayTable = ArrayTableInner;
 ArrayTable.displayName = "ArrayTable";
 ArrayTable.Column = function () {
   return /*#__PURE__*/React.createElement(Fragment, null);