@fonixtree/magic-design 1.0.219 → 1.0.221

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "1.0.219",
+  "version": "1.0.221",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",