@luck-design-biz/luckda 0.0.24-2 → 0.0.25-1

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useCanvasRender;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard3(require("react"));
+var _umi = require("umi");
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _constants = require("../../constants");
+var _excluded = ["props", "children"],
+  _excluded2 = ["id", "component", "name", "desc", "icon", "group", "groupName", "order"];
+function useCanvasRender(data, deps) {
+  var dynamicCompMap = (0, _react.useRef)({});
+  var _useCookieState = (0, _ahooks.useCookieState)(_constants.RUNTIME_COOKIE_KEY),
+    _useCookieState2 = (0, _slicedToArray2.default)(_useCookieState, 1),
+    runtime = _useCookieState2[0];
+  var render = (0, _ahooks.useMemoizedFn)(function (_ref) {
+    var props = _ref.props,
+      children = _ref.children,
+      childrenMap = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    if (props && !_constants.LC_BUILDIN_UNIT_KEY_LIST.includes(props.id)) {
+      var id = props.id,
+        component = props.component,
+        name = props.name,
+        desc = props.desc,
+        icon = props.icon,
+        group = props.group,
+        groupName = props.groupName,
+        order = props.order,
+        rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
+      if (!dynamicCompMap.current[component]) {
+        dynamicCompMap.current[component] = (0, _umi.dynamic)({
+          loader: function () {
+            var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+              var _runtime, _yield$import, _Comp;
+              return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _runtime = (0, _lodash.upperFirst)(runtime);
+                    _context.next = 3;
+                    return function (specifier) {
+                      return new Promise(function (r) {
+                        return r(specifier);
+                      }).then(function (s) {
+                        return (0, _interopRequireWildcard2.default)(require(s));
+                      });
+                    }("../../view/lc-components/".concat(component, "/Function").concat(_runtime));
+                  case 3:
+                    _yield$import = _context.sent;
+                    _Comp = _yield$import.default;
+                    return _context.abrupt("return", _Comp);
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            function loader() {
+              return _loader.apply(this, arguments);
+            }
+            return loader;
+          }()
+        });
+      }
+      var Comp = dynamicCompMap.current[component];
+      return /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+        key: id,
+        id: id
+      }, rest), (children === null || children === void 0 ? void 0 : children.length) > 0 ? children.map(function (_id) {
+        return render(childrenMap[_id]);
+      }) : null);
+    }
+    return (children === null || children === void 0 ? void 0 : children.length) > 0 ? children.map(function (_id) {
+      return render(childrenMap[_id]);
+    }) : null;
+  });
+  return (0, _ahooks.useCreation)(function () {
+    return render(data);
+  }, deps || [data]);
+}

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

@@ -9,14 +9,16 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _ahooks = require("ahooks");
 var usePromiseState = function usePromiseState(initialState) {
-  var _useSafeState = (0, _ahooks.useSafeState)(initialState),
-    _useSafeState2 = (0, _slicedToArray2.default)(_useSafeState, 2),
-    state = _useSafeState2[0],
-    setState = _useSafeState2[1];
+  var _useResetState = (0, _ahooks.useResetState)(initialState),
+    _useResetState2 = (0, _slicedToArray2.default)(_useResetState, 3),
+    state = _useResetState2[0],
+    setState = _useResetState2[1],
+    resetState = _useResetState2[2];
   var promiseRef = (0, _react.useRef)(null);
   var setStatePromise = (0, _react.useCallback)(function (_state) {
     return new Promise(function (resolve) {
       promiseRef.current = resolve;
+      console.log('_state', _state);
       setState(_state);
     });
   }, []);
@@ -26,6 +28,6 @@ var usePromiseState = function usePromiseState(initialState) {
       promiseRef.current = null;
     }
   }, [state]);
