@fonixtree/magic-design 1.0.218 → 1.0.220

package/es/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/es/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/es/core/Renderer/index.js

@@ -19,6 +19,8 @@ var _mobx = require("../../mobx");
 
 var _common = require("../../common");
 
+var _PictureModal = _interopRequireDefault(require("../../common/PictureModal"));
+
 var _Iconfont = _interopRequireDefault(require("../../common/Iconfont"));
 
 require("./index.less");
@@ -92,9 +94,13 @@ var Renderer = function Renderer(props) {
       pcProdCardModalState = _c[0],
       setPcProdCardModalState = _c[1];
 
-  var _d = (0, _react.useState)(_mobx.frameStore.toastState),
-      toastState = _d[0],
-      setToastState = _d[1];
+  var _d = (0, _react.useState)(_mobx.frameStore.pictureModalState),
+      pictureModalState = _d[0],
+      setPictureModalState = _d[1];
+
+  var _e = (0, _react.useState)(_mobx.frameStore.toastState),
+      toastState = _e[0],
+      setToastState = _e[1];
 
   if (!noSetWindow) {
     setDesignConfig(props);
@@ -152,6 +158,7 @@ var Renderer = function Renderer(props) {
     var disposer = (0, _mobx.autorun)(function () {
       setModalState(_mobx.frameStore.modalState);
       setPcProdCardModalState(_mobx.frameStore.pcProdCardModalState);
+      setPictureModalState(_mobx.frameStore.pictureModalState);
       setToastState(_mobx.frameStore.toastState);
     });
     return function () {
@@ -180,6 +187,17 @@ var Renderer = function Renderer(props) {
     });
   };
 
+  var onClosePictureModal = function onClosePictureModal() {
+    document.body.classList.remove('no-scroll');
+
+    _mobx.frameStore.setState({
+      pictureModalState: {
+        visible: false,
+        url: ''
+      }
+    });
+  };
+
   var onCloseToast = function onCloseToast() {
     _mobx.frameStore.setState({
       toastState: {
@@ -242,7 +260,10 @@ var Renderer = function Renderer(props) {
     onClose: onCloseModal
   })), pcProdCardModalState.visible && /*#__PURE__*/_react["default"].createElement(_common.ProductCardModal, _extends({}, pcProdCardModalState, {
     onClose: onCloseProdCardModal
-  })), toastState.visible && /*#__PURE__*/_react["default"].createElement(_common.Toast, _extends({}, toastState, {
+  })), pictureModalState.visible && /*#__PURE__*/_react["default"].createElement(_PictureModal["default"], {
+    url: pictureModalState.url,
+    onClose: onClosePictureModal
+  }), toastState.visible && /*#__PURE__*/_react["default"].createElement(_common.Toast, _extends({}, toastState, {
     onClose: onCloseToast
   })));
 };

package/es/locale/en/en.json

@@ -1,4 +1,5 @@
 {
+  "GROUP_IMAGE": "Group Image",
   "ENDS_IN": "Ends in",
   "STARTS_IN": "Starts in",
   "ICON_COLOR": "Icon Color",

package/es/locale/es/es.json

@@ -1,4 +1,5 @@
 {
+  "GROUP_IMAGE": "Group Image",
   "ENDS_IN": "Ends in",
   "STARTS_IN": "Starts in",
   "ICON_COLOR": "Icon Color",

package/es/locale/id/id.json

@@ -1,4 +1,5 @@
 {
+  "GROUP_IMAGE": "Group Image",
   "ENDS_IN": "Ends in",
   "STARTS_IN": "Starts in",
   "ICON_COLOR": "Icon Color",

package/es/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;
     };
 

package/es/meta-comp/config-panels/ImageConfig/index.js

@@ -204,7 +204,8 @@ var imageJson = {
     clickUrl: '',
     pcImgSrc: '',
     h5ImgSrc: '',
-    name: ''
+    name: '',
+    borderRadius: 0
   },
   hover: {
     open: false,
@@ -337,13 +338,15 @@ function (_super) {
   ImageConfig.prototype.render = function () {
     var _this = this;
 
-    var _a = this.props,
-        data = _a.data,
-        needHover = _a.needHover,
-        needClickArea = _a.needClickArea,
-        needURL = _a.needURL,
-        recommendImgSize = _a.recommendImgSize,
-        onlySpecificCode = _a.onlySpecificCode;
+    var _a;
+
+    var _b = this.props,
+        data = _b.data,
+        needHover = _b.needHover,
+        needClickArea = _b.needClickArea,
+        needURL = _b.needURL,
+        recommendImgSize = _b.recommendImgSize,
+        onlySpecificCode = _b.onlySpecificCode;
     var selectImg = this.getSelectedImg(data);
 
     var ContentSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.ImagePicker, {
@@ -373,6 +376,20 @@ function (_super) {
       },
       onlySpecificCode: onlySpecificCode,
       value: data.content.clickUrl
+    })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      title: (0, _locale.i18n)('BORDER_RADIUS')
+    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+      maxVal: 30,
+      minVal: 0,
+      onChange: function onChange(_a) {
+        var count = _a.count;
+        data.content.borderRadius = count;
+
+        _this.selfRender();
+      },
+      value: {
+        count: ((_a = data === null || data === void 0 ? void 0 : data.content) === null || _a === void 0 ? void 0 : _a.borderRadius) || 0
+      }
     })));
 
     var imageSource = [{

package/es/mobx/Frame.js

@@ -64,6 +64,10 @@ function () {
       visible: false,
       data: []
     };
+    this.pictureModalState = {
+      visible: false,
+      url: ''
+    };
     this.toastState = {
       visible: false,
       message: '',
@@ -74,6 +78,7 @@ function () {
       textModalState: _mobx.observable,
       modalState: _mobx.observable,
       pcProdCardModalState: _mobx.observable,
+      pictureModalState: _mobx.observable,
       toastState: _mobx.observable
     });
   }

package/es/mobx/Store.js

@@ -14,7 +14,7 @@ var _storeUtil = require("../utils/storeUtil");
 var debug = require('debug')('worker:mobx');
 
 var CACHE_KEY = 'STORE';
-var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'hoveredFloor', 'textSelection', 'MPageData'];
+var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'hoveredFloor', 'textSelection', 'MPageData', 'clickedImage'];
 
 var Store =
 /** @class */
@@ -40,6 +40,8 @@ function () {
 
     this.imgGenVisible = false; // 图片生成器是否可见
 
+    this.clickedImage = ''; // 点击的图片Id(用于第三级配置面板)
+
     (0, _mobx.makeObservable)(this, {
       MPageData: _mobx.observable,
       locale: _mobx.observable,
@@ -50,6 +52,7 @@ function () {
       hoveredFloor: _mobx.observable,
       CarouselStore: _mobx.observable,
       imgGenVisible: _mobx.observable,
+      clickedImage: _mobx.observable,
       setState: _mobx.action.bound
     });
   }

package/es/utils/businessUtil.js

@@ -343,6 +343,17 @@ var newParseUrl = function newParseUrl(urlObj) {
       };
       break;
 
+    case _constants.urlTypeMap.PICTURE:
+      // 图片弹窗
+      params = {
+        action: 'operation',
+        params: {
+          type: 'PICTURE',
+          url: urlObj.url
+        }
+      };
+      break;
+
     default:
       var map = {
         '/main/cart': 'CART',

package/es/utils/coreUtil.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setMagicDesign = exports.renderPreview = exports.isPc = exports.isDesignMode = exports.isActiveFloor = exports.getVideoCover = exports.createProdCardModal = exports.copyNode = exports.clickUrl = void 0;
+exports.setMagicDesign = exports.renderPreview = exports.isPc = exports.isDesignMode = exports.isActiveFloor = exports.getVideoCover = exports.createProdCardModal = exports.createPictureModal = exports.copyNode = exports.clickUrl = void 0;
 
 var _uuid = require("uuid");
 
@@ -349,14 +349,27 @@ var createProdCardModal = function createProdCardModal(ids) {
 
 exports.createProdCardModal = createProdCardModal;
 
+var createPictureModal = function createPictureModal(url) {
+  if (!url) return;
+  document.body.classList.add('no-scroll');
+
+  _mobx.frameStore.setState({
+    pictureModalState: {
+      visible: true,
+      url: url
+    }
+  });
+};
+
+exports.createPictureModal = createPictureModal;
+
 var clickUrl = function clickUrl(url, state) {
   var _a;
 
   if (url === void 0) {
     url = '';
-  }
+  } // 只读模式，设计模式，url为空，邮箱模版
 
-  console.log('clickUrl...', url, state); // 只读模式，设计模式，url为空，邮箱模版
 
   if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url || window.magicDesign.outputType == 'html') {
     return;
@@ -367,7 +380,13 @@ var clickUrl = function clickUrl(url, state) {
       data = _b.data;
 
   var _c = data.params,
-      params = _c === void 0 ? {} : _c; // PC商品卡片弹窗
+      params = _c === void 0 ? {} : _c; // 图片链接弹窗
+
+  if (params.type === 'PICTURE') {
+    createPictureModal(params.url);
+    return;
+  } // PC商品卡片弹窗
+
 
   if (params.type === 'CARD_PRODUCT_LIST') {
     createProdCardModal(params.offerIds);

package/es/utils/dataUtil.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addDefaultMetaData = void 0;
+
+var _data = require("../../data.jsx");
+
+var addDefaultMetaData = function addDefaultMetaData(type, parentId) {
+  return (0, _data.defMetaData)(parentId)[type];
+};
+
+exports.addDefaultMetaData = addDefaultMetaData;

package/lib/assets/images/layout-icon/banner-layout2.svg

@@ -0,0 +1,6 @@
+<svg width="94" height="66" viewBox="0 0 94 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="17" width="6" height="32" rx="2" fill="#D2D9E5"/>
+<rect x="15" y="17" width="6" height="32" rx="2" fill="#D2D9E5"/>
+<rect x="81" y="17" width="6" height="32" rx="2" fill="#D2D9E5"/>
+<rect x="24" y="17" width="54" height="32" rx="2" fill="#D2D9E5"/>
+</svg>