@luck-design-biz/luckda 1.0.0-alpha → 1.0.1

package/es/lowcode/engine/provider/ContextProvider/router.js

@@ -0,0 +1,43 @@
+import { history } from 'umi';
+import { isNil } from 'lodash';
+export function push(path, params) {
+  var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'push';
+  var blank = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  if (blank) {
+    window.openUrl("new:".concat(path));
+    return;
+  }
+  if (type === 'replace') {
+    window.openUrl(path, {
+      method: 'replace'
+    });
+  } else if (type === 'layer') {
+    window.openUrl("layer:".concat(path), params);
+  } else if (type === 'iframe') {
+    window.openUrl("iframe:".concat(path));
+  } else if (type === 'sso') {
+    window.openUrl("sso:".concat(path));
+  } else {
+    history[type](path, params);
+  }
+}
+export function replace(path, state) {
+  history.replace(path, state);
+}
+export function getQuery(key) {
+  var toSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (toSearch) {
+    return history.location.search;
+  }
+  var query = history.location.query;
+  if (isNil(key)) {
+    return query;
+  }
+  return query[key];
+}
+export function stringifyQuery(params) {
+  return Object.keys(params).map(function (key) {
+    return "".concat(encodeURIComponent(key), "=").concat(encodeURIComponent(params[key]));
+  }).join('&');
+}
+export { history };

package/es/lowcode/engine/{tools → provider/ContextProvider}/usePageDataStore.js

@@ -7,8 +7,8 @@ import { subscribeWithSelector } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
 import { isObject, isArray, isNil, isFunction, isString, get, set as _set, unset, assign, forOwn, forEach, omit, debounce } from 'lodash';
 import isDeepEqual from 'fast-deep-equal';
