@fonixtree/magic-design 0.0.51 → 0.0.53

package/es/common/LinkModal/CustomTable/index.js

@@ -199,7 +199,8 @@ function CustomTable(props) {
   (0, _react.useEffect)(function () {
     queryCus({
       pageType: 'Customized',
-      verType: 'Formal'
+      verType: 'Formal',
+      configVersion: 'V2'
     });
   }, []);
   var columns = [{

package/es/common/LinkModal/ProductDetailPage/index.js

@@ -232,7 +232,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
 
   var _j = (0, _react.useState)({
     pageSize: 20,
-    current: 1
+    pageIndex: 1
   }),
       paginationParams = _j[0],
       setPaginationParams = _j[1];
@@ -399,7 +399,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
   }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
     onClick: function onClick() {
       setLoading(true);
-      paginationParams.current = 1;
+      paginationParams.pageIndex = 1;
 
       var total = paginationParams.total,
           params = __rest(paginationParams, ["total"]);
@@ -468,7 +468,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
     pagination: __assign(__assign({}, paginationParams), {
       onChange: function onChange(page) {
         setLoading(true);
-        paginationParams.current = page;
+        paginationParams.pageIndex = page;
 
         var total = paginationParams.total,
             params = __rest(paginationParams, ["total"]);

package/es/common/MagicLink/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onAClick = exports.getLinkUrl = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _businessUtil = require("src/components/utils/businessUtil");
+
+var _coreUtil = require("src/components/utils/coreUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var onAClick = function onAClick(e, url) {
+  e.preventDefault();
+
+  if (window.magicDesign.mode === 'renderer') {
+    (0, _coreUtil.clickUrl)(url);
+  }
+};
+
+exports.onAClick = onAClick;
+
+var getLinkUrl = function getLinkUrl(url) {
+  var h5Link = (0, _businessUtil.parseUrl)(url).h5Link;
+  return h5Link;
+};
+
+exports.getLinkUrl = getLinkUrl;
+
+var MagicLink =
+/** @class */
+function (_super) {
+  __extends(MagicLink, _super);
+
+  function MagicLink() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  MagicLink.prototype.render = function () {
+    var _a = this.props,
+        url = _a.url,
+        children = _a.children;
+    var href = getLinkUrl(url);
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      href: href,
+      onClick: function onClick(e) {
+        return onAClick(e, url);
+      }
+    }, children);
+  };
+
+  MagicLink.defaultProps = {};
+  return MagicLink;
+}(_react["default"].Component);
+
+var _default = MagicLink;
+exports["default"] = _default;

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

@@ -13,6 +13,8 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -25,6 +27,8 @@ var _commonUtil = require("../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -231,13 +235,21 @@ var LAYOUT_IMAGE_SIZE = {
     w: '100%',
     h: 180
   },
-  layout2: {
+  layout2_col6: {
     w: 160,
     h: 160
   },
-  layout3: {
-    w: 180,
-    h: 180
+  layout2_col5: {
+    w: 200,
+    h: 200
+  },
+  layout3_col6: {
+    w: 160,
+    h: 160
+  },
+  layout3_col5: {
+    w: 200,
+    h: 200
   }
 };
 
@@ -254,14 +266,27 @@ function (_super) {
     _this._cache = (0, _coreUtil.isDesignMode)() ? {} : (0, _commonUtil.ensure)(function () {
       return (0, _storeUtil.getMagicStore)("recommend_" + _this.props.panelProps.id);
     }, {});
+    _this.scrollRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = __assign({
       tabIndex: 0,
       tabLeft: 0,
       tabWidth: 0,
       groupSource: [],
-      hideTabs: false
+      hideTabs: false,
+      scrollToLeftDisabled: true,
+      scrollToRightDisabled: true
     }, _this._cache);
 
+    _this.setScrollDisabled = function (scrollDom) {
+      var scrollToLeftDisabled = scrollDom.scrollLeft === 0;
+      var scrollToRightDisabled = scrollDom.clientWidth + scrollDom.scrollLeft >= scrollDom.scrollWidth;
+
+      _this.setState({
+        scrollToLeftDisabled: scrollToLeftDisabled,
+        scrollToRightDisabled: scrollToRightDisabled
+      });
+    };
+
     _this.initTab = function (index, hideTabs) {
       var selectedTabDom = document.querySelector(".tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
       var tabLeft = 0;
@@ -462,6 +487,34 @@ function (_super) {
       });
 
       _this.getProductList(index);
+
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
+    };
+
+    _this.scrollToRight = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.clientWidth + scrollDom.scrollLeft < scrollDom.scrollWidth) {
+        scrollDom.scrollTo(scrollDom.scrollLeft + scrollDom.clientWidth, 0);
+      }
+    };
+
+    _this.scrollToLeft = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.scrollLeft > 0) {
+        scrollDom.scrollTo(scrollDom.scrollLeft - scrollDom.clientWidth, 0);
+      }
     };
 
     return _this;
@@ -483,6 +536,17 @@ function (_super) {
 
       _this.getProductList(0);
     });
+    setTimeout(function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom) {
+        _this.setScrollDisabled(scrollDom);
+
+        scrollDom.onscroll = (0, _lodash["default"])(function () {
+          _this.setScrollDisabled(scrollDom);
+        }, 500);
+      }
+    }, 0);
   };
 
   RecommendMobile.prototype.componentWillReceiveProps = function () {
@@ -528,6 +592,17 @@ function (_super) {
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
     }
 
     this.preLayout = curLayout;
@@ -542,7 +617,9 @@ function (_super) {
         tabLeft = _a.tabLeft,
         tabWidth = _a.tabWidth,
         groupSource = _a.groupSource,
-        hideTabs = _a.hideTabs;
+        hideTabs = _a.hideTabs,
+        scrollToLeftDisabled = _a.scrollToLeftDisabled,
+        scrollToRightDisabled = _a.scrollToRightDisabled;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 3;
@@ -553,10 +630,10 @@ function (_super) {
     }, '');
 
     var imgHeight = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].h;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
     }, 140);
     var imgWidth = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].w;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].w : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].w;
     }, 140);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc",
