feat：首页接口对接

.env

@@ -3,3 +3,4 @@ COSMOS_ENDPOINT="http://156.229.167.121:26657"
 NODE_SECRET="aHVnZSBjb21wYW55IHBob25lIHdlc3QgcGxhY2Ugc2VtaW5hciBtaXJhY2xlIGxlbmQgbWFuZGF0ZSB0aGVuIGFkanVzdCBxdWl0IG1lYXQgY2hlYXAgbm9vZGxlIGNvdXBsZSBkZWZpbmUgbXVzY2xlIHB1bHNlIHNpc3RlciBwaWVjZSBkZXZpY2UgcHJpdmF0ZSBob29k"
 IS_DEBUG="true"
 ACCOUNT_NAME="de1"
+VITE_BASE_URL="http://10.66.66.234:6060"

src/api/flying-line.ts

@@ -0,0 +1,27 @@
+import { api } from "@/utils/api";
+
+const baseUrl = import.meta.env.VITE_BASE_URL;
+
+// 通行认证
+export const getPassAuthentication = async () => {
+  return await api.get(`${baseUrl}/step/pass_authentication`);
+};
+
+// 流量混淆
+export const getTrafficObfuscation = async () => {
+  return await api.get(`${baseUrl}/step/traffic_obfuscation`);
+}
+
+// 嵌套加密
+export const getNestedEncryption = async () => {
+  return await api.get(`${baseUrl}/step/nested_encryption`);
+}
+// 动态路由生成
+export const getDynamicRouteGeneration = async () => {
+  return await api.get(`${baseUrl}/step/dynamic_route_generator`);
+}
+
+// 应用分流
+export const getApplicationDiversion = async () => {
+  return await api.get(`${baseUrl}/step/app_diversion`);
+}

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

