@luck-design-biz/luckda 0.0.22-4 → 0.0.22-5

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

@@ -0,0 +1,277 @@
+"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.add = add;
+exports.compress = compress;
+exports.decompress = decompress;
+exports.deleteById = deleteById;
+exports.findNodeAndParent = findNodeAndParent;
+exports.getPathById = getPathById;
+exports.getPathNodesById = getPathNodesById;
+exports.modifyById = modifyById;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var LZString = _interopRequireWildcard(require("lz-string"));
+/**
+ * 数据压缩
+ * @param {JSON} data
+ * @returns 加密后的字符串
+ */
+function compress(data) {
+  // 将对象转换为JSON字符串
+  var jsonString = JSON.stringify(data);
+  // 使用LZ-String压缩JSON字符串
+  return LZString.compressToUTF16(jsonString);
+}
+
+/**
+ * 数据解压
+ * @param {string} compressedData
+ * @returns {json}
+ */
+function decompress(compressedData) {
+  // 使用LZ-String解压数据
+  var jsonString = LZString.decompressFromUTF16(compressedData);
+  // 将JSON字符串转换回对象
+  return JSON.parse(jsonString);
+}
+
+/**
+ * 查找指定ID的节点及其父节点。
+ *
+ * @param {string} id - 要查找的节点ID。
+ * @param {Object} current - 当前遍历的JSON对象。
+ * @param {Object|null} parent - 当前节点的父节点。
+ * @returns {{node: Object|null, parent: Object|null}} 查找结果，包含节点和其父节点。
+ */
+function findNodeAndParent(id, current) {
+  var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  if (!parent && current.props.id === id) {
+    return {
+      node: current,
+      parent: null
+    };
+  }
+  if (current.hasOwnProperty('children') && current.children.includes(id)) {
+    return {
+      node: current[id],
+      parent: current
+    };
+  }
+  for (var key in current) {
+    if (current[key] && (0, _typeof2.default)(current[key]) === 'object' && key !== 'props' && key !== 'children') {
+      var result = findNodeAndParent(id, current[key], current);
+      if (result.node) {
+        return result;
+      }
+    }
+  }
+  return {
+    node: null,
+    parent: null
+  };
+}
+
+/**
+ * 对指定的JSON结构进行节点的添加、修改或删除操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string|null} path - 要操作的节点路径，使用'/'分隔。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+ */
+function process(json, path, id, data) {
+  if (!json) {
+    throw new Error("json can not be null");
+  }
+  if (path && id && data) {
+    var paths = path.split('/').filter(function (p) {
+      return p;
+    });
+    var current = json;
+    var _iterator = (0, _createForOfIteratorHelper2.default)(paths),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var p = _step.value;
+        if (!current[p]) {
+          throw new Error("Path \"".concat(paths.join('/'), "\" does not exist."));
+        }
+        if (!current[p].hasOwnProperty('children')) {
+          current[p]['children'] = [];
+        }
+        current = current[p];
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (!current.children.includes(id)) {
+      current.children.push(id);
+    }
+    current[id] = {
+      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+        id: id,
+        parentId: current.id
+      })
+    };
+  } else if (!path && id && data) {
+    var _findNodeAndParent = findNodeAndParent(id, json),
+      node = _findNodeAndParent.node;
+    if (node) {
+      node.props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+        id: id
+      });
+    } else {
+      throw new Error("Node with id \"".concat(id, "\" does not exist."));
+    }
+  } else if (!path && id && !data) {
+    var _findNodeAndParent2 = findNodeAndParent(id, json),
+      _node = _findNodeAndParent2.node,
+      parent = _findNodeAndParent2.parent;
+    if (_node && parent) {
+      parent.children = parent.children.filter(function (childId) {
+        return childId !== id;
+      });
+      if (parent.children.length === 0) {
+        delete parent['children'];
+      }
+      delete parent[id];
+    } else {
+      throw new Error("Node with id \"".concat(id, "\" does not exist."));
+    }
+  }
+}
+
+/**
+ * 对指定的JSON结构进行节点的添加操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} parentId - 父节点的唯一标识符。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+ */
+function add(json, parentId, id, data) {
+  process(json, getPathById(json, parentId), id, data);
+}
+
+/**
+ * 对指定的JSON结构进行节点的修改操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+ */
+function modifyById(json, id, data) {
+  process(json, null, id, data);
+}
+
+/**
+ * 删除指定id的节点。
+ *
+ * @param {Object} json - JSON对象。
+ * @param {string} id - 要删除的节点ID。
+ */
+function deleteById(json, id) {
+  process(json, null, id);
+}
+
+/**
+ * 根据ID在给定的JSON结构中查找节点的路径。
+ *
+ * @param {Object} json - 要搜索的JSON对象。
+ * @param {string} id - 要查找的节点ID。
+ * @param {string} currentPath - 当前递归到的路径，用于构建返回的路径字符串。
+ * @returns {string|null} 如果找到节点，返回节点的路径；否则返回null。
+ */
+function getPathById(json, id) {
+  var currentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  for (var key in json) {
+    var newPath = currentPath ? "".concat(currentPath, "/").concat(key) : key;
+    if (json[key].props && json[key].props.id === id) {
+      return newPath;
+    }
+    if (json[key].hasOwnProperty('children')) {
+      var result = getPathById(json[key], id, newPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * 在给定的JSON结构中搜索具有特定id的节点，并返回包含该节点及其所有父节点的props属性的路径数组。
+ *
+ * @param {Object} data - 待搜索的JSON对象，它代表了一个复杂的树状结构，每个节点都可能有props和children属性。
+ * @param {string} targetId - 需要找到的目标节点的id。
+ * @returns {Array<Object>} 一个包含目标节点及其所有父节点的props属性的数组。如果未找到目标节点，则返回空数组。
+ *
+ * @example
+ * const data = {
+ *   props: {
+ *     id: 'page_root',
+ *     type: 'Page',
+ *     name: '页面',
+ *     hasHeder: true,
+ *     hasFooter: true,
+ *   },
+ *   // ...其他节点
+ * };
+ *
+ * const path = getPathNodesById(data, 'form_jknbjkun');
+ * console.log(path);
+ * // 输出目标节点及其所有父节点的props属性的数组
+ */
+function getPathNodesById(data, targetId) {
+  // 初始化结果数组
+  var result = [];
+
+  // 定义递归函数以搜索路径
+  function search(node) {
+    var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    // 检查当前节点是否是目标节点
+    if (node && node.props && node.props.id === targetId) {
+      // 如果是，将当前路径和节点自身添加到结果中
+      result = [].concat((0, _toConsumableArray2.default)(path), [node.props]);
+      return true;
+    }
+
+    // 遍历子节点
+    if (node && node.children) {
+      var _iterator2 = (0, _createForOfIteratorHelper2.default)(node.children),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var childId = _step2.value;
+          // 对每个子节点，首先尝试从当前节点获取子节点数据
+          var childNode = node[childId];
+          if (search(childNode, [].concat((0, _toConsumableArray2.default)(path), [node.props]))) {
+            return true;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+    return false;
+  }
+
+  // 从顶层"data"对象开始搜索
+  if (search(data)) {
+    return result;
+  }
+
+  // 如果未找到目标节点，返回空数组
+  return [];
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPromise = isPromise;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+function isPromise(value) {
+  return !!value && (0, _typeof2.default)(value) === 'object' && typeof value.then === 'function';
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generateShortUuid;
+var _uuid = require("uuid");
+var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+function generateShortUuid() {
+  var toLowerCase = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var shortBuffer = '';
+  var uuid = (0, _uuid.v4)().replace(/-/g, '');
+  for (var i = 0; i < 8; i++) {
+    var str = uuid.substring(i * 4, i * 4 + 4);
+    var x = parseInt(str, 16);
+    shortBuffer += chars[x % 0x3e];
+  }
+  if (toLowerCase) {
+    return shortBuffer.toLowerCase();
+  }
+  return shortBuffer;
+}

package/lib/lowcode/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Painter", {
+  enumerable: true,
+  get: function get() {
+    return _painter.default;
+  }
+});
+Object.defineProperty(exports, "View", {
+  enumerable: true,
+  get: function get() {
+    return _view.default;
+  }
+});
+var _painter = _interopRequireDefault(require("./painter"));
+var _view = _interopRequireDefault(require("./view"));

package/lib/lowcode/painter/Components.js

@@ -0,0 +1,112 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+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 _components = _interopRequireDefault(require("./style/components.less"));
+var _componentsList = _interopRequireDefault(require("../engine/meta/components-list.json"));
+var TabPane = _antd.Tabs.TabPane;
+var Search = _antd.Input.Search;
+var BaseCom = function BaseCom(_ref) {
+  var onComponentClick = _ref.onComponentClick;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var handleSearch = (0, _ahooks.useMemoizedFn)(function (e) {
+    setSearchTerm(e.target.value.toLowerCase());
+  });
+  var filteredData = (0, _ahooks.useCreation)(function () {
+    return _componentsList.default.map(function (group) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
+        components: group.components.filter(function (item) {
+          return item.name.toLowerCase().includes(searchTerm) || item.desc.toLowerCase().includes(searchTerm);
+        })
+      });
+    }).filter(function (group) {
+      return group.components.length > 0;
+    });
+  }, [_componentsList.default]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['components-search']
+  }, /*#__PURE__*/_react.default.createElement(Search, {
+    placeholder: (0, _utils.formatMessage)({
+      id: 'luckda.lowcode.painter.components.search',
+      label: '搜索组件'
+    }),
+    onChange: handleSearch
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['components-content']
+  }, filteredData.map(function (group) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      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", {
+        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 onComponentClick = (0, _ahooks.useMemoizedFn)(function (data) {
+    context.$publisher(context.topics.COMPONENT_SETTING_CLICK, {
+      data: data
+    });
+  });
+  if (!dataset) return /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['lc-painter-components'],
+    style: {
+      paddingTop: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(BaseCom, {
+    onComponentClick: onComponentClick
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _components.default['lc-painter-components']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
+    defaultActiveKey: "base"
+  }, /*#__PURE__*/_react.default.createElement(TabPane, {
+    tab: (0, _utils.formatMessage)({
+      id: 'ccm.dev.page.set.components.base',
+      label: '基础组件'
+    }),
+    key: "base"
+  }, /*#__PURE__*/_react.default.createElement(BaseCom, {
+    onComponentClick: onComponentClick
+  })), /*#__PURE__*/_react.default.createElement(TabPane, {
+    tab: (0, _utils.formatMessage)({
+      id: 'ccm.dev.page.set.components.dataset',
+      label: '数据集字段'
+    }),
+    key: "dataset"
+  })));
+};
+var _default = exports.default = Components;

package/lib/lowcode/painter/Design.js

@@ -0,0 +1,218 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _Page = _interopRequireDefault(require("../view/Page"));
+var _dataProcess = require("../engine/tools/dataProcess");
+var _lcid = _interopRequireDefault(require("../engine/tools/lcid"));
+var _constants = require("../constants");
+var _design = _interopRequireDefault(require("./style/design.less"));
+var setRect = function setRect(page, node, cellNode) {
+  var _page$getBoundingClie = page.getBoundingClientRect(),
+    pageLeft = _page$getBoundingClie.left,
+    pageTop = _page$getBoundingClie.top;
+  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
+    cellNodeLeft = _cellNode$getBounding.left,
+    cellNodeTop = _cellNode$getBounding.top;
+  node.style.left = "".concat(cellNodeLeft - pageLeft, "px");
+  node.style.top = "".concat(cellNodeTop - pageTop, "px");
+  node.style.width = "".concat(cellNode.offsetWidth, "px");
+  node.style.height = "".concat(cellNode.offsetHeight, "px");
+};
+var Design = function Design() {
+  var context = (0, _ContextProvider.useLDContext)();
+  var detectorRef = (0, _react.useRef)(null);
+  var selectorRef = (0, _react.useRef)(null);
+  var simulatorRef = (0, _react.useRef)(null);
+  var hoverCellRef = (0, _react.useRef)(null);
+  var activeCellRef = (0, _react.useRef)(null);
+  var size = (0, _ahooks.useSize)(simulatorRef);
+  var scroll = (0, _ahooks.useScroll)(simulatorRef);
+  var _useState = (0, _react.useState)('pc'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activedTarget = _useState2[0],
+    setActivedTarget = _useState2[1];
+  (0, _ahooks.useEventListener)('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
+      var _id = targetCell.id;
+      hoverCellRef.current = targetCell;
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: _id,
+        cellNode: targetCell
+      });
+    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: simulatorRef
+  });
+  (0, _ahooks.useEventListener)('mouseleave', function () {
+    if (hoverCellRef.current) {
+      hoverCellRef.current = null;
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: simulatorRef
+  });
+  (0, _ahooks.useEventListener)('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
+    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: targetCell.id,
+      cellNode: targetCell
+    });
+  }, {
+    target: simulatorRef
+  });
+  (0, _react.useEffect)(function () {
+    if (selectorRef.current && activeCellRef.current) setRect(simulatorRef.current, selectorRef.current, activeCellRef.current);
+    if (detectorRef.current && hoverCellRef.current) setRect(simulatorRef.current, detectorRef.current, hoverCellRef.current);
+  }, [size, scroll]);
+  (0, _react.useEffect)(function () {
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) {
+        detectorRef.current.style.display = 'block';
+        setRect(simulatorRef.current, detectorRef.current, payload.cellNode);
+      } else {
+        detectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.id) {
+        activeCellRef.current = payload.cellNode;
+        hoverCellRef.current = null;
+        selectorRef.current.style.display = 'block';
+        setRect(simulatorRef.current, selectorRef.current, payload.cellNode);
+      } else {
+        selectorRef.current.style.display = 'none';
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+    };
+  }, [scroll]);
+  (0, _react.useEffect)(function () {
+    var moid = context.$subscriber(context.topics.MODAL_OPEN).on(function () {
+      simulatorRef.current.style['overflow-y'] = 'hidden';
+    }).watch();
+    var mcid = context.$subscriber(context.topics.MODAL_CLOSE).on(function () {
+      simulatorRef.current.style['overflow-y'] = 'auto';
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.MODAL_OPEN, moid);
+      context.$unsubscriber(context.topics.MODAL_CLOSE, mcid);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref) {
+      var data = _ref.data;
+      if (!activeCellRef.current) {
+        _antd.message.info('请在右侧画布选择节点');
+        return;
+      }
+      if (activeCellRef.current.getAttribute('name') !== 'box') {
+        _antd.message.info('该节点不支持添加子节点');
+        return;
+      }
+      var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+      var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _lcid.default)());
+      var cloneData = (0, _lodash.cloneDeep)(context.pageData);
+      (0, _dataProcess.add)(cloneData, activeCellRef.current.id, _id, json);
+      context._setPageData(cloneData);
+      setTimeout(function () {
+        context.$publisher(context.topics.COMPONENT_APPEND, {
+          id: _id,
+          pageData: (0, _lodash.cloneDeep)(cloneData)
+        });
+      });
+    }).watch();
+    return function () {
+      return context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
+    };
+  }, [context.pageData]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-painter-design']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-painter-design-toolbar']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    defaultValue: "chinese",
+    className: _design.default['i18n-selecter'],
+    style: {
+      fontSize: 12
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+    value: "chinese"
+  }, "\u7B80\u4F53\u4E2D\u6587"), /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+    value: "endlish"
+  }, "English")), /*#__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, {
+        id: _constants.CELL_KEY.PAGE_ROOT,
+        cellNode: context.componentMap.get(_constants.CELL_KEY.PAGE_ROOT).dom
+      });
+    }
+  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    type: "primary",
+    style: {
+      fontSize: 12
+    }
+  }, "\u4FDD\u5B58")), /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-painter-design-workspace']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-detector",
+    ref: detectorRef,
+    className: _design.default['lc-painter-design-detector']
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-selector",
+    ref: selectorRef,
+    className: _design.default['lc-painter-design-selector']
+  }), /*#__PURE__*/_react.default.createElement(_Page.default, {
+    ref: simulatorRef,
+    pageCode: "mk2i87qb",
+    className: _design.default['lc-painter-design-simulator']
+  })));
+};
+var _default = exports.default = Design;