@fonixtree/magic-design 0.1.78 → 0.1.80

package/es/constants/layout.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.videoPCLayout = exports.videoH5Layout = exports.searchLayout = exports.recommendLayoutPc = exports.recommendLayoutMobile = exports.pcNavigationLayout = exports.newsletterLayout = exports.mobileNavigationLayout = exports.locationLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = exports.WalletLayout = void 0;
+exports.videoPCLayout = exports.videoH5Layout = exports.searchLayout = exports.recommendLayoutPc = exports.recommendLayoutMobile = exports.pcNavigationLayout = exports.newsletterLayout = exports.mobileNavigationLayout = exports.locationLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = exports.affiliateLayoutPc = exports.affiliateLayoutMobile = exports.WalletNuriLayout = exports.WalletLayout = void 0;
 
 var _dividerLayout = _interopRequireDefault(require("../assets/images/layout-icon/dividerLayout.svg"));
 
@@ -13,8 +13,12 @@ var _imageGalleryLayout = _interopRequireDefault(require("../assets/images/layou
 
 var _imageGalleryLayout2 = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout2.png"));
 
+var _walletNuriLayout = _interopRequireDefault(require("../assets/images/layout-icon/walletNuriLayout1.png"));
+
 var _walletLayout = _interopRequireDefault(require("../assets/images/layout-icon/walletLayout1.png"));
 
+var _walletLayout2 = _interopRequireDefault(require("../assets/images/layout-icon/walletLayout2.png"));
+
 var _layoutImagetextM = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-1.png"));
 
 var _layoutImagetextM2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-2.png"));
@@ -112,8 +116,18 @@ var WalletLayout = [{
   id: 'layout1',
   name: 'layout1',
   image: _walletLayout["default"]
+}, {
+  id: 'layout2',
+  name: 'layout2',
+  image: _walletLayout2["default"]
 }];
 exports.WalletLayout = WalletLayout;
+var WalletNuriLayout = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _walletNuriLayout["default"]
+}];
+exports.WalletNuriLayout = WalletNuriLayout;
 var carouselLayout = [{
   id: 'layout1',
   name: 'layout1',
@@ -214,6 +228,39 @@ var recommendLayoutPc = [{
   image: _layoutRecommend5["default"]
 }];
 exports.recommendLayoutPc = recommendLayoutPc;
+var affiliateLayoutMobile = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _layoutRecommend["default"]
+}, {
+  id: 'layout2',
+  name: 'layout2',
+  image: _layoutRecommend2["default"]
+}, // { id: 'layout3', name: 'layout3', image: recommendLayout3 },
+{
+  id: 'layout4',
+  name: 'layout4',
+  image: _layoutRecommend4["default"]
+}, {
+  id: 'layout5',
+  name: 'layout5',
+  image: _layoutRecommend5["default"]
+}];
+exports.affiliateLayoutMobile = affiliateLayoutMobile;
+var affiliateLayoutPc = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _layoutRecommend3["default"]
+}, {
+  id: 'layout2',
+  name: 'layout2',
+  image: _layoutRecommend4["default"]
+}, {
+  id: 'layout3',
+  name: 'layout3',
+  image: _layoutRecommend5["default"]
+}];
+exports.affiliateLayoutPc = affiliateLayoutPc;
 var videoPCLayout = [{
   id: 'layout1',
   name: 'layout1',

package/es/core/Designer/ChatRobot/components/SearchCondition/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SearchCondition;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var toneList = ['Concise', 'Formal', 'Youthful', 'Innovative', 'Enticing'];
+
+function SearchCondition() {
+  var _a = (0, _react.useState)('Concise'),
+      tone = _a[0],
+      setTone = _a[1];
+
+  var _b = (0, _react.useState)('30'),
+      count = _b[0],
+      setCount = _b[1];
+
+  var _c = (0, _react.useState)(''),
+      features = _c[0],
+      setFeatures = _c[1];
+
+  var _d = (0, _react.useState)(''),
+      key = _d[0],
+      setKey = _d[1];
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "condition_wrap"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_title"
+  }, "Detailed description"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "Preferred tone of the description?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, toneList.map(function (name) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('tone_item', {
+        tone_active: tone === name
+      }),
+      onClick: function onClick() {
+        return setTone(name);
+      }
+    }, name);
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "Desired word count range?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+    allowClear: true,
+    defaultValue: "30",
+    onChange: function onChange(e) {
+      return setCount(e);
+    },
+    options: [{
+      value: '30',
+      label: '30'
+    }, {
+      value: '50',
+      label: '50'
+    }, {
+      value: '70',
+      label: '70'
+    }],
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "What are the key features?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+    onChange: function onChange(e) {
+      return setFeatures(e.target.value);
+    },
+    value: features
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item_label"
+  }, "What key details should be emphasized?"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "cond_value"
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+    onChange: function onChange(e) {
+      return setKey(e.target.value);
+    },
+    value: key
+  }))));
+}

