@fonixtree/magic-design 1.0.206 → 1.0.207

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

@@ -86,7 +86,8 @@ function (_super) {
       hoverState: false,
       isDragging: false,
       startX: 0,
-      startY: 0
+      startY: 0,
+      hasDragged: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -160,7 +161,19 @@ function (_super) {
     _this.handleMouseMove = function (e) {
       if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
 
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var _a = _this.state,
+          startX = _a.startX,
+          startY = _a.startY;
+      var deltaX = Math.abs(e.clientX - startX);
+      var deltaY = Math.abs(e.clientY - startY);
+
+      if (deltaX > 5 || deltaY > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
     };
 
     _this.handleMouseUp = function (e) {
@@ -170,7 +183,19 @@ function (_super) {
     _this.handleGlobalMouseMove = function (e) {
       if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
 
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var _a = _this.state,
+          startX = _a.startX,
+          startY = _a.startY;
+      var deltaX = Math.abs(e.clientX - startX);
+      var deltaY = Math.abs(e.clientY - startY);
+
+      if (deltaX > 5 || deltaY > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
     };
 
     _this.handleGlobalMouseUp = function (e) {
@@ -185,16 +210,10 @@ function (_super) {
       if (!_this.state.isDragging) return;
       var _c = _this.state,
           startX = _c.startX,
-          startY = _c.startY;
+          startY = _c.startY,
+          hasDragged = _c.hasDragged;
       var deltaX = startX - endX;
-      var deltaY = startY - endY; // 重置拖拽状态
-
-      _this.setState({
-        isDragging: false,
-        startX: 0,
-        startY: 0
-      }); // 判断是否为水平滑动（水平距离大于垂直距离，且水平距离超过阈值）
-
+      var deltaY = startY - endY; // 判断是否为水平滑动（水平距离大于垂直距离，且水平距离超过阈值）
 
       var minSwipeDistance = 50; // 最小滑动距离阈值
 
@@ -206,17 +225,75 @@ function (_super) {
           // 向右滑动，切换到上一页
           (_b = _this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.prev();
         }
+      } // 如果发生了拖拽，延迟重置以便阻止点击事件
+      // 如果没有拖拽，立即重置，允许点击事件正常触发
+
+
+      if (hasDragged) {
+        setTimeout(function () {
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startY: 0,
+            hasDragged: false
+          });
+        }, 100);
+      } else {
+        // 没有拖拽，立即重置，允许点击
+        _this.setState({
+          isDragging: false,
+          startX: 0,
+          startY: 0,
+          hasDragged: false
+        });
       }
     };
 
     _this.handleMouseLeave = function () {
       // 鼠标离开时重置拖拽状态
       if (_this.state.isDragging) {
-        _this.setState({
-          isDragging: false,
-          startX: 0,
-          startY: 0
-        });
+        var hasDragged = _this.state.hasDragged;
+
+        if (hasDragged) {
+          setTimeout(function () {
+            _this.setState({
+              isDragging: false,
+              startX: 0,
+              startY: 0,
+              hasDragged: false
+            });
+          }, 100);
+        } else {
+          // 没有拖拽，立即重置
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startY: 0,
+            hasDragged: false
+          });
+        }
+      }
+    }; // 阻止拖拽后的点击事件 - 使用捕获阶段
+
+
+    _this.handleClickCapture = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    }; // 阻止拖拽后的点击事件
+
+
+    _this.handleClick = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
       }
     }; // padding用统一设置
 
@@ -350,7 +427,8 @@ function (_super) {
         style: _this.getBackgroundStyle(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])('carouselItem', {
-          dragging: _this.state.isDragging
+          dragging: _this.state.isDragging,
+          'no-click': _this.state.hasDragged
         }),
         onMouseEnter: _this.mouseEnterWrap,
         onMouseLeave: function onMouseLeave(e) {
@@ -361,6 +439,8 @@ function (_super) {
         onMouseDown: _this.handleMouseDown,
         onMouseMove: _this.handleMouseMove,
         onMouseUp: _this.handleMouseUp,
+        onClick: _this.handleClick,
+        onClickCapture: _this.handleClickCapture,
         style: __assign(__assign({}, _this.getItemStyle(item)), {
           cursor: _this.state.isDragging ? 'grabbing' : !(0, _coreUtil.isDesignMode)() || ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) === 'renderer' ? 'grab' : 'default'
         })

package/es/composite-comp/bol/components/Banner/pc/index.less

@@ -63,6 +63,13 @@
       cursor: grabbing !important;
     }
 
