@fonixtree/magic-design 1.0.218 → 1.0.219

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

@@ -0,0 +1,265 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("../../../../../../meta-comp/components");
+
+var _AlignSelector = require("../../../../../../common/AlignSelector");
+
+var _ConfigPanel = require("../../../../../../core/Designer/ConfigPanel");
+
+var _commonUtil = require("../../../../../../utils/commonUtil");
+
+var _coreUtil = require("../../../../../../utils/coreUtil");
+
+var _BannerContent = _interopRequireDefault(require("./BannerContent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var SwiperBannerPc = function SwiperBannerPc(_a) {
+  var _b;
+
+  var data = _a.data,
+      carouseIndex = _a.carouseIndex,
+      hoverState = _a.hoverState,
+      onIndexChange = _a.onIndexChange,
+      swiperRef = _a.swiperRef,
+      autoplay = _a.autoplay;
+
+  var _c = _react["default"].useState(carouseIndex || 0),
+      currentIndex = _c[0],
+      setCurrentIndex = _c[1];
+
+  var _d = _react["default"].useState(false),
+      isPaused = _d[0],
+      setIsPaused = _d[1];
+
+  var autoplayTimerRef = _react["default"].useRef(null);
+
+  var containerRef = _react["default"].useRef(null);
+
+  var GAData = (0, _commonUtil.getGAData)(data);
+  var slideCount = ((_b = data.groupSource) === null || _b === void 0 ? void 0 : _b.length) || 1;
+  var thumbWidth = 40;
+  var thumbGap = 12;
+  var otherThumbsCount = slideCount - 1;
+  var activeWidth = "calc(100% - " + otherThumbsCount * (thumbWidth + thumbGap) + "px)"; // 同步外部传入的 carouseIndex
+
+  _react["default"].useEffect(function () {
+    if (carouseIndex !== undefined && carouseIndex !== currentIndex) {
+      setCurrentIndex(carouseIndex);
+    }
+  }, [carouseIndex]); // 暴露方法给父组件
+
+
+  _react["default"].useEffect(function () {
+    if (swiperRef) {
+      swiperRef.current = {
+        slideTo: function slideTo(index) {
+          if (index >= 0 && index < slideCount) {
+            setCurrentIndex(index);
+            onIndexChange(index);
+          }
+        },
+        next: function next() {
+          var nextIndex = (currentIndex + 1) % slideCount;
+          setCurrentIndex(nextIndex);
+          onIndexChange(nextIndex);
+        },
+        prev: function prev() {
+          var prevIndex = (currentIndex - 1 + slideCount) % slideCount;
+          setCurrentIndex(prevIndex);
+          onIndexChange(prevIndex);
+        },
+        goTo: function goTo(index) {
+          if (index >= 0 && index < slideCount) {
+            setCurrentIndex(index);
+            onIndexChange(index);
+          }
+        },
+        activeIndex: currentIndex
+      };
+    }
+  }, [currentIndex, slideCount, swiperRef, onIndexChange]); // 自动播放
+
+
+  _react["default"].useEffect(function () {
+    var _a;
+
+    var autoplay = data.setting.autoplay.open && (!(0, _coreUtil.isDesignMode)() || !((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) || !window.magicDesign.clickedGroup);
+
+    if (autoplay && !isPaused && slideCount > 1) {
+      autoplayTimerRef.current = setInterval(function () {
+        setCurrentIndex(function (prevIndex) {
+          var nextIndex = (prevIndex + 1) % slideCount;
+          onIndexChange(nextIndex);
+          return nextIndex;
+        });
+      }, data.setting.autoplay.interval * 1000);
+    } else {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+        autoplayTimerRef.current = null;
+      }
+    }
+
+    return function () {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+        autoplayTimerRef.current = null;
+      }
+    };
+  }, [data.setting.autoplay.open, data.setting.autoplay.interval, isPaused, slideCount, onIndexChange]);
+
+  var getBackgroundStyle = function getBackgroundStyle(item) {
+    var wrapStyle = {};
+
+    if (item.background) {
+      if (item.background.bgType === 'color') {
+        wrapStyle.backgroundColor = item.background.color;
+        wrapStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+      } else {
+        wrapStyle.backgroundImage = "url(" + item.background.image + ")";
+        wrapStyle.backgroundPosition = 'center';
+        wrapStyle.backgroundSize = 'cover';
+      }
+    }
+
+    return wrapStyle;
+  };
+
+  var getItemStyle = function getItemStyle(item) {
+    return {
+      justifyContent: _AlignSelector.alignItemMap[item.customize.layout]
+    };
+  };
+
+  var getContentStyle = function getContentStyle(item) {
+    var styleObj = {
+      alignItems: _AlignSelector.alignItemMap[item.customize.layout],
+      textAlign: item.customize.align
+    };
+
+    if (item.customize.vertical === 'bottom') {
+      styleObj.bottom = 30;
+    } else if (item.customize.vertical === 'center') {
+      styleObj.top = '50%';
+      styleObj.transform = 'translateY(-50%)';
+    } else {
+      styleObj.top = 30;
+    }
+
+    return styleObj;
+  };
+
+  var handleClick = function handleClick(e, index) {
+    // 点击切换到对应轮播
+    if (index !== currentIndex && slideCount > 1) {
+      setCurrentIndex(index);
+      onIndexChange(index);
+    }
+  };
+
+  var handleMouseEnter = function handleMouseEnter(isActive) {
+    if (isActive) {
+      setIsPaused(true);
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsPaused(false);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (autoplay) {
+      setIsPaused(false);
+    } else {
+      setIsPaused(true);
+    }
+  }, [autoplay]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: containerRef,
+    className: "swiper-main"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "custom-carousel-wrapper"
+  }, data.groupSource.map(function (item, index) {
+    var isActive = index === currentIndex;
+    var slideWidth = isActive ? activeWidth : thumbWidth + "px";
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.id,
+      className: (0, _classnames["default"])('custom-carousel-slide', {
+        active: isActive
+      }),
+      onMouseEnter: function onMouseEnter() {
+        return handleMouseEnter(isActive);
+      },
+      onMouseLeave: handleMouseLeave,
+      style: {
+        width: slideWidth,
+        marginRight: index < slideCount - 1 ? thumbGap + "px" : '0',
+        transition: 'width 0.4s ease'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: getBackgroundStyle(item)
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "carouselItem",
+      onClick: function onClick(e) {
+        return handleClick(e, index);
+      },
+      style: __assign({}, getItemStyle(item))
+    }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+      data: item.image,
+      GAData: __assign(__assign({}, GAData), {
+        groupId: item.id,
+        groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
+      }),
+      hoverState: hoverState && currentIndex === index,
+      isBackground: true,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+      }
+    }), !isActive && item.name.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+      className: "itemName",
+      data: item.name
+    }), isActive && /*#__PURE__*/_react["default"].createElement(_BannerContent["default"], {
+      item: item,
+      data: data,
+      GAData: GAData,
+      contentStyle: getContentStyle(item)
+    }))));
+  })));
+};
+
+var _default = SwiperBannerPc;
+exports["default"] = _default;

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

