@fonixtree/magic-design 1.0.151 → 1.0.153

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

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 require("./index.less");
 
-var _html2canvas = _interopRequireDefault(require("html2canvas"));
-
 var _ParallaxScroll = _interopRequireDefault(require("./components/ParallaxScroll"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -41,169 +39,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
-var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
-  var _ = {
-    label: 0,
-    sent: function sent() {
-      if (t[0] & 1) throw t[1];
-      return t[1];
-    },
-    trys: [],
-    ops: []
-  },
-      f,
-      y,
-      t,
-      g;
-  return g = {
-    next: verb(0),
-    "throw": verb(1),
-    "return": verb(2)
-  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
-    return this;
-  }), g;
-
-  function verb(n) {
-    return function (v) {
-      return step([n, v]);
-    };
-  }
-
-  function step(op) {
-    if (f) throw new TypeError("Generator is already executing.");
-
-    while (_) {
-      try {
-        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-        if (y = 0, t) op = [op[0] & 2, t.value];
-
-        switch (op[0]) {
-          case 0:
-          case 1:
-            t = op;
-            break;
-
-          case 4:
-            _.label++;
-            return {
-              value: op[1],
-              done: false
-            };
-
-          case 5:
-            _.label++;
-            y = op[1];
-            op = [0];
-            continue;
-
-          case 7:
-            op = _.ops.pop();
-
-            _.trys.pop();
-
-            continue;
-
-          default:
-            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-              _ = 0;
-              continue;
-            }
-
-            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-              _.label = op[1];
-              break;
-            }
-
-            if (op[0] === 6 && _.label < t[1]) {
-              _.label = t[1];
-              t = op;
-              break;
-            }
-
-            if (t && _.label < t[2]) {
-              _.label = t[2];
-
-              _.ops.push(op);
-
-              break;
-            }
-
-            if (t[2]) _.ops.pop();
-
-            _.trys.pop();
-
-            continue;
-        }
-
-        op = body.call(thisArg, _);
-      } catch (e) {
-        op = [6, e];
-        y = 0;
-      } finally {
-        f = t = 0;
-      }
-    }
-
-    if (op[0] & 5) throw op[1];
-    return {
-      value: op[0] ? op[1] : void 0,
-      done: true
-    };
-  }
-};
-
-var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
-    s += arguments[i].length;
-  }
-
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
-    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
-      r[k] = a[j];
-    }
-  }
-
-  return r;
-};
-/* eslint-disable no-restricted-syntax */
-
-/* eslint-disable no-plusplus */
-
-
-var maxRipples = 10;
-
 var SlideImagePc =
 /** @class */
 function (_super) {
@@ -212,239 +47,10 @@ function (_super) {
   function SlideImagePc() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.state = {
-      ripples: []
-    };
-    _this.canvasRef = /*#__PURE__*/_react["default"].createRef();
-    _this.divRef = /*#__PURE__*/_react["default"].createRef();
-    _this.parentRef = /*#__PURE__*/_react["default"].createRef();
-    _this.canvas = null;
-    _this.ctx = null;
-    _this.width = 0;
-    _this.height = 0;
-    _this.requestId = null;
-
-    _this.resizeCanvas = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a;
-
-        var _this = this;
-
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              _a = this;
-              return [4
-              /*yield*/
-              , new Promise(function (resolve) {
-                // const _canvas = html2canvas(this.divRef.current, { scale: 1 });
-                (0, _html2canvas["default"])(_this.divRef.current, {
-                  ignoreElements: function ignoreElements(element) {
-                    return element.classList.contains('canvas-ignore');
-                  },
-                  scale: 1,
-                  logging: true
-                }).then(function (canvas) {
-                  resolve(canvas);
-                }); // resolve(_canvas);
-              })];
-
-            case 1:
-              _a.canvas = _b.sent();
-              this.width = this.canvas.width;
-              this.height = this.canvas.height;
-              this.canvasRef.current.width = this.width;
-              this.canvasRef.current.height = this.height;
-              this.ctx = this.canvasRef.current.getContext('2d'); // if (isImageLoaded) {
-
-              this.ctx.drawImage(this.canvas, 0, 0);
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    }; // 创建水波纹
-
-
-    _this.createRipple = function (x, y) {
-      var ripples = _this.state.ripples;
-
-      if (ripples.length >= maxRipples) {
-        _this.setState(function (prevState) {
-          return {
-            ripples: prevState.ripples.slice(1)
-          };
-        });
-      }
-
-      var newRipple = {
-        x: x,
-        y: y,
-        radius: 0,
-        maxRadius: Math.max(_this.width, _this.height) * 0.3,
-        amplitude: 30,
-        phase: 0,
-        phaseSpeed: 0.05,
-        expand: 2
-      };
-
-      _this.setState(function (prevState) {
-        return {
-          ripples: __spreadArrays(prevState.ripples, [newRipple])
-        };
-      });
-    }; // 绘制水波纹效果
-
-
-    _this.drawRipples = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var ripples, tempCanvas, tempCtx, imageData, pixels, distortedImageData, distortedPixels, y, x, offsetX, offsetY, _i, ripples_1, ripple, dx, dy, distance, impact, angle, sourceX, sourceY, targetIndex, sourceIndex, _loop_1, this_1, i;
-
-        return __generator(this, function (_a) {
-          ripples = this.state.ripples; // if (!isImageLoaded) {
-          //   requestAnimationFrame(this.drawRipples);
-          //   return;
-          // }
-
-          try {
-            this.ctx.clearRect(0, 0, this.width, this.height); // 首先绘制原始图像
-
-            this.ctx.drawImage(this.canvas, 0, 0);
-            tempCanvas = document.createElement('canvas');
-            tempCanvas.width = this.width;
-            tempCanvas.height = this.height;
-            tempCtx = tempCanvas.getContext('2d'); // 复制原始图像到临时canvas
-
-            tempCtx.drawImage(this.canvas, 0, 0);
-
-            try {
-              imageData = tempCtx.getImageData(0, 0, this.width, this.height);
-              pixels = imageData.data;
-              distortedImageData = this.ctx.createImageData(this.width, this.height);
-              distortedPixels = distortedImageData.data; // 应用水波纹变形
-
-              for (y = 0; y < this.height; y++) {
-                for (x = 0; x < this.width; x++) {
-                  offsetX = 0;
-                  offsetY = 0; // 计算每个波纹的影响
-
-                  for (_i = 0, ripples_1 = ripples; _i < ripples_1.length; _i++) {
-                    ripple = ripples_1[_i];
-                    dx = x - ripple.x;
-                    dy = y - ripple.y;
-                    distance = Math.sqrt(dx * dx + dy * dy);
-
-                    if (distance < ripple.radius) {
-                      impact = (1 - distance / ripple.radius) * Math.sin(distance / ripple.radius * Math.PI * 4 - ripple.phase) * ripple.amplitude;
-                      angle = Math.atan2(dy, dx);
-                      offsetX += Math.cos(angle) * impact;
-                      offsetY += Math.sin(angle) * impact;
-                    }
-                  }
-
-                  sourceX = Math.min(Math.max(Math.round(x + offsetX), 0), this.width - 1);
-                  sourceY = Math.min(Math.max(Math.round(y + offsetY), 0), this.height - 1);
-                  targetIndex = (y * this.width + x) * 4;
-                  sourceIndex = (sourceY * this.width + sourceX) * 4; // 复制像素
-
-                  distortedPixels[targetIndex] = pixels[sourceIndex]; // R
-
-                  distortedPixels[targetIndex + 1] = pixels[sourceIndex + 1]; // G
-
-                  distortedPixels[targetIndex + 2] = pixels[sourceIndex + 2]; // B
-
-                  distortedPixels[targetIndex + 3] = pixels[sourceIndex + 3]; // A
-                }
-              } // 将变形后的图像绘制到主canvas
-
-
-              this.ctx.putImageData(distortedImageData, 0, 0);
-            } catch (error) {
-              console.error(error);
-            }
-
-            _loop_1 = function _loop_1(i) {
-              var ripple = ripples[i];
-              ripple.radius += ripple.expand;
-              ripple.phase += ripple.phaseSpeed;
-              ripple.amplitude *= 0.98; // 移除过大或过弱的波纹
-
-              if (ripple.radius > ripple.maxRadius || ripple.amplitude < 0.1) {
-                this_1.setState(function (prevState) {
-                  return {
-                    ripples: prevState.ripples.filter(function (_, index) {
-                      return index !== i;
-                    })
-                  };
-                });
-              }
-            };
-
-            this_1 = this; // 更新波纹状态
-
-            for (i = ripples.length - 1; i >= 0; i--) {
-              _loop_1(i);
-            }
-          } catch (error) {
-            console.error(error);
-          }
-
-          this.requestId = requestAnimationFrame(this.drawRipples);
-          return [2
-          /*return*/
-          ];
-        });
-      });
-    };
-
-    _this.handleMouseMove = function (e) {
-      var rect = _this.canvasRef.current.getBoundingClientRect();
-
-      var x = e.clientX - rect.left;
-      var y = e.clientY - rect.top; // 限制创建波纹的频率
-      // if (Math.random() > 0.85) {
-
-      _this.createRipple(x, y); // }
-
-    };
-
-    _this.initAnim = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              return [4
-              /*yield*/
-              , this.resizeCanvas()];
-
-            case 1:
-              _a.sent();
-
-              this.drawRipples();
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    };
-
+    _this.state = {};
     return _this;
   }
 
