@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/core/Designer/PageCompList/index.js

@@ -0,0 +1,328 @@
+import { __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import '../../../../../node_modules/antd/es/affix/index.js';
+import '../../../../../node_modules/antd/es/anchor/index.js';
+import '../../../../../node_modules/antd/es/auto-complete/index.js';
+import '../../../../../node_modules/antd/es/alert/index.js';
+import '../../../../../node_modules/antd/es/avatar/index.js';
+import '../../../../../node_modules/antd/es/back-top/index.js';
+import '../../../../../node_modules/antd/es/badge/index.js';
+import '../../../../../node_modules/antd/es/breadcrumb/Breadcrumb.js';
+import '../../../../../node_modules/antd/es/button/button.js';
+import '../../../../../node_modules/rc-picker/node_modules/moment/moment.js';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import '../../../../../node_modules/rc-util/es/hooks/useMergedState.js';
+import classNames from 'classnames';
+import '../../../../../node_modules/lodash/_baseToString.js';
+import '../../../../../node_modules/lodash/_baseGetTag.js';
+import '../../../../../node_modules/rc-util/es/raf.js';
+import '../../../../../node_modules/rc-picker/es/panels/DatetimePanel/index.js';
+import '../../../../../node_modules/rc-trigger/es/index.js';
+import '../../../../../node_modules/antd/es/locale-provider/LocaleReceiver.js';
+import '../../../../../node_modules/antd/es/date-picker/locale/en_US.js';
+import '../../../../../node_modules/antd/es/config-provider/index.js';
+import '../../../../../node_modules/rc-field-form/es/index.js';
+import '../../../../../node_modules/antd/es/select/index.js';
+import '../../../../../node_modules/antd/es/radio/index.js';
+import '../../../../../node_modules/antd/es/card/index.js';
+import '../../../../../node_modules/antd/es/collapse/Collapse.js';
+import '../../../../../node_modules/antd/es/carousel/index.js';
+import '../../../../../node_modules/antd/es/cascader/index.js';
+import '../../../../../node_modules/antd/es/checkbox/index.js';
+import '../../../../../node_modules/antd/es/grid/row.js';
+import '../../../../../node_modules/antd/es/grid/col.js';
+import '../../../../../node_modules/antd/es/comment/index.js';
+import '../../../../../node_modules/antd/es/date-picker/index.js';
+import '../../../../../_virtual/index2.js';
+import '../../../../../node_modules/antd/es/_util/warning.js';
+import '../../../../../node_modules/antd/es/divider/index.js';
+import Dropdown from '../../../../../node_modules/antd/es/dropdown/dropdown.js';
+import '../../../../../node_modules/antd/es/drawer/index.js';
+import '../../../../../node_modules/antd/es/empty/index.js';
+import '../../../../../node_modules/antd/es/form/index.js';
+import '../../../../../node_modules/antd/es/input/index.js';
+import '../../../../../node_modules/antd/es/image/index.js';
+import '../../../../../node_modules/antd/es/input-number/index.js';
+import '../../../../../node_modules/antd/es/layout/index.js';
+import '../../../../../node_modules/antd/es/list/index.js';
+import '../../../../../node_modules/antd/es/message/index.js';
+import Menu from '../../../../../node_modules/antd/es/menu/index.js';
+import '../../../../../node_modules/antd/es/mentions/index.js';
+import '../../../../../node_modules/antd/es/modal/index.js';
+import '../../../../../node_modules/antd/es/statistic/index.js';
+import '../../../../../node_modules/antd/es/notification/index.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/ArrowRightOutlined.js';
+import '../../../../../node_modules/rc-resize-observer/es/index.js';
+import '../../../../../node_modules/antd/es/space/index.js';
+import '../../../../../node_modules/antd/es/_util/transButton.js';
+import '../../../../../node_modules/antd/es/pagination/Pagination.js';
+import '../../../../../node_modules/antd/es/popconfirm/index.js';
+import '../../../../../node_modules/antd/es/popover/index.js';
+import '../../../../../node_modules/antd/es/progress/progress.js';
+import '../../../../../node_modules/antd/es/rate/index.js';
+import '../../../../../node_modules/antd/es/result/index.js';
+import '../../../../../node_modules/antd/es/segmented/index.js';
+import '../../../../../node_modules/antd/es/skeleton/Skeleton.js';
+import '../../../../../node_modules/antd/es/slider/index.js';
+import '../../../../../node_modules/antd/es/spin/index.js';
+import '../../../../../node_modules/antd/es/steps/index.js';
+import '../../../../../node_modules/antd/es/switch/index.js';
+import '../../../../../node_modules/antd/es/table/Table.js';
+import '../../../../../node_modules/antd/es/transfer/list.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/LeftOutlined.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/RightOutlined.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/SearchOutlined.js';
+import '../../../../../node_modules/antd/es/_util/statusUtils.js';
+import '../../../../../node_modules/antd/es/tree/Tree.js';
+import '../../../../../node_modules/antd/es/tree-select/index.js';
+import '../../../../../node_modules/antd/es/tabs/index.js';
+import '../../../../../node_modules/antd/es/tag/index.js';
+import '../../../../../node_modules/antd/es/time-picker/index.js';
+import '../../../../../node_modules/antd/es/timeline/Timeline.js';
+import '../../../../../node_modules/antd/es/tooltip/index.js';
+import '../../../../../node_modules/antd/es/typography/index.js';
+import '../../../../../node_modules/antd/es/upload/index.js';
+import update from '../../../../../node_modules/immutability-helper/index.js';
+import '../../../common/LayoutSelector/index.js';
+import '../../../common/Field/index.js';
+import '../../../common/UrlPicker/index.js';
+import Iconfont from '../../../common/Iconfont/index.js';
+import Button from '../../../common/Button/index.js';
+import '../../../common/AlignSelector/index.js';
+import '../../../common/Collapse/index.js';
+import '../../../common/ColorPickerInput/index.js';
+import '../../../common/ImagePicker/index.js';
+import '../../../common/IconPicker/index.js';
+import '../../../common/SwitchCollapse/index.js';
+import '../../../common/Slider/index.js';
+import '../../../common/FontStyles/index.js';
+import '../../../common/ButtonIconLayout/index.js';
+import '../../../../../node_modules/axios/index.js';
+import '../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../node_modules/qs/lib/utils.js';
+import '../../../common/ProductModal/index.js';
+import '../../../common/ProductSource/index.less.js';
+import { copyNode } from '../../../utils/coreUtil.js';
+import './index.less.js';
+import { compInfoMap } from '../../../constants/index.js';
+import { store } from '../../../mobx/index.js';
+import { autorun } from '../../../../../node_modules/mobx/dist/mobx.esm.js';
+
+var operTypeMap = {
+  MOVE_UP: '1',
+  MOVE_DOWN: '2',
+  COPY: '3',
+  DELETE: '4'
+};
+function PageCompList(_a) {
+  var setPageData = _a.setPageData,
+      pageData = _a.pageData,
+      onAdd = _a.onAdd,
+      renderPagesManage = _a.renderPagesManage,
+      pageName = _a.pageName;
+
+  var _b = useState(pageData || []),
+      components = _b[0],
+      setComponents = _b[1];
+
+  var _c = useState(''),
+      dragId = _c[0],
+      setDragId = _c[1];
+
+  var _d = useState(''),
+      clickedFloor = _d[0],
+      setClickedFloor = _d[1];
+
+  var ref = useRef();
+  useEffect(function () {
+    setComponents(pageData || []);
+  }, [pageData]);
+  useEffect(function () {
+    var distroy = autorun(function () {
+      setClickedFloor(store.clickedFloor);
+    });
+    return distroy;
+  }, []);
+  var moveCard = useCallback(function (dragNodeId, hoverNodeId) {
+    var dragIndex = components.findIndex(function (comp) {
+      return comp.id === dragNodeId;
+    });
+    var hoverIndex = components.findIndex(function (comp) {
+      return comp.id === hoverNodeId;
+    });
+    setComponents(function (prevCards) {
+      var newComps = update(prevCards, {
+        $splice: [[dragIndex, 1], [hoverIndex, 0, prevCards[dragIndex]]]
+      });
+      ref.current = newComps;
+      return newComps;
+    });
+  }, [components]);
+
+  var onDragStart = function (e) {
+    setDragId(e.currentTarget.dataset.nodeid);
+  };
+
+  var onDragEnter = function (e) {
+    var hoverNodeId = e.currentTarget.dataset.nodeid;
+
+    if (dragId === hoverNodeId) {
+      return;
+    }
+
+    moveCard(dragId, hoverNodeId);
+  };
+
+  var onDragEnd = function () {
+    setDragId('');
+
+    if (ref.current) {
+      setPageData(ref.current);
+    }
+  };
+
+  var onMenuClick = function (index, operType) {
+    var newComponents = __spreadArray([], components, true);
+
+    if (operType === operTypeMap.MOVE_UP) {
+      var temp = newComponents[index - 1];
+      newComponents[index - 1] = newComponents[index];
+      newComponents[index] = temp;
+    } else if (operType === operTypeMap.MOVE_DOWN) {
+      var temp = newComponents[index + 1];
+      newComponents[index + 1] = newComponents[index];
+      newComponents[index] = temp;
+    } else if (operType === operTypeMap.COPY) {
+      var copyComponent = copyNode(newComponents[index]);
+      newComponents.splice(index + 1, 0, copyComponent);
+    } else if (operType === operTypeMap.DELETE) {
+      if (newComponents[index].id === clickedFloor) {
+        store.setState({
+          clickedFloor: null
+        });
+      }
+
+      newComponents.splice(index, 1);
+    } // setComponents(newComponents);
+
+
+    setPageData(newComponents);
+  };
+
+  var componentScrollTop = function (data) {
+    if (document.getElementById("view".concat(data.id))) {
+      document.getElementById("view".concat(data.id)).scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  var onCardClick = function (event, data) {
+    componentScrollTop(data); // 这里必须阻止事件冒泡，然后再触发自定义的事件
+
+    event.preventDefault();
+    event.stopPropagation();
+    var evt = new Event('component-click', {
+      bubbles: false
+    });
+    evt.data = data;
+    window.document.dispatchEvent(evt);
+    if (clickedFloor === data.id) return;
+    store.setState({
+      clickedFloor: data.id
+    });
+  };
+
+  var renderCard = function (comp, index) {
+    var menu = /*#__PURE__*/React__default.createElement(Menu, {
+      onClick: function (_a) {
+        var item = _a.item;
+        return onMenuClick(index, item.props.value);
+      }
+    }, index !== 0 && /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "1"
+    }, "Move Up"), index !== components.length - 1 && /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "2"
+    }, "Move Down"), /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "3"
+    }, "Copy"), /*#__PURE__*/React__default.createElement(Menu.Item, {
+      className: "menu_item",
+      value: "4"
+    }, "Delete"));
+    var dragging = dragId === String(comp.id);
+    var active = clickedFloor === String(comp.id);
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: "card".concat(comp.id),
+      className: classNames('card-wrap', {
+        active: active
+      }),
+      "data-nodeid": comp.id,
+      draggable: "true",
+      id: "card".concat(comp.id),
+      onDragEnd: onDragEnd,
+      onDragEnter: onDragEnter,
+      onDragOver: function (e) {
+        e.preventDefault();
+      },
+      onDragStart: onDragStart,
+      style: {
+        opacity: dragging ? '0.4' : '1'
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "left",
+      onClick: function (e) {
+        return onCardClick(e, comp);
+      }
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "comp-icon",
+      color: active ? '#2F54EB' : '',
+      size: "20px",
+      type: compInfoMap[comp.type].icon
+    }), /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "drag-icon",
+      color: "#2F54EB",
+      size: "20px",
+      type: "icon-drag"
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: "card-title ml16"
+    }, index + 1, ". ", compInfoMap[comp.type].name)), /*#__PURE__*/React__default.createElement(Dropdown, {
+      overlay: menu,
+      placement: "bottomRight",
+      trigger: ['click']
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "more-btn",
+      color: "#2F54EB",
+      size: "20px",
+      style: {
+        height: '40px'
+      },
+      type: "icon-more"
+    })));
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "page-comp-wrap"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "page-comp-head"
+  }, renderPagesManage), /*#__PURE__*/React__default.createElement("div", {
+    className: "page-comp-list"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "title mb16"
+  }, pageName), /*#__PURE__*/React__default.createElement(Button, {
+    icon: "icon-add",
+    onClick: onAdd,
+    size: "large",
+    type: "light"
+  }, "Add Component"), /*#__PURE__*/React__default.createElement("div", {
+    className: "list mt16"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "inner-list"
+  }, /*#__PURE__*/React__default.createElement("div", null, components.length > 0 && components.map(function (comp, i) {
+    return renderCard(comp, i);
+  }))))));
+}
+
+export { PageCompList as default };