+    // 拖拽时禁用子元素的点击事件
+    &.no-click {
+      * {
+        pointer-events: none !important;
+      }
+    }
+
     .carouseContent {
       padding: 0 80px;
       position: absolute;

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("./index.less");
 
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
@@ -310,7 +312,8 @@ function (_super) {
       scrollToRightDisabled: true,
       isDragging: false,
       startX: 0,
-      startScrollLeft: 0
+      startScrollLeft: 0,
+      hasDragged: false
     };
 
     _this.getFlashData = function (pageSize, campaign) {
@@ -450,46 +453,131 @@ function (_super) {
 
     _this.handleMouseMove = function (e) {
       if (!_this.state.isDragging) return;
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var startX = _this.state.startX;
+      var deltaX = Math.abs(e.clientX - startX);
+
+      if (deltaX > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
 
       _this.updateScrollPosition(e.clientX);
     };
 
     _this.handleGlobalMouseMove = function (e) {
       if (!_this.state.isDragging) return;
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var startX = _this.state.startX;
+      var deltaX = Math.abs(e.clientX - startX);
+
+      if (deltaX > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
 
       _this.updateScrollPosition(e.clientX);
     };
 
     _this.handleGlobalMouseUp = function (e) {
       if (!_this.state.isDragging) return;
-
-      _this.setState({
-        isDragging: false,
-        startX: 0,
-        startScrollLeft: 0
-      });
+      var hasDragged = _this.state.hasDragged; // 如果发生了拖拽，延迟重置以便阻止点击事件
+      // 如果没有拖拽，立即重置，允许点击事件正常触发
+
+      if (hasDragged) {
+        setTimeout(function () {
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startScrollLeft: 0,
+            hasDragged: false
+          });
+        }, 100);
+      } else {
+        // 没有拖拽，立即重置，允许点击
+        _this.setState({
+          isDragging: false,
+          startX: 0,
+          startScrollLeft: 0,
+          hasDragged: false
+        });
+      }
     };
 
     _this.handleMouseUp = function (e) {
       if (!_this.state.isDragging) return;
-
-      _this.setState({
-        isDragging: false,
-        startX: 0,
-        startScrollLeft: 0
-      });
+      var hasDragged = _this.state.hasDragged; // 如果发生了拖拽，延迟重置以便阻止点击事件
+      // 如果没有拖拽，立即重置，允许点击事件正常触发
+
+      if (hasDragged) {
+        setTimeout(function () {
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startScrollLeft: 0,
+            hasDragged: false
+          });
+        }, 100);
+      } else {
+        // 没有拖拽，立即重置，允许点击
+        _this.setState({
+          isDragging: false,
+          startX: 0,
+          startScrollLeft: 0,
+          hasDragged: false
+        });
+      }
     };
 
     _this.handleMouseLeave = function () {
       // 鼠标离开时重置拖拽状态
       if (_this.state.isDragging) {
-        _this.setState({
-          isDragging: false,
-          startX: 0,
-          startScrollLeft: 0
-        });
+        var hasDragged = _this.state.hasDragged;
+
+        if (hasDragged) {
+          setTimeout(function () {
+            _this.setState({
+              isDragging: false,
+              startX: 0,
+              startScrollLeft: 0,
+              hasDragged: false
+            });
+          }, 100);
+        } else {
+          // 没有拖拽，立即重置
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startScrollLeft: 0,
+            hasDragged: false
+          });
+        }
+      }
+    }; // 阻止拖拽后的点击事件 - 使用捕获阶段
+
+
+    _this.handleClickCapture = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    }; // 阻止拖拽后的点击事件
+
+
+    _this.handleClick = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
       }
     };
 
@@ -622,11 +710,15 @@ function (_super) {
       type: "icon-outlined-left"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.scrollRef,
-      className: "flash-deal-list",
+      className: (0, _classnames["default"])('flash-deal-list', {
+        'no-click': this.state.hasDragged
+      }),
       onMouseDown: this.handleMouseDown,
       onMouseMove: this.handleMouseMove,
       onMouseUp: this.handleMouseUp,
       onMouseLeave: this.handleMouseLeave,
+      onClick: this.handleClick,
+      onClickCapture: this.handleClickCapture,
       style: {
         cursor: this.state.isDragging ? 'grabbing' : !(0, _coreUtil.isDesignMode)() || ((_c = window.magicDesign) === null || _c === void 0 ? void 0 : _c.mode) === 'renderer' ? 'grab' : 'default'
       }

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

@@ -110,6 +110,13 @@
     &.dragging {
       cursor: grabbing !important;
     }
+
+    // 拖拽时禁用子元素的点击事件
+    &.no-click {
+      * {
+        pointer-events: none !important;
+      }
+    }
   }
 }
 

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