-  SlideImagePc.prototype.componentDidMount = function () {
-    this.initAnim();
-    this.parentRef.current.addEventListener('mousemove', this.handleMouseMove);
-    window.addEventListener('resize', this.resizeCanvas);
-  };
-
-  SlideImagePc.prototype.componentWillUnmount = function () {
-    this.parentRef.current.removeEventListener('mousemove', this.handleMouseMove);
-    window.removeEventListener('resize', this.resizeCanvas);
-    cancelAnimationFrame(this.requestId);
-  };
-
   SlideImagePc.prototype.render = function () {
     var _a = this.props.panelProps,
         spacing = _a.spacing,
@@ -452,17 +58,11 @@ function (_super) {
     var columnSpace = spacing.pc.columnSpace;
     var lineSpace = spacing.pc.lineSpace;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      ref: this.parentRef,
       className: "m-slide-image-pc"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      ref: this.divRef,
-      className: "content"
     }, /*#__PURE__*/_react["default"].createElement(_ParallaxScroll["default"], {
       source: groupSource,
       xGap: columnSpace,
       yGap: lineSpace
-    })), /*#__PURE__*/_react["default"].createElement("canvas", {
-      ref: this.canvasRef
     }));
   };
 

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

@@ -1,12 +1 @@
-.m-slide-image-pc {
-  canvas {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    pointer-events: none;
-  }
-}
+.m-slide-image-pc {}

package/es/meta-comp/config-panels/TextConfig/index.js

@@ -282,6 +282,7 @@ function (_super) {
         split: true,
         title: "URL"
       }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+        disabled: true,
         onChange: function onChange(v) {
           textData.clickUrl = v;
 

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