@fonixtree/magic-design 0.0.16 → 0.0.19

package/src/components/composite-comp/bol/components/ImageText/mobile/index.less.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".image-text-mobile {\n  padding: 17px 0;\n}\n.image-text-mobile .headline {\n  margin-bottom: 8px;\n}\n.image-text-mobile .subtitle {\n  margin-bottom: 36px;\n}\n.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-first-btn,\n.image-text-mobile .group-wrap .one-card .card-btn-wrap .card-second-btn {\n  width: fit-content;\n}\n.image-text-mobile .btn-wrap {\n  display: flex;\n  width: 100%;\n  justify-content: center;\n}\n.image-text-mobile .btn-wrap .first-btn {\n  margin-top: 36px;\n}\n.image-text-mobile .btn-wrap .second-btn {\n  margin-top: 36px;\n  margin-left: 12px;\n}\n.normal1 .group-wrap {\n  padding: 0 15px;\n  width: 100%;\n}\n.normal1 .group-wrap .one-card {\n  display: flex;\n  align-items: stretch;\n  padding: 18px;\n  margin-bottom: 8px;\n}\n.normal1 .group-wrap .one-card:last-of-type {\n  margin-bottom: 0;\n}\n.normal1 .group-wrap .one-card .card-image-wrap {\n  flex-shrink: 0;\n  margin-right: 12px;\n}\n.normal1 .group-wrap .one-card .card-content-wrap {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.normal1 .group-wrap .one-card .card-content-wrap .card-title {\n  margin-bottom: 6px;\n}\n.normal1 .group-wrap .one-card .card-content-wrap .card-text {\n  margin-bottom: 12px;\n}\n.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap {\n  display: flex;\n}\n.normal1 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-first-btn {\n  margin-right: 12px;\n}\n.normal2 .group-wrap {\n  width: 100%;\n  padding: 0 15px;\n}\n.normal2 .group-wrap .one-card {\n  width: 100%;\n  padding: 20px 16px;\n  margin-bottom: 36px;\n}\n.normal2 .group-wrap .one-card:last-of-type {\n  margin-bottom: 0;\n}\n.normal2 .group-wrap .one-card .card-image-wrap .card-image {\n  width: fit-content;\n  margin: 0 auto;\n}\n.normal2 .group-wrap .one-card .card-content-wrap .card-title {\n  margin-bottom: 8px;\n}\n.normal2 .group-wrap .one-card .card-content-wrap .card-text {\n  margin-bottom: 16px;\n}\n.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap {\n  display: flex;\n}\n.normal2 .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-first-btn {\n  margin-right: 12px;\n}\n.normal3 .group-wrap {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  padding: 0 15px;\n}\n.normal3 .group-wrap .one-card {\n  display: flex;\n  flex-direction: column;\n}\n.normal3 .group-wrap .one-card .card-image-wrap {\n  width: 100%;\n}\n.normal3 .group-wrap .one-card .card-image-wrap .card-image {\n  width: fit-content;\n  margin: 0 auto 7px;\n}\n.normal3 .group-wrap .one-card .card-title {\n  margin-bottom: 4px;\n}\n.normal3 .group-wrap .one-card .card-text {\n  margin-bottom: 7px;\n}\n.normal3 .group-wrap .one-card .card-btn-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.normal3 .group-wrap .one-card .card-second-btn {\n  margin-top: 8px;\n}\n.normal3 .group-wrap .card-margin-bottom {\n  margin-bottom: 10px;\n}\n.outsideM .group-wrap {\n  padding: 0 15px;\n  width: 100%;\n}\n.outsideM .group-wrap .one-card {\n  margin-top: 35px;\n  position: relative;\n  padding: 30px 10px 20px 36px;\n}\n.outsideM .group-wrap .one-card .card-image-wrap {\n  position: absolute;\n  left: 18px;\n  top: 0;\n  transform: translateY(-50%);\n}\n.outsideM .group-wrap .one-card .card-content-wrap .card-title {\n  margin-bottom: 4px;\n}\n.outsideM .group-wrap .one-card .card-content-wrap .card-text {\n  margin-bottom: 12px;\n}\n.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap {\n  display: flex;\n}\n.outsideM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-first-btn {\n  margin-right: 12px;\n}\n.centerM .group-wrap {\n  position: relative;\n  width: 100%;\n}\n.centerM .group-wrap::before {\n  content: '';\n  position: absolute;\n  width: 1px;\n  height: 100%;\n  border-right: 1px dashed #D2D9E5;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.centerM .group-wrap .one-card {\n  width: calc((100% - 1px)/2);\n  position: relative;\n  padding: 0 14px 16px;\n}\n.centerM .group-wrap .one-card::before {\n  content: '';\n  position: absolute;\n  border-radius: 50%;\n  background: #2F54EB;\n  width: 10px;\n  height: 10px;\n  z-index: 10;\n  border: 2px solid #CCE3FF;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n-1) {\n  left: 0;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n-1)::before {\n  right: -5px;\n  top: 5px;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-title,\n.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-text {\n  text-align: right !important;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap {\n  flex-direction: row-reverse;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .image-subtext-wrap .card-image-wrap {\n  margin-left: 8px;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n-1) .card-content-wrap .card-btn-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n) {\n  left: 50%;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n)::before {\n  left: -5px;\n  top: 5px;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-title,\n.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .card-text {\n  text-align: left !important;\n}\n.centerM .group-wrap .one-card:nth-of-type(2n) .card-content-wrap .image-subtext-wrap .card-image-wrap {\n  margin-right: 8px;\n}\n.centerM .group-wrap .one-card .card-content-wrap .card-title {\n  margin-bottom: 10px;\n}\n.centerM .group-wrap .one-card .card-content-wrap .image-subtext-wrap {\n  display: flex;\n  margin-bottom: 20px;\n  align-items: center;\n}\n.centerM .group-wrap .one-card .card-content-wrap .card-btn-wrap .card-second-btn {\n  margin-top: 12px;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

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

