@fonixtree/magic-design 1.0.205 → 1.0.207

package/es/common/NewImg/index.js

@@ -128,6 +128,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("img", _extends({
       ref: this.imageRef,
       alt: "",
+      draggable: "false",
       className: (0, _classnames["default"])('new-img-container', className),
       src: isShow ? src : '',
       style: __assign({

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

@@ -83,7 +83,11 @@ function (_super) {
 
     _this.state = {
       carouseIndex: 0,
-      hoverState: false
+      hoverState: false,
+      isDragging: false,
+      startX: 0,
+      startY: 0,
+      hasDragged: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -136,6 +140,161 @@ function (_super) {
       if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
         e.target.style.fontSize = data.setting.navigation.size;
       }
+    }; // 鼠标拖拽相关方法
+
+
+    _this.handleMouseDown = function (e) {
+      var _a; // 设计器模式下禁用拖拽
+
+
+      if ((0, _coreUtil.isDesignMode)() && ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) !== 'renderer') {
+        return;
+      }
+
+      _this.setState({
+        isDragging: true,
+        startX: e.clientX,
+        startY: e.clientY
+      });
+    };
+
+    _this.handleMouseMove = function (e) {
+      if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
+
+      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) {
+      _this.processMouseUp(e.clientX, e.clientY);
+    };
+
+    _this.handleGlobalMouseMove = function (e) {
+      if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
+
+      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) {
+      if (!_this.state.isDragging) return;
+
+      _this.processMouseUp(e.clientX, e.clientY);
+    };
+
+    _this.processMouseUp = function (endX, endY) {
+      var _a, _b;
+
+      if (!_this.state.isDragging) return;
+      var _c = _this.state,
+          startX = _c.startX,
+          startY = _c.startY,
+          hasDragged = _c.hasDragged;
+      var deltaX = startX - endX;
+      var deltaY = startY - endY; // 判断是否为水平滑动（水平距离大于垂直距离，且水平距离超过阈值）
+
+      var minSwipeDistance = 50; // 最小滑动距离阈值
+
+      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) {
+        if (deltaX > 0) {
+          // 向左滑动，切换到下一页
+          (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.next();
+        } else {
+          // 向右滑动，切换到上一页
+          (_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) {
+        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用统一设置
 
 
@@ -195,9 +354,16 @@ function (_super) {
   BannerPc.prototype.componentDidMount = function () {
     var _this = this;
 
+    var _a;
+
     this.destroy = (0, _mobx.autorun)(function () {
       _this.bannerGoto(_this.props.data.groupSource);
-    });
+    }); // 添加全局鼠标事件监听，处理鼠标移出元素的情况
+
+    if (!(0, _coreUtil.isDesignMode)() || ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) === 'renderer') {
+      document.addEventListener('mousemove', this.handleGlobalMouseMove);
+      document.addEventListener('mouseup', this.handleGlobalMouseUp);
+    }
   };
 
   BannerPc.prototype.componentWillReceiveProps = function (nextProps) {
@@ -205,7 +371,10 @@ function (_super) {
   };
 
   BannerPc.prototype.componentWillUnmount = function () {
-    this.destroy();
+    this.destroy(); // 移除全局鼠标事件监听
+
+    document.removeEventListener('mousemove', this.handleGlobalMouseMove);
+    document.removeEventListener('mouseup', this.handleGlobalMouseUp);
   };
 
   BannerPc.prototype.render = function () {
@@ -250,17 +419,31 @@ function (_super) {
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       dots: false
     }, data.groupSource.map(function (item, index) {
-      var _a, _b;
+      var _a, _b, _c;
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: _this.getBackgroundStyle(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "carouselItem",
+        className: (0, _classnames["default"])('carouselItem', {
+          dragging: _this.state.isDragging,
+          'no-click': _this.state.hasDragged
+        }),
         onMouseEnter: _this.mouseEnterWrap,
-        onMouseLeave: _this.mouseLeaveWrap,
-        style: _this.getItemStyle(item)
+        onMouseLeave: function onMouseLeave(e) {
+          _this.mouseLeaveWrap();
+
+          _this.handleMouseLeave();
+        },
+        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'
+        })
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         GAData: __assign(__assign({}, GAData), {
@@ -296,7 +479,7 @@ function (_super) {
         className: "btn-wrap",
         style: {
           justifyContent: _AlignSelector.alignItemMap[item.customize.align],
-          width: Math.max((_a = item.title.content) === null || _a === void 0 ? void 0 : _a.pcWidth, (_b = item.text.content) === null || _b === void 0 ? void 0 : _b.pcWidth) + "%"
+          width: Math.max((_b = item.title.content) === null || _b === void 0 ? void 0 : _b.pcWidth, (_c = item.text.content) === null || _c === void 0 ? void 0 : _c.pcWidth) + "%"
         }
       }, item.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         className: "btn",

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

@@ -41,17 +41,34 @@
   }
 
   .leftBtn {
-    left: 20px;
+    left: 70px;
   }
 
   .rightBtn {
-    right: 20px;
+    right: 70px;
   }
 
   .carouselItem {
     // height: 360px;
     display: flex;
     position: relative;
+    // 拖拽相关样式
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+
+    &.dragging {
+      cursor: grabbing !important;
+    }
+
+    // 拖拽时禁用子元素的点击事件
+    &.no-click {
+      * {
+        pointer-events: none !important;
+      }
+    }
 
     .carouseContent {
       padding: 0 80px;

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"));
@@ -307,7 +309,11 @@ function (_super) {
       now: '',
       isWill: false,
       scrollToLeftDisabled: true,
-      scrollToRightDisabled: true
+      scrollToRightDisabled: true,
+      isDragging: false,
+      startX: 0,
+      startScrollLeft: 0,
+      hasDragged: false
     };
 
     _this.getFlashData = function (pageSize, campaign) {
@@ -424,6 +430,171 @@ function (_super) {
       if (scrollDom.scrollLeft > 0) {
         scrollDom.scrollTo(scrollDom.scrollLeft - scrollDom.clientWidth, 0);
       }
+    }; // 鼠标拖拽滚动相关方法
+
+
+    _this.handleMouseDown = function (e) {
+      var _a; // 设计器模式下禁用拖拽
+
+
+      if ((0, _coreUtil.isDesignMode)() && ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) !== 'renderer') {
+        return;
+      }
+
+      var scrollDom = _this.scrollRef.current;
+      if (!scrollDom) return;
+
+      _this.setState({
+        isDragging: true,
+        startX: e.clientX,
+        startScrollLeft: scrollDom.scrollLeft
+      });
+    };
+
+    _this.handleMouseMove = function (e) {
+      if (!_this.state.isDragging) return;
+      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(); // 如果移动距离超过阈值，标记为已拖拽
+
+      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;
+      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;
+      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) {
+        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();
+      }
+    };
+
+    _this.updateScrollPosition = function (currentX) {
+      var scrollDom = _this.scrollRef.current;
+      if (!scrollDom) return;
+      var _a = _this.state,
+          startX = _a.startX,
+          startScrollLeft = _a.startScrollLeft;
+      var deltaX = currentX - startX;
+      var newScrollLeft = startScrollLeft - deltaX; // 限制滚动范围
+
+      var maxScrollLeft = scrollDom.scrollWidth - scrollDom.clientWidth;
+      var clampedScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollLeft));
+      scrollDom.scrollLeft = clampedScrollLeft;
+
+      _this.setScrollDisabled(scrollDom);
     };
 
     return _this;
@@ -432,6 +603,8 @@ function (_super) {
   FlashDealPc.prototype.componentDidMount = function () {
     var _this = this;
 
+    var _a;
+
     this.sortType = this.props.panelProps.content.sortType;
     this.getNextFlashSale();
     setTimeout(function () {
@@ -444,7 +617,12 @@ function (_super) {
           _this.setScrollDisabled(scrollDom);
         }, 500);
       }
-    }, 0);
+    }, 0); // 添加全局鼠标事件监听，处理鼠标拖拽滚动
+
+    if (!(0, _coreUtil.isDesignMode)() || ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) === 'renderer') {
+      document.addEventListener('mousemove', this.handleGlobalMouseMove);
+      document.addEventListener('mouseup', this.handleGlobalMouseUp);
+    }
   };
 
   FlashDealPc.prototype.componentWillReceiveProps = function (nextProps) {
@@ -471,20 +649,26 @@ function (_super) {
     }
   };
 
+  FlashDealPc.prototype.componentWillUnmount = function () {
+    // 移除全局鼠标事件监听
+    document.removeEventListener('mousemove', this.handleGlobalMouseMove);
+    document.removeEventListener('mouseup', this.handleGlobalMouseUp);
+  };
+
   FlashDealPc.prototype.render = function () {
     var _this = this;
 
-    var _a, _b;
+    var _a, _b, _c;
 
     var panelProps = this.props.panelProps;
-    var _c = this.state,
-        list = _c.list,
-        effDate = _c.effDate,
-        expDate = _c.expDate,
-        now = _c.now,
-        isWill = _c.isWill,
-        scrollToLeftDisabled = _c.scrollToLeftDisabled,
-        scrollToRightDisabled = _c.scrollToRightDisabled;
+    var _d = this.state,
+        list = _d.list,
+        effDate = _d.effDate,
+        expDate = _d.expDate,
+        now = _d.now,
+        isWill = _d.isWill,
+        scrollToLeftDisabled = _d.scrollToLeftDisabled,
+        scrollToRightDisabled = _d.scrollToRightDisabled;
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
@@ -526,7 +710,18 @@ 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'
+      }
     }, _list.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.id,

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

@@ -93,6 +93,30 @@
     position: relative;
     flex: 1;
     gap: 40px;
+    // 拖拽相关样式
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    // 隐藏滚动条但保持滚动功能
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+
+    &.dragging {
+      cursor: grabbing !important;
+    }
+
+    // 拖拽时禁用子元素的点击事件
+    &.no-click {
+      * {
+        pointer-events: none !important;
+      }
+    }
   }
 }
 

package/lib/common/NewImg/index.js

@@ -128,6 +128,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("img", _extends({
       ref: this.imageRef,
       alt: "",
+      draggable: "false",
       className: (0, _classnames["default"])('new-img-container', className),
       src: isShow ? src : '',
       style: __assign({

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

@@ -83,7 +83,11 @@ function (_super) {
 
     _this.state = {
       carouseIndex: 0,
-      hoverState: false
+      hoverState: false,
+      isDragging: false,
+      startX: 0,
+      startY: 0,
+      hasDragged: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -136,6 +140,161 @@ function (_super) {
       if ((_b = data.setting.navigation) === null || _b === void 0 ? void 0 : _b.size) {
         e.target.style.fontSize = data.setting.navigation.size;
       }
+    }; // 鼠标拖拽相关方法
+
+
+    _this.handleMouseDown = function (e) {
+      var _a; // 设计器模式下禁用拖拽
+
+
+      if ((0, _coreUtil.isDesignMode)() && ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) !== 'renderer') {
+        return;
+      }
+
+      _this.setState({
+        isDragging: true,
+        startX: e.clientX,
+        startY: e.clientY
+      });
+    };
+
+    _this.handleMouseMove = function (e) {
+      if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
+
+      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) {
+      _this.processMouseUp(e.clientX, e.clientY);
+    };
+
+    _this.handleGlobalMouseMove = function (e) {
+      if (!_this.state.isDragging) return; // 防止默认行为，避免选中文本
+
+      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) {
+      if (!_this.state.isDragging) return;
+
+      _this.processMouseUp(e.clientX, e.clientY);
+    };
+
+    _this.processMouseUp = function (endX, endY) {
+      var _a, _b;
+
+      if (!_this.state.isDragging) return;
+      var _c = _this.state,
+          startX = _c.startX,
+          startY = _c.startY,
+          hasDragged = _c.hasDragged;
+      var deltaX = startX - endX;
+      var deltaY = startY - endY; // 判断是否为水平滑动（水平距离大于垂直距离，且水平距离超过阈值）
+
+      var minSwipeDistance = 50; // 最小滑动距离阈值
+
+      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > minSwipeDistance) {
+        if (deltaX > 0) {
+          // 向左滑动，切换到下一页
+          (_a = _this.carouselRef.current) === null || _a === void 0 ? void 0 : _a.next();
+        } else {
+          // 向右滑动，切换到上一页
+          (_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) {
+        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用统一设置
 
 
@@ -195,9 +354,16 @@ function (_super) {
   BannerPc.prototype.componentDidMount = function () {
     var _this = this;
 
+    var _a;
+
     this.destroy = (0, _mobx.autorun)(function () {
       _this.bannerGoto(_this.props.data.groupSource);
-    });
+    }); // 添加全局鼠标事件监听，处理鼠标移出元素的情况
+
+    if (!(0, _coreUtil.isDesignMode)() || ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) === 'renderer') {
+      document.addEventListener('mousemove', this.handleGlobalMouseMove);
+      document.addEventListener('mouseup', this.handleGlobalMouseUp);
+    }
   };
 
   BannerPc.prototype.componentWillReceiveProps = function (nextProps) {
@@ -205,7 +371,10 @@ function (_super) {
   };
 
   BannerPc.prototype.componentWillUnmount = function () {
-    this.destroy();
+    this.destroy(); // 移除全局鼠标事件监听
+
+    document.removeEventListener('mousemove', this.handleGlobalMouseMove);
+    document.removeEventListener('mouseup', this.handleGlobalMouseUp);
   };
 
   BannerPc.prototype.render = function () {
@@ -250,17 +419,31 @@ function (_super) {
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       dots: false
     }, data.groupSource.map(function (item, index) {
-      var _a, _b;
+      var _a, _b, _c;
 
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: _this.getBackgroundStyle(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "carouselItem",
+        className: (0, _classnames["default"])('carouselItem', {
+          dragging: _this.state.isDragging,
+          'no-click': _this.state.hasDragged
+        }),
         onMouseEnter: _this.mouseEnterWrap,
-        onMouseLeave: _this.mouseLeaveWrap,
-        style: _this.getItemStyle(item)
+        onMouseLeave: function onMouseLeave(e) {
+          _this.mouseLeaveWrap();
+
+          _this.handleMouseLeave();
+        },
+        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'
+        })
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         GAData: __assign(__assign({}, GAData), {
@@ -296,7 +479,7 @@ function (_super) {
         className: "btn-wrap",
         style: {
           justifyContent: _AlignSelector.alignItemMap[item.customize.align],
-          width: Math.max((_a = item.title.content) === null || _a === void 0 ? void 0 : _a.pcWidth, (_b = item.text.content) === null || _b === void 0 ? void 0 : _b.pcWidth) + "%"
+          width: Math.max((_b = item.title.content) === null || _b === void 0 ? void 0 : _b.pcWidth, (_c = item.text.content) === null || _c === void 0 ? void 0 : _c.pcWidth) + "%"
         }
       }, item.button.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         className: "btn",

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

@@ -41,17 +41,34 @@
   }
 
   .leftBtn {
-    left: 20px;
+    left: 70px;
   }
 
   .rightBtn {
-    right: 20px;
+    right: 70px;
   }
 
   .carouselItem {
     // height: 360px;
     display: flex;
     position: relative;
+    // 拖拽相关样式
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+
+    &.dragging {
+      cursor: grabbing !important;
+    }
+
+    // 拖拽时禁用子元素的点击事件
+    &.no-click {
+      * {
+        pointer-events: none !important;
+      }
+    }
 
     .carouseContent {
       padding: 0 80px;

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"));
@@ -307,7 +309,11 @@ function (_super) {
       now: '',
       isWill: false,
       scrollToLeftDisabled: true,
-      scrollToRightDisabled: true
+      scrollToRightDisabled: true,
+      isDragging: false,
+      startX: 0,
+      startScrollLeft: 0,
+      hasDragged: false
     };
 
     _this.getFlashData = function (pageSize, campaign) {
@@ -424,6 +430,171 @@ function (_super) {
       if (scrollDom.scrollLeft > 0) {
         scrollDom.scrollTo(scrollDom.scrollLeft - scrollDom.clientWidth, 0);
       }
+    }; // 鼠标拖拽滚动相关方法
+
+
+    _this.handleMouseDown = function (e) {
+      var _a; // 设计器模式下禁用拖拽
+
+
+      if ((0, _coreUtil.isDesignMode)() && ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) !== 'renderer') {
+        return;
+      }
+
+      var scrollDom = _this.scrollRef.current;
+      if (!scrollDom) return;
+
+      _this.setState({
+        isDragging: true,
+        startX: e.clientX,
+        startScrollLeft: scrollDom.scrollLeft
+      });
+    };
+
+    _this.handleMouseMove = function (e) {
+      if (!_this.state.isDragging) return;
+      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(); // 如果移动距离超过阈值，标记为已拖拽
+
+      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;
+      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;
+      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) {
+        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();
+      }
+    };
+
+    _this.updateScrollPosition = function (currentX) {
+      var scrollDom = _this.scrollRef.current;
+      if (!scrollDom) return;
+      var _a = _this.state,
+          startX = _a.startX,
+          startScrollLeft = _a.startScrollLeft;
+      var deltaX = currentX - startX;
+      var newScrollLeft = startScrollLeft - deltaX; // 限制滚动范围
+
+      var maxScrollLeft = scrollDom.scrollWidth - scrollDom.clientWidth;
+      var clampedScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollLeft));
+      scrollDom.scrollLeft = clampedScrollLeft;
+
+      _this.setScrollDisabled(scrollDom);
     };
 
     return _this;
@@ -432,6 +603,8 @@ function (_super) {
   FlashDealPc.prototype.componentDidMount = function () {
     var _this = this;
 
+    var _a;
+
     this.sortType = this.props.panelProps.content.sortType;
     this.getNextFlashSale();
     setTimeout(function () {
@@ -444,7 +617,12 @@ function (_super) {
           _this.setScrollDisabled(scrollDom);
         }, 500);
       }
-    }, 0);
+    }, 0); // 添加全局鼠标事件监听，处理鼠标拖拽滚动
+
+    if (!(0, _coreUtil.isDesignMode)() || ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) === 'renderer') {
+      document.addEventListener('mousemove', this.handleGlobalMouseMove);
+      document.addEventListener('mouseup', this.handleGlobalMouseUp);
+    }
   };
 
   FlashDealPc.prototype.componentWillReceiveProps = function (nextProps) {
@@ -471,20 +649,26 @@ function (_super) {
     }
   };
 
+  FlashDealPc.prototype.componentWillUnmount = function () {
+    // 移除全局鼠标事件监听
+    document.removeEventListener('mousemove', this.handleGlobalMouseMove);
+    document.removeEventListener('mouseup', this.handleGlobalMouseUp);
+  };
+
   FlashDealPc.prototype.render = function () {
     var _this = this;
 
-    var _a, _b;
+    var _a, _b, _c;
 
     var panelProps = this.props.panelProps;
-    var _c = this.state,
-        list = _c.list,
-        effDate = _c.effDate,
-        expDate = _c.expDate,
-        now = _c.now,
-        isWill = _c.isWill,
-        scrollToLeftDisabled = _c.scrollToLeftDisabled,
-        scrollToRightDisabled = _c.scrollToRightDisabled;
+    var _d = this.state,
+        list = _d.list,
+        effDate = _d.effDate,
+        expDate = _d.expDate,
+        now = _d.now,
+        isWill = _d.isWill,
+        scrollToLeftDisabled = _d.scrollToLeftDisabled,
+        scrollToRightDisabled = _d.scrollToRightDisabled;
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
@@ -526,7 +710,18 @@ 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'
+      }
     }, _list.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.id,

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

@@ -93,6 +93,30 @@
     position: relative;
     flex: 1;
     gap: 40px;
+    // 拖拽相关样式
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    // 隐藏滚动条但保持滚动功能
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+
+    &.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.205",
+  "version": "1.0.207",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",