@luck-design-biz/luckda 1.0.1 → 1.0.2-10

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.executeCode = executeCode;
 exports.extractKeywords = extractKeywords;
+exports.findFirstLeafNode = findFirstLeafNode;
 exports.getCtx = getCtx;
 exports.getFuncBody = getFuncBody;
 exports.getLDMetaAttr = getLDMetaAttr;
@@ -260,4 +261,25 @@ function loadScript(path) {
     ref: script,
     status: script.getAttribute('data-status') || 'ready'
   };
+}
+function findFirstLeafNode(node) {
+  if (!node.children || node.children.length === 0) {
+    return node;
+  }
+  var _iterator2 = (0, _createForOfIteratorHelper2.default)(node.children),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var child = _step2.value;
+      var leaf = findFirstLeafNode(child);
+      if (leaf) {
+        return leaf;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return null;
 }

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

@@ -14,6 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard3(require("react"));
 var _umi = require("umi");
 var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _ContextProvider = require("../provider/ContextProvider");
 var _constants = require("../../constants");
@@ -70,7 +71,18 @@ function useCanvasRender(data, deps) {
               return _loader.apply(this, arguments);
             }
             return loader;
-          }()
+          }(),
+          loading: function loading() {
+            return /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+              active: true,
+              title: {
+                width: '70%'
+              },
+              paragraph: {
+                rows: 7
+              }
+            });
+          }
         });
       }
       var renderable = true;

package/lib/lowcode/painter/Components.js

@@ -18,6 +18,7 @@ var _core = require("@dnd-kit/core");
 var _components = _interopRequireDefault(require("./style/components.less"));
 var _componentsList = _interopRequireDefault(require("../engine/meta/components-list.json"));
 var _DragDropContext = require("./components/DragDrop/DragDropContext");
+var _expect = _interopRequireDefault(require("./expect"));
 var TabPane = _antd.Tabs.TabPane;
 var Search = _antd.Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -95,8 +96,8 @@ var CompItem = function CompItem(_ref2) {
   }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
 };
 
-/**
- * 组件清单
+/**
+ * 组件清单
  */
 var Components = function Components(_ref3) {
   var _ref3$dataset = _ref3.dataset,
@@ -133,6 +134,10 @@ var Components = function Components(_ref3) {
       label: '自定义组件'
     }),
     key: "dataset"
-  }, "\u656C\u8BF7\u671F\u5F85")));
+  }, /*#__PURE__*/_react.default.createElement(_expect.default, {
+    style: {
+      paddingTop: '80px'
+    }
+  }))));
 };
 var _default = exports.default = Components;

package/lib/lowcode/painter/Design.js

@@ -76,6 +76,7 @@ var Design = function Design() {
     locale: locale,
     onLangChange: handleLangChange
   }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "design-workspace",
     className: _design.default['lc-painter-design-workspace']
   }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
     canvas: simulatorRef

package/lib/lowcode/painter/DesignOperator.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
 var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
 var _constants = require("../constants");
@@ -32,7 +33,7 @@ var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
   };
 };
 var DesignOperator = function DesignOperator(_ref) {
-  var _getElement, _getElement2;
+  var _getElement2;
   var canvas = _ref.canvas;
   var context = (0, _ContextProvider.useContext)();
   var size = (0, _ahooks.useSize)(canvas);
@@ -76,7 +77,9 @@ var DesignOperator = function DesignOperator(_ref) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id
         });
-        handleSelect(_id);
+        setTimeout(function () {
+          handleSelect(_id);
+        });
       }
     }).watch();
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
@@ -117,6 +120,15 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
+  var activeDomPosition = (0, _ahooks.useCreation)(function () {
+    var _getElement, _canvas$current;
+    if (!operatorId.selector && !operatorId.selectorTarget) return null;
+    var targetTop = (_getElement = getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement === void 0 ? void 0 : _getElement.getBoundingClientRect().top;
+    var delat = targetTop - (((_canvas$current = canvas.current) === null || _canvas$current === void 0 ? void 0 : _canvas$current.getBoundingClientRect().top) || 0);
+    return {
+      top: delat > 24 ? -24 : 0
+    };
+  }, [operatorId.selector, operatorId.selectorTarget]);
   var lastDetectorName = (0, _ahooks.useCreation)(function () {
     var _last;
     return operatorId.detector && (0, _lodash.isString)(operatorId.detector) ? (_last = (0, _lodash.last)(context.componentMap.get(operatorId.detector).api.getLevelNodes())) === null || _last === void 0 ? void 0 : _last.name : void 0;
@@ -130,6 +142,10 @@ var DesignOperator = function DesignOperator(_ref) {
   }, {
     target: canvas
   });
+  (0, _ahooks.useKeyPress)('ctrl.s', function (e) {
+    e.preventDefault();
+    context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+  });
   (0, _ahooks.useEventListener)('mousemove', function (event) {
     var elem = event.target;
     var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_FORMITEM_UNIT, "\"]"));
@@ -218,9 +234,11 @@ var DesignOperator = function DesignOperator(_ref) {
     }).watch();
     var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
       if (payload.target) setOperatorId({
-        detector: payload.target
+        detector: payload.target,
+        detectorSide: payload.side
       });else setOperatorId({
-        detector: null
+        detector: null,
+        detectorSide: null
       });
     }).watch();
     var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
