@fonixtree/magic-design 0.0.97 → 0.0.99

package/es/decorator/compositeDecorator.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobx = require("../mobx");
 
+var _constants = require("../constants");
+
 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; }
@@ -58,6 +60,17 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 
 function compositeDecorator(WrappedComponent) {
+  var floorNameStyle = {
+    backgroundColor: '#2F54EB',
+    height: '18px',
+    color: '#FFF',
+    fontSize: '10px',
+    padding: '0 5px',
+    display: 'flex',
+    alignItems: 'center',
+    width: 'fit-content'
+  };
+
   var Wrapper =
   /** @class */
   function (_super) {
@@ -67,7 +80,8 @@ function compositeDecorator(WrappedComponent) {
       var _this = _super !== null && _super.apply(this, arguments) || this;
 
       _this.state = {
-        clickedFloor: ''
+        clickedFloor: '',
+        hoveredFloor: ''
       }; // 复合组件点击事件
 
       _this.onCompositeCompClick = function (event) {
@@ -89,48 +103,115 @@ function compositeDecorator(WrappedComponent) {
         window.document.dispatchEvent(evt);
       };
 
-      _this.getStyle = function () {
+      _this.getCompositeStyle = function () {
+        var _a;
+
         var nodeData = _this.props.nodeData;
-        var wrapStyle = {
-          border: 'none'
-        };
-        var _a = window.magicDesign,
-            device = _a.device,
-            mode = _a.mode;
         var spacing = nodeData.spacing,
-            background = nodeData.background; // 处理复合组件的选中状态
+            background = nodeData.background;
+        var _b = window.magicDesign,
+            device = _b.device,
+            compWidth = _b.compWidth;
+        var wrapStyle = {
+          border: 'none',
+          position: 'relative',
+          zIndex: '1',
+          margin: '0 auto'
+        }; // 复合组件内边距
+
+        if (spacing && spacing[device]) {
+          wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
+        } // 复合组件背景
+
+
+        if (background) {
+          if (background.bgType === 'color') {
+            wrapStyle.backgroundColor = background.color;
+            wrapStyle.opacity = background.opacity ? background.opacity : 1;
+          } else {
+            wrapStyle.backgroundImage = "url(" + background.image + ")";
+            wrapStyle.backgroundPosition = '0px 0px';
+            wrapStyle.backgroundSize = 'auto 100%';
+            wrapStyle.backgroundRepeat = 'no-repeat';
+          }
+        } // 复合组件宽度
+        // 此处特殊处理一些占满整屏的组件： spacing.pc.fillUp = true时，沾满全屏
+
+
+        if (device === _constants.deviceTypeMap.PC && compWidth && !((_a = spacing.pc) === null || _a === void 0 ? void 0 : _a.fillUp)) {
+          wrapStyle.width = compWidth;
+        }
+
+        return wrapStyle;
+      };
+
+      _this.getMaskStyle = function () {
+        var nodeData = _this.props.nodeData;
+        var mode = window.magicDesign.mode;
+        var _a = _this.state,
+            hoveredFloor = _a.hoveredFloor,
+            clickedFloor = _a.clickedFloor; // 选中状态
+
+        var maskStyle = {
+          border: '2px solid #2F54EB',
+          position: 'absolute',
+          inset: '0px',
+          zIndex: '0',
+          opacity: '0'
+        }; // 处理复合组件的hover状态
 
         if (mode === 'designer') {
-          // style.border = '1px solid transparent';
-          wrapStyle.border = 'none';
+          if (clickedFloor !== hoveredFloor && hoveredFloor === nodeData.id) {
+            maskStyle.backgroundColor = 'rgba(47, 84, 235, 0.08)';
+            maskStyle.opacity = '100%';
+            maskStyle.zIndex = '3';
+          } // 处理复合组件的选中状态
 
-          if (nodeData.id === _this.state.clickedFloor) {
-            wrapStyle.border = '1px dashed red';
-          }
-        } // banner的padding和background单独处理
-
-
-        if (nodeData.type != 'BANNER') {
-          // 边距
-          if (spacing && spacing[device]) {
-            wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
-          } // 背景
-
-
-          if (background) {
-            if (background.bgType === 'color') {
-              wrapStyle.backgroundColor = background.color;
-              wrapStyle.opacity = background.opacity ? background.opacity : 1;
-            } else {
-              wrapStyle.backgroundImage = "url(" + background.image + ")";
-              wrapStyle.backgroundPosition = '0px 0px';
-              wrapStyle.backgroundSize = 'auto 100%';
-              wrapStyle.backgroundRepeat = 'no-repeat';
-            }
+
+          if (clickedFloor === nodeData.id) {
+            maskStyle.backgroundColor = 'transparent';
+            maskStyle.opacity = '100%';
+            maskStyle.zIndex = '0';
           }
         }
 
-        return wrapStyle;
+        return maskStyle;
+      };
+
+      _this.getWrapStyle = function () {
+        var mode = window.magicDesign.mode;
+        var nodeData = _this.props.nodeData;
+        var style = {
+          position: 'relative',
+          zIndex: '1'
+        };
+        var clickedFloor = _this.state.clickedFloor; // banner 和 recommend 在选中状态需要加padding,让选中的外边框展示出来
+
+        if (mode === 'designer' && clickedFloor === nodeData.id && ['BANNER', 'RECOMMEND'].includes(nodeData.type)) {
+          style.padding = '2px';
+        }
+
+        return style;
+      };
+
+      _this.onMouseEnter = function () {
+        if (window.magicDesign.mode === 'renderer') {
+          return;
+        }
+
+        _mobx.store.setState({
+          hoveredFloor: _this.props.nodeData.id
+        });
+      };
+
+      _this.onMouseLeave = function () {
+        if (window.magicDesign.mode === 'renderer') {
+          return;
+        }
+
+        _mobx.store.setState({
+          hoveredFloor: ''
+        });
       };
 
       return _this;
@@ -141,7 +222,8 @@ function compositeDecorator(WrappedComponent) {
 
       this.distroy = (0, _mobx.autorun)(function () {
         _this.setState({
-          clickedFloor: _mobx.store.clickedFloor
+          clickedFloor: _mobx.store.clickedFloor,
+          hoveredFloor: _mobx.store.hoveredFloor
         });
       });
     };
@@ -151,11 +233,22 @@ function compositeDecorator(WrappedComponent) {
     };
 
     Wrapper.prototype.render = function () {
+      var nodeData = this.props.nodeData;
+      var clickedFloor = this.state.clickedFloor;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "composite_wrap",
         onClick: this.onCompositeCompClick,
-        style: this.getStyle()
-      }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props));
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave,
+        style: this.getCompositeStyle()
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "composite_mask",
+        style: this.getMaskStyle()
+      }, clickedFloor !== nodeData.id && /*#__PURE__*/_react["default"].createElement("span", {
+        style: floorNameStyle
+      }, _constants.compInfoMap[nodeData.type].name)), /*#__PURE__*/_react["default"].createElement("div", {
+        style: this.getWrapStyle()
+      }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props)));
     };
 
     Wrapper.getDefaultJSON = WrappedComponent.getDefaultJSON;