package/es/core/Designer/ChatRobot/components/SearchCondition/index.less

@@ -0,0 +1,33 @@
+.condition_wrap {
+  padding: 12px 12px 0 12px;
+  .cond_title { 
+    font-family: Open Sans;
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  .cond_item {
+    margin-bottom: 16px;
+    .item_label {
+      font-family: Open Sans;
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .cond_value {
+      .tone_item {
+        cursor: pointer;
+        margin-right: 8px;
+        padding: 7px 10px;
+        height: 32px;
+        border: 1px solid #D2D9E5;
+        border-radius: 100px;
+      }
+      .tone_active {
+        background-color: #E9F0FF;
+        color: #2F54EB;
+        border-color: #D6E4FF;
+      }
+    }
+  }
+}

package/es/core/Designer/ChatRobot/index.js

@@ -15,6 +15,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _CopyBtn = _interopRequireDefault(require("./components/CopyBtn"));
 
+var _SearchCondition = _interopRequireDefault(require("./components/SearchCondition"));
+
 var _common = require("../../../common");
 
 var _FonixtreeGpt = _interopRequireDefault(require("../FonixtreeGpt"));
@@ -59,6 +61,8 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var TextArea = _antd.Input.TextArea;
+
 var ChatRobot =
 /** @class */
 function (_super) {
@@ -73,7 +77,8 @@ function (_super) {
       context: [],
       isGenerating: false,
       aiImageVisible: false,
-      loading: true
+      loading: true,
+      showCondition: true
     };
 
     _this.scrollBottom = function () {
@@ -195,7 +200,8 @@ function (_super) {
         open = _a.open,
         isGenerating = _a.isGenerating,
         aiImageVisible = _a.aiImageVisible,
-        loading = _a.loading;
+        loading = _a.loading,
+        showCondition = _a.showCondition;
 
     if (loading) {
       return null;
@@ -218,14 +224,17 @@ function (_super) {
       closable: false,
       footer: /*#__PURE__*/_react["default"].createElement("div", {
         className: "dialog_bottom"
-      }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bottom_input"
+      }, /*#__PURE__*/_react["default"].createElement(TextArea, {
+        autoSize: true,
+        className: "text_area",
         onChange: this.onMessageChage,
         onPressEnter: this.onEnter,
         placeholder: "Send a message",
         value: message
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "btn_wrap"
-      }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      }), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+        className: "image_btn",
         color: "#2F54EB",
         onClick: this.generateImage,
         size: 20,
@@ -234,14 +243,21 @@ function (_super) {
         },
         type: "icon-image"
       }), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-        color: message.length > 0 ? '#2F54EB' : '#C1C9D7',
-        onClick: this.onEnter,
-        size: 20,
-        style: {
-          cursor: 'pointer'
+        className: "toggle_btn",
+        color: "#2F54EB",
+        onClick: function onClick() {
+          return _this.setState({
+            showCondition: !showCondition
+          });
         },
-        type: message.length > 0 ? 'icon-send1' : 'icon-send'
-      }))),
+        size: 24,
+        type: showCondition ? 'icon-circle-down' : 'icon-circle-up'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])('generate_btn', {
+          disable_btn: message.length === 0
+        }),
+        onClick: this.onEnter
+      }, "Generate")),
       footerStyle: {
         padding: 12
       },
@@ -311,6 +327,8 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
       spinning: true
     }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "regenerate_btn_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "regenerate_btn",
       onClick: this.onRegenarate
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
@@ -321,7 +339,11 @@ function (_super) {
         marginRight: 5
       },
       type: "icon-refresh"
