@fonixtree/magic-design 1.0.147 → 1.0.150

package/es/common/ProductCardModal/index.js

@@ -115,7 +115,7 @@ function ProductCardModal(_a) {
       onLoad: function onLoad() {
         return setLoading(false);
       },
-      src: item.imgUrl
+      src: item.cardImgUrl
     }), !loading && /*#__PURE__*/_react["default"].createElement("div", {
       className: "absoluteWrap"
     }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
@@ -160,6 +160,16 @@ function ProductCardModal(_a) {
       alt: "",
       className: "dotIcon",
       src: _dotIcon["default"]
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardLeft",
+      onClick: function onClick(e) {
+        return handlePrev(e);
+      }
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardRight",
+      onClick: function onClick(e) {
+        return handleNext(e);
+      }
     })));
   }))), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
     className: "iconLeft",

package/es/common/ProductCardModal/index.less

@@ -25,6 +25,25 @@
       top: 0;
       bottom: 0;
       margin: auto;
+      cursor: pointer;
+
+      .cardLeft {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+
+      .cardRight {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+      }
 
       .bgImg {
         display: block;
@@ -86,7 +105,7 @@
     transform: rotate(90deg);
     cursor: pointer;
     position: absolute;
-    left: 8%;
+    left: 20%;
     top: 0;
     bottom: 0;
     margin: auto;
@@ -97,7 +116,7 @@
     transform: rotate(-90deg);
     cursor: pointer;
     position: absolute;
-    right: 8%;
+    right: 20%;
     top: 0;
     bottom: 0;
     margin: auto;

package/es/composite-comp/dito/components/GroupedCarousel/pc/index.js

@@ -129,7 +129,8 @@ function (_super) {
         data: tab.hover.groupName,
         iconHeight: 46
       }) : /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
-        data: tab.groupName
+        data: tab.groupName,
+        iconHeight: 46
       })));
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tab-content"

package/es/composite-comp/dito/components/SearchDITO/pc/index.js

@@ -21,6 +21,8 @@ var _common = require("../../../../../common");
 
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+var _businessUtil = require("../../../../../utils/businessUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 require("slick-carousel/slick/slick.css");
@@ -234,7 +236,8 @@ function (_super) {
       visible: false,
       relativeLeft: 0,
       logVisible: false,
-      userInfo: {}
+      userInfo: {},
+      cartNum: 0
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -468,6 +471,43 @@ function (_super) {
       });
     };
 
+    _this.getCartCount = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var num, res;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              num = 0;
+              if (!(0, _commonUtil.isLogin)()) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/carts/num', {}, 'GET')];
+
+            case 1:
+              res = _a.sent();
+              num = res.num;
+              return [3
+              /*break*/
+              , 3];
+
+            case 2:
+              num = (0, _businessUtil.getTempCartCount)();
+              _a.label = 3;
+
+            case 3:
+              this.setState({
+                cartNum: num
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
     return _this;
   }
 
@@ -478,6 +518,7 @@ function (_super) {
       this.getUserInfo();
     }
 
+    this.getCartCount();
     this.getCategory();
     this.destroy = (0, _mobx.autorun)(function () {
       _this.bannerGoto(_this.props.data.groupSource);
@@ -517,7 +558,8 @@ function (_super) {
         relativeLeft = _s.relativeLeft,
         catgImg = _s.catgImg,
         logVisible = _s.logVisible,
-        userInfo = _s.userInfo;
+        userInfo = _s.userInfo,
+        cartNum = _s.cartNum;
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -602,7 +644,9 @@ function (_super) {
       },
       size: 24,
       type: "icon-ShoppingCartSimple1"
-    })), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
+    }), cartNum > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "cart-num"
+    }, cartNum)), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('personal-info', {
         showLogOut: logVisible
       }),

package/es/composite-comp/dito/components/SearchDITO/pc/index.less