@@ -499,7 +499,6 @@ export const WorldGeo = memo(
                 label: {
                     show: false,
                     formatter: (params: any) => {
-                        console.log(params, "params");
                         return `{${params.data.datas.country_code}|}`;
                     },
                 },

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

@@ -473,7 +473,6 @@ export const WorldGeo = memo(
                 label: {
                     show: false,
                     formatter: (params: any) => {
-                        console.log(params, "params");
                         return `{${params.data.datas.country_code}|}`;
                     },
                 },

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

@@ -32,14 +32,12 @@ export const WorldGeo = memo(
   ({
     currentValue,
     newHomeProxies,
-    selectedApp,
     tooltipType,
     tooltipClosed,
     setTooltipClosed,
   }: {
     currentValue: any;
     newHomeProxies: any;
-    selectedApp: any;
     tooltipType: string;
     tooltipClosed: boolean;
     setTooltipClosed: (value: boolean) => void;
@@ -168,7 +166,7 @@ export const WorldGeo = memo(
     const positionCustomTooltip = () => {
       if (!customTooltipRef.current || !proxyGeoRef.current) return;
       // 找到US点
-      const coords = geoCoordMap["GL"];
+      const coords = geoCoordMap[currentValue?.[0]?.code ?? "GL"];
       if (!coords) return;
       try {
         // 将地理坐标转换为屏幕坐标
@@ -240,7 +238,7 @@ export const WorldGeo = memo(
     const positionCustomTooltip2 = () => {
       if (!customTooltip2Ref.current || !proxyGeoRef.current) return;
       // 找到US点
-      const coords = geoCoordMap["ZA"];
+      const coords = geoCoordMap[currentValue?.[0]?.code ?? "ZA"];
       if (!coords) return;
       try {
         // 将地理坐标转换为屏幕坐标
@@ -262,27 +260,6 @@ export const WorldGeo = memo(
         console.error("Error positioning tooltip:", error);
       }
     };
-    // 主线每个节点tip竖线的经纬度,修改tip 竖线的高度也可以用这个
-    const mianLineData = (data: typeof mainToData) => {
-      return (
-        data
-          .map((item: any) => {
-            const countryCode = item.country_code.toUpperCase();
-            if (!(["RU", "FR"].includes(countryCode) && item.type === "start"))
-              return null;
-            const coords = geoCoordMap[countryCode] as
-              | [number, number]
-              | undefined;
-            if (!coords) return null;
-            return {
-              name: countryCodeMap[countryCode],
-              coords: [coords, [coords[0], coords[1] + 4]],
-              value: countryCode,
-            };
-          })
-          .filter((v: any) => !!v) ?? []
-      );
-    };
     const getLineItem = (
       preCode: string,
       nextCode: string
@@ -618,7 +595,6 @@ export const WorldGeo = memo(
     };
     // 创建带自定义提示框的涟漪点
     const createRipplePointsWithTooltip = (ripplePoints: any) => {
-      console.log(ripplePoints, "asdasdas");
       return {
         type: "effectScatter",
         coordinateSystem: "geo",
@@ -640,7 +616,6 @@ export const WorldGeo = memo(
         label: {
           show: false,
           formatter: (params: any) => {
-            console.log(params, "params");
             return `{${params.data.datas.country_code}|}`;
           },
         },
@@ -706,7 +681,6 @@ export const WorldGeo = memo(
         } as echarts.SeriesOption);
       }
       solidData.forEach((item) => {
-        console.log(item, "item");
         // 如果没有连线数据，则跳过
         if (item[1].length === 0) {
           return;
@@ -788,98 +762,12 @@ export const WorldGeo = memo(
       });
       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: {
-              // left: {
-              //     color: "transparent",
-              //     height: 35,
-              //     width: 8,
-              //     align: "center",
-              //     backgroundColor: {
-              //         image: `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI1OCIgdmlld0JveD0iMCAwIDExIDU4IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTExIDU2LjA4ODRIMVY0Ni4wODg0IiBzdHJva2U9IiNGRkZERDMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0xIDExVjFIMTEiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPHBhdGggZD0iTTguNzI5NDkgMTlWMzkiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPC9zdmc+`, // 动态生成国旗图标
-              //     },
-              // },
-              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,
-              },
-              // right: {
-              //     color: "transparent",
-              //     height: 35,
-              //     width: 8,
-              //     align: "center",
-              //     backgroundColor: {
-              //         image: `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSI1OCIgdmlld0JveD0iMCAwIDE0IDU4IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTEyLjczMDIgNDYuMDQzOVY1Ni4wNDM5SDIuNzMwMjIiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPHBhdGggZD0iTTIuNzMwMjIgMS4wNDM5NUgxMi43MzAyVjExLjA0MzkiIHN0cm9rZT0iI0ZGRkREMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPHBhdGggZD0iTTEgMTkuMDQzOVYzOS4wNDM5IiBzdHJva2U9IiNGRkZERDMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPg==`, // 动态生成国旗图标
-              //     },
-              // },
-            },
-            backgroundColor: "transparent",
-          },
-          silent: true,
-          data: mianLineData(mainToData),
-        }
-      );
-    };
     // 创建A点和B点，并添加飞线和标签
     const createSpecialPoints = (series: echarts.SeriesOption[]) => {
       // 定义点A和点B的坐标
-      const pointA = [-42.604303, 71.706936];
+      const pointA = geoCoordMap[currentValue[0]?.startPoint ?? "GL"];
-      const pointB = [-106.346771, 56.130366];
+      const pointB = geoCoordMap[currentValue[0]?.endPoint ?? "CA"];
       const newPointB = [pointB[0] + 14, pointB[1] + 10];
       // 添加A点 - 带涟漪效果的双层点
       series.push(
@@ -1021,14 +909,19 @@ export const WorldGeo = memo(
       const series: echarts.SeriesOption[] = [];
       getLianData(series);
       // getMianLineTipData(series); // 添加主线tip 暂时隐藏
-      if (tooltipType === "PASS_AUTHENTICATION") {
+      if (
+        tooltipType === "PASS_AUTHENTICATION" &&
+        currentValue &&
+        currentValue.length &&
+        currentValue[0]?.authenticationPoint
+      ) {
+        console.log(currentValue, "values");
+
         createSpecialPoints(series); // 添加特殊点和飞线
-        if (newHomeProxies[0]?.authenticationPoint) {
+        createRipplePointsFromCoordinates(
-          createRipplePointsFromCoordinates(
+          currentValue[0]?.authenticationPoint || [],
-            newHomeProxies[0]?.authenticationPoint || [],
+          series
-            series
+        );
-          );
-        }
       }
 
       const option = {
@@ -1250,7 +1143,7 @@ export const WorldGeo = memo(
         customTooltipRef.current = null;
         customTooltip2Ref.current = null;
       };
-    }, [tooltipClosed, tooltipType]);
+    }, [tooltipClosed, tooltipType, currentValue]);
     return (
       <div className="flex-1 h-full flex flex-col">
         <div id="screenGeo" className="flex-1"></div>

src/pages/anti-forensics-forwarding/index.tsx

@@ -39,7 +39,13 @@ import {
 } from "./data/mockData";
 
 import "./index.scss";
-import { App } from "antd";
+import {
+  getApplicationDiversion,
+  getDynamicRouteGeneration,
+  getNestedEncryption,
+  getPassAuthentication,
+  getTrafficObfuscation,
+} from "@/api/flying-line";
 
 export const DIALOGTYPE = {
   ADDNode: {
@@ -161,7 +167,7 @@ export const CONST_TOOLTIP_TYPE = {
 };
 
 const DecentralizedElasticNetwork = () => {
-  const { proxy_info, path_list, newHomeProxies } = useSelector(
+  const { newHomeProxies } = useSelector(
     (state: RootState) => state.web3Reducer
   );
 
@@ -171,77 +177,111 @@ const DecentralizedElasticNetwork = () => {
   const [tooltipClosed, setTooltipClosed] = useState(false);
 
   const [selectedApp, setSelectedApp] = useState<any>(null);
+  const [dataInfo, setDataInfo] = useState<any>(null);
+
+  const currentValue = useMemo(() => {
+    let value = dataInfo;
+    
+    switch (tooltipType) {
+      case CONST_TOOLTIP_TYPE.APP_DIVERSION.type:
+        value = selectedApp ? [selectedApp] : [];
+        break;
+      default:
+        break;
+    }
+    return value;
+  }, [tooltipType, selectedApp,dataInfo]);
+
+  const handleClickApp = (item: any) => {
+    setSelectedApp(item);
+  };
+
+  const getDataInfo = async () => {
+    let value = [];
+
+    switch (tooltipType) {
+      case CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type:
+        const nestedEncryption = await getNestedEncryption();
+        value = [nestedEncryption.data];
+        break;
+      case CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type:
+        const trafficObfuscation = await getTrafficObfuscation();
+        value = [trafficObfuscation.data];
+        break;
+      case CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type:
+        const dynamicRouteGeneration = await getDynamicRouteGeneration();
+        value = dynamicRouteGeneration.data;
+        break;
+      // case CONST_TOOLTIP_TYPE.APP_DIVERSION.type:
+      //   const applicationDiversion = await getApplicationDiversion();
+
+      //   value = selectedApp ? [selectedApp] : [];
+      //   break;
+      case CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type:
+        const passAuthentication = await getPassAuthentication();
+        value = [passAuthentication.data];
+
+        break;
+      default:
+        break;
+    }
+    console.log(value,'valuevalue')
+    setDataInfo(value);
+  };
+
+  const [appData, setAppData] = useState<any>([]);
   const appDiversion = useMemo(() => {
     return Apps.map((item) => {
-      const findApp = APP_DIVERSION.find(
+      const findApp = appData.find(
-        (appItem) => item.name === appItem.name
+        (appItem:any) => item.name === appItem.name
       );
       return {
         ...item,
         ...findApp,
       };
     });
-  }, []);
+  }, [appData]);
-  const currentValue = useMemo(() => {
+  const initData = async () => {
-    let value = null;
+    const applicationDiversion = await getApplicationDiversion();
-    switch (tooltipType) {
-      case CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type:
-        value = [NESTED_ENCRYPTION];
-        break;
-      case CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type:
-        value = [TRAFFIC_OBFUSCATION];
-        break;
-      case CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type:
-        value = DYNAMIC_ROUTE_GENERATOR
-        break;
-      case CONST_TOOLTIP_TYPE.APP_DIVERSION.type:
-        value = selectedApp ? [selectedApp] : []
-        break;
-      case CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type:
-        value = [PASS_AUTHENTICATION]
-        break;
-      default:
-        break;
-    }
-    return value;
-  }, [tooltipType,selectedApp]);
 
-  const handleClickApp = (item: any) => {
+    setAppData(applicationDiversion.data);
-    console.log("item", item);
-    setSelectedApp(item);
   };
 
+  useEffect(() => {
+    getDataInfo();
+  },[tooltipType])
 
-  useEffect(()=>{
+  useEffect(() => {
-    ()=>{
+    initData();
-        setTooltipClosed(false);
+    () => {
-    }
+      setTooltipClosed(false);
-  },[])
+    };
+  }, []);
 
   return (
     <div className="decentralized w-full h-full flex flex-col  relative">
       <div className="flex items-center gap-[60px] absolute top-12 left-12 z-10">
-        {tooltipType === CONST_TOOLTIP_TYPE.APP_DIVERSION.type &&  appDiversion.map((item) => {
+        {tooltipType === CONST_TOOLTIP_TYPE.APP_DIVERSION.type &&
-          return (
+          appDiversion.map((item) => {
-            <div
+            return (
-              key={item.name}
+              <div
-              className="flex items-center justify-center w-16 h-16 relative  rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
+                key={item.name}
-              onClick={() => handleClickApp(item)}
+                className="flex items-center justify-center w-16 h-16 relative  rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
-            >
+                onClick={() => handleClickApp(item)}
-              {selectedApp?.name === item?.name ? (
+              >
-                <item.activeIcon />
+                {selectedApp?.name === item?.name ? (
-              ) : (
+                  <item.activeIcon />
-                <item.icon />
+                ) : (
-              )}
+                  <item.icon />
-            </div>
+                )}
-          );
+              </div>
-        })}
+            );
+          })}
       </div>
       <div className="mt-2 w-full h-full flex-1">
         <WorldGeo
           currentValue={currentValue}
           newHomeProxies={newHomeProxies}
-          selectedApp={selectedApp}
           tooltipType={tooltipType}
           tooltipClosed={tooltipClosed}
           setTooltipClosed={setTooltipClosed}

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

@@ -28,13 +28,13 @@ const createCountryRipple = (countryCode: string) => {
 };
 export const WorldGeo = memo(
   ({
-    newHomeProxies,
+    dataInfo,
     selectedApp,
     tooltipType,
     tooltipClosed,
     setTooltipClosed,
   }: {
-    newHomeProxies: any;
+    dataInfo:any;
     selectedApp: any;
     tooltipType: string;
     tooltipClosed: boolean;
@@ -58,9 +58,10 @@ export const WorldGeo = memo(
     const labelContainerRef = useRef<HTMLDivElement | null>(null);
     const labelsRef = useRef<HTMLDivElement[]>([]);
     const mainToData = useMemo(() => {
+      const newList = [ ...dataInfo.passAuthentication.data,...dataInfo.trafficObfuscation,...dataInfo.nestedEncryption,...dataInfo.dynamicRouteGeneration];
       // 使用新的数据结构
       const proxiesList =
-        selectedApp && selectedApp ? [...newHomeProxies,selectedApp] : newHomeProxies ?? [];
+        selectedApp && selectedApp ? [...newList,selectedApp] : newList ?? [];
       // 初始化数据数组 - 不再包含 startCountry
       const data: any = [];
       // 遍历代理列表
@@ -97,7 +98,7 @@ export const WorldGeo = memo(
         }
       });
       return data;
-    }, [newHomeProxies, selectedApp]);
+    }, [dataInfo, selectedApp]);
     // 创建自定义提示框DOM元素
     const createCustomTooltip = () => {
       // 如果已经存在自定义提示框，则移除它
@@ -658,7 +659,6 @@ export const WorldGeo = memo(
         label: {
           show: false,
           formatter: (params: any) => {
-            console.log(params, "params");
             return `{${params.data.datas.country_code}|}`;
           },
         },
@@ -868,8 +868,8 @@ export const WorldGeo = memo(
     // 创建A点和B点，并添加飞线和标签
     const createSpecialPoints = (series: echarts.SeriesOption[]) => {
       // 定义点A和点B的坐标
-      const pointA = [-42.604303, 71.706936];
+      const pointA =geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"];
-      const pointB = [-106.346771, 56.130366];
+      const pointB =geoCoordMap[dataInfo.passAuthentication.endPoint ??"CA"];
       const newPointB = [pointB[0] + 14, pointB[1] + 10];
       // 添加A点 - 带涟漪效果的双层点
       series.push(
@@ -1012,9 +1012,9 @@ export const WorldGeo = memo(
       getLianData(series);
       // getMianLineTipData(series); // 添加主线tip 暂时隐藏
       createSpecialPoints(series); // 添加特殊点和飞线
-      if (newHomeProxies[0]?.authenticationPoint) {
+      if (dataInfo.passAuthentication?.authenticationPoint) {
         createRipplePointsFromCoordinates(
-          newHomeProxies[0]?.authenticationPoint || [],
+          dataInfo.passAuthentication?.authenticationPoint || [],
           series
         );
       }
@@ -1186,7 +1186,7 @@ export const WorldGeo = memo(
       proxyGeoRef.current?.setOption(option);
       // 创建DOM标签
       setTimeout(createDOMLabels, 100);
-    }, [newHomeProxies, mainToData]);
+    }, [dataInfo, mainToData]);
     useEffect(() => {
       const chartDom = document.getElementById("screenGeo");
       proxyGeoRef.current = echarts.init(chartDom);

src/pages/new-home/index.tsx

@@ -10,315 +10,368 @@ import OpenProxyPng from "@/assets/image/home/open-proxy.png";
 import web3BoxGif from "@/assets/gif/web3-box-bg.gif";
 import VectorSlideSvg from "@/assets/svg/home/vector-solide.svg?react";
 
-
 import { Apps, CONST_TOOLTIP_TYPE } from "@/pages/anti-forensics-forwarding";
 import { cn } from "@/lib/utils";
 
 import {
-    setProxyInfoProxies,
+  setProxyInfoProxies,
-    setProxiesList1,
+  setProxiesList1,
-    setProxiesList2,
+  setProxiesList2,
 } from "@/store/web3Slice";
 import type { AppDispatch, RootState } from "@/store";
 import "./index.scss";
 import { DialogConfig, FormAlertDialog } from "./components/FormAlertDialog";
 import { ClearNodeDialog } from "./components/ClearNodeDialog";
 import { blockChainApi } from "@/api/block";
+import {
+  getPassAuthentication,
+  getTrafficObfuscation,
+  getNestedEncryption,
+  getDynamicRouteGeneration,
+  getApplicationDiversion,
+} from "@/api/flying-line";
 import { APP_DIVERSION } from "../anti-forensics-forwarding/data/mockData";
 
 export const DIALOGTYPE = {
-    ADDNode: {
+  ADDNode: {
-        title: "添加节点",
+    title: "添加节点",
-        desc: "",
+    desc: "",
-        successText: "添加",
+    successText: "添加",
-    },
+  },
-    AddNetwork: {
+  AddNetwork: {
-        title: "构建网络",
+    title: "构建网络",
-        desc: "",
+    desc: "",
-        successText: "构建",
+    successText: "构建",
-    },
+  },
 };
 
 export const NODEDIALOGTYPE = {
-    ClearFailNode: {
+  ClearFailNode: {
-        title: "清除掉线节点",
+    title: "清除掉线节点",
-        desc: "",
+    desc: "",
-        successText: "清除",
+    successText: "清除",
-    },
+  },
-    ClearWargingNode: {
+  ClearWargingNode: {
-        title: "恶意节点",
+    title: "恶意节点",
-        desc: "",
+    desc: "",
-        successText: "清除",
+    successText: "清除",
-    },
+  },
 };
 const NewHome = () => {
-    const dispatch = useDispatch<AppDispatch>();
+  const dispatch = useDispatch<AppDispatch>();
-    const { web3List, web3List2, newHomeProxies } = useSelector(
+  const { web3List, web3List2, newHomeProxies } = useSelector(
-        (state: RootState) => state.web3Reducer
+    (state: RootState) => state.web3Reducer
-    );
+  );
 
-    const [form] = Form.useForm();
+  const [form] = Form.useForm();
-    const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false);
-    const [openNode, setOpenNode] = useState(false);
+  const [openNode, setOpenNode] = useState(false);
-    const [dialogLoading] = useState(false);
+  const [dialogLoading] = useState(false);
-    const [selectedApp, setSelectedApp] = useState<any>(null);
+  const [selectedApp, setSelectedApp] = useState<any>(null);
-    const [type, setType] = useState<DialogConfig>(DIALOGTYPE.ADDNode);
+  const [type, setType] = useState<DialogConfig>(DIALOGTYPE.ADDNode);
-    const [nodeType, setNodeType] = useState<DialogConfig>(
+  const [nodeType, setNodeType] = useState<DialogConfig>(
-        NODEDIALOGTYPE.ClearFailNode
+    NODEDIALOGTYPE.ClearFailNode
-    );
+  );
 
-    const [blockChain, setBlockChain] = useState<any>(null);
+  const [tooltipClosed, setTooltipClosed] = useState(true);
 
-    const [tooltipClosed, setTooltipClosed] = useState(true);
+  const [tooltipType, setTooltipType] = useState(
+    CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type
+  );
 
-    const [tooltipType, setTooltipType] = useState(
+  const newWeb3List = useMemo(() => {
-        CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type
+    // 展示最新的6个节点
-    );
+    return web3List.slice(-6);
+  }, [web3List]);
 
-      const appDiversion = useMemo(() => {
+  const successHandle = async () => {
-        return Apps.map((item) => {
+    await form.validateFields();
-          const findApp = APP_DIVERSION.find(
+    const formValue: any = form.getFieldsValue();
-            (appItem) => item.name === appItem.name
+    if (type.title === DIALOGTYPE.ADDNode.title) {
-          );
+      setOpen(false);
-          return {
+    } else {
-            ...item,
+      const { inbound, outbound } = formValue || {};
-            ...findApp,
+      if (inbound && outbound) {
-          };
+        dispatch(
-        });
+          setProxyInfoProxies({
-      }, []);
+            country_code: inbound,
-
+            ingress_country_code: outbound,
-    const newWeb3List = useMemo(() => {
+          })
-        // 展示最新的6个节点
+        );
-        return web3List.slice(-6);
+        setOpen(false);
-    }, [web3List]);
+      }
-
-    const successHandle = async () => {
-        await form.validateFields();
-        const formValue: any = form.getFieldsValue();
-        if (type.title === DIALOGTYPE.ADDNode.title) {
-            setOpen(false);
-        } else {
-            const { inbound, outbound } = formValue || {};
-            if (inbound && outbound) {
-                dispatch(
-                    setProxyInfoProxies({
-                        country_code: inbound,
-                        ingress_country_code: outbound,
-                    })
-                );
-                setOpen(false);
-            }
-        }
-    };
-
-    const handleClickApp = (item: any) => {
-        setSelectedApp(item);
-    };
-
-    async function handleSelectFile() {
-        try {
-            const selected = await openFile({
-                multiple: false,
-                directory: false,
-                filters: [
-                    {
-                        name: "Excel Files",
-                        extensions: ["xlsx", "xls"], // 移除了扩展名前的点号
-                    },
-                ],
-            });
-            if (selected && typeof selected === "string") {
-                if (selected.includes("验证节点包1")) {
-                    console.log("验证节点包1");
-                    dispatch(setProxiesList1());
-                }
-                if (selected.includes("验证节点包2")) {
-                    console.log("验证节点包2");
-                    dispatch(setProxiesList2());
-                }
-                setOpen(false);
-            }
-        } catch (err) {
-            console.error("Error selecting file:", err);
-        }
     }
+  };
 
-    const ICircuitRequest = useMemo(() => {
+  const handleClickApp = (item: any) => {
-        return {
+    setSelectedApp(item);
-            open,
+  };
-            setOpen,
-            successHandle,
-            dialogLoading,
-            form,
-            type,
-            canSubmit: true,
-            handleSelectFile,
-        };
-    }, [open, dialogLoading, type, handleSelectFile]);
 
-    const nodeSuccessHandle = () => {};
+  async function handleSelectFile() {
+    try {
+      const selected = await openFile({
+        multiple: false,
+        directory: false,
+        filters: [
+          {
+            name: "Excel Files",
+            extensions: ["xlsx", "xls"], // 移除了扩展名前的点号
+          },
+        ],
+      });
+      if (selected && typeof selected === "string") {
+        if (selected.includes("验证节点包1")) {
+          console.log("验证节点包1");
+          dispatch(setProxiesList1());
+        }
+        if (selected.includes("验证节点包2")) {
+          console.log("验证节点包2");
+          dispatch(setProxiesList2());
+        }
+        setOpen(false);
+      }
+    } catch (err) {
+      console.error("Error selecting file:", err);
+    }
+  }
 
-    const ClearNodeDialogProps = useMemo(() => {
+  const ICircuitRequest = useMemo(() => {
-        return {
+    return {
-            open: openNode,
+      open,
-            setOpen: setOpenNode,
+      setOpen,
-            successHandle: nodeSuccessHandle,
+      successHandle,
-            dialogLoading,
+      dialogLoading,
-            form,
+      form,
-            type: nodeType,
+      type,
-            canSubmit: true,
+      canSubmit: true,
-        };
+      handleSelectFile,
-    }, [openNode, dialogLoading, nodeType]);
+    };
+  }, [open, dialogLoading, type, handleSelectFile]);
 
-    // useEffect(() => {
+  const nodeSuccessHandle = () => {};
-    //     dispatch(randomUpdateWeb3List());
-    //     dispatch(randomUpdateWeb3List2());
-    //     // 每1.5秒更新一次
-    //     const interval = setInterval(() => {
-    //         dispatch(randomUpdateWeb3List());
-    //         dispatch(randomUpdateWeb3List2());
-    //     }, 1500);
 
-    //     return () => clearInterval(interval);
+  const ClearNodeDialogProps = useMemo(() => {
-    // }, [dispatch]);
+    return {
+      open: openNode,
+      setOpen: setOpenNode,
+      successHandle: nodeSuccessHandle,
+      dialogLoading,
+      form,
+      type: nodeType,
+      canSubmit: true,
+    };
+  }, [openNode, dialogLoading, nodeType]);
 
-    useEffect(()=>{
+  const [dataInfo, setDataInfo] = useState<any>({
-        blockChainApi.getLatestBlock().then((res)=>{
+    passAuthentication: {
-            console.log("res",res)
+      type: "PASS_AUTHENTICATION",
-            setBlockChain(res)
+      name: "通行认证",
-        })
+      startPoint: "GL",
-      
+      endPoint: "CA",
-    },[])
+      authenticationPoint: [
+        [-103.346771, 54.130366],
+        [-120.346771, 52.130366],
+        [-108.346771, 48.130366],
+        [-98.346771, 46.130366],
+        [-106.346771, 48.450366],
+        [-101.346771, 53.130366],
+        [-123.346771, 58.130366],
+        [-111.346771, 65.443366],
+        [-108.346771, 54.130366],
+        [-116.346771, 59.130366],
+        [-97.346771, 61.130366],
+        [-95.346771, 63.130366],
+        [-113.346771, 58.840366],
+        [-99.346771, 59.130366],
+        [-102.346771, 68.130366],
+      ],
+      data: [
+        {
+          country_code: "gl",
+          ingress_country_code: "dz",
+        },
+        {
+          country_code: "br",
+          ingress_country_code: "dz",
+        },
+        {
+          country_code: "dz",
+          ingress_country_code: "ru",
+        },
+        {
+          country_code: "dz",
+          ingress_country_code: "cn",
+        },
+        {
+          country_code: "ru",
+          ingress_country_code: "za",
+        },
+      ],
+      isLine: true,
+    },
+    trafficObfuscation: [],
+    nestedEncryption: [],
+    dynamicRouteGeneration: [],
+    applicationDiversion: [],
+  });
 
-    
+  const appDiversion = useMemo(() => {
+    return Apps.map((item) => {
+      const findApp = dataInfo.applicationDiversion.find(
+        (appItem: any) => item.name === appItem.name
+      );
+      return {
+        ...item,
+        ...findApp,
+      };
+    });
+  }, [dataInfo.applicationDiversion]);
 
-    return (
+  const initData = async () => {
-        <div className="decentralized w-full h-full flex flex-col  relative">
+    const passAuthentication = await getPassAuthentication();
-            <div className="box"></div>
+    const trafficObfuscation = await getTrafficObfuscation();
-            <div className="w-full flex items-center justify-center relative">
+    const nestedEncryption = await getNestedEncryption();
-                {/* <img
+    const applicationDiversion = await getApplicationDiversion();
+    const dynamicRouteGeneration = await getDynamicRouteGeneration();
+
+    setDataInfo({
+      passAuthentication: passAuthentication.data,
+      trafficObfuscation: [trafficObfuscation.data],
+      nestedEncryption: [nestedEncryption.data],
+      applicationDiversion: applicationDiversion.data,
+      dynamicRouteGeneration: dynamicRouteGeneration.data,
+    });
+  };
+  useEffect(() => {
+    // blockChainApi.getLatestBlock().then((res) => {
+    //   console.log("res", res);
+    //   setBlockChain(res);
+    // });
+    initData();
+  }, []);
+
+  useEffect(() => {
+    console.log(dataInfo, "awaidataInfodataInfotawait");
+  }, [dataInfo]);
+
+  return (
+    <div className="decentralized w-full h-full flex flex-col  relative">
+      <div className="box"></div>
+      <div className="w-full flex items-center justify-center relative">
+        {/* <img
                     className="w-[1693px] h-[271px] absolute top-[160px] left-[50%] translate-x-[-50%] z-10"
                     src={linePng}
                     alt=""
                 /> */}
-                {/* <div className="w-[90%] absolute top-0 left-0"></div> */}
+        {/* <div className="w-[90%] absolute top-0 left-0"></div> */}
-                <div className="w-[1693px] h-full flex items-center justify-center absolute top-[90px]">
+        <div className="w-[1693px] h-full flex items-center justify-center absolute top-[90px]">
-                    <div className="w-[795px] h-full flex items-center justify-end gap-10 z-10">
+          <div className="w-[795px] h-full flex items-center justify-end gap-10 z-10">
-                        <div className="carousel-container !justify-end">
+            <div className="carousel-container !justify-end">
-                            {newWeb3List.map((item, index) => {
+              {newWeb3List.map((item, index) => {
-                                // 随机0-10的整数
+                // 随机0-10的整数
-                                const randomDelay =
+                const randomDelay = Math.floor(Math.random() * 35) * 1;
-                                    Math.floor(Math.random() * 35) * 1;
+                return (
-                                return (
+                  <div
-                                    <div
+                    className="w-[105px] relative carousel-item"
-                                        className="w-[105px] relative carousel-item"
+                    key={`${item.id}-${index}`}
-                                        key={`${item.id}-${index}`}
+                    style={{
-                                        style={{
+                      viewTransitionName: `web3-item-1-${index}`,
-                                            viewTransitionName: `web3-item-1-${index}`,
+                    }}
-                                        }}
+                  >
-                                    >
+                    <div className="w-[calc(100%-10px)] h-[calc(100%-10px)] absolute top-[6px] left-[8px] overflow-hidden">
-                                        <div className="w-[calc(100%-10px)] h-[calc(100%-10px)] absolute top-[6px] left-[8px] overflow-hidden">
+                      <img
-                                            <img
+                        className={cn(
-                                                className={cn(
+                          "!max-w-[186px] h-[160px] relative opacity-50 mix-blend-soft-light z-10"
-                                                    "!max-w-[186px] h-[160px] relative opacity-50 mix-blend-soft-light z-10"
+                        )}
-                                                )}
+                        style={{
-                                                style={{
+                          left: `${-30 - randomDelay}px`,
-                                                    left: `${
+                          top: `${-30 - randomDelay}px`,
-                                                        -30 - randomDelay
+                        }}
-                                                    }px`,
+                        src={web3BoxGif}
-                                                    top: `${
+                      />
-                                                        -30 - randomDelay
+                    </div>
-                                                    }px`,
+                    <img src={Web3Box2Png} className="w-full h-full" />
-                                                }}
+                    <div className="absolute bottom-[-170px] left-[55px] h-[160px] w-[2px] bg-gradient-to-bl  to-[#4820C9]/0 from-[#7D82FF] web3-line"></div>
-                                                src={web3BoxGif}
+                    <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pl-1.5 z-20">
-                                            />
+                      {/* <div className="justify-start text-pink-600 text-2xl font-normal font-['Oswald'] absolute top-[-34px] left-[50%] translate-x-[-50%]">
-                                        </div>
-                                        <img
-                                            src={Web3Box2Png}
-                                            className="w-full h-full"
-                                        />
-                                        <div className="absolute bottom-[-170px] left-[55px] h-[160px] w-[2px] bg-gradient-to-bl  to-[#4820C9]/0 from-[#7D82FF] web3-line"></div>
-                                        <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pl-1.5 z-20">
-                                            {/* <div className="justify-start text-pink-600 text-2xl font-normal font-['Oswald'] absolute top-[-34px] left-[50%] translate-x-[-50%]">
                                                 {item.transactions}
                                             </div> */}
-                                            <div className="text-lg">
+                      <div className="text-lg">{item.balance} SOL</div>
-                                                {item.balance} SOL
+                      <div className="!text-xs my-[10px]">
-                                            </div>
+                        {item.numberTransactions}笔交易
-                                            <div className="!text-xs my-[10px]">
+                      </div>
-                                                {item.numberTransactions}笔交易
+                      <div className="!text-sm opacity-60">
-                                            </div>
+                        {item.upDatedAt}
-                                            <div className="!text-sm opacity-60">
+                        分钟内
-                                                {item.upDatedAt}
+                      </div>
-                                                分钟内
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </div>
                     </div>
-                    <div className="w-fit mt-6 mx-[20px] flex-shrink-0">
+                  </div>
-                        <VectorSlideSvg />
+                );
-                    </div>
+              })}
-                    <div className="w-[795px] h-full flex items-center justify-start gap-10 ">
-                        <div className="carousel-container justify-start">
-                            {web3List2.map((item, index) => {
-                                const randomDelay =
-                                    Math.floor(Math.random() * 35) * 1;
-                                return (
-                                    <div
-                                        key={`${item.id}-${index}`}
-                                        className="w-[105px] relative carousel-item"
-                                        style={{
-                                            viewTransitionName: `web3-item-2-${index}`,
-                                        }}
-                                    >
-                                        <div className="w-[calc(100%-10px)] h-[calc(100%-10px)] absolute top-[6px] left-[8px] overflow-hidden">
-                                            <img
-                                                className="!max-w-[186px] h-[160px] relative left-[-30px] top-[-30px]  opacity-50 mix-blend-soft-light z-10"
-                                                src={web3BoxGif}
-                                            />
-                                        </div>
-                                        <img
-                                            src={Web3BoxPng}
-                                            style={{
-                                                left: `${-30 - randomDelay}px`,
-                                                top: `${-30 - randomDelay}px`,
-                                            }}
-                                            className="w-full h-full"
-                                        />
-                                        <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pl-1.5">
-                                            <div className="text-lg">
-                                                {item.balance} SOL
-                                            </div>
-                                            <div className="!text-xs my-[10px]">
-                                                {item.numberTransactions}笔交易
-                                            </div>
-                                            <div className="!text-sm opacity-60">
-                                                {item.upDatedAt}
-                                                分钟内
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    </div>
-                </div>
             </div>
-            <div className="mt-2 w-full h-full flex-1">
+          </div>
-                <WorldGeo
+          <div className="w-fit mt-6 mx-[20px] flex-shrink-0">
-                    newHomeProxies={newHomeProxies}
+            <VectorSlideSvg />
-                    selectedApp={selectedApp}
+          </div>
-                    tooltipType={tooltipType}
+          <div className="w-[795px] h-full flex items-center justify-start gap-10 ">
-                    tooltipClosed={tooltipClosed}
+            <div className="carousel-container justify-start">
-                    setTooltipClosed={setTooltipClosed}
+              {web3List2.map((item, index) => {
-                />
+                const randomDelay = Math.floor(Math.random() * 35) * 1;
+                return (
+                  <div
+                    key={`${item.id}-${index}`}
+                    className="w-[105px] relative carousel-item"
+                    style={{
+                      viewTransitionName: `web3-item-2-${index}`,
+                    }}
+                  >
+                    <div className="w-[calc(100%-10px)] h-[calc(100%-10px)] absolute top-[6px] left-[8px] overflow-hidden">
+                      <img
+                        className="!max-w-[186px] h-[160px] relative left-[-30px] top-[-30px]  opacity-50 mix-blend-soft-light z-10"
+                        src={web3BoxGif}
+                      />
+                    </div>
+                    <img
+                      src={Web3BoxPng}
+                      style={{
+                        left: `${-30 - randomDelay}px`,
+                        top: `${-30 - randomDelay}px`,
+                      }}
+                      className="w-full h-full"
+                    />
+                    <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pl-1.5">
+                      <div className="text-lg">{item.balance} SOL</div>
+                      <div className="!text-xs my-[10px]">
+                        {item.numberTransactions}笔交易
+                      </div>
+                      <div className="!text-sm opacity-60">
+                        {item.upDatedAt}
+                        分钟内
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
             </div>
-            <div className="absolute bottom-[10px] left-[50%] translate-x-[-50%] w-[calc(100%-51px)] p-6  inline-flex justify-start items-center gap-10">
+          </div>
-                <img src={OpenProxyPng} className="w-[193px] h-[90px] cursor-pointer" alt="" />
+        </div>
-                {/* <div
+      </div>
+      <div className="mt-2 w-full h-full flex-1">
+        <WorldGeo
+          dataInfo={dataInfo}
+          selectedApp={selectedApp}
+          tooltipType={tooltipType}
+          tooltipClosed={tooltipClosed}
+          setTooltipClosed={setTooltipClosed}
+        />
+      </div>
+      <div className="absolute bottom-[10px] left-[50%] translate-x-[-50%] w-[calc(100%-51px)] p-6  inline-flex justify-start items-center gap-10">
+        <img
+          src={OpenProxyPng}
+          className="w-[193px] h-[90px] cursor-pointer"
+          alt=""
+        />
+        {/* <div
                     className="bt1 cursor-pointer"
                     onClick={() => {
                         setTooltipType(
@@ -340,26 +393,26 @@ const NewHome = () => {
                 >
                     流量混淆
                 </div> */}
-                {appDiversion.map((item) => {
+        {appDiversion.map((item) => {
-                    return (
+          return (
-                        <div
+            <div
-                            key={item.name}
+              key={item.name}
-                            className="flex items-center justify-center w-16 h-16 relative  rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
+              className="flex items-center justify-center w-16 h-16 relative  rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
-                            onClick={() => handleClickApp(item)}
+              onClick={() => handleClickApp(item)}
-                        >
+            >
-                            {selectedApp?.name === item?.name ? (
+              {selectedApp?.name === item?.name ? (
-                                <item.activeIcon />
+                <item.activeIcon />
-                            ) : (
+              ) : (
-                                <item.icon />
+                <item.icon />
-                            )}
+              )}
-                        </div>
-                    );
-                })}
             </div>
-            <FormAlertDialog {...ICircuitRequest} />
+          );
-            <ClearNodeDialog {...ClearNodeDialogProps} />
+        })}
-        </div>
+      </div>
-    );
+      <FormAlertDialog {...ICircuitRequest} />
+      <ClearNodeDialog {...ClearNodeDialogProps} />
+    </div>
+  );
 };
 
 export default NewHome;