@fonixtree/magic-design 2.0.9 → 2.0.11

package/es/assets/images/layout-icon/imageTextLeft.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
+<path d="M53.0322 29H84.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<path d="M53.0322 39H79.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<rect x="11.0322" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
+</svg>

package/es/assets/images/layout-icon/imageTextRight.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
+<path d="M11 29H42" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<path d="M11 39H37" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<rect x="48" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
+</svg>

package/es/composite-comp/bol/components/CustomCode/defaultJSON.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var getDefaultJSON = function getDefaultJSON() {
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'CUSTOM_CODE',
+    content: {
+      pcHtml: '',
+      h5Html: ''
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;

package/es/composite-comp/bol/components/CustomCode/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultJSON = require("./defaultJSON");
+
+var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
+
+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; }
+
+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); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  }
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+var CustomCode =
+/** @class */
+function (_super) {
+  __extends(CustomCode, _super);
+
+  function CustomCode() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.htmlTemp = '';
+
+    _this.createHtml = function () {
+      var nodeData = _this.props.nodeData;
+      console.log('----nodeData', nodeData);
+      var htmlCode = window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html;
+      _this.htmlTemp = htmlCode;
+
+      if (document.getElementById('custom-wrap')) {
+        document.getElementById('custom-wrap').innerHTML = htmlCode;
+      }
+    };
+
+    return _this;
+  }
+
+  CustomCode.prototype.componentDidMount = function () {
+    this.createHtml();
+  };
+
+  CustomCode.prototype.componentWillReceiveProps = function (prevProps) {
+    console.log('111111');
+
+    if (window.magicDesign.device === 'pc') {
+      console.log('22222222');
+
+      if (prevProps.nodeData.content.pcHtml != this.props.nodeData.content.pcHtml) {
+        console.log('4444444');
+        this.createHtml();
+      }
+    } else {
+      console.log('3333333333', this.htmlTemp, this.props.nodeData.content);
+
+      if (this.htmlTemp != this.props.nodeData.content.h5Html) {
+        console.log('5555555');
+        this.createHtml();
+      }
+    }
+  };
+
+  CustomCode.prototype.render = function () {
+    // const { nodeData } = this.props;
+    // console.log('----nodeData', nodeData);
+    return (
+      /*#__PURE__*/
+      // <div dangerouslySetInnerHTML={{ __html: window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html }} />
+      _react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        id: "custom-wrap"
+      }), /*#__PURE__*/_react["default"].createElement("a", {
+        href: "https://www.baidu.com"
+      }, "baidu11 "))
+    );
+  };
+
+  CustomCode.defaultProps = {};
+  CustomCode.type = 'CUSTOM_CODE';
+  CustomCode.getDefaultJSON = _defaultJSON.getDefaultJSON;
+  CustomCode = __decorate([_compositeDecorator["default"]], CustomCode);
+  return CustomCode;
+}(_react.Component);
+
+var _default = CustomCode;
+exports["default"] = _default;

package/es/composite-comp/bol/components/ImageText/pc/index.js

