@luck-design-biz/luckda 0.0.25-11 → 0.0.25-12

package/lib/lowcode/engine/tools/dataProcess.js

@@ -20,10 +20,10 @@ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var LZString = _interopRequireWildcard(require("lz-string"));
 var _constants = require("../../constants");
-/**
- * 数据压缩
- * @param {JSON} data
- * @returns 加密后的字符串
+/**
+ * 数据压缩
+ * @param {JSON} data
+ * @returns 加密后的字符串
  */
 function compress(data) {
   // 将对象转换为JSON字符串
@@ -32,10 +32,10 @@ function compress(data) {
   return LZString.compressToBase64(jsonString);
 }
 
-/**
- * 数据解压
- * @param {string} compressedData
- * @returns {json}
+/**
+ * 数据解压
+ * @param {string} compressedData
+ * @returns {json}
  */
 function decompress(compressedData) {
   // 使用LZ-String解压数据
@@ -44,13 +44,13 @@ function decompress(compressedData) {
   return JSON.parse(jsonString);
 }
 
-/**
- * 查找指定ID的节点及其父节点。
- *
- * @param {string} id - 要查找的节点ID。
- * @param {Object} current - 当前遍历的JSON对象。
- * @param {Object|null} parent - 当前节点的父节点。
- * @returns {{node: Object|null, parent: Object|null}} 查找结果，包含节点和其父节点。
+/**
+ * 查找指定ID的节点及其父节点。
+ *
+ * @param {string} id - 要查找的节点ID。
+ * @param {Object} current - 当前遍历的JSON对象。
+ * @param {Object|null} parent - 当前节点的父节点。
+ * @returns {{node: Object|null, parent: Object|null}} 查找结果，包含节点和其父节点。
  */
 function findNodeAndParent(id, current) {
   var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -84,13 +84,13 @@ function findNodeAndParent(id, current) {
   };
 }
 
-/**
- * 对指定的JSON结构进行节点的添加、修改或删除操作。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string|null} path - 要操作的节点路径，使用'/'分隔。
- * @param {string} id - 操作节点的唯一标识符。
- * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+/**
+ * 对指定的JSON结构进行节点的添加、修改或删除操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string|null} path - 要操作的节点路径，使用'/'分隔。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
  */
 function process(json, path, id, data) {
   if (!json) {
@@ -156,25 +156,25 @@ function process(json, path, id, data) {
   }
 }
 
-/**
- * 对指定的JSON结构进行节点的添加操作。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string} parentId - 父节点的唯一标识符。
- * @param {string} id - 操作节点的唯一标识符。
- * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+/**
+ * 对指定的JSON结构进行节点的添加操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} parentId - 父节点的唯一标识符。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
  */
 function add(json, parentId, id, data) {
   process(json, getPathById(json, parentId), id, data);
 }
 
-/**
- * 移动指定的节点到另一个节点的指定位置。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string} sid - 被移动的节点id
- * @param {string} tid - 目标节点id
- * @param {string} action - 'left': 往节点前面插入，'right'：往节点后面插，'inside'：往节点子节点插
+/**
+ * 移动指定的节点到另一个节点的指定位置。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} sid - 被移动的节点id
+ * @param {string} tid - 目标节点id
+ * @param {string} action - 'left': 往节点前面插入，'right'：往节点后面插，'inside'：往节点子节点插
  */
 function move(json, sid, tid, action) {
   // 验证节点存在性
@@ -230,34 +230,34 @@ function move(json, sid, tid, action) {
   }
 }
 
-/**
- * 对指定的JSON结构进行节点的修改操作。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string} id - 操作节点的唯一标识符。
- * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+/**
+ * 对指定的JSON结构进行节点的修改操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
  */
 function modifyById(json, id, data) {
   process(json, null, id, data);
 }
 
-/**
- * 删除指定id的节点。
- *
- * @param {Object} json - JSON对象。
- * @param {string} id - 要删除的节点ID。
+/**
+ * 删除指定id的节点。
+ *
+ * @param {Object} json - JSON对象。
+ * @param {string} id - 要删除的节点ID。
  */
 function deleteById(json, id) {
   process(json, null, id);
 }
 
-/**
- * 根据ID在给定的JSON结构中查找节点的路径。
- *
- * @param {Object} json - 要搜索的JSON对象。
- * @param {string} id - 要查找的节点ID。
- * @param {string} currentPath - 当前递归到的路径，用于构建返回的路径字符串。
- * @returns {string|null} 如果找到节点，返回节点的路径；否则返回null。
+/**
+ * 根据ID在给定的JSON结构中查找节点的路径。
+ *
+ * @param {Object} json - 要搜索的JSON对象。
+ * @param {string} id - 要查找的节点ID。
+ * @param {string} currentPath - 当前递归到的路径，用于构建返回的路径字符串。
+ * @returns {string|null} 如果找到节点，返回节点的路径；否则返回null。
  */
 function getPathById(json, id) {
   var currentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -277,28 +277,28 @@ function getPathById(json, id) {
   return null;
 }
 
-/**
- * 在给定的JSON结构中搜索具有特定id的节点，并返回包含该节点及其所有父节点的props属性的路径数组。
- *
- * @param {Object} data - 待搜索的JSON对象，它代表了一个复杂的树状结构，每个节点都可能有props和children属性。
- * @param {string} targetId - 需要找到的目标节点的id。
- * @returns {Array<Object>} 一个包含目标节点及其所有父节点的props属性的数组。如果未找到目标节点，则返回空数组。
- *
- * @example
- * const data = {
- *   props: {
- *     id: 'page_root',
- *     type: 'Page',
- *     name: '页面',
- *     hasHeder: true,
- *     hasFooter: true,
- *   },
- *   // ...其他节点
- * };
- *
- * const path = getPathNodesById(data, 'form_jknbjkun');
- * console.log(path);
- * // 输出目标节点及其所有父节点的props属性的数组
+/**
+ * 在给定的JSON结构中搜索具有特定id的节点，并返回包含该节点及其所有父节点的props属性的路径数组。
+ *
+ * @param {Object} data - 待搜索的JSON对象，它代表了一个复杂的树状结构，每个节点都可能有props和children属性。
+ * @param {string} targetId - 需要找到的目标节点的id。
+ * @returns {Array<Object>} 一个包含目标节点及其所有父节点的props属性的数组。如果未找到目标节点，则返回空数组。
+ *
+ * @example
+ * const data = {
+ *   props: {
+ *     id: 'page_root',
+ *     type: 'Page',
+ *     name: '页面',
+ *     hasHeder: true,
+ *     hasFooter: true,
+ *   },
+ *   // ...其他节点
+ * };
+ *
+ * const path = getPathNodesById(data, 'form_jknbjkun');
+ * console.log(path);
+ * // 输出目标节点及其所有父节点的props属性的数组
  */
 function getPathNodesById(data, targetId) {
   // 初始化结果数组

package/lib/lowcode/engine/tools/helper.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.executeCode = executeCode;
+exports.extractKeywords = extractKeywords;
 exports.getCtx = getCtx;
 exports.getFuncBody = getFuncBody;
 exports.getLDMetaAttr = getLDMetaAttr;
 exports.isColor = isColor;
 exports.isPromise = isPromise;
 exports.listReducer = listReducer;
+exports.loadScript = loadScript;
 exports.omitBadProps = omitBadProps;
 exports.parseCSS = parseCSS;
 exports.setLDMetaAttrs = setLDMetaAttrs;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _construct2 = _interopRequireDefault(require("@babel/runtime/helpers/construct"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -135,8 +138,8 @@ function executeCode(context, code, argsName) {
     throw new Error('executeCode参数不匹配');
   }
   var ctx = getCtx(context);
-  var func = (0, _construct2.default)(Function, (0, _toConsumableArray2.default)(argsName || []).concat(['ctx', getFuncBody(code)]));
-  return func.apply(void 0, args.concat([ctx]));
+  var func = (0, _construct2.default)(Function, (0, _toConsumableArray2.default)(argsName || []).concat(['ctx', 'window', getFuncBody(code)]));
+  return func.apply(void 0, args.concat([ctx, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, window.proxy), window)]));
 }
 function parseCSS(cssString) {
   // 创建一个空对象来存储解析后的样式
@@ -183,4 +186,60 @@ function getLDMetaAttr(name) {
     });
   }
   return params.get(name);
+}
+function extractKeywords(obj, keys) {
+  var keywords = [];
+  function recurse(currentObj) {
+    if ((0, _typeof2.default)(currentObj) !== 'object' || currentObj === null) {
+      return;
+    }
+    for (var key in currentObj) {
+      var _iterator = (0, _createForOfIteratorHelper2.default)(keys),
+        _step;
+      try {
+        tag: for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var triggerKey = _step.value;
+          var flag = (0, _lodash.isString)(triggerKey) ? key === triggerKey : (0, _lodash.has)(currentObj[key], triggerKey);
+          if (flag) {
+            var keyword = (0, _lodash.isString)(triggerKey) ? currentObj[triggerKey] : (0, _lodash.get)(currentObj[key], triggerKey);
+            keywords.push({
+              label: keyword,
+              kind: 'property',
+              insertText: keyword,
+              documentation: JSON.stringify(currentObj)
+            });
+            break tag;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      recurse(currentObj[key]);
+    }
+  }
+  recurse(obj);
+  return keywords;
+}
+function loadScript(path) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var script = document.querySelector("script[src=\"".concat(path, "\"]"));
+  if (!script) {
+    var newScript = document.createElement('script');
+    newScript.src = path;
+    Object.keys(props).forEach(function (key) {
+      newScript[key] = props[key];
+    });
+    newScript.setAttribute('data-status', 'loading');
+    document.body.appendChild(newScript);
+    return {
+      ref: newScript,
+      status: 'loading'
+    };
+  }
+  return {
+    ref: script,
+    status: script.getAttribute('data-status') || 'ready'
+  };
 }

package/lib/lowcode/engine/tools/usePageDataStore.js

@@ -172,7 +172,7 @@ var usePageDataStore = (0, _zustand.create)()((0, _immer.immer)((0, _middleware.
     };
   },
   equality: function equality(pastState, newState) {
-    return !pastState.pageData || (0, _fastDeepEqual.default)(pastState, newState);
+    return (0, _fastDeepEqual.default)(pastState, newState);
   },
   handleSet: function handleSet(_handleSet2) {
     return (0, _lodash.debounce)(function (state) {
@@ -244,7 +244,11 @@ var modifyNode = exports.modifyNode = function modifyNode(id, data) {
       target = _ref3.target;
     if (!target) return;
     (0, _lodash.forOwn)((0, _lodash.omit)(data, ['id', 'parentId', 'component', 'buildIn']), function (_val, _key) {
-      (0, _lodash.set)(target.props, _key, _val);
+      if ((0, _lodash.isNil)(_val)) {
+        (0, _lodash.unset)(target.props, _key, _val);
+      } else {
+        (0, _lodash.set)(target.props, _key, _val);
+      }
     });
   });
 };
@@ -318,13 +322,14 @@ var getCanUndoAndRedo = exports.getCanUndoAndRedo = function getCanUndoAndRedo()
   };
 };
 var useTemporalStore = exports.useTemporalStore = function useTemporalStore(selector) {
+  var _temp$pastStates, _temp$futureStates;
   var temp = (0, _zustand.useStore)(usePageDataStore.temporal, selector);
   if (!temp) return {
     canUndo: false,
     canRedo: false
   };
-  var canUndo = !!temp.pastStates.length;
-  var canRedo = !!temp.futureStates.length;
+  var canUndo = !!((_temp$pastStates = temp.pastStates) !== null && _temp$pastStates !== void 0 && _temp$pastStates.length);
+  var canRedo = !!((_temp$futureStates = temp.futureStates) !== null && _temp$futureStates !== void 0 && _temp$futureStates.length);
   return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, temp), {}, {
     canUndo: canUndo,
     canRedo: canRedo

package/lib/lowcode/index.js

@@ -22,10 +22,6 @@ Object.defineProperty(exports, "View", {
     return _view.default;
   }
 });
-exports.default = launcher;
 var _painter = _interopRequireDefault(require("./painter"));
 var _view = _interopRequireDefault(require("./view"));
-var _preview = _interopRequireDefault(require("./preview"));
-// export * as dataProcess  from './engine/tools/dataProcess';
-
-function launcher() {}
+var _preview = _interopRequireDefault(require("./preview"));

package/lib/lowcode/painter/Components.js

@@ -95,8 +95,8 @@ var CompItem = function CompItem(_ref2) {
   }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
 };
 
-/**
- * 组件清单
+/**
+ * 组件清单
  */
 var Components = function Components(_ref3) {
   var _ref3$dataset = _ref3.dataset,

package/lib/lowcode/painter/Design.js

@@ -81,15 +81,15 @@ var Design = function Design() {
     onLangChange: handleLangChange
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design-workspace']
-  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
+    canvas: simulatorRef
+  }), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     locale: ((_localeInfo$locale = _umi.localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
   }, /*#__PURE__*/_react.default.createElement(_umi.RawIntlProvider, {
     value: intl
   }, /*#__PURE__*/_react.default.createElement(_Page.default, {
     ref: simulatorRef,
     className: _design.default['lc-painter-design-simulator']
-  }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
-    canvas: simulatorRef
-  }))))));
+  })))));
 };
 var _default = exports.default = Design;