-    }), "Regenerate Response"))), /*#__PURE__*/_react["default"].createElement(_AiImageGenerator["default"], {
+    }), "Regenerate Response")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('more_condition', {
+        more_condition_hide: !showCondition
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_SearchCondition["default"], null)))), /*#__PURE__*/_react["default"].createElement(_AiImageGenerator["default"], {
       onClose: function onClose() {
         return _this.setState({
           aiImageVisible: false

package/es/core/Designer/ChatRobot/index.less

@@ -32,12 +32,15 @@
     }
   }
   .chat_content_wrap {
+    display: flex;
+    flex-direction: column;
     position: relative;
-    padding-bottom: 40px;
     height: 100%;
     .content_wrap {
+      background: #F5F6F7;
+      flex: 1;
       padding: 16px;
-      height: 100%;
+      // height: 100%;
       overflow: scroll;
       font-family: 'Open Sans';
       font-size: 14px;
@@ -78,16 +81,18 @@
         display: flex;
         justify-content: flex-end;
         .messageWrap {
+          border: 1px solid #E6EAF0;
           border-radius: 4px;
-          background: #E9F0FF;
-          color: #2F54EB;
+          background: #FFF;
+          color: #232F46;
         }
       }
       .assistantMessage {
         .messageWrap {
           border-radius: 4px;
-          background: #F5F6F7;
-          color: #232F46;
+          background: #E9F0FF;
+          color: #2F54EB;
+          border: 1px solid #D6E4FF;
         }
       }
       .recent_response {
@@ -101,38 +106,74 @@
         }
       }
     }
-    .regenerate_btn {
+
+    .regenerate_btn_wrap {
+      background: #F5F6F7;
       display: flex;
       align-items: center;
-      position: absolute;
-      bottom: 10px;
-      border: 1px solid #E6EAF0;
-      border-radius: 4px;
-      padding: 4px 12px;
-      left: 50%;
-      transform: translateX(-50%);
-      cursor: pointer;
-      font-family: 'Open Sans';
-      font-style: normal;
-      font-weight: 400;
-      font-size: 13px;
+      justify-content: center;
+      padding-bottom: 12px;
+      .regenerate_btn {
+        background-color: #FFF;
+        bottom: 10px;
+        border: 1px solid #E6EAF0;
+        border-radius: 4px;
+        padding: 4px 12px;
+        cursor: pointer;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 13px;
+      }
+    }
+    
+    .more_condition {
+      transition: all 0.4s;
+      max-height: 400px;
+      overflow: hidden;
+      box-shadow: 3px 3px 8px 0px #2D304008;
+      box-shadow: -3px -3px 8px 0px #2D304008;
+    }
+    .more_condition_hide {
+      max-height: 0;
     }
   }
   .dialog_bottom {
     position: relative;
     font-size: 14px;
-    input {
-      padding-right: 60px !important;
+    .bottom_input{
+      display: flex;
+      align-items: flex-start;
+      .text_area {
+        max-height: 200px;
+        padding-right: 30px;
+      }
+      .image_btn {
+        position: absolute;
+        right: 40px;
+        top: 6px;
+      }
+      .toggle_btn {
+        padding: 4px 0 4px 10px;
+        cursor: pointer;
+      }
     }
-    .btn_wrap {
-      position: absolute;
-      right: 15px;
-      top: 0px;
-      width: 50px;
-      height: 36px;
+    .generate_btn {
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
+      margin-top: 8px;
+      height: 36px;
+      background: #2F54EB;
+      border-radius: 6px;
+      color:#FFF;
+      font-family: Open Sans;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .disable_btn {
+      background: #C1C9D7;
     }
   }
 }

package/es/core/Designer/ConfigPanel/index.js

@@ -81,7 +81,6 @@ var getSecondConfigName = function getSecondConfigName(selectedNode, clickedGrou
 
   switch (selectedNode.type) {
     case 'IMAGE_GALLERY':
-    case 'WALLET':
     case 'BANNER':
       groupName = ''; // if (!groupName) {
       //   groupName = isPc() ? panelProps.image?.content?.pcName : panelProps.image?.content?.h5Name;
@@ -109,10 +108,13 @@ var getSecondConfigName = function getSecondConfigName(selectedNode, clickedGrou
       break;
 
     case 'TEXT':
+    case 'WALLET':
       groupName = panelProps.title.text;
       break;
 
     case 'RECOMMEND':
+    case 'AFFILIATE_RECOMMEND':
+      // console.log('RECOMMEND ---panelProps.groupName.text', panelProps.groupName.text);
       groupName = panelProps.groupName.text;
       break;
 
@@ -374,8 +376,11 @@ function (_super) {
       onClick: this.onSecConfigBack,
       type: "icon"
     })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "title"
-    }, getSecondConfigName(selectedNode, clickedGroup))), this.getSecondConfigInstance()));
+      className: "title",
+      dangerouslySetInnerHTML: {
+        __html: getSecondConfigName(selectedNode, clickedGroup)
+      }
+    })), this.getSecondConfigInstance()));
   };
 
   return ConfigPanel;

package/es/core/Designer/History/index.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
-var _lodash = require("lodash");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -79,7 +79,7 @@ function () {
       _this.doAction(callback);
     };
 
