feat:mock了一下后端数据 以及logs日志的接受传输格式,完善首页流量混淆和嵌套加密交互
This commit is contained in:
liyuanhu
parent
15bb6d8bc0
commit
5151bd35d0
@ -7,7 +7,6 @@ import worldGeoJson from "@/assets/echarts-map/json/world.json";
|
||||
import { geoCoordMap, countryNameMap, countryCodeMap } from "@/data";
|
||||
import { getUrl } from "@/lib/utils";
|
||||
|
||||
|
||||
interface LinesItemType {
|
||||
name: string;
|
||||
country_code: string;
|
||||
@ -17,7 +16,6 @@ interface LinesItemType {
|
||||
type LinesDataType = [LinesItemType, LinesItemType];
|
||||
type LinesType = [string, LinesDataType[]];
|
||||
|
||||
|
||||
// 创建左侧自定义提示框组件
|
||||
const CustomTooltipLeft = ({
|
||||
logs = [],
|
||||
@ -25,17 +23,17 @@ const CustomTooltipLeft = ({
|
||||
tooltipRef,
|
||||
title,
|
||||
}: {
|
||||
logs?: string[],
|
||||
onClose: () => void,
|
||||
tooltipRef: React.RefObject<HTMLDivElement>,
|
||||
title: string,
|
||||
logs?: string[];
|
||||
onClose: () => void;
|
||||
tooltipRef: React.RefObject<HTMLDivElement>;
|
||||
title: string;
|
||||
}) => {
|
||||
const [visibleLogs, setVisibleLogs] = useState<string[]>([]);
|
||||
const [isComplete, setIsComplete] = useState(false);
|
||||
|
||||
// 过滤掉空日志
|
||||
const filteredLogs = useMemo(() => {
|
||||
return logs.filter(log => log && log.trim() !== '');
|
||||
return logs.filter((log) => log && log.trim() !== "");
|
||||
}, [logs]);
|
||||
|
||||
// 使用useEffect实现逐条显示日志的效果
|
||||
@ -60,7 +58,7 @@ const CustomTooltipLeft = ({
|
||||
|
||||
const timer = setInterval(() => {
|
||||
if (currentIndex < filteredLogs.length) {
|
||||
setVisibleLogs(prev => [...prev, filteredLogs[currentIndex]]);
|
||||
setVisibleLogs((prev) => [...prev, filteredLogs[currentIndex]]);
|
||||
currentIndex++;
|
||||
|
||||
// 如果已经是最后一条，设置完成状态
|
||||
@ -85,7 +83,8 @@ const CustomTooltipLeft = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (logsContainerRef.current && visibleLogs.length > 0) {
|
||||
logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
|
||||
logsContainerRef.current.scrollTop =
|
||||
logsContainerRef.current.scrollHeight;
|
||||
}
|
||||
}, [visibleLogs]);
|
||||
|
||||
@ -97,14 +96,17 @@ const CustomTooltipLeft = ({
|
||||
position: "fixed",
|
||||
zIndex: 1000,
|
||||
pointerEvents: "auto",
|
||||
backgroundColor: "transparent"
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<div className="tooltip-content">
|
||||
<div className="fill-left"></div>
|
||||
<div className="tip-box-left">
|
||||
<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}
|
||||
</div>
|
||||
<img
|
||||
@ -123,8 +125,10 @@ const CustomTooltipLeft = ({
|
||||
>
|
||||
{visibleLogs.length > 0 ? (
|
||||
<ul className="logs-list space-y-1.5">
|
||||
{visibleLogs.map((log, index) => (
|
||||
log && log.trim() !== '' && (
|
||||
{visibleLogs.map(
|
||||
(log, index) =>
|
||||
log &&
|
||||
log.trim() !== "" && (
|
||||
<li
|
||||
key={index}
|
||||
className="log-item text-sm text-white py-1 px-2 bg-black/20 rounded animate-fadeIn"
|
||||
@ -132,11 +136,11 @@ const CustomTooltipLeft = ({
|
||||
{log}
|
||||
</li>
|
||||
)
|
||||
))}
|
||||
)}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="text-sm text-gray-400 italic">
|
||||
日志加载中...
|
||||
{logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -207,8 +211,6 @@ export const WorldGeo = memo(
|
||||
const [showTooltip1, setShowTooltip1] = useState(false);
|
||||
const [showTooltip2, setShowTooltip2] = useState(false);
|
||||
|
||||
|
||||
|
||||
const mainToData = useMemo(() => {
|
||||
// 使用新的数据结构
|
||||
const proxiesList = currentValue ?? [];
|
||||
@ -300,8 +302,6 @@ export const WorldGeo = memo(
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 处理关闭tooltip2
|
||||
const handleCloseTooltip2 = () => {
|
||||
setShowTooltip2(false);
|
||||
|
||||
@ -153,15 +153,15 @@ const CustomTooltip = ({
|
||||
</ul>
|
||||
) : (
|
||||
<div className="text-sm text-gray-400 italic">
|
||||
日志加载中...
|
||||
{logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isComplete && filteredLogs.length > 0 && (
|
||||
{/* {!isComplete && filteredLogs.length > 0 && (
|
||||
<div className="loading-indicator mt-2 text-xs text-blue-300">
|
||||
处理中...
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -304,15 +304,15 @@ const CustomTooltipLeft = ({
|
||||
</ul>
|
||||
) : (
|
||||
<div className="text-sm text-gray-400 italic">
|
||||
日志加载中...
|
||||
{logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isComplete && filteredLogs.length > 0 && (
|
||||
{/* {!isComplete && filteredLogs.length > 0 && (
|
||||
<div className="loading-indicator mt-2 text-xs text-blue-300">
|
||||
处理中...
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -344,12 +344,16 @@ export const WorldGeo = memo(
|
||||
selectedApp,
|
||||
tooltipType,
|
||||
tooltipClosed,
|
||||
nestedEncryptionLogs,
|
||||
trafficObfuscationLogs,
|
||||
setTooltipClosed,
|
||||
}: {
|
||||
dataInfo: any;
|
||||
selectedApp: any;
|
||||
tooltipType: string;
|
||||
tooltipClosed: boolean;
|
||||
nestedEncryptionLogs: string[];
|
||||
trafficObfuscationLogs: string[];
|
||||
setTooltipClosed: (value: boolean) => void;
|
||||
}) => {
|
||||
// const queryClient = useQueryClient()
|
||||
@ -371,27 +375,8 @@ export const WorldGeo = memo(
|
||||
const labelsRef = useRef<HTMLDivElement[]>([]);
|
||||
|
||||
// 添加状态来控制是否显示tooltip
|
||||
const [showTooltip1, setShowTooltip1] = useState(false);
|
||||
const [showTooltip2, setShowTooltip2] = useState(false);
|
||||
|
||||
// 模拟日志数据
|
||||
const [nestedEncryptionLogs] = useState<string[]>([
|
||||
"初始化嵌套加密...",
|
||||
"生成密钥对...",
|
||||
"应用第一层加密...",
|
||||
"应用第二层加密...",
|
||||
"应用第三层加密...",
|
||||
"加密完成，准备传输...",
|
||||
]);
|
||||
|
||||
const [trafficObfuscationLogs] = useState<string[]>([
|
||||
"初始化流量混淆...",
|
||||
"分析流量特征...",
|
||||
"应用随机填充...",
|
||||
"调整数据包时间间隔...",
|
||||
"模拟HTTP流量...",
|
||||
"混淆完成，准备传输...",
|
||||
]);
|
||||
const [showTooltip1, setShowTooltip1] = useState(true);
|
||||
const [showTooltip2, setShowTooltip2] = useState(true);
|
||||
|
||||
// 添加调试日志
|
||||
useEffect(() => {
|
||||
@ -517,8 +502,8 @@ export const WorldGeo = memo(
|
||||
screenCoord.length === 2
|
||||
) {
|
||||
// 设置提示框位置
|
||||
const left = `${screenCoord[0] - 626 + 20}px`;
|
||||
const top = `${screenCoord[1] + 40 - 13}px`;
|
||||
const left = `${screenCoord[0] - 626 + 48}px`;
|
||||
const top = `${screenCoord[1] + 40 - 20}px`;
|
||||
console.log("Setting tooltip2 position:", { left, top });
|
||||
|
||||
customTooltip2Ref.current.style.left = left;
|
||||
@ -1443,27 +1428,17 @@ export const WorldGeo = memo(
|
||||
|
||||
// 修改处理tooltip的显示和隐藏的逻辑
|
||||
useEffect(() => {
|
||||
console.log("Tooltip effect triggered:", { tooltipClosed, tooltipType });
|
||||
|
||||
if (tooltipClosed) {
|
||||
if (tooltipType === "NESTED_ENCRYPTION") {
|
||||
setShowTooltip1(true);
|
||||
setShowTooltip2(false); // 确保另一个是关闭的
|
||||
// 在下一个渲染周期后定位tooltip
|
||||
setShowTooltip2(true); // 确保另一个是关闭的
|
||||
setTimeout(() => {
|
||||
positionCustomTooltip();
|
||||
}, 0);
|
||||
} else if (tooltipType === "TRAFFIC_OBFUSCATION") {
|
||||
setShowTooltip1(false); // 确保另一个是关闭的
|
||||
setShowTooltip2(true);
|
||||
// 在下一个渲染周期后定位tooltip
|
||||
setTimeout(() => {
|
||||
positionCustomTooltip2();
|
||||
}, 0);
|
||||
}
|
||||
} else {
|
||||
setShowTooltip1(false);
|
||||
setShowTooltip2(false);
|
||||
// setShowTooltip1(false);
|
||||
// setShowTooltip2(false);
|
||||
}
|
||||
}, [
|
||||
tooltipClosed,
|
||||
@ -1484,6 +1459,7 @@ export const WorldGeo = memo(
|
||||
|
||||
{/* 嵌套加密提示框 */}
|
||||
|
||||
{showTooltip1 && (
|
||||
<CustomTooltip
|
||||
logs={nestedEncryptionLogs}
|
||||
onClose={handleCloseTooltip1}
|
||||
@ -1491,9 +1467,10 @@ export const WorldGeo = memo(
|
||||
title={CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.title}
|
||||
imageSrc={getUrl("image/nested-encryption.png")}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 流量混淆提示框 - 确保条件正确 */}
|
||||
|
||||
{showTooltip2 && (
|
||||
<CustomTooltipLeft
|
||||
logs={trafficObfuscationLogs}
|
||||
onClose={handleCloseTooltip2}
|
||||
@ -1501,8 +1478,7 @@ export const WorldGeo = memo(
|
||||
title="流量混淆"
|
||||
imageSrc={getUrl("image/traffic-obfuscation.png")}
|
||||
/>
|
||||
|
||||
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -67,10 +67,7 @@ const NewHome = () => {
|
||||
(state: RootState) => state.serviceReducer
|
||||
);
|
||||
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 [tooltipClosed, setTooltipClosed] = useState(true);
|
||||
@ -79,30 +76,32 @@ const NewHome = () => {
|
||||
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(() => {
|
||||
// 展示最新的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);
|
||||
};
|
||||
@ -206,7 +205,8 @@ const NewHome = () => {
|
||||
const nestedEncryption = await getNestedEncryption();
|
||||
const applicationDiversion = await getApplicationDiversion();
|
||||
const dynamicRouteGeneration = await getDynamicRouteGeneration();
|
||||
|
||||
setNestedEncryptionLogs(nestedEncryption.logs);
|
||||
setTrafficObfuscationLogs(trafficObfuscation.logs);
|
||||
setDataInfo({
|
||||
passAuthentication: passAuthentication.data,
|
||||
trafficObfuscation: [trafficObfuscation.data],
|
||||
@ -327,6 +327,8 @@ const NewHome = () => {
|
||||
<div className="mt-2 w-full h-full flex-1">
|
||||
<WorldGeo
|
||||
dataInfo={dataInfo}
|
||||
nestedEncryptionLogs={nestedEncryptionLogs}
|
||||
trafficObfuscationLogs={trafficObfuscationLogs}
|
||||
selectedApp={selectedApp}
|
||||
tooltipType={tooltipType}
|
||||
tooltipClosed={tooltipClosed}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user