-  return [state, setStatePromise];
+  return [state, setStatePromise, resetState];
 };
 var _default = exports.default = usePromiseState;

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

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _lodash = require("lodash");
+var _helper = require("./helper");
+var _apiUrl = require("../../constants/api-url");
+var _excluded = ["datasetCode"];
+var useTodo = function useTodo() {
+  var _useBoolean = (0, _ahooks.useBoolean)(),
+    _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 2),
+    loading = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    setTrue = _useBoolean2$.setTrue,
+    setFalse = _useBoolean2$.setFalse;
+  var callBehavior = (0, _ahooks.useMemoizedFn)(function (_ref, params, data) {
+    var moduleCode = _ref.moduleCode,
+      datasetCode = _ref.datasetCode,
+      behaviorKey = _ref.behaviorKey;
+    return (0, _apiUrl.fetchCallBehavior)((0, _objectSpread2.default)({
+      moduleCode: moduleCode,
+      datasetCode: datasetCode,
+      behaviorKey: behaviorKey
+    }, params), data);
+  });
+  var todo = (0, _ahooks.useMemoizedFn)(function (ctx, actionPool) {
+    var argsMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if ((0, _lodash.isNil)(actionPool)) {
+      return;
+    }
+    var dsCode = argsMap.datasetCode,
+      args = (0, _objectWithoutProperties2.default)(argsMap, _excluded);
+    var argsName = (0, _lodash.keys)(args);
+    var _args = argsName.map(function (n) {
+      return args[n];
+    });
+    if (actionPool.length > 0) {
+      setTrue();
+      var tasks = actionPool.map(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          actionKey = _ref3[0],
+          info = _ref3[1];
+        switch (info.category) {
+          case 'custom':
+            return Promise.resolve(_helper.executeCode.apply(void 0, [ctx, info.code, argsName].concat((0, _toConsumableArray2.default)(_args))));
+          case 'page-action':
+            {
+              var _JSON$parse = JSON.parse(info.code || '{}'),
+                moduleCode = _JSON$parse.moduleCode,
+                datasetCode = _JSON$parse.datasetCode,
+                params = _JSON$parse.params,
+                data = _JSON$parse.data;
+              var _dscode = datasetCode || dsCode;
+              if (!moduleCode || !_dscode) {
+                _antd.message.warning('接口重要参数（模块编码或数据集编码）丢失');
+                return;
+              }
+              return callBehavior({
+                datasetCode: _dscode,
+                moduleCode: moduleCode,
+                behaviorKey: actionKey
+              }, params, data);
+            }
+          case 'trigger':
+            return Promise.resolve();
+          default:
+            break;
+        }
+      });
+      return Promise.all(tasks).finally(setFalse);
+    }
+    return Promise.resolve();
+  });
+  return [todo, callBehavior, loading];
+};
+var _default = exports.default = useTodo;

package/lib/lowcode/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "Painter", {
     return _painter.default;
   }
 });
+Object.defineProperty(exports, "Preview", {
+  enumerable: true,
+  get: function get() {
+    return _preview.default;
+  }
+});
 Object.defineProperty(exports, "View", {
   enumerable: true,
   get: function get() {
@@ -19,6 +25,7 @@ Object.defineProperty(exports, "View", {
 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() {}

package/lib/lowcode/painter/Components.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -13,8 +14,10 @@ var _antd = require("luck-design/antd");
 var _ahooks = require("ahooks");
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
+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 TabPane = _antd.Tabs.TabPane;
 var Search = _antd.Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -36,7 +39,7 @@ var BaseCom = function BaseCom(_ref) {
     }).filter(function (group) {
       return group.components.length > 0;
     });
-  }, [_componentsList.default]);
+  }, [searchTerm]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _components.default['components-search']
   }, /*#__PURE__*/_react.default.createElement(Search, {
@@ -52,30 +55,53 @@ var BaseCom = function BaseCom(_ref) {
       key: group.group,
       className: _components.default['components-wrapper']
     }, /*#__PURE__*/_react.default.createElement("h3", null, group.groupName), group.components.map(function (item) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(CompItem, {
         key: item.component,
-        className: _components.default['components-item'],
-        onClick: function onClick() {
-          return onComponentClick(item);
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _components.default['icon-wrapper']
-      }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-        type: item.icon || 'home'
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: _components.default['text-content']
-      }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
+        item: item,
+        onComponentClick: onComponentClick
+      });
     }));
   })));
 };
