From 652aea182983c395723190556ff7e1fad3084bc3 Mon Sep 17 00:00:00 2001 From: liyuanhu Date: Wed, 16 Apr 2025 19:00:51 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=A6=96=E9=A1=B5=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 + src/api/flying-line.ts | 27 + .../components/world-geo copy 2.tsx | 1 - .../components/world-geo copy.tsx | 1 - .../components/world-geo.tsx | 143 +--- src/pages/anti-forensics-forwarding/index.tsx | 144 ++-- src/pages/new-home/components/world-geo.tsx | 20 +- src/pages/new-home/index.tsx | 627 ++++++++++-------- 8 files changed, 488 insertions(+), 476 deletions(-) create mode 100644 src/api/flying-line.ts diff --git a/.env b/.env index bd2f260..cdb5aed 100644 --- a/.env +++ b/.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" diff --git a/src/api/flying-line.ts b/src/api/flying-line.ts new file mode 100644 index 0000000..91583f4 --- /dev/null +++ b/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`); +} diff --git a/src/pages/anti-forensics-forwarding/components/world-geo copy 2.tsx b/src/pages/anti-forensics-forwarding/components/world-geo copy 2.tsx index 0d956c7..472bb7b 100644 --- a/src/pages/anti-forensics-forwarding/components/world-geo copy 2.tsx +++ b/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}|}`; }, }, diff --git a/src/pages/anti-forensics-forwarding/components/world-geo copy.tsx b/src/pages/anti-forensics-forwarding/components/world-geo copy.tsx index 50698c7..33e7b69 100644 --- a/src/pages/anti-forensics-forwarding/components/world-geo copy.tsx +++ b/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}|}`; }, }, diff --git a/src/pages/anti-forensics-forwarding/components/world-geo.tsx b/src/pages/anti-forensics-forwarding/components/world-geo.tsx index cbd969a..7877a68 100644 --- a/src/pages/anti-forensics-forwarding/components/world-geo.tsx +++ b/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 pointB = [-106.346771, 56.130366]; + const pointA = geoCoordMap[currentValue[0]?.startPoint ?? "GL"]; + 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( - newHomeProxies[0]?.authenticationPoint || [], - series - ); - } + createRipplePointsFromCoordinates( + currentValue[0]?.authenticationPoint || [], + series + ); } const option = { @@ -1250,7 +1143,7 @@ export const WorldGeo = memo( customTooltipRef.current = null; customTooltip2Ref.current = null; }; - }, [tooltipClosed, tooltipType]); + }, [tooltipClosed, tooltipType, currentValue]); return (
diff --git a/src/pages/anti-forensics-forwarding/index.tsx b/src/pages/anti-forensics-forwarding/index.tsx index c2bfae7..e7a1767 100644 --- a/src/pages/anti-forensics-forwarding/index.tsx +++ b/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(null); + const [dataInfo, setDataInfo] = useState(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([]); const appDiversion = useMemo(() => { return Apps.map((item) => { - const findApp = APP_DIVERSION.find( - (appItem) => item.name === appItem.name + const findApp = appData.find( + (appItem:any) => item.name === appItem.name ); return { ...item, ...findApp, }; }); - }, []); - const currentValue = useMemo(() => { - let value = null; - 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]); + }, [appData]); + const initData = async () => { + const applicationDiversion = await getApplicationDiversion(); - const handleClickApp = (item: any) => { - console.log("item", item); - setSelectedApp(item); + setAppData(applicationDiversion.data); }; + useEffect(() => { + getDataInfo(); + },[tooltipType]) - useEffect(()=>{ - ()=>{ - setTooltipClosed(false); - } - },[]) + useEffect(() => { + initData(); + () => { + setTooltipClosed(false); + }; + }, []); return (
- {tooltipType === CONST_TOOLTIP_TYPE.APP_DIVERSION.type && appDiversion.map((item) => { - return ( -
handleClickApp(item)} - > - {selectedApp?.name === item?.name ? ( - - ) : ( - - )} -
- ); - })} + {tooltipType === CONST_TOOLTIP_TYPE.APP_DIVERSION.type && + appDiversion.map((item) => { + return ( +
handleClickApp(item)} + > + {selectedApp?.name === item?.name ? ( + + ) : ( + + )} +
+ ); + })}
{ }; 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(null); const labelsRef = useRef([]); 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 pointB = [-106.346771, 56.130366]; + const pointA =geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"]; + 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); diff --git a/src/pages/new-home/index.tsx b/src/pages/new-home/index.tsx index 1790d08..e51f0ff 100644 --- a/src/pages/new-home/index.tsx +++ b/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, - setProxiesList1, - setProxiesList2, + setProxyInfoProxies, + setProxiesList1, + 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: { - title: "添加节点", - desc: "", - successText: "添加", - }, - AddNetwork: { - title: "构建网络", - desc: "", - successText: "构建", - }, + ADDNode: { + title: "添加节点", + desc: "", + successText: "添加", + }, + AddNetwork: { + title: "构建网络", + desc: "", + successText: "构建", + }, }; export const NODEDIALOGTYPE = { - ClearFailNode: { - title: "清除掉线节点", - desc: "", - successText: "清除", - }, - ClearWargingNode: { - title: "恶意节点", - desc: "", - successText: "清除", - }, + ClearFailNode: { + title: "清除掉线节点", + desc: "", + successText: "清除", + }, + ClearWargingNode: { + title: "恶意节点", + desc: "", + successText: "清除", + }, }; const NewHome = () => { - const dispatch = useDispatch(); - const { web3List, web3List2, newHomeProxies } = useSelector( - (state: RootState) => state.web3Reducer - ); + const dispatch = useDispatch(); + const { web3List, web3List2, newHomeProxies } = useSelector( + (state: RootState) => state.web3Reducer + ); - const [form] = Form.useForm(); - const [open, setOpen] = useState(false); - const [openNode, setOpenNode] = useState(false); - const [dialogLoading] = useState(false); - const [selectedApp, setSelectedApp] = useState(null); - const [type, setType] = useState(DIALOGTYPE.ADDNode); - const [nodeType, setNodeType] = useState( - NODEDIALOGTYPE.ClearFailNode - ); + const [form] = Form.useForm(); + const [open, setOpen] = useState(false); + const [openNode, setOpenNode] = useState(false); + const [dialogLoading] = useState(false); + const [selectedApp, setSelectedApp] = useState(null); + const [type, setType] = useState(DIALOGTYPE.ADDNode); + const [nodeType, setNodeType] = useState( + NODEDIALOGTYPE.ClearFailNode + ); - const [blockChain, setBlockChain] = useState(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_TOOLTIP_TYPE.NESTED_ENCRYPTION.type - ); + const newWeb3List = useMemo(() => { + // 展示最新的6个节点 + return web3List.slice(-6); + }, [web3List]); - const appDiversion = useMemo(() => { - return Apps.map((item) => { - const findApp = APP_DIVERSION.find( - (appItem) => item.name === appItem.name - ); - return { - ...item, - ...findApp, - }; - }); - }, []); - - const newWeb3List = useMemo(() => { - // 展示最新的6个节点 - return web3List.slice(-6); - }, [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 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 ICircuitRequest = useMemo(() => { - return { - open, - setOpen, - successHandle, - dialogLoading, - form, - type, - canSubmit: true, - handleSelectFile, - }; - }, [open, dialogLoading, type, handleSelectFile]); + const handleClickApp = (item: any) => { + setSelectedApp(item); + }; - 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(() => { - return { - open: openNode, - setOpen: setOpenNode, - successHandle: nodeSuccessHandle, - dialogLoading, - form, - type: nodeType, - canSubmit: true, - }; - }, [openNode, dialogLoading, nodeType]); + const ICircuitRequest = useMemo(() => { + return { + open, + setOpen, + successHandle, + dialogLoading, + form, + type, + canSubmit: true, + handleSelectFile, + }; + }, [open, dialogLoading, type, handleSelectFile]); - // useEffect(() => { - // dispatch(randomUpdateWeb3List()); - // dispatch(randomUpdateWeb3List2()); - // // 每1.5秒更新一次 - // const interval = setInterval(() => { - // dispatch(randomUpdateWeb3List()); - // dispatch(randomUpdateWeb3List2()); - // }, 1500); + const nodeSuccessHandle = () => {}; - // return () => clearInterval(interval); - // }, [dispatch]); + const ClearNodeDialogProps = useMemo(() => { + return { + open: openNode, + setOpen: setOpenNode, + successHandle: nodeSuccessHandle, + dialogLoading, + form, + type: nodeType, + canSubmit: true, + }; + }, [openNode, dialogLoading, nodeType]); - useEffect(()=>{ - blockChainApi.getLatestBlock().then((res)=>{ - console.log("res",res) - setBlockChain(res) - }) - - },[]) + const [dataInfo, setDataInfo] = useState({ + passAuthentication: { + type: "PASS_AUTHENTICATION", + 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 passAuthentication = await getPassAuthentication(); + const trafficObfuscation = await getTrafficObfuscation(); + const nestedEncryption = await getNestedEncryption(); + 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 ( +
+
+
+ {/* */} - {/*
*/} -
-
-
- {newWeb3List.map((item, index) => { - // 随机0-10的整数 - const randomDelay = - Math.floor(Math.random() * 35) * 1; - return ( -
-
- -
- -
-
- {/*
+ {/*
*/} +
+
+
+ {newWeb3List.map((item, index) => { + // 随机0-10的整数 + const randomDelay = Math.floor(Math.random() * 35) * 1; + return ( +
+
+ +
+ +
+
+ {/*
{item.transactions}
*/} -
- {item.balance} SOL -
-
- {item.numberTransactions}笔交易 -
-
- {item.upDatedAt} - 分钟内 -
-
-
- ); - })} -
+
{item.balance} SOL
+
+ {item.numberTransactions}笔交易 +
+
+ {item.upDatedAt} + 分钟内 +
-
- -
-
-
- {web3List2.map((item, index) => { - const randomDelay = - Math.floor(Math.random() * 35) * 1; - return ( -
-
- -
- -
-
- {item.balance} SOL -
-
- {item.numberTransactions}笔交易 -
-
- {item.upDatedAt} - 分钟内 -
-
-
- ); - })} -
-
-
+
+ ); + })}
-
- +
+
+ +
+
+
+ {web3List2.map((item, index) => { + const randomDelay = Math.floor(Math.random() * 35) * 1; + return ( +
+
+ +
+ +
+
{item.balance} SOL
+
+ {item.numberTransactions}笔交易 +
+
+ {item.upDatedAt} + 分钟内 +
+
+
+ ); + })}
-
- - {/*
+
+
+
+ +
+
+ + {/*
{ setTooltipType( @@ -340,26 +393,26 @@ const NewHome = () => { > 流量混淆
*/} - {appDiversion.map((item) => { - return ( -
handleClickApp(item)} - > - {selectedApp?.name === item?.name ? ( - - ) : ( - - )} -
- ); - })} + {appDiversion.map((item) => { + return ( +
handleClickApp(item)} + > + {selectedApp?.name === item?.name ? ( + + ) : ( + + )}
- - -
- ); + ); + })} +
+ + +
+ ); }; export default NewHome;