package/src/components/core/Designer/PageCompList/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_page-comp-wrap__hAT7M {\n  z-index: 100;\n  background-color: #FFF;\n  width: 354px;\n  flex-shrink: 0;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-head__rt3Bk {\n  height: 81px;\n  box-shadow: inset 0px -1px 0px #EDF0F4;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 {\n  padding: 24px;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_title__1DebN {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 36px;\n  color: #232F46;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV {\n  margin-right: -21px;\n  overflow-y: auto;\n  width: 100%;\n  padding: 8px 0px 8px 0;\n  height: calc(100vh - 260px);\n  background: #F5F6F7;\n  border-radius: 8px;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV::-webkit-scrollbar {\n  width: 8px;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV::-webkit-scrollbar-track-piece {\n  background-color: #fff;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV::-webkit-scrollbar-thumb {\n  background-color: #C1C9D7;\n  background-clip: padding-box;\n  border-radius: 100px;\n}\n.index_card-wrap__l74jT {\n  display: flex;\n  justify-content: space-between;\n  cursor: move;\n  height: 64px;\n  line-height: 64px;\n  padding: 0 20px;\n  color: #232F46;\n}\n.index_card-wrap__l74jT .index_left__pBraq {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.index_card-wrap__l74jT .index_left__pBraq .index_comp-icon__YbnCQ {\n  display: block;\n}\n.index_card-wrap__l74jT .index_left__pBraq .index_drag-icon__8anEd {\n  display: none;\n}\n.index_card-wrap__l74jT .index_left__pBraq .index_card-title__A3MdO {\n  line-height: 24px;\n  font-family: 'Open Sans';\n  font-weight: 400;\n  font-size: 16px;\n  font-style: normal;\n}\n.index_card-wrap__l74jT .index_more-btn__lWkrz {\n  display: none;\n  cursor: pointer;\n}\n.index_card-wrap__l74jT:hover {\n  background: #E9F0FF;\n  color: #2F54EB;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 24px;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq .index_comp-icon__YbnCQ {\n  display: none;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq .index_drag-icon__8anEd {\n  display: block;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq .index_card-title__A3MdO {\n  font-weight: 600;\n}\n.index_card-wrap__l74jT:hover .index_more-btn__lWkrz {\n  display: block;\n}\n.index_active__dMPSq {\n  background: #E9F0FF;\n  color: #2F54EB;\n}\n.index_active__dMPSq .index_left__pBraq .index_card-title__A3MdO {\n  font-weight: 600;\n}\n.index_active__dMPSq .index_more-btn__lWkrz {\n  display: block;\n}\n";
+styleInject(css_248z);

package/src/components/core/Designer/QuickMenuBar/index.js

@@ -0,0 +1,130 @@
+import { __extends } from '../../../../../node_modules/tslib/tslib.es6.js';
+import classNames from 'classnames';
+import React__default, { Component } from 'react';
+import Button from '../../../common/Button/index.js';
+import Iconfont from '../../../common/Iconfont/index.js';
+import { deviceTypeMap, quickMenuCode } from '../../../constants/index.js';
+import './index.less.js';
+
+var langBook = {
+  Indonesian: {
+    text: 'Indonesian',
+    color: '#FF8541',
+    backColor: '#FFF8F0'
+  },
+  English: {
+    text: 'English',
+    color: '#00AC5A',
+    backColor: '#DFF3EA'
+  }
+};
+
+var QuickMenuBar =
+/** @class */
+function (_super) {
+  __extends(QuickMenuBar, _super);
+
+  function QuickMenuBar() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.onBtnClick = function (event) {
+      var code = event.currentTarget.dataset.code;
+
+      if (_this.props.device === deviceTypeMap.PC) ;
+
+      _this.props.onBtnClick(code);
+    };
+
+    return _this;
+  }
+
+  QuickMenuBar.prototype.render = function () {
+    var _a = this.props,
+        device = _a.device,
+        undoDisable = _a.undoDisable,
+        redoDisable = _a.redoDisable,
+        language = _a.language;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "quick_menu_wrap"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "menu_left"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "language",
+      style: {
+        color: langBook[language].color,
+        background: langBook[language].backColor
+      }
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      size: "20px",
+      style: {
+        marginRight: '8px'
+      },
+      type: "icon-language"
+    }), langBook[language].text)), /*#__PURE__*/React__default.createElement("div", {
+      className: "menu_center"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "device_group"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('device_pc', {
+        active: device === deviceTypeMap.PC
+      }),
+      "data-code": quickMenuCode.MODE_PC,
+      onClick: this.onBtnClick
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      color: device === deviceTypeMap.PC ? '#2F54EB' : '',
+      size: "20px",
+      type: "icon-pc"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('device_phone', {
+        active: device === deviceTypeMap.PHONE
+      }),
+      "data-code": quickMenuCode.MODE_PHONE,
+      onClick: this.onBtnClick
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      color: device === deviceTypeMap.PHONE ? '#2F54EB' : '',
+      size: "20px",
+      type: "icon-mobile"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "redo_undo"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.UNDO,
+      disabled: undoDisable,
+      icon: "icon-back",
+      onClick: this.onBtnClick,
+      type: "icon"
+    }), /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.REDO,
+      disabled: redoDisable,
+      icon: "icon-next",
+      onClick: this.onBtnClick,
+      type: "icon"
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: "menu_right"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.PREVIEW,
+      onClick: this.onBtnClick
+    }, "Preview"), /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.SAVE,
+      disabled: window.magicDesign.readOnly,
+      onClick: this.onBtnClick,
+      tip: "The page is in use. Please copy or create a new page",
+      type: "light"
+    }, "Save"), /*#__PURE__*/React__default.createElement(Button, {
+      "data-code": quickMenuCode.PUBLISH,
+      disabled: window.magicDesign.readOnly,
+      onClick: this.onBtnClick,
+      tip: "The page is in use. Please copy or create a new page",
+      type: "primary"
+    }, "Publish")));
+  };
+
+  return QuickMenuBar;
+}(Component);
+QuickMenuBar.defaultProps = {
+  deviceType: deviceTypeMap.PC,
+  onBtnClick: function (code) {
+    console.log(code);
+  }
+};
+
+export { QuickMenuBar as default };

