@luck-design-biz/luckda 0.0.25-9 → 0.0.26-1

package/lib/lowcode/painter/DesignOperator.js

@@ -1,321 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _lodash = require("lodash");
-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 _constants = require("../constants");
-var _design = _interopRequireDefault(require("./style/design.less"));
-var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
-var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
-  if (!cellNode) return {};
-  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-    pageLeft = _canvas$getBoundingCl.left,
-    pageTop = _canvas$getBoundingCl.top;
-  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
-    cellNodeLeft = _cellNode$getBounding.left,
-    cellNodeTop = _cellNode$getBounding.top;
-  return {
-    left: "".concat(cellNodeLeft - pageLeft, "px"),
-    top: "".concat(cellNode.offsetTop, "px"),
-    width: "".concat(cellNode.offsetWidth, "px"),
-    height: "".concat(cellNode.offsetHeight, "px")
-  };
-};
-var DesignOperator = function DesignOperator(_ref) {
-  var _getElement, _getElement2;
-  var canvas = _ref.canvas;
-  var context = (0, _ContextProvider.useContext)();
-  var size = (0, _ahooks.useSize)(canvas);
-  var _useState = (0, _react.useState)((0, _utils.suid)()),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    positionKey = _useState2[0],
-    setPositionKey = _useState2[1];
-  var _useSetState = (0, _ahooks.useSetState)({
-      selector: null,
-      detector: null
-    }),
-    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
-    operatorId = _useSetState2[0],
-    setOperatorId = _useSetState2[1];
-  var lastSelectorId = (0, _ahooks.useLatest)(operatorId.selector);
-  var currentModal = (0, _react.useRef)(null);
-  var getElement = (0, _ahooks.useMemoizedFn)(function (_target) {
-    var _context$componentMap;
-    return (0, _lodash.isString)(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
-  });
-  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_target) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _target ? {
-      target: _target
-    } : null);
-  });
-  var handleHover = (0, _ahooks.useMemoizedFn)(function (_target) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _target ? {
-      target: _target
-    } : null);
-  });
-  var handleDelete = (0, _ahooks.useMemoizedFn)(function (_ref2) {
-    var id = _ref2.id;
-    context.$publisher(context.topics.COMPONENT_DELETE, {
-      id: id
-    });
-  });
-  var addComponent = (0, _ahooks.useMemoizedFn)(function (data, targetId) {
-    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
-      var mountCompId = _ref3.id;
-      if (mountCompId === _id) {
-        context.$publisher(context.topics.COMPONENT_APPEND, {
-          id: _id
-        });
-        handleSelect(_id);
-      }
-    }).watch();
-    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-    var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
-    (0, _ContextProvider.addNode)(targetId, _id, json);
-  });
-  var acticeProps = (0, _ahooks.useCreation)(function () {
-    if (!operatorId.selector) return null;
-    var _id = (0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.ancestorId;
-    var levelNodes = context.componentMap.get(_id).api.getLevelNodes();
-    if (operatorId.selectorTarget) {
-      var _operatorId$selectorT = operatorId.selectorTarget,
-        id = _operatorId$selectorT.id,
-        label = _operatorId$selectorT.label;
-      levelNodes.push({
-        id: id,
-        name: label
-      });
-    }
-    return {
-      props: (0, _lodash.last)(levelNodes),
-      menu: /*#__PURE__*/_react.default.createElement("div", {
-        className: _design.default['next-overlay-wrapper'],
-        onMouseLeave: function onMouseLeave() {
-          return handleHover();
-        }
-      }, (0, _lodash.reverse)((0, _lodash.initial)(levelNodes)).map(function (m) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: m.id
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          onClick: function onClick() {
-            return handleSelect(m.id);
-          },
-          onMouseOver: function onMouseOver() {
-            return handleHover(m.id);
-          }
-        }, m.name));
-      }))
-    };
-  }, [operatorId.selector]);
-  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;
-  }, [operatorId.detector]);
-  (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, "\"]"));
-    if (targetFormItem) {
-      handleHover(targetFormItem);
-      return;
-    }
-    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) {
-      handleHover(targetCellId);
-    } else if (!targetCell || targetCellId === operatorId.selector) {
-      handleHover();
-    }
-  }, {
-    target: canvas
-  });
-  (0, _ahooks.useEventListener)('mouseleave', function () {
-    if (operatorId.detector) {
-      handleHover();
-    }
-  }, {
-    target: canvas
-  });
-  (0, _ahooks.useEventListener)('click', function (event) {
-    var elem = event.target;
-    var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_FORMITEM_UNIT, "\"]"));
-    if (targetFormItem) {
-      var _fieldName = targetFormItem.getAttribute('data-__field');
-      var _fieldLabel = targetFormItem.getAttribute('data-__label');
-      var _masterId = targetFormItem.getAttribute('data-__master');
-      var _ancestorId = targetFormItem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]")).getAttribute('id');
-      var _ancestor = context.componentMap.get(_ancestorId);
-      var ancestorData = _ancestor.api.getSelfData();
-      var blockIndex = ancestorData.props.blocks.findIndex(function (b) {
-        return b.id === _masterId;
-      });
-      var fieldIndex = ancestorData.props.blocks[blockIndex].fields.findIndex(function (f) {
-        return f.field === _fieldName;
-      });
-      var _target = {
-        element: targetFormItem,
-        id: "".concat(_ancestorId, ".").concat(_masterId, ".").concat(_fieldName),
-        field: _fieldName,
-        label: _fieldLabel,
-        masterId: _masterId,
-        ancestorId: _ancestorId,
-        keyPath: "blocks[".concat(blockIndex, "].fields[").concat(fieldIndex, "]")
-      };
-      handleHover();
-      handleSelect(_target);
-      return;
-    }
-    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;
-    handleHover();
-    handleSelect(targetCell.id);
-  }, {
-    target: canvas
-  });
-  (0, _react.useEffect)(function () {
-    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
-      var data = _ref4.data;
-      if (_MODAL_COMPONENT_.includes(data.component)) {
-        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
-          var compId = _ref5.id;
-          context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
-            toggle: true,
-            id: compId
-          });
-          handleSelect(compId);
-        }).watch();
-        addComponent(data, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
-        return;
-      }
-      if (!lastSelectorId.current) {
-        _antd.message.info('请在右侧画布选择节点');
-        return;
-      }
-      if (!_constants.CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
-        _antd.message.info('该节点不支持添加子节点');
-        return;
-      }
-      addComponent(data, lastSelectorId.current);
-    }).watch();
-    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.target) setOperatorId({
-        detector: payload.target
-      });else setOperatorId({
-        detector: null
-      });
-    }).watch();
-    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (payload.target) {
-        if ((0, _lodash.isString)(payload.target)) {
-          var node = context.componentMap.get(payload.target).api.getSelfData();
-          setOperatorId({
-            selector: payload.target,
-            selectorTarget: null,
-            deletable: !node || node.props.buildIn !== true,
-            detector: null
-          });
-        } else {
-          setOperatorId({
-            selector: payload.target.id,
-            selectorTarget: payload.target,
-            deletable: false,
-            detector: null
-          });
-        }
-      } else {
-        setOperatorId({
-          selector: null,
-          selectorTarget: null
-        });
-      }
-    }).watch();
-    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
-      var toggle = _ref6.toggle,
-        id = _ref6.id;
-      if (toggle && id !== currentModal.current) {
-        canvas.current.style.setProperty('overflow', 'hidden');
-        var _modal = context.componentMap.get(id);
-        var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
-        _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
-        _modal.api.doOpen();
-        currentModal.current = id;
-      } else if (!toggle) {
-        canvas.current.style.removeProperty('overflow');
-        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;
-      if (lastSelectorId.current === id) {
-        handleSelect();
-      }
-      (0, _ContextProvider.deleteNode)(id);
-    });
-    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 () {
-    var crid = context.$subscriber(context.topics.COMPONENT_REPOSITIONING).on(function (payload) {
-      if (payload.id === operatorId.selector) setPositionKey((0, _utils.suid)());
-    }).watch();
-    return function () {
-      context.$unsubscriber(context.topics.COMPONENT_REPOSITIONING, crid);
-    };
-  }, [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'],
-    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'
-    }
-  }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
-    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(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'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
-    overlay: acticeProps.menu,
-    placement: "bottomLeft"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "instance-node-selector"
-  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/_react.default.createElement("div", {
-    onClick: function onClick() {
-      return handleDelete(acticeProps.props);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "delete"
-  })))));
-};
-var _default = exports.default = DesignOperator;

