@fonixtree/magic-design 0.0.78 → 0.0.80

package/es/composite-comp/dito/config-panels/RecommendConfig/index.js

@@ -15,6 +15,8 @@ var _coreUtil = require("../../../../utils/coreUtil");
 
 var _layout = require("../../../../constants/layout");
 
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
+
 var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
 
 var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
@@ -81,6 +83,8 @@ function (_super) {
   }
 
   RecommendConfig.prototype.render = function () {
+    var _this = this;
+
     var data = this.props.data;
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
       divider: "bold",
@@ -97,14 +101,23 @@ function (_super) {
         value: /*#__PURE__*/_react["default"].createElement(_RecommendConfigContent["default"], {
           panelProps: data.content
         })
-      }, // { key: '3', name: i18n('SPACING'), value: <SpacingConfig configCompSpace configPaddingLR data={data.spacing} /> },
-      {
+      }, {
+        key: '3',
+        name: (0, _locale.i18n)('SPACING'),
+        value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+          configCompSpace: true,
+          data: data.spacing
+        })
+      }, {
         key: '4',
         name: (0, _locale.i18n)('CUSTOMIZE'),
         value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
           data: data.customize,
           isHideAlign: true,
-          layoutSource: (0, _coreUtil.isPc)() ? _layout.recommendLayoutPc : _layout.recommendLayoutMobile
+          layoutSource: (0, _coreUtil.isPc)() ? _layout.recommendLayoutPc : _layout.recommendLayoutMobile,
+          selectedLayoutFun: function selectedLayoutFun(v) {
+            _this.getLayout(v);
+          }
         })
       }, {
         key: '5',

package/es/composite-comp/dito/config-panels/SearchBarConfig/SearchBarConfigContent/index.js

@@ -0,0 +1,140 @@
+"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"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _common = require("../../../../../common");
+
+var _ImageConfig = _interopRequireDefault(require("../../../../../meta-comp/config-panels/ImageConfig"));
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
+var _locale = require("../../../../../locale");
+
+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 __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 SearchBarConfigContent =
+/** @class */
+function (_super) {
+  __extends(SearchBarConfigContent, _super);
+
+  function SearchBarConfigContent() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.selfRender = function () {
+      (0, _coreUtil.renderPreview)();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  SearchBarConfigContent.prototype.render = function () {
+    var _this = this;
+
+    var panelProps = this.props.panelProps;
+    var source = [{
+      key: 'search1',
+      name: (0, _locale.i18n)('LOGO'),
+      value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
+        data: panelProps.logo
+      }),
+      metaOption: panelProps.logo,
+      toggleType: 'switch'
+    }, {
+      key: 'search2',
+      name: (0, _locale.i18n)('SEARCH_BOX'),
+      value: /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        style: {
+          marginTop: 20
+        },
+        title: (0, _locale.i18n)('COLOR')
+      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
+        onChange: function onChange(v) {
+          if ((0, _coreUtil.isPc)()) {
+            panelProps.box.color.pc = v;
+          } else {
+            panelProps.box.color.mobile = v;
+          }
+
+          _this.selfRender();
+        },
+        value: (0, _coreUtil.isPc)() ? panelProps.box.color.pc : panelProps.box.color.mobile
+      })),
+      metaOption: panelProps.box,
+      toggleType: 'switch'
+    }, {
+      key: 'search3',
+      name: (0, _locale.i18n)('ICON'),
+      value: /*#__PURE__*/_react["default"].createElement(_common.Field, {
+        style: {
+          marginTop: 20
+        },
+        title: (0, _locale.i18n)('COLOR')
+      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
+        onChange: function onChange(v) {
+          if ((0, _coreUtil.isPc)()) {
+            panelProps.icon.color.pc = v;
+          } else {
+            panelProps.icon.color.mobile = v;
+          }
+
+          _this.selfRender();
+        },
+        value: (0, _coreUtil.isPc)() ? panelProps.icon.color.pc : panelProps.icon.color.mobile
+      })),
+      metaOption: panelProps.icon,
+      toggleType: 'switch'
+    }];
+    return /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
+      headerSize: "middle",
+      noChange: true,
+      onRefresh: this.selfRender,
+      showActiveColor: true,
+      source: source,
+      type: "switch"
+    });
+  };
+
+  return SearchBarConfigContent;
+}(_react.Component);
+
+var _default = SearchBarConfigContent;
+exports["default"] = _default;

