✨ feat(supply-chain): 添加新的SVG图标并优化引用方式

- 添加三个新的SVG图标文件: img7.svg, SupplyChainNetwork.svg和PopupInfoBox.svg
- 创建PopupInfoBox图标组件并应用于PopupInfoBox.tsx
- 将BasePointIcon和SupplyChainIcons从img标签引用改为组件引用
- 在SupplyChainMap.tsx中统一优化所有图标引用方式
- 导入新图标组件: Img7和SupplyChainNetwork

♻️ refactor(svg): 优化SVG图标使用方式

- 替换多处img标签为组件化SVG引用
- 移除硬编码的SVG文件路径
- 统一图标组件使用方式，增强可维护性
- 优化MapLegend组件中的图标引用实现

scripts/convert-svgs.sh

@@ -11,6 +11,9 @@ SVG_FILES=(
   "img5.svg"
   "SupplyChainIcons.svg"
   "BasePointIcon.svg"
+  "img7.svg"
+  "SupplyChainNetwork.svg"
+  "PopupInfoBox.svg"
 )
 
 # 确保输出目录存在

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IndustryType } from './icons/IndustryIcon';
+import PopupInfoBoxIcon from './icons/PopupInfoBox';
 
 // 定义弹出框数据类型
 interface PopupData {
@@ -65,11 +66,7 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
       <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"
-          />
+          <PopupInfoBoxIcon className="size-full" />
         </div>
 
         {/* 内容区域 */}

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

@@ -1,4 +1,8 @@
 import React from 'react';
+import BasePointIcon from './icons/BasePointIcon';
+import SupplyChainIcons from './icons/SupplyChainIcons';
+import Img7 from './icons/Img7';
+import SupplyChainNetwork from './icons/SupplyChainNetwork';
 
 // 定义定位点类型
 interface LocationPoint {
@@ -38,11 +42,7 @@ const BasePoint: React.FC<{
       onClick={() => onClick?.(point)}
     >
       <div className="absolute inset-0">
-        <img
-          alt="基地定位点"
-          className="block max-w-none size-full"
-          src="/supply-chain/BasePointIcon.svg"
-        />
+        <BasePointIcon className="size-full" />
       </div>
       {point.name && (
         <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-sm font-bold whitespace-nowrap">
@@ -70,11 +70,7 @@ const IndustryChainPoint: React.FC<{
       onClick={() => onClick?.(point)}
     >
       <div className="absolute inset-0">
-        <img
-          alt="产业链定位点"
-          className="block max-w-none size-full"
-          src="/supply-chain/SupplyChainIcons.svg"
-        />
+        <SupplyChainIcons className="size-full" />
       </div>
       {point.name && (
         <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-sm font-bold whitespace-nowrap">
@@ -121,11 +117,7 @@ const MapLegend: React.FC = () => {
       <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
         <div className="h-[50px] relative shrink-0 w-[41.667px]">
           <div className="absolute inset-0">
-            <img
-              alt="基地图例"
-              className="block max-w-none size-full"
-              src="/supply-chain/BasePointIcon.svg"
-            />
+            <BasePointIcon className="size-full" />
           </div>
         </div>
         <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
@@ -139,11 +131,7 @@ const MapLegend: React.FC = () => {
       <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]">
         <div className="h-[50px] relative shrink-0 w-[41.667px]">
           <div className="absolute inset-0">
-            <img
-              alt="产业链图例"
-              className="block max-w-none size-full"
-              src="/supply-chain/SupplyChainIcons.svg"
-            />
+            <SupplyChainIcons className="size-full" />
           </div>
         </div>
         <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface PopupInfoBoxProps {
+  className?: string;
+  fill?: string;
+  stroke?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
+  className = "",
+  fill = "currentColor",
+  stroke = "currentColor",
+  width,
+  height
+}) => {
+  return (
+    <svg height="320" width="573" fill="none" viewBox="0 0 573 320" xmlns="http://www.w3.org/2000/svg">
+	<g clipPath="url(#clip0_2019_16940)">
+		<path d="M556 310.5H476" stroke="#C5FF92" strokeLinecap="square" strokeWidth="2"/>
+		<path 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" fillRule="evenodd"/>
+		<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" fillOpacity="0.5" stroke="#C5FF92" strokeWidth="1.2"/>
+		<path d="M455.724 320L475.912 297.143L476 320H455.724Z" fill="#C5FF92" fillRule="evenodd"/>
+		<path d="M475.276 7.8291V0.713871H469.196" stroke="#C5FF92" strokeLinecap="square" strokeWidth="1.8"/>
+		<path d="M0.484528 7.8291V0.713871H6.56445" stroke="#C5FF92" strokeLinecap="square" strokeWidth="1.8"/>
+		<path d="M208.979 319.286L182.08 318.929L158.835 299.286H138.571" stroke="#C5FF92" strokeLinecap="square" strokeWidth="1.8"/>
+	</g>
+	<defs>
+		<clipPath id="clip0_2019_16940">
+			<rect height="320" width="573" fill="white" transform="matrix(-1 0 0 -1 573 320)"/>
+		</clipPath>
+	</defs>
+</svg>
+  );
+};
+
+export default PopupInfoBox;