@@ -124,6 +124,21 @@
 
       .icon-wrap {
         cursor: pointer;
+        position: relative;
+
+        .cart-num {
+          position: absolute;
+          top: -8px;
+          right: -8px;
+          width: 20px;
+          height: 20px;
+          background-color: #ce1126;
+          color: #fff;
+          border-radius: 50%;
+          font-size: 11px;
+          line-height: 20px;
+          text-align: center;
+        }
       }
 
       .personal-info {

package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.js

@@ -69,8 +69,6 @@ function (_super) {
     return _super !== null && _super.apply(this, arguments) || this;
   }
 
-  CardItem.prototype.componentDidMount = function () {};
-
   CardItem.prototype.render = function () {
     var _a = this.props,
         data = _a.data,

package/es/composite-comp/dito/components/SlideImage/pc/components/ParallaxScroll/index.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _framerMotion = require("framer-motion");
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 var _CardItem = _interopRequireDefault(require("../CardItem"));
 
 require("./index.less");
@@ -57,33 +59,43 @@ function ParallaxScroll(_a) {
   var translateFirst = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colOneScrollY]);
   var translateSecond = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colTwoScrollY]);
   var translateThird = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colThreeScrollY]);
+
+  var initLayout = function initLayout() {
+    var _a, _b, _c;
+
+    console.log('init...');
+    var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+    var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
+    var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
+    var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
+    var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
+    var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
+
+    if (minHeightIndex === 0) {
+      setColOneScrollY(space);
+      setColTwoScrollY(colOneHeight - colTwoHeight + space);
+      setColThreeScrollY(colOneHeight - colThreeHeight + space);
+    } else if (minHeightIndex === 1) {
+      setColOneScrollY(colTwoHeight - colOneHeight + space);
+      setColTwoScrollY(space);
+      setColThreeScrollY(colTwoHeight - colThreeHeight + space);
+    } else {
+      setColOneScrollY(colThreeHeight - colOneHeight + space);
+      setColTwoScrollY(colThreeHeight - colTwoHeight + space);
+      setColThreeScrollY(space);
+    }
+  };
+
   (0, _react.useEffect)(function () {
-    setTimeout(function () {
-      var _a, _b, _c;
-
-      if (!(0, _coreUtil.isDesignMode)()) {
-        var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
-        var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
-        var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
-        var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
-        var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
-        var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
-
-        if (minHeightIndex === 0) {
-          setColOneScrollY(space);
-          setColTwoScrollY(colOneHeight - colTwoHeight + space);
-          setColThreeScrollY(colOneHeight - colThreeHeight + space);
-        } else if (minHeightIndex === 1) {
-          setColOneScrollY(colTwoHeight - colOneHeight + space);
-          setColTwoScrollY(space);
-          setColThreeScrollY(colTwoHeight - colThreeHeight + space);
-        } else {
-          setColOneScrollY(colThreeHeight - colOneHeight + space);
-          setColTwoScrollY(colThreeHeight - colTwoHeight + space);
-          setColThreeScrollY(space);
-        }
-      }
-    }, 1500);
+    if (!(0, _coreUtil.isDesignMode)()) {
+      setTimeout(function () {
+        initLayout();
+      }, 1500);
+      window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
+      return function () {
+        window.removeEventListener('resize', initLayout);
+      };
+    }
   }, [scrollYProgress]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "m-parallax-scroll"

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -48,9 +50,13 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      playing: false
+      playing: false,
+      inside: false,
+      isNearCenter: false,
+      flag: false
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
+    _this.cardRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -74,18 +80,89 @@ function (_super) {
       _this.setState({
         playing: false
       });
+    }; // 获取元素中心坐标
+
+
+    _this.getCenter = function (element) {
+      var rect = element.getBoundingClientRect();
+      return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      };
+    }; // 判断是否在中心区域
+
+
+    _this.checkMouseNearCenter = function (e, radius) {
+      if (radius === void 0) {
+        radius = 35;
+      }
+
+      var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
+
+
+      var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
+      return distance <= radius;
+    };
+
+    _this.handleMouseMove = (0, _lodash["default"])(function (e) {
+      var dom = _this.cardRef.current;
+      var size = parseInt(getComputedStyle(dom).width);
+      var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
+
+      var y = size * 0.5 + e.offsetY * 0.5;
+      dom.style.setProperty('--x', x);
+      dom.style.setProperty('--y', y);
+      dom.style.setProperty('--size', size);
+
+      var isNear = _this.checkMouseNearCenter(e);
+
+      if (isNear) _this.setState({
+        flag: true
+      });
+
+      _this.setState({
+        isNearCenter: isNear,
+        inside: true
+      });
+    });
+
+    _this.initAnim = function () {
+      var dom = _this.cardRef.current;
+      dom.addEventListener('mousemove', _this.handleMouseMove);
+      dom.addEventListener('mouseleave', function () {
+        _this.setState({
+          inside: false,
+          flag: false
+        });
+      }); // 窗口大小变化时重新计算中心
+      // window.addEventListener('resize', () => {
+      //   this.setState({
+      //     inside: false,
+      //   });
+      // });
     };
 
     return _this;
   }
 