-import { getPathNodesById, findNodeAndParent } from "./dataProcess";
-import { LC_BUILDIN_UNIT_KEY } from "../../constants";
+import { getPathNodesById, findNodeAndParent } from "../../tools/dataProcess";
+import { LC_BUILDIN_UNIT_KEY } from "../../../constants";
 var temporalStateCreator = function temporalStateCreator(userSet, userGet, options) {
   var stateCreator = function stateCreator(set, get) {
     return {
@@ -184,11 +184,13 @@ export default usePageDataStore;
 usePageDataStore.subscribe(function (state) {
   return state.pageData;
 }, function (_, prev) {
-  if (prev !== null) {
-    usePageDataStore.setState(function (state) {
-      if (state.needPrompt === false) state.needPrompt = true;
-    });
-  }
+  usePageDataStore.setState(function (state) {
+    if (prev === null) {
+      state.needPrompt = false;
+    } else if (state.needPrompt === false) {
+      state.needPrompt = true;
+    }
+  });
 });
 export var resetPageData = function resetPageData(data) {
   usePageDataStore.setState(function (state) {

package/es/lowcode/engine/provider/ContextProvider/usePageVar.js

@@ -1,18 +1,42 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useRef } from 'react';
-import { usePrevious, useGetState, useMemoizedFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { forOwn, isNil, isString, isObject } from 'lodash';
-var usePageVar = function usePageVar(defaultState, defaultGlobal) {
-  var globalRef = useRef(defaultGlobal);
-  var _useGetState = useGetState(defaultState),
-    _useGetState2 = _slicedToArray(_useGetState, 3),
-    state = _useGetState2[0],
-    setState = _useGetState2[1],
-    getState = _useGetState2[2];
-  var prevState = usePrevious(state);
-  var setPageState = useMemoizedFn(function (newState) {
-    setState(_objectSpread(_objectSpread({}, prevState), newState));
+export var useStateStore = create()(immer(subscribeWithSelector(function (set) {
+  return {
+    state: {},
+    initialize: function initialize(init) {
+      return set(function (store) {
+        store.state = init;
+      });
+    },
+    clear: function clear() {
+      return set(function (store) {
+        store.state = {};
+      });
+    }
+  };
+})));
+var usePageVar = function usePageVar() {
+  var globalRef = useRef(null);
+  var state = useStateStore(function (store) {
+    return store.state;
+  });
+  var setState = useMemoizedFn(function (newState) {
+    useStateStore.setState(function (store) {
+      forOwn(newState, function (_val, _key) {
+        if (isNil(_val)) {
+          delete store.state[_key];
+        } else {
+          store.state[_key] = _val;
+        }
+      });
+    });
+  });
+  var getState = useMemoizedFn(function () {
+    return useStateStore.getState().state;
   });
   var setGlobal = useMemoizedFn(function (newGlobal) {
     if (isNil(globalRef.current)) {
@@ -28,8 +52,7 @@ var usePageVar = function usePageVar(defaultState, defaultGlobal) {
   });
   return {
     state: state,
-    prevState: prevState,
-    setState: setPageState,
+    setState: setState,
     getState: getState,
     global: globalRef,
     setGlobal: setGlobal

package/es/lowcode/engine/{tools → provider/ContextProvider}/useTodo.js

@@ -6,9 +6,9 @@ var _excluded = ["datasetCode"];
 import { useBoolean, useMemoizedFn } from 'ahooks';
 import { message } from 'luck-design/antd';
 import { keys, isNil, isFunction } from 'lodash';
-import usePageDataStore from "./usePageDataStore";
-import { executeCode } from "./helper";
-import { fetchCallBehavior } from "../../constants/api-url";
+import { getModuleData } from "./usePageDataStore";
+import { executeCode } from "../../tools/helper";
+import { fetchCallBehavior } from "../../../constants/api-url";
 var useTodo = function useTodo() {
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
@@ -26,9 +26,6 @@ var useTodo = function useTodo() {
       behaviorKey: behaviorKey
     }, params), data);
   });
-  var moduleData = usePageDataStore(function (state) {
-    return state.moduleData;
-  });
   var todo = useMemoizedFn(function (ctx, actionPool) {
     var argsMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     if (isNil(actionPool)) {
@@ -57,6 +54,7 @@ var useTodo = function useTodo() {
                 params = _ref4.params,
                 data = _ref4.data,
                 after = _ref4.after;
+              var moduleData = getModuleData();
               var _moduleCode = moduleCode || moduleData.moduleCode;
               var _dscode = datasetCode || dsCode;
               if (!_moduleCode || !_dscode) {
@@ -83,6 +81,6 @@ var useTodo = function useTodo() {
     }
     return Promise.resolve();
   });
-  return [todo, callBehavior, loading];
+  return [todo, loading];
 };
 export default useTodo;

package/es/lowcode/engine/provider/ContextProvider/utils.js

@@ -0,0 +1,157 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { Modal, message } from 'luck-design/antd';
+import { fetchCallBehavior } from "../../../constants/api-url";
+import { getDvaApp } from 'umi';
+var Formatter = /*#__PURE__*/function () {
+  function Formatter() {
+    _classCallCheck(this, Formatter);
+  }
+  _createClass(Formatter, null, [{
+    key: "formatDate",
+    value:
+    // 格式化日期
+    function formatDate(date, format) {
+      var options = {
+        'Y+': date.getFullYear().toString(),
+        // 年
+        'M+': (date.getMonth() + 1).toString().padStart(2, '0'),
+        // 月
+        'D+': date.getDate().toString().padStart(2, '0'),
+        // 日
+        'H+': date.getHours().toString().padStart(2, '0'),
+        // 时
+        'm+': date.getMinutes().toString().padStart(2, '0'),
+        // 分
+        's+': date.getSeconds().toString().padStart(2, '0') // 秒
+      };
+      for (var k in options) {
+        format = format.replace(new RegExp(k), options[k]);
+      }
+      return format;
+    }
+
+    // 格式化金额
+  }, {
+    key: "formatCurrency",
+    value: function formatCurrency(amount) {
+      var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ',';
+      amount = parseFloat(amount).toFixed(2);
+      var parts = amount.split('.');
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+      return "".concat(parts.join('.'));
+    }
+
+    // 格式化手机号
+  }, {
+    key: "formatPhoneNumber",
+    value: function formatPhoneNumber(phone) {
+      phone = phone.toString();
+      return phone.replace(/(\+?\d{2})(\d{4})(\d{4})(\d{3})/, '$1 $2 $3 $4');
+    }
+
+    // 格式化银行卡号
+  }, {
+    key: "formatCardNumber",
+    value: function formatCardNumber(cardNumber) {
+      cardNumber = cardNumber.toString();
+      return cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
+    }
+  }]);
+  return Formatter;
+}();
+export function dialog() {
+  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'confirm';
+  var props = arguments.length > 1 ? arguments[1] : undefined;
+  if (!['info', 'success', 'error', 'warning', 'confirm'].includes(type)) return;
+  return Modal[type](props);
+}
+export function toast() {
+  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'info';
+  var props = arguments.length > 1 ? arguments[1] : undefined;
+  if (!['info', 'success', 'error', 'warning', 'warn', 'loading'].includes(type)) return;
+  return message[type](props);
+}
+export function callBehavior(_ref, params, data) {
+  var moduleCode = _ref.moduleCode,
+    datasetCode = _ref.datasetCode,
+    behaviorKey = _ref.behaviorKey;
+  return fetchCallBehavior(_objectSpread({
+    moduleCode: moduleCode,
+    datasetCode: datasetCode,
+    behaviorKey: behaviorKey
+  }, params), data);
+}
+export function formatter(type, value, formatOrSeparator) {
+  switch (type) {
+    case 'date':
+      return Formatter.formatDate(value, formatOrSeparator);
+    case 'money':
+      return Formatter.formatCurrency(value, formatOrSeparator);
+    case 'cnmobile':
+      return Formatter.formatPhoneNumber(value);
+    case 'card':
+      return Formatter.formatCardNumber(value);
+    default:
+      throw new Error("Unsupported format type: ".concat(type));
+  }
+}
+export function getDateTimeRange() {
+  var when = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'day';
+  var start = new Date(when);
+  var end = new Date(when);
+  switch (type) {
+    case 'year':
+      start.setMonth(0, 1); // 设置到当年的1月1日
+      start.setHours(0, 0, 0, 0);
+      end.setMonth(11, 31); // 设置到当年的12月31日
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'month':
+      start.setDate(1); // 设置到当月的1日
+      start.setHours(0, 0, 0, 0);
+      end.setMonth(end.getMonth() + 1); // 设置到下月的1日
+      end.setDate(0); // 回到当月的最后一天
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'week':
+      var dayOfWeek = start.getDay(); // 当前日期是本周的第几天
+      var diffToMonday = (dayOfWeek + 6) % 7; // 计算到上一个星期一的天数
+      start.setDate(start.getDate() - diffToMonday); // 设置到本周的星期一
+      start.setHours(0, 0, 0, 0);
+      end.setDate(start.getDate() + 6); // 设置到本周的星期天
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'day':
+    case 'date':
+      // 'day' 和 'date' 是一样的处理方式
+      start.setHours(0, 0, 0, 0);
+      end.setHours(23, 59, 59, 999);
+      break;
+    case 'hour':
+      start.setMinutes(0, 0, 0);
+      end.setMinutes(59, 59, 999);
+      break;
+    case 'minute':
+      start.setSeconds(0, 0);
+      end.setSeconds(59, 999);
+      break;
+    case 'second':
+      start.setMilliseconds(0);
+      end.setMilliseconds(999);
+      break;
+    default:
+      throw new Error("Unsupported range type: ".concat(type));
+  }
+  return [start.getTime(), end.getTime()];
+}
+export function getLoginUser() {
+  var _getDvaApp;
+  return (_getDvaApp = getDvaApp()) === null || _getDvaApp === void 0 ? void 0 : _getDvaApp._store.getState().user.currentUser;
+}
+export function isMobile() {
+  // return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  return USER_RUNTIME === 'MOBILE';
+}

package/es/lowcode/engine/provider/RemoteSourceProvider.js

@@ -9,8 +9,7 @@ import { history } from 'umi';
 import launcher from "../launcher";
 import { LuckDaContext } from "../../../components/Builder";
 import { doAction as doActionUtils } from "../../../helper/action";
-import usePageDataStore from "../tools/usePageDataStore";
-import { useTemporalStore } from "../provider/ContextProvider";
+import usePageDataStore, { useTemporalStore } from "./ContextProvider/usePageDataStore";
 import { decompress } from "../tools/dataProcess";
 import { fetchPageData, fetchDesignModlueData, fetchPreviewModlueData, fetchModlueData, fetchAllDataset, fetchAllSerials, fetchAllBehaviorEx } from "../../constants/api-url";
 import { RUNTIME, LC_RUNTIME_KEY, META_TAG_NAME } from "../../constants";

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

@@ -120,8 +120,13 @@ export function executeCode(context, code, argsName) {
     throw new Error('executeCode参数不匹配');
   }
   var ctx = getCtx(context);
-  var func = _construct(Function, _toConsumableArray(argsName || []).concat(['ctx', 'window', "\"use strict\"; ".concat(getFuncBody(code))]));
-  return func.apply(void 0, args.concat([ctx, _objectSpread(_objectSpread({}, window.proxy), window)]));
+  try {
+    var func = _construct(Function, _toConsumableArray(argsName || []).concat(['ctx', 'window', "\"use strict\"; ".concat(getFuncBody(code))]));
+    return func.apply(void 0, args.concat([ctx, _objectSpread(_objectSpread({}, window.proxy), window)]));
+  } catch (e) {
+    console.error("".concat(code, "\u65E0\u6CD5\u88AB\u6267\u884C"), e);
+    return null;
+  }
 }
 export function parseCSS(cssString) {
   // 创建一个空对象来存储解析后的样式

package/es/lowcode/engine/tools/initDS.js

@@ -0,0 +1,263 @@
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { isNil, reduce, isArray } from 'lodash';
+import { request } from '@luck-design-biz/base/utils';
+import usePageDataStore from "../provider/ContextProvider/usePageDataStore";
+import { useStateStore } from "../provider/ContextProvider/usePageVar";
+import { executeCode } from "./helper";
+var parseVar = function parseVar(ctx, input) {
+  if (isNil(input)) {
+    return null;
+  }
+  try {
+    return executeCode(ctx, "function() {return ".concat(input, "}"));
+  } catch (err) {
+    return input;
+  }
+};
+var Task = /*#__PURE__*/function () {
+  function Task(ctx, props) {
+    _classCallCheck(this, Task);
+    this.ctx = ctx;
+    this.name = props.name;
+    this.props = props;
+  }
+  _createClass(Task, [{
+    key: "run",
+    value: function () {
+      var _run = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_params, _data) {
+        var _this = this;
+        var _this$props, willFetch, didFetch, onError, _this$props$data, url, params, body, method, defaultValue, vars, config;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = this.props, willFetch = _this$props.willFetch, didFetch = _this$props.didFetch, onError = _this$props.onError;
+              _this$props$data = this.props.data, url = _this$props$data.url, params = _this$props$data.params, body = _this$props$data.body, method = _this$props$data.method, defaultValue = _this$props$data.defaultValue;
+              vars = {
+                params: isNil(params) || params === '' ? {} : parseVar(this.ctx, params),
+                data: isNil(body) || body === '' ? {} : parseVar(this.ctx, body)
+              };
+              config = {
+                headers: {}
+              };
+              if (willFetch) {
+                executeCode(this.ctx, willFetch, ['vars', 'config'], vars, config);
+              }
+              return _context.abrupt("return", request(parseVar(this.ctx, url), _objectSpread({
+                params: _objectSpread(_objectSpread({}, vars.params), _params),
+                data: _objectSpread(_objectSpread({}, vars.data), _data),
+                method: parseVar(this.ctx, method)
+              }, config)).then(function (res) {
+                if (res.code === 1) {
+                  var list = res.list,
+                    detail = res.detail;
+                  var content;
+                  if (list.length === 1) {
+                    content = detail[list[0]];
+                  } else {
+                    content = list.map(function (_id) {
+                      return detail[_id];
+                    });
+                  }
+                  if (didFetch) {
+                    return executeCode(_this.ctx, didFetch, ['content', 'origin'], content, res);
+                  }
+                  return content;
+                } else if (onError) {
+                  executeCode(_this.ctx, onError, ['error'], res);
+                }
+                if (defaultValue) {
+                  return parseVar(_this.ctx, defaultValue);
+                }
+              }));
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function run(_x, _x2) {
+        return _run.apply(this, arguments);
+      }
+      return run;
+    }()
+  }, {
+    key: "load",
+    value: function () {
+      var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(params, data) {
+        var _this2 = this;
+        var content;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return this.run(params, data);
+            case 2:
+              content = _context2.sent;
+              useStateStore.setState(function (store) {
+                store.state[_this2.name] = content;
+              });
+              return _context2.abrupt("return", content);
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function load(_x3, _x4) {
+        return _load.apply(this, arguments);
+      }
+      return load;
+    }()
+  }]);
+  return Task;
+}();
+var wrapPromise = function wrapPromise(promise) {
+  var cache = {
+    status: 'pending',
+    data: null
+  };
+  var suspender = promise.then(function (r) {
+    cache.status = 'fulfilled';
+    cache.data = r;
+  }, function (e) {
+    cache.status = 'rejected';
+    cache.data = e;
+  });
+  return {
+    read: function read() {
+      if (cache.status === 'pending') {
+        throw suspender;
+      } else if (cache.status === 'rejected') {
+        throw cache.data;
+      } else if (cache.status === 'fulfilled') {
+        return cache.data;
+      }
+    }
+  };
+};
+export default function initialize(ctx) {
+  var pageVars = usePageDataStore.getState().pageData.props.vars;
+  if (isNil(pageVars)) return null;
+  var remoteApis = new Map();
+  var _reduce = reduce(pageVars, function (ret, val) {
+      if (val.type === 'var') {
+        ret[0][val.name] = parseVar(ctx, val.data);
+      } else if (val.type === 'api') {
+        var _val$data = val.data,
+          auto = _val$data.auto,
+          taskType = _val$data.taskType;
+        var task = new Task(ctx, val);
+        remoteApis.set(val.name, task);
+        if (!auto) return ret;
+        if (taskType === 'serial') {
+          ret.push(task);
+        } else if (taskType === 'parallel') {
+          var lastIndex = ret.length - 1;
+          if (lastIndex > 0 && isArray(ret[lastIndex])) {
+            ret[lastIndex].push(task);
+          } else {
+            ret.push([task]);
+          }
+        }
+      }
+      return ret;
+    }, [{}]),
+    _reduce2 = _toArray(_reduce),
+    variables = _reduce2[0],
+    autoTasks = _reduce2.slice(1);
+  useStateStore.getState().initialize(variables);
+  ctx._initRemoteApiMap(remoteApis);
+  function run() {
+    return _run2.apply(this, arguments);
+  }
+  function _run2() {
+    _run2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var result, _loop, i;
+      return _regeneratorRuntime().wrap(function _callee3$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            result = {};
+            _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop(i) {
+              var contents, _loop2, j, content;
+              return _regeneratorRuntime().wrap(function _loop$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (!isArray(autoTasks[i])) {
+                      _context4.next = 13;
+                      break;
+                    }
+                    _context4.next = 3;
+                    return Promise.all(autoTasks[i].map(function (t) {
+                      return t.run();
+                    }));
+                  case 3:
+                    contents = _context4.sent;
+                    _loop2 = /*#__PURE__*/_regeneratorRuntime().mark(function _loop2(j) {
+                      return _regeneratorRuntime().wrap(function _loop2$(_context3) {
+                        while (1) switch (_context3.prev = _context3.next) {
+                          case 0:
+                            useStateStore.setState(function (store) {
+                              store.state[autoTasks[i][j].name] = contents[j];
+                            });
+                          case 1:
+                          case "end":
+                            return _context3.stop();
+                        }
+                      }, _loop2);
+                    });
+                    _context4.t0 = _regeneratorRuntime().keys(autoTasks[i]);
+                  case 6:
+                    if ((_context4.t1 = _context4.t0()).done) {
+                      _context4.next = 11;
+                      break;
+                    }
+                    j = _context4.t1.value;
+                    return _context4.delegateYield(_loop2(j), "t2", 9);
+                  case 9:
+                    _context4.next = 6;
+                    break;
+                  case 11:
+                    _context4.next = 17;
+                    break;
+                  case 13:
+                    _context4.next = 15;
+                    return autoTasks[i].run();
+                  case 15:
+                    content = _context4.sent;
+                    useStateStore.setState(function (store) {
+                      store.state[autoTasks[i].name] = content;
+                    });
+                  case 17:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _loop);
+            });
+            _context5.t0 = _regeneratorRuntime().keys(autoTasks);
+          case 3:
+            if ((_context5.t1 = _context5.t0()).done) {
+              _context5.next = 8;
+              break;
+            }
+            i = _context5.t1.value;
+            return _context5.delegateYield(_loop(i), "t2", 6);
+          case 6:
+            _context5.next = 3;
+            break;
+          case 8:
+            return _context5.abrupt("return", result);
+          case 9:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee3);
+    }));
+    return _run2.apply(this, arguments);
+  }
+  return wrapPromise(run());
+}

package/es/lowcode/engine/tools/useCombinedRefs.js

@@ -1,7 +1,8 @@
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
+import { useCreation } from 'ahooks';
 var useCombinedRefs = function useCombinedRefs(forwardedRef) {
   var innerRef = useRef(null);
-  useEffect(function () {
+  useCreation(function () {
     if (!forwardedRef) return;
     if (typeof forwardedRef === 'function') {
       forwardedRef(innerRef.current);

package/es/lowcode/painter/DesignOperator.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useEffect, useState } from 'react';
 import { last, initial } from 'lodash';
-import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest } from 'ahooks';
+import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest, useKeyPress } from 'ahooks';
 import { Icon, Dropdown, message } from 'luck-design/antd';
 import { reverse, isString, isNil } from 'lodash';
 import { suid } from '@luck-design-biz/base/utils';
@@ -114,6 +114,15 @@ var DesignOperator = function DesignOperator(_ref) {
     var _last;
     return operatorId.detector && isString(operatorId.detector) ? (_last = last(context.componentMap.get(operatorId.detector).api.getLevelNodes())) === null || _last === void 0 ? void 0 : _last.name : void 0;
   }, [operatorId.detector]);
+  useKeyPress('backspace', function () {
+    if (operatorId.selector && operatorId.deletable) {
+      handleDelete({
+        id: operatorId.selector
+      });
+    }
+  }, {
+    target: canvas
+  });
   useEventListener('mousemove', function (event) {
     var elem = event.target;
     var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));

package/es/lowcode/painter/Panel.js

@@ -190,9 +190,9 @@ var Panel = function Panel() {
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles.headerList
   }, reduce(_TAB_LIST_, function (ret, item) {
-    if (item.key === 'css' && !!(meta !== null && meta !== void 0 && meta.css)) {
+    if (item.key === 'css' && !isNil(meta === null || meta === void 0 ? void 0 : meta.css)) {
       ret.push(item);
-    } else if (item.key === 'advance' && !!(meta !== null && meta !== void 0 && meta.advance)) {
+    } else if (item.key === 'advance' && !isNil(meta === null || meta === void 0 ? void 0 : meta.advance)) {
       ret.push(item);
     } else if (item.key === 'attrs') {
       ret.push(item);