@fonixtree/magic-design 1.0.53 → 1.0.55

package/lib/core/Designer/ToolBarModal/ToolBtn/images/AlignCenterSVG.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    fill: "none",
+    height: "10",
+    id: "ne-t-alignment-center",
+    onClick: onChange,
+    viewBox: "0 0 15 10",
+    width: "15",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H13.375C13.7892 0.25 14.125 0.585786 14.125 1C14.125 1.41421 13.7892 1.75 13.375 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 8.875C0.25 8.46079 0.585786 8.125 1 8.125H13.375C13.7892 8.125 14.125 8.46079 14.125 8.875C14.125 9.28921 13.7892 9.625 13.375 9.625H1C0.585786 9.625 0.25 9.28921 0.25 8.875Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }));
+};
+
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/images/AlignLeftSVG.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    fill: "none",
+    height: "10",
+    id: "ne-t-alignment-left",
+    onClick: onChange,
+    viewBox: "0 0 15 10",
+    width: "15",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H10C10.4142 0.25 10.75 0.585786 10.75 1C10.75 1.41421 10.4142 1.75 10 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 8.875C0.25 8.46079 0.585786 8.125 1 8.125H10C10.4142 8.125 10.75 8.46079 10.75 8.875C10.75 9.28921 10.4142 9.625 10 9.625H1C0.585786 9.625 0.25 9.28921 0.25 8.875Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }));
+};
+
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/images/AlignRightSVG.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default(_a) {
+  var onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    fill: "none",
+    height: "10",
+    id: "ne-t-alignment-right",
+    onClick: onChange,
+    viewBox: "0 0 15 10",
+    width: "15",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M3.625 1C3.625 0.585786 3.96079 0.25 4.375 0.25H13.375C13.7892 0.25 14.125 0.585786 14.125 1C14.125 1.41421 13.7892 1.75 13.375 1.75H4.375C3.96079 1.75 3.625 1.41421 3.625 1Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    clipRule: "evenodd",
+    d: "M3.625 8.875C3.625 8.46079 3.96079 8.125 4.375 8.125H13.375C13.7892 8.125 14.125 8.46079 14.125 8.875C14.125 9.28921 13.7892 9.625 13.375 9.625H4.375C3.96079 9.625 3.625 9.28921 3.625 8.875Z",
+    fill: "#232F46",
+    fillRule: "evenodd"
+  }));
+};
+
+exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/index.js

@@ -27,6 +27,12 @@ var _OrderSVG = _interopRequireDefault(require("./images/OrderSVG"));
 
 var _UnorderSVG = _interopRequireDefault(require("./images/UnorderSVG"));
 
+var _AlignLeftSVG = _interopRequireDefault(require("./images/AlignLeftSVG"));
+
+var _AlignCenterSVG = _interopRequireDefault(require("./images/AlignCenterSVG"));
+
+var _AlignRightSVG = _interopRequireDefault(require("./images/AlignRightSVG"));
+
 var _BulletPicker = _interopRequireDefault(require("./components/BulletPicker"));
 
 var _OrderedPicker = _interopRequireDefault(require("./components/OrderedPicker"));
@@ -63,6 +69,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var iconTypeMap = {
   bold: _BoldSVG["default"],
   italic: _ItalicSVG["default"],
@@ -94,7 +116,10 @@ var iconTypeMap = {
     return /*#__PURE__*/_react["default"].createElement(_ColorPickerBtn["default"], _extends({
       type: "text-decoration-color"
     }, props));
-  }
+  },
+  alignLeft: _AlignLeftSVG["default"],
+  alignCenter: _AlignCenterSVG["default"],
+  alignRight: _AlignRightSVG["default"]
 };
 
 var ToolBtn =
@@ -137,10 +162,10 @@ function (_super) {
       className: (0, _classnames["default"])('tool-btn-wrap', {
         active: active
       })
-    }, iconTypeMap[type]({
+    }, iconTypeMap[type](__assign({
       value: value,
       onChange: onChange
-    }));
+    }, this.props)));
   };
 
   ToolBtn.defaultProps = {};

package/lib/core/Designer/ToolBarModal/ToolBtn/index.less