package/src/components/core/Designer/QuickMenuBar/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_quick_menu_wrap__5xVae {\n  flex-shrink: 0;\n  height: 80px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: 24px;\n  padding-right: 28px;\n  background-color: #FFF;\n}\n.index_quick_menu_wrap__5xVae .index_menu_left__5Vc5c .index_language__08ChO {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 48px;\n  border-radius: 8px;\n  padding: 12px;\n  font-size: 16px;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 .index_device_pc__GZM-C {\n  cursor: pointer;\n  height: 48px;\n  width: 60px;\n  padding: 14px;\n  border: 1px solid #EDF0F4;\n  border-right: none;\n  border-top-left-radius: 8px;\n  border-bottom-left-radius: 8px;\n  text-align: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 .index_device_phone__odPFU {\n  cursor: pointer;\n  height: 48px;\n  width: 60px;\n  padding: 14px;\n  border: 1px solid #EDF0F4;\n  border-left: none;\n  border-top-right-radius: 8px;\n  border-bottom-right-radius: 8px;\n  text-align: center;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_device_group__3Kk79 .index_active__cu0sW {\n  background: #E9F0FF;\n}\n.index_quick_menu_wrap__5xVae .index_menu_center__9F4gn .index_redo_undo__PGEpQ {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 24px;\n}\n.index_quick_menu_wrap__5xVae .index_menu_right__yqg0- {\n  display: flex;\n}\n";
+styleInject(css_248z);

package/src/components/core/Designer/ViewArea/index.js

@@ -0,0 +1,86 @@
+import { __extends, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import classNames from 'classnames';
+import React__default, { Component } from 'react';
+import isEmpty_1 from '../../../../../node_modules/lodash/isEmpty.js';
+import { deviceTypeMap } from '../../../constants/index.js';
+import { componentMap } from '../../../constants/component-types.js';
+import './index.less.js';
+import { store } from '../../../mobx/index.js';
+import { autorun } from '../../../../../node_modules/mobx/dist/mobx.esm.js';
+
+var ViewArea =
+/** @class */
+function (_super) {
+  __extends(ViewArea, _super);
+
+  function ViewArea() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      clickedFloor: ''
+    };
+
+    _this.isPhoneEdit = function () {
+      var device = _this.props.device;
+      return device === deviceTypeMap.PHONE && !isEmpty_1(_this.state.clickedFloor);
+    };
+
+    _this.renderView = function () {
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  ViewArea.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.distroy = autorun(function () {
+      _this.setState({
+        clickedFloor: store.clickedFloor
+      });
+    });
+  };
+
+  ViewArea.prototype.componentWillUnmount = function () {
+    this.distroy();
+  };
+
+  ViewArea.prototype.render = function () {
+    var _a = this.props,
+        device = _a.device,
+        renderHeader = _a.renderHeader,
+        pageData = _a.pageData;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('design-area-wrap', {
+        'phone-edit': this.isPhoneEdit()
+      })
+    }, renderHeader(), /*#__PURE__*/React__default.createElement("div", {
+      className: device === deviceTypeMap.PC ? 'pc_view_area' : 'phone_view_area'
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "device_border",
+      style: {
+        background: window.magicDesign.pageBackground
+      }
+    }, pageData && pageData.map(function (nodeData) {
+      var Clazz = componentMap[nodeData.type];
+
+      if (!Clazz) {
+        console.error("[MagicBox] Can not find type ".concat(nodeData.type));
+        return;
+      }
+
+      var newInstanceProps = {
+        nodeData: nodeData
+      };
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: nodeData.id,
+        id: "view".concat(nodeData.id)
+      }, /*#__PURE__*/React__default.createElement(Clazz, __assign({}, newInstanceProps), null));
+    }))));
+  };
+
+  return ViewArea;
+}(Component);
+
+export { ViewArea as default };