@@ -231,14 +249,16 @@ var DesignOperator = function DesignOperator(_ref) {
             selector: payload.target,
             selectorTarget: null,
             deletable: !node || node.props.buildIn !== true,
-            detector: null
+            detector: null,
+            detectorSide: null
           });
         } else {
           setOperatorId({
             selector: payload.target.id,
             selectorTarget: payload.target,
             deletable: false,
-            detector: null
+            detector: null,
+            detectorSide: null
           });
         }
       } else {
@@ -259,7 +279,8 @@ var DesignOperator = function DesignOperator(_ref) {
         _modal.api.doOpen();
         currentModal.current = id;
       } else if (!toggle) {
-        canvas.current.style.removeProperty('overflow');
+        var _canvas$current2;
+        (_canvas$current2 = canvas.current) === null || _canvas$current2 === void 0 || _canvas$current2.style.removeProperty('overflow');
         var _id = id || currentModal.current;
         if (_id) {
           var _modal2 = context.componentMap.get(_id);
@@ -293,12 +314,12 @@ var DesignOperator = function DesignOperator(_ref) {
   }, [operatorId.selector]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, operatorId.detector && /*#__PURE__*/_react.default.createElement("div", {
     id: "lc-detector",
-    className: _design.default['lc-painter-design-detector'],
+    className: (0, _classnames.default)(_design.default['lc-painter-design-detector'], _design.default["sider-".concat(operatorId.detectorSide)]),
     style: getOperatorStyle(canvas.current, getElement(operatorId.detector))
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _design.default['lc-painter-design-detector-name'],
     style: {
-      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
+      top: ((_getElement2 = getElement(operatorId.detector)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? 0 : '-23px'
     }
   }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
     id: "lc-selector",
@@ -307,13 +328,7 @@ var DesignOperator = function DesignOperator(_ref) {
     style: getOperatorStyle(canvas.current, getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element))
   }, acticeProps && /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-borders-actions'],
-    style: acticeProps.props.id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
-      top: 0
-    } : ((_getElement2 = getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? {
-      bottom: '-23px'
-    } : {
-      top: '-23px'
-    }
+    style: activeDomPosition
   }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
     overlay: acticeProps.menu,
     placement: "bottomLeft"

package/lib/lowcode/painter/DesignToolbar.js

@@ -26,7 +26,20 @@ var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var _apiUrl = require("../constants/api-url");
 var _helper = require("../engine/tools/helper");
+var _TipIcon = _interopRequireDefault(require("./components/TipIcon"));
 var _excluded = ["key", "label"];
+var CodeSvg = function CodeSvg() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.4749 9.0916L5.45264 6.20703L5.45439 5.93457V4.69707L0.91748 9.0916L5.45439 13.4844V12.2469L5.45264 11.9744L2.4749 9.0916ZM15.2067 9.00723L12.229 6.12441L12.2272 5.85195V4.61445L16.7642 9.00723L12.2272 13.4018V12.1625L12.229 11.89L15.2067 9.00723ZM8.12451 15.0295H6.76045L9.55713 2.80566H10.9212L8.12451 15.0295Z",
+    fill: "currentColor"
+  }));
+};
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
@@ -81,20 +94,6 @@ var DesignToolbar = function DesignToolbar(_ref) {
     }),
     updatePageDataLoading = _useRequest2.loading,
     runAsync = _useRequest2.runAsync;
-  (0, _react.useEffect)(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
-      var _langList = _ref2.langList;
-      return setLangList(_langList);
-    }).watch();
-    return function () {
-      return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (!showPreview) {
-      setUserId(void 0);
-    }
-  }, [showPreview]);
   var handleSave = (0, _ahooks.useMemoizedFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
     var _yield$runAsync, code;
     return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
@@ -139,6 +138,23 @@ var DesignToolbar = function DesignToolbar(_ref) {
       }
     }, _callee);
   })), []);
