@fonixtree/magic-design 1.0.219 → 1.0.220

package/lib/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;
 
@@ -642,7 +642,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/lib/composite-comp/dito/components/Recommend/pc/index.less

@@ -13,7 +13,7 @@
   //   display: none;
   // }
 
-  .tab-select-wrap {
+  .recommend-tab-select-wrap {
     display: flex;
     align-items: center;
     height: 50px;

package/lib/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/lib/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/lib/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 = {

package/lib/core/Designer/ConfigPanel/index.js

@@ -9,6 +9,8 @@ exports.getSecondConfigName = exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _antd = require("antd");
+
 var _TerminalSelect = _interopRequireDefault(require("./TerminalSelect"));
 
 var _coreUtil = require("../../../utils/coreUtil");
@@ -25,6 +27,8 @@ var _mobx = require("../../../mobx");
 
 var _locale = require("../../../locale");
 
+var _ImageConfig = _interopRequireDefault(require("../../../meta-comp/config-panels/ImageConfig"));
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -164,7 +168,8 @@ function (_super) {
   function ConfigPanel() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
-    _this.preClickedGroup = null; // 以及面板展开状态
+    _this.preClickedGroup = null;
+    _this.preClickedImage = null; // 以及面板展开状态
 
     _this.configOpen = false;
     _this.state = {
@@ -179,6 +184,7 @@ function (_super) {
 
       _this.setState({
         clickedGroup: _mobx.store.clickedGroup,
+        clickedImage: _mobx.store.clickedImage,
         selectedNode: selectedNode
       }); // 展开一级面板
 
@@ -194,9 +200,17 @@ function (_super) {
         _this.closeSecConfig();
       } else if (Boolean(_mobx.store.clickedGroup) != Boolean(_this.preClickedGroup)) {
         _this.openSecConfig();
+      } // 展开三级面板
+
+
+      if (!_mobx.store.clickedImage && _this.preClickedImage) {
+        _this.closeThirdConfig();
+      } else if (Boolean(_mobx.store.clickedImage) != Boolean(_this.preClickedImage)) {
+        _this.openThirdConfig();
       }
 
       _this.preClickedGroup = _mobx.store.clickedGroup;
+      _this.preClickedImage = _mobx.store.clickedImage;
     };
 
     _this.animation = function (type) {
@@ -263,6 +277,22 @@ function (_super) {
       });
     };
 
+    _this.openThirdConfig = function () {
+      var thirdConfigWrap = document.getElementsByClassName('third_config_wrap')[0];
+
+      if (thirdConfigWrap) {
+        thirdConfigWrap.setAttribute('style', 'animation-name:openSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+      }
+    };
+
+    _this.closeThirdConfig = function () {
+      var thirdConfigWrap = document.getElementsByClassName('third_config_wrap')[0];
+
+      if (thirdConfigWrap) {
+        thirdConfigWrap.setAttribute('style', 'animation-name:closeSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+      }
+    };
+
     _this.onDoneClick = function () {
       var _a = _this.props,
           device = _a.device,
@@ -334,6 +364,164 @@ function (_super) {
       }));
     };
 
+    _this.onThirdConfigBack = function () {
+      _mobx.store.setState({
+        clickedImage: ''
+      });
+    };
+
+    _this.onThirdConfigSwitchChange = function (checked) {
+      var _a;
+
+      var selectedNode = _this.state.selectedNode;
+      var panelProps = (0, _commonUtil.ensure)(function () {
+        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
+          return src.id === _this.state.clickedGroup;
+        });
+      }, null);
+
+      if (!panelProps && (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource2)) {
+        panelProps = (0, _commonUtil.ensure)(function () {
+          return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource2.find(function (src) {
+            return src.id === _this.state.clickedGroup;
+          });
+        }, null);
+      }
+
+      if (panelProps && _mobx.store.clickedImage) {
+        var selectedImage = (_a = panelProps.images) === null || _a === void 0 ? void 0 : _a.find(function (img) {
+          return img && img.id === _mobx.store.clickedImage;
+        });
+
+        if (selectedImage) {
+          selectedImage.open = checked;
+          (0, _coreUtil.renderPreview)();
+
+          _this.setState({});
+        }
+      }
+    };
+
+    _this.getThirdConfigSwitch = function () {
+      var selectedNode = _this.state.selectedNode;
+
+      if (!selectedNode || !_mobx.store.clickedImage) {
+        return null;
+      }
+
+      var panelProps = (0, _commonUtil.ensure)(function () {
+        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
+          return src.id === _this.state.clickedGroup;
+        });
+      }, null);
+
+      if (!panelProps && (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource2)) {
+        panelProps = (0, _commonUtil.ensure)(function () {
+          return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource2.find(function (src) {
+            return src.id === _this.state.clickedGroup;
+          });
+        }, null);
+      }
+
+      if (!panelProps) {
+        return null;
+      } // 数据迁移：确保images数组存在
+
+
+      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);
+          }
+        });
+      }
+
+      if (!panelProps.images) {
+        panelProps.images = [];
+      }
+
+      var selectedImage = panelProps.images.find(function (img) {
+        return img && img.id === _mobx.store.clickedImage;
+      });
+
+      if (selectedImage) {
+        return /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
+          checked: selectedImage.open !== false,
+          onChange: _this.onThirdConfigSwitchChange
+        });
+      }
+
+      return null;
+    };
+
+    _this.getThirdConfigInstance = function () {
+      var _a, _b;
+
+      var selectedNode = _this.state.selectedNode;
+
+      if (!selectedNode || !_mobx.store.clickedImage) {
+        return null;
+      }
+
+      var panelProps = (0, _commonUtil.ensure)(function () {
+        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
+          return src.id === _this.state.clickedGroup;
+        });
+      }, null);
+
+      if (!panelProps && (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource2)) {
+        panelProps = (0, _commonUtil.ensure)(function () {
+          return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource2.find(function (src) {
+            return src.id === _this.state.clickedGroup;
+          });
+        }, null);
+      }
+
+      if (!panelProps) {
+        console.warn('getThirdConfigInstance: panelProps not found', {
+          clickedGroup: _this.state.clickedGroup,
+          selectedNodeType: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type,
+          hasGroupSource: !!(selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource),
+          hasGroupSource2: !!(selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource2)
+        });
+        return null;
+      } // 数据迁移：确保images数组存在
+
+
+      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);
+          }
+        });
+      }
+
+      if (!panelProps.images) {
+        panelProps.images = [];
+      }
+
+      var selectedImage = panelProps.images.find(function (img) {
+        return img && img.id === _mobx.store.clickedImage;
+      });
+
+      if (!selectedImage) {
+        console.warn('getThirdConfigInstance: selectedImage not found', {
+          clickedImage: _mobx.store.clickedImage,
+          imagesCount: (_a = panelProps.images) === null || _a === void 0 ? void 0 : _a.length,
+          imageIds: (_b = panelProps.images) === null || _b === void 0 ? void 0 : _b.map(function (img) {
+            return img === null || img === void 0 ? void 0 : img.id;
+          })
+        });
+        return null;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
+        data: selectedImage
+      });
+    };
+
     _this.onTerminalChange = function (terminal) {
       var selectedNode = _this.state.selectedNode;
       selectedNode.activeTerminal = terminal;
@@ -353,7 +541,13 @@ function (_super) {
     var _this = this;
 
     this.distroy = (0, _mobx.autorun)(function () {
-      _this.resetState(_this.props, _mobx.store.clickedFloor);
+      // 监听store中所有相关状态的变化，确保clickedImage变化时也能触发resetState
+      // 通过访问clickedFloor、clickedGroup和clickedImage，确保autorun能监听到所有变化
+      var clickedFloor = _mobx.store.clickedFloor;
+      var clickedGroup = _mobx.store.clickedGroup;
+      var clickedImage = _mobx.store.clickedImage;
+
+      _this.resetState(_this.props, clickedFloor);
     });
   };
 
@@ -373,7 +567,9 @@ function (_super) {
     var device = this.props.device;
     var _c = this.state,
         selectedNode = _c.selectedNode,
-        clickedGroup = _c.clickedGroup;
+        clickedGroup = _c.clickedGroup,
+        clickedImage = _c.clickedImage;
+    var hasClickedImage = _mobx.store.clickedImage && clickedImage;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "config_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -408,7 +604,24 @@ function (_super) {
       dangerouslySetInnerHTML: {
         __html: getSecondConfigName(selectedNode, clickedGroup)
       }
-    })), this.getSecondConfigInstance()));
+    })), !hasClickedImage && this.getSecondConfigInstance()), hasClickedImage && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "third_config_wrap",
+      style: {
+        left: 0
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "config_header"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "button_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      icon: "icon-left",
+      onClick: this.onThirdConfigBack,
+      type: "icon"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, (0, _locale.i18n)('IMAGE')), this.getThirdConfigSwitch())), this.getThirdConfigInstance()));
   };
 
   return ConfigPanel;

