From 5151bd35d065ca770e6f9f48bc92d035c603e271 Mon Sep 17 00:00:00 2001 From: liyuanhu Date: Sun, 27 Apr 2025 11:16:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:mock=E4=BA=86=E4=B8=80=E4=B8=8B=E5=90=8E?= =?UTF-8?q?=E7=AB=AF=E6=95=B0=E6=8D=AE=20=E4=BB=A5=E5=8F=8Alogs=E6=97=A5?= =?UTF-8?q?=E5=BF=97=E7=9A=84=E6=8E=A5=E5=8F=97=E4=BC=A0=E8=BE=93=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F,=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5=E6=B5=81?= =?UTF-8?q?=E9=87=8F=E6=B7=B7=E6=B7=86=E5=92=8C=E5=B5=8C=E5=A5=97=E5=8A=A0?= =?UTF-8?q?=E5=AF=86=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/world-geo.tsx | 136 +++++++++--------- src/pages/new-home/components/world-geo.tsx | 106 ++++++-------- src/pages/new-home/index.tsx | 50 +++---- 3 files changed, 135 insertions(+), 157 deletions(-) diff --git a/src/pages/anti-dark-analysis-network/components/world-geo.tsx b/src/pages/anti-dark-analysis-network/components/world-geo.tsx index 116d7c4..93a5f70 100644 --- a/src/pages/anti-dark-analysis-network/components/world-geo.tsx +++ b/src/pages/anti-dark-analysis-network/components/world-geo.tsx @@ -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,52 +16,51 @@ interface LinesItemType { type LinesDataType = [LinesItemType, LinesItemType]; type LinesType = [string, LinesDataType[]]; - // 创建左侧自定义提示框组件 -const CustomTooltipLeft = ({ - logs = [], - onClose, - tooltipRef, - title, +const CustomTooltipLeft = ({ + logs = [], + onClose, + tooltipRef, + title, }: { - logs?: string[], - onClose: () => void, - tooltipRef: React.RefObject, - title: string, + logs?: string[]; + onClose: () => void; + tooltipRef: React.RefObject; + title: string; }) => { const [visibleLogs, setVisibleLogs] = useState([]); const [isComplete, setIsComplete] = useState(false); - + // 过滤掉空日志 const filteredLogs = useMemo(() => { - return logs.filter(log => log && log.trim() !== ''); + return logs.filter((log) => log && log.trim() !== ""); }, [logs]); - + // 使用useEffect实现逐条显示日志的效果 useEffect(() => { if (!filteredLogs || filteredLogs.length === 0) return; - + // 重置状态 setVisibleLogs([]); setIsComplete(false); - + // 先显示第一条日志 setVisibleLogs([filteredLogs[0]]); - + // 如果只有一条日志，直接设置完成 if (filteredLogs.length === 1) { setIsComplete(true); return; } - + // 从第二条日志开始，每500毫秒显示一条 let currentIndex = 1; - + const timer = setInterval(() => { if (currentIndex < filteredLogs.length) { - setVisibleLogs(prev => [...prev, filteredLogs[currentIndex]]); + setVisibleLogs((prev) => [...prev, filteredLogs[currentIndex]]); currentIndex++; - + // 如果已经是最后一条，设置完成状态 if (currentIndex >= filteredLogs.length) { clearInterval(timer); @@ -73,73 +71,79 @@ const CustomTooltipLeft = ({ setIsComplete(true); } }, 500); - + // 清理函数 return () => { clearInterval(timer); }; }, [filteredLogs]); // 当过滤后的日志变化时重新开始动画 - + // 自动滚动到最新的日志 const logsContainerRef = useRef(null); - + useEffect(() => { if (logsContainerRef.current && visibleLogs.length > 0) { - logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight; + logsContainerRef.current.scrollTop = + logsContainerRef.current.scrollHeight; } }, [visibleLogs]); - + return ( -
-
+
{title}
-
- + {filteredLogs.length > 0 && ( -
{visibleLogs.length > 0 ? (
    - {visibleLogs.map((log, index) => ( - log && log.trim() !== '' && ( -
  • - {log} -
    • - ) - ))} + {visibleLogs.map( + (log, index) => + log && + log.trim() !== "" && ( +
  • + {log} +
    • + ) + )}
) : (
- 日志加载中... + {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
)} - + {/* {!isComplete && filteredLogs.length > 0 && (
处理中... @@ -148,10 +152,10 @@ const CustomTooltipLeft = ({
)}
-
@@ -182,7 +186,7 @@ export const WorldGeo = memo( newHomeProxies: any; tooltipType: string; tooltipClosed: boolean; - trafficObfuscationLogs:any; + trafficObfuscationLogs: any; setTooltipClosed: (value: boolean) => void; }) => { // const queryClient = useQueryClient() @@ -202,12 +206,10 @@ export const WorldGeo = memo( >([]); const labelContainerRef = useRef(null); const labelsRef = useRef([]); - + // 添加状态来控制是否显示tooltip const [showTooltip1, setShowTooltip1] = useState(false); const [showTooltip2, setShowTooltip2] = useState(false); - - const mainToData = useMemo(() => { // 使用新的数据结构 @@ -249,7 +251,7 @@ export const WorldGeo = memo( }); return data; }, [currentValue]); - + // 定位自定义提示框 - 优化版本 const positionCustomTooltip = () => { if (!customTooltipRef.current || !proxyGeoRef.current) return; @@ -272,7 +274,7 @@ export const WorldGeo = memo( console.error("Error positioning tooltip:", error); } }; - + // 定位自定义提示框2 - 优化版本 const positionCustomTooltip2 = () => { if (!customTooltip2Ref.current || !proxyGeoRef.current) return; @@ -299,9 +301,7 @@ export const WorldGeo = memo( console.error("Error positioning tooltip:", error); } }; - - // 处理关闭tooltip2 const handleCloseTooltip2 = () => { setShowTooltip2(false); @@ -1128,7 +1128,7 @@ export const WorldGeo = memo( const handleResize = () => { proxyGeoRef.current?.resize(); updateLabelPositions(); - + // 重新定位tooltip if (showTooltip1) { positionCustomTooltip(); @@ -1181,7 +1181,7 @@ export const WorldGeo = memo( if (tooltipType !== "PASS_AUTHENTICATION") { lineMidpointsRef.current = []; } - + if (tooltipClosed) { if (tooltipType === "NESTED_ENCRYPTION") { setShowTooltip1(true); @@ -1202,7 +1202,7 @@ export const WorldGeo = memo( setShowTooltip2(false); } }, [tooltipClosed, tooltipType, currentValue]); - + // 在地图初始化后定位tooltip useEffect(() => { if (showTooltip1) { @@ -1215,12 +1215,12 @@ export const WorldGeo = memo( return (
- + {/* 流量混淆提示框 */} {showTooltip2 && ( - @@ -1236,7 +1236,7 @@ export const WorldGeo = memo( // from { opacity: 0; transform: translateY(5px); } // to { opacity: 1; transform: translateY(0); } // } -// +// // .animate-fadeIn { // animation: fadeIn 0.3s ease-out forwards; -// } \ No newline at end of file +// } diff --git a/src/pages/new-home/components/world-geo.tsx b/src/pages/new-home/components/world-geo.tsx index 2c9a6f5..5815da3 100644 --- a/src/pages/new-home/components/world-geo.tsx +++ b/src/pages/new-home/components/world-geo.tsx @@ -109,7 +109,7 @@ const CustomTooltip = ({ >
@@ -153,15 +153,15 @@ const CustomTooltip = ({ ) : (
- 日志加载中... + {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
)} - {!isComplete && filteredLogs.length > 0 && ( + {/* {!isComplete && filteredLogs.length > 0 && (
处理中...
- )} + )} */}
)}
@@ -304,15 +304,15 @@ const CustomTooltipLeft = ({ ) : (
- 日志加载中... + {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
)} - {!isComplete && filteredLogs.length > 0 && ( + {/* {!isComplete && filteredLogs.length > 0 && (
处理中...
- )} + )} */}
)}
@@ -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([]); // 添加状态来控制是否显示tooltip - const [showTooltip1, setShowTooltip1] = useState(false); - const [showTooltip2, setShowTooltip2] = useState(false); - - // 模拟日志数据 - const [nestedEncryptionLogs] = useState([ - "初始化嵌套加密...", - "生成密钥对...", - "应用第一层加密...", - "应用第二层加密...", - "应用第三层加密...", - "加密完成，准备传输...", - ]); - - const [trafficObfuscationLogs] = useState([ - "初始化流量混淆...", - "分析流量特征...", - "应用随机填充...", - "调整数据包时间间隔...", - "模拟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 - setTimeout(() => { - positionCustomTooltip(); - }, 0); - } else if (tooltipType === "TRAFFIC_OBFUSCATION") { - setShowTooltip1(false); // 确保另一个是关闭的 - setShowTooltip2(true); - // 在下一个渲染周期后定位tooltip - setTimeout(() => { - positionCustomTooltip2(); - }, 0); - } + setShowTooltip1(true); + setShowTooltip2(true); // 确保另一个是关闭的 + setTimeout(() => { + positionCustomTooltip(); + positionCustomTooltip2(); + }, 0); } else { - setShowTooltip1(false); - setShowTooltip2(false); + // setShowTooltip1(false); + // setShowTooltip2(false); } }, [ tooltipClosed, @@ -1484,25 +1459,26 @@ export const WorldGeo = memo( {/* 嵌套加密提示框 */} - + {showTooltip1 && ( + + )} {/* 流量混淆提示框 - 确保条件正确 */} - - - - + {showTooltip2 && ( + + )} ); } diff --git a/src/pages/new-home/index.tsx b/src/pages/new-home/index.tsx index 883a8c2..5e95f3d 100644 --- a/src/pages/new-home/index.tsx +++ b/src/pages/new-home/index.tsx @@ -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(null); const [tooltipClosed, setTooltipClosed] = useState(true); @@ -79,30 +76,32 @@ const NewHome = () => { CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type ); + // 模拟日志数据 + const [nestedEncryptionLogs, setNestedEncryptionLogs] = useState([ + "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 = () => {