package/es/composite-comp/dito/config-panels/SearchBarConfig/index.js

@@ -7,20 +7,20 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _SearchBarConfigContent = _interopRequireDefault(require("./SearchBarConfigContent"));
+
 var _locale = require("../../../../locale");
 
 var _layout = require("../../../../constants/layout");
 
-var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
-
 var _common = require("../../../../common");
 
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
+
 var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
 
 var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
 
-var _coreUtil = require("../../../../utils/coreUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -55,52 +55,7 @@ function (_super) {
   __extends(SearchBarConfig, _super);
 
   function SearchBarConfig() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.selfRender = function () {
-      (0, _coreUtil.renderPreview)();
-
-      _this.setState({});
-    };
-
-    _this.getContentPanel = function () {
-      var data = _this.props.data;
-      var source = [{
-        key: 'search1',
-        name: (0, _locale.i18n)('LOGO'),
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: data.logo
-        }),
-        metaOption: data.logo,
-        toggleType: 'switch'
-      }, {
-        key: 'search2',
-        name: (0, _locale.i18n)('ICON'),
-        value: /*#__PURE__*/_react["default"].createElement(_common.Field, {
-          title: (0, _locale.i18n)('COLOR')
-        }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
-          onChange: function onChange(v) {
-            data.icon.color = v;
-
-            _this.selfRender();
-          },
-          value: data.icon.color
-        })),
-        metaOption: data.icon,
-        toggleType: 'switch'
-      }];
-      return /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
-        headerSize: "middle",
-        onRefresh: function onRefresh() {
-          return (0, _coreUtil.renderPreview)();
-        },
-        showActiveColor: true,
-        source: source,
-        type: "switch"
-      });
-    };
-
-    return _this;
+    return _super !== null && _super.apply(this, arguments) || this;
   }
 
   SearchBarConfig.prototype.render = function () {
@@ -111,7 +66,16 @@ function (_super) {
       source: [{
         key: 'searchBar1',
         name: (0, _locale.i18n)('CONTENT'),
-        value: this.getContentPanel()
+        value: /*#__PURE__*/_react["default"].createElement(_SearchBarConfigContent["default"], {
+          panelProps: data.content
+        })
+      }, {
+        key: 'searchBar4',
+        name: (0, _locale.i18n)('SPACING'),
+        value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+          configCompSpace: true,
+          data: data.spacing
+        })
       }, {
         key: 'searchBar2',
         name: (0, _locale.i18n)('CUSTOMIZE'),

package/es/composite-comp/dito/second-config-panels/PcNavigationSecondConfig/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
+
+var _TextConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/TextConfig"));
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+var _locale = require("../../../../locale");
+
+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 PcNavigationSecondConfig =
+/** @class */
+function (_super) {
+  __extends(PcNavigationSecondConfig, _super);
+
+  function PcNavigationSecondConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.getContentPanel = function (data) {
+      var source = [// { key: 'pcNavSecondContent1', name: i18n('IMAGE'), value: <ImageConfig data={data.image} needHover={needHover} />, metaOption: data.image },
+      {
+        key: 'pcNavSecondContent2',
+        name: (0, _locale.i18n)('NAVIGATION_NAME'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: data.title
+        }),
+        metaOption: data.title
+      }];
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+        headerSize: "middle",
+        onRefresh: function onRefresh() {
+          return (0, _coreUtil.renderPreview)();
+        },
+        showActiveColor: true,
+        source: source,
+        type: "switch"
+      }));
+    };
+
+    return _this;
+  }
+
+  PcNavigationSecondConfig.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "banner_second_conf_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: 'mobileNavSecondConfig1',
+        name: (0, _locale.i18n)('CONTENT'),
+        value: this.getContentPanel(panelProps)
+      }]
+    }));
+  };
+
+  PcNavigationSecondConfig.defaultProps = {
+    panelProps: {}
+  };
+  return PcNavigationSecondConfig;
+}(_react["default"].Component);
+
+var _default = PcNavigationSecondConfig;
+exports["default"] = _default;

package/es/composite-comp/dito/second-config-panels/RecommendSecondConfig/AIRecommendation/index.js