@@ -0,0 +1,126 @@
+import { __extends, __assign } from '../../../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import classNames from '../../../../../../../my_node_modules/classnames/index.js';
+import { alignItemMap } from '../../../../../common/AlignSelector/index.js';
+import Text from '../../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../../meta-comp/components/Image/index.js';
+import { computeStyle } from '../../../../../utils/businessUtil.js';
+
+var maxWidthAndHeight = {
+  normal: 410,
+  outside: 100,
+  center: 410
+};
+
+var ImageTextPc =
+/** @class */
+function (_super) {
+  __extends(ImageTextPc, _super);
+
+  function ImageTextPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      hoverState: false
+    }; // componentDidMount() {
+    //   this.distroy = autorun(() => {
+    //     this.setState({
+    //       clickedGroup: store.clickedGroup,
+    //     });
+    //   });
+    // }
+    // componentWillUnmount() {
+    //   this.distroy();
+    // }
+
+    _this.calcWidth = function (num) {
+      return "".concat((100 - (num - 1) * 2) / num, "%");
+    };
+
+    _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: alignItemMap[data.customize.align],
+        textAlign: data.customize.align
+      };
+      var wrapStyle = computeStyle(source, window.magicDesign.device);
+      return __assign(__assign({}, cardStyle), wrapStyle);
+    };
+
+    return _this;
+  }
+
+  ImageTextPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    this.state.hoverState;
+    console.log('====================================');
+    console.log(data);
+    console.log('====================================');
+    var wrapStyle = computeStyle(data, window.magicDesign.device);
+    wrapStyle.alignItems = alignItemMap[data.customize.align];
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('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", {
+      className: "group-wrap"
+    }, data.groupSource.map(function (source, i) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: source.id,
+        className: data.groupSource.length > data.customize.pcRowNum ? 'one-card card-margin-bottom' : 'one-card',
+        onMouseEnter: function () {
+          if (source.hover.open) {
+            _this.setState({
+              hoverState: true
+            });
+          }
+        },
+        onMouseLeave: function () {
+          _this.setState({
+            hoverState: false
+          });
+        },
+        style: _this.getCardStyle(source, i)
+      }, source.title.open && data.customize.layout.pcLayout === 'center' && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), source.image.open && /*#__PURE__*/React__default.createElement("div", {
+        className: "card-image-wrap"
+      }, /*#__PURE__*/React__default.createElement(Image, {
+        className: "card-image",
+        data: source.image,
+        limitWidthHeight: true,
+        maxHeight: maxWidthAndHeight[data.customize.layout.pcLayout],
+        maxWidth: maxWidthAndHeight[data.customize.layout.pcLayout]
+      })), source.title.open && data.customize.layout.pcLayout !== 'center' && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-title",
+        data: source.title
+      }), source.text.open && /*#__PURE__*/React__default.createElement(Text, {
+        className: "card-text",
+        data: source.text
+      }), /*#__PURE__*/React__default.createElement("div", {
+        className: classNames({
+          'card-btn-wrap': data.customize.pcRowNum <= 3
+        })
+      }, source.button.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-first-btn",
+        data: source.button
+      }), source.secondButton.open && /*#__PURE__*/React__default.createElement(Button, {
+        className: "card-second-btn",
+        data: source.secondButton
+      })));
+    })));
+  };
+
+  ImageTextPc.defaultProps = {
+    data: {}
+  };
+  return ImageTextPc;
+}(React__default.Component);
+
+export { ImageTextPc as default };

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

