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

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

@ -34,7 +34,7 @@ export const WorldGeo = memo(
tooltipClosed, tooltipClosed,
setTooltipClosed, setTooltipClosed,
}: { }: {
dataInfo:any; dataInfo: any;
selectedApp: any; selectedApp: any;
tooltipType: string; tooltipType: string;
tooltipClosed: boolean; tooltipClosed: boolean;
@ -58,10 +58,15 @@ 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 ?? [];
// 初始化数据数组 - 不再包含 startCountry // 初始化数据数组 - 不再包含 startCountry
const data: any = []; const data: any = [];
// 遍历代理列表 // 遍历代理列表
@ -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 {
// 将地理坐标转换为屏幕坐标 // 将地理坐标转换为屏幕坐标
@ -301,7 +307,7 @@ export const WorldGeo = memo(
const ripplePoints: any[] = []; const ripplePoints: any[] = [];
// 收集每个点的颜色信息 // 收集每个点的颜色信息
const pointColors: Record<string, string> = {}; const pointColors: Record<string, string> = {};
// 处理主路径数据 // 处理主路径数据
for (let i = 0; i < mainToData.length; i++) { for (let i = 0; i < mainToData.length; i++) {
// 如果是最后一个元素，则跳过（因为没有下一个元素作为终点） // 如果是最后一个元素，则跳过（因为没有下一个元素作为终点）
@ -312,43 +318,43 @@ export const WorldGeo = memo(
const countryCode = currentItem.country_code.toUpperCase(); const countryCode = currentItem.country_code.toUpperCase();
// 获取颜色信息 // 获取颜色信息
const lineColor = currentItem.color || "#0ea5e9"; // 默认颜色 const lineColor = currentItem.color || "#0ea5e9"; // 默认颜色
// 保存点的颜色信息 // 保存点的颜色信息
pointColors[countryCode] = lineColor; pointColors[countryCode] = lineColor;
// 如果当前项是起点，下一项是终点 // 如果当前项是起点，下一项是终点
if (currentItem.type === "start" && nextItem.type === "end") { if (currentItem.type === "start" && nextItem.type === "end") {
const startCode = countryCode; const startCode = countryCode;
const endCode = nextItem.country_code.toUpperCase(); const endCode = nextItem.country_code.toUpperCase();
// 保存终点的颜色信息 // 保存终点的颜色信息
pointColors[endCode] = lineColor; pointColors[endCode] = lineColor;
// 无论是否连线，都添加点的涟漪效果 // 无论是否连线，都添加点的涟漪效果
const startPoint = createCountryRipple(startCode); const startPoint = createCountryRipple(startCode);
const endPoint = createCountryRipple(endCode); const endPoint = createCountryRipple(endCode);
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, // 添加颜色信息
}); });
} }
// 检查是否应该绘制连线 // 检查是否应该绘制连线
if (currentItem.isLine !== false) { if (currentItem.isLine !== false) {
const lineItem = getLineItem(startCode, endCode); const lineItem = getLineItem(startCode, endCode);
// 添加颜色信息到连线数据 // 添加颜色信息到连线数据
solidData[0][1].push({ solidData[0][1].push({
...lineItem, ...lineItem,
color: lineColor // 添加颜色信息 color: lineColor, // 添加颜色信息
} as any); } as any);
} }
// 跳过下一项，因为已经处理了 // 跳过下一项，因为已经处理了
@ -357,35 +363,35 @@ export const WorldGeo = memo(
// 常规情况：当前项到下一项 // 常规情况：当前项到下一项
else { else {
const nextCountryCode = nextItem.country_code.toUpperCase(); const nextCountryCode = nextItem.country_code.toUpperCase();
// 保存下一个点的颜色信息 // 保存下一个点的颜色信息
pointColors[nextCountryCode] = nextItem.color || lineColor; pointColors[nextCountryCode] = nextItem.color || lineColor;
// 无论是否连线，都添加点的涟漪效果 // 无论是否连线，都添加点的涟漪效果
const currentPoint = createCountryRipple(countryCode); const currentPoint = createCountryRipple(countryCode);
const nextPoint = createCountryRipple(nextCountryCode); const nextPoint = createCountryRipple(nextCountryCode);
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, // 添加颜色信息
}); });
} }
// 检查是否应该绘制连线 // 检查是否应该绘制连线
if (currentItem.isLine !== false) { if (currentItem.isLine !== false) {
const lineItem = getLineItem(countryCode, nextCountryCode); const lineItem = getLineItem(countryCode, nextCountryCode);
// 添加颜色信息到连线数据 // 添加颜色信息到连线数据
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,
}; };
}; };
// 获取连线经纬度数据 // 获取连线经纬度数据
@ -410,13 +416,13 @@ export const WorldGeo = memo(
const fromCountry = dataIndex?.[0]?.country_code ?? ""; const fromCountry = dataIndex?.[0]?.country_code ?? "";
const toCountry = dataIndex?.[1]?.country_code ?? ""; const toCountry = dataIndex?.[1]?.country_code ?? "";
const lineColor = (dataIndex as any)?.color || "#0ea5e9"; // 获取线条颜色 const lineColor = (dataIndex as any)?.color || "#0ea5e9"; // 获取线条颜色
if (fromCoord && toCoord) { if (fromCoord && toCoord) {
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, // 保存颜色信息
}, },
}; };
}); });
@ -585,9 +591,9 @@ export const WorldGeo = memo(
zlevel: 3, zlevel: 3,
// 使用回调函数根据数据项设置颜色 // 使用回调函数根据数据项设置颜色
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,
@ -644,9 +650,9 @@ export const WorldGeo = memo(
zlevel: 3, zlevel: 3,
// 使用回调函数根据数据项设置颜色 // 使用回调函数根据数据项设置颜色
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,8 +731,9 @@ 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({
name: item[0], name: item[0],
@ -764,8 +771,9 @@ 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({
name: item[0], name: item[0],
@ -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,8 +880,9 @@ 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 =
const pointB =geoCoordMap[dataInfo.passAuthentication.endPoint ??"CA"]; geoCoordMap[dataInfo.passAuthentication.startPoint ?? "GL"];
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点 - 带涟漪效果的双层点
series.push( series.push(
@ -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,11 +1243,16 @@ 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>
</div> </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
); );