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

feat:mock了一下后端数据 以及logs日志的接受传输格式,完善首页流量混淆和嵌套加密交互

Browse Source
This commit is contained in:
liyuanhu 2025-04-27 11:16:17 +08:00
parent 15bb6d8bc0
commit 5151bd35d0
3 changed files with 135 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/anti-dark-analysis-network/components/world-geo.tsx
View File

@ -7,7 +7,6 @@ import worldGeoJson from "@/assets/echarts-map/json/world.json";
import { geoCoordMap, countryNameMap, countryCodeMap } from "@/data"; import { geoCoordMap, countryNameMap, countryCodeMap } from "@/data";
import { getUrl } from "@/lib/utils"; import { getUrl } from "@/lib/utils";
interface LinesItemType { interface LinesItemType {
name: string; name: string;
country_code: string; country_code: string;
@ -17,7 +16,6 @@ interface LinesItemType {
type LinesDataType = [LinesItemType, LinesItemType]; type LinesDataType = [LinesItemType, LinesItemType];
type LinesType = [string, LinesDataType[]]; type LinesType = [string, LinesDataType[]];
// 创建左侧自定义提示框组件 // 创建左侧自定义提示框组件
const CustomTooltipLeft = ({ const CustomTooltipLeft = ({
logs = [], logs = [],
@ -25,17 +23,17 @@ const CustomTooltipLeft = ({
tooltipRef, tooltipRef,
title, title,
}: { }: {
logs?: string[], logs?: string[];
onClose: () => void, onClose: () => void;
tooltipRef: React.RefObject<HTMLDivElement>, tooltipRef: React.RefObject<HTMLDivElement>;
title: string, title: string;
}) => { }) => {
const [visibleLogs, setVisibleLogs] = useState<string[]>([]); const [visibleLogs, setVisibleLogs] = useState<string[]>([]);
const [isComplete, setIsComplete] = useState(false); const [isComplete, setIsComplete] = useState(false);
// 过滤掉空日志 // 过滤掉空日志
const filteredLogs = useMemo(() => { const filteredLogs = useMemo(() => {
return logs.filter(log => log && log.trim() !== ''); return logs.filter((log) => log && log.trim() !== "");
}, [logs]); }, [logs]);
// 使用useEffect实现逐条显示日志的效果 // 使用useEffect实现逐条显示日志的效果
@ -60,7 +58,7 @@ const CustomTooltipLeft = ({
const timer = setInterval(() => { const timer = setInterval(() => {
if (currentIndex < filteredLogs.length) { if (currentIndex < filteredLogs.length) {
setVisibleLogs(prev => [...prev, filteredLogs[currentIndex]]); setVisibleLogs((prev) => [...prev, filteredLogs[currentIndex]]);
currentIndex++; currentIndex++;
// 如果已经是最后一条，设置完成状态 // 如果已经是最后一条，设置完成状态
@ -85,7 +83,8 @@ const CustomTooltipLeft = ({
useEffect(() => { useEffect(() => {
if (logsContainerRef.current && visibleLogs.length > 0) { if (logsContainerRef.current && visibleLogs.length > 0) {
logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight; logsContainerRef.current.scrollTop =
logsContainerRef.current.scrollHeight;
} }
}, [visibleLogs]); }, [visibleLogs]);
@ -97,14 +96,17 @@ const CustomTooltipLeft = ({
position: "fixed", position: "fixed",
zIndex: 1000, zIndex: 1000,
pointerEvents: "auto", pointerEvents: "auto",
backgroundColor: "transparent" backgroundColor: "transparent",
}} }}
> >
<div className="tooltip-content"> <div className="tooltip-content">
<div className="fill-left"></div> <div className="fill-left"></div>
<div className="tip-box-left"> <div className="tip-box-left">
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<div className="label" style={{ color: "white", fontWeight: "bold" }}> <div
className="label"
style={{ color: "white", fontWeight: "bold" }}
>
{title} {title}
</div> </div>
<img <img
@ -123,20 +125,22 @@ const CustomTooltipLeft = ({
> >
{visibleLogs.length > 0 ? ( {visibleLogs.length > 0 ? (
<ul className="logs-list space-y-1.5"> <ul className="logs-list space-y-1.5">
{visibleLogs.map((log, index) => ( {visibleLogs.map(
log && log.trim() !== '' && ( (log, index) =>
<li log &&
key={index} log.trim() !== "" && (
className="log-item text-sm text-white py-1 px-2 bg-black/20 rounded animate-fadeIn" <li
> key={index}
{log} className="log-item text-sm text-white py-1 px-2 bg-black/20 rounded animate-fadeIn"
</li> >
) {log}
))} </li>
)
)}
</ul> </ul>
) : ( ) : (
<div className="text-sm text-gray-400 italic"> <div className="text-sm text-gray-400 italic">
日志加载中... {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
</div> </div>
)} )}
@ -182,7 +186,7 @@ export const WorldGeo = memo(
newHomeProxies: any; newHomeProxies: any;
tooltipType: string; tooltipType: string;
tooltipClosed: boolean; tooltipClosed: boolean;
trafficObfuscationLogs:any; trafficObfuscationLogs: any;
setTooltipClosed: (value: boolean) => void; setTooltipClosed: (value: boolean) => void;
}) => { }) => {
// const queryClient = useQueryClient() // const queryClient = useQueryClient()
@ -207,8 +211,6 @@ export const WorldGeo = memo(
const [showTooltip1, setShowTooltip1] = useState(false); const [showTooltip1, setShowTooltip1] = useState(false);
const [showTooltip2, setShowTooltip2] = useState(false); const [showTooltip2, setShowTooltip2] = useState(false);
const mainToData = useMemo(() => { const mainToData = useMemo(() => {
// 使用新的数据结构 // 使用新的数据结构
const proxiesList = currentValue ?? []; const proxiesList = currentValue ?? [];
@ -300,8 +302,6 @@ export const WorldGeo = memo(
} }
}; };
// 处理关闭tooltip2 // 处理关闭tooltip2
const handleCloseTooltip2 = () => { const handleCloseTooltip2 = () => {
setShowTooltip2(false); setShowTooltip2(false);

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

@ -109,7 +109,7 @@ const CustomTooltip = ({
> >
<div className="tooltip-content"> <div className="tooltip-content">
<img <img
className="line-img-hx" className="line-img-hx"
src={getUrl("svg/anti-forensics-forwarding/Line.svg")} src={getUrl("svg/anti-forensics-forwarding/Line.svg")}
alt="" alt=""
/> />
@ -153,15 +153,15 @@ const CustomTooltip = ({
</ul> </ul>
) : ( ) : (
<div className="text-sm text-gray-400 italic"> <div className="text-sm text-gray-400 italic">
日志加载中... {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
</div> </div>
)} )}
{!isComplete && filteredLogs.length > 0 && ( {/* {!isComplete && filteredLogs.length > 0 && (
<div className="loading-indicator mt-2 text-xs text-blue-300"> <div className="loading-indicator mt-2 text-xs text-blue-300">
处理中... 处理中...
</div> </div>
)} )} */}
</div> </div>
)} )}
</div> </div>
@ -304,15 +304,15 @@ const CustomTooltipLeft = ({
</ul> </ul>
) : ( ) : (
<div className="text-sm text-gray-400 italic"> <div className="text-sm text-gray-400 italic">
日志加载中... {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
</div> </div>
)} )}
{!isComplete && filteredLogs.length > 0 && ( {/* {!isComplete && filteredLogs.length > 0 && (
<div className="loading-indicator mt-2 text-xs text-blue-300"> <div className="loading-indicator mt-2 text-xs text-blue-300">
处理中... 处理中...
</div> </div>
)} )} */}
</div> </div>
)} )}
</div> </div>
@ -344,12 +344,16 @@ export const WorldGeo = memo(
selectedApp, selectedApp,
tooltipType, tooltipType,
tooltipClosed, tooltipClosed,
nestedEncryptionLogs,
trafficObfuscationLogs,
setTooltipClosed, setTooltipClosed,
}: { }: {
dataInfo: any; dataInfo: any;
selectedApp: any; selectedApp: any;
tooltipType: string; tooltipType: string;
tooltipClosed: boolean; tooltipClosed: boolean;
nestedEncryptionLogs: string[];
trafficObfuscationLogs: string[];
setTooltipClosed: (value: boolean) => void; setTooltipClosed: (value: boolean) => void;
}) => { }) => {
// const queryClient = useQueryClient() // const queryClient = useQueryClient()
@ -371,27 +375,8 @@ export const WorldGeo = memo(
const labelsRef = useRef<HTMLDivElement[]>([]); const labelsRef = useRef<HTMLDivElement[]>([]);
// 添加状态来控制是否显示tooltip // 添加状态来控制是否显示tooltip
const [showTooltip1, setShowTooltip1] = useState(false); const [showTooltip1, setShowTooltip1] = useState(true);
const [showTooltip2, setShowTooltip2] = useState(false); const [showTooltip2, setShowTooltip2] = useState(true);
// 模拟日志数据
const [nestedEncryptionLogs] = useState<string[]>([
"初始化嵌套加密...",
"生成密钥对...",
"应用第一层加密...",
"应用第二层加密...",
"应用第三层加密...",
"加密完成，准备传输...",
]);
const [trafficObfuscationLogs] = useState<string[]>([
"初始化流量混淆...",
"分析流量特征...",
"应用随机填充...",
"调整数据包时间间隔...",
"模拟HTTP流量...",
"混淆完成，准备传输...",
]);
// 添加调试日志 // 添加调试日志
useEffect(() => { useEffect(() => {
@ -517,8 +502,8 @@ export const WorldGeo = memo(
screenCoord.length === 2 screenCoord.length === 2
) { ) {
// 设置提示框位置 // 设置提示框位置
const left = `${screenCoord[0] - 626 + 20}px`; const left = `${screenCoord[0] - 626 + 48}px`;
const top = `${screenCoord[1] + 40 - 13}px`; const top = `${screenCoord[1] + 40 - 20}px`;
console.log("Setting tooltip2 position:", { left, top }); console.log("Setting tooltip2 position:", { left, top });
customTooltip2Ref.current.style.left = left; customTooltip2Ref.current.style.left = left;
@ -1443,27 +1428,17 @@ export const WorldGeo = memo(
// 修改处理tooltip的显示和隐藏的逻辑 // 修改处理tooltip的显示和隐藏的逻辑
useEffect(() => { useEffect(() => {
console.log("Tooltip effect triggered:", { tooltipClosed, tooltipType });
if (tooltipClosed) { if (tooltipClosed) {
if (tooltipType === "NESTED_ENCRYPTION") { setShowTooltip1(true);
setShowTooltip1(true); setShowTooltip2(true); // 确保另一个是关闭的
setShowTooltip2(false); // 确保另一个是关闭的 setTimeout(() => {
// 在下一个渲染周期后定位tooltip positionCustomTooltip();
setTimeout(() => { positionCustomTooltip2();
positionCustomTooltip(); }, 0);
}, 0);
} else if (tooltipType === "TRAFFIC_OBFUSCATION") {
setShowTooltip1(false); // 确保另一个是关闭的
setShowTooltip2(true);
// 在下一个渲染周期后定位tooltip
setTimeout(() => {
positionCustomTooltip2();
}, 0);
}
} else { } else {
setShowTooltip1(false); // setShowTooltip1(false);
setShowTooltip2(false); // setShowTooltip2(false);
} }
}, [ }, [
tooltipClosed, tooltipClosed,
@ -1484,25 +1459,26 @@ export const WorldGeo = memo(
{/* 嵌套加密提示框 */} {/* 嵌套加密提示框 */}
<CustomTooltip {showTooltip1 && (
logs={nestedEncryptionLogs} <CustomTooltip
onClose={handleCloseTooltip1} logs={nestedEncryptionLogs}
tooltipRef={customTooltipRef} onClose={handleCloseTooltip1}
title={CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.title} tooltipRef={customTooltipRef}
imageSrc={getUrl("image/nested-encryption.png")} title={CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.title}
/> imageSrc={getUrl("image/nested-encryption.png")}
/>
)}
{/* 流量混淆提示框 - 确保条件正确 */} {/* 流量混淆提示框 - 确保条件正确 */}
{showTooltip2 && (
<CustomTooltipLeft <CustomTooltipLeft
logs={trafficObfuscationLogs} logs={trafficObfuscationLogs}
onClose={handleCloseTooltip2} onClose={handleCloseTooltip2}
tooltipRef={customTooltip2Ref} tooltipRef={customTooltip2Ref}
title="流量混淆" title="流量混淆"
imageSrc={getUrl("image/traffic-obfuscation.png")} imageSrc={getUrl("image/traffic-obfuscation.png")}
/> />
)}
</div> </div>
); );
} }

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

@ -67,10 +67,7 @@ const NewHome = () => {
(state: RootState) => state.serviceReducer (state: RootState) => state.serviceReducer
); );
const [isProxyLoading, setIsProxyLoading] = useState(false); const [isProxyLoading, setIsProxyLoading] = useState(false);
const [form] = Form.useForm();
const [open, setOpen] = useState(false);
const [openNode, setOpenNode] = useState(false);
const [dialogLoading] = useState(false);
const [selectedApp, setSelectedApp] = useState<any>(null); const [selectedApp, setSelectedApp] = useState<any>(null);
const [tooltipClosed, setTooltipClosed] = useState(true); const [tooltipClosed, setTooltipClosed] = useState(true);
@ -79,30 +76,32 @@ const NewHome = () => {
CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type
); );
// 模拟日志数据
const [nestedEncryptionLogs, setNestedEncryptionLogs] = useState<string[]>([
"1初始化嵌套加密...",
"2生成密钥对...",
"3应用第一层加密...",
"4应用第二层加密...",
"应用第三层加密...",
"加密完成，准备传输...",
]);
const [trafficObfuscationLogs, setTrafficObfuscationLogs] = useState<
string[]
>([
"2初始化流量混淆...",
"2分析流量特征...",
"3应用随机填充...",
"4调整数据包时间间隔...",
"模拟HTTP流量...",
"混淆完成，准备传输...",
]);
const newWeb3List = useMemo(() => { const newWeb3List = useMemo(() => {
// 展示最新的6个节点 // 展示最新的6个节点
return web3List.slice(-6); return web3List.slice(-6);
}, [web3List]); }, [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) => { const handleClickApp = (item: any) => {
setSelectedApp(item); setSelectedApp(item);
}; };
@ -206,7 +205,8 @@ const NewHome = () => {
const nestedEncryption = await getNestedEncryption(); const nestedEncryption = await getNestedEncryption();
const applicationDiversion = await getApplicationDiversion(); const applicationDiversion = await getApplicationDiversion();
const dynamicRouteGeneration = await getDynamicRouteGeneration(); const dynamicRouteGeneration = await getDynamicRouteGeneration();
setNestedEncryptionLogs(nestedEncryption.logs);
setTrafficObfuscationLogs(trafficObfuscation.logs);
setDataInfo({ setDataInfo({
passAuthentication: passAuthentication.data, passAuthentication: passAuthentication.data,
trafficObfuscation: [trafficObfuscation.data], trafficObfuscation: [trafficObfuscation.data],
@ -327,6 +327,8 @@ const NewHome = () => {
<div className="mt-2 w-full h-full flex-1"> <div className="mt-2 w-full h-full flex-1">
<WorldGeo <WorldGeo
dataInfo={dataInfo} dataInfo={dataInfo}
nestedEncryptionLogs={nestedEncryptionLogs}
trafficObfuscationLogs={trafficObfuscationLogs}
selectedApp={selectedApp} selectedApp={selectedApp}
tooltipType={tooltipType} tooltipType={tooltipType}
tooltipClosed={tooltipClosed} tooltipClosed={tooltipClosed}