@@ -111,12 +111,24 @@ function (_super) {
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
       var cardStyle = {
-        width: _this.calcWidth(data.customize.pcRowNum),
-        marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
         alignItems: _AlignSelector.alignItemMap[data.customize.align],
         textAlign: data.customize.align
       };
+
+      if (data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage') {
+        if ((data === null || data === void 0 ? void 0 : data.groupSource.length) > 1 && i != (data === null || data === void 0 ? void 0 : data.groupSource.length) - 1) {
+          cardStyle.marginBottom = 48;
+        }
+
+        cardStyle.alignItems = 'center';
+      } else {
+        cardStyle.marginRight = (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0;
+        cardStyle.width = _this.calcWidth(data.customize.pcRowNum);
+        cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
+      }
+
       var wrapStyle = (0, _businessUtil.computeStyle)(source, window.magicDesign.device);
+      console.log('cc wrapStyle', source, wrapStyle);
       var hoverIndex = _this.state.hoverIndex;
       var hoverStyle = {};
 
@@ -127,6 +139,86 @@ function (_super) {
       return __assign(__assign(__assign({}, cardStyle), wrapStyle), hoverStyle);
     };
 
+    _this.getContentStyle = function () {
+      var data = _this.props.data;
+      return {
+        alignItems: _AlignSelector.alignItemMap[data.customize.align]
+      };
+    };
+
+    _this.getAnotherLayout = function () {
+      var data = _this.props.data;
+      var hoverIndex = _this.state.hoverIndex;
+      var GAData = (0, _commonUtil.getGAData)(data);
+      console.log('ff--image text', data);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "group-wrap"
+      }, data.groupSource.map(function (source, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: source.id,
+          className: "one-card",
+          onMouseEnter: function onMouseEnter() {
+            if (source.hover.open) {
+              _this.setState({
+                hoverIndex: i
+              });
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            _this.setState({
+              hoverIndex: -1
+            });
+          },
+          style: _this.getCardStyle(source, i)
+        }, (source.image.open && hoverIndex != i || hoverIndex == i && source.hover.image.open) && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-image-wrap"
+        }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+          className: "card-image",
+          data: hoverIndex == i ? source.hover.image : source.image,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          }),
+          maxWidth: 654,
+          minWidth: 300,
+          scale: 0.5
+        })), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "content-wrap",
+          style: _this.getContentStyle()
+        }, (source.title.open && hoverIndex != i || hoverIndex == i && source.hover.title.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-title",
+          data: hoverIndex == i ? source.hover.title : source.title,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.text.open && hoverIndex != i || hoverIndex == i && source.hover.text.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-text",
+          data: hoverIndex == i ? source.hover.text : source.text,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-btn-wrap"
+        }, (source.button.open && hoverIndex != i || source.hover.button.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-first-btn",
+          data: hoverIndex == i ? source.hover.button : source.button,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.secondButton.open && hoverIndex != i || source.hover.secondButton.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-second-btn",
+          data: hoverIndex == i ? source.hover.secondButton : source.secondButton,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }))));
+      })));
+    };
+
     return _this;
   }
 
@@ -163,7 +255,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('image-text-pc', data.customize.layout.pcLayout),
       style: wrapStyle
-    }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage' ? this.getAnotherLayout() : (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "group-wrap"
     }, data.groupSource.map(function (source, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {

package/es/composite-comp/bol/components/ImageText/pc/index.less

@@ -116,3 +116,35 @@
     }
   }
 }
+
+
+.leftImage .group-wrap .one-card {
+  flex-direction: row;
+  .card-image-wrap  .card-image {
+    margin: 0 32px 0 0;
+  }
+}
+.rightImage .group-wrap .one-card {
+  flex-direction: row-reverse;
+  .card-image-wrap  .card-image {
+    margin: 0 0 0 32px;
+  }
+}
+
+.leftImage, .rightImage {
+  padding: 48px 108px;
+  .group-wrap {
+    flex-direction: column;
+    .one-card {
+      // flex-direction: row;
+      .card-image-wrap {
+        width: fit-content;
+      }
+      .content-wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}

package/es/composite-comp/bol/config-panels/CustomCodeConfig/MyEditor/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactAce = _interopRequireDefault(require("react-ace"));
+
+require("ace-builds/src-noconflict/mode-html");
+
+require("ace-builds/src-noconflict/mode-javascript");
+
+require("ace-builds/src-noconflict/theme-github");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// 可选的主题样式
+var MyEditor = function MyEditor(props) {
+  var value = props.value,
+      changeVal = props.changeVal,
+      blurArea = props.blurArea;
+  return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
+    editorProps: {
+      $blockScrolling: true
+    },
+    mode: "html",
+    name: "editor",
+    onBlur: blurArea,
+    onChange: changeVal,
+    style: {
+      width: '100%'
+    },
+    theme: "github",
+    value: value
+  });
+};
+
+var _default = MyEditor;
+exports["default"] = _default;