+var CompItem = function CompItem(_ref2) {
+  var item = _ref2.item,
+    onComponentClick = _ref2.onComponentClick;
+  // console.log('CompItem', item.component);
+  var _useDraggable = (0, _core.useDraggable)({
+      id: 'comlist-' + item.component,
+      data: {
+        component: item,
+        action: _DragDropContext.Action.ADD
+      }
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    transform = _useDraggable.transform,
+    setNodeRef = _useDraggable.setNodeRef;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setNodeRef
+  }, listeners, attributes, {
+    key: item.component,
+    className: _components.default['components-item'],
+    onClick: function onClick() {
+      return onComponentClick(item);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['icon-wrapper']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: item.icon || 'home'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['text-content']
+  }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
+};
 
 /**
  * 组件清单
  */
-var Components = function Components(_ref2) {
-  var _ref2$dataset = _ref2.dataset,
-    dataset = _ref2$dataset === void 0 ? 'test' : _ref2$dataset;
-  var context = (0, _ContextProvider.useLDContext)();
+var Components = function Components(_ref3) {
+  var _ref3$dataset = _ref3.dataset,
+    dataset = _ref3$dataset === void 0 ? 'test' : _ref3$dataset;
+  var context = (0, _ContextProvider.useContext)();
   var onComponentClick = (0, _ahooks.useMemoizedFn)(function (data) {
     context.$publisher(context.topics.COMPONENT_SETTING_CLICK, {
       data: data
@@ -103,10 +129,10 @@ var Components = function Components(_ref2) {
     onComponentClick: onComponentClick
   })), /*#__PURE__*/_react.default.createElement(TabPane, {
     tab: (0, _utils.formatMessage)({
-      id: 'ccm.dev.page.set.components.dataset',
-      label: '数据集字段'
+      id: 'ccm.dev.page.set.components.custom',
+      label: '自定义组件'
     }),
     key: "dataset"
-  })));
+  }, "\u656C\u8BF7\u671F\u5F85")));
 };
 var _default = exports.default = Components;

package/lib/lowcode/painter/DesignOperator.js

@@ -18,6 +18,7 @@ var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
 var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+  if (!cellNode) return {};
   var _page$getBoundingClie = page.getBoundingClientRect(),
     pageLeft = _page$getBoundingClie.left,
     pageTop = _page$getBoundingClie.top;
