@fonixtree/magic-design 0.0.98 → 0.0.100

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

@@ -48,13 +48,13 @@ var getDefaultJSON = function getDefaultJSON() {
     groupSource: [imagesGroupSourceJSON()],
     spacing: {
       pc: {
-        paddingTop: 10,
-        paddingBottom: 10,
+        paddingTop: 0,
+        paddingBottom: 0,
         marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
-        paddingTop: 10,
-        paddingBottom: 10,
+        paddingTop: 0,
+        paddingBottom: 0,
         marginBottom: window.magicDesign.compSpacing
       }
     },

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

@@ -114,9 +114,9 @@ function (_super) {
         className: (0, _classnames["default"])('line', {
           isHorizontal: isHorizontal
         }),
-        style: {
+        style: isHorizontal ? {
           gap: MOBILE_IMG_SIZE[colNum].gap
-        }
+        } : {}
       }, arr.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: item.id,
@@ -127,7 +127,7 @@ function (_super) {
         }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
           data: item.image,
           maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
-          maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+          maxWidth: "100%"
         }));
       }));
     })));

package/lib/composite-comp/bol/components/ImageGallery/mobile/index.less

@@ -1,8 +1,5 @@
 .m-image-gallery-mobile {
   .content {
-    max-width: 345px;
-    margin: 0 auto;
-
     .line {
       margin-bottom: 12px;
 

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

@@ -61,6 +61,8 @@ var PC_IMG_SIZE = {
     maxW: 1280,
     minH: 150,
     maxH: 960,
+    defW: 1072,
+    defH: 400,
     gap: 20
   },
   2: {
@@ -131,9 +133,9 @@ function (_super) {
         className: (0, _classnames["default"])('line', {
           isHorizontal: isHorizontal
         }),
-        style: {
+        style: isHorizontal ? {
           gap: PC_IMG_SIZE[colNum].gap
-        }
+        } : {}
       }, arr.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: item.id,
@@ -143,8 +145,8 @@ function (_super) {
           }
         }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
           data: item.image,
-          maxHeight: PC_IMG_SIZE[colNum].maxH,
-          maxWidth: PC_IMG_SIZE[colNum].maxW,
+          maxHeight: item.image.content.pcImgSrc ? PC_IMG_SIZE[colNum].maxH : PC_IMG_SIZE[colNum].defH,
+          maxWidth: item.image.content.pcImgSrc ? '100%' : PC_IMG_SIZE[colNum].defW,
           minHeight: PC_IMG_SIZE[colNum].minH,
           minWidth: PC_IMG_SIZE[colNum].minW
         }));

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

@@ -1,8 +1,5 @@
 .m-image-gallery-pc {
   .content {
-    max-width: 1280px;
-    margin: 0 auto;
-
     .line {
       margin-bottom: 20px;
 

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

@@ -7,7 +7,7 @@ exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _ditoLogo = _interopRequireDefault(require("./imgs/dito-logo.svg"));
+var _xtLogo = _interopRequireDefault(require("./imgs/xt-logo.png"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -25,8 +25,8 @@ var getDefaultJSON = function getDefaultJSON() {
         content: {
           h5Name: 'name2',
           pcName: 'name2',
-          h5ImgSrc: _ditoLogo["default"],
-          pcImgSrc: _ditoLogo["default"],
+          h5ImgSrc: _xtLogo["default"],
+          pcImgSrc: _xtLogo["default"],
           clickUrl: ''
         },
         hover: {
@@ -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/AppointmentModal/index.js

@@ -36,7 +36,7 @@ function AppointmentModal(props) {
   };
 
   var disabledDate = function disabledDate(current) {
-    return current && current < (0, _moment["default"])().add(30, 'minutes');
+    return current && (current < (0, _moment["default"])().add(30, 'minutes') || current > (0, _moment["default"])().add(30, 'days'));
   };
 
   return /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
@@ -62,6 +62,9 @@ function AppointmentModal(props) {
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
     autoComplete: "off",
     form: form,
+    initialValues: {
+      date: (0, _moment["default"])().add(31, 'minutes')
+    },
     layout: "vertical",
     onFinish: onFinish
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {

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;

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

@@ -10,6 +10,7 @@
   transition-timing-function: ease;
 
   .appointment_wrap {
+    flex-shrink: 0;
     height: 44px;
     background-color: #FFF8F0;
     display: flex;
@@ -28,7 +29,7 @@
       font-family: 'Open Sans';
       font-style: normal;
       font-weight: 400;
-      font-size: 14px;
+      font-size: 13px;
       margin-left: 10px;
       display: flex;
       align-items: center;
@@ -74,9 +75,8 @@
     padding: 24px;
 
     .device_border {
-      padding: 1px;
-      max-width: 1240px;
       width: 100%;
+      padding: 1px;
       min-height: 70vh;
       border: 16px solid #FFF;
       border-radius: 12px;
@@ -84,10 +84,6 @@
       height: 100%;
       overflow: scroll;
       box-sizing: content-box;
-
-      .device_content {
-        min-width: 1200px;
-      }
     }
   }
 }

package/lib/core/Designer/index.js

@@ -516,7 +516,7 @@ function (_super) {
       onCancelPublish: onCancelPublish,
       pageData: MPageData,
       renderHeader: this.renderHeader
-    })), /*#__PURE__*/_react["default"].createElement(_AppointmentModal["default"], {
+    })), appointmentVisible && /*#__PURE__*/_react["default"].createElement(_AppointmentModal["default"], {
       onClose: function onClose() {
         return _this.setState({
           appointmentVisible: false

package/lib/core/Renderer/index.js

@@ -41,7 +41,8 @@ var setDesignConfig = function setDesignConfig(props) {
     device: device,
     isShop: isShop
   }, config), {
-    compSpacing: Number(config.compSpacing)
+    compSpacing: Number(config.compSpacing),
+    compWidth: Number(config.compWidth)
   });
 };
 /**
@@ -51,7 +52,8 @@ var setDesignConfig = function setDesignConfig(props) {
 
 var Renderer = function Renderer(props) {
   var pageData = props.pageData;
-  setDesignConfig(props); // 根据楼层展示设备进行过滤
+  setDesignConfig(props);
+  var pageBackground = window.magicDesign.pageBackground; // 根据楼层展示设备进行过滤
 
   var filterCompFloor = function filterCompFloor() {
     var source = [];
@@ -69,7 +71,7 @@ var Renderer = function Renderer(props) {
     className: "render_wrap",
     magic_design: "",
     style: {
-      background: window.magicDesign.pageBackground
+      background: pageBackground
     }
   }, filterCompFloor().map(function (nodeData) {
     var Clazz = _componentTypes.componentMap[nodeData.type];

package/lib/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;