package/es/composite-comp/bol/config-panels/CustomCodeConfig/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _MyEditor = _interopRequireDefault(require("./MyEditor"));
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
+
+var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
+
+var _locale = require("../../../../locale");
+
+var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
+
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var CustomCodeConfig =
+/** @class */
+function (_super) {
+  __extends(CustomCodeConfig, _super);
+
+  function CustomCodeConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.changeVal = function (v) {
+      var data = _this.props.data;
+
+      if ((0, _coreUtil.isPc)()) {
+        data.content.pcHtml = v;
+      } else {
+        data.content.h5Html = v;
+      }
+    };
+
+    _this.blurArea = function () {
+      _this.selfRender();
+    };
+
+    return _this;
+  }
+
+  CustomCodeConfig.prototype.render = function () {
+    var data = this.props.data;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: 'content',
+        name: (0, _locale.i18n)('CONTENT'),
+        value: /*#__PURE__*/_react["default"].createElement(_MyEditor["default"], {
+          blurArea: this.blurArea,
+          changeVal: this.changeVal,
+          value: (0, _coreUtil.isPc)() ? data.content.pcHtml : data.content.h5Html
+        })
+      }, {
+        key: 'spacing',
+        name: (0, _locale.i18n)('SPACING'),
+        value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+          data: data.spacing
+        })
+      }, {
+        key: 'background',
+        name: (0, _locale.i18n)('BACKGROUND'),
+        value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
+          data: data.background
+        })
+      }],
+      type: "triangle"
+    }));
+  };
+
+  return CustomCodeConfig;
+}(_BaseConfig["default"]);
+
+var _default = CustomCodeConfig;
+exports["default"] = _default;

package/es/constants/component-types.js

@@ -27,6 +27,8 @@ var _Video = _interopRequireDefault(require("../composite-comp/bol/components/Vi
 
 var _Wallet = _interopRequireDefault(require("../composite-comp/bol/components/Wallet"));
 
+var _CustomCode = _interopRequireDefault(require("../composite-comp/bol/components/CustomCode"));
+
 var _FlashDeal = _interopRequireDefault(require("../composite-comp/dito/components/FlashDeal"));
 
 var _SearchBar = _interopRequireDefault(require("../composite-comp/dito/components/SearchBar"));
@@ -59,6 +61,8 @@ var _TagCompConfig = _interopRequireDefault(require("../composite-comp/bol/confi
 
 var _VideoConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/VideoConfig"));
 
+var _CustomCodeConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/CustomCodeConfig"));
+
 var _WalletConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/WalletConfig"));
 
 var _FlashDealConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/FlashDealConfig"));
@@ -105,13 +109,13 @@ var _a, _b, _c; // 组件
 /**
  * 渲染组件索引
  */
-var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Video["default"].type] = _Video["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_SignBoard["default"].type] = _SignBoard["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_PcNavigation["default"].type] = _PcNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a[_Wallet["default"].type] = _Wallet["default"], _a);
+var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Video["default"].type] = _Video["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_SignBoard["default"].type] = _SignBoard["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_PcNavigation["default"].type] = _PcNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a[_Wallet["default"].type] = _Wallet["default"], _a[_CustomCode["default"].type] = _CustomCode["default"], _a);
 /**
  * 一级配置面板索引
  */
 
 exports.componentMap = componentMap;
-var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Video["default"].type] = _VideoConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_SignBoard["default"].type] = _SignBoardConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_PcNavigation["default"].type] = _PcNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b[_Wallet["default"].type] = _WalletConfig["default"], _b);
+var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Video["default"].type] = _VideoConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_SignBoard["default"].type] = _SignBoardConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_PcNavigation["default"].type] = _PcNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b[_Wallet["default"].type] = _WalletConfig["default"], _b[_CustomCode["default"].type] = _CustomCodeConfig["default"], _b);
 /**
  * 二级配置面板索引
  */

package/es/constants/index.js

@@ -129,6 +129,10 @@ var compInfoMap = {
     name: 'Image and Text',
     icon: 'icon-filled-image'
   },