@@ -0,0 +1,6 @@
+import styleInject from '../../../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".image-text-pc {\n  display: flex;\n  flex-direction: column;\n  padding: 17px 70px;\n}\n.image-text-pc .headline {\n  margin-bottom: 8px;\n}\n.image-text-pc .subtitle {\n  margin-bottom: 36px;\n}\n.image-text-pc .group-wrap {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n}\n.image-text-pc .group-wrap .one-card {\n  display: flex;\n  flex-direction: column;\n}\n.image-text-pc .group-wrap .one-card .card-image-wrap {\n  width: 100%;\n}\n.image-text-pc .group-wrap .one-card .card-image-wrap .card-image {\n  width: fit-content;\n  margin: 0 auto 7px;\n}\n.image-text-pc .group-wrap .one-card .card-title {\n  margin-bottom: 4px;\n}\n.image-text-pc .group-wrap .one-card .card-text {\n  margin-bottom: 7px;\n}\n.image-text-pc .group-wrap .one-card .card-btn-wrap {\n  width: fit-content;\n  display: flex;\n}\n.image-text-pc .group-wrap .one-card .card-btn-wrap .card-first-btn {\n  margin-right: 12px;\n}\n.image-text-pc .group-wrap .one-card .card-btn-wrap .card-second-btn {\n  margin-top: 0;\n}\n.image-text-pc .group-wrap .one-card .card-first-btn {\n  width: fit-content;\n}\n.image-text-pc .group-wrap .one-card .card-second-btn {\n  margin-top: 8px;\n  width: fit-content;\n}\n.image-text-pc .group-wrap .card-margin-bottom {\n  margin-bottom: 10px;\n}\n.image-text-pc .btn-wrap {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n.image-text-pc .btn-wrap > div {\n  margin-right: 12px;\n}\n.image-text-pc .btn-wrap > div:last-of-type {\n  margin-right: 0;\n}\n.image-text-pc .btn-wrap .first-btn {\n  margin-top: 36px;\n}\n.image-text-pc .btn-wrap .second-btn {\n  margin-top: 36px;\n}\n.normal .group-wrap .one-card {\n  padding: 40px 24px;\n}\n.outside .group-wrap .one-card {\n  padding: 40px 24px 24px;\n  position: relative;\n  margin-top: 40px;\n}\n.outside .group-wrap .one-card .card-image-wrap .card-image {\n  position: absolute;\n  top: 0;\n  transform: translateY(-50%);\n  left: 24px;\n}\n.center .group-wrap .one-card {\n  padding: 20px 20px;\n}\n.center .group-wrap .one-card .card-title {\n  margin-bottom: 10px;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/src/components/composite-comp/bol/components/Newsletter/defaultJSON.js

