@fonixtree/magic-design 2.0.200 → 2.0.203

package/es/common/ProductCardModal/index.js

@@ -0,0 +1,255 @@
+"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"] = ProductCardModal;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _framerMotion = require("framer-motion");
+
+var _dotIcon = _interopRequireDefault(require("./imgs/dot-icon.png"));
+
+var _Iconfont = _interopRequireDefault(require("../Iconfont"));
+
+require("./index.less");
+
+var _coreUtil = require("../../utils/coreUtil");
+
+var _commonUtil = require("../../utils/commonUtil");
+
+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; }
+
+function ProductCardModal(_a) {
+  var _b = _a.data,
+      data = _b === void 0 ? [] : _b,
+      onClose = _a.onClose,
+      _c = _a.autoplay,
+      autoplay = _c === void 0 ? false : _c;
+
+  var _d = (0, _react.useState)(0),
+      active = _d[0],
+      setActive = _d[1];
+
+  var _e = (0, _react.useState)(true),
+      loading = _e[0],
+      setLoading = _e[1];
+
+  var flag = true;
+
+  var handleNext = function handleNext(e) {
+    e.stopPropagation();
+    setActive(function (prev) {
+      return (prev + 1) % data.length;
+    });
+  };
+
+  var handlePrev = function handlePrev(e) {
+    e.stopPropagation();
+    setActive(function (prev) {
+      return (prev - 1 + data.length) % data.length;
+    });
+  };
+
+  var isActive = function isActive(index) {
+    return index === active;
+  };
+
+  var isShow = function isShow(index) {
+    if (data.length > 3) {
+      var oneShow = 0;
+      var twoShow = 0;
+
+      if (active === 0) {
+        oneShow = data.length - 1;
+        twoShow = active + 1;
+      } else if (active === data.length - 1) {
+        oneShow = active - 1;
+        twoShow = 0;
+      } else {
+        oneShow = active - 1;
+        twoShow = active + 1;
+      }
+
+      return index === oneShow || index === twoShow;
+    } else {
+      return true;
+    }
+  };
+
+  var randomRotateY = function randomRotateY(index) {
+    // return Math.floor(Math.random() * 21) - 10;
+    // return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
+    return index === 0 || index === 1 ? -10 : 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 () {
+    if (autoplay) {
+      var interval_1 = setInterval(handleNext, 5000);
+      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",
+    onClick: onClose
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "content",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.AnimatePresence, null, data.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
+      key: item.offerId,
+      animate: {
+        opacity: isActive(index) ? 1 : isShow(index) ? 0.7 : 0,
+        scale: isActive(index) ? 1 : 0.95,
+        z: isActive(index) ? 0 : -100,
+        rotate: isActive(index) ? 0 : randomRotateY(index),
+        zIndex: isActive(index) ? 999 : data.length + 2 - index,
+        y: isActive(index) ? [0, -80, 0] : 0
+      },
+      className: "card",
+      exit: {
+        opacity: 0,
+        scale: 0.9,
+        z: 100,
+        rotate: randomRotateY(index)
+      },
+      initial: {
+        opacity: 0,
+        scale: 0.9,
+        z: -100,
+        rotate: randomRotateY(index)
+      },
+      transition: {
+        duration: 0.4,
+        ease: 'easeInOut'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "bgImg",
+      draggable: false,
+      onLoad: function onLoad() {
+        return setLoading(false);
+      },
+      src: item.cardImgUrl
+    }), !loading && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "absoluteWrap"
+    }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
+      key: active,
+      animate: {
+        y: 0,
+        opacity: 1
+      },
+      className: "text",
+      exit: {
+        y: -20,
+        opacity: 0
+      },
+      initial: {
+        y: 20,
+        opacity: 0
+      },
+      transition: {
+        duration: 0.2,
+        ease: 'easeInOut'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: (0, _commonUtil.xssDecode)(item.goodsIntroduce || '')
+      }
+    })), index === active && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "closIcon",
+      color: "#929292",
+      onClick: onClose,
+      size: 22,
+      type: "icon-close"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "btnApply",
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)("proDetail-" + item.offerId + "-" + item.productId);
+      }
+    }, "Apply Now", /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#FCD116",
+      size: 20,
+      type: "icon-arrow-right"
+    })), index === active && /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      className: "dotIcon",
+      src: _dotIcon["default"]
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardLeft",
+      onClick: function onClick(e) {
+        return handlePrev(e);
+      }
+    }), index === active && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "cardRight",
+      onClick: function onClick(e) {
+        return handleNext(e);
+      }
+    })));
+  }))), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    className: "iconLeft",
+    color: "#929292",
+    onClick: function onClick(e) {
+      return handlePrev(e);
+    },
+    size: 36,
+    type: "icon-circle-down"
+  }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+    className: "iconRight",
+    color: "#929292",
+    onClick: function onClick(e) {
+      return handleNext(e);
+    },
+    size: 36,
+    type: "icon-circle-down"
+  }));
+}