+  CUSTOM_CODE: {
+    name: 'Custom Code',
+    icon: 'icon-html'
+  },
   RECOMMEND: {
     name: 'Recommend',
     icon: 'icon-forms'

package/es/constants/layout.js

@@ -37,6 +37,10 @@ var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout
 
 var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
 
+var _imageTextLeft = _interopRequireDefault(require("../assets/images/layout-icon/imageTextLeft.svg"));
+
+var _imageTextRight = _interopRequireDefault(require("../assets/images/layout-icon/imageTextRight.svg"));
+
 var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
 
 var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
@@ -128,6 +132,14 @@ var imageTextLayoutPc = [{
   id: 'layout3',
   name: 'center',
   image: _layoutImagetextP3["default"]
+}, {
+  id: 'layout4',
+  name: 'leftImage',
+  image: _imageTextLeft["default"]
+}, {
+  id: 'layout5',
+  name: 'rightImage',
+  image: _imageTextRight["default"]
 }];
 exports.imageTextLayoutPc = imageTextLayoutPc;
 var imageTextLayoutMobile = [{

package/es/core/Designer/AiImageGenerator/History/index.less

@@ -6,10 +6,7 @@
   min-height: 100%;
   background-color: #FFF;
   border-radius: 4px;
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
+  
   .history_header {
     font-size: 14px;
     display: flex;

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

@@ -1,4 +1,8 @@
 .generate_drawer {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
   .dialog_head {
     display: flex;
     align-items: center;

package/lib/assets/images/layout-icon/imageTextLeft.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
+<path d="M53.0322 29H84.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<path d="M53.0322 39H79.0322" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<rect x="11.0322" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
+</svg>

package/lib/assets/images/layout-icon/imageTextRight.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="68" viewBox="0 0 96 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="66" rx="8" fill="#F5F6F7" stroke="#D2D9E5"/>
+<path d="M11 29H42" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<path d="M11 39H37" stroke="#D2D9E5" stroke-width="4" stroke-linecap="round"/>
+<rect x="48" y="11" width="36" height="46" rx="2" fill="#D2D9E5"/>
+</svg>

package/lib/composite-comp/bol/components/CustomCode/defaultJSON.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var getDefaultJSON = function getDefaultJSON() {
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'CUSTOM_CODE',
+    content: {
+      pcHtml: '',
+      h5Html: ''
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;

package/lib/composite-comp/bol/components/CustomCode/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultJSON = require("./defaultJSON");
+
+var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
+
+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; }
+
+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); }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  }
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+var CustomCode =
+/** @class */
+function (_super) {
+  __extends(CustomCode, _super);
+
+  function CustomCode() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.htmlTemp = '';
+
+    _this.createHtml = function () {
+      var nodeData = _this.props.nodeData;
+      console.log('----nodeData', nodeData);
+      var htmlCode = window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html;
+      _this.htmlTemp = htmlCode;
+
+      if (document.getElementById('custom-wrap')) {
+        document.getElementById('custom-wrap').innerHTML = htmlCode;
+      }
+    };
+
+    return _this;
+  }
+
+  CustomCode.prototype.componentDidMount = function () {
+    this.createHtml();
+  };
+
+  CustomCode.prototype.componentWillReceiveProps = function (prevProps) {
+    console.log('111111');
+
+    if (window.magicDesign.device === 'pc') {
+      console.log('22222222');
+
+      if (prevProps.nodeData.content.pcHtml != this.props.nodeData.content.pcHtml) {
+        console.log('4444444');
+        this.createHtml();
+      }
+    } else {
+      console.log('3333333333', this.htmlTemp, this.props.nodeData.content);
+
+      if (this.htmlTemp != this.props.nodeData.content.h5Html) {
+        console.log('5555555');
+        this.createHtml();
+      }
+    }
+  };
+
+  CustomCode.prototype.render = function () {
+    // const { nodeData } = this.props;
+    // console.log('----nodeData', nodeData);
+    return (
+      /*#__PURE__*/
+      // <div dangerouslySetInnerHTML={{ __html: window.magicDesign.device === 'pc' ? nodeData.content.pcHtml : nodeData.content.h5Html }} />
+      _react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        id: "custom-wrap"
+      }), /*#__PURE__*/_react["default"].createElement("a", {
+        href: "https://www.baidu.com"
+      }, "baidu11 "))
+    );
+  };
+
+  CustomCode.defaultProps = {};
+  CustomCode.type = 'CUSTOM_CODE';
+  CustomCode.getDefaultJSON = _defaultJSON.getDefaultJSON;
+  CustomCode = __decorate([_compositeDecorator["default"]], CustomCode);
+  return CustomCode;
+}(_react.Component);
+
+var _default = CustomCode;
+exports["default"] = _default;