@@ -0,0 +1,114 @@
+import { __assign } from '../../../../../../my_node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../my_node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaTextJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    type: 'Text',
+    specialContent: [],
+    text: 'Thank you for you subscription',
+    content: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 400,
+      fontSize: 14,
+      color: '#8493AF'
+    },
+    underline: {
+      open: false,
+      textDecorationColor: '',
+      textDecorationStyle: 'solid'
+    },
+    vertical: {
+      open: false,
+      lineHeight: 18
+    }
+  };
+};
+/**
+ * 获取 text 元组件json
+ */
+
+
+var getDefaultMetaButtonJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    content: {
+      url: '',
+      backgroundColor: '#2F54EB'
+    },
+    buttonText: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 14,
+      fontStyle: 'normal',
+      color: '#fff',
+      padding: '12px 30px'
+    },
+    buttonBorder: {
+      open: true,
+      borderColor: '',
+      borderRadius: 8
+    },
+    buttonIcon: {
+      iconUrl: '',
+      layout: 'right'
+    },
+    text: 'Subscribe',
+    hover: null
+  };
+};
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'NEWSLETTER',
+    content: {
+      inputField: {
+        open: true,
+        type: 'InputField',
+        placeholder: 'Email Address',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 16,
+          color: '#CE1126'
+        }
+      },
+      button: __assign({}, getDefaultMetaButtonJson()),
+      confirmation: __assign({}, getDefaultMetaTextJson())
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

package/src/components/composite-comp/bol/components/Newsletter/index.js

@@ -0,0 +1,65 @@
+import { __extends, __assign } from '../../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from '../../../../../../my_node_modules/classnames/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import Text, { contentStyle } from '../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../meta-comp/components/Button/index.js';
+import '../../../../meta-comp/components/Image/index.js';
+import './index.less.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+
+var Newsletter =
+/** @class */
+function (_super) {
+  __extends(Newsletter, _super);
+
+  function Newsletter() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Newsletter.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData; // const wrapStyle = {};
+    // if (nodeData.background.bgType === 'color') {
+    //   wrapStyle.backgroundColor = nodeData.background.color;
+    //   wrapStyle.opacity = nodeData.background.opacity ? nodeData.background.opacity : 1;
+    // } else {
+    //   wrapStyle.backgroundImage = `url(${nodeData.background.image})`;
+    //   wrapStyle.backgroundPosition = 'center';
+    // }
+
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+
+    var style = __assign({}, contentStyle(nodeData.content.inputField.content));
+
+    Reflect.deleteProperty(style, 'width');
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('newsletter-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a[window.magicDesign.device] = true, _a)),
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "top-wrap"
+    }, nodeData.content.inputField.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "input-wrap"
+    }, /*#__PURE__*/React__default.createElement("input", {
+      placeholder: nodeData.content.inputField.placeholder,
+      style: style,
+      type: "text"
+    })), nodeData.content.inputField.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "btn-wrap"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.button
+    }))), nodeData.content.button.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "confirmation-text"
+    }, /*#__PURE__*/React__default.createElement(Text, {
+      data: nodeData.content.confirmation
+    })));
+  };
+
+  Newsletter.type = 'NEWSLETTER';
+  Newsletter.getDefaultJSON = getDefaultJSON;
+  return Newsletter;
+}(Component);
+
+export { Newsletter as default };