package/es/decorator/metaDecorator.js

@@ -182,7 +182,7 @@ function metaDecorator(WrappedComponent) {
 
         if (rest.data.type === 'TEXT') {
           var width = window.magicDesign.device === 'pc' ? rest.data.content.pcWidth : rest.data.content.width;
-          newStyle.width = (width || 100) + "%";
+          newStyle.width = (Math.min(width, 100) || 100) + "%";
         }
 
         return newStyle;

package/es/mobx/Store.js

@@ -14,7 +14,7 @@ var _storeUtil = require("../utils/storeUtil");
 var debug = require('debug')('worker:mobx');
 
 var CACHE_KEY = 'STORE';
-var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'textSelection', 'MPageData'];
+var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'hoveredFloor', 'textSelection', 'MPageData'];
 
 var Store =
 /** @class */
@@ -30,6 +30,8 @@ function () {
 
     this.clickedFloor = ''; // 点击的楼层Id
 
+    this.hoveredFloor = ''; // hover的复合组件Id
+
     this.textSelection = null; // 文本元组件选中区域
 
     this.MPageData = []; // 楼层数据
@@ -43,6 +45,7 @@ function () {
       clickedMeta: _mobx.observable,
       clickedGroup: _mobx.observable,
       clickedFloor: _mobx.observable,
+      hoveredFloor: _mobx.observable,
       CarouselStore: _mobx.observable,
       setState: _mobx.action.bound
     });

