@fonixtree/magic-design 1.0.221 → 1.0.223

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

@@ -53,7 +53,7 @@
       }
 
       &.active {
-        border-radius: 20px;
+        border-radius: 0;
       }
     }
   }

package/es/composite-comp/common/components/ProductItem/index.less

@@ -101,7 +101,7 @@
 
       .old-price-wrap {
         display: flex;
-        line-height: 13px;
+        line-height: 15px;
 
         .discount {
           margin-right: 3px;

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

@@ -5,7 +5,6 @@
 
   &.less-than-4 {
     .image-list-wrapper {
-      padding-left: 0!important;
       .image-list {
         width: fit-content;
         margin: 0 auto;
@@ -17,7 +16,6 @@
     display: flex;
     align-items: center;
     gap: 16px;
-    background: #ffffff;
     // overflow: auto;
     position: relative;
     width: fit-content;
@@ -48,7 +46,6 @@
     }
 
     .image-list-wrapper {
-      padding-left: 88px;
       position: relative;
 
       .image-list {
@@ -60,20 +57,15 @@
         flex: 1;
         scroll-behavior: smooth;
         -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
 
         &::-webkit-scrollbar {
           display: none;
         }
 
-        scrollbar-width: none;
-
         .image-item {
           flex-shrink: 0;
           width: 300px;
-
-          &:last-child {
-            margin-right: 40px;
-          }
         }
 
         .empty-placeholder {

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

@@ -16,8 +16,7 @@
   .recommend-tab-select-wrap {
     display: flex;
     align-items: center;
-    height: 50px;
-    background: rgb(255 255 255);
+    // height: 50px;
     // overflow: auto;
     position: relative;
     width: fit-content;
@@ -97,6 +96,10 @@
     margin: 0;
   }
 
+  .scrollContainer::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+
   .scrollContainer {
     display: flex;
     flex-direction: row;
@@ -104,6 +107,8 @@
     flex: 1;
     margin: 0;
     overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 和 Edge */
     padding-bottom: 15px;
 
     &.pl_100 {

package/es/core/Renderer/index.js

@@ -102,6 +102,17 @@ var Renderer = function Renderer(props) {
       toastState = _e[0],
       setToastState = _e[1];
 
+  var timerRef = (0, _react.useRef)(null);
+  var isMountedRef = (0, _react.useRef)(true); // 使用 useMemo 来稳定 pageData 的引用，避免不必要的重新渲染
+
+  var pageDataKey = (0, _react.useMemo)(function () {
+    if (!pageData || !pageData.childNodes) return ''; // 创建一个稳定的标识符，基于 childNodes 的内容
+
+    return pageData.childNodes.map(function (node) {
+      return node.id + "-" + node.type;
+    }).join(',');
+  }, [pageData]);
+
   if (!noSetWindow) {
     setDesignConfig(props);
   }
@@ -109,11 +120,21 @@ var Renderer = function Renderer(props) {
   window.magicDesignPageData = pageData;
   var pageBackground = window.magicDesign.pageBackground;
   (0, _react.useEffect)(function () {
-    console.log('----pageData change', pageData);
+    isMountedRef.current = true; // 清除之前的定时器
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+
     var filterData = [];
 
     if (pageData && pageData.childNodes && pageData.childNodes.length) {
-      var graduallySetFloors = function graduallySetFloors(data, step, interval, start) {
+      filterData = pageData.childNodes.filter(function (node) {
+        return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
+      });
+
+      var graduallySetFloors_1 = function graduallySetFloors_1(data, step, interval, start) {
         if (step === void 0) {
           step = 5;
         }
@@ -124,6 +145,11 @@ var Renderer = function Renderer(props) {
 
         if (start === void 0) {
           start = 0;
+        } // 检查组件是否仍然挂载
+
+
+        if (!isMountedRef.current) {
+          return;
         } // 计算这一步应该显示的最终索引
 
 
@@ -132,18 +158,29 @@ var Renderer = function Renderer(props) {
         setFloors(data.slice(0, end)); // 如果还有更多楼层要显示，设置一个定时器来递归调用此函数
 
         if (end < data.length) {
-          setTimeout(function () {
-            graduallySetFloors(data, step, interval, end);
+          timerRef.current = setTimeout(function () {
+            graduallySetFloors_1(data, step, interval, end);
           }, interval);
+        } else {
+          timerRef.current = null;
         }
       };
 
-      filterData = pageData.childNodes.filter(function (node) {
-        return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
-      });
-      graduallySetFloors(filterData);
-    }
-  }, [pageData]);
+      graduallySetFloors_1(filterData);
+    } else {
+      setFloors([]);
+    } // 清理函数：清除所有未完成的定时器
+
+
+    return function () {
+      isMountedRef.current = false;
+
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [pageDataKey]);
   (0, _react.useEffect)(function () {
     setTimeout(function () {
       var _a;
@@ -238,13 +275,17 @@ var Renderer = function Renderer(props) {
       console.error("[MagicBox] Can not find type " + nodeData.type);
       return;
     }
-    /** 添加模块需要 给GA使用 */
 
+    console.log('----nodeData', nodeData, moduleIndex);
+    /** 添加模块需要 给GA使用 */
+    // 避免直接修改原始 nodeData，创建新对象
 
-    nodeData.moduleIndex = moduleIndex + 1;
+    var nodeDataWithIndex = __assign(__assign({}, nodeData), {
+      moduleIndex: moduleIndex + 1
+    });
 
-    var newInstanceProps = __assign(__assign({}, nodeData), {
-      nodeData: nodeData,
+    var newInstanceProps = __assign(__assign({}, nodeDataWithIndex), {
+      nodeData: nodeDataWithIndex,
       mode: 'renderer',
       outputType: outputType
     });

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

@@ -53,7 +53,7 @@
       }
 
       &.active {
-        border-radius: 20px;
+        border-radius: 0;
       }
     }
   }

package/lib/composite-comp/common/components/ProductItem/index.less

@@ -101,7 +101,7 @@
 
       .old-price-wrap {
         display: flex;
-        line-height: 13px;
+        line-height: 15px;
 
         .discount {
           margin-right: 3px;

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

@@ -5,7 +5,6 @@
 
   &.less-than-4 {
     .image-list-wrapper {
-      padding-left: 0!important;
       .image-list {
         width: fit-content;
         margin: 0 auto;
@@ -17,7 +16,6 @@
     display: flex;
     align-items: center;
     gap: 16px;
-    background: #ffffff;
     // overflow: auto;
     position: relative;
     width: fit-content;
@@ -48,7 +46,6 @@
     }
 
     .image-list-wrapper {
-      padding-left: 88px;
       position: relative;
 
       .image-list {
@@ -60,20 +57,15 @@
         flex: 1;
         scroll-behavior: smooth;
         -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
 
         &::-webkit-scrollbar {
           display: none;
         }
 
-        scrollbar-width: none;
-
         .image-item {
           flex-shrink: 0;
           width: 300px;
-
-          &:last-child {
-            margin-right: 40px;
-          }
         }
 
         .empty-placeholder {

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

@@ -16,8 +16,7 @@
   .recommend-tab-select-wrap {
     display: flex;
     align-items: center;
-    height: 50px;
-    background: rgb(255 255 255);
+    // height: 50px;
     // overflow: auto;
     position: relative;
     width: fit-content;
@@ -97,6 +96,10 @@
     margin: 0;
   }
 
+  .scrollContainer::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+
   .scrollContainer {
     display: flex;
     flex-direction: row;
@@ -104,6 +107,8 @@
     flex: 1;
     margin: 0;
     overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 和 Edge */
     padding-bottom: 15px;
 
     &.pl_100 {

package/lib/core/Renderer/index.js

@@ -102,6 +102,17 @@ var Renderer = function Renderer(props) {
       toastState = _e[0],
       setToastState = _e[1];
 
+  var timerRef = (0, _react.useRef)(null);
+  var isMountedRef = (0, _react.useRef)(true); // 使用 useMemo 来稳定 pageData 的引用，避免不必要的重新渲染
+
+  var pageDataKey = (0, _react.useMemo)(function () {
+    if (!pageData || !pageData.childNodes) return ''; // 创建一个稳定的标识符，基于 childNodes 的内容
+
+    return pageData.childNodes.map(function (node) {
+      return node.id + "-" + node.type;
+    }).join(',');
+  }, [pageData]);
+
   if (!noSetWindow) {
     setDesignConfig(props);
   }
@@ -109,11 +120,21 @@ var Renderer = function Renderer(props) {
   window.magicDesignPageData = pageData;
   var pageBackground = window.magicDesign.pageBackground;
   (0, _react.useEffect)(function () {
-    console.log('----pageData change', pageData);
+    isMountedRef.current = true; // 清除之前的定时器
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+
     var filterData = [];
 
     if (pageData && pageData.childNodes && pageData.childNodes.length) {
-      var graduallySetFloors = function graduallySetFloors(data, step, interval, start) {
+      filterData = pageData.childNodes.filter(function (node) {
+        return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
+      });
+
+      var graduallySetFloors_1 = function graduallySetFloors_1(data, step, interval, start) {
         if (step === void 0) {
           step = 5;
         }
@@ -124,6 +145,11 @@ var Renderer = function Renderer(props) {
 
         if (start === void 0) {
           start = 0;
+        } // 检查组件是否仍然挂载
+
+
+        if (!isMountedRef.current) {
+          return;
         } // 计算这一步应该显示的最终索引
 
 
@@ -132,18 +158,29 @@ var Renderer = function Renderer(props) {
         setFloors(data.slice(0, end)); // 如果还有更多楼层要显示，设置一个定时器来递归调用此函数
 
         if (end < data.length) {
-          setTimeout(function () {
-            graduallySetFloors(data, step, interval, end);
+          timerRef.current = setTimeout(function () {
+            graduallySetFloors_1(data, step, interval, end);
           }, interval);
+        } else {
+          timerRef.current = null;
         }
       };
 
-      filterData = pageData.childNodes.filter(function (node) {
-        return (0, _coreUtil.isActiveFloor)(node.activeTerminal);
-      });
-      graduallySetFloors(filterData);
-    }
-  }, [pageData]);
+      graduallySetFloors_1(filterData);
+    } else {
+      setFloors([]);
+    } // 清理函数：清除所有未完成的定时器
+
+
+    return function () {
+      isMountedRef.current = false;
+
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [pageDataKey]);
   (0, _react.useEffect)(function () {
     setTimeout(function () {
       var _a;
@@ -238,13 +275,17 @@ var Renderer = function Renderer(props) {
       console.error("[MagicBox] Can not find type " + nodeData.type);
       return;
     }
-    /** 添加模块需要 给GA使用 */
 
+    console.log('----nodeData', nodeData, moduleIndex);
+    /** 添加模块需要 给GA使用 */
+    // 避免直接修改原始 nodeData，创建新对象
 
-    nodeData.moduleIndex = moduleIndex + 1;
+    var nodeDataWithIndex = __assign(__assign({}, nodeData), {
+      moduleIndex: moduleIndex + 1
+    });
 
-    var newInstanceProps = __assign(__assign({}, nodeData), {
-      nodeData: nodeData,
+    var newInstanceProps = __assign(__assign({}, nodeDataWithIndex), {
+      nodeData: nodeDataWithIndex,
       mode: 'renderer',
       outputType: outputType
     });

package/package.json

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