package/src/components/composite-comp/bol/components/Newsletter/index.less.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".newsletter-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.newsletter-wrap .top-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 0 20px;\n}\n.newsletter-wrap .top-wrap .input-wrap input {\n  border: 1px solid #D2D9E5;\n  width: 600px;\n  height: 56px;\n  padding: 0 20px;\n  border-radius: 8px;\n  background-color: #fff;\n}\n.newsletter-wrap .top-wrap .btn-wrap {\n  margin-left: 12px;\n}\n.newsletter-wrap .confirmation-text {\n  margin-top: 12px;\n}\n.newsletter-wrap.layout1 {\n  flex-direction: column;\n}\n.newsletter-wrap.layout1.left {\n  align-items: flex-start;\n}\n.newsletter-wrap.layout1.left .top-wrap {\n  justify-content: flex-start;\n}\n.newsletter-wrap.layout1.center {\n  align-items: center;\n}\n.newsletter-wrap.layout1.center .top-wrap {\n  justify-content: center;\n}\n.newsletter-wrap.layout1.right {\n  align-items: flex-end;\n}\n.newsletter-wrap.layout1.right .top-wrap {\n  justify-content: flex-end;\n}\n.newsletter-wrap.mobile .input-wrap input {\n  border: 1px solid #D2D9E5;\n  width: 100%;\n  height: 48px;\n  border-radius: 8px;\n  background-color: #fff;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/src/components/composite-comp/bol/components/Tag/defaultJSON.js

@@ -0,0 +1,91 @@
+import { __assign } from '../../../../../../my_node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../my_node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaButtonJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    content: {
+      url: '',
+      backgroundColor: '#e6eaf0'
+    },
+    buttonText: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 12,
+      fontStyle: 'normal',
+      color: '#8493AF',
+      padding: '2px 8px'
+    },
+    buttonBorder: {
+      open: true,
+      borderColor: '',
+      borderRadius: 4
+    },
+    buttonIcon: {
+      iconUrl: '',
+      layout: 'right'
+    },
+    text: 'Button Tag',
+    hover: null
+  };
+};
+
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'TAG',
+    content: {
+      image: {
+        id: uuid_1.v4(),
+        open: false,
+        type: 'IMAGE',
+        content: {
+          h5Name: '',
+          pcName: '',
+          h5ImgSrc: '',
+          pcImgSrc: '',
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      },
+      button: __assign({}, getDefaultMetaButtonJson()),
+      secondaryButton: __assign({}, getDefaultMetaButtonJson())
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'center'
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON };

package/src/components/composite-comp/bol/components/Tag/index.js

@@ -0,0 +1,52 @@
+import { __extends, __decorate } from '../../../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default, { Component } from 'react';
+import classNames from '../../../../../../my_node_modules/classnames/index.js';
+import { getDefaultJSON } from './defaultJSON.js';
+import '../../../../meta-comp/components/Text/index.js';
+import Button from '../../../../meta-comp/components/Button/index.js';
+import Image from '../../../../meta-comp/components/Image/index.js';
+import compositeDecorator from '../../../../decorator/compositeDecorator.js';
+import { computeStyle } from '../../../../utils/businessUtil.js';
+import './index.less.js';
+
+var Tag =
+/** @class */
+function (_super) {
+  __extends(Tag, _super);
+
+  function Tag() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  Tag.prototype.render = function () {
+    var _a;
+
+    var nodeData = this.props.nodeData;
+    var wrapStyle = computeStyle(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('tag-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
+      onClick: this.onComponentClick,
+      style: wrapStyle
+    }, nodeData.content.image.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "tag-image"
+    }, /*#__PURE__*/React__default.createElement(Image, {
+      data: nodeData.content.image
+    })), nodeData.content.button.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "first-button"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.button
+    })), nodeData.content.secondaryButton.open && /*#__PURE__*/React__default.createElement("div", {
+      className: "secondary-button"
+    }, /*#__PURE__*/React__default.createElement(Button, {
+      data: nodeData.content.secondaryButton
+    })));
+  };
+
+  Tag.defaultProps = {};
+  Tag.type = 'TAG';
+  Tag.getDefaultJSON = getDefaultJSON;
+  Tag = __decorate([compositeDecorator], Tag);
+  return Tag;
+}(Component);
+
+export { Tag as default };