package/lib/common/LinkModal/FilteredProductModal/index.js

@@ -217,7 +217,7 @@ var FilteredProductModal = function FilteredProductModal(props) {
       storeName = _g[0],
       setStoreName = _g[1];
 
-  var _h = (0, _react.useState)([]),
+  var _h = (0, _react.useState)(''),
       storeId = _h[0],
       setStoreId = _h[1];
 
@@ -293,27 +293,29 @@ var FilteredProductModal = function FilteredProductModal(props) {
 
   var columns = [{
     title: 'Image',
-    dataIndex: 'productImageUrl',
-    key: 'productImageUrl',
-    render: function render(productImageUrl) {
+    dataIndex: 'imgUrl',
+    key: 'imgUrl',
+    width: 100,
+    render: function render(imgUrl, record) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "prodImage",
         style: {
-          backgroundImage: "url(" + productImageUrl + ")"
+          backgroundImage: "url(\"" + (0, _commonUtil.convertImageUrl)(record.productImg || record.imgUrlContent || record.productImgContent) + "\")"
         }
       });
     }
   }, {
-    title: 'Product Name',
-    dataIndex: 'productName',
-    key: 'productName',
+    title: 'Offer Name',
+    dataIndex: 'offerName',
+    key: 'offerName',
     ellipsis: true
-  }, {
-    title: 'SKU',
-    dataIndex: 'attrValues',
-    key: 'attrValues',
-    ellipsis: true
-  }, {
+  }, // {
+  //   title: 'SKU',
+  //   dataIndex: 'attrValues',
+  //   key: 'attrValues',
+  //   ellipsis: true,
+  // },
+  {
     title: 'Price',
     dataIndex: 'salesPrice',
     key: 'salesPrice',
@@ -453,8 +455,8 @@ var FilteredProductModal = function FilteredProductModal(props) {
                   return v.key;
                 }).join(','),
                 labelIds: labelId.key,
-                // q: productName,
-                productName: productName,
+                q: productName,
+                // productName,
                 storeId: storeId,
                 minPrice: minimum * precision || '',
                 maxPrice: maximum * precision || '',
@@ -466,10 +468,11 @@ var FilteredProductModal = function FilteredProductModal(props) {
               };
               return [4
               /*yield*/
-              , (0, _commonUtil.commonFetch)(window.magicDesign.MBaseUrl + "/products", params, 'GET')];
+              , (0, _commonUtil.commonFetch)(window.magicDesign.MBaseUrl + "/offers/es", params, 'POST')];
 
             case 1:
-              res = _a.sent();
+              res = _a.sent(); // const res = await commonFetch(`${window.magicDesign.MBaseUrl}/products`, params, 'GET');
+
               setLoading(false);
               paginationParams.total = res.total;
 

package/lib/composite-comp/bol/components/Banner/mobile/index.js

@@ -19,8 +19,6 @@ var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _AlignSelector = require("../../../../../common/AlignSelector");
 
-var _commonUtil = require("../../../../../utils/commonUtil");
-
 var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -90,18 +88,18 @@ function (_super) {
       if (nextIndex != -1 && nextIndex != _this.state.carouseIndex) {
         _this.carouselRef.current.goTo(nextIndex);
       }
-    };
+    }; // padding用统一设置
 
