src/pages/new-home/components/world-geo.tsx

@@ -58,12 +58,7 @@ export const WorldGeo = memo(
     const labelContainerRef = useRef<HTMLDivElement | null>(null);
     const labelsRef = useRef<HTMLDivElement[]>([]);
     const mainToData = useMemo(() => {
-      const newList = [
+      const newList = [ ...dataInfo.passAuthentication.data,...dataInfo.trafficObfuscation,...dataInfo.nestedEncryption,...dataInfo.dynamicRouteGeneration];
-        ...dataInfo.passAuthentication.data,
-        ...dataInfo.trafficObfuscation,
-        ...dataInfo.nestedEncryption,
-        ...dataInfo.dynamicRouteGeneration,
-      ];
       // 使用新的数据结构
       const proxiesList =
         selectedApp && selectedApp ? [...newList,selectedApp] : newList ?? [];
@@ -168,9 +163,8 @@ export const WorldGeo = memo(
     // 定位自定义提示框 - 优化版本
     const positionCustomTooltip = () => {
       if (!customTooltipRef.current || !proxyGeoRef.current) return;
-      console.log(dataInfo.nestedEncryption?.[0]?.code, "sssss");
       // 找到US点
-      const coords = geoCoordMap[dataInfo.nestedEncryption?.[0]?.code ?? "GL"];
+      const coords = geoCoordMap["GL"];
       if (!coords) return;
       try {
         // 将地理坐标转换为屏幕坐标
@@ -240,7 +234,7 @@ export const WorldGeo = memo(
     const positionCustomTooltip2 = () => {
       if (!customTooltip2Ref.current || !proxyGeoRef.current) return;
       // 找到US点
-      const coords = geoCoordMap[dataInfo.trafficObfuscation?.[0]?.code ?? "ZA"];
+      const coords = geoCoordMap["ZA"];
       if (!coords) return;
       try {
         // 将地理坐标转换为屏幕坐标
@@ -337,14 +331,14 @@ export const WorldGeo = memo(
           if (startPoint) {
             ripplePoints.push({
               ...startPoint,
-              color: lineColor, // 添加颜色信息
+              color: lineColor // 添加颜色信息
             });
           }
           
           if (endPoint) {
             ripplePoints.push({
               ...endPoint,
-              color: lineColor, // 添加颜色信息
+              color: lineColor // 添加颜色信息
             });
           }
           
@@ -354,7 +348,7 @@ export const WorldGeo = memo(
             // 添加颜色信息到连线数据
             solidData[0][1].push({
               ...lineItem,
-              color: lineColor, // 添加颜色信息
+              color: lineColor // 添加颜色信息
             } as any);
           }
           // 跳过下一项，因为已经处理了
@@ -374,14 +368,14 @@ export const WorldGeo = memo(
           if (currentPoint) {
             ripplePoints.push({
               ...currentPoint,
-              color: lineColor, // 添加颜色信息
+              color: lineColor // 添加颜色信息
             });
           }
           
           if (nextPoint) {
             ripplePoints.push({
               ...nextPoint,
-              color: nextItem.color || lineColor, // 添加颜色信息
+              color: nextItem.color || lineColor // 添加颜色信息
             });
           }
           
@@ -391,7 +385,7 @@ export const WorldGeo = memo(
             // 添加颜色信息到连线数据
             solidData[0][1].push({
               ...lineItem,
-              color: lineColor, // 添加颜色信息
+              color: lineColor // 添加颜色信息
             } as any);
           }
         }
@@ -402,7 +396,7 @@ export const WorldGeo = memo(
         solidData,
         otherLineList,
         ripplePoints,
-        pointColors,
+        pointColors
       };
     };
     // 获取连线经纬度数据
@@ -421,8 +415,8 @@ export const WorldGeo = memo(
           res.push({
             coords: [fromCoord, toCoord],
             lineStyle: {
-              color: lineColor, // 使用自定义颜色
+              color: lineColor // 使用自定义颜色
-            },
+            }
           });
           // 计算中点，考虑曲线的弧度
           const curveness = -0.4; // 与飞线弧度相同
@@ -575,7 +569,7 @@ export const WorldGeo = memo(
           value: geoCoordMap[dataItem[0].country_code],
           datas: {
             country_code: dataItem[0].country_code,
-            color: color, // 保存颜色信息
+            color: color // 保存颜色信息
           },
         };
       });
@@ -593,7 +587,7 @@ export const WorldGeo = memo(
           itemStyle: {
             color: function(params: any) {
               return params.data.datas.color || "#0ea5e9";
-            },
+            }
           },
           symbol: "circle",
           symbolSize: outerSize,
@@ -652,7 +646,7 @@ export const WorldGeo = memo(
         itemStyle: {
           color: function(params: any) {
             return params.data.datas.color || "#0ea5e9";
-          },
+          }
         },
         symbol: "circle",
         symbolSize: 8,
@@ -693,7 +687,7 @@ export const WorldGeo = memo(
           value: point.value,
           datas: {
             country_code: point.country_code,
-            color: point.color || "#0ea5e9", // 保存颜色信息
+            color: point.color || "#0ea5e9" // 保存颜色信息
           },
         })),
       } as echarts.SeriesOption;
@@ -731,8 +725,7 @@ export const WorldGeo = memo(
           return;
         }
         const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
-        const lastExitColor =
+        const lastExitColor = (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
-          (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
         
         // 添加飞行线
         series.push({
@@ -771,8 +764,7 @@ export const WorldGeo = memo(
       otherLineList.forEach((line: any) => {
         line.forEach((item: any) => {
           const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
-          const lastExitColor =
+          const lastExitColor = (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
-            (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
           
           // 添加虚线
           series.push({
@@ -797,23 +789,86 @@ export const WorldGeo = memo(
           series.push(...pathPoints);
           // 添加出口节点的双层效果（次要路径）
           if (lastExit) {
-            const exitNodes = createDualLayerPoint(
+            const exitNodes = createDualLayerPoint(lastExit, false, lastExitColor);
-              lastExit,
-              false,
-              lastExitColor
-            );
             series.push(...exitNodes);
           }
         });
       });
       return true;
     };
- 
+    // 主线tip series
+    const getMianLineTipData = (series: echarts.SeriesOption[] = []) => {
+      series.push(
+        // 柱状体的主干
+        {
+          name: "solidTip",
+          type: "lines",
+          zlevel: 5,
+          effect: {
+            show: false,
+            symbolSize: 5, // 图标大小
+          },
+          lineStyle: {
+            width: 0, // 尾迹线条宽度
+            color: "#F0FFA2",
+            opacity: 1, // 尾迹线条透明度
+            curveness: 0, // 尾迹线条曲直度
+          },
+          label: {
+            show: true,
+            position: "end",
+            color: "#fff",
+            formatter: (parameters) => {
+              const isFr = parameters.value === "FR";
+              console.log(parameters, "parameters");
+              const name = isFr ? "权威节点团" : "待认证节点";
+              return `{left|}{gap2|}{name${
+                isFr ? "2" : "1"
+              }|${name}}{gap3|}{right|}`;
+            },
+            rich: {
+              gap1: {
+                height: 35,
+                width: 8,
+              },
+              gap2: {
+                height: 35,
+                width: 6,
+              },
+              name1: {
+                color: "#FF6B01",
+                align: "center",
+                lineHeight: 35,
+                fontSize: 18,
+                fontWeight: 600,
+                padding: [11, 16.52, 11, 16.52],
+                backgroundColor: "rgba(63, 6, 3, 0.5)",
+              },
+              name2: {
+                color: "#37FF00",
+                align: "center",
+                lineHeight: 35,
+                fontSize: 18,
+                fontWeight: 600,
+                padding: [11, 16.52, 11, 16.52],
+                backgroundColor: "rgba(4, 59, 27, 0.5)",
+              },
+              gap3: {
+                height: 35,
+                width: 8,
+              },
+            },
+            backgroundColor: "transparent",
+          },
+          silent: true,
+          data: mianLineData(mainToData),
+        }
+      );
+    };
     // 创建A点和B点，并添加飞线和标签
     const createSpecialPoints = (series: echarts.SeriesOption[]) => {
       // 定义点A和点B的坐标
-      const pointA =
+      const pointA =geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"];
-        geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"];
       const pointB =geoCoordMap[dataInfo.passAuthentication.endPoint ??"CA"];
       const newPointB = [pointB[0] + 14, pointB[1] + 10];
       // 添加A点 - 带涟漪效果的双层点
@@ -1159,7 +1214,7 @@ export const WorldGeo = memo(
       };
     }, []);
     useEffect(() => {
-      console.log(tooltipClosed, "tooltipClosedtooltipClosed");
+      console.log(tooltipClosed,'tooltipClosedtooltipClosed')
       if (tooltipClosed) {
         createCustomTooltip();
         createCustomTooltip2();
@@ -1175,12 +1230,7 @@ export const WorldGeo = memo(
         customTooltipRef.current = null;
         customTooltip2Ref.current = null;
       };
-    }, [
+    }, [tooltipClosed, tooltipType]);
-      tooltipClosed,
-      tooltipType,
-      dataInfo.nestedEncryption,
-      dataInfo.trafficObfuscation,
-    ]);
     return (
       <div className="flex-1 h-full flex flex-col">
         <div id="screenGeo" className="flex-1"></div>

src/pages/new-home/index.tsx

@@ -30,6 +30,7 @@ import {
   getDynamicRouteGeneration,
   getApplicationDiversion,
 } from "@/api/flying-line";
+import { APP_DIVERSION } from "../anti-forensics-forwarding/data/mockData";
 
 export const DIALOGTYPE = {
   ADDNode: {
@@ -58,7 +59,7 @@ export const NODEDIALOGTYPE = {
 };
 const NewHome = () => {
   const dispatch = useDispatch<AppDispatch>();
-  const { web3List, web3List2, } = useSelector(
+  const { web3List, web3List2, newHomeProxies } = useSelector(
     (state: RootState) => state.web3Reducer
   );