package/es/common/ProductCardModal/index.less

@@ -0,0 +1,131 @@
+.productCardModalWrap {
+  background: rgba(0, 0, 0, 0.9);
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .content {
+    position: relative;
+    width: 50%;
+
+    .card {
+      transform-origin: bottom;
+      inset: 0;
+      width: 100%;
+      height: fit-content;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      cursor: pointer;
+
+      .cardLeft {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+
+      .cardRight {
+        width: 50%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+      }
+
+      .bgImg {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: 1.5rem;
+        -o-object-position: center;
+        object-position: center;
+        -o-object-fit: cover;
+        object-fit: cover;
+      }
+
+      .closIcon {
+        position: absolute;
+        top: 5%;
+        right: 5%;
+        cursor: pointer;
+        z-index: 3;
+      }
+
+      .dotIcon {
+        width: 28px;
+        position: absolute;
+        bottom: 25px;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+
+      .text {
+        position: absolute;
+        top: 20%;
+        right: 10%;
+        width: 35%;
+        height: 42%;
+        overflow-y: auto;
+
+        p {
+          min-height: 1em;
+        }
+      }
+
+      .btnApply {
+        color: #fff;
+        background-color: #CE1126;
+        font-weight: 700;
+        font-size: .3rem;
+        width: fit-content;
+        padding: 10px 24px;
+        border-radius: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        position: absolute;
+        bottom: 25%;
+        left: 55%;
+        z-index: 3;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .iconLeft {
+    transform: rotate(90deg);
+    cursor: pointer;
+    position: absolute;
+    left: 20%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+
+  .iconRight {
+    transform: rotate(-90deg);
+    cursor: pointer;
+    position: absolute;
+    right: 20%;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    align-self: center;
+  }
+}

package/es/common/Toast/index.js

@@ -0,0 +1,30 @@
+"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"] = Toast;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./index.less");
+
+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; }
+
+function Toast(_a) {
+  var message = _a.message,
+      onClose = _a.onClose,
+      duration = _a.duration;
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      onClose();
+    }, duration);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "toastWrap"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, message));
+}

package/es/common/Toast/index.less

@@ -0,0 +1,29 @@
+.toastWrap {
+  position: fixed;
+  display: flex;
+  top: 40%;
+  left: 20px;
+  right: 20px;
+  z-index: 99999;
+  transform: translateZ(1000px);
+  background-color: #e5f6ea;
+  min-height: 32px;
+  align-items: center;
+  margin-bottom: 15px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 16px;
+  animation: fadeIn .2s linear;
+
+  span {
+    text-overflow: ellipsis;
+    color: #fff;
+    font-weight: 500;
+    font-size: 14px;
+    text-align: center;
+    color: #FFFFFF;
+    line-height: 24px;
+    padding: 15px;
+    letter-spacing: .5px;
+    width: 100%;
+  }
+}

package/es/common/UrlPicker/index.js