-    _this.getPaddingAndBackground = function (item) {
-      var spacing = _this.props.data.spacing; // const { spacing, background } = data;
 
-      var device = window.magicDesign.device;
+    _this.getBackgroundStyle = function (item) {
+      // const { data: { spacing }  } = this.props;
+      // const { spacing, background } = data;
+      // const { device } = window.magicDesign;
       var wrapStyle = {}; // 边距
-
-      if (spacing && spacing[device]) {
-        wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
-      } // 背景
-
+      // if (spacing && spacing[device]) {
+      //   wrapStyle = { ...wrapStyle, ...spacing[device] };
+      // }
+      // 背景
 
       if (item.background) {
         if (item.background.bgType === 'color') {
@@ -171,12 +169,7 @@ function (_super) {
     }
 
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-banner-mobile",
-      style: {
-        marginBottom: (0, _commonUtil.ensure)(function () {
-          return data.spacing.mobile.marginBottom;
-        }, 0)
-      }
+      className: "m-banner-mobile"
     }, /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
       ref: this.carouselRef,
       afterChange: function afterChange(n) {
@@ -191,7 +184,7 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: _this.getPaddingAndBackground(item)
+        style: _this.getBackgroundStyle(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carouselItem",
         onMouseEnter: _this.mouseEnterWrap,

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

@@ -132,18 +132,18 @@ function (_super) {
       if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
         e.target.style.fontSize = data.setting.navigation.size;
       }
-    };
+    }; // padding用统一设置
 
-    _this.getPaddingAndBackground = function (item) {
-      var spacing = _this.props.data.spacing; // const { spacing, background } = data;
 
-      var device = window.magicDesign.device;
+    _this.getBackgroundStyle = function (item) {
+      // const { data: { spacing }  } = this.props;
+      // const { spacing, background } = data;
+      // const { device } = window.magicDesign;
       var wrapStyle = {}; // 边距
-
-      if (spacing && spacing[device]) {
-        wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
-      } // 背景
-
+      // if (spacing && spacing[device]) {
+      //   wrapStyle = { ...wrapStyle, ...spacing[device] };
+      // }
+      // 背景
 
       if (item.background) {
         if (item.background.bgType === 'color') {
@@ -229,7 +229,7 @@ function (_super) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: _this.getPaddingAndBackground(item)
+        style: _this.getBackgroundStyle(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carouselItem",
         onMouseEnter: _this.mouseEnterWrap,

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

@@ -45,9 +45,11 @@
         width: fit-content;
         display: flex;
         .card-first-btn {
+          cursor: pointer;
           margin-right: 12px;
         }
         .card-second-btn {
+          cursor: pointer;
           margin-top: 0;
         }
       }

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

@@ -1,7 +1,5 @@
 "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
 });
@@ -17,6 +15,8 @@ var _components = require("../../../../meta-comp/components");
 
 var _Text = require("../../../../meta-comp/components/Text");
 
+var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -25,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 || {
@@ -67,6 +69,16 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
+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 Newsletter =
 /** @class */
 function (_super) {
@@ -115,6 +127,7 @@ function (_super) {
 
   Newsletter.type = 'NEWSLETTER';
   Newsletter.getDefaultJSON = _defaultJSON.getDefaultJSON;
+  Newsletter = __decorate([_compositeDecorator["default"]], Newsletter);
   return Newsletter;
 }(_react.Component);
 

package/lib/composite-comp/common/config-panels/SpacingConfig/index.js

@@ -63,7 +63,8 @@ function (_super) {
     var _a = this.props,
         data = _a.data,
         configCompSpace = _a.configCompSpace,
-        configWidth = _a.configWidth;
+        configWidth = _a.configWidth,
+        fillUpWidth = _a.fillUpWidth;
     var obj = data[window.magicDesign.device] || {};
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "spacing-config-container"
@@ -80,6 +81,17 @@ function (_super) {
       value: {
         count: obj.contentWidth
       }
+    })), fillUpWidth && window.magicDesign.device === 'pc' && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      layout: "horizontal",
+      title: "Fill the page"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
+      checked: obj.fillUp,
+      onChange: function onChange(e) {
+        console.log('ddd fill up', e.target.checked);
+        obj.fillUp = e.target.checked;
+
+        _this.selfRender();
+      }
     })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: (0, _locale.i18n)('PADDING')
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -147,6 +159,7 @@ function (_super) {
   SpacingConfig.defaultProps = {
     configCompSpace: true,
     configWidth: false,
+    fillUpWidth: false,
     data: {
       pc: {
         paddingTop: 0,

package/lib/composite-comp/dito/components/PcNavigation/pc/index.js

@@ -336,8 +336,6 @@ function (_super) {
     };
 
     _this.getListArr = function (pre, arr, index) {
-      console.log('---getListArr', pre, arr);
-
       if (arr) {
         pre[index] = arr.map(function (item) {
           return __assign(__assign({}, item), {

package/lib/composite-comp/dito/components/SearchBar/defaultJSON.js

@@ -58,7 +58,8 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 20,
         paddingBottom: 30,
-        marginBottom: 0
+        marginBottom: 0,
+        fillUp: false
       },
       mobile: {
         paddingTop: 8,

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

@@ -74,7 +74,8 @@ function (_super) {
         name: (0, _locale.i18n)('SPACING'),
         value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
           configCompSpace: true,
-          data: data.spacing
+          data: data.spacing,
+          fillUpWidth: true
         })
       }, {
         key: 'searchBar2',

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

@@ -73,6 +73,10 @@ function PageCompList(_a) {
       clickedFloor = _d[0],
       setClickedFloor = _d[1];
 
+  var _e = (0, _react.useState)(''),
+      hoveredFloor = _e[0],
+      setHoveredFloor = _e[1];
+
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     setComponents(pageData || []);
@@ -80,6 +84,7 @@ function PageCompList(_a) {
   (0, _react.useEffect)(function () {
     var distroy = (0, _mobx.autorun)(function () {
       setClickedFloor(_mobx.store.clickedFloor);
+      setHoveredFloor(_mobx.store.hoveredFloor);
     });
     return distroy;
   }, []);
@@ -104,6 +109,7 @@ function PageCompList(_a) {
   };
 
   var onDragEnter = function onDragEnter(e) {
+    console.log('drag enter');
     var hoverNodeId = e.currentTarget.dataset.nodeid;
 
     if (dragId === hoverNodeId) {
@@ -196,8 +202,28 @@ function PageCompList(_a) {
       value: "4"
     }, (0, _locale.i18n)('DELETE')));
 
+    var onMouseEnter = function onMouseEnter() {
+      if (window.magicDesign.mode === 'renderer') {
+        return;
+      }
+
+      _mobx.store.setState({
+        hoveredFloor: comp.id
+      });
+    };
+
+    var onMouseLeave = function onMouseLeave() {
+      if (window.magicDesign.mode === 'renderer') {
+        return;
+      }
+
+      _mobx.store.setState({
+        hoveredFloor: ''
+      });
+    };
+
     var dragging = dragId === String(comp.id);
-    var active = clickedFloor === String(comp.id);
+    var active = [hoveredFloor, clickedFloor].includes(comp.id);
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: "card" + comp.id,
       className: (0, _classnames["default"])('card-wrap', {
@@ -212,6 +238,8 @@ function PageCompList(_a) {
         e.preventDefault();
       },
       onDragStart: onDragStart,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
       style: {
         opacity: dragging ? '0.4' : '1'
       }

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

@@ -88,7 +88,9 @@ function (_super) {
 
       if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
         _mobx.store.setState({
-          clickedFloor: ''
+          clickedFloor: '',
+          clickedGroup: '',
+          clickedMeta: ''
         });
       }
 

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

@@ -146,6 +146,7 @@ function (_super) {
         renderHeader = _a.renderHeader,
         pageData = _a.pageData,
         appointmentDate = _a.appointmentDate;
+    var pageBackground = window.magicDesign.pageBackground;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('design-area-wrap', {
         'phone-edit': this.isPhoneEdit()
@@ -162,10 +163,8 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "device_border",
       style: {
-        background: window.magicDesign.pageBackground
+        background: pageBackground
       }
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "device_content"
     }, this.filterCompFloor(pageData).map(function (nodeData) {
       var Clazz = _componentTypes.componentMap[nodeData.type];
 
@@ -181,7 +180,7 @@ function (_super) {
         key: nodeData.id,
         id: "view" + nodeData.id
       }, /*#__PURE__*/_react["default"].createElement(Clazz, __assign({}, newInstanceProps), null));
-    })))));
+    }))));
   };
 
   return ViewArea;