@@ -598,8 +675,22 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-content"
+    }, layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon left",
+      onClick: function onClick() {
+        return _this.scrollToLeft();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToLeftDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-left"
+    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-list"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       key: "macyContainer",
+      ref: this.scrollRef,
       className: "macyContainer"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
@@ -621,6 +712,7 @@ function (_super) {
       data: _seeAll
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
+      ref: this.scrollRef,
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout3'
       })
@@ -642,7 +734,16 @@ function (_super) {
     }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "btnSeeAll",
       data: _seeAll
-    })));
+    })), layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon right",
+      onClick: function onClick() {
+        return _this.scrollToRight();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToRightDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-right"
+    }))));
   };
 
   RecommendMobile.defaultProps = {

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

@@ -1,17 +1,17 @@
 .m-recommend-pc {
   display: flex;
   flex-direction: column;
+  position: relative;
 
   .ant-tabs-nav-operations {
     display: none !important;
   }
 
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    display: none;
-  }
-
+  // ::-webkit-scrollbar {
+  //   width: 0;
+  //   height: 0;
+  //   display: none;
+  // }
 
   .tab-select-wrap {
     display: flex;
@@ -49,16 +49,47 @@
     }
   }
 
+  .tab-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .tab-list {
+      width: 100%;
+    }
+  }
+
+  .arrow-icon {
+    display: block;
+    width: 36px;
+    height: 36px;
+    line-height: 42px;
+    text-align: center;
+    background: #FFFFFF;
+    box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
+    border-radius: 100px;
+    cursor: pointer;
+
+    &.left {
+      margin-right: 40px;
+    }
+
+    &.right {
+      margin-left: 40px;
+    }
+  }
+
   .macyContainer {
     display: flex;
-    margin: 0 16px;
+    margin: 0;
   }
 
   .scrollContainer {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 0 16px;
+    flex: 1;
+    margin: 0;
     overflow-x: auto;
     padding-bottom: 15px;
 
@@ -67,7 +98,7 @@
     }
 
     .productCard {
-      margin-right: 12px;
+      margin-right: 20px;
     }
   }
 

package/es/utils/coreUtil.js

