admin/paw-gui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:嵌套加密和流量混淆 改为接口返回的点

Browse Source
This commit is contained in:
liyuanhu 2025-04-16 19:17:30 +08:00
parent 652aea1829
commit 41dba8cb7c
2 changed files with 63 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/new-home/components/world-geo.tsx
View File

@ -58,7 +58,12 @@ export const WorldGeo = memo(
const labelContainerRef = useRef<HTMLDivElement | null>(null); const labelContainerRef = useRef<HTMLDivElement | null>(null);
const labelsRef = useRef<HTMLDivElement[]>([]); const labelsRef = useRef<HTMLDivElement[]>([]);
const mainToData = useMemo(() => { const mainToData = useMemo(() => {
const newList = [ ...dataInfo.passAuthentication.data,...dataInfo.trafficObfuscation,...dataInfo.nestedEncryption,...dataInfo.dynamicRouteGeneration]; const newList = [
...dataInfo.passAuthentication.data,
...dataInfo.trafficObfuscation,
...dataInfo.nestedEncryption,
...dataInfo.dynamicRouteGeneration,
];
// 使用新的数据结构 // 使用新的数据结构
const proxiesList = const proxiesList =
selectedApp && selectedApp ? [...newList, selectedApp] : newList ?? []; selectedApp && selectedApp ? [...newList, selectedApp] : newList ?? [];
@ -163,8 +168,9 @@ export const WorldGeo = memo(
// 定位自定义提示框 - 优化版本 // 定位自定义提示框 - 优化版本
const positionCustomTooltip = () => { const positionCustomTooltip = () => {
if (!customTooltipRef.current || !proxyGeoRef.current) return; if (!customTooltipRef.current || !proxyGeoRef.current) return;
console.log(dataInfo.nestedEncryption?.[0]?.code, "sssss");
// 找到US点 // 找到US点
const coords = geoCoordMap["GL"]; const coords = geoCoordMap[dataInfo.nestedEncryption?.[0]?.code ?? "GL"];
if (!coords) return; if (!coords) return;
try { try {
// 将地理坐标转换为屏幕坐标 // 将地理坐标转换为屏幕坐标
@ -234,7 +240,7 @@ export const WorldGeo = memo(
const positionCustomTooltip2 = () => { const positionCustomTooltip2 = () => {
if (!customTooltip2Ref.current || !proxyGeoRef.current) return; if (!customTooltip2Ref.current || !proxyGeoRef.current) return;
// 找到US点 // 找到US点
const coords = geoCoordMap["ZA"]; const coords = geoCoordMap[dataInfo.trafficObfuscation?.[0]?.code ?? "ZA"];
if (!coords) return; if (!coords) return;
try { try {
// 将地理坐标转换为屏幕坐标 // 将地理坐标转换为屏幕坐标
@ -331,14 +337,14 @@ export const WorldGeo = memo(
if (startPoint) { if (startPoint) {
ripplePoints.push({ ripplePoints.push({
...startPoint, ...startPoint,
color: lineColor // 添加颜色信息 color: lineColor, // 添加颜色信息
}); });
} }
if (endPoint) { if (endPoint) {
ripplePoints.push({ ripplePoints.push({
...endPoint, ...endPoint,
color: lineColor // 添加颜色信息 color: lineColor, // 添加颜色信息
}); });
} }
@ -348,7 +354,7 @@ export const WorldGeo = memo(
// 添加颜色信息到连线数据 // 添加颜色信息到连线数据
solidData[0][1].push({ solidData[0][1].push({
...lineItem, ...lineItem,
color: lineColor // 添加颜色信息 color: lineColor, // 添加颜色信息
} as any); } as any);
} }
// 跳过下一项，因为已经处理了 // 跳过下一项，因为已经处理了
@ -368,14 +374,14 @@ export const WorldGeo = memo(
if (currentPoint) { if (currentPoint) {
ripplePoints.push({ ripplePoints.push({
...currentPoint, ...currentPoint,
color: lineColor // 添加颜色信息 color: lineColor, // 添加颜色信息
}); });
} }
if (nextPoint) { if (nextPoint) {
ripplePoints.push({ ripplePoints.push({
...nextPoint, ...nextPoint,
color: nextItem.color || lineColor // 添加颜色信息 color: nextItem.color || lineColor, // 添加颜色信息
}); });
} }
@ -385,7 +391,7 @@ export const WorldGeo = memo(
// 添加颜色信息到连线数据 // 添加颜色信息到连线数据
solidData[0][1].push({ solidData[0][1].push({
...lineItem, ...lineItem,
color: lineColor // 添加颜色信息 color: lineColor, // 添加颜色信息
} as any); } as any);
} }
} }
@ -396,7 +402,7 @@ export const WorldGeo = memo(
solidData, solidData,
otherLineList, otherLineList,
ripplePoints, ripplePoints,
pointColors pointColors,
}; };
}; };
// 获取连线经纬度数据 // 获取连线经纬度数据
@ -415,8 +421,8 @@ export const WorldGeo = memo(
res.push({ res.push({
coords: [fromCoord, toCoord], coords: [fromCoord, toCoord],
lineStyle: { lineStyle: {
color: lineColor // 使用自定义颜色 color: lineColor, // 使用自定义颜色
} },
}); });
// 计算中点，考虑曲线的弧度 // 计算中点，考虑曲线的弧度
const curveness = -0.4; // 与飞线弧度相同 const curveness = -0.4; // 与飞线弧度相同
@ -569,7 +575,7 @@ export const WorldGeo = memo(
value: geoCoordMap[dataItem[0].country_code], value: geoCoordMap[dataItem[0].country_code],
datas: { datas: {
country_code: dataItem[0].country_code, country_code: dataItem[0].country_code,
color: color // 保存颜色信息 color: color, // 保存颜色信息
}, },
}; };
}); });
@ -587,7 +593,7 @@ export const WorldGeo = memo(
itemStyle: { itemStyle: {
color: function (params: any) { color: function (params: any) {
return params.data.datas.color || "#0ea5e9"; return params.data.datas.color || "#0ea5e9";
} },
}, },
symbol: "circle", symbol: "circle",
symbolSize: outerSize, symbolSize: outerSize,
@ -646,7 +652,7 @@ export const WorldGeo = memo(
itemStyle: { itemStyle: {
color: function (params: any) { color: function (params: any) {
return params.data.datas.color || "#0ea5e9"; return params.data.datas.color || "#0ea5e9";
} },
}, },
symbol: "circle", symbol: "circle",
symbolSize: 8, symbolSize: 8,
@ -687,7 +693,7 @@ export const WorldGeo = memo(
value: point.value, value: point.value,
datas: { datas: {
country_code: point.country_code, country_code: point.country_code,
color: point.color || "#0ea5e9" // 保存颜色信息 color: point.color || "#0ea5e9", // 保存颜色信息
}, },
})), })),
} as echarts.SeriesOption; } as echarts.SeriesOption;
@ -725,7 +731,8 @@ export const WorldGeo = memo(
return; return;
} }
const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null; const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
const lastExitColor = (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9"; const lastExitColor =
(item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
// 添加飞行线 // 添加飞行线
series.push({ series.push({
@ -764,7 +771,8 @@ export const WorldGeo = memo(
otherLineList.forEach((line: any) => { otherLineList.forEach((line: any) => {
line.forEach((item: any) => { line.forEach((item: any) => {
const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null; const lastExit = item[1]?.[item[1].length - 1]?.[1] ?? null;
const lastExitColor = (item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9"; const lastExitColor =
(item[1]?.[item[1].length - 1] as any)?.color || "#0ea5e9";
// 添加虚线 // 添加虚线
series.push({ series.push({
@ -789,7 +797,11 @@ export const WorldGeo = memo(
series.push(...pathPoints); series.push(...pathPoints);
// 添加出口节点的双层效果（次要路径） // 添加出口节点的双层效果（次要路径）
if (lastExit) { if (lastExit) {
const exitNodes = createDualLayerPoint(lastExit, false, lastExitColor); const exitNodes = createDualLayerPoint(
lastExit,
false,
lastExitColor
);
series.push(...exitNodes); series.push(...exitNodes);
} }
}); });
@ -868,7 +880,8 @@ export const WorldGeo = memo(
// 创建A点和B点，并添加飞线和标签 // 创建A点和B点，并添加飞线和标签
const createSpecialPoints = (series: echarts.SeriesOption[]) => { const createSpecialPoints = (series: echarts.SeriesOption[]) => {
// 定义点A和点B的坐标 // 定义点A和点B的坐标
const pointA =geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"]; const pointA =
geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"];
const pointB = geoCoordMap[dataInfo.passAuthentication.endPoint ?? "CA"]; const pointB = geoCoordMap[dataInfo.passAuthentication.endPoint ?? "CA"];
const newPointB = [pointB[0] + 14, pointB[1] + 10]; const newPointB = [pointB[0] + 14, pointB[1] + 10];
// 添加A点 - 带涟漪效果的双层点 // 添加A点 - 带涟漪效果的双层点
@ -1214,7 +1227,7 @@ export const WorldGeo = memo(
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
console.log(tooltipClosed,'tooltipClosedtooltipClosed') console.log(tooltipClosed, "tooltipClosedtooltipClosed");
if (tooltipClosed) { if (tooltipClosed) {
createCustomTooltip(); createCustomTooltip();
createCustomTooltip2(); createCustomTooltip2();
@ -1230,7 +1243,12 @@ export const WorldGeo = memo(
customTooltipRef.current = null; customTooltipRef.current = null;
customTooltip2Ref.current = null; customTooltip2Ref.current = null;
}; };
}, [tooltipClosed, tooltipType]); }, [
tooltipClosed,
tooltipType,
dataInfo.nestedEncryption,
dataInfo.trafficObfuscation,
]);
return ( return (
<div className="flex-1 h-full flex flex-col"> <div className="flex-1 h-full flex flex-col">
<div id="screenGeo" className="flex-1"></div> <div id="screenGeo" className="flex-1"></div>

3
src/pages/new-home/index.tsx
View File

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