@fonixtree/magic-design 1.0.219 → 1.0.221

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

@@ -3,12 +3,22 @@
   flex-direction: column;
   position: relative;
 
+  &.less-than-4 {
+    .image-list-wrapper {
+      padding-left: 0!important;
+      .image-list {
+        width: fit-content;
+        margin: 0 auto;
+      }
+    }
+  }
+
   .tab-select-wrap {
     display: flex;
     align-items: center;
-    height: 50px;
+    gap: 16px;
     background: #ffffff;
-    overflow: auto;
+    // overflow: auto;
     position: relative;
     width: fit-content;
     margin: 0 auto 15px;
@@ -19,14 +29,13 @@
       text-align: center;
       padding: 0; // 无缝衔接：去掉左右间距
       width: fit-content;
-      height: 100%;
       justify-content: center;
       white-space: nowrap;
       flex-direction: column;
       cursor: pointer;
 
       img {
-        height: 50px;
+        max-height: 50px;
         margin-bottom: 2px;
       }
     }
@@ -38,15 +47,75 @@
       margin-bottom: 16px;
     }
 
-    .image-list {
+    .image-list-wrapper {
+      padding-left: 88px;
+      position: relative;
+
+      .image-list {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        flex: 1;
+        scroll-behavior: smooth;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        scrollbar-width: none;
+
+        .image-item {
+          flex-shrink: 0;
+          width: 300px;
+
+          &:last-child {
+            margin-right: 40px;
+          }
+        }
+
+        .empty-placeholder {
+          width: 100%;
+          text-align: center;
+          color: #999;
+          padding: 40px 0;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .arrow-icon-wrapper {
+    display: flex;
+    justify-content: end;
+    padding: 24px 0;
+    padding-right: 75px;
+
+    .arrow-icon {
       display: flex;
-      flex-direction: row;
+      align-items: center;
       justify-content: center;
-      gap: 16px;
+      width: 40px;
+      height: 40px;
+      background: #CE1126;
+      border-radius: 100px;
+      cursor: pointer;
+      flex-shrink: 0;
+      z-index: 1;
 
-      .image-item {
-        flex: 1;
-        max-width: 23%;
+      &.left {
+        margin-right: 16px;
+      }
+
+      &.right {
+        // margin-left: 15px;
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
       }
     }
   }

package/es/composite-comp/dito/components/MenuNavigation/MenuNavMetaImage/index.less

@@ -4,10 +4,12 @@
   height: 100%;
   display: flex;
   justify-content: center;
+  max-height: 65px;
+
   // overflow: hidden;
   &>img {
     width: 100%;
-    height: 100%;
+    // height: 100%;
     // object-fit: contain;
     transition: all .2s linear;
     vertical-align: initial;

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

@@ -279,7 +279,7 @@ function (_super) {
     };
 
     _this.initTab = function (index, hideTabs) {
-      var selectedTabDom = document.querySelector(".tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
+      var selectedTabDom = document.querySelector(".recommend-tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
       var tabLeft = 0;
       var tabWidth = 0;
 
@@ -303,14 +303,14 @@ function (_super) {
 
     _this.getProductList = function (index) {
       return __awaiter(_this, void 0, void 0, function () {
-        var panelProps, groupSource, recommendId, pageId, cache, _a, _b, sourceType, _c, prodIds, _d, intelligentType, _e, intelligentValue, _f, maxProdNum, newData, res, res, e_1, _cache;
+        var panelProps, groupSource, recommendId, pageId, cache, _a, _b, sourceType, _c, prodIds, _d, prodType, _e, intelligentType, _f, intelligentValue, _g, maxProdNum, newData, params, res, res, e_1, _cache;
 
-        var _g, _h, _j;
+        var _h, _j, _k;
 
         var _this = this;
 
-        return __generator(this, function (_k) {
-          switch (_k.label) {
+        return __generator(this, function (_l) {
+          switch (_l.label) {
             case 0:
               panelProps = this.props.panelProps;
               groupSource = this.state.groupSource;
@@ -322,7 +322,7 @@ function (_super) {
 
                 if (cache) {
                   if ("products" + index in cache) {
-                    this.setState((_g = {}, _g["products" + index] = cache["products" + index], _g), function () {
+                    this.setState((_h = {}, _h["products" + index] = cache["products" + index], _h), function () {
                       _this.resetLayout();
                     });
                     /** 如果数据未过期 */
@@ -334,12 +334,12 @@ function (_super) {
                 }
               }
 
-              _a = groupSource[index] || {}, _b = _a.sourceType, sourceType = _b === void 0 ? '' : _b, _c = _a.prodIds, prodIds = _c === void 0 ? '' : _c, _d = _a.intelligentType, intelligentType = _d === void 0 ? '' : _d, _e = _a.intelligentValue, intelligentValue = _e === void 0 ? [] : _e, _f = _a.maxProdNum, maxProdNum = _f === void 0 ? 10 : _f;
+              _a = groupSource[index] || {}, _b = _a.sourceType, sourceType = _b === void 0 ? '' : _b, _c = _a.prodIds, prodIds = _c === void 0 ? '' : _c, _d = _a.prodType, prodType = _d === void 0 ? '' : _d, _e = _a.intelligentType, intelligentType = _e === void 0 ? '' : _e, _f = _a.intelligentValue, intelligentValue = _f === void 0 ? [] : _f, _g = _a.maxProdNum, maxProdNum = _g === void 0 ? 10 : _g;
               newData = [];
-              _k.label = 1;
+              _l.label = 1;
 
             case 1:
-              _k.trys.push([1, 9,, 10]);
+              _l.trys.push([1, 9,, 10]);
 
               if (!(groupSource.length > 0)) return [3
               /*break*/
@@ -347,22 +347,25 @@ function (_super) {
               if (!(sourceType === 'select')) return [3
               /*break*/
               , 3];
+              if (!prodIds) return [2
+              /*return*/
+              ];
+              params = {
+                state: 'A'
+              };
 
-              if (!prodIds) {
-                return [2
-                /*return*/
-                ];
+              if (prodType === 'spu') {
+                params.offers = prodIds;
+              } else {
+                params.products = prodIds;
               }
 
               return [4
               /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/h5/products', {
-                products: prodIds,
-                state: 'A'
-              }, 'GET')];
+              , (0, _commonUtil.commonFetch)('/designer/v1/h5/products', params, 'GET')];
 
             case 2:
-              res = _k.sent();
+              res = _l.sent();
               newData = __spreadArrays(res.list);
               return [3
               /*break*/
@@ -385,7 +388,7 @@ function (_super) {
               }, 'POST')];
 
             case 4:
-              res = _k.sent();
+              res = _l.sent();
               newData = __spreadArrays(res.pageInfo.list);
               return [3
               /*break*/
@@ -393,7 +396,7 @@ function (_super) {
 
             case 5:
               newData = [];
-              _k.label = 6;
+              _l.label = 6;
 
             case 6:
               return [3
@@ -402,7 +405,7 @@ function (_super) {
 
             case 7:
               newData = [];
-              _k.label = 8;
+              _l.label = 8;
 
             case 8:
               return [3
@@ -410,7 +413,7 @@ function (_super) {
               , 10];
 
             case 9:
-              e_1 = _k.sent();
+              e_1 = _l.sent();
               newData = [];
               return [3
               /*break*/
@@ -419,10 +422,10 @@ function (_super) {
             case 10:
               if (!(0, _coreUtil.isDesignMode)()) {
                 _cache = (0, _storeUtil.getMagicStore)("recommend_" + pageId + "_" + recommendId);
-                (0, _storeUtil.setMagicStore)("recommend_" + pageId + "_" + recommendId, __assign(__assign({}, _cache), (_h = {}, _h["products" + index] = newData, _h.endTime = Date.now() + 3 * 60 * 1000, _h)));
+                (0, _storeUtil.setMagicStore)("recommend_" + pageId + "_" + recommendId, __assign(__assign({}, _cache), (_j = {}, _j["products" + index] = newData, _j.endTime = Date.now() + 3 * 60 * 1000, _j)));
               }
 
-              this.setState((_j = {}, _j["products" + index] = newData, _j), function () {
+              this.setState((_k = {}, _k["products" + index] = newData, _k), function () {
                 _this.resetLayout();
               });
               return [2
@@ -642,7 +645,7 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc"
     }, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "tab-select-wrap"
+      className: "recommend-tab-select-wrap"
     }, groupSource.map(function (tab, index) {
       var _image = index == tabIndex && tab.hover.open && tab.hover.image.open ? tab.hover.image : tab.image;
 

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

@@ -13,12 +13,12 @@
   //   display: none;
   // }
 
-  .tab-select-wrap {
+  .recommend-tab-select-wrap {
     display: flex;
     align-items: center;
     height: 50px;
     background: rgb(255 255 255);
-    overflow: auto;
+    // overflow: auto;
     position: relative;
     width: fit-content;
     margin: 0 auto;
@@ -62,6 +62,14 @@
     .tab-list {
       width: 100%;
     }
+
+    .m-product-item-wrap {
+      border-radius: 8px;
+
+      .img-wrap {
+        border-radius: 8px 8px 0 0;
+      }
+    }
   }
 
   .arrow-icon {

package/es/composite-comp/dito/second-config-panels/GroupedImageSecondConfig/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _mobxReact = require("mobx-react");
+
 var _common = require("../../../../common");
 
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
@@ -15,12 +17,26 @@ var _TextConfig = _interopRequireDefault(require("../../../../meta-comp/config-p
 
 var _BaseConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/BaseConfig"));
 
+var _GroupList = _interopRequireDefault(require("../../../../common/GroupList"));
+
+var _Button = _interopRequireDefault(require("../../../../common/Button"));
+
 var _locale = require("../../../../locale");
 
 var _coreUtil = require("../../../../utils/coreUtil");
 
+var _defaultImg = _interopRequireDefault(require("../../../../common/GroupList/defaultImg.png"));
+
+var _defaultJSON = require("../../components/GroupedImage/defaultJSON");
+
+var _mobx = require("../../../../mobx");
+
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -63,13 +79,45 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
+var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
+    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  }
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
 var GroupedImageSecondConfig =
 /** @class */
 function (_super) {
   __extends(GroupedImageSecondConfig, _super);
 
   function GroupedImageSecondConfig() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this; // 数据迁移：将旧的image1-4迁移到images数组
+
+
+    _this.migrateData = function (panelProps) {
+      if (!panelProps.images && (panelProps.image1 || panelProps.image2 || panelProps.image3 || panelProps.image4)) {
+        panelProps.images = [];
+        [panelProps.image1, panelProps.image2, panelProps.image3, panelProps.image4].forEach(function (img) {
+          if (img) {
+            panelProps.images.push(img);
+          }
+        }); // 删除旧字段
+
+        delete panelProps.image1;
+        delete panelProps.image2;
+        delete panelProps.image3;
+        delete panelProps.image4;
+      } // 确保images数组存在
+
+
+      if (!panelProps.images) {
+        panelProps.images = [];
+      }
+    };
 
     _this.getContentPanel = function () {
       var panelProps = _this.props.panelProps;
@@ -87,34 +135,6 @@ function (_super) {
           data: panelProps.title
         }),
         metaOption: panelProps.title
-      }, {
-        key: 'defaultSource_3',
-        name: (0, _locale.i18n)('IMAGE') + " 1",
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image1
-        }),
-        metaOption: panelProps.image1
-      }, {
-        key: 'defaultSource_4',
-        name: (0, _locale.i18n)('IMAGE') + " 2",
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image2
-        }),
-        metaOption: panelProps.image2
-      }, {
-        key: 'defaultSource_5',
-        name: (0, _locale.i18n)('IMAGE') + " 3",
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image3
-        }),
-        metaOption: panelProps.image3
-      }, {
-        key: 'defaultSource_6',
-        name: (0, _locale.i18n)('IMAGE') + " 4",
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image4
-        }),
-        metaOption: panelProps.image4
       }];
       return /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
         headerSize: "middle",
@@ -127,6 +147,69 @@ function (_super) {
       });
     };
 
+    _this.getImagePanel = function () {
+      var panelProps = _this.props.panelProps;
+      var clickedImage = _mobx.store.clickedImage; // 如果选中了图片，不显示图片列表，由ConfigPanel统一处理第三级面板
+
+      if (clickedImage) {
+        return null;
+      } // 显示图片列表
+
+
+      var renderCard = function renderCard(src) {
+        var _a, _b;
+
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "card_wrap"
+        }, /*#__PURE__*/_react["default"].createElement("img", {
+          alt: "",
+          src: ((0, _coreUtil.isPc)() ? (_a = src.content) === null || _a === void 0 ? void 0 : _a.pcImgSrc : (_b = src.content) === null || _b === void 0 ? void 0 : _b.h5ImgSrc) || _defaultImg["default"]
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "name"
+        }, "Image Name"));
+      };
+
+      var onClickItem = function onClickItem(node) {
+        _mobx.store.setState({
+          clickedImage: node.id
+        });
+      };
+
+      var onAddClick = function onAddClick() {
+        if (!panelProps.images) {
+          panelProps.images = [];
+        }
+
+        var newImage = (0, _defaultJSON.createImageMeta)(panelProps.id);
+        panelProps.images.push(newImage);
+
+        _this.setState({});
+
+        (0, _coreUtil.renderPreview)();
+      };
+
+      var reRender = function reRender() {
+        _this.setState({});
+      };
+
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "node_list"
+      }, !panelProps.images || panelProps.images.length === 0 ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "notice"
+      }) : /*#__PURE__*/_react["default"].createElement(_GroupList["default"], {
+        onClickItem: onClickItem,
+        renderCard: renderCard,
+        reRender: reRender,
+        source: panelProps.images || []
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "btn_wrap"
+      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        icon: "icon-add",
+        onClick: onAddClick,
+        type: "primary"
+      }, (0, _locale.i18n)('ADD_IMAGE'))));
+    };
+
     _this.resetHover = function () {
       var panelProps = _this.props.panelProps;
 
@@ -138,6 +221,16 @@ function (_super) {
     return _this;
   }
 
+  GroupedImageSecondConfig.prototype.componentDidMount = function () {
+    var panelProps = this.props.panelProps;
+    this.migrateData(panelProps);
+  };
+
+  GroupedImageSecondConfig.prototype.componentWillReceiveProps = function (nextProps) {
+    var panelProps = nextProps.panelProps;
+    this.migrateData(panelProps);
+  };
+
   GroupedImageSecondConfig.prototype.render = function () {
     var _this = this;
 
@@ -174,6 +267,10 @@ function (_super) {
         value: this.getContentPanel()
       }, {
         key: '2',
+        name: (0, _locale.i18n)('IMAGE'),
+        value: this.getImagePanel()
+      }, {
+        key: '3',
         name: (0, _locale.i18n)('HOVER'),
         value: hoverPanel,
         metaOption: panelProps.hover,
@@ -185,6 +282,7 @@ function (_super) {
   GroupedImageSecondConfig.defaultProps = {
     panelProps: {}
   };
+  GroupedImageSecondConfig = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], GroupedImageSecondConfig);
   return GroupedImageSecondConfig;
 }(_BaseConfig["default"]);
 

package/es/composite-comp/dito/second-config-panels/GroupedImageSecondConfig/index.less

@@ -0,0 +1,21 @@
+.grouped_image_second_conf_wrap {
+  .config_header {
+    .button_wrap {
+      display: flex;
+    }
+
+    .title {
+      margin-top: 20px;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 26px;
+      line-height: 32px;
+      color: #232F46;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+

package/es/composite-comp/dito/second-config-panels/MenuNavigationSecondConfig/index.js

@@ -71,7 +71,7 @@ function (_super) {
         value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
           data: panelProps.image,
           needClickArea: false,
-          onlySpecificCode: "FunctionPage"
+          onlySpecificCode: ['CustomizedPage', 'FunctionPage']
         }),
         metaOption: panelProps.image
       }];

package/es/constants/index.js

@@ -119,7 +119,7 @@ var urlTypeMap = {
   AFFILIATE_PRODUCT: 'AffiliateProduct',
   ANCHOR: 'Anchor',
   CARD_PRODUCT_LIST: 'ProductList',
-  PICTURE: 'Picture'
+  PICTURE: 'ImageLibrary'
 };
 exports.urlTypeMap = urlTypeMap;
 var respCodeMap = {