@@ -27,6 +27,8 @@ var _ConfigPanel = require("../../../../../core/Designer/ConfigPanel");
 
 var _commonUtil = require("../../../../../utils/commonUtil");
 
+var _SwiperBannerPc = _interopRequireDefault(require("./components/SwiperBannerPc"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -87,7 +89,8 @@ function (_super) {
       isDragging: false,
       startX: 0,
       startY: 0,
-      hasDragged: false
+      hasDragged: false,
+      autoplay: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -97,7 +100,7 @@ function (_super) {
         return item.id === _mobx.store.clickedGroup;
       });
 
-      if (nextIndex != -1 && nextIndex != _this.state.carouseIndex) {
+      if (nextIndex != -1 && nextIndex != _this.state.carouseIndex && _this.state.autoplay) {
         _this.carouselRef.current.goTo(nextIndex);
       }
     };
@@ -348,6 +351,12 @@ function (_super) {
       return styleObj;
     };
 
+    _this.handleIndexChange = function (i) {
+      _this.setState({
+        carouseIndex: i
+      });
+    };
+
     return _this;
   }
 
@@ -358,6 +367,18 @@ function (_super) {
 
     this.destroy = (0, _mobx.autorun)(function () {
       _this.bannerGoto(_this.props.data.groupSource);
+      /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+      if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+        _this.setState({
+          autoplay: false
+        });
+      } else {
+        _this.setState({
+          autoplay: true
+        });
+      }
     }); // 添加全局鼠标事件监听，处理鼠标移出元素的情况
 
     if (!(0, _coreUtil.isDesignMode)() || ((_a = window.magicDesign) === null || _a === void 0 ? void 0 : _a.mode) === 'renderer') {
@@ -380,25 +401,25 @@ function (_super) {
   BannerPc.prototype.render = function () {
     var _this = this;
 
-    var data = this.props.data; // console.log('--data banner', data);
+    var _a, _b, _c;
 
-    var _a = this.state,
-        carouseIndex = _a.carouseIndex,
-        hoverState = _a.hoverState;
+    var data = this.props.data;
+    var _d = this.state,
+        carouseIndex = _d.carouseIndex,
+        hoverState = _d.hoverState,
+        autoplay = _d.autoplay;
     var navStyle = {
       fontSize: (0, _commonUtil.convertToRem)(data.setting.navigation.size),
       color: data.setting.navigation.color
     };
-    var autoplay = data.setting.autoplay.open;
-    /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
-    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
-      autoplay = false;
-    }
+    var _autoplay = autoplay && data.setting.autoplay.open;
 
     var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-banner-pc"
+      className: (0, _classnames["default"])('m-banner-pc', {
+        layout2: ((_a = data.customize.layout) === null || _a === void 0 ? void 0 : _a.pcLayout) === 'layout2'
+      })
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       className: "turnPage leftBtn",
       onClick: function onClick() {
@@ -408,14 +429,22 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-outlined-left"
-    }), /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
+    }), ((_b = data.customize.layout) === null || _b === void 0 ? void 0 : _b.pcLayout) === 'layout2' && /*#__PURE__*/_react["default"].createElement(_SwiperBannerPc["default"], {
+      data: data,
+      autoplay: _autoplay,
+      carouseIndex: carouseIndex,
+      hoverState: hoverState,
+      onIndexChange: this.handleIndexChange,
+      swiperRef: this.carouselRef
+    }), ((_c = data.customize.layout) === null || _c === void 0 ? void 0 : _c.pcLayout) !== 'layout2' && /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
       ref: this.carouselRef,
       afterChange: function afterChange(n) {
         return _this.setState({
           carouseIndex: n
         });
       },
