Selaa lähdekoodia

✨ feat(dashboard): 优化供应链地图弹窗款式选择逻辑

- 将PopupInfoBox组件的pointIndex属性替换为industry属性,用于确定弹窗款式
- 实现根据产业类型自动选择弹窗款式的逻辑:每组大屏的第一个产业使用第一款,第二个产业使用第二款
- 调整第二款弹窗的定位偏移值,优化显示位置

♻️ refactor(map): 重构供应链地图点击事件处理

- 提取handlePointClick函数统一处理定位点点击事件
- 修改BasePoint和IndustryChainPoint组件的onClick事件绑定方式,使用箭头函数传递参数
yourname 2 kuukautta sitten
vanhempi
sitoutus
e9fe72f2cd

+ 15 - 6
src/client/home/pages/SupplyChainDashboards/components/PopupInfoBox.tsx

@@ -22,7 +22,7 @@ interface PopupInfoBoxProps {
   onClose?: () => void;
   pointId?: string;
   variant?: 'first' | 'second'; // 款式选择:first-第一款,second-第二款
-  pointIndex?: number; // 定位点索引,用于自动选择款式
+  industry?: string; // 产业类型,用于确定款式
 }
 
 const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
@@ -30,7 +30,7 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
   onClose,
   pointId,
   variant,
-  pointIndex = 0
+  industry
 }) => {
   const { themeColor, currentData, currentIndustry } = useSupplyChain();
 
@@ -60,8 +60,9 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
     return null;
   }
 
-  // 确定款式:优先使用传入的variant,否则根据pointIndex自动选择
-  const determinedVariant = variant || (pointIndex % 2 === 0 ? 'first' : 'second');
+  // 确定款式:优先使用传入的variant,否则根据产业类型自动选择
+  // 规则:每组大屏的第一个产业使用第一款,第二个产业使用第二款
+  const determinedVariant = variant || (getIndustryVariant(currentIndustry, currentData?.industries || []) || 'first');
 
   // 根据款式计算最终显示位置
   const calculateFinalPosition = (position: { x: number; y: number }, variant: 'first' | 'second') => {
@@ -77,14 +78,22 @@ const PopupInfoBox: React.FC<PopupInfoBoxProps> = ({
     } else {
       // 第二款:右上角定位
       return {
-        x: position.x - popupWidth + 20, // 向右偏移20px
-        y: position.y - 20               // 向上偏移20px
+        x: position.x - popupWidth + -10, // 向右偏移20px
+        y: position.y - -20               // 向上偏移20px
       };
     }
   };
 
   const finalPosition = calculateFinalPosition(displayPosition, determinedVariant);
 
+  // 辅助函数:根据产业类型确定款式
+  function getIndustryVariant(industry: string, industries: string[]): 'first' | 'second' | null {
+    const index = industries.indexOf(industry);
+    if (index === 0) return 'first'; // 第一个产业使用第一款
+    if (index === 1) return 'second'; // 第二个产业使用第二款
+    return null; // 其他情况返回null,使用默认值
+  }
+
   return (
     <div
       className="absolute overflow-clip"

+ 7 - 2
src/client/home/pages/SupplyChainDashboards/components/SupplyChainMap.tsx

@@ -159,6 +159,11 @@ const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
   // 优先使用传入的points,否则使用动态数据
   const displayPoints = points.length > 0 ? points : dynamicPoints;
 
+  // 处理定位点点击
+  const handlePointClick = (point: LocationPoint) => {
+    onPointClick?.(point);
+  };
+
   return (
     <div className="absolute contents left-[529.88px] top-[calc(50%+64.03px)] translate-y-[-50%]">
       <div className="absolute contents left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]">
@@ -191,7 +196,7 @@ const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
               <BasePoint
                 key={point.id}
                 point={point}
-                onClick={onPointClick}
+                onClick={() => handlePointClick(point)}
               />
             );
           } else if (point.type === 'chain') {
@@ -199,7 +204,7 @@ const SupplyChainMap: React.FC<SupplyChainMapProps> = ({
               <IndustryChainPoint
                 key={point.id}
                 point={point}
-                onClick={onPointClick}
+                onClick={() => handlePointClick(point)}
               />
             );
           }