@@ -215,17 +215,32 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      intelligentType: (0, _commonUtil.ensure)(function () {
-        return _this.props.value.intelligentType;
-      }, 'ALL'),
-      intelligentValue: (0, _commonUtil.ensure)(function () {
-        return _this.props.value.intelligentValue;
-      }, []),
+      intelligentType: 'ALL',
+      intelligentValue: [],
       categoryData: [],
       brandData: [],
       labelData: []
     };
 
+    _this.onChangeIntelligentType = function (type) {
+      return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          this.setState({
+            intelligentType: type,
+            intelligentValue: []
+          });
+          this.getTypeData(type);
+          this.props.onChange({
+            intelligentType: type,
+            intelligentValue: []
+          });
+          return [2
+          /*return*/
+          ];
+        });
+      });
+    };
+
     _this.getTypeData = function (type) {
       return __awaiter(_this, void 0, void 0, function () {
         var res, res, res;
@@ -298,34 +313,29 @@ function (_super) {
       });
     };
 
-    _this.onChangeIntelligentType = function (type) {
-      return __awaiter(_this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-          this.setState({
-            intelligentType: type,
-            intelligentValue: []
-          });
-          this.props.onChange({
-            intelligentType: type,
-            intelligentValue: []
-          });
-          this.getTypeData(type);
-          return [2
-          /*return*/
-          ];
-        });
-      });
-    };
-
     return _this;
   }
 
   AIRecommendation.prototype.componentDidMount = function () {
-    this.props.onChange({
-      intelligentType: this.state.intelligentType,
-      intelligentValue: this.state.intelligentValue
+    var _a = this.props.value,
+        intelligentType = _a.intelligentType,
+        intelligentValue = _a.intelligentValue;
+    this.getTypeData(intelligentType);
+    this.setState({
+      intelligentType: intelligentType,
+      intelligentValue: intelligentValue
+    });
+  };
+
+  AIRecommendation.prototype.componentWillReceiveProps = function (nextProps) {
+    var _a = nextProps.value,
+        intelligentType = _a.intelligentType,
+        intelligentValue = _a.intelligentValue;
+    this.getTypeData(intelligentType);
+    this.setState({
+      intelligentType: intelligentType,
+      intelligentValue: intelligentValue
     });
-    this.getTypeData(this.state.intelligentType);
   };
 
   AIRecommendation.prototype.render = function () {

package/es/composite-comp/dito/second-config-panels/RecommendSecondConfig/index.js

@@ -17,12 +17,16 @@ var _common = require("../../../../common");
 
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
 
+var _ButtonConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ButtonConfig"));
+
 var _TextConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/TextConfig"));
 
 var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
 
 var _coreUtil = require("../../../../utils/coreUtil");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -51,6 +55,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var RecommendSecondConfig =
 /** @class */
 function (_super) {
@@ -64,16 +84,9 @@ function (_super) {
     _this.getContentPanel = function () {
       var panelProps = _this.props.panelProps;
 
-      if (!panelProps.hover) {
-        panelProps.hover = {
-          open: false,
-          image: JSON.parse(JSON.stringify(panelProps.image)),
-          groupName: JSON.parse(JSON.stringify(panelProps.groupName))
-        };
-      }
-
-      var productSource = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
-        split: "dashed",
+      var productSource = /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sourceOfProduct"
+      }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('SOURCE_OF_PRODUCT')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
         onChange: function onChange(v) {
@@ -86,7 +99,9 @@ function (_super) {
         value: "select"
       }, (0, _locale.i18n)('SELECT_PRODUCT')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: "recommend"
-      }, (0, _locale.i18n)('AI_RECOMMENDATION')))), panelProps.sourceType === 'select' && /*#__PURE__*/_react["default"].createElement(_common.ProductSource, {
+      }, (0, _locale.i18n)('AI_RECOMMENDATION')))), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "greyBg"
+      }, panelProps.sourceType === 'select' && /*#__PURE__*/_react["default"].createElement(_common.ProductSource, {
         onChange: function onChange(v) {
           panelProps.prodIds = v;
 
@@ -105,7 +120,6 @@ function (_super) {
           intelligentValue: panelProps.intelligentValue
         }
       }), panelProps.sourceType === 'recommend' && /*#__PURE__*/_react["default"].createElement(_common.Field, {
-        split: "dashed",
         title: (0, _locale.i18n)('PRODUCT_QUANTITY')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Radio.Group, {
         onChange: function onChange(e) {
@@ -122,27 +136,7 @@ function (_super) {
         value: 50
       }, "\u226450"), /*#__PURE__*/_react["default"].createElement(_antd.Radio, {
         value: 100
-      }, "\u2264100"))));
-
-      var hoverSetting = /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
-        divider: "dashed",
-        source: [{
-          key: 'hoverSetting_1',
-          name: (0, _locale.i18n)('IMAGE'),
-          value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-            data: panelProps.hover.image
-          }),
-          metaOption: panelProps.hover.image
-        }, {
-          key: 'hoverSetting_2',
-          name: (0, _locale.i18n)('GROUP_NAME'),
-          value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
-            data: panelProps.hover.groupName
-          }),
-          metaOption: panelProps.hover.groupName
-        }],
-        type: "switch"
-      });
+      }, "\u2264100")))));
 
       var defaultSource = [{
         key: 'defaultSource_1',
@@ -158,22 +152,13 @@ function (_super) {
           data: panelProps.groupName
         }),
         metaOption: panelProps.groupName
-      }, // { key: 'defaultSource_3', name: i18n('SEE_ALL'), value: <ButtonConfig data={panelProps.seeAll} />, metaOption: panelProps.seeAll },
-      {
-        key: 'defaultSource_4',
-        name: (0, _locale.i18n)('SECOND_CATEGORY'),
-        value: productSource,
-        toggleType: 'arrow',
-        metaOption: {
-          id: 'productSource',
-          open: true
-        }
       }, {
-        key: 'defaultSource_5',
-        name: (0, _locale.i18n)('HOVER'),
-        value: hoverSetting,
-        metaOption: panelProps.hover,
-        toggleType: 'checkbox'
+        key: 'defaultSource_3',
+        name: (0, _locale.i18n)('SEE_ALL'),
+        value: /*#__PURE__*/_react["default"].createElement(_ButtonConfig["default"], {
+          data: panelProps.seeAll
+        }),
+        metaOption: panelProps.seeAll
       }];
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
         headerSize: "middle",