-      autoplay: autoplay,
+      autoplay: _autoplay // initialSlide={0}
+      ,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       dots: false
     }, data.groupSource.map(function (item, index) {

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

@@ -1,6 +1,63 @@
 .m-banner-pc {
   position: relative;
 
+  &.layout2 {
+    padding: 16px 1.23%;
+  }
+
+  .swiper-main {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+
+    .custom-carousel-wrapper {
+      display: flex;
+      align-items: stretch;
+      width: 100%;
+      height: 100%;
+    }
+
+    .custom-carousel-slide {
+      height: 100%;
+      flex-shrink: 0;
+      overflow: hidden;
+      border-radius: 40px;
+      box-sizing: border-box;
+      position: relative;
+
+      &:not(.active) {
+        border-radius: 40px;
+        cursor: pointer;
+
+        .carouselItem {
+           // hover 渐变遮罩：常驻，通过透明度和 delay 控制
+          &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 2;
+            background: linear-gradient(180deg, #de001a, #ed6918 50%, #27298e);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity .3s ease .05s; // 0.4s 过渡，延时 0.15s
+          }
+
+          &:hover:after {
+            opacity: 1;
+          }
+        }
+      }
+
+      &.active {
+        border-radius: 20px;
+      }
+    }
+  }
+
   .cylon-carousel {
     .slick-track {
       display: flex;
@@ -23,7 +80,7 @@
       background: #FFF;
       cursor: inherit;
       margin-right: 0.3em;
-      transition: all .5s;
+      transition: all ease 1s;
 
       &.active {
         width: 1.5em;
@@ -49,25 +106,40 @@
   }
 
   .carouselItem {
-    // height: 360px;
+    height: 100%;
     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;
+    img {
+      height: 400px;
+      object-fit: cover;
+      object-position: left;
+      pointer-events: none;
     }
 
-    // 拖拽时禁用子元素的点击事件
-    &.no-click {
-      * {
-        pointer-events: none !important;
-      }
+    .itemName {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 3;
+      color: #fff;
+      font-family: Outfit, Open Sans, sans-serif;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+      position: absolute;
+      text-shadow: 2px 2px 10px #000;
+      transform: rotate(-90deg) translate(50%);
+      transition: all .3s ease;
+      white-space: nowrap;
+      width: 100%;
     }
 
     .carouseContent {

package/lib/composite-comp/bol/config-panels/BannerConfig/index.js

@@ -15,12 +15,27 @@ var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
 
 var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
 
+var _layout = require("../../../../constants/layout");
+
+var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
+
 var _locale = require("../../../../locale");
 
+var _coreUtil = require("../../../../utils/coreUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function BannerConfig(props) {
   var data = props.data;
+
+  var getLayout = function getLayout(v) {
+    if ((0, _coreUtil.isPc)()) {
+      data.customize.layout.pcLayout = v;
+    } else {
+      data.customize.layout.h5Layout = v;
+    }
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
     divider: "bold",
     headerSize: "large",
@@ -42,6 +57,17 @@ function BannerConfig(props) {
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
         data: data.spacing
       })
+    }, {
+      key: 'customize',
+      name: (0, _locale.i18n)('CUSTOMIZE'),
+      value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
+        data: data.customize,
+        layoutSource: (0, _coreUtil.isPc)() ? _layout.bannerPcLayout : _layout.bannerH5Layout,
+        selectedLayoutFun: function selectedLayoutFun(v) {
+          getLayout(v);
+        },
+        isHideAlign: true
+      })
     }],
     type: "triangle"
   }));

package/lib/composite-comp/bol/second-config-panels/BannerSecondConfig/index.js

@@ -62,7 +62,11 @@ function (_super) {
     _this.state = {};
 
     _this.getContentPanel = function () {
-      var panelProps = _this.props.panelProps;
+      var _a, _b, _c;
+
+      var _d = _this.props,
+          panelProps = _d.panelProps,
+          parentNode = _d.parentNode;
       var source = [{
         key: panelProps.image.id,
         name: (0, _locale.i18n)('IMAGE'),
@@ -100,6 +104,18 @@ function (_super) {
         }),
         metaOption: panelProps.secondButton
       }];
+
+      if (((_b = (_a = parentNode.customize) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.pcLayout) === 'layout2') {
+        source.unshift({
+          key: (_c = panelProps.name) === null || _c === void 0 ? void 0 : _c.id,
+          name: (0, _locale.i18n)('NAME'),
+          value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+            data: panelProps.name
+          }),
+          metaOption: panelProps.name
+        });
+      }
+
       return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
         headerSize: "middle",
         onRefresh: function onRefresh() {