fix:终极优化

src/api/block.ts

@@ -13,7 +13,7 @@ export class BlockChainApi {
   public coreConfig: CoreConfig;
   public blockConfig: BlockConfig
   public baseUrl = import.meta.env.VITE_BLOCK_URL;
-  // public baseUrl = "http://10.66.66.234:26657";
+  // public baseUrl = "http://47.82.97.10:26657";
 
   constructor() {
     this.coreConfig = {} as CoreConfig;

src/pages/anti-dark-analysis-network/data/index.ts

@@ -4,7 +4,7 @@ export const screenData = {
             account: "admin",
             account_is_admin: true,
             exclusive: "none",
-            name: "default(10.66.66.234)-c250",
+            name: "default(47.82.97.10)-c250",
             proxies: ["意大利-米兰-312", "南苏丹-朱巴-374"],
             proxies_code: ["it", "ss"],
             use: true,
@@ -14,7 +14,7 @@ export const screenData = {
 
     proxy_info: {
         exclusive: "",
-        name: "default(10.66.66.234)-c250",
+        name: "default(47.82.97.10)-c250",
         wg: false,
         change_time: 0,
         change_at: 0,

src/pages/anti-forensics-forwarding/components/world-geo.tsx

@@ -1,19 +1,20 @@
 import { useEffect, useRef, memo, useState } from "react";
 import * as echarts from "echarts";
-// import 'echarts-gl';
-// import { useQueryClient } from "@tanstack/react-query";
 import type { EChartsType } from "echarts";
 import worldGeoJson from "@/assets/echarts-map/json/world.json";
 import { geoCoordMap, countryNameMap, countryCodeMap } from "@/data";
 import { getUrl } from "@/lib/utils";
+
 // 连线动画的间隔时间（毫秒）
-const LINE_ANIMATION_INTERVAL = 500; // 3秒
+const LINE_ANIMATION_INTERVAL = 500;
+
 interface LinesItemType {
   name: string;
   country_code: string;
   value: number[];
-  color?: string; // 添加颜色属性
+  color?: string;
 }
+
 type LinesDataType = [LinesItemType, LinesItemType];
 type LinesType = [string, LinesDataType[]];
 
@@ -38,7 +39,6 @@ const CustomTooltip = ({
     // 重置状态
     setVisibleLogs([]);
     setIsComplete(false);
-
     let currentIndex = 0;
     
     // 创建一个定时器，每500毫秒显示一条新日志
@@ -60,7 +60,6 @@ const CustomTooltip = ({
   
   // 自动滚动到最新的日志
   const logsContainerRef = useRef<HTMLDivElement>(null);
-
   useEffect(() => {
     if (logsContainerRef.current && visibleLogs.length > 0) {
       logsContainerRef.current.scrollTop =
@@ -102,7 +101,6 @@ const CustomTooltip = ({
               onClick={onClose}
             />
           </div>
-
           <div
             ref={logsContainerRef}
             className="logs-container mt-3 max-h-[335px] overflow-y-auto"
@@ -123,12 +121,6 @@ const CustomTooltip = ({
                 {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
               </div>
             )}
-
-            {/* {!isComplete && logs.length > 0 && (
-              <div className="loading-indicator mt-2 text-xs text-blue-300">
-                处理中...
-              </div>
-            )} */}
           </div>
         </div>
       </div>
@@ -136,16 +128,6 @@ const CustomTooltip = ({
   );
 };
 
-// 添加一个淡入动画的CSS（可以放在你的全局CSS文件中）
-// @keyframes fadeIn {
-//   from { opacity: 0; transform: translateY(5px); }
-//   to { opacity: 1; transform: translateY(0); }
-// }
-//
-// .animate-fadeIn {
-//   animation: fadeIn 0.3s ease-out forwards;
-// }
-
 // 创建单个国家的涟漪效果
 const createCountryRipple = (countryCode: string, color?: string) => {
   const coords = geoCoordMap[countryCode];
@@ -154,7 +136,7 @@ const createCountryRipple = (countryCode: string, color?: string) => {
     name: countryCodeMap[countryCode] ?? "",
     value: coords,
     country_code: countryCode,
-    color: color || "#0ea5e9", // 添加颜色属性，如果没有则使用默认颜色
+    color: color || "#0ea5e9",
   };
 };
 
@@ -192,8 +174,7 @@ export const WorldGeo = memo(
     const labelsRef = useRef<HTMLDivElement[]>([]);
     
     // 添加状态来跟踪当前显示的连线索引
-    const [nestedEncryptionLineIndex, setNestedEncryptionLineIndex] =
+    const [nestedEncryptionLineIndex, setNestedEncryptionLineIndex] = useState(-1);
-      useState(-1);
     const [dynamicRouteLineIndex, setDynamicRouteLineIndex] = useState(-1);
     
     // 添加状态来存储所有连线数据
@@ -215,13 +196,13 @@ export const WorldGeo = memo(
     const nestedEncryptionKeyRef = useRef<string>("");
     const dynamicRouteKeyRef = useRef<string>("");
     
+    // 添加一个ref来跟踪图表是否已初始化
+    const chartInitializedRef = useRef(false);
+    
     // 初始化时提取所有点的函数
     const extractAllPoints = () => {
       const points: any[] = [];
       
-      // console.log("Extracting points from nestedEncryption:", nestedEncryption);
-      // console.log("Extracting points from dynamicRouteGeneration:", dynamicRouteGeneration);
-
       // 从嵌套加密数据中提取点
       if (nestedEncryption && Array.isArray(nestedEncryption)) {
         nestedEncryption.forEach((item: any) => {
@@ -236,7 +217,6 @@ export const WorldGeo = memo(
               ) {
                 points.push(fromPoint);
               }
-
               // 如果有终点，也添加到点集合
               if (dataItem.ingress_country_code) {
                 const toCode = dataItem.ingress_country_code.toUpperCase();
@@ -264,7 +244,6 @@ export const WorldGeo = memo(
               ) {
                 points.push(fromPoint);
               }
-
               // 如果有终点，也添加到点集合
               if (dataItem.ingress_country_code) {
                 const toCode = dataItem.ingress_country_code.toUpperCase();
@@ -278,7 +257,6 @@ export const WorldGeo = memo(
         });
       }
       
-      console.log("Extracted points:", points);
       return points;
     };
     
@@ -296,15 +274,12 @@ export const WorldGeo = memo(
       connections: { from: string; to: string; color?: string }[]
     ) => {
       if (connections.length === 0) return;
-
       let index = 0;
       
       // 递归函数，用于按顺序显示连线
       const animateNextLine = () => {
         setNestedEncryptionLineIndex(index);
-
         index++;
-
         if (index < connections.length) {
           animationTimerRef.current = setTimeout(
             animateNextLine,
@@ -392,7 +367,6 @@ export const WorldGeo = memo(
           // 如果有连线数据且需要开始动画，重置索引并启动动画
           if (connections.length > 0 && shouldStartAnimation) {
             setNestedEncryptionLineIndex(-1); // 重置索引
-
             // 启动连线动画
             setTimeout(() => {
               startNestedEncryptionAnimation(connections);
@@ -426,6 +400,29 @@ export const WorldGeo = memo(
       }
     }, [nestedEncryption]);
     
+    // 启动动态路由连线动画的函数
+    const startDynamicRouteAnimation = (
+      connections: { from: string; to: string; color?: string }[]
+    ) => {
+      if (connections.length === 0) return;
+      let index = 0;
+      
+      // 递归函数，用于按顺序显示连线
+      const animateNextLine = () => {
+        setDynamicRouteLineIndex(index);
+        index++;
+        if (index < connections.length) {
+          dynamicAnimationTimerRef.current = setTimeout(
+            animateNextLine,
+            LINE_ANIMATION_INTERVAL
+          );
+        }
+      };
+      
+      // 开始动画
+      animateNextLine();
+    };
+    
     // 处理动态路由数据变化
     useEffect(() => {
       // 清除任何现有的动画定时器
@@ -498,7 +495,6 @@ export const WorldGeo = memo(
           // 如果有连线数据且需要开始动画，重置索引并启动动画
           if (connections.length > 0 && shouldStartAnimation) {
             setDynamicRouteLineIndex(-1); // 重置索引
-
             // 启动连线动画
             setTimeout(() => {
               startDynamicRouteAnimation(connections);
@@ -532,32 +528,6 @@ export const WorldGeo = memo(
       }
     }, [dynamicRouteGeneration]);
     
-    // 启动动态路由连线动画的函数
-    const startDynamicRouteAnimation = (
-      connections: { from: string; to: string; color?: string }[]
-    ) => {
-      if (connections.length === 0) return;
-
-      let index = 0;
-
-      // 递归函数，用于按顺序显示连线
-      const animateNextLine = () => {
-        setDynamicRouteLineIndex(index);
-
-        index++;
-
-        if (index < connections.length) {
-          dynamicAnimationTimerRef.current = setTimeout(
-            animateNextLine,
-            LINE_ANIMATION_INTERVAL
-          );
-        }
-      };
-
-      // 开始动画
-      animateNextLine();
-    };
-
     // 组件卸载时清除定时器
     useEffect(() => {
       return () => {
@@ -646,9 +616,11 @@ export const WorldGeo = memo(
     // 定位自定义提示框 - 优化版本
     const positionCustomTooltip = () => {
       if (!customTooltipRef.current || !proxyGeoRef.current) return;
+      
       // 找到US点
       const coords = geoCoordMap[nestedEncryption?.[0]?.code ?? "GL"];
       if (!coords) return;
+      
       try {
         // 将地理坐标转换为屏幕坐标
         const screenCoord = proxyGeoRef.current.convertToPixel("geo", coords);
@@ -669,19 +641,20 @@ export const WorldGeo = memo(
     // 处理关闭tooltip
     const handleCloseTooltip = () => {
       setTooltipClosed(false);
-      setTooltipClosed(false);
     };
     
     // 获取连线经纬度数据
     const convertData = (data: LinesDataType[]) => {
       const res = [];
       const midpoints = [];
+      
       for (let index = 0; index < data.length; index++) {
         const dataIndex = data[index];
         const fromCoord = geoCoordMap[dataIndex?.[0]?.country_code ?? ""];
         const toCoord = geoCoordMap[dataIndex?.[1]?.country_code ?? ""];
         const fromCountry = dataIndex?.[0]?.country_code ?? "";
         const toCountry = dataIndex?.[1]?.country_code ?? "";
+        
         if (fromCoord && toCoord) {
           res.push({
             coords: [fromCoord, toCoord],
@@ -690,18 +663,22 @@ export const WorldGeo = memo(
               color: dataIndex?.[0]?.color || "#0ea5e9",
             },
           });
+          
           // 计算中点，考虑曲线的弧度
           const curveness = -0.4; // 与飞线弧度相同
           const x1 = fromCoord[0];
           const y1 = fromCoord[1];
           const x2 = toCoord[0];
           const y2 = toCoord[1];
+          
           // 计算控制点
           const cpx = (x1 + x2) / 2 - (y2 - y1) * curveness;
           const cpy = (y1 + y2) / 2 - (x1 - x2) * curveness;
+          
           // 计算曲线上的中点 (t=0.5 时的贝塞尔曲线点)
           const midX = x1 * 0.25 + cpx * 0.5 + x2 * 0.25;
           const midY = y1 * 0.25 + cpy * 0.5 + y2 * 0.25;
+          
           midpoints.push({
             id: `line-label-${index}`,
             midpoint: [midX, midY],
@@ -710,8 +687,7 @@ export const WorldGeo = memo(
           });
         }
       }
-      // 更新中点引用
+      
-      // lineMidpointsRef.current = midpoints;
       return res;
     };
     
@@ -734,12 +710,15 @@ export const WorldGeo = memo(
             };
           })
         : [];
+      
       // 根据是否是主路径设置不同的大小和颜色
       const outerSize = isMainPath ? 8 : 4;
       const innerSize = isMainPath ? 4 : 2;
+      
       // 使用传入的颜色或从数据中获取颜色，如果都没有则使用默认颜色
       const outerColor = color || lastExit?.color || "#0ea5e9";
       const innerColor = "#FFFFFF"; // 白色内层
+      
       return [
         {
           // 外层蓝色点，带涟漪效果
@@ -766,18 +745,11 @@ export const WorldGeo = memo(
             showContent: true,
             alwaysShowContent: true,
             formatter: (params: any) => {
-              // const countryCode = params.data.datas.country_code;
-              // const countryName = params.data.name;
-              // 创建自定义HTML提示框
               return `
                 <div class="tip-box">
-                     <img class="close-icon" src="${getUrl(
+                  <img class="close-icon" src="${getUrl("svg/Xwhite.svg")}" alt="" />
-                       "svg/Xwhite.svg"
-                     )}" alt="" />
                   <div class="label">嵌套加密</div>
-                        <img class="encryption-img" width="100%" src="${getUrl(
+                  <img class="encryption-img" width="100%" src="${getUrl("image/nested-encryption.png")}" alt="" />
-                          "image/nested-encryption.png"
-                        )}" alt="" />
                 </div>
               `;
             },
@@ -808,8 +780,10 @@ export const WorldGeo = memo(
       series: echarts.SeriesOption[]
     ) => {
       if (!coordinates || coordinates.length === 0) return;
+      
       // 使用selectedApp.color或默认蓝色
       const outerColor = "#01FF5E";
+      
       // 只创建外层带涟漪效果的点
       series.push({
         type: "effectScatter",
@@ -851,12 +825,15 @@ export const WorldGeo = memo(
           },
         };
       });
+      
       // 根据是否是主路径设置不同的大小和颜色
       const outerSize = isMainPath ? 8 : 4;
       const innerSize = isMainPath ? 4 : 2;
+      
       // 使用传入的颜色或从数据中获取颜色，如果都没有则使用默认颜色
       const outerColor = color || dataItems[0]?.[0]?.color || "#0ea5e9";
       const innerColor = "#FFFFFF"; // 白色内层
+      
       return [
         {
           // 外层蓝色点，带涟漪效果
@@ -881,18 +858,11 @@ export const WorldGeo = memo(
             show: false,
             trigger: "item",
             formatter: (params: any) => {
-              // const countryCode = params.data.datas.country_code;
-              // const countryName = params.data.name;
-              // 创建自定义HTML提示框
               return `
                 <div class="tip-box">
-                         <img class="close-icon" src="${getUrl(
+                  <img class="close-icon" src="${getUrl("svg/Xwhite.svg")}" alt="" />
-                           "svg/Xwhite.svg"
-                         )}" alt="" />
                   <div class="label">嵌套加密</div>
-                            <img class="encryption-img" width="100%" src="${getUrl(
+                  <img class="encryption-img" width="100%" src="${getUrl("image/nested-encryption.png")}" alt="" />
-                              "image/nested-encryption.png"
-                            )}" alt="" />
                 </div>
               `;
             },
@@ -948,18 +918,11 @@ export const WorldGeo = memo(
           show: false,
           trigger: "item",
           formatter: (params: any) => {
-            // const countryCode = params.data.datas.country_code;
-            // const countryName = params.data.name;
-            // 创建自定义HTML提示框
             return `
               <div class="tip-box">
-                        <img class="close-icon" src="${getUrl(
+                <img class="close-icon" src="${getUrl("svg/Xwhite.svg")}" alt="" />
-                          "svg/Xwhite.svg"
-                        )}" alt="" />
                 <div class="label">嵌套加密</div>
-                            <img class="encryption-img" width="100%" src="${getUrl(
+                <img class="encryption-img" width="100%" src="${getUrl("image/nested-encryption.png")}" alt="" />
-                              "image/nested-encryption.png"
-                            )}" alt="" />
               </div>
             `;
           },
@@ -985,6 +948,7 @@ export const WorldGeo = memo(
       if (ripplePoints.length > 0) {
         // 添加带自定义提示框的外层蓝色点
         series.push(createRipplePointsWithTooltip(ripplePoints));
+        
         // 添加内层白色点，不带涟漪效果
         series.push({
           type: "scatter", // 使用普通scatter，不带特效
@@ -1068,6 +1032,7 @@ export const WorldGeo = memo(
           const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
           // 获取当前路径的颜色
           const pathColor = item[1]?.[0]?.[0]?.color || "#F0FFA2"; // 从第一个点获取颜色，如果没有则使用默认颜色
+          
           // 添加虚线
           series.push({
             name: item[0],
@@ -1086,9 +1051,11 @@ export const WorldGeo = memo(
             },
             data: convertData(item[1]) as echarts.LinesSeriesOption["data"],
           });
+          
           // 添加路径点的双层效果（次要路径）
           const pathPoints = createPathPoints(item[1], false, pathColor);
           series.push(...pathPoints);
+          
           // 添加出口节点的双层效果（次要路径）
           if (lastExit) {
             const exitNodes = createDualLayerPoint(lastExit, false, pathColor);
@@ -1106,6 +1073,7 @@ export const WorldGeo = memo(
       const pointA = geoCoordMap[passAuthentication[0]?.startPoint ?? "GL"];
       const pointB = geoCoordMap[passAuthentication[0]?.endPoint ?? "CA"];
       const newPointB = [pointB[0] + 14, pointB[1] + 10];
+      
       // 添加A点 - 带涟漪效果的双层点
       series.push(
         // 外层带涟漪效果的点
@@ -1167,6 +1135,7 @@ export const WorldGeo = memo(
           ],
         } as echarts.SeriesOption
       );
+      
       // 添加B点 - 大型圆形区域
       series.push({
         type: "scatter",
@@ -1201,6 +1170,7 @@ export const WorldGeo = memo(
           },
         ],
       } as echarts.SeriesOption);
+      
       // 添加A到B的飞线（无特效）
       series.push({
         type: "lines",
@@ -1221,18 +1191,22 @@ export const WorldGeo = memo(
           },
         ],
       } as echarts.SeriesOption);
+      
       // 计算飞线中点坐标（考虑曲率）
       const x1 = pointA[0];
       const y1 = pointA[1];
       const x2 = newPointB[0];
       const y2 = newPointB[1];
       const curveness = -0.4;
+      
       // 计算控制点
       const cpx = (x1 + x2) / 2 - (y2 - y1) * curveness;
       const cpy = (y1 + y2) / 2 - (x1 - x2) * curveness;
+      
       // 计算曲线上的中点 (t=0.5 时的贝塞尔曲线点)
       const midX = x1 * 0.25 + cpx * 0.5 + x2 * 0.25;
       const midY = y1 * 0.25 + cpy * 0.5 + y2 * 0.25;
+      
       // 将中点添加到 lineMidpointsRef 中，以便使用 DOM 方式创建标签
       lineMidpointsRef.current.push({
         id: "special-line-label",
@@ -1240,13 +1214,14 @@ export const WorldGeo = memo(
         fromCountry: "A",
         toCountry: "B",
       });
+      
       return series;
     };
     
     const getOption = () => {
       const series: echarts.SeriesOption[] = [];
       getLianData(series);
-      // getMianLineTipData(series); // 添加主线tip 暂时隐藏
+      
       if (
         passAuthentication.length &&
         passAuthentication[0]?.authenticationPoint
@@ -1257,6 +1232,7 @@ export const WorldGeo = memo(
           series
         );
       }
+      
       const option = {
         backgroundColor: "transparent",
         // 全局提示框配置
@@ -1266,7 +1242,6 @@ export const WorldGeo = memo(
           enterable: true,
           confine: true, // 保持提示框在图表范围内
           appendToBody: true, // 将提示框附加到body以获得更好的定位
-          // position: function(pos:any, params, dom, rect, size) {
           position: function (pos: any) {
             // 自定义定位逻辑（如果需要）
             return [pos[0] + 10, pos[1] - 50]; // 从光标偏移
@@ -1277,7 +1252,6 @@ export const WorldGeo = memo(
           map: "world", // 地图类型
           roam: true, // 是否开启缩放
           zoom: 1, // 初始缩放大小
-          // center: [11.3316626, 19.5845024], // 地图中心点
           layoutCenter: ["50%", "50%"], //地图位置
           scaleLimit: {
             // 缩放等级
@@ -1330,6 +1304,7 @@ export const WorldGeo = memo(
         },
         series: series,
       };
+      
       return option;
     };
     
@@ -1352,6 +1327,7 @@ export const WorldGeo = memo(
         container.style.width = "100%";
         container.style.height = "100%";
         container.style.overflow = "hidden";
+        
         // 添加到地图容器
         const chartDom = document.getElementById("screenGeo");
         if (chartDom) {
@@ -1360,6 +1336,7 @@ export const WorldGeo = memo(
           labelContainerRef.current = container;
         }
       }
+      
       // 创建新标签
       lineMidpointsRef.current.forEach((point, index) => {
         const label = document.createElement("div");
@@ -1371,6 +1348,7 @@ export const WorldGeo = memo(
         label.style.whiteSpace = "nowrap";
         label.style.pointerEvents = "none";
         label.style.zIndex = "1001";
+        
         // 特殊线标签（A到B的线）
         if (point.id === "special-line-label") {
           label.style.backgroundColor = "#8B3700";
@@ -1391,10 +1369,12 @@ export const WorldGeo = memo(
           label.style.fontWeight = "normal";
           label.textContent = "SS签名";
         }
+        
         // 添加到容器
         labelContainerRef.current?.appendChild(label);
         labelsRef.current.push(label);
       });
+      
       // 更新标签位置
       updateLabelPositions();
     };
@@ -1402,13 +1382,16 @@ export const WorldGeo = memo(
     // 更新标签位置
     const updateLabelPositions = () => {
       if (!proxyGeoRef.current || !labelContainerRef.current) return;
+      
       lineMidpointsRef.current.forEach((point, index) => {
         const label = labelsRef.current[index];
         if (!label) return;
+        
         const pixelPoint = proxyGeoRef.current?.convertToPixel(
           "geo",
           point.midpoint
         );
+        
         if (pixelPoint && Array.isArray(pixelPoint)) {
           label.style.left = `${pixelPoint[0]}px`;
           label.style.top = `${pixelPoint[1]}px`;
@@ -1424,23 +1407,65 @@ export const WorldGeo = memo(
       }
     };
     
-    // 更新图表
+    // 更新图表 - 关键修改：使用 silent 参数避免重新渲染动画
     useEffect(() => {
-      const option = getOption();
+      if (!proxyGeoRef.current || !chartInitializedRef.current) return;
-      proxyGeoRef.current?.setOption(option);
-    }, [nestedEncryptionLineIndex, dynamicRouteLineIndex, allPoints]); // 当连线索引或点变化时更新图表
       
+      // 获取当前系列
+      const series: echarts.SeriesOption[] = [];
+      getLianData(series);
+      
+      // 使用 setOption 更新图表，但保持动画状态
+      proxyGeoRef.current.setOption(
+        { series: series },
+        { 
+          notMerge: false,  // 不合并会导致闪烁
+          silent: true,     // 静默更新，不触发动画重新开始
+          lazyUpdate: true  // 延迟更新
+        }
+      );
+    }, [nestedEncryptionLineIndex, dynamicRouteLineIndex]);
+    
+    // 处理数据变化 - 关键修改：使用 silent 参数避免重新渲染动画
     useEffect(() => {
+      if (!proxyGeoRef.current || !chartInitializedRef.current) return;
+      
       lineMidpointsRef.current = []; // 重置中点数据
-      const option = getOption();
+      
-      proxyGeoRef.current?.setOption(option);
+      // 获取当前系列
+      const series: echarts.SeriesOption[] = [];
+      getLianData(series);
+      
+      if (
+        passAuthentication.length &&
+        passAuthentication[0]?.authenticationPoint
+      ) {
+        createSpecialPoints(series);
+        createRipplePointsFromCoordinates(
+          passAuthentication[0]?.authenticationPoint || [],
+          series
+        );
+      }
+      
+      // 使用 setOption 更新图表，但保持动画状态
+      proxyGeoRef.current.setOption(
+        { series: series },
+        { 
+          notMerge: false,  // 不合并会导致闪烁
+          silent: true,     // 静默更新，不触发动画重新开始
+          lazyUpdate: true  // 延迟更新
+        }
+      );
+      
       // 创建DOM标签
       setTimeout(createDOMLabels, 100);
     }, [nestedEncryption, dynamicRouteGeneration, passAuthentication]);
     
+    // 初始化图表
     useEffect(() => {
       const chartDom = document.getElementById("screenGeo");
       proxyGeoRef.current = echarts.init(chartDom);
+      
       echarts.registerMap(
         "world",
         worldGeoJson as unknown as Parameters<typeof echarts.registerMap>[1]
@@ -1454,19 +1479,27 @@ export const WorldGeo = memo(
       
       const option = getOption();
       option && proxyGeoRef.current?.setOption(option);
+      
+      // 标记图表已初始化
+      chartInitializedRef.current = true;
+      
       // 添加地图交互事件监听器
       proxyGeoRef.current?.on("georoam", updateLabelPositions);
+      
       // 页面resize时触发
       window.addEventListener("resize", handleResize);
+      
       return () => {
         window.removeEventListener("resize", handleResize);
         proxyGeoRef.current?.off("georoam", updateLabelPositions);
+        
         // 清理DOM标签
         if (labelContainerRef.current) {
           labelContainerRef.current.remove();
           labelContainerRef.current = null;
           labelsRef.current = [];
         }
+        
         proxyGeoRef.current?.dispose();
         proxyGeoRef.current = null;
       };
@@ -1484,9 +1517,7 @@ export const WorldGeo = memo(
         <div id="screenGeo" className="flex-1"></div>
         {tooltipClosed && (
           <CustomTooltip
-            logs={
+            logs={logs}
-              logs
-            }
             onClose={handleCloseTooltip}
             tooltipRef={customTooltipRef}
           />
@@ -1495,3 +1526,5 @@ export const WorldGeo = memo(
     );
   }
 );
+
+export default WorldGeo;

src/pages/anti-forensics-forwarding/data/index.ts

@@ -4,7 +4,7 @@ export const screenData = {
             account: "admin",
             account_is_admin: true,
             exclusive: "none",
-            name: "default(10.66.66.234)-c250",
+            name: "default(47.82.97.10)-c250",
             proxies: ["意大利-米兰-312", "南苏丹-朱巴-374"],
             proxies_code: ["it", "ss"],
             use: true,
@@ -14,7 +14,7 @@ export const screenData = {
 
     proxy_info: {
         exclusive: "",
-        name: "default(10.66.66.234)-c250",
+        name: "default(47.82.97.10)-c250",
         wg: false,
         change_time: 0,
         change_at: 0,

src/pages/decentralized-lastic-network/data/index.ts

@@ -4,7 +4,7 @@ export const screenData = {
             account: "admin",
             account_is_admin: true,
             exclusive: "none",
-            name: "default(10.66.66.234)-c250",
+            name: "default(47.82.97.10)-c250",
             proxies: ["意大利-米兰-312", "南苏丹-朱巴-374"],
             proxies_code: ["it", "ss"],
             use: true,
@@ -14,7 +14,7 @@ export const screenData = {
 
     proxy_info: {
         exclusive: "",
-        name: "default(10.66.66.234)-c250",
+        name: "default(47.82.97.10)-c250",
         wg: false,
         change_time: 0,
         change_at: 0,

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

@@ -130,7 +130,7 @@ const CustomTooltip = ({
             />
           </div>
 
-          {filteredLogs.length > 0 && (
+          {filteredLogs.length > 0 ? (
             <div
               ref={logsContainerRef}
               className="logs-container mt-3 max-h-[335px] overflow-y-auto"
@@ -162,6 +162,10 @@ const CustomTooltip = ({
                 </div>
               )} */}
             </div>
+          ) : (
+            <div className="text-sm text-gray-400 italic">
+              {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
+            </div>
           )}
         </div>
       </div>
@@ -281,7 +285,7 @@ const CustomTooltipLeft = ({
             />
           </div>
 
-          {filteredLogs.length > 0 && (
+          {filteredLogs.length > 0 ? (
             <div
               ref={logsContainerRef}
               className="logs-container mt-3 max-h-[335px] overflow-y-auto"
@@ -313,6 +317,10 @@ const CustomTooltipLeft = ({
                 </div>
               )} */}
             </div>
+          ) : (
+            <div className="text-sm text-gray-400 italic">
+              {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
+            </div>
           )}
         </div>
         <img
@@ -1427,7 +1435,6 @@ export const WorldGeo = memo(
 
     // 修改处理tooltip的显示和隐藏的逻辑
     useEffect(() => {
-
       if (tooltipClosed) {
         setShowTooltip1(true);
         setShowTooltip2(true); // 确保另一个是关闭的

src/pages/new-home/data/index.ts

@@ -4,7 +4,7 @@ export const screenData = {
             account: "admin",
             account_is_admin: true,
             exclusive: "none",
-            name: "default(10.66.66.234)-c250",
+            name: "default(47.82.97.10)-c250",
             proxies: ["意大利-米兰-312", "南苏丹-朱巴-374"],
             proxies_code: ["it", "ss"],
             use: true,
@@ -14,7 +14,7 @@ export const screenData = {
 
     proxy_info: {
         exclusive: "",
-        name: "default(10.66.66.234)-c250",
+        name: "default(47.82.97.10)-c250",
         wg: false,
         change_time: 0,
         change_at: 0,

src/store/web3Slice.ts

@@ -84,7 +84,7 @@ const initialState: Iweb3Slice = {
       account: "admin",
       account_is_admin: true,
       exclusive: "none",
-      name: "default(10.66.66.234)-c250",
+      name: "default(47.82.97.10)-c250",
       proxies: [],
       proxies_code: [],
       use: true,
@@ -94,7 +94,7 @@ const initialState: Iweb3Slice = {
 
   proxy_info: {
     exclusive: "",
-    name: "default(10.66.66.234)-c250",
+    name: "default(47.82.97.10)-c250",
     wg: false,
     change_time: 0,
     change_at: 0,