package/lib/core/Designer/ConfigPanel/index.less

@@ -79,6 +79,45 @@
       }
     }
   }
+
+  .third_config_wrap {
+    position: absolute;
+    height: 100vh;
+    overflow: auto;
+    width: 354px;
+    z-index: 202;
+    left: -354px;
+    bottom: 0;
+    top: 0;
+    background-color: #FFF;
+    padding: 24px;
+
+    .config_header {
+      .button_wrap {
+        display: flex;
+      }
+
+      .title_wrap {
+        margin: 20px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title {
+          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;
+          flex: 1;
+        }
+      }
+    }
+  }
 }
 
 

package/lib/meta-comp/components/Image/index.js

@@ -81,17 +81,17 @@ function (_super) {
     };
 
     _this.getStyle = function () {
-      var _a, _b;
-
-      var _c = _this.props,
-          data = _c.data,
-          hoverState = _c.hoverState,
-          maxHeight = _c.maxHeight,
-          maxWidth = _c.maxWidth,
-          minHeight = _c.minHeight,
-          minWidth = _c.minWidth,
-          limitWidthHeight = _c.limitWidthHeight,
-          scale = _c.scale;
+      var _a, _b, _c;
+
+      var _d = _this.props,
+          data = _d.data,
+          hoverState = _d.hoverState,
+          maxHeight = _d.maxHeight,
+          maxWidth = _d.maxWidth,
+          minHeight = _d.minHeight,
+          minWidth = _d.minWidth,
+          limitWidthHeight = _d.limitWidthHeight,
+          scale = _d.scale;
       var hoverImgSrc = _this.state.hoverImgSrc;
       var obj = {};
 
@@ -133,6 +133,10 @@ function (_super) {
         }
       }
 
+      if ((_c = data === null || data === void 0 ? void 0 : data.content) === null || _c === void 0 ? void 0 : _c.borderRadius) {
+        obj.borderRadius = data.content.borderRadius + "px";
+      }
+
       return obj;
     };