package/lib/composite-comp/bol/components/ImageText/pc/index.js

@@ -111,12 +111,24 @@ function (_super) {
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
       var cardStyle = {
-        width: _this.calcWidth(data.customize.pcRowNum),
-        marginRight: (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0,
         alignItems: _AlignSelector.alignItemMap[data.customize.align],
         textAlign: data.customize.align
       };
+
+      if (data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage') {
+        if ((data === null || data === void 0 ? void 0 : data.groupSource.length) > 1 && i != (data === null || data === void 0 ? void 0 : data.groupSource.length) - 1) {
+          cardStyle.marginBottom = 48;
+        }
+
+        cardStyle.alignItems = 'center';
+      } else {
+        cardStyle.marginRight = (1 + i) % data.customize.pcRowNum !== 0 ? '2%' : 0;
+        cardStyle.width = _this.calcWidth(data.customize.pcRowNum);
+        cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
+      }
+
       var wrapStyle = (0, _businessUtil.computeStyle)(source, window.magicDesign.device);
+      console.log('cc wrapStyle', source, wrapStyle);
       var hoverIndex = _this.state.hoverIndex;
       var hoverStyle = {};
 
@@ -127,6 +139,86 @@ function (_super) {
       return __assign(__assign(__assign({}, cardStyle), wrapStyle), hoverStyle);
     };
 
+    _this.getContentStyle = function () {
+      var data = _this.props.data;
+      return {
+        alignItems: _AlignSelector.alignItemMap[data.customize.align]
+      };
+    };
+
+    _this.getAnotherLayout = function () {
+      var data = _this.props.data;
+      var hoverIndex = _this.state.hoverIndex;
+      var GAData = (0, _commonUtil.getGAData)(data);
+      console.log('ff--image text', data);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "group-wrap"
+      }, data.groupSource.map(function (source, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: source.id,
+          className: "one-card",
+          onMouseEnter: function onMouseEnter() {
+            if (source.hover.open) {
+              _this.setState({
+                hoverIndex: i
+              });
+            }
+          },
+          onMouseLeave: function onMouseLeave() {
+            _this.setState({
+              hoverIndex: -1
+            });
+          },
+          style: _this.getCardStyle(source, i)
+        }, (source.image.open && hoverIndex != i || hoverIndex == i && source.hover.image.open) && /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-image-wrap"
+        }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+          className: "card-image",
+          data: hoverIndex == i ? source.hover.image : source.image,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          }),
+          maxWidth: 654,
+          minWidth: 300,
+          scale: 0.5
+        })), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "content-wrap",
+          style: _this.getContentStyle()
+        }, (source.title.open && hoverIndex != i || hoverIndex == i && source.hover.title.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-title",
+          data: hoverIndex == i ? source.hover.title : source.title,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.text.open && hoverIndex != i || hoverIndex == i && source.hover.text.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+          className: "card-text",
+          data: hoverIndex == i ? source.hover.text : source.text,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card-btn-wrap"
+        }, (source.button.open && hoverIndex != i || source.hover.button.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-first-btn",
+          data: hoverIndex == i ? source.hover.button : source.button,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }), (source.secondButton.open && hoverIndex != i || source.hover.secondButton.open && hoverIndex == i) && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+          className: "card-second-btn",
+          data: hoverIndex == i ? source.hover.secondButton : source.secondButton,
+          GAData: __assign(__assign({}, GAData), {
+            groupId: source.id,
+            groupName: (0, _ConfigPanel.getSecondConfigName)(data, source.id)
+          })
+        }))));
+      })));
+    };
+
     return _this;
   }
 
