✨ feat(icons): add SupplyChainNetwork SVG icon component

- 新增供应链网络图标组件，支持自定义类名、颜色和尺寸
- 提供完整的SVG路径和渐变填充效果
- 支持白色描边和蓝色渐变填充样式

scripts/convert-svgs.sh

@@ -7,13 +7,13 @@ OUTPUT_DIR="src/client/home/pages/SupplyChainDashboards/components/icons"
 
 # 需要转换的SVG文件列表
 SVG_FILES=(
-  "union.svg"
-  "img5.svg"
-  "SupplyChainIcons.svg"
-  "BasePointIcon.svg"
-  "img7.svg"
+  # "union.svg"
+  # "img5.svg"
+  # "SupplyChainIcons.svg"
+  # "BasePointIcon.svg"
+  # "img7.svg"
+  # "PopupInfoBox.svg"
   "SupplyChainNetwork.svg"
-  "PopupInfoBox.svg"
 )
 
 # 确保输出目录存在

src/client/home/pages/SupplyChainDashboards/components/MultipleImageDisplay.tsx

@@ -19,17 +19,48 @@ const MultipleImageDisplay: React.FC<MultipleImageDisplayProps> = ({ imageUrls,
     setCurrentIndex(prev => (prev === imageUrls.length - 1 ? 0 : prev + 1));
   };
 
+  // 计算显示的图片索引
+  const getDisplayImages = () => {
+    const prevIndex = currentIndex === 0 ? imageUrls.length - 1 : currentIndex - 1;
+    const nextIndex = currentIndex === imageUrls.length - 1 ? 0 : currentIndex + 1;
+
+    return [
+      { index: prevIndex, isActive: false, position: 'left' },
+      { index: currentIndex, isActive: true, position: 'center' },
+      { index: nextIndex, isActive: false, position: 'right' }
+    ];
+  };
+
+  const displayImages = getDisplayImages();
+
   return (
     <>
-      {/* 图片展示区域 */}
+      {/* 图片展示区域 - 三图布局 */}
       <div className="flex items-center justify-center h-full">
-        <div className="h-[640px] overflow-clip relative rounded-[10px] w-[940px]">
-          <img
-            data-layer={`${title} ${currentIndex + 1}`}
-            className="w-full h-full object-cover"
-            src={imageUrls[currentIndex]}
-            alt={`${title} ${currentIndex + 1}`}
-          />
+        <div className="w-[1357px] h-[640px] relative rounded-[20px] overflow-hidden">
+          <div className="absolute left-[1058px] top-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex justify-start items-center gap-5">
+            {displayImages.map(({ index, isActive, position }) => (
+              <div
+                key={index}
+                className={`relative rounded-[10px] overflow-hidden transition-all duration-300 ${
+                  isActive
+                    ? 'w-[940px] h-[600px] z-10'
+                    : position === 'left'
+                      ? 'w-[300px] h-[400px] -ml-[751px] opacity-70'
+                      : 'w-[300px] h-[400px] opacity-70'
+                }`}
+              >
+                <img
+                  data-layer={`${title} ${index + 1}`}
+                  className={`w-full h-full object-cover ${
+                    !isActive && position === 'left' ? 'scale-110' : ''
+                  }`}
+                  src={imageUrls[index]}
+                  alt={`${title} ${index + 1}`}
+                />
+              </div>
+            ))}
+          </div>
         </div>
       </div>
 
@@ -50,18 +81,6 @@ const MultipleImageDisplay: React.FC<MultipleImageDisplayProps> = ({ imageUrls,
           onClick={handleNext}
         />
       </div>
-
-      {/* 图片指示器 */}
-      <div className="absolute bottom-[-30px] left-1/2 transform -translate-x-1/2 flex gap-2">
-        {imageUrls.map((_, index) => (
-          <div
-            key={index}
-            className={`w-2 h-2 rounded-full transition-all duration-200 ${
-              index === currentIndex ? 'bg-white' : 'bg-white/30'
-            }`}
-          />
-        ))}
-      </div>
     </>
   );
 };