@@ -86,7 +86,8 @@ function (_super) {
       hoverState: false,
       isDragging: false,
       startX: 0,
-      startY: 0
+      startY: 0,
+      hasDragged: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -160,7 +161,19 @@ function (_super) {
     _this.handleMouseMove = function (e) {
       if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
 
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var _a = _this.state,
+          startX = _a.startX,
+          startY = _a.startY;
+      var deltaX = Math.abs(e.clientX - startX);
+      var deltaY = Math.abs(e.clientY - startY);
+
+      if (deltaX > 5 || deltaY > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
     };
 
     _this.handleMouseUp = function (e) {
@@ -170,7 +183,19 @@ function (_super) {
     _this.handleGlobalMouseMove = function (e) {
       if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
 
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var _a = _this.state,
+          startX = _a.startX,
+          startY = _a.startY;
+      var deltaX = Math.abs(e.clientX - startX);
+      var deltaY = Math.abs(e.clientY - startY);
+
+      if (deltaX > 5 || deltaY > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
     };
 
     _this.handleGlobalMouseUp = function (e) {
@@ -185,16 +210,10 @@ function (_super) {
       if (!_this.state.isDragging) return;
       var _c = _this.state,
           startX = _c.startX,
-          startY = _c.startY;
+          startY = _c.startY,
+          hasDragged = _c.hasDragged;
       var deltaX = startX - endX;
-      var deltaY = startY - endY; // 重置拖拽状态
-
-      _this.setState({
-        isDragging: false,
-        startX: 0,
-        startY: 0
-      }); // 判断是否为水平滑动（水平距离大于垂直距离，且水平距离超过阈值）
-
+      var deltaY = startY - endY; // 判断是否为水平滑动（水平距离大于垂直距离，且水平距离超过阈值）
 
       var minSwipeDistance = 50; // 最小滑动距离阈值
 
@@ -206,17 +225,75 @@ function (_super) {
           // 向右滑动，切换到上一页
           (_b = _this.carouselRef.current) === null || _b === void 0 ? void 0 : _b.prev();
         }
+      } // 如果发生了拖拽，延迟重置以便阻止点击事件
+      // 如果没有拖拽，立即重置，允许点击事件正常触发
+
+
+      if (hasDragged) {
+        setTimeout(function () {
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startY: 0,
+            hasDragged: false
+          });
+        }, 100);
+      } else {
+        // 没有拖拽，立即重置，允许点击
+        _this.setState({
+          isDragging: false,
+          startX: 0,
+          startY: 0,
+          hasDragged: false
+        });
       }
     };
 
     _this.handleMouseLeave = function () {
       // 鼠标离开时重置拖拽状态
       if (_this.state.isDragging) {
-        _this.setState({
-          isDragging: false,
-          startX: 0,
-          startY: 0
-        });
+        var hasDragged = _this.state.hasDragged;
+
+        if (hasDragged) {
+          setTimeout(function () {
+            _this.setState({
+              isDragging: false,
+              startX: 0,
+              startY: 0,
+              hasDragged: false
+            });
+          }, 100);
+        } else {
+          // 没有拖拽，立即重置
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startY: 0,
+            hasDragged: false
+          });
+        }
+      }
+    }; // 阻止拖拽后的点击事件 - 使用捕获阶段
+
+
+    _this.handleClickCapture = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    }; // 阻止拖拽后的点击事件
+
+
+    _this.handleClick = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
       }
     }; // padding用统一设置
 
@@ -350,7 +427,8 @@ function (_super) {
         style: _this.getBackgroundStyle(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])('carouselItem', {
-          dragging: _this.state.isDragging
+          dragging: _this.state.isDragging,
+          'no-click': _this.state.hasDragged
         }),
         onMouseEnter: _this.mouseEnterWrap,
         onMouseLeave: function onMouseLeave(e) {
@@ -361,6 +439,8 @@ function (_super) {
         onMouseDown: _this.handleMouseDown,
         onMouseMove: _this.handleMouseMove,
         onMouseUp: _this.handleMouseUp,
+        onClick: _this.handleClick,
+        onClickCapture: _this.handleClickCapture,
         style: __assign(__assign({}, _this.getItemStyle(item)), {
           cursor: _this.state.isDragging ? 'grabbing' : !(0, _coreUtil.isDesignMode)() || ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) === 'renderer' ? 'grab' : 'default'
         })

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

@@ -63,6 +63,13 @@
       cursor: grabbing !important;
     }
 
