✨ feat(supply-chain): 优化弹出信息框UI设计

- 添加新的SVG背景图PopupInfoBox.svg，提升视觉效果
- 调整弹出框尺寸为573px×320px，优化空间利用率
- 优化弹出框位置坐标为(650, 250)，改善显示位置
- 重构信息框布局结构，增强视觉层次感和信息展示效果

public/supply-chain/PopupInfoBox.svg

@@ -0,0 +1,17 @@
+<svg width="573" height="320" viewBox="0 0 573 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2019_16940)">
+<path d="M556 310.5H476" stroke="#C5FF92" stroke-width="2" stroke-linecap="square"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M570.807 311.5C570.807 308.017 567.983 305.193 564.5 305.193C561.017 305.193 558.194 308.017 558.194 311.5C558.194 314.983 561.017 317.806 564.5 317.806C567.983 317.806 570.807 314.983 570.807 311.5Z" fill="#C5FF92"/>
+<path d="M572.5 311.5C572.5 307.082 568.918 303.5 564.5 303.5C560.082 303.5 556.5 307.082 556.5 311.5C556.5 315.918 560.082 319.5 564.5 319.5C568.918 319.5 572.5 315.918 572.5 311.5Z" stroke="#C5FF92"/>
+<path d="M182.063 319.4L158.623 299.542L158.456 299.4H0.600098V0.600342H133.606L154.875 12.1892L155.009 12.2625H337.834L337.968 12.1902L359.41 0.600342H475.304V289.936L449.445 319.4H182.063Z" fill="#231F20" fill-opacity="0.5" stroke="#C5FF92" stroke-width="1.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M455.724 320L475.912 297.143L476 320H455.724Z" fill="#C5FF92"/>
+<path d="M475.276 7.8291V0.713871H469.196" stroke="#C5FF92" stroke-width="1.8" stroke-linecap="square"/>
+<path d="M0.484528 7.8291V0.713871H6.56445" stroke="#C5FF92" stroke-width="1.8" stroke-linecap="square"/>
+<path d="M208.979 319.286L182.08 318.929L158.835 299.286H138.571" stroke="#C5FF92" stroke-width="1.8" stroke-linecap="square"/>
+</g>
+<defs>
+<clipPath id="clip0_2019_16940">
+<rect width="573" height="320" fill="white" transform="matrix(-1 0 0 -1 573 320)"/>
+</clipPath>
+</defs>
+</svg>

src/client/home/pages/SupplyChainDashboards/GrainOilDashboard.tsx

@@ -35,7 +35,7 @@ const GrainOilDashboard: React.FC<GrainOilDashboardProps> = () => {
   const [activeTab, setActiveTab] = useState<IndustryType>('粮食');
   const [popupState, setPopupState] = useState<PopupState>({
     isVisible: false,
-    position: { x: 717.28, y: 273.13 }
+    position: { x: 650, y: 250 }
   });
 
   // 处理定位点点击
@@ -66,7 +66,7 @@ const GrainOilDashboard: React.FC<GrainOilDashboardProps> = () => {
 
     setPopupState({
       isVisible: true,
-      position: { x: 717.28, y: 273.13 },
+      position: { x: 650, y: 250 },
       data: popupData
     });
   };

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

@@ -39,87 +39,57 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
       style={{
         left: `${position.x}px`,
         top: `${position.y}px`,
-        width: '580px',
-        height: '351px'
+        width: '573px',
+        height: '320px'
       }}
     >
-      {/* 箭头指示器 */}
-      <div className="absolute flex items-center justify-center left-0 top-0">
-        <div className="flex-none rotate-[180deg]">
-          <div className="content-stretch flex items-start overflow-clip relative">
-            {/* 箭头装饰 */}
-            <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center leading-[0] relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]">
-              <div className="flex-none rotate-[90deg] scale-y-[-100%]">
-                <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start relative">
-                  <div className="col-[1] h-[80px] ml-[7.5px] mt-[17px] relative row-[1] w-[2px]">
-                    <div className="absolute bottom-[-1.25%] left-0 right-[-50%] top-[-1.25%]">
-                      <img
-                        alt="箭头装饰"
-                        className="block max-w-none size-full"
-                        src="/supply-chain/ArrowDecoration.svg"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-[1] ml-0 mt-0 relative row-[1] size-[17px]">
-                    <img
-                      alt="圆圈装饰"
-                      className="block max-w-none size-full"
-                      src="/supply-chain/CircleDecoration.svg"
-                    />
-                  </div>
-                </div>
+
+      {/* 弹出框主体 */}
+      <div className="h-[320px] relative shrink-0 w-[573px]">
+        {/* 边框背景 */}
+        <div className="absolute inset-0">
+          <img
+            alt="弹出框边框"
+            className="block max-w-none size-full"
+            src="/supply-chain/PopupInfoBox.svg"
+          />
+        </div>
+
+        {/* 内容区域 */}
+        <div className="absolute content-stretch flex flex-col gap-[12px] items-center left-[50px] top-[31.73px] w-[470px]">
+          {/* 标题区域 */}
+          <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
+            <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0">
+              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+                <p className="leading-[32px]">{displayData.title}</p>
               </div>
             </div>
-
-            {/* 弹出框主体 */}
-            <div className="h-[320px] relative shrink-0 w-[476px]">
-              {/* 边框背景 */}
-              <div className="absolute inset-[-0.06%_-0.09%_-0.06%_-0.04%]">
-                <img
-                  alt="弹出框边框"
-                  className="block max-w-none size-full"
-                  src="/supply-chain/PopupBorder.svg"
-                />
+            <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0 w-full">
+              <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+                <p className="leading-[32px]">详细信息</p>
               </div>
+            </div>
+          </div>
 
-              {/* 内容区域 */}
-              <div className="absolute content-stretch flex flex-col gap-[12px] items-center left-[29.81px] top-[31.73px] w-[420px]">
-                {/* 标题区域 */}
-                <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
-                  <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0">
-                    <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
-                      <p className="leading-[32px]">{displayData.title}</p>
-                    </div>
-                  </div>
-                  <div className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0 w-full">
-                    <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
-                      <p className="leading-[32px]">详细信息</p>
-                    </div>
+          {/* 数据指标区域 */}
+          <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
+            <div className="content-stretch flex gap-[20px] items-start relative shrink-0">
+              {displayData.metrics.slice(0, 3).map((metric, index) => (
+                <div key={index} className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                  <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
+                    <p className="leading-[32px]">{metric.label}</p>
                   </div>
                 </div>
-
-                {/* 数据指标区域 */}
-                <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-full">
-                  <div className="content-stretch flex gap-[20px] items-start relative shrink-0">
-                    {displayData.metrics.slice(0, 3).map((metric, index) => (
-                      <div key={index} className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
-                        <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap">
-                          <p className="leading-[32px]">{metric.label}</p>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="content-stretch flex gap-[20px] items-start relative shrink-0">
-                    {displayData.metrics.slice(0, 3).map((metric, index) => (
-                      <div key={index} className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
-                        <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[#C5FF92] whitespace-nowrap">
-                          <p className="leading-[32px]">{metric.value} {metric.unit}</p>
-                        </div>
-                      </div>
-                    ))}
+              ))}
+            </div>
+            <div className="content-stretch flex gap-[20px] items-start relative shrink-0">
+              {displayData.metrics.slice(0, 3).map((metric, index) => (
+                <div key={index} className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
+                  <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[#C5FF92] whitespace-nowrap">
+                    <p className="leading-[32px]">{metric.value} {metric.unit}</p>
                   </div>
                 </div>
-              </div>
+              ))}
             </div>
           </div>
         </div>