+  VideoItem.prototype.componentDidMount = function () {
+    this.initAnim();
+  };
+
   VideoItem.prototype.render = function () {
     var _a, _b, _c, _d, _e, _f;
 
     var data = this.props.data;
-    var playing = this.state.playing;
+    var _g = this.state,
+        playing = _g.playing,
+        inside = _g.inside,
+        isNearCenter = _g.isNearCenter,
+        flag = _g.flag;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "slide-image-video-wrap",
+      ref: this.cardRef,
+      className: (0, _classnames["default"])('slide-image-video-wrap', {
+        hover: inside && !isNearCenter && !flag
+      }),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
     }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -1,7 +1,24 @@
 .slide-image-video-wrap {
   position: relative;
+  transition: border-radius 0.1s linear;
+  overflow: hidden;
+  --dx: calc(var(--size) - var(--x));
+  --dy: calc(var(--size) - var(--y));
   cursor: pointer;
 
+  &.hover {
+    cursor: pointer;
+    border-radius:
+      ~"calc(var(--x)/var(--size)*100%)"
+      ~"calc(var(--dx)/var(--size)*100%)"
+      ~"calc(var(--dx)/var(--size)*100%)"
+      ~"calc(var(--x)/var(--size)*100%) /"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"calc(var(--dy)/var(--size)*100%)"
+      ~"calc(var(--dy)/var(--size)*100%)";
+  }
+
   video {
     width: 100%;
   }

package/es/constants/index.js

@@ -329,6 +329,9 @@ var tempTypeMap = {
 exports.tempTypeMap = tempTypeMap;
 var STORE_KEY = {
   // 是否从sf app跳转
-  IS_FROM_SF: 'isFromSf'
+  IS_FROM_SF: 'isFromSf',
+
+  /** 游客模式 临时购物车 */
+  TEMP_CART: 'TEMP_CART'
 };
 exports.STORE_KEY = STORE_KEY;

package/es/utils/businessUtil.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
+exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getTempCartCount = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
 
 var _qs = _interopRequireDefault(require("qs"));
 
@@ -11,6 +11,8 @@ var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
 
 var _commonUtil = require("./commonUtil");
 
+var _storeUtil = require("./storeUtil");
+
 var _constants = require("../constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -483,5 +485,14 @@ var computeStyle = function computeStyle(_a, device) {
 
   return wrapStyle;
 };
+/** 获取临时购物车 数量 */
+
+
+exports.computeStyle = computeStyle;
+
+var getTempCartCount = function getTempCartCount() {
+  var tempCarts = (0, _storeUtil.getStore)(_constants.STORE_KEY.TEMP_CART) || [];
+  return tempCarts.length;
+};
 
-exports.computeStyle = computeStyle;
+exports.getTempCartCount = getTempCartCount;

package/lib/common/ProductCardModal/index.js

@@ -115,7 +115,7 @@ function ProductCardModal(_a) {
       onLoad: function onLoad() {
         return setLoading(false);
       },
-      src: item.imgUrl
+      src: item.cardImgUrl
     }), !loading && /*#__PURE__*/_react["default"].createElement("div", {
       className: "absoluteWrap"
     }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
@@ -160,6 +160,16 @@ function ProductCardModal(_a) {
       alt: "",
       className: "dotIcon",
       src: _dotIcon["default"]
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardLeft",
+      onClick: function onClick(e) {
+        return handlePrev(e);
+      }
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardRight",
+      onClick: function onClick(e) {
+        return handleNext(e);
+      }
     })));
   }))), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
     className: "iconLeft",