@@ -34,7 +35,11 @@ var getOperatorStyle = function getOperatorStyle(page, cellNode) {
 var DesignOperator = function DesignOperator(_ref) {
   var _getDomById, _getDomById2;
   var target = _ref.target;
-  var context = (0, _ContextProvider.useLDContext)();
+  var context = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
   var size = (0, _ahooks.useSize)(target);
   var _useState = (0, _react.useState)((0, _utils.suid)()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -50,7 +55,8 @@ var DesignOperator = function DesignOperator(_ref) {
   var lastSelectorId = (0, _ahooks.useLatest)(operatorId.selector);
   var currentModal = (0, _react.useRef)(null);
   var getDomById = (0, _ahooks.useMemoizedFn)(function (id) {
-    return context.componentMap.get(id).dom;
+    var _context$componentMap;
+    return (_context$componentMap = context.componentMap.get(id)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom();
   });
   var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
@@ -63,23 +69,16 @@ var DesignOperator = function DesignOperator(_ref) {
     } : null);
   });
   var handleDelete = (0, _ahooks.useMemoizedFn)(function (_ref2) {
-    var id = _ref2.id,
-      parentId = _ref2.parentId;
-    context.$publisher(context.topics.COMPONENT_ACTIVE, null);
-    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
-    (0, _dataProcess.deleteById)(cloneData, id);
-    context._setPageData(cloneData).then(function (newData) {
-      context.$publisher(context.topics.COMPONENT_DELETE, {
-        id: id,
-        parentId: parentId,
-        pageData: newData
-      });
+    var id = _ref2.id;
+    context.$publisher(context.topics.COMPONENT_DELETE, {
+      id: id,
+      pageData: pageData
     });
   });
   var addComponent = (0, _ahooks.useMemoizedFn)(function (data, targetId) {
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
     var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
-    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
+    var cloneData = (0, _lodash.cloneDeep)(pageData);
     (0, _dataProcess.add)(cloneData, targetId, _id, json);
     context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
       var mountCompId = _ref3.id;
@@ -88,9 +87,12 @@ var DesignOperator = function DesignOperator(_ref) {
           id: _id,
           pageData: cloneData
         });
+        context.$publisher(context.topics.COMPONENT_ACTIVE, {
+          id: _id
+        });
       }
     }).watch();
-    context._setPageData(cloneData);
+    setPageData(cloneData);
   });
   var acticeProps = (0, _ahooks.useCreation)(function () {
     if (!operatorId.selector) return null;
@@ -121,7 +123,7 @@ var DesignOperator = function DesignOperator(_ref) {
   }, [operatorId.detector]);
   (0, _ahooks.useEventListener)('mousemove', function (event) {
     var elem = event.target;
-    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    var targetCell = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
       setOperatorId({
@@ -151,7 +153,7 @@ var DesignOperator = function DesignOperator(_ref) {
   });
   (0, _ahooks.useEventListener)('click', function (event) {
     var elem = event.target;
-    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    var targetCell = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (!targetCellId || targetCellId === operatorId.selector) return;
     context.$publisher(context.topics.COMPONENT_HOVER, null);
@@ -175,14 +177,14 @@ var DesignOperator = function DesignOperator(_ref) {
             id: compId
           });
         }).watch();
-        addComponent(data, _constants.CELL_KEY.PAGE_ROOT);
+        addComponent(data, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
         return;
       }
       if (!lastSelectorId.current) {
         _antd.message.info('请在右侧画布选择节点');
         return;
       }
-      if (context.componentMap.get(lastSelectorId.current).dom.getAttribute('name') !== 'box') {
+      if (!_constants.CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
         _antd.message.info('该节点不支持添加子节点');
         return;
       }
@@ -197,8 +199,11 @@ var DesignOperator = function DesignOperator(_ref) {
     }).watch();
     var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       if (payload.id) {
+        var _context$componentMap2 = context.componentMap.get(payload.id).api.getSelfAndParentLCData(),
+          node = _context$componentMap2.node;
         setOperatorId({
           selector: payload.id,
+          deletable: node.props.buildIn !== true,
           detector: null
         });
       } else {
@@ -219,16 +224,30 @@ var DesignOperator = function DesignOperator(_ref) {
         currentModal.current = id;
       } else {
         target.current.style.removeProperty('overflow');
-        var _modal2 = context.componentMap.get(id || currentModal.current);
-        _modal2.api.doClose();
-        currentModal.current = void 0;
+        var _id = id || currentModal.current;
+        if (_id) {
+          var _modal2 = context.componentMap.get(_id);
+          _modal2.api.doClose();
+          currentModal.current = void 0;
+        }
       }
     }).watch();
+    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
+      var id = _ref7.id,
+        pageData = _ref7.pageData;
+      if (lastSelectorId.current === id) {
+        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+      }
+      var cloneData = (0, _lodash.cloneDeep)(pageData);
+      (0, _dataProcess.deleteById)(cloneData, id);
+      setPageData(cloneData);
+    });
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
       context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
       context.$unsubscriber(context.topics.MODAL_OPEN, cmtid);
+      context.$unsubscriber(context.topics.COMPONENT_DELETE, cdid);
     };
   }, []);
   (0, _react.useEffect)(function () {
@@ -242,7 +261,7 @@ var DesignOperator = function DesignOperator(_ref) {
   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'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.detector))
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector), 'detector', operatorId.detector)
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _design.default['lc-painter-design-detector-name'],
     style: {
@@ -252,10 +271,10 @@ var DesignOperator = function DesignOperator(_ref) {
     id: "lc-selector",
     key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0, "-").concat(positionKey),
     className: _design.default['lc-painter-design-selector'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.selector))
+    style: getOperatorStyle(target.current, getDomById(operatorId.selector), 'selector', operatorId.selector)
   }, acticeProps && /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-borders-actions'],
-    style: acticeProps.props.id === _constants.CELL_KEY.PAGE_ROOT ? {
+    style: acticeProps.props.id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
       top: 0
     } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
       bottom: '-23px'