@@ -163,7 +255,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('image-text-pc', data.customize.layout.pcLayout),
       style: wrapStyle
-    }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.customize.layout.pcLayout === 'leftImage' || data.customize.layout.pcLayout === 'rightImage' ? this.getAnotherLayout() : (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "group-wrap"
     }, data.groupSource.map(function (source, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/composite-comp/bol/components/ImageText/pc/index.less

@@ -116,3 +116,35 @@
     }
   }
 }
+
+
+.leftImage .group-wrap .one-card {
+  flex-direction: row;
+  .card-image-wrap  .card-image {
+    margin: 0 32px 0 0;
+  }
+}
+.rightImage .group-wrap .one-card {
+  flex-direction: row-reverse;
+  .card-image-wrap  .card-image {
+    margin: 0 0 0 32px;
+  }
+}
+
+.leftImage, .rightImage {
+  padding: 48px 108px;
+  .group-wrap {
+    flex-direction: column;
+    .one-card {
+      // flex-direction: row;
+      .card-image-wrap {
+        width: fit-content;
+      }
+      .content-wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}

package/lib/composite-comp/bol/config-panels/CustomCodeConfig/MyEditor/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactAce = _interopRequireDefault(require("react-ace"));
+
+require("ace-builds/src-noconflict/mode-html");
+
+require("ace-builds/src-noconflict/mode-javascript");
+
+require("ace-builds/src-noconflict/theme-github");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// 可选的主题样式
+var MyEditor = function MyEditor(props) {
+  var value = props.value,
+      changeVal = props.changeVal,
+      blurArea = props.blurArea;
+  return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
+    editorProps: {
+      $blockScrolling: true
+    },
+    mode: "html",
+    name: "editor",
+    onBlur: blurArea,
+    onChange: changeVal,
+    style: {
+      width: '100%'
+    },
+    theme: "github",
+    value: value
+  });
+};
+
+var _default = MyEditor;
+exports["default"] = _default;

package/lib/composite-comp/bol/config-panels/CustomCodeConfig/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _MyEditor = _interopRequireDefault(require("./MyEditor"));
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
+
+var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
+
+var _locale = require("../../../../locale");
+
+var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
+
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var CustomCodeConfig =
+/** @class */
+function (_super) {
+  __extends(CustomCodeConfig, _super);
+
+  function CustomCodeConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.changeVal = function (v) {
+      var data = _this.props.data;
+
+      if ((0, _coreUtil.isPc)()) {
+        data.content.pcHtml = v;
+      } else {
+        data.content.h5Html = v;
+      }
+    };
+
+    _this.blurArea = function () {
+      _this.selfRender();
+    };
+
+    return _this;
+  }
+
+  CustomCodeConfig.prototype.render = function () {
+    var data = this.props.data;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: 'content',
+        name: (0, _locale.i18n)('CONTENT'),
+        value: /*#__PURE__*/_react["default"].createElement(_MyEditor["default"], {
+          blurArea: this.blurArea,
+          changeVal: this.changeVal,
+          value: (0, _coreUtil.isPc)() ? data.content.pcHtml : data.content.h5Html
+        })
+      }, {
+        key: 'spacing',
+        name: (0, _locale.i18n)('SPACING'),
+        value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+          data: data.spacing
+        })
+      }, {
+        key: 'background',
+        name: (0, _locale.i18n)('BACKGROUND'),
+        value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
+          data: data.background
+        })
+      }],
+      type: "triangle"
+    }));
+  };
+
+  return CustomCodeConfig;
+}(_BaseConfig["default"]);
+
+var _default = CustomCodeConfig;
+exports["default"] = _default;

package/lib/constants/component-types.js