@@ -87,7 +87,9 @@ var clickUrl = function clickUrl(url) {
     if (url.startsWith('/')) {
       (0, _commonUtil.navigateTo)(url);
     } else {
-      location.href = url;
+      // location.href = url;
+      var newUrl = isPc() ? pcLink : h5Link;
+      (0, _commonUtil.navigateTo)(newUrl);
     }
 
     return;

package/lib/common/LinkModal/CustomTable/index.js

@@ -199,7 +199,8 @@ function CustomTable(props) {
   (0, _react.useEffect)(function () {
     queryCus({
       pageType: 'Customized',
-      verType: 'Formal'
+      verType: 'Formal',
+      configVersion: 'V2'
     });
   }, []);
   var columns = [{

package/lib/common/LinkModal/ProductDetailPage/index.js

@@ -232,7 +232,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
 
   var _j = (0, _react.useState)({
     pageSize: 20,
-    current: 1
+    pageIndex: 1
   }),
       paginationParams = _j[0],
       setPaginationParams = _j[1];
@@ -399,7 +399,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
   }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
     onClick: function onClick() {
       setLoading(true);
-      paginationParams.current = 1;
+      paginationParams.pageIndex = 1;
 
       var total = paginationParams.total,
           params = __rest(paginationParams, ["total"]);
@@ -468,7 +468,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
     pagination: __assign(__assign({}, paginationParams), {
       onChange: function onChange(page) {
         setLoading(true);
-        paginationParams.current = page;
+        paginationParams.pageIndex = page;
 
         var total = paginationParams.total,
             params = __rest(paginationParams, ["total"]);

package/lib/common/MagicLink/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onAClick = exports.getLinkUrl = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _businessUtil = require("src/components/utils/businessUtil");
+
+var _coreUtil = require("src/components/utils/coreUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var onAClick = function onAClick(e, url) {
+  e.preventDefault();
+
+  if (window.magicDesign.mode === 'renderer') {
+    (0, _coreUtil.clickUrl)(url);
+  }
+};
+
+exports.onAClick = onAClick;
+
+var getLinkUrl = function getLinkUrl(url) {
+  var h5Link = (0, _businessUtil.parseUrl)(url).h5Link;
+  return h5Link;
+};
+
+exports.getLinkUrl = getLinkUrl;
+
+var MagicLink =
+/** @class */
+function (_super) {
+  __extends(MagicLink, _super);
+
+  function MagicLink() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  MagicLink.prototype.render = function () {
+    var _a = this.props,
+        url = _a.url,
+        children = _a.children;
+    var href = getLinkUrl(url);
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      href: href,
+      onClick: function onClick(e) {
+        return onAClick(e, url);
+      }
+    }, children);
+  };
+
+  MagicLink.defaultProps = {};
+  return MagicLink;
+}(_react["default"].Component);
+
+var _default = MagicLink;
+exports["default"] = _default;

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

@@ -13,6 +13,8 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -25,6 +27,8 @@ var _commonUtil = require("../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -231,13 +235,21 @@ var LAYOUT_IMAGE_SIZE = {
     w: '100%',
     h: 180
   },
-  layout2: {
+  layout2_col6: {
     w: 160,
     h: 160
   },
-  layout3: {
-    w: 180,
-    h: 180
+  layout2_col5: {
+    w: 200,
+    h: 200
+  },
+  layout3_col6: {
+    w: 160,
+    h: 160
+  },
+  layout3_col5: {
+    w: 200,
+    h: 200
   }
 };
 
@@ -254,14 +266,27 @@ function (_super) {
     _this._cache = (0, _coreUtil.isDesignMode)() ? {} : (0, _commonUtil.ensure)(function () {
       return (0, _storeUtil.getMagicStore)("recommend_" + _this.props.panelProps.id);
     }, {});
+    _this.scrollRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = __assign({
       tabIndex: 0,
       tabLeft: 0,
       tabWidth: 0,
       groupSource: [],
-      hideTabs: false
+      hideTabs: false,
+      scrollToLeftDisabled: true,
+      scrollToRightDisabled: true
     }, _this._cache);
 
+    _this.setScrollDisabled = function (scrollDom) {
+      var scrollToLeftDisabled = scrollDom.scrollLeft === 0;
+      var scrollToRightDisabled = scrollDom.clientWidth + scrollDom.scrollLeft >= scrollDom.scrollWidth;
+
+      _this.setState({
+        scrollToLeftDisabled: scrollToLeftDisabled,
+        scrollToRightDisabled: scrollToRightDisabled
+      });
+    };
+
     _this.initTab = function (index, hideTabs) {
       var selectedTabDom = document.querySelector(".tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
       var tabLeft = 0;
@@ -462,6 +487,34 @@ function (_super) {
       });
 
       _this.getProductList(index);
+
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
+    };
+
+    _this.scrollToRight = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.clientWidth + scrollDom.scrollLeft < scrollDom.scrollWidth) {
+        scrollDom.scrollTo(scrollDom.scrollLeft + scrollDom.clientWidth, 0);
+      }
+    };
+
+    _this.scrollToLeft = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.scrollLeft > 0) {
+        scrollDom.scrollTo(scrollDom.scrollLeft - scrollDom.clientWidth, 0);
+      }
     };
 
     return _this;
@@ -483,6 +536,17 @@ function (_super) {
 
       _this.getProductList(0);
     });
+    setTimeout(function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom) {
+        _this.setScrollDisabled(scrollDom);
+
+        scrollDom.onscroll = (0, _lodash["default"])(function () {
+          _this.setScrollDisabled(scrollDom);
+        }, 500);
+      }
+    }, 0);
   };
 
   RecommendMobile.prototype.componentWillReceiveProps = function () {
@@ -528,6 +592,17 @@ function (_super) {
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
     }
 
     this.preLayout = curLayout;
@@ -542,7 +617,9 @@ function (_super) {
         tabLeft = _a.tabLeft,
         tabWidth = _a.tabWidth,
         groupSource = _a.groupSource,
-        hideTabs = _a.hideTabs;
+        hideTabs = _a.hideTabs,
+        scrollToLeftDisabled = _a.scrollToLeftDisabled,
+        scrollToRightDisabled = _a.scrollToRightDisabled;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 3;
@@ -553,10 +630,10 @@ function (_super) {
     }, '');
 
     var imgHeight = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].h;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
     }, 140);
     var imgWidth = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].w;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].w : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].w;
     }, 140);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc",