package/lib/common/ProductCardModal/index.less

@@ -25,6 +25,25 @@
       top: 0;
       bottom: 0;
       margin: auto;
+      cursor: pointer;
+
+      .cardLeft {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+
+      .cardRight {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+      }
 
       .bgImg {
         display: block;
@@ -86,7 +105,7 @@
     transform: rotate(90deg);
     cursor: pointer;
     position: absolute;
-    left: 8%;
+    left: 20%;
     top: 0;
     bottom: 0;
     margin: auto;
@@ -97,7 +116,7 @@
     transform: rotate(-90deg);
     cursor: pointer;
     position: absolute;
-    right: 8%;
+    right: 20%;
     top: 0;
     bottom: 0;
     margin: auto;

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

@@ -129,7 +129,8 @@ function (_super) {
         data: tab.hover.groupName,
         iconHeight: 46
       }) : /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
-        data: tab.groupName
+        data: tab.groupName,
+        iconHeight: 46
       })));
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "tab-content"

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

@@ -21,6 +21,8 @@ var _common = require("../../../../../common");
 
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+var _businessUtil = require("../../../../../utils/businessUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 require("slick-carousel/slick/slick.css");
@@ -234,7 +236,8 @@ function (_super) {
       visible: false,
       relativeLeft: 0,
       logVisible: false,
-      userInfo: {}
+      userInfo: {},
+      cartNum: 0
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -468,6 +471,43 @@ function (_super) {
       });
     };
 
+    _this.getCartCount = function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var num, res;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              num = 0;
+              if (!(0, _commonUtil.isLogin)()) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/carts/num', {}, 'GET')];
+
+            case 1:
+              res = _a.sent();
+              num = res.num;
+              return [3
+              /*break*/
+              , 3];
+
+            case 2:
+              num = (0, _businessUtil.getTempCartCount)();
+              _a.label = 3;
+
+            case 3:
+              this.setState({
+                cartNum: num
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
     return _this;
   }
 
@@ -478,6 +518,7 @@ function (_super) {
       this.getUserInfo();
     }
 
+    this.getCartCount();
     this.getCategory();
     this.destroy = (0, _mobx.autorun)(function () {
       _this.bannerGoto(_this.props.data.groupSource);
@@ -517,7 +558,8 @@ function (_super) {
         relativeLeft = _s.relativeLeft,
         catgImg = _s.catgImg,
         logVisible = _s.logVisible,
-        userInfo = _s.userInfo;
+        userInfo = _s.userInfo,
+        cartNum = _s.cartNum;
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -602,7 +644,9 @@ function (_super) {
       },
       size: 24,
       type: "icon-ShoppingCartSimple1"
-    })), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
+    }), cartNum > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "cart-num"
+    }, cartNum)), ((_q = (_p = data.content) === null || _p === void 0 ? void 0 : _p.login) === null || _q === void 0 ? void 0 : _q.open) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _commonUtil.isLogin)() ? /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('personal-info', {
         showLogOut: logVisible
       }),

package/lib/composite-comp/dito/components/SearchDITO/pc/index.less

@@ -124,6 +124,21 @@
 
       .icon-wrap {
         cursor: pointer;
+        position: relative;
+
+        .cart-num {
+          position: absolute;
+          top: -8px;
+          right: -8px;
+          width: 20px;
+          height: 20px;
+          background-color: #ce1126;
+          color: #fff;
+          border-radius: 50%;
+          font-size: 11px;
+          line-height: 20px;
+          text-align: center;
+        }
       }
 
       .personal-info {

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

@@ -69,8 +69,6 @@ function (_super) {
     return _super !== null && _super.apply(this, arguments) || this;
   }
 
-  CardItem.prototype.componentDidMount = function () {};
-
   CardItem.prototype.render = function () {
     var _a = this.props,
         data = _a.data,

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

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _framerMotion = require("framer-motion");
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 var _CardItem = _interopRequireDefault(require("../CardItem"));
 
 require("./index.less");
@@ -57,33 +59,43 @@ function ParallaxScroll(_a) {
   var translateFirst = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colOneScrollY]);
   var translateSecond = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colTwoScrollY]);
   var translateThird = (0, _framerMotion.useTransform)(scrollYProgress, [0, 1], [0, colThreeScrollY]);