package/lib/lowcode/painter/DesignOperator.js

@@ -26,7 +26,7 @@ var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
     cellNodeTop = _cellNode$getBounding.top;
   return {
     left: "".concat(cellNodeLeft - pageLeft, "px"),
-    top: "".concat(cellNode.offsetTop, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
     width: "".concat(cellNode.offsetWidth, "px"),
     height: "".concat(cellNode.offsetHeight, "px")
   };

package/lib/lowcode/painter/DesignToolbar.js

@@ -289,7 +289,8 @@ var DesignToolbar = function DesignToolbar(_ref) {
       margin: '0 4px 0 2px'
     },
     onClick: function onClick() {
-      return setShowPreview(true);
+      setShowPreview(true);
+      context.$publisher(context.topics.COMPONENT_ACTIVE, null);
     }
   }, (0, _utils.formatMessage)({
     id: 'luckda.lowcode.design.toolbar.preview',
@@ -299,7 +300,8 @@ var DesignToolbar = function DesignToolbar(_ref) {
     type: "primary",
     style: {
       fontSize: 12,
-      padding: '0 7px 0 0'
+      padding: '0 7px 0 0',
+      marginLeft: 2
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -388,8 +390,9 @@ var DesignToolbar = function DesignToolbar(_ref) {
     })))),
     placement: "bottom",
     height: "94vh",
