@fonixtree/magic-design 1.0.151 → 1.0.153

package/es/common/ProductCardModal/index.js

@@ -42,6 +42,8 @@ function ProductCardModal(_a) {
       loading = _e[0],
       setLoading = _e[1];
 
+  var flag = true;
+
   var handleNext = function handleNext(e) {
     e.stopPropagation();
     setActive(function (prev) {
@@ -61,7 +63,38 @@ function ProductCardModal(_a) {
   };
 
   var randomRotateY = function randomRotateY() {
-    return Math.floor(Math.random() * 21) - 10;
+    // return Math.floor(Math.random() * 21) - 10;
+    return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
+  };
+
+  var handleScroll = function handleScroll(e) {
+    if (flag) {
+      flag = false; // 统一处理 delta 值
+
+      var delta = 0;
+
+      if (e.deltaY) {
+        delta = e.deltaY; // 现代浏览器
+      } else if (e.wheelDelta) {
+        delta = -e.wheelDelta / 40; // 旧版浏览器，调整方向和数值
+      } // 判断方向
+
+
+      if (delta > 0) {
+        console.log('向下滚动..');
+        handleNext(e);
+      } else if (delta < 0) {
+        console.log('向上滚动');
+        handlePrev(e);
+      } // 阻止默认滚动行为（如需要）
+
+
+      e.preventDefault();
+      var scrollTimeout_1 = setTimeout(function () {
+        flag = true;
+        clearTimeout(scrollTimeout_1);
+      }, 2000);
+    }
   };
 
   (0, _react.useEffect)(function () {
@@ -70,7 +103,15 @@ function ProductCardModal(_a) {
       return function () {
         return clearInterval(interval_1);
       };
-    }
+    } // 监听滚轮事件（推荐：现代浏览器）
+
+
+    document.addEventListener('wheel', handleScroll); // 兼容旧版浏览器（如 IE/旧 WebKit）
+    // document.addEventListener('mousewheel', handleScroll);
+
+    return function () {
+      document.removeEventListener('wheel', handleScroll); // document.removeEventListener('mousewheel', handleScroll);
+    };
   }, [autoplay]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "productCardModalWrap",

package/es/common/ProductCardModal/index.less

@@ -61,6 +61,7 @@
         top: 5%;
         right: 5%;
         cursor: pointer;
+        z-index: 3;
       }
 
       .dotIcon {
@@ -96,6 +97,7 @@
         position: absolute;
         bottom: 25%;
         left: 55%;
+        z-index: 3;
         cursor: pointer;
       }
     }

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

@@ -81,15 +81,13 @@ function (_super) {
       }
     }, rest), /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
       data: data
-    }), data.groupName.open && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "text-perch"
-    }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
-      className: "canvas-ignore",
+    }), data.groupName.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "text",
       data: data.groupName,
       style: {
         pointerEvents: (0, _coreUtil.isDesignMode)() ? 'unset' : 'none'
       }