@@ -87,7 +87,7 @@ function (_super) {
         modalConfig = _c.modalConfig; // 弹框选择url不可编辑，需要先清除
 
     var editable = !value || !value.type;
-    var inputName = (value === null || value === void 0 ? void 0 : value.name) || '';
+    var inputName = (value === null || value === void 0 ? void 0 : value.name) || (value === null || value === void 0 ? void 0 : value.value) || '';
 
     if ((value === null || value === void 0 ? void 0 : value.type) === _constants.urlTypeMap.ANCHOR) {
       var selectedAnchorIndex = _mobx.store.MPageData.findIndex(function (m) {

package/es/common/Video/index.js

@@ -375,7 +375,7 @@ var createAliVideo = function createAliVideo(domId, opts) {
               rePlay: false,
               playsinline: true,
               preload: true,
-              controlBarVisibility: 'hover',
+              controlBarVisibility: opts.controlBarHide ? 'never' : 'hover',
               useH5Prism: true,
               skinLayout: skinLayout
             }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", components), _window$Aliplayer), function (player) {
@@ -784,9 +784,11 @@ function (_super) {
     var _a = this.props,
         videoId = _a.videoId,
         opts = _a.opts,
-        play = _a.play;
+        play = _a.play,
+        onClick = _a.onClick;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "video-container"
+      className: "video-container",
+      onClick: onClick
     }, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-wrap",
       id: 'video' + videoId

package/es/common/VideoPC/components/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./index.less");
+
+function parseDom(html) {
+  var ele = document.createElement('div');
+  ele.innerHTML = html;
+  return ele.childNodes[0];
+}
+
+var rateHtml = "<div class=\"rate-components\">\n  <div class=\"current-rate\">1.0x</div>\n  <ul class=\"rate-list\">\n    <li data-rate=\"2.0\">2.0x</li>\n    <li data-rate=\"1.5\">1.5x</li>\n    <li data-rate=\"1.0\" class=\"current\">1.0x</li>\n    <li data-rate=\"0.5\">0.5x</li>\n  </ul>\n</div>";
+/**
+ * 倍速播放组件
+ */
+
+var RateComponent =
+/** @class */
+function () {
+  /**
+   * @constructor 倍速播放组件构造函数
+   */
+  function RateComponent() {
+    this.html = parseDom(rateHtml);
+  }
+
+  RateComponent.prototype.createEl = function (el) {
+    var eleControlbar = el.querySelector('.prism-controlbar');
+    eleControlbar.appendChild(this.html);
+  };
+
+  RateComponent.prototype.ready = function (player) {
+    var currentRateEle = this.html.querySelector('.current-rate');
+    var rateListEle = this.html.querySelector('.rate-list');
+    var timeId = null;
+    var currentEle = rateListEle.querySelector('.current');
+
+    if (currentEle) {
+      currentEle.className = '';
+    }
+
+    rateListEle.querySelector("[data-rate=\"" + player._speed + "\"]").className = 'current';
+    currentRateEle.innerText = player._speed + 'x'; // 隐藏设置里面的倍速播放
+
+    var settingRate = document.querySelector('.prism-setting-item.prism-setting-speed');
+
+    if (settingRate) {
+      settingRate.classList.add('player-hidden');
+    }
+
+    currentRateEle.onclick = function () {
+      rateListEle.style.display = 'block';
+    };
+
+    currentRateEle.onmouseleave = function () {
+      timeId = setTimeout(function () {
+        rateListEle.style.display = 'none';
+      }, 100);
+    };
+
+    rateListEle.onmouseenter = function () {
+      clearTimeout(timeId);
+    };
+
+    rateListEle.onmouseleave = function () {
+      rateListEle.style.display = 'none';
+    };
+
+    rateListEle.onclick = function (_a) {
+      var target = _a.target;
+      var rate = target.dataset.rate;
+
+      if (rate) {
+        player.setSpeed(rate);
+
+        if (target.className !== 'current') {
+          var currentEle_1 = rateListEle.querySelector('.current');
+
+          if (currentEle_1) {
+            currentEle_1.className = '';
+          }
+
+          target.className = 'current';
+        }
+
+        rateListEle.style.display = 'none';
+        currentRateEle.innerText = rate + 'x';
+      }
+    };
+  };
+
+  return RateComponent;
+}();
+
+var _default = RateComponent;
+exports["default"] = _default;

package/es/common/VideoPC/components/index.less

@@ -0,0 +1,62 @@
+.player-hidden {
+  display: none !important;
+}
+
+.rate-components {
+  float: right;
+  color: #fff;
+  height: 35px;
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 5px;
+}
+
+.current-rate {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  cursor: pointer;
+}
+
+.rate-list {
+  position: absolute;
+  bottom: 46px;
+  display: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    text-align: center;
+    width: 70px;
+    line-height: 30px;
+    background-color: rgba(0, 0, 0, .6);
+    cursor: pointer;
+
+    &.current {
+      color: #00c1de;
+    }
+
+    &+li {
+      border-top: 1px solid rgba(78, 78, 78, 0.3);
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .5);
+    }
+
+    ;
+  }
+}
+
+@media(max-width: 768px) {
+  .current-rate {
+    width: 40px;
+  }
+
+  .rate-list li {
+    width: 43px;
+  }
+}