-    footer: false,
-    zIndex: 3000,
+    footer: false
+    // zIndex={3000}
+    ,
     headerStyle: {
       padding: '0 48px 0 24px'
     },

package/lib/lowcode/painter/components/ActionBindModal.js

@@ -16,6 +16,7 @@ var _lodash = require("lodash");
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../../engine/provider/ContextProvider");
 var _JSEditor = _interopRequireDefault(require("./code-editor/JSEditor"));
+var _helper = require("../../engine/tools/helper");
 var _actionBindModal = _interopRequireDefault(require("../style/action-bind-modal.less"));
 var _I18N_PREFIX_ = 'luckda.lowcode.painter.actionBindModal';
 var _ACTION_CATEGORY_ = [{
@@ -72,6 +73,10 @@ var ActionBindModal = function ActionBindModal(_ref) {
     searchValue = _useState6[0],
     setSearchValue = _useState6[1];
   var latestActiveKey = (0, _ahooks.useLatest)(activeKey);
+  var pageData = (0, _ContextProvider.useGet)();
+  var keywords = (0, _ahooks.useCreation)(function () {
+    return (0, _helper.extractKeywords)(pageData, ['id', ['dataset', 'code'], 'field']);
+  }, []);
   var options = (0, _ahooks.useCreation)(function () {
     if (category === 'page-action') {
       return (0, _lodash.reduce)(module.actions, function (ret, actionName, actionKey) {
@@ -302,6 +307,7 @@ var ActionBindModal = function ActionBindModal(_ref) {
     className: _actionBindModal.default['code-box']
   }, activeKey ? /*#__PURE__*/_react.default.createElement(_JSEditor.default, {
     ref: editorRef,
+    keywords: keywords,
     onChange: handleEditorValueChange
   }) : (0, _utils.formatMessage)({
     id: "".concat(_I18N_PREFIX_, ".noActionSelected"),

package/lib/lowcode/painter/components/Collapse.js

@@ -11,32 +11,32 @@ var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _collapse = _interopRequireDefault(require("../style/collapse.less"));
 var _antd = require("luck-design/antd");
-/**
- * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
- * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
- * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
- *
- * @component
- * @example
- * <Collapse
- *   field="exampleField"
- *   label="示例标签"
- *   desc="这是一个用于演示的折叠组件"
- *   defaultCollapsed={true}
- *   next={() => console.log('Custom next function executed')}
- * >
- *   <p>这里是可折叠的内容</p>
- * </Collapse>
- *
- * @param {Object} props - 组件的属性。
- * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
- * @param {string} [props.field] - 与折叠内容相关联的字段名。
- * @param {string} props.label - 折叠区域的标签名称。
- * @param {string} [props.desc] - 关于折叠内容的描述信息。
- * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
- * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
+/**
+ * Collapse 组件是一个可折叠区域的实现，用于显示或隐藏内容。它支持自定义标签、描述以及默认的折叠状态。
+ * 该组件还可以通过 `next` 函数来自定义点击操作，而不是简单地切换折叠状态。
+ * 提供的工具提示可以显示额外信息，如字段名和描述，以帮助用户更好地理解折叠内容的作用。
+ *
+ * @component
+ * @example
+ * <Collapse
+ *   field="exampleField"
+ *   label="示例标签"
+ *   desc="这是一个用于演示的折叠组件"
+ *   defaultCollapsed={true}
+ *   next={() => console.log('Custom next function executed')}
+ * >
+ *   <p>这里是可折叠的内容</p>
+ * </Collapse>
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {React.ReactNode} children - 折叠区域展开时显示的内容。
+ * @param {string} [props.field] - 与折叠内容相关联的字段名。
+ * @param {string} props.label - 折叠区域的标签名称。
+ * @param {string} [props.desc] - 关于折叠内容的描述信息。
+ * @param {boolean} [props.defaultCollapsed=false] - 折叠区域的默认状态。如果为 true，则默认为折叠状态。
+ * @param {Function} [props.next] - 点击操作的自定义函数。如果提供，点击时将执行此函数，而不是切换折叠状态。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个具有可折叠功能的容器。
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/components/ColorInput.js

@@ -17,30 +17,30 @@ var _antd = require("luck-design/antd");
 var _colorInput = _interopRequireDefault(require("../style/color-input.less"));
 var _reactColor = require("react-color");
 var _excluded = ["value", "onChange", "wrapperStyle"];
-/**
- * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
- * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
- * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
- * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
- *
- * @component
- * @example
- * const handleColorChange = (newColor) => {
- *   console.log('Selected color:', newColor);
- * };
- * <ColorInput
- *   value="rgba(255, 0, 0, 0.5)"
- *   onChange={handleColorChange}
- *   wrapperStyle={{ margin: '20px' }}
- * />
- *
- * @param {Object} props - 组件的属性。
- * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
- * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
- * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
- * @param {Object} rest - 传递给 Input 组件的其他属性。
- *
- * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
+/**
+ * ColorInput 组件是一个集成颜色选择器的输入框组件，允许用户以 RGBA 或十六进制格式输入颜色值。
+ * 组件内部通过 PopConfirm 弹出一个 SketchPicker 颜色选择器，以提供一个直观的颜色选择界面。
+ * 用户输入的颜色值在内部转换为适当的格式，并通过 onChange 回调暴露给外部使用。
+ * 此组件还支持通过传入的 value 属性初始化颜色值，并响应其后续更改。
+ *
+ * @component
+ * @example
+ * const handleColorChange = (newColor) => {
+ *   console.log('Selected color:', newColor);
+ * };
+ * <ColorInput
+ *   value="rgba(255, 0, 0, 0.5)"
+ *   onChange={handleColorChange}
+ *   wrapperStyle={{ margin: '20px' }}
+ * />
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {string} props.value - 初始化颜色值，支持 RGBA 字符串或十六进制格式。
+ * @param {Function} props.onChange - 当颜色值变更时触发的回调函数。传递新的颜色值作为参数。
+ * @param {Object} [props.wrapperStyle] - 自定义包装器 div 的样式对象。
+ * @param {Object} rest - 传递给 Input 组件的其他属性。
+ *
+ * @returns {ReactElement} 返回一个 React 元素，表示一个带有颜色选择器的输入框组件。
  */
 var ColorInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,

package/lib/lowcode/painter/components/ListEditor.js

@@ -10,14 +10,14 @@ var _react = _interopRequireDefault(require("react"));
 var _antd = require("luck-design/antd");
 var _utils = require("@luck-design-biz/base/utils");
 var _listEditor = _interopRequireDefault(require("../style/list-editor.less"));
-/**
- * ListEditor 是一个用于管理和展示一组可编辑标签项的容器组件。
- * 它提供了一个添加新标签项的操作按钮，并通过 children 属性接收一组 ListEditorItem 组件。
- *
- * @param {Object} props - 组件接收的属性。
- * @param {ReactNode} props.children - ListEditorItem 组件的实例，表示可编辑的标签项。
- * @param {Function} props.handleAdd - 一个回调函数，当用户点击添加按钮时被触发，用于添加新的标签项。
- * @returns {ReactNode} 渲染一个带有操作按钮和标签项的容器。
+/**
+ * ListEditor 是一个用于管理和展示一组可编辑标签项的容器组件。
+ * 它提供了一个添加新标签项的操作按钮，并通过 children 属性接收一组 ListEditorItem 组件。
+ *
+ * @param {Object} props - 组件接收的属性。
+ * @param {ReactNode} props.children - ListEditorItem 组件的实例，表示可编辑的标签项。
+ * @param {Function} props.handleAdd - 一个回调函数，当用户点击添加按钮时被触发，用于添加新的标签项。
+ * @returns {ReactNode} 渲染一个带有操作按钮和标签项的容器。
  */
 var ListEditor = exports.ListEditor = function ListEditor(_ref) {
   var children = _ref.children,
@@ -47,22 +47,22 @@ var ListEditor = exports.ListEditor = function ListEditor(_ref) {
   }))));
 };
 
-/**
- * ListEditorItem 是一个可编辑的标签项组件，用于在 ListEditor 容器内展示。
- * 它支持拖拽排序，并可以通过左侧和右侧的插槽来自定义内容。
- *
- * @param {Object} props - 组件接收的属性。
- * @param {Object} props.item - 表示标签项数据的对象。
- * @param {ReactNode} props.left - 放置在标签项左侧的内容，通常用于展示标签名称或其他信息。
- * @param {ReactNode} props.right - 放置在标签项右侧的内容，通常用于展示操作按钮如编辑或删除。
- * @param {Function} props.setNodeRef - 用于设置拖拽组件根节点的引用。
- * @param {Function} props.setActivatorNodeRef - 用于设置激活拖拽操作的节点引用。
- * @param {Object} props.style - 应用于标签项的样式对象，通常包含拖拽过程中的动态变化样式。
- * @param {Object} props.attributes - 包含与拖拽相关的HTML属性。
- * @param {Object} props.listeners - 包含处理拖拽事件的监听器。
- * @param {CSSProperties} props.transform - 应用于组件的CSS变换属性，用于实现拖拽效果。
- * @param {string} props.transition - 定义拖拽动画的CSS过渡属性。
- * @returns {ReactNode} 渲染一个可编辑的标签项，支持拖拽排序。
+/**
+ * ListEditorItem 是一个可编辑的标签项组件，用于在 ListEditor 容器内展示。
+ * 它支持拖拽排序，并可以通过左侧和右侧的插槽来自定义内容。
+ *
+ * @param {Object} props - 组件接收的属性。
+ * @param {Object} props.item - 表示标签项数据的对象。
+ * @param {ReactNode} props.left - 放置在标签项左侧的内容，通常用于展示标签名称或其他信息。
+ * @param {ReactNode} props.right - 放置在标签项右侧的内容，通常用于展示操作按钮如编辑或删除。
+ * @param {Function} props.setNodeRef - 用于设置拖拽组件根节点的引用。
+ * @param {Function} props.setActivatorNodeRef - 用于设置激活拖拽操作的节点引用。
+ * @param {Object} props.style - 应用于标签项的样式对象，通常包含拖拽过程中的动态变化样式。
+ * @param {Object} props.attributes - 包含与拖拽相关的HTML属性。
+ * @param {Object} props.listeners - 包含处理拖拽事件的监听器。
+ * @param {CSSProperties} props.transform - 应用于组件的CSS变换属性，用于实现拖拽效果。
+ * @param {string} props.transition - 定义拖拽动画的CSS过渡属性。
+ * @returns {ReactNode} 渲染一个可编辑的标签项，支持拖拽排序。
  */
 var ListEditorItem = exports.ListEditorItem = function ListEditorItem(_ref2) {
   var item = _ref2.item,