@@ -27,6 +27,8 @@ var _Video = _interopRequireDefault(require("../composite-comp/bol/components/Vi
 
 var _Wallet = _interopRequireDefault(require("../composite-comp/bol/components/Wallet"));
 
+var _CustomCode = _interopRequireDefault(require("../composite-comp/bol/components/CustomCode"));
+
 var _FlashDeal = _interopRequireDefault(require("../composite-comp/dito/components/FlashDeal"));
 
 var _SearchBar = _interopRequireDefault(require("../composite-comp/dito/components/SearchBar"));
@@ -59,6 +61,8 @@ var _TagCompConfig = _interopRequireDefault(require("../composite-comp/bol/confi
 
 var _VideoConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/VideoConfig"));
 
+var _CustomCodeConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/CustomCodeConfig"));
+
 var _WalletConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/WalletConfig"));
 
 var _FlashDealConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/FlashDealConfig"));
@@ -105,13 +109,13 @@ var _a, _b, _c; // 组件
 /**
  * 渲染组件索引
  */
-var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Video["default"].type] = _Video["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_SignBoard["default"].type] = _SignBoard["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_PcNavigation["default"].type] = _PcNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a[_Wallet["default"].type] = _Wallet["default"], _a);
+var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Video["default"].type] = _Video["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_SignBoard["default"].type] = _SignBoard["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_PcNavigation["default"].type] = _PcNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a[_Wallet["default"].type] = _Wallet["default"], _a[_CustomCode["default"].type] = _CustomCode["default"], _a);
 /**
  * 一级配置面板索引
  */
 
 exports.componentMap = componentMap;
-var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Video["default"].type] = _VideoConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_SignBoard["default"].type] = _SignBoardConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_PcNavigation["default"].type] = _PcNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b[_Wallet["default"].type] = _WalletConfig["default"], _b);
+var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Video["default"].type] = _VideoConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_SignBoard["default"].type] = _SignBoardConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_PcNavigation["default"].type] = _PcNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b[_Wallet["default"].type] = _WalletConfig["default"], _b[_CustomCode["default"].type] = _CustomCodeConfig["default"], _b);
 /**
  * 二级配置面板索引
  */

package/lib/constants/index.js

@@ -129,6 +129,10 @@ var compInfoMap = {
     name: 'Image and Text',
     icon: 'icon-filled-image'
   },
+  CUSTOM_CODE: {
+    name: 'Custom Code',
+    icon: 'icon-html'
+  },
   RECOMMEND: {
     name: 'Recommend',
     icon: 'icon-forms'

package/lib/constants/layout.js

@@ -37,6 +37,10 @@ var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout
 
 var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
 
+var _imageTextLeft = _interopRequireDefault(require("../assets/images/layout-icon/imageTextLeft.svg"));
+
+var _imageTextRight = _interopRequireDefault(require("../assets/images/layout-icon/imageTextRight.svg"));
+
 var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
 
 var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
@@ -128,6 +132,14 @@ var imageTextLayoutPc = [{
   id: 'layout3',
   name: 'center',
   image: _layoutImagetextP3["default"]
+}, {
+  id: 'layout4',
+  name: 'leftImage',
+  image: _imageTextLeft["default"]
+}, {
+  id: 'layout5',
+  name: 'rightImage',
+  image: _imageTextRight["default"]
 }];
 exports.imageTextLayoutPc = imageTextLayoutPc;
 var imageTextLayoutMobile = [{

package/lib/core/Designer/AiImageGenerator/History/index.less

@@ -6,10 +6,7 @@
   min-height: 100%;
   background-color: #FFF;
   border-radius: 4px;
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
+  
   .history_header {
     font-size: 14px;
     display: flex;

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

@@ -1,4 +1,8 @@
 .generate_drawer {
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
   .dialog_head {
     display: flex;
     align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -32,6 +32,7 @@
     "moment": "2.29.3",
     "postcss-pxtorem": "^6.0.0",
     "ramda": "^0.28.0",
+    "react-ace": "^10.1.0",
     "react-color": "2.17.0",
     "react-router-dom": "5.3.0",
     "react-slick": "^0.29.0",