+  (0, _react.useEffect)(function () {
+    var lssid = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
+      var _langList = _ref3.langList;
+      setLangList(_langList);
+      console.log(11111, _langList);
+    }).watch();
+    var dasid = context.$subscriber(context.topics.DESIGN_OPERATE_SAVE).on(handleSave).watch();
+    return function () {
+      context.$unsubscriber(context.topics.LANG_SETTING_SELECT, lssid);
+      context.$unsubscriber(context.topics.DESIGN_OPERATE_SAVE, dasid);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!showPreview) {
+      setUserId(void 0);
+    }
+  }, [showPreview]);
   var handleClearCache = (0, _ahooks.useMemoizedFn)(function () {
     _antd.Modal.confirm({
       title: (0, _utils.formatMessage)({
@@ -233,9 +249,16 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "laptop"
   })), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile')),
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile'))
+    // onClick={() => setActivedTarget('mobile')}
+    ,
     onClick: function onClick() {
-      return setActivedTarget('mobile');
+      _antd.Modal.info({
+        title: (0, _utils.formatMessage)({
+          id: 'luckda.lowcode.not.mobile',
+          label: '此功能暂未开放'
+        })
+      });
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "mobile"
@@ -273,9 +296,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     style: {
       width: 'auto',
-      fontSize: 12
+      fontSize: 12,
+      cursor: 'pointer'
     },
-    className: _design.default['toolbar-item'],
+    className: _design.default.hoverPrimary,
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
         target: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
@@ -289,7 +313,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: "small",
     style: {
-      fontSize: 12,
+      fontSize: 14,
       margin: '0 4px 0 2px'
     },
     disabled: clearCacheLoading,
@@ -297,65 +321,71 @@ var DesignToolbar = function DesignToolbar(_ref) {
   }, (0, _utils.formatMessage)({
     id: 'luckda.lowcode.design.toolbar.clear',
     label: '清除缓存'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
+  })), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.debug',
+      label: '调试'
+    }),
+    type: "bug",
     style: {
       fontSize: 12,
-      margin: '0 4px 0 2px'
+      margin: '0 8px 0 6px'
     },
-    disabled: updatePageDataLoading,
+    className: _design.default.hoverPrimary,
     onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
       return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            if (!(0, _ContextProvider.getNeedPrompt)()) {
-              _context3.next = 3;
-              break;
+            if (!updatePageDataLoading) {
+              if ((0, _ContextProvider.getNeedPrompt)()) {
+                context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+              }
+              context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+              setShowPreview(true);
             }
-            _context3.next = 3;
-            return handleSave();
-          case 3:
-            context.$publisher(context.topics.COMPONENT_ACTIVE, null);
-            setShowPreview(true);
-          case 5:
+          case 1:
           case "end":
             return _context3.stop();
         }
       }, _callee3);
     }))
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.preview',
-    label: '预览'
-  }), /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "bug"
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    type: "primary",
-    disabled: updatePageDataLoading,
-    style: {
-      fontSize: 12,
-      padding: '0 7px 0 0',
-      marginLeft: 2
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.code',
+      label: 'Schema面板'
+    }),
+    component: CodeSvg,
+    className: _design.default.hoverPrimary,
     style: {
-      display: 'inline-block',
-      padding: '0 7px'
+      fontSize: 14,
+      margin: '0 8px 0 6px'
     },
-    onClick: handleSave
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.save',
-    label: '保存'
-  })), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            if (!updatePageDataLoading) setShow(true);
+          case 1:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }))
+  }), /*#__PURE__*/_react.default.createElement(_TipIcon.default, {
+    title: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.design.toolbar.save',
+      label: '保存'
+    }),
+    type: "save",
+    className: _design.default.hoverPrimary,
     style: {
-      display: 'inline-block'
+      fontSize: 14,
+      margin: '0 11px 0 5px'
     },
     onClick: function onClick() {
-      return setShow(true);
+      return context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
     }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "eye"
-  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     visible: show,
     width: 1024,
     getContainer: function getContainer() {
@@ -409,10 +439,10 @@ var DesignToolbar = function DesignToolbar(_ref) {
           setUserId(void 0);
         }
       }
-    }, userOptions.map(function (_ref6) {
-      var key = _ref6.key,
-        label = _ref6.label,
-        rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+    }, userOptions.map(function (_ref7) {
+      var key = _ref7.key,
+        label = _ref7.label,
+        rest = (0, _objectWithoutProperties2.default)(_ref7, _excluded);
       return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, (0, _extends2.default)({
         key: key,
         value: key
@@ -426,7 +456,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     },
     bodyStyle: {
       height: 'calc(100% - 54px)',
-      backgroundColor: '#F0F2F5'
+      backgroundColor: 'var(--ant-component-background,#F0F2F5)'
     },
     visible: showPreview,
     destroyOnClose: true,