+    // 拖拽时禁用子元素的点击事件
+    &.no-click {
+      * {
+        pointer-events: none !important;
+      }
+    }
+
     .carouseContent {
       padding: 0 80px;
       position: absolute;

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("./index.less");
 
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
@@ -310,7 +312,8 @@ function (_super) {
       scrollToRightDisabled: true,
       isDragging: false,
       startX: 0,
-      startScrollLeft: 0
+      startScrollLeft: 0,
+      hasDragged: false
     };
 
     _this.getFlashData = function (pageSize, campaign) {
@@ -450,46 +453,131 @@ function (_super) {
 
     _this.handleMouseMove = function (e) {
       if (!_this.state.isDragging) return;
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var startX = _this.state.startX;
+      var deltaX = Math.abs(e.clientX - startX);
+
+      if (deltaX > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
 
       _this.updateScrollPosition(e.clientX);
     };
 
     _this.handleGlobalMouseMove = function (e) {
       if (!_this.state.isDragging) return;
-      e.preventDefault();
+      e.preventDefault(); // 如果移动距离超过阈值，标记为已拖拽
+
+      var startX = _this.state.startX;
+      var deltaX = Math.abs(e.clientX - startX);
+
+      if (deltaX > 5) {
+        _this.setState({
+          hasDragged: true
+        });
+      }
 
       _this.updateScrollPosition(e.clientX);
     };
 
     _this.handleGlobalMouseUp = function (e) {
       if (!_this.state.isDragging) return;
-
-      _this.setState({
-        isDragging: false,
-        startX: 0,
-        startScrollLeft: 0
-      });
+      var hasDragged = _this.state.hasDragged; // 如果发生了拖拽，延迟重置以便阻止点击事件
+      // 如果没有拖拽，立即重置，允许点击事件正常触发
+
+      if (hasDragged) {
+        setTimeout(function () {
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startScrollLeft: 0,
+            hasDragged: false
+          });
+        }, 100);
+      } else {
+        // 没有拖拽，立即重置，允许点击
+        _this.setState({
+          isDragging: false,
+          startX: 0,
+          startScrollLeft: 0,
+          hasDragged: false
+        });
+      }
     };
 
     _this.handleMouseUp = function (e) {
       if (!_this.state.isDragging) return;
-
-      _this.setState({
-        isDragging: false,
-        startX: 0,
-        startScrollLeft: 0
-      });
+      var hasDragged = _this.state.hasDragged; // 如果发生了拖拽，延迟重置以便阻止点击事件
+      // 如果没有拖拽，立即重置，允许点击事件正常触发
+
+      if (hasDragged) {
+        setTimeout(function () {
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startScrollLeft: 0,
+            hasDragged: false
+          });
+        }, 100);
+      } else {
+        // 没有拖拽，立即重置，允许点击
+        _this.setState({
+          isDragging: false,
+          startX: 0,
+          startScrollLeft: 0,
+          hasDragged: false
+        });
+      }
     };
 
     _this.handleMouseLeave = function () {
       // 鼠标离开时重置拖拽状态
       if (_this.state.isDragging) {
-        _this.setState({
-          isDragging: false,
-          startX: 0,
-          startScrollLeft: 0
-        });
+        var hasDragged = _this.state.hasDragged;
+
+        if (hasDragged) {
+          setTimeout(function () {
+            _this.setState({
+              isDragging: false,
+              startX: 0,
+              startScrollLeft: 0,
+              hasDragged: false
+            });
+          }, 100);
+        } else {
+          // 没有拖拽，立即重置
+          _this.setState({
+            isDragging: false,
+            startX: 0,
+            startScrollLeft: 0,
+            hasDragged: false
+          });
+        }
+      }
+    }; // 阻止拖拽后的点击事件 - 使用捕获阶段
+
+
+    _this.handleClickCapture = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    }; // 阻止拖拽后的点击事件
+
+
+    _this.handleClick = function (e) {
+      // 只有在真正发生拖拽时才阻止点击
+      if (_this.state.hasDragged) {
+        e.preventDefault();
+        e.stopPropagation(); // 阻止所有子元素的点击事件
+
+        e.nativeEvent.stopImmediatePropagation();
       }
     };
 
@@ -622,11 +710,15 @@ function (_super) {
       type: "icon-outlined-left"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.scrollRef,
-      className: "flash-deal-list",
+      className: (0, _classnames["default"])('flash-deal-list', {
+        'no-click': this.state.hasDragged
+      }),
       onMouseDown: this.handleMouseDown,
       onMouseMove: this.handleMouseMove,
       onMouseUp: this.handleMouseUp,
       onMouseLeave: this.handleMouseLeave,
+      onClick: this.handleClick,
+      onClickCapture: this.handleClickCapture,
       style: {
         cursor: this.state.isDragging ? 'grabbing' : !(0, _coreUtil.isDesignMode)() || ((_c = window.magicDesign) === null || _c === void 0 ? void 0 : _c.mode) === 'renderer' ? 'grab' : 'default'
       }

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

@@ -110,6 +110,13 @@
     &.dragging {
       cursor: grabbing !important;
     }
+
+    // 拖拽时禁用子元素的点击事件
+    &.no-click {
+      * {
+        pointer-events: none !important;
+      }
+    }
   }
 }
 

package/package.json

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