@@ -183,22 +168,68 @@ function (_super) {
         showActiveColor: true,
         source: defaultSource,
         type: "switch"
-      }));
+      }), productSource);
+    };
+
+    _this.resetHover = function () {
+      var panelProps = _this.props.panelProps;
+
+      if (panelProps.hover.open) {
+        panelProps.hover.image = __assign(__assign({}, panelProps.hover.image), JSON.parse(JSON.stringify(panelProps.image)));
+        panelProps.hover.groupName = __assign(__assign({}, panelProps.hover.groupName), JSON.parse(JSON.stringify(panelProps.groupName)));
+      }
     };
 
     return _this;
   }
 
   RecommendSecondConfig.prototype.render = function () {
+    var _this = this;
+
+    var panelProps = this.props.panelProps;
+
+    var hoverPanel = /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
+      divider: "dashed",
+      noChange: true,
+      onRefresh: function onRefresh() {
+        return (0, _coreUtil.renderPreview)();
+      },
+      source: [{
+        key: 'hoverSetting_1',
+        name: (0, _locale.i18n)('IMAGE'),
+        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
+          data: panelProps.hover.image
+        }),
+        metaOption: panelProps.hover.image
+      }, {
+        key: 'hoverSetting_2',
+        name: (0, _locale.i18n)('GROUP_NAME'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: panelProps.hover.groupName
+        }),
+        metaOption: panelProps.hover.groupName
+      }],
+      type: "switch"
+    });
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "recommend_second_conf_wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
       divider: "bold",
       headerSize: "large",
+      onRefresh: function onRefresh() {
+        return _this.resetHover();
+      },
       source: [{
         key: '1',
         name: (0, _locale.i18n)('CONTENT'),
         value: this.getContentPanel()
+      }, {
+        key: '2',
+        name: (0, _locale.i18n)('HOVER'),
+        value: hoverPanel,
+        metaOption: panelProps.hover,
+        toggleType: 'checkbox'
       }]
     }));
   };