@fonixtree/magic-design 1.0.219 → 1.0.221

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

@@ -219,7 +219,6 @@ var Renderer = function Renderer(props) {
     };
   };
 
-  console.log('window.magicDesign.designMode', window.magicDesign.designMode);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "render_wrap",
     magic_design: "",

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/ButtonConfig/index.js

@@ -146,6 +146,10 @@ function (_super) {
       };
     }
 
+    if (!data.buttonText.pcFontSize) {
+      data.buttonText.pcFontSize = 14;
+    }
+
     var contentSetting = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
       split: true,
       title: "URL"

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: 200,
+      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/meta-comp/config-panels/TextConfig/index.js

@@ -287,7 +287,7 @@ function (_super) {
         },
         unit: "px",
         value: {
-          count: window.magicDesign.device == 'pc' ? textData.pcFontSize : textData.fontSize
+          count: window.magicDesign.device == 'pc' ? textData.pcFontSize || textData.fontSize : textData.fontSize
         }
       }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: ""

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/coreUtil.js

@@ -350,8 +350,7 @@ var createProdCardModal = function createProdCardModal(ids) {
 exports.createProdCardModal = createProdCardModal;
 
 var createPictureModal = function createPictureModal(url) {
-  if (!url) return;
-  document.body.classList.add('no-scroll');
+  if (!url) return; // document.body.classList.add('no-scroll');
 
   _mobx.frameStore.setState({
     pictureModalState: {
@@ -368,8 +367,9 @@ var clickUrl = function clickUrl(url, state) {
 
   if (url === void 0) {
     url = '';
-  } // 只读模式，设计模式，url为空，邮箱模版
+  }
 
+  console.log('clickUrl....', url); // 只读模式，设计模式，url为空，邮箱模版
 
   if (window.magicDesign.readOnly || window.magicDesign.mode !== 'renderer' || !url || window.magicDesign.outputType == 'html') {
     return;

package/lib/common/LinkModal/index.js

@@ -212,20 +212,6 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
   }
 };
 
-var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
-    s += arguments[i].length;
-  }
-
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
-    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
-      r[k] = a[j];
-    }
-  }
-
-  return r;
-};
-
 var LinkModal = function LinkModal(props) {
   var onConfirm = props.onConfirm,
       onClose = props.onClose,
@@ -250,7 +236,7 @@ var LinkModal = function LinkModal(props) {
 
   var getLinkTypes = function getLinkTypes() {
     return __awaiter(void 0, void 0, void 0, function () {
-      var types, type, defaultTypes;
+      var types, type;
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
@@ -273,13 +259,7 @@ var LinkModal = function LinkModal(props) {
               }
             }
 
-            defaultTypes = [{
-              "linkTypeName": "Picture",
-              "linkTypeCode": "Picture",
-              "seq": 100,
-              "comments": "Picture"
-            }];
-            setLinkTypes(__spreadArrays(types, defaultTypes));
+            setLinkTypes(types);
             setSelected(types[0].linkTypeCode);
             return [2
             /*return*/
@@ -388,7 +368,7 @@ var LinkModal = function LinkModal(props) {
         setLinkUrl(url);
         setTotal(t);
       }
-    }), item.linkTypeCode === 'Picture' && /*#__PURE__*/_react["default"].createElement(_SelectPicture["default"], {
+    }), item.linkTypeCode === 'ImageLibrary' && /*#__PURE__*/_react["default"].createElement(_SelectPicture["default"], {
       onChange: function onChange(value) {
         return setLinkUrl(value);
       }

package/lib/common/PictureModal/index.js

@@ -29,7 +29,7 @@ function PictureModal(_a) {
     draggable: false
   }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
     className: "closeIcon",
-    color: "#929292",
+    color: "#fff",
     onClick: onClose,
     size: 20,
     type: "icon-close"

package/lib/composite-comp/bol/components/Banner/pc/components/SwiperBannerPc.js

@@ -185,30 +185,36 @@ var SwiperBannerPc = function SwiperBannerPc(_a) {
     // 点击切换到对应轮播
     if (index !== currentIndex && slideCount > 1) {
       setCurrentIndex(index);
-      onIndexChange(index);
+      onIndexChange(index); // 点击非激活项时，立即暂停自动播放
+
+      setIsPaused(true);
     }
   };
 
   var handleMouseEnter = function handleMouseEnter(isActive) {
+    // 鼠标进入激活项时暂停自动播放
     if (isActive) {
       setIsPaused(true);
     }
-  };
+  }; // 容器级别的鼠标事件处理
 
-  var handleMouseLeave = function handleMouseLeave() {
+
+  var handleContainerMouseLeave = function handleContainerMouseLeave() {
+    // 鼠标离开整个容器时，恢复自动播放
     setIsPaused(false);
   };
 
   (0, _react.useEffect)(function () {
-    if (autoplay) {
-      setIsPaused(false);
-    } else {
+    // 如果 autoplay 关闭，强制暂停
+    // 如果 autoplay 开启，不强制恢复（保持用户交互的暂停状态）
+    if (!autoplay) {
       setIsPaused(true);
     }
   }, [autoplay]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: containerRef,
-    className: "swiper-main"
+    className: "swiper-main",
+    onMouseLeave: handleContainerMouseLeave
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "custom-carousel-wrapper"
   }, data.groupSource.map(function (item, index) {
@@ -222,7 +228,6 @@ var SwiperBannerPc = function SwiperBannerPc(_a) {
       onMouseEnter: function onMouseEnter() {
         return handleMouseEnter(isActive);
       },
-      onMouseLeave: handleMouseLeave,
       style: {
         width: slideWidth,
         marginRight: index < slideCount - 1 ? thumbGap + "px" : '0',

package/lib/composite-comp/bol/components/Banner/pc/index.less

@@ -124,9 +124,6 @@
     }
 
     .itemName {
-      position: absolute;
-      left: 0;
-      bottom: 0;
       z-index: 3;
       color: #fff;
       font-family: Outfit, Open Sans, sans-serif;
@@ -134,12 +131,15 @@
       font-style: normal;
       font-weight: 400;
       line-height: 22px;
-      position: absolute;
       text-shadow: 2px 2px 10px #000;
-      transform: rotate(-90deg) translate(50%);
       transition: all .3s ease;
       white-space: nowrap;
-      width: 100%;
+      position: absolute;
+      bottom: 16px;
+      transform: rotate(-90deg);
+      .meta_wrap {
+        width: fit-content!important;
+      }
     }
 
     .carouseContent {