@@ -598,8 +675,22 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-content"
+    }, layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon left",
+      onClick: function onClick() {
+        return _this.scrollToLeft();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToLeftDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-left"
+    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-list"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       key: "macyContainer",
+      ref: this.scrollRef,
       className: "macyContainer"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
@@ -621,6 +712,7 @@ function (_super) {
       data: _seeAll
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
+      ref: this.scrollRef,
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout3'
       })
@@ -642,7 +734,16 @@ function (_super) {
     }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "btnSeeAll",
       data: _seeAll
-    })));
+    })), layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon right",
+      onClick: function onClick() {
+        return _this.scrollToRight();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToRightDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-right"
+    }))));
   };
 
   RecommendMobile.defaultProps = {

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

@@ -1,17 +1,17 @@
 .m-recommend-pc {
   display: flex;
   flex-direction: column;
+  position: relative;
 
   .ant-tabs-nav-operations {
     display: none !important;
   }
 
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    display: none;
-  }
-
+  // ::-webkit-scrollbar {
+  //   width: 0;
+  //   height: 0;
+  //   display: none;
+  // }
 
   .tab-select-wrap {
     display: flex;
@@ -49,16 +49,47 @@
     }
   }
 
+  .tab-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .tab-list {
+      width: 100%;
+    }
+  }
+
+  .arrow-icon {
+    display: block;
+    width: 36px;
+    height: 36px;
+    line-height: 42px;
+    text-align: center;
+    background: #FFFFFF;
+    box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
+    border-radius: 100px;
+    cursor: pointer;
+
+    &.left {
+      margin-right: 40px;
+    }
+
+    &.right {
+      margin-left: 40px;
+    }
+  }
+
   .macyContainer {
     display: flex;
-    margin: 0 16px;
+    margin: 0;
   }
 
   .scrollContainer {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 0 16px;
+    flex: 1;
+    margin: 0;
     overflow-x: auto;
     padding-bottom: 15px;
 
@@ -67,7 +98,7 @@
     }
 
     .productCard {
-      margin-right: 12px;
+      margin-right: 20px;
     }
   }
 