@@ -267,7 +286,7 @@ var DesignOperator = function DesignOperator(_ref) {
     placement: "bottomLeft"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "instance-node-selector"
-  }, acticeProps.props.name)), /*#__PURE__*/_react.default.createElement("div", {
+  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/_react.default.createElement("div", {
     onClick: function onClick() {
       return handleDelete(acticeProps.props);
     }

package/lib/lowcode/painter/DesignToolbar.js

@@ -10,14 +10,25 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
+var _JsonEditor = _interopRequireDefault(require("../painter/components/code-editor/JsonEditor"));
 var _constants = require("../constants");
+var _toolbar = require("./services/toolbar");
 var _design = _interopRequireDefault(require("./style/design.less"));
 var DesignToolbar = function DesignToolbar(_ref) {
   var locale = _ref.locale,
     onLangChange = _ref.onLangChange;
-  var context = (0, _ContextProvider.useLDContext)();
+  var editorRef = (0, _react.useRef)();
+  var context = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
+  var _ref2 = (0, _ContextProvider.useRemoteSource)() || {},
+    pageinfo = _ref2.pageinfo;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     langList = _useState2[0],
@@ -26,16 +37,47 @@ var DesignToolbar = function DesignToolbar(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     activedTarget = _useState4[0],
     setActivedTarget = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    show = _useState6[0],
+    setShow = _useState6[1];
   (0, _react.useEffect)(function () {
-    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref2) {
-      var _langList = _ref2.langList;
+    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
+      var _langList = _ref3.langList;
       return setLangList(_langList);
     }).watch();
     return function () {
       return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
     };
   }, []);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  var handleSave = (0, _ahooks.useMemoizedFn)(function () {
+    var _pageinfo$relationshi;
+    (0, _toolbar.updatePageData)({}, {
+      pageData: JSON.stringify(pageData),
+      pageCode: pageinfo === null || pageinfo === void 0 || (_pageinfo$relationshi = pageinfo.relationship) === null || _pageinfo$relationshi === void 0 ? void 0 : _pageinfo$relationshi.pageCode
+    }).then(function (_ref4) {
+      var code = _ref4.code;
+      if (code === 1) {
+        (0, _utils.showPop)((0, _utils.formatMessage)({
+          id: 'app.base.tip.operate.success'
+        }), null, 'success');
+      }
+    });
+  }, []);
+  var handleOk = (0, _ahooks.useMemoizedFn)(function () {
+    var code = editorRef.current.editor.getValue();
+    try {
+      var data = JSON.parse(code);
+      setPageData(data);
+      setShow(false);
+    } catch (e) {
+      _antd.message.warning((0, _utils.formatMessage)({
+        id: 'luckda.lowcode.error.pagedata',
+        label: '页面数据错误'
+      }));
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design-toolbar']
   }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
     size: "small",
@@ -74,7 +116,7 @@ var DesignToolbar = function DesignToolbar(_ref) {
     className: _design.default['toolbar-item'],
     onClick: function onClick() {
       context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: _constants.CELL_KEY.PAGE_ROOT
+        id: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
       });
     }
   }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
@@ -83,17 +125,46 @@ var DesignToolbar = function DesignToolbar(_ref) {
     size: "small",
     style: {
       fontSize: 12,
-      margin: '0 2px'
+      margin: '0 4px 0 2px'
     }
-  }, "\u9884\u89C8"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+  }, "\u9884\u89C8"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
     size: "small",
     type: "primary",
     style: {
       fontSize: 12,
-      margin: '0 0 0 2px'
+      padding: '0 7px 0 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-block',
+      padding: '0 7px'
+    },
+    onClick: handleSave
+  }, "\u4FDD\u5B58"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-block'
+    },
+    onClick: function onClick() {
+      return setShow(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "eye"
+  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    visible: show,
+    width: 1024,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000,
+    bodyStyle: {
+      height: '70vh'
+    },
+    onOk: handleOk,
+    onCancel: function onCancel() {
+      return setShow(false);
     }
-  }, "\u4FDD\u5B58"));
+  }, /*#__PURE__*/_react.default.createElement(_JsonEditor.default, {
+    ref: editorRef
+  }, JSON.stringify(pageData, null, '\t'))));
 };
 var _default = exports.default = DesignToolbar;

package/lib/lowcode/painter/I18n.js

@@ -34,7 +34,7 @@ var formatDataFunc = function formatDataFunc(data) {
   }, {}));
 };
 var I18n = function I18n() {
-  var context = (0, _ContextProvider.useLDContext)();
+  var context = (0, _ContextProvider.useContext)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     langList = _useState2[0],