+
+  var initLayout = function initLayout() {
+    var _a, _b, _c;
+
+    console.log('init...');
+    var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+    var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
+    var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
+    var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
+    var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
+    var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
+
+    if (minHeightIndex === 0) {
+      setColOneScrollY(space);
+      setColTwoScrollY(colOneHeight - colTwoHeight + space);
+      setColThreeScrollY(colOneHeight - colThreeHeight + space);
+    } else if (minHeightIndex === 1) {
+      setColOneScrollY(colTwoHeight - colOneHeight + space);
+      setColTwoScrollY(space);
+      setColThreeScrollY(colTwoHeight - colThreeHeight + space);
+    } else {
+      setColOneScrollY(colThreeHeight - colOneHeight + space);
+      setColTwoScrollY(colThreeHeight - colTwoHeight + space);
+      setColThreeScrollY(space);
+    }
+  };
+
   (0, _react.useEffect)(function () {
-    setTimeout(function () {
-      var _a, _b, _c;
-
-      if (!(0, _coreUtil.isDesignMode)()) {
-        var colOneHeight = (_a = colOneRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
-        var colTwoHeight = (_b = colTwoRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
-        var colThreeHeight = (_c = colThreeRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight;
-        var colHeights = [colOneHeight, colTwoHeight, colThreeHeight];
-        var space = Math.max.apply(Math, colHeights) - Math.min.apply(Math, colHeights) - 20;
-        var minHeightIndex = colHeights.indexOf(Math.min.apply(Math, colHeights));
-
-        if (minHeightIndex === 0) {
-          setColOneScrollY(space);
-          setColTwoScrollY(colOneHeight - colTwoHeight + space);
-          setColThreeScrollY(colOneHeight - colThreeHeight + space);
-        } else if (minHeightIndex === 1) {
-          setColOneScrollY(colTwoHeight - colOneHeight + space);
-          setColTwoScrollY(space);
-          setColThreeScrollY(colTwoHeight - colThreeHeight + space);
-        } else {
-          setColOneScrollY(colThreeHeight - colOneHeight + space);
-          setColTwoScrollY(colThreeHeight - colTwoHeight + space);
-          setColThreeScrollY(space);
-        }
-      }
-    }, 1500);
+    if (!(0, _coreUtil.isDesignMode)()) {
+      setTimeout(function () {
+        initLayout();
+      }, 1500);
+      window.addEventListener('resize', (0, _debounce["default"])(initLayout, 200));
+      return function () {
+        window.removeEventListener('resize', initLayout);
+      };
+    }
   }, [scrollYProgress]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "m-parallax-scroll"

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

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -48,9 +50,13 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      playing: false
+      playing: false,
+      inside: false,
+      isNearCenter: false,
+      flag: false
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
+    _this.cardRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -74,18 +80,89 @@ function (_super) {
       _this.setState({
         playing: false
       });
+    }; // 获取元素中心坐标
+
+
+    _this.getCenter = function (element) {
+      var rect = element.getBoundingClientRect();
+      return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      };
+    }; // 判断是否在中心区域
+
+
+    _this.checkMouseNearCenter = function (e, radius) {
+      if (radius === void 0) {
+        radius = 35;
+      }
+
+      var center = _this.getCenter(e.target); // 计算鼠标与中心的距离
+
+
+      var distance = Math.sqrt(Math.pow(e.clientX - center.x, 2) + Math.pow(e.clientY - center.y, 2));
+      return distance <= radius;
+    };
+
+    _this.handleMouseMove = (0, _lodash["default"])(function (e) {
+      var dom = _this.cardRef.current;
+      var size = parseInt(getComputedStyle(dom).width);
+      var x = size * 0.5 + e.offsetX * 0.5; // 提升灵敏度
+
+      var y = size * 0.5 + e.offsetY * 0.5;
+      dom.style.setProperty('--x', x);
+      dom.style.setProperty('--y', y);
+      dom.style.setProperty('--size', size);
+
+      var isNear = _this.checkMouseNearCenter(e);
+
+      if (isNear) _this.setState({
+        flag: true
+      });
+
+      _this.setState({
+        isNearCenter: isNear,
+        inside: true
+      });
+    });
+
+    _this.initAnim = function () {
+      var dom = _this.cardRef.current;
+      dom.addEventListener('mousemove', _this.handleMouseMove);
+      dom.addEventListener('mouseleave', function () {
+        _this.setState({
+          inside: false,
+          flag: false
+        });
+      }); // 窗口大小变化时重新计算中心
+      // window.addEventListener('resize', () => {
+      //   this.setState({
+      //     inside: false,
+      //   });
+      // });
     };
 
     return _this;
   }
 
+  VideoItem.prototype.componentDidMount = function () {
+    this.initAnim();
+  };
+
   VideoItem.prototype.render = function () {
     var _a, _b, _c, _d, _e, _f;
 
     var data = this.props.data;
-    var playing = this.state.playing;
+    var _g = this.state,
+        playing = _g.playing,
+        inside = _g.inside,
+        isNearCenter = _g.isNearCenter,
+        flag = _g.flag;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "slide-image-video-wrap",
+      ref: this.cardRef,
+      className: (0, _classnames["default"])('slide-image-video-wrap', {
+        hover: inside && !isNearCenter && !flag
+      }),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
     }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {

package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -1,7 +1,24 @@
 .slide-image-video-wrap {
   position: relative;
+  transition: border-radius 0.1s linear;
+  overflow: hidden;
+  --dx: calc(var(--size) - var(--x));
+  --dy: calc(var(--size) - var(--y));
   cursor: pointer;
 
+  &.hover {
+    cursor: pointer;
+    border-radius:
+      ~"calc(var(--x)/var(--size)*100%)"
+      ~"calc(var(--dx)/var(--size)*100%)"
+      ~"calc(var(--dx)/var(--size)*100%)"
+      ~"calc(var(--x)/var(--size)*100%) /"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"calc(var(--y)/var(--size)*100%)"
+      ~"calc(var(--dy)/var(--size)*100%)"
+      ~"calc(var(--dy)/var(--size)*100%)";
+  }
+
   video {
     width: 100%;
   }

package/lib/constants/index.js

@@ -329,6 +329,9 @@ var tempTypeMap = {
 exports.tempTypeMap = tempTypeMap;
 var STORE_KEY = {
   // 是否从sf app跳转
-  IS_FROM_SF: 'isFromSf'
+  IS_FROM_SF: 'isFromSf',
+
+  /** 游客模式 临时购物车 */
+  TEMP_CART: 'TEMP_CART'
 };
 exports.STORE_KEY = STORE_KEY;

package/lib/utils/businessUtil.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
+exports.renderPreview = exports.parseUrl = exports.newParseUrl = exports.listToTree = exports.isPlatform = exports.getTempCartCount = exports.getPromotionList = exports.computeStyle = exports.canNumber = void 0;
 
 var _qs = _interopRequireDefault(require("qs"));
 
@@ -11,6 +11,8 @@ var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
 
 var _commonUtil = require("./commonUtil");
 
+var _storeUtil = require("./storeUtil");
+
 var _constants = require("../constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -483,5 +485,14 @@ var computeStyle = function computeStyle(_a, device) {
 
   return wrapStyle;
 };
+/** 获取临时购物车 数量 */
+
+
+exports.computeStyle = computeStyle;
+
+var getTempCartCount = function getTempCartCount() {
+  var tempCarts = (0, _storeUtil.getStore)(_constants.STORE_KEY.TEMP_CART) || [];
+  return tempCarts.length;
+};
 
-exports.computeStyle = computeStyle;
+exports.getTempCartCount = getTempCartCount;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "1.0.147",
+  "version": "1.0.150",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",