-    this.doAction = (0, _lodash.debounce)(function (callback) {
+    this.doAction = (0, _debounce["default"])(function (callback) {
       var newCursor = _this.cursor + _this.step;
       _this.cursor = newCursor;
       var newData = (0, _cloneDeep["default"])(_this.list[newCursor]);

package/es/core/Designer/PageCompList/index.js

@@ -15,7 +15,9 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _lodash = require("lodash");
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
+
+var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
 
 var _common = require("../../../common");
 
@@ -61,7 +63,8 @@ function PageCompList(_a) {
       pageData = _a.pageData,
       onAdd = _a.onAdd,
       renderPagesManage = _a.renderPagesManage,
-      pageName = _a.pageName;
+      pageName = _a.pageName,
+      pageType = _a.pageType;
 
   var _b = (0, _react.useState)(pageData || []),
       components = _b[0],
@@ -139,7 +142,7 @@ function PageCompList(_a) {
 
   var getLastSameIndex = function getLastSameIndex(comps, index) {
     var lastComps = comps.slice(0, index);
-    var newIndex = (0, _lodash.findLastIndex)(lastComps, function (comp) {
+    var newIndex = (0, _findLastIndex["default"])(lastComps, function (comp) {
       return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
     });
     return newIndex;
@@ -147,7 +150,7 @@ function PageCompList(_a) {
 
   var getNextSameIndex = function getNextSameIndex(comps, index) {
     var nextComps = comps.slice(index + 1);
-    var newIndex = (0, _lodash.findIndex)(nextComps, function (comp) {
+    var newIndex = (0, _findIndex["default"])(nextComps, function (comp) {
       return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
     });
     return newIndex + index + 1;
@@ -313,7 +316,7 @@ function PageCompList(_a) {
     className: "page-comp-list"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "title mb16"
-  }, pageName), /*#__PURE__*/_react["default"].createElement(_common.Button, {
+  }, pageName), pageType !== 'Menu' && /*#__PURE__*/_react["default"].createElement(_common.Button, {
     icon: "icon-add",
     onClick: onAdd,
     size: "large",

package/es/core/Designer/QuickMenuBar/index.js

@@ -116,7 +116,8 @@ function (_super) {
         language = _a.language,
         outputType = _a.outputType,
         onHtmlSave = _a.onHtmlSave,
-        onHtmlBack = _a.onHtmlBack;
+        onHtmlBack = _a.onHtmlBack,
+        pageType = _a.pageType;
     var languageTemp = langBook[language] || {};
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "quick_menu_wrap"
@@ -138,7 +139,7 @@ function (_super) {
       className: "menu_center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "device_group"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, pageType !== 'Menu' && /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('device_pc', {
         active: device === _constants.deviceTypeMap.PC
       }),
@@ -150,7 +151,8 @@ function (_super) {
       type: "icon-pc"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('device_phone', {
-        active: device === _constants.deviceTypeMap.PHONE
+        active: device === _constants.deviceTypeMap.PHONE,
+        only_mobile: pageType === 'Menu'
       }),
       "data-code": _constants.quickMenuCode.MODE_PHONE,
       onClick: this.onBtnClick

package/es/core/Designer/QuickMenuBar/index.less

@@ -61,6 +61,10 @@
         align-items: center;
         justify-content: center;
       }
+      .only_mobile {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
 
       .active {
         background: #E9F0FF;

package/es/core/Designer/RenderHtml/index.js

@@ -58,21 +58,24 @@ function (_super) {
         _this.setState({
           renderProps: renderProps
         }, function () {
-          document.querySelector('#render-html-wrap > div').style = 'max-width:600px;margin:auto;';
-          /** 去除设计器模式下元素 */
-
-          document.querySelectorAll('#render-html-wrap > div .composite_mask').forEach(function (el) {
-            el.remove();
-          });
-          var html = document.querySelector('#render-html-wrap').innerHTML;
-          /** 处理背景图资源引号问题 */
-
-          html = html.replace(/url\("((\S|\s)*)"\)/g, 'url($1)');
-          resolve(html);
-
-          _this.setState({
-            renderProps: null
-          });
+          /** 兼容分批加载 */
+          setTimeout(function () {
+            document.querySelector('#render-html-wrap > div').style = 'max-width:600px;margin:auto;';
+            /** 去除设计器模式下元素 */
+
+            document.querySelectorAll('#render-html-wrap > div .composite_mask').forEach(function (el) {
+              el.remove();
+            });
+            var html = document.querySelector('#render-html-wrap').innerHTML;
+            /** 处理背景图资源引号问题 */
+
+            html = html.replace(/url\("((\S|\s)*)"\)/g, 'url($1)');
+            resolve(html);
+
+            _this.setState({
+              renderProps: null
+            });
+          }, 1000);
         });
       });
     };

package/es/core/Designer/RenderHtml/index.less

@@ -1,5 +1,5 @@
 #render-html-wrap {
   position: fixed;
-  top: 10px;
+  top: -99999px;
   left: 0;
 }