✨ feat(supply-chain): add arrow components for image navigation

- 创建LeftArrow和RightArrow组件，支持主题色定制和点击事件
- 优化MultipleImageDisplay组件，使用新箭头组件替代内联SVG代码
- 箭头组件包含渐变填充和描边效果，支持hover透明度变化动画

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

@@ -0,0 +1,92 @@
+import React from 'react';
+
+interface LeftArrowProps {
+  themeColor: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+const LeftArrow: React.FC<LeftArrowProps> = ({ themeColor, onClick, className = '' }) => {
+  return (
+    <button
+      className={`size-20 relative cursor-pointer hover:opacity-80 transition-opacity ${className}`}
+      onClick={onClick}
+    >
+      {/* 背景矩形 */}
+      <div className="left-0 top-0 absolute">
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 0V80H80V0H0Z"
+            fill="black"
+            fillOpacity="0.0117647"
+          />
+        </svg>
+      </div>
+
+      {/* 第一个三角形 */}
+      <div className="left-[15.47px] top-[16.70px] absolute">
+        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M22.8047 1.91602L19.9746 12.4355C17.9523 19.9527 17.9523 27.8715 19.9746 35.3887L22.8047 45.9092L0.808594 23.9121L22.8047 1.91602Z"
+            fill={`url(#paint0_linear_left_arrow)`}
+            stroke={`url(#paint1_linear_left_arrow)`}
+            strokeWidth="1.14286"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_left_arrow"
+              x1="15.4722"
+              y1="64.528"
+              x2="39.3844"
+              y2="64.528"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor={themeColor} />
+              <stop offset="1" stopColor="#7C5101" />
+            </linearGradient>
+            <linearGradient
+              id="paint1_linear_left_arrow"
+              x1="15.4722"
+              y1="64.528"
+              x2="39.3844"
+              y2="64.528"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor={themeColor} />
+              <stop offset="1" stopColor="#7C5101" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+
+      {/* 第二个三角形 */}
+      <div className="left-[39.38px] top-[16.70px] absolute">
+        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M22.8047 1.91602L19.9746 12.4355C17.9523 19.9527 17.9523 27.8715 19.9746 35.3887L22.8047 45.9092L0.808594 23.9121L22.8047 1.91602Z"
+            fill={themeColor}
+            stroke={`url(#paint2_linear_left_arrow)`}
+            strokeWidth="1.14286"
+          />
+          <defs>
+            <linearGradient
+              id="paint2_linear_left_arrow"
+              x1="39.3843"
+              y1="64.528"
+              x2="63.2965"
+              y2="64.528"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor={themeColor} />
+              <stop offset="1" stopColor="#7C5101" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </button>
+  );
+};
+
+export default LeftArrow;

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

@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import LeftArrow from './LeftArrow';
+import RightArrow from './RightArrow';
 
 interface MultipleImageDisplayProps {
   imageUrls: string[];
@@ -37,82 +39,16 @@ const MultipleImageDisplay: React.FC<MultipleImageDisplayProps> = ({ imageUrls,
         className="absolute w-[1510px] left-1/2 top-[545.72px] transform -translate-x-1/2 inline-flex justify-between items-center"
       >
         {/* 左箭头 */}
-        <button
-          data-layer="原创-箭头right"
-          className="size-20 relative origin-top-left rotate-180 cursor-pointer hover:opacity-80 transition-opacity"
+        <LeftArrow
+          themeColor={themeColor}
           onClick={handlePrev}
-        >
-          <div data-svg-wrapper data-layer="矩形" className="left-0 top-0 absolute">
-            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fillRule="evenodd" clipRule="evenodd" d="M0 0V80H80V0H0Z" fill="black" fillOpacity="0.0117647" />
-            </svg>
-          </div>
-          <div data-svg-wrapper data-layer="三角形" className="left-[15.47px] top-[16.70px] absolute">
-            <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M22.8047 1.91602L19.9746 12.4355C17.9523 19.9527 17.9523 27.8715 19.9746 35.3887L22.8047 45.9092L0.808594 23.9121L22.8047 1.91602Z" fill="url(#paint0_linear_2124_5652)" stroke="url(#paint1_linear_2124_5652)" strokeWidth="1.14286" />
-              <defs>
-                <linearGradient id="paint0_linear_2124_5652" x1="0" y1="47.8244" x2="23.9123" y2="47.8244" gradientUnits="userSpaceOnUse">
-                  <stop stopColor={themeColor} />
-                  <stop offset="1" stopColor="#7C5101" />
-                </linearGradient>
-                <linearGradient id="paint1_linear_2124_5652" x1="0" y1="47.8244" x2="23.9123" y2="47.8244" gradientUnits="userSpaceOnUse">
-                  <stop stopColor={themeColor} />
-                  <stop offset="1" stopColor="#7C5101" />
-                </linearGradient>
-              </defs>
-            </svg>
-          </div>
-          <div data-svg-wrapper data-layer="三角形" className="left-[39.38px] top-[16.70px] absolute">
-            <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M22.8047 1.91602L19.9746 12.4355C17.9523 19.9527 17.9523 27.8715 19.9746 35.3887L22.8047 45.9092L0.808594 23.9121L22.8047 1.91602Z" fill={themeColor} stroke="url(#paint0_linear_2124_5653)" strokeWidth="1.14286" />
-              <defs>
-                <linearGradient id="paint0_linear_2124_5653" x1="0" y1="47.8244" x2="23.9123" y2="47.8244" gradientUnits="userSpaceOnUse">
-                  <stop stopColor={themeColor} />
-                  <stop offset="1" stopColor="#7C5101" />
-                </linearGradient>
-              </defs>
-            </svg>
-          </div>
-        </button>
+        />
 
         {/* 右箭头 */}
-        <button
-          data-layer="原创-箭头right"
-          className="size-20 relative cursor-pointer hover:opacity-80 transition-opacity"
+        <RightArrow
+          themeColor={themeColor}
           onClick={handleNext}
-        >
-          <div data-svg-wrapper data-layer="矩形" className="left-0 top-0 absolute">
-            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fillRule="evenodd" clipRule="evenodd" d="M80 0V80H0V0H80Z" fill="black" fillOpacity="0.0117647" />
-            </svg>
-          </div>
-          <div data-svg-wrapper data-layer="三角形" className="left-[40.62px] top-[16.70px] absolute">
-            <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z" fill="url(#paint0_linear_2124_5656)" stroke="url(#paint1_linear_2124_5656)" strokeWidth="1.14286" />
-              <defs>
-                <linearGradient id="paint0_linear_2124_5656" x1="23.9121" y1="47.8244" x2="-0.000147684" y2="47.8244" gradientUnits="userSpaceOnUse">
-                  <stop stopColor={themeColor} />
-                  <stop offset="1" stopColor="#7C5101" />
-                </linearGradient>
-                <linearGradient id="paint1_linear_2124_5656" x1="23.9121" y1="47.8244" x2="-0.000147684" y2="47.8244" gradientUnits="userSpaceOnUse">
-                  <stop stopColor={themeColor} />
-                  <stop offset="1" stopColor="#7C5101" />
-                </linearGradient>
-              </defs>
-            </svg>
-          </div>
-          <div data-svg-wrapper data-layer="三角形" className="left-[16.70px] top-[16.70px] absolute">
-            <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z" fill={themeColor} stroke="url(#paint0_linear_2124_5657)" strokeWidth="1.14286" />
-              <defs>
-                <linearGradient id="paint0_linear_2124_5657" x1="23.9121" y1="47.8244" x2="-0.000145777" y2="47.8244" gradientUnits="userSpaceOnUse">
-                  <stop stopColor={themeColor} />
-                  <stop offset="1" stopColor="#7C5101" />
-                </linearGradient>
-              </defs>
-            </svg>
-          </div>
-        </button>
+        />
       </div>
 
       {/* 图片指示器 */}

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

@@ -0,0 +1,92 @@
+import React from 'react';
+
+interface RightArrowProps {
+  themeColor: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+const RightArrow: React.FC<RightArrowProps> = ({ themeColor, onClick, className = '' }) => {
+  return (
+    <button
+      className={`size-20 relative cursor-pointer hover:opacity-80 transition-opacity ${className}`}
+      onClick={onClick}
+    >
+      {/* 背景矩形 */}
+      <div className="left-0 top-0 absolute">
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M80 0V80H0V0H80Z"
+            fill="black"
+            fillOpacity="0.0117647"
+          />
+        </svg>
+      </div>
+
+      {/* 第一个三角形 */}
+      <div className="left-[40.62px] top-[16.70px] absolute">
+        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z"
+            fill={`url(#paint0_linear_right_arrow)`}
+            stroke={`url(#paint1_linear_right_arrow)`}
+            strokeWidth="1.14286"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_right_arrow"
+              x1="23.9121"
+              y1="47.8244"
+              x2="-0.000147684"
+              y2="47.8244"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor={themeColor} />
+              <stop offset="1" stopColor="#7C5101" />
+            </linearGradient>
+            <linearGradient
+              id="paint1_linear_right_arrow"
+              x1="23.9121"
+              y1="47.8244"
+              x2="-0.000147684"
+              y2="47.8244"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor={themeColor} />
+              <stop offset="1" stopColor="#7C5101" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+
+      {/* 第二个三角形 */}
+      <div className="left-[16.70px] top-[16.70px] absolute">
+        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z"
+            fill={themeColor}
+            stroke={`url(#paint0_linear_right_arrow2)`}
+            strokeWidth="1.14286"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_right_arrow2"
+              x1="23.9121"
+              y1="47.8244"
+              x2="-0.000145777"
+              y2="47.8244"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor={themeColor} />
+              <stop offset="1" stopColor="#7C5101" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </button>
+  );
+};
+
+export default RightArrow;