package/src/components/composite-comp/bol/components/Tag/index.less.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".tag-comp-wrap {\n  display: flex;\n  align-items: center;\n}\n.tag-comp-wrap .tag-image {\n  width: 26px;\n  height: 26px;\n}\n.tag-comp-wrap .first-button {\n  margin: 5px;\n}\n.tag-comp-wrap .secondary-button {\n  margin: 5px;\n}\n.tag-comp-wrap.layout1 {\n  flex-direction: row;\n}\n.tag-comp-wrap.layout1.left {\n  justify-content: flex-start;\n}\n.tag-comp-wrap.layout1.center {\n  justify-content: center;\n}\n.tag-comp-wrap.layout1.right {\n  justify-content: flex-end;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/src/components/composite-comp/bol/components/Text/defaultJSON.js

@@ -0,0 +1,125 @@
+import { __assign } from '../../../../../../my_node_modules/tslib/tslib.es6.js';
+import uuid_1 from '../../../../../../my_node_modules/uuid/index.js';
+
+/**
+ * 获取 text 元组件json
+ */
+
+var getDefaultMetaTextJson = function () {
+  return {
+    id: uuid_1.v4(),
+    open: true,
+    type: 'Text',
+    specialContent: [],
+    text: 'Flash Deal',
+    content: {
+      sizeType: 'Customize font styles',
+      fontFamily: 'Open Sans',
+      fontWeight: 600,
+      fontSize: 14,
+      color: '#CE1126'
+    },
+    underline: {
+      open: false,
+      textDecorationColor: '',
+      textDecorationStyle: 'solid'
+    },
+    vertical: {
+      open: false,
+      lineHeight: 18
+    }
+  };
+};
+
+var textGroupSourceJSON = function (parentId) {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    parentId: parentId,
+    content: {
+      title: __assign(__assign({
+        parentId: groupId,
+        id: uuid_1.v4()
+      }, getDefaultMetaTextJson()), {
+        text: 'Group Name',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 26,
+          width: '100%',
+          color: '#232F46'
+        }
+      }),
+      text: __assign(__assign({
+        parentId: groupId,
+        id: uuid_1.v4()
+      }, getDefaultMetaTextJson()), {
+        text: 'For the text area, you can enter a subtitle or description, the default width is the same as title.',
+        content: {
+          sizeType: 'Body 1',
+          fontFamily: 'Open Sans',
+          fontWeight: 400,
+          fontSize: 18,
+          width: '100%',
+          color: '#232F46'
+        }
+      })
+    }
+  };
+};
+var getDefaultJSON = function () {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    type: 'TEXT',
+    title: {
+      headline: __assign(__assign({}, getDefaultMetaTextJson()), {
+        text: 'Title use, click modify text.',
+        content: {
+          sizeType: 'Headline 1',
+          fontFamily: 'Montserrat',
+          fontWeight: 600,
+          fontSize: 68,
+          color: '#232F46'
+        }
+      }),
+      subtitle: __assign(__assign({}, getDefaultMetaTextJson()), {
+        text: 'For the text area, you can enter a subtitle or description',
+        content: {
+          sizeType: 'Title 1',
+          fontFamily: 'Montserrat',
+          fontWeight: 400,
+          fontSize: 32,
+          color: '#232F46'
+        }
+      })
+    },
+    groupSource: [textGroupSourceJSON(groupId), textGroupSourceJSON(groupId), textGroupSourceJSON(groupId)],
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    customize: {
+      layout: 'left',
+      align: 'left',
+      rowNum: 3
+    },
+    background: {
+      opacity: 100,
+      color: '#F2F2F2',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+export { getDefaultJSON, textGroupSourceJSON };