@@ -1,5 +1,6 @@
 .tool-btn-wrap {
-  width: 26px;
+  width: auto;
+  min-width: 26px;
   height: 26px;
   display: flex;
   align-items: center;

package/lib/core/Designer/ToolBarModal/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fontWeightList = exports.fontSizeList = exports.fontFamilyList = exports["default"] = void 0;
+exports.fontWeightList = exports.fontSizeList = exports.fontFamilyList = exports["default"] = exports.OpenSansFontWeightList = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,8 +13,6 @@ var _ToolBtn = _interopRequireDefault(require("./ToolBtn"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
-var _UnderlineSelect = _interopRequireDefault(require("../../../meta-comp/config-panels/TextConfig/UnderlineSelect"));
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -69,6 +67,17 @@ var fontWeightList = [{
   value: '700'
 }];
 exports.fontWeightList = fontWeightList;
+var OpenSansFontWeightList = [{
+  name: 'Regular',
+  value: '400'
+}, {
+  name: 'Semibold',
+  value: '600'
+}, {
+  name: 'Bold',
+  value: '700'
+}];
+exports.OpenSansFontWeightList = OpenSansFontWeightList;
 
 var ToolBarModal =
 /** @class */
@@ -82,6 +91,7 @@ function (_super) {
       quillFormat: {}
     };
     _this.toolBarRef = /*#__PURE__*/_react["default"].createRef();
+    _this.selectedTextLength = 0;
 
     _this.setToolBarPosition = function () {
       var _a = _this.props.quillRef.container.getBoundingClientRect(),
@@ -101,6 +111,8 @@ function (_super) {
       var range = _this.props.quillRef.getSelection();
 
       if (range) {
+        _this.selectedTextLength = range.length;
+
         var quillFormat = _this.props.quillRef.getFormat();
 
         console.log('quillFormat: ', quillFormat);
@@ -108,6 +120,8 @@ function (_super) {
         _this.setState({
           quillFormat: quillFormat
         });
+      } else {
+        if (_this.selectedTextLength === 0) _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
       }
     };
 
@@ -146,6 +160,8 @@ function (_super) {
         _this.props.quillRef.format('font', value);
       } else if (type == 'font-weight') {
         _this.props.quillRef.format('font-weight', value);
+      } else if (type == 'text-align') {
+        _this.props.quillRef.format('text-align', value);
       } else if (type == 'font-style') {
         _this.props.quillRef.format('font-style', 'italic' === quillFormat['font-style'] ? '' : 'italic');
       } else if (type == 'font-family') {
@@ -155,22 +171,32 @@ function (_super) {
 
         _this.props.quillRef.format('text-decoration-style', value);
       } else if (type == 'bullet') {
-        _this.props.quillRef.format('list-style-type', value);
+        _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
+
+        if (!value || value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list-style-type', '');
 
-        if (value === quillFormat['list-style-type']) {
           _this.props.quillRef.format('list', '');
         } else {
+          _this.props.quillRef.format('list-style-type', value);
+
           _this.props.quillRef.format('list', 'bullet');
         }
       } else if (type == 'ordered') {
-        _this.props.quillRef.format('list-style-type', value);
+        _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
+
+        if (!value || value === quillFormat['list-style-type']) {
+          _this.props.quillRef.format('list-style-type', '');
 
-        if (value === quillFormat['list-style-type']) {
           _this.props.quillRef.format('list', '');
         } else {
+          _this.props.quillRef.format('list-style-type', value);
+
           _this.props.quillRef.format('list', 'ordered');
         }
       } else if (type == 'text-decoration-color') {
+        _this.props.quillRef.setSelection(0, _this.props.quillRef.getLength());
+
         if (value) {
           _this.props.quillRef.format('underline', true);
         } else {
@@ -207,6 +233,9 @@ function (_super) {
     var _this = this;
 
     var quillFormat = this.state.quillFormat;
+
+    var _fontWeightList = quillFormat['font-family'] === 'OpenSans' ? OpenSansFontWeightList : fontWeightList;
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.toolBarRef,
       className: "toolbar-wrap"
@@ -241,7 +270,7 @@ function (_super) {
         width: '150px'
       },
       value: quillFormat['font-weight']
-    }, fontWeightList.map(function (v) {
+    }, _fontWeightList.map(function (v) {
       return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         label: v.name,
         value: v.value
@@ -263,20 +292,7 @@ function (_super) {
         label: v.name,
         value: v
       }, v, "px");
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tool-item"
-    }, /*#__PURE__*/_react["default"].createElement(_UnderlineSelect["default"], {
-      onChange: function onChange(v) {
-        _this.onToolBtnClick('text-decoration-style', v);
-      },
-      placeholder: "Underline Style",
-      repeatCount: 28,
-      size: "small",
-      style: {
-        width: '140px'
-      },
-      value: quillFormat['text-decoration-style']
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "toolbar-row"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
@@ -301,6 +317,10 @@ function (_super) {
         _this.onToolBtnClick('text-decoration-color', value);
       },
       type: "text-decoration-color",
+      underlineOnChange: function underlineOnChange(value) {
+        return _this.onToolBtnClick('text-decoration-style', value);
+      },
+      underlineValue: quillFormat['text-decoration-style'],
       value: {
         color: quillFormat['text-decoration-color']
       }
@@ -350,6 +370,32 @@ function (_super) {
       className: "tooll-line"
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tool-item"
+    }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
+      active: quillFormat['text-align'] === 'left',
+      onChange: function onChange() {
+        _this.onToolBtnClick('text-align', 'left');
+      },
+      type: "alignLeft"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tool-item"
+    }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
+      active: quillFormat['text-align'] === 'center',
+      onChange: function onChange() {
+        _this.onToolBtnClick('text-align', 'center');
+      },
+      type: "alignCenter"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tool-item"
+    }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
+      active: quillFormat['text-align'] === 'right',
+      onChange: function onChange() {
+        _this.onToolBtnClick('text-align', 'right');
+      },
+      type: "alignRight"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tooll-line"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tool-item"
     }, /*#__PURE__*/_react["default"].createElement(_ToolBtn["default"], {
       onChange: function onChange(value) {
         _this.onToolBtnClick('link', value);

package/lib/core/Designer/ToolBarModal/index.less

@@ -14,13 +14,14 @@
 
   .tool-item {
     margin: 0 5px;
+    display: flex;
   }
 
   .tooll-line {
     display: inline-flex;
     width: 1px;
-    height: 24px;
-    background-color: rgba(0, 0, 0, .04);
+    height: 16px;
+    background-color: #C1C9D7;
     margin: 0 5px;
   }
 

package/lib/core/Designer/index.js

@@ -263,6 +263,7 @@ window.magicDesign = {
 
 var setDesignConfig = function setDesignConfig(data) {
   window.magicDesign = __assign(__assign(__assign({}, window.magicDesign), data), {
+    designMode: true,
     compWidth: Number(data.compWidth),
     compSpacing: Number(data.compSpacing),
     MBaseUrl: data.MBaseUrl || 'operation/v1',
@@ -271,6 +272,13 @@ var setDesignConfig = function setDesignConfig(data) {
 };
 
 var debug = require('debug')('worker:Designer');
+
+_antd.message.config({
+  getContainer: function getContainer() {
+    return document.querySelector('[magic_design]');
+  },
+  prefixCls: 'cylon-message'
+});
 /**
  * @class Designer
  * 主入口。
@@ -459,7 +467,9 @@ function (_super) {
       var _a = _this.props,
           onPublish = _a.onPublish,
           onSave = _a.onSave,
-          onPreviews = _a.onPreviews;
+          onPreviews = _a.onPreviews,
+          onPush = _a.onPush,
+          onSetAsTemp = _a.onSetAsTemp;
       var _b = _this.state,
           device = _b.device,
           MPageData = _b.MPageData;
@@ -494,6 +504,14 @@ function (_super) {
 
           break;
 
+        case _constants.quickMenuCode.PUSH:
+          onPush(handleParams);
+          break;
+
+        case _constants.quickMenuCode.SET_AS_TEMPLATE:
+          onSetAsTemp(handleParams);
+          break;
+
         case _constants.quickMenuCode.PUBLISH:
           onPublish(handleParams);
           break;
@@ -510,6 +528,9 @@ function (_super) {
           break;
 
         case _constants.quickMenuCode.SAVE:
+          /** 如果保存则重置为mobile，同一移动端截图 #10504010 */
+          _this.onSwitchDevice(_constants.deviceTypeMap.PHONE);
+
           onSave(handleParams);
           break;
 
@@ -583,6 +604,7 @@ function (_super) {
         onHtmlBack: _this.onHtmlBack,
         onHtmlSave: _this.onHtmlSave,
         outputType: _this.props.outputType,
+        pageType: _this.props.pageType,
         redoDisable: !_this.history.redoAble(),
         undoDisable: !_this.history.undoAble()
       });
@@ -741,7 +763,8 @@ function (_super) {
         pageName = _b.pageName,
         onCancelPublish = _b.onCancelPublish,
         leftTitle = _b.leftTitle,
-        outputType = _b.outputType;
+        outputType = _b.outputType,
+        pageType = _b.pageType;
     var renderPagesManage = pagesManager;
 
     if (outputType == 'html') {
@@ -765,6 +788,7 @@ function (_super) {
       onAdd: this.onAdd,
       pageData: MPageData,
       pageName: pageName,
+      pageType: pageType,
       renderPagesManage: renderPagesManage,
       setPageData: this.setPageData
     }), /*#__PURE__*/_react["default"].createElement(_CompListPanel["default"], {

package/lib/core/Renderer/index.js

@@ -15,10 +15,16 @@ var _componentTypes = require("../../constants/component-types");
 
 var _coreUtil = require("../../utils/coreUtil");
 
+var _mobx = require("../../mobx");
+
+var _common = require("../../common");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -37,11 +43,13 @@ var __assign = void 0 && (void 0).__assign || function () {
 
 var setDesignConfig = function setDesignConfig(props) {
   var config = props.config,
-      device = props.device;
+      device = props.device,
+      isPreview = props.isPreview;
   window.magicDesign = __assign(__assign({
     pageBackground: '#f2f2f2',
     mode: 'renderer',
     device: device,
+    designMode: isPreview,
     navigatePreUrl: ''
   }, config), {
     compSpacing: Number(config.compSpacing),
@@ -56,40 +64,43 @@ var setDesignConfig = function setDesignConfig(props) {
 var Renderer = function Renderer(props) {
   var pageData = props.pageData,
       outputType = props.outputType,
-      noSetWindow = props.noSetWindow;
+      noSetWindow = props.noSetWindow,
+      isPreview = props.isPreview;
+
+  var _a = (0, _react.useState)([]),
+      floors = _a[0],
+      setFloors = _a[1];
+
+  var _b = (0, _react.useState)(_mobx.frameStore.modalState),
+      modalState = _b[0],
+      setModalState = _b[1];
 
   if (!noSetWindow) {
     setDesignConfig(props);
   }
 
   window.magicDesignPageData = pageData;
-  var pageBackground = window.magicDesign.pageBackground; // 根据楼层展示设备进行过滤
-
-  var filterCompFloor = function filterCompFloor() {
-    var source = [];
+  var pageBackground = window.magicDesign.pageBackground;
+  (0, _react.useEffect)(function () {
+    console.log('----pageData change', pageData);
+    var filterData = [];
 
     if (pageData && pageData.childNodes && pageData.childNodes.length) {
-      source = pageData.childNodes.filter(function (node) {
+      filterData = pageData.childNodes.filter(function (node) {
         return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
       });
-    }
+    } // 首页组建分批渲染按5个一组
 
-    return source;
-  };
 
+    setFloors(filterData.slice(0, 5));
+    setTimeout(function () {
+      setFloors(filterData.slice(0, 10));
+      setTimeout(function () {
+        setFloors(filterData);
+      }, 200);
+    }, 200);
+  }, [pageData]);
   (0, _react.useEffect)(function () {
-    // const data = await fishFetch('/h5/ga/mediaid', {}, 'GET');
-    (0, _commonUtil.importAsync)('https://www.googletagmanager.com/gtag/js?id=G-7B9GSSLVX3', 'js').then(function () {
-      window.dataLayer = window.dataLayer || [];
-
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-
-      gtag('js', new Date());
-      gtag('config', 'G-7B9GSSLVX3');
-      window.gtag = gtag;
-    });
     setTimeout(function () {
       var _a;
 
@@ -99,15 +110,44 @@ var Renderer = function Renderer(props) {
       });
     }, 300);
   });
+  (0, _react.useEffect)(function () {
+    var disposer = (0, _mobx.autorun)(function () {
+      setModalState(_mobx.frameStore.modalState);
+    });
+    return function () {
+      disposer();
+    };
+  }, []); // 传入空数组表示仅在组件挂载和卸载时执行
+
+  /** 弹窗关闭 */
+
+  var onCloseModal = function onCloseModal() {
+    _mobx.frameStore.setState({
+      modalState: {
+        visible: false
+      }
+    });
+  };
+
+  var getRestStyle = function getRestStyle() {
+    if (modalState.visible) {
+      return {
+        position: 'relative',
+        overflow: 'hidden'
+      };
+    }
+
+    return {};
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "render_wrap",
     magic_design: "",
-    style: {
+    style: __assign({
       height: '100%',
-      background: pageBackground,
-      overflow: 'auto'
-    }
-  }, filterCompFloor().map(function (nodeData, moduleIndex) {
+      background: pageBackground
+    }, getRestStyle())
+  }, floors.length > 0 && floors.map(function (nodeData, moduleIndex) {
     var Clazz = _componentTypes.componentMap[nodeData.type];
 
     if (!Clazz) {
@@ -129,13 +169,18 @@ var Renderer = function Renderer(props) {
       key: nodeData.id,
       id: 'node-' + nodeData.id
     }, /*#__PURE__*/_react["default"].createElement(Clazz, __assign({}, newInstanceProps), null));
-  }));
+  }), modalState.visible && /*#__PURE__*/_react["default"].createElement(_common.MyModal, _extends({
+    isPreview: isPreview
+  }, modalState, {
+    onClose: onCloseModal
+  })));
 };
 
 Renderer.defaultProps = {
   pageData: {},
   device: 'pc',
-  config: {}
+  config: {},
+  isPreview: false
 };
 var _default = Renderer;
 exports["default"] = _default;