package/src/components/core/Designer/ViewArea/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_design-area-wrap__1UMY8 {\n  width: calc(100vw - 354px);\n  flex: auto;\n  background: #F5F6F7;\n  display: flex;\n  flex-direction: column;\n  padding-left: 1px;\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: ease;\n}\n.index_design-area-wrap__1UMY8.index_phone-edit__-2SG9 {\n  margin-left: 355px;\n}\n.index_design-area-wrap__1UMY8 .index_phone_view_area__Jv0A0 {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px 0;\n}\n.index_design-area-wrap__1UMY8 .index_phone_view_area__Jv0A0 .index_device_border__I7Vyh {\n  width: 375px;\n  max-height: 691px;\n  height: calc(100vh - 150px);\n  overflow: scroll;\n  overflow-x: hidden;\n  border: 10px solid #FFF;\n  background-color: #F2F2F2;\n  border-radius: 12px;\n  box-sizing: content-box;\n}\n.index_design-area-wrap__1UMY8 .index_pc_view_area__3s0Hi {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n.index_design-area-wrap__1UMY8 .index_pc_view_area__3s0Hi .index_device_border__I7Vyh {\n  padding: 1px;\n  max-width: 1240px;\n  width: 100%;\n  min-height: 70vh;\n  border: 16px solid #FFF;\n  border-radius: 12px;\n  max-height: calc(100vh - 180px);\n  height: 100%;\n  overflow: scroll;\n  box-sizing: content-box;\n}\n";
+styleInject(css_248z);