package/lib/utils/coreUtil.js

@@ -87,7 +87,9 @@ var clickUrl = function clickUrl(url) {
     if (url.startsWith('/')) {
       (0, _commonUtil.navigateTo)(url);
     } else {
-      location.href = url;
+      // location.href = url;
+      var newUrl = isPc() ? pcLink : h5Link;
+      (0, _commonUtil.navigateTo)(newUrl);
     }
 
     return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -34,91 +34,6 @@
     "replace": "^1.2.1",
     "slick-carousel": "^1.8.1"
   },
-  "devDependencies": {
-    "react-dom": "^16.11.0",
-    "react": "^16.11.0",
-    "gulp": "4.0.2",
-    "gulp-less": "5.0.0",
-    "gulp-postcss": "9.0.1",
-    "gulp-rename": "2.0.0",
-    "postcss-less": "6.0.0",
-    "@babel/core": "^7.16.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@svgr/webpack": "^5.5.0",
-    "@types/axios": "^0.14.0",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.36",
-    "@types/react": "^18.0.9",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.0.5",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "add": "^2.0.6",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
-    "browserslist": "^4.18.1",
-    "camelcase": "^6.2.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "child_process": "^1.0.2",
-    "classnames": "^2.3.1",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "dotenv": "^10.0.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "7",
-    "eslint-config-next": "^12.1.6",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "extract-zip": "^2.0.1",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "http-proxy-middleware": "^2.0.6",
-    "identity-obj-proxy": "^3.0.0",
-    "less": "3.13.1",
-    "less-loader": "^11.0.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "mv": "^2.1.1",
-    "ora": "^4.1.1",
-    "postcss": "^8.4.4",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "postcss-px-to-viewport": "^1.1.1",
-    "postcss-selector-namespace": "^3.0.1",
-    "prompts": "^2.4.2",
-    "rc-tools": "^9.6.1-alpha.1",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
-    "typescript": "^4.7.2",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
-  },
   "peerDependencies": {
     "react-dom": ">=16.11.0",
     "react": ">=16.11.0"

package/README.md

@@ -1,320 +0,0 @@
-# 快捷指令使用
-
-## 1、发布 -- npm run pub
-
-## 2、新增国际化 -- npm run cl "Hello world"
-
-## 3、更新iconfont -- npm run iconfont
-
-
-# 设计器二期
-
-## 1、基本概念
-
-### 1.1、元组件：构成复合组件的最小单位
-
-Text、Image、Button、Divider、Video 等
-
-### 1.2、复合组件：由若干个元组件构成的一个大组件
-
-Text、Banner、Image Gallery、Image and Text、Carousel、Reward、Newsletter 等
-
-### 1.3、业务公共组件：项目中复用的公共组件
-
-所有的公共组件需要开放 value 和 onChange Api（除 Button、Iconfont）
-
-Button、Iconfont、AlignSelecter、Collapse、ColorPicker、ImagePicker、LayoutSelecter、Slider、UrlPicker
-
-## 2、元组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、IMAGE、BUTTON、DIVIDER、VIDEO
-
-元组件报文格式：
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  style:{
-  	fontFamily:'xxx', //字体
-  	...css  //属性名称尽量使用标准css名称
-	},
-	hoverStyle:{
-
-  }
-}
-```
-
-动态设置 hover 效果
-
-onMouseEnter={e => { e.target.style.color = 'red'; }}
-
-onMouseLeave={e => { e.target.style.color = 'white'; }}
-
-文本可编辑
-
-contenteditable="true"
-
-### 2.2 、元组件报文
-
-#### Text
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  content:'this is text',
-  style:{
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    width: '200px',
-    ...css
-	}
-}
-```
-
-#### Image
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'IMAGE', //元组件类型
-  name:'123.png',
-  src:'../image.png', //图片地址
-  url:'www.baidu.com', //图片跳转地址
-  style:{
-    width: '200px',
-    ...css
-	},
-	hoverStyle:{     //hover 类型为new时保存src，类型为enlarge时保存scale
-    scale: '2',
-    src:'../image1.png',
-  }
-}
-```
-
-#### Button
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'BUTTON', //元组件类型
-  name:'Submit',
-  url: 'www.baidu.com',
-  style:{
-  	buttonIconSrc:'../img.png',
- 	  buttonIconPlace: 'left',
-  	color:'#FEFEFE',
-  	border: '1px solid red',
-  	borderRadius:'10px',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-	},
-	hoverStyle {
-    color:'#FEFEFE',
-  	border: '1px solid red',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-  }
-}
-```
-
-## 2、复合组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、BANNER、IMAGE_GALLERT、IMAGE_TEXT、CAROUSEL、REWARD、NEWSLETTER
-
-复合组件报文格式：
-
-```json
-{
-  id:'xxxx' //复合组件key
-  type: 'TYPE', //复合组件类型
-  setting:{     //开关类型的配置及属性配置放在这里
-  	autoplays: 3, //3秒轮播
-	},
-	groupSource:[],  //元组件集合组数据放在这里
-	metas:{
-    title:{
-      open:false,
-      type:'IMAGE'
-      ...metaCompJson
-    },
-    subTitle:{
-      open:false,
-        type:'IMAGE'
-        ...metaCompJson
-    }
-  },
-	customize:{
-    layout:'',
-    background:{
-
-    }
-  }
-}
-```
-
-#### Text
-
-```js
-{
-	id: 'xxxx', //复合组件key
-  type: 'TEXT', //复合组件类型
-  setting:{
-    layout:'left', // 模块布局 left/center/right ，每一个layout可能都是一个不同的组件
-    title:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-    subtitle:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-  },
-  source:[
-    {                   //此处可以抽出业务组件
-      title:{
-        type:'TEXT'
-       ...metaCompJson
-      },
-      content:{
-        type:'TEXT'
-       ...metaCompJson
-      }
-    }
-  ],
-  style:{
-  	align:'left',  //文本布局 left/center/right
-  	backgroundColor: 'red',
-  	backgroundImage:'../image.png'
-	}
-}
-```
-
-#### Banner
-
-modifySetting
-
-```json
-{
-  "comositeId": "1111",
-
-  "value": {
-    "autoplays": 4
-  }
-}
-```
-
-```json
-{
-	id: 'xxxx',
-	type: 'BANNER',
-	setting:{
-    open:false
-  	autoplays: 3, //3秒轮播
-    arrows:{      // 滚动箭头
-    	open:false,
-    	color:'red',
-    	size:'',
-    	hoverSize:'',
-      hoverColor:'green',
-  	},
-    dots:{       //面板指示点
-      open:false,
-      color: 'red',
-      size:'',
-      hoverSize:''
-      hoverColor:'green',
-    },
-	},
-  groupSource:[
-    {                     //此处可以作为一个业务组件
-      id:'xxxxx',
-      image:{
-        open:false,
-        type:'IMAGE'
-        ...metaCompJson
-      },
-      title:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      content:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      button:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      secondaryButton:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      layout:'center',
-      align:'left',
-      //文本布局 left/center/right
-    }
-  ]
-}
-```
-
-#### Image Gallery
-
-```json
-
-```
-
-#### Image and Text
-
-```json
-{
-  id:'xxxx'
-  type: 'IMAGE_TEXT',
-  setting:{
-  	layout:'left',
-  	title:{},
-		subtitle:{},
-		button:{},
-		secondaryButton:{}
-	},
-	source:[
-
-  ],
-  style:{
-    align:'left',
-    backgroundColor:'red',
-    backgroundImage:'./img.png'
-  }
-}
-```
-
-疑问：
-
-Text 元组件
-
-文字链接配置好之后，怎么删除
-
-链接配置的规则，按单词还是字符
-
-image 元组件
-
-属性控制进度条和输入框是否要限制最大最小值
-
-button 元组件
-
-是否需要 icon 的 hover 效果
-
-banner 中的 text Align 放在元组件里？