package/lib/lowcode/painter/DesignToolbar.js

@@ -1,370 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _umi = require("umi");
-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 _preview = _interopRequireDefault(require("../preview"));
-var _constants = require("../constants");
-var _design = _interopRequireDefault(require("./style/design.less"));
-var _apiUrl = require("../constants/api-url");
-var _helper = require("../engine/tools/helper");
-var _services = require("@luck-design-biz/base/lib/sys/services");
-var _excluded = ["key", "label"];
-var DesignToolbar = function DesignToolbar(_ref) {
-  var locale = _ref.locale,
-    onLangChange = _ref.onLangChange;
-  var location = (0, _umi.useLocation)();
-  var editorRef = (0, _react.useRef)();
-  var context = (0, _ContextProvider.useContext)();
-  var pageData = (0, _ContextProvider.useGet)();
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    langList = _useState2[0],
-    setLangList = _useState2[1];
-  var _useState3 = (0, _react.useState)('pc'),
-    _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];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    showPreview = _useState8[0],
-    setShowPreview = _useState8[1];
-  var _useState9 = (0, _react.useState)([]),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    userOptions = _useState10[0],
-    setUserOptions = _useState10[1];
-  var _useCookieState = (0, _ahooks.useCookieState)(_constants.COOKIE_VIRTUAL_ACCOUNT_KEY),
-    _useCookieState2 = (0, _slicedToArray2.default)(_useCookieState, 2),
-    userId = _useCookieState2[0],
-    setUserId = _useCookieState2[1];
-  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchClearCache, {
-      manual: true
-    }),
-    clearCacheLoading = _useRequest.loading,
-    runClearCache = _useRequest.run;
-  var _useRequest2 = (0, _ahooks.useRequest)(_apiUrl.fetchUpdatePageData, {
-      manual: true,
-      debounceWait: 300
-    }),
-    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) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return runAsync({
-            pageData: JSON.stringify(pageData),
-            pageCode: (0, _helper.getLDMetaAttr)('pageCode')
-          });
-        case 2:
-          _yield$runAsync = _context.sent;
-          code = _yield$runAsync.code;
-          if (code === 1) {
-            (0, _utils.showPop)((0, _utils.formatMessage)({
-              id: 'app.base.tip.operate.success'
-            }), null, 'success');
-          }
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), []);
-  var handleClearCache = (0, _ahooks.useMemoizedFn)(function () {
-    _antd.Modal.confirm({
-      title: (0, _utils.formatMessage)({
-        id: 'luckda.lowcode.design.toolbar.clear.tip',
-        label: '清除提示'
-      }),
-      content: (0, _utils.formatMessage)({
-        id: 'luckda.lowcode.design.toolbar.clear',
-        label: '确定清除当前页面及模块缓存么？'
-      }),
-      getContainer: function getContainer() {
-        return document.getElementById('lc-design-workspace');
-      },
-      zIndex: 3000,
-      onOk: function onOk() {
-        return runClearCache({
-          moduleCode: (0, _helper.getLDMetaAttr)('moduleCode')
-        });
-      }
-    });
-  });
-  var handleOk = (0, _ahooks.useMemoizedFn)(function () {
-    var code = editorRef.current.editor.getValue();
-    try {
-      var data = JSON.parse(code);
-      (0, _ContextProvider.resetPageData)(data);
-      setShow(false);
-    } catch (e) {
-      console.error(e);
-      _antd.message.warning((0, _utils.formatMessage)({
-        id: 'luckda.lowcode.error.pagedata',
-        label: '页面数据错误'
-      }));
-    }
-  });
-  var _useDebounceFn = (0, _ahooks.useDebounceFn)( /*#__PURE__*/function () {
-      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(value) {
-        var _yield$readAllUser, code, list, detail;
-        return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return (0, _services.readAllUser)({
-                sname: value
-              });
-            case 2:
-              _yield$readAllUser = _context2.sent;
-              code = _yield$readAllUser.code;
-              list = _yield$readAllUser.list;
-              detail = _yield$readAllUser.detail;
-              if (code === 1) {
-                setUserOptions(list.map(function (id) {
-                  var item = detail[id];
-                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-                    key: "".concat(item.indocno),
-                    label: item.sname
-                  });
-                }));
-              }
-            case 7:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function (_x) {
-        return _ref4.apply(this, arguments);
-      };
-    }(), {
-      wait: 500
-    }),
-    handleSearch = _useDebounceFn.run;
-  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",
-    value: langList ? locale : undefined,
-    className: _design.default['i18n-selecter'],
-    style: {
-      fontSize: 12
-    },
-    onSelect: onLangChange
-  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
-      key: item.field,
-      value: item.field
-    }, item.title);
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'pc')),
-    onClick: function onClick() {
-      return setActivedTarget('pc');
-    }
-  }, /*#__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')),
-    onClick: function onClick() {
-      return setActivedTarget('mobile');
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "mobile"
-  })), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      width: 'auto',
-      fontSize: 12
-    },
-    className: _design.default['toolbar-item'],
-    onClick: function onClick() {
-      context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        target: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
-      });
-    }
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.pageAttrs',
-    label: '页面属性'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    style: {
-      fontSize: 12,
-      margin: '0 4px 0 2px'
-    },
-    loading: clearCacheLoading,
-    onClick: handleClearCache
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.clear',
-    label: '清除缓存'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    style: {
-      fontSize: 12,
-      margin: '0 4px 0 2px'
-    },
-    onClick: function onClick() {
-      return setShowPreview(true);
-    }
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.preview',
-    label: '预览'
-  })), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    type: "primary",
-    style: {
-      fontSize: 12,
-      padding: '0 7px 0 0'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'inline-block',
-      padding: '0 7px'
-    },
-    onClick: handleSave
-  }, (0, _utils.formatMessage)({
-    id: 'luckda.lowcode.design.toolbar.save',
-    label: '保存'
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'inline-block'
-    },
-    onClick: function onClick() {
-      return setShow(true);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: updatePageDataLoading ? 'loading' : 'eye'
-  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
-    visible: show,
-    width: 1024,
-    getContainer: function getContainer() {
-      return document.getElementById('lc-design-workspace');
-    },
-    zIndex: 3000,
-    onOk: handleOk,
-    onCancel: function onCancel() {
-      return setShow(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_JsonEditor.default, {
-    ref: editorRef,
-    style: {
-      height: '70vh'
-    }
-  }, JSON.stringify(pageData, null, '\t'))), /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
-    title: /*#__PURE__*/_react.default.createElement("div", {
-      id: "preview-drawer-header",
-      style: {
-        display: 'flex',
-        height: 54,
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }
-    }, /*#__PURE__*/_react.default.createElement("h3", {
-      style: {
-        marginBottom: 0
-      }
-    }, (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.design.toolbar.pagePreview',
-      label: '页面预览'
-    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Select, {
-      placeholder: (0, _utils.formatMessage)({
-        id: 'luckda.lowcode.design.toolbar.selectUser',
-        label: '请选择模拟登录人'
-      }),
-      allowClear: true,
-      style: {
-        width: 180
-      },
-      dropdownStyle: {
-        zIndex: 3100
-      },
-      filterOption: false,
-      labelInValue: true,
-      showSearch: true,
-      getPopupContainer: function getPopupContainer() {
-        return document.getElementById('preview-drawer-header').closest('.ant-drawer-wrapper-body');
-      },
-      onSearch: handleSearch,
-      onChange: function onChange(_, _opt) {
-        if (_opt) {
-          setUserId(_opt.props.sloginid);
-        } else {
-          setUserId(void 0);
-        }
-      }
-    }, userOptions.map(function (_ref5) {
-      var key = _ref5.key,
-        label = _ref5.label,
-        rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, (0, _extends2.default)({
-        key: key,
-        value: key
-      }, rest), label);
-    })))),
-    placement: "bottom",
-    height: "94vh",
-    footer: false,
-    zIndex: 3000,
-    headerStyle: {
-      padding: '0 48px 0 24px'
-    },
-    bodyStyle: {
-      height: 'calc(100% - 54px)',
-      backgroundColor: '#F0F2F5'
-    },
-    visible: showPreview,
-    destroyOnClose: true,
-    onClose: function onClose() {
-      return setShowPreview(false);
-    },
-    getContainer: function getContainer() {
-      return document.getElementById('lc-design-workspace');
-    }
-  }, /*#__PURE__*/_react.default.createElement(_preview.default, {
-    code: location.query.code,
-    userId: userId || 'no-user',
-    debug: true
-  })));
-};
-var _default = exports.default = DesignToolbar;