Просмотр исходного кода

✨ feat(supply-chain): 新增供应链地图图标资源并优化组件结构

- 新增 BasePointIcon.svg 和 SupplyChainIcons.svg 图标资源文件
- 重构地图定位点组件,简化图标嵌套结构
- 移除冗余的连接线数据参数,优化组件接口
- 更新图例组件使用新的图标资源
- 改进图标显示效果,提升视觉一致性
yourname 2 месяцев назад
Родитель
Сommit
a24082453d

Разница между файлами не показана из-за своего большого размера
+ 12 - 0
public/supply-chain/BasePointIcon.svg


Разница между файлами не показана из-за своего большого размера
+ 33 - 0
public/supply-chain/SupplyChainIcons.svg


+ 9 - 39
src/client/home/pages/SupplyChainDashboards/components/SupplyChainMap.tsx

@@ -37,18 +37,11 @@ const BasePoint: React.FC<{
       }}
       }}
       onClick={() => onClick?.(point)}
       onClick={() => onClick?.(point)}
     >
     >
-      <div className="absolute inset-[12.5%_8.66%]">
+      <div className="absolute inset-0">
         <img
         <img
           alt="基地定位点"
           alt="基地定位点"
           className="block max-w-none size-full"
           className="block max-w-none size-full"
-          src="/supply-chain/group1597881805.svg"
-        />
-      </div>
-      <div className="absolute inset-[27.5%_23%] overflow-clip">
-        <img
-          alt="粮食图标"
-          className="block max-w-none size-full"
-          src="/supply-chain/img2.svg"
+          src="/supply-chain/BasePointIcon.svg"
         />
         />
       </div>
       </div>
       {point.name && (
       {point.name && (
@@ -76,18 +69,11 @@ const IndustryChainPoint: React.FC<{
       }}
       }}
       onClick={() => onClick?.(point)}
       onClick={() => onClick?.(point)}
     >
     >
-      <div className="absolute inset-[10%_13.79%]">
+      <div className="absolute inset-0">
         <img
         <img
           alt="产业链定位点"
           alt="产业链定位点"
           className="block max-w-none size-full"
           className="block max-w-none size-full"
-          src="/supply-chain/img.svg"
-        />
-      </div>
-      <div className="absolute bottom-[40.42%] left-1/4 overflow-clip right-1/4 shadow-[0px_0px_6px_0px_#4593ff] top-[17.92%]">
-        <img
-          alt="产业链图标"
-          className="block max-w-none size-full"
-          src="/supply-chain/img1.svg"
+          src="/supply-chain/SupplyChainIcons.svg"
         />
         />
       </div>
       </div>
       {point.name && (
       {point.name && (
@@ -101,10 +87,9 @@ const IndustryChainPoint: React.FC<{
 
 
 // 连接线组件
 // 连接线组件
 const ConnectionLine: React.FC<{
 const ConnectionLine: React.FC<{
-  line: ConnectionLine;
   fromPoint: LocationPoint;
   fromPoint: LocationPoint;
   toPoint: LocationPoint;
   toPoint: LocationPoint;
-}> = ({ line, fromPoint, toPoint }) => {
+}> = ({ fromPoint, toPoint }) => {
   // 计算连接线的位置和角度
   // 计算连接线的位置和角度
   const dx = toPoint.position.x - fromPoint.position.x;
   const dx = toPoint.position.x - fromPoint.position.x;
   const dy = toPoint.position.y - fromPoint.position.y;
   const dy = toPoint.position.y - fromPoint.position.y;
@@ -135,18 +120,11 @@ 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="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="h-[50px] relative shrink-0 w-[41.667px]">
-          <div className="absolute inset-[12.5%_8.66%]">
+          <div className="absolute inset-0">
             <img
             <img
               alt="基地图例"
               alt="基地图例"
               className="block max-w-none size-full"
               className="block max-w-none size-full"
-              src="/supply-chain/group1597881805.svg"
-            />
-          </div>
-          <div className="absolute inset-[27.5%_23%] overflow-clip">
-            <img
-              alt="粮食图标"
-              className="block max-w-none size-full"
-              src="/supply-chain/img2.svg"
+              src="/supply-chain/BasePointIcon.svg"
             />
             />
           </div>
           </div>
         </div>
         </div>
@@ -160,18 +138,11 @@ 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="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="h-[50px] relative shrink-0 w-[41.667px]">
-          <div className="absolute inset-[10%_13.79%]">
+          <div className="absolute inset-0">
             <img
             <img
               alt="产业链图例"
               alt="产业链图例"
               className="block max-w-none size-full"
               className="block max-w-none size-full"
-              src="/supply-chain/img.svg"
-            />
-          </div>
-          <div className="absolute bottom-[40.42%] left-1/4 overflow-clip right-1/4 shadow-[0px_0px_6px_0px_#4593ff] top-[17.92%]">
-            <img
-              alt="产业链图标"
-              className="block max-w-none size-full"
-              src="/supply-chain/img1.svg"
+              src="/supply-chain/SupplyChainIcons.svg"
             />
             />
           </div>
           </div>
         </div>
         </div>
@@ -187,7 +158,6 @@ const MapLegend: React.FC = () => {
 
 
 const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
 const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
   points = [],
   points = [],
-  connections = [],
   onPointClick
   onPointClick
 }) => {
 }) => {
   // 默认定位点数据
   // 默认定位点数据

Некоторые файлы не были показаны из-за большого количества измененных файлов