-    }))));
+    })));
   };
 
   CardItem.defaultProps = {

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

@@ -1,10 +1,7 @@
 .slide-image-card-item-wrap {
   cursor: pointer;
 
-  .video-wrap {}
-
-  .text-perch {
+  .text {
     margin-top: 20px;
-    height: 30px;
   }
 }

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

@@ -54,10 +54,12 @@ function (_super) {
       inside: false,
       isNearCenter: false,
       flag: false,
-      corner: ''
+      corner: '',
+      videoPoster: ''
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     _this.cardRef = /*#__PURE__*/_react["default"].createRef();
+    _this.canvasRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -157,9 +159,32 @@ function (_super) {
   }
 
   VideoItem.prototype.componentDidMount = function () {
+    var _this = this;
+
     var dom = this.cardRef.current;
     dom.addEventListener('mousemove', this.handleMouseMove);
     dom.addEventListener('mouseleave', this.handleMouseLeave);
+
+    if (this.videoRef.current) {
+      var video_1 = this.videoRef.current;
+      var canvas_1 = this.canvasRef.current;
+      video_1.addEventListener('loadedmetadata', function () {
+        // 确保跳转到第一帧
+        video_1.currentTime = 0;
+      });
+      video_1.addEventListener('seeked', function () {
+        // 设置Canvas尺寸与视频一致
+        canvas_1.width = video_1.offsetWidth;
+        canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
+
+        var ctx = canvas_1.getContext('2d');
+        ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
+
+        _this.setState({
+          videoPoster: canvas_1.toDataURL('image/png')
+        });
+      });
+    }
   };
 
   VideoItem.prototype.componentWillUnmount = function () {
@@ -169,25 +194,26 @@ function (_super) {
   };
 
   VideoItem.prototype.render = function () {
-    var _a, _b;
+    var _a;
 
-    var _c, _d, _e, _f, _g, _h, _j;
+    var _b, _c, _d, _e, _f, _g;
 
     var data = this.props.data;
-    var _k = this.state,
-        playing = _k.playing,
-        inside = _k.inside,
-        isNearCenter = _k.isNearCenter,
-        flag = _k.flag,
-        corner = _k.corner;
+    var _h = this.state,
+        playing = _h.playing,
+        inside = _h.inside,
+        isNearCenter = _h.isNearCenter,
+        flag = _h.flag,
+        corner = _h.corner,
+        videoPoster = _h.videoPoster;
+    var img = ((_c = (_b = data.overilay) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcImgSrc) || videoPoster;
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.cardRef,
       className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
-    }, ((_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
+    }, ((_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
-      className: "canvas-ignore",
       loop: true,
       muted: true,
       playsinline: true,
@@ -195,16 +221,19 @@ function (_super) {
         visibility: playing ? 'visible' : 'hidden'
       }
     }, /*#__PURE__*/_react["default"].createElement("source", {
-      src: (_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl,
+      src: (_e = data.video) === null || _e === void 0 ? void 0 : _e.sourceUrl,
       type: "video/mp4"
-    })), ((_e = data.overilay) === null || _e === void 0 ? void 0 : _e.open) && /*#__PURE__*/_react["default"].createElement("img", {
+    })), ((_f = data.overilay) === null || _f === void 0 ? void 0 : _f.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: (0, _classnames["default"])('video-img', (_b = {}, _b['canvas-ignore'] = (_f = data.video) === null || _f === void 0 ? void 0 : _f.sourceUrl, _b)),
-      src: (_h = (_g = data.overilay) === null || _g === void 0 ? void 0 : _g.content) === null || _h === void 0 ? void 0 : _h.pcImgSrc,
+      className: (0, _classnames["default"])('video-img', {
+        cover: (_g = data.video) === null || _g === void 0 ? void 0 : _g.sourceUrl
+      }),
+      src: img,
       style: {
-        visibility: playing ? 'hidden' : 'visible',
-        zIndex: ((_j = data.video) === null || _j === void 0 ? void 0 : _j.sourceUrl) ? 3 : 0
+        visibility: playing ? 'hidden' : 'visible'
       }
+    }), /*#__PURE__*/_react["default"].createElement("canvas", {
+      ref: this.canvasRef
     }));
   };
 

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

@@ -2,9 +2,10 @@
   position: relative;
   transition: border-radius 0.2s ease;
   overflow: hidden;
-  cursor: pointer;
+  display: flex;
   --dx: calc(var(--size) - var(--x));
   --dy: calc(var(--size) - var(--y));
+  cursor: url('./imgs/cursor.png'), pointer;
 
   // &.hover {
   // border-radius:
@@ -67,20 +68,26 @@
   }
 
   video {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    object-fit: cover;
     width: 100%;
-    height: 100%;
-    z-index: 2;
   }
 
   .video-img {
     width: 100%;
-    position: relative;
-    z-index: 0;
+
+    &.cover {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+  }
+
+  canvas {
+    display: none;
   }
 }