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

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<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实现逐条显示日志的效果
   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<HTMLDivElement>(null);
-  
+
   useEffect(() => {
     if (logsContainerRef.current && visibleLogs.length > 0) {
-      logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
+      logsContainerRef.current.scrollTop =
+        logsContainerRef.current.scrollHeight;
     }
   }, [visibleLogs]);
-  
+
   return (
-    <div 
-      id="custom-fixed-tooltip2" 
+    <div
+      id="custom-fixed-tooltip2"
       ref={tooltipRef}
       style={{
         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 
-              className="close-icon" 
-              src={getUrl("svg/Xwhite.svg")} 
-              alt="" 
+            <img
+              className="close-icon"
+              src={getUrl("svg/Xwhite.svg")}
+              alt=""
               style={{ cursor: "pointer" }}
               onClick={onClose}
             />
           </div>
-          
+
           {filteredLogs.length > 0 && (
-            <div 
+            <div
               ref={logsContainerRef}
               className="logs-container mt-3 max-h-[450px] overflow-y-auto"
             >
               {visibleLogs.length > 0 ? (
                 <ul className="logs-list space-y-1.5">
-                  {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"
-                      >
-                        {log}
-                      </li>
-                    )
-                  ))}
+                  {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"
+                        >
+                          {log}
+                        </li>
+                      )
+                  )}
                 </ul>
               ) : (
                 <div className="text-sm text-gray-400 italic">
-                  日志加载中...
+                  {logs.length > 0 ? "日志加载中..." : "暂无日志记录"}
                 </div>
               )}
-              
+
               {/* {!isComplete && filteredLogs.length > 0 && (
                 <div className="loading-indicator mt-2 text-xs text-blue-300">
                   处理中...
@@ -148,10 +152,10 @@ const CustomTooltipLeft = ({
             </div>
           )}
         </div>
-        <img 
-          className="line-img-left" 
-          src={getUrl("svg/anti-forensics-forwarding/LineLeft.svg")} 
-          alt="" 
+        <img
+          className="line-img-left"
+          src={getUrl("svg/anti-forensics-forwarding/LineLeft.svg")}
+          alt=""
         />
       </div>
     </div>
@@ -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<HTMLDivElement | null>(null);
     const labelsRef = useRef<HTMLDivElement[]>([]);
-    
+
     // 添加状态来控制是否显示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 (
       <div className="flex-1 h-full flex flex-col">
         <div id="screenGeo" className="flex-1"></div>
-        
+
         {/* 流量混淆提示框 */}
         {showTooltip2 && (
-          <CustomTooltipLeft 
+          <CustomTooltipLeft
             logs={trafficObfuscationLogs}
-            onClose={handleCloseTooltip2} 
+            onClose={handleCloseTooltip2}
             tooltipRef={customTooltip2Ref}
             title="流量混淆"
           />
@@ -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;
-// }
+// }

src/pages/new-home/components/world-geo.tsx

@@ -109,7 +109,7 @@ const CustomTooltip = ({
     >
       <div className="tooltip-content">
         <img
-           className="line-img-hx"
+          className="line-img-hx"
           src={getUrl("svg/anti-forensics-forwarding/Line.svg")}
           alt=""
         />
@@ -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
-          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(
 
         {/* 嵌套加密提示框 */}
 
-        <CustomTooltip
-          logs={nestedEncryptionLogs}
-          onClose={handleCloseTooltip1}
-          tooltipRef={customTooltipRef}
-          title={CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.title}
-          imageSrc={getUrl("image/nested-encryption.png")}
-        />
+        {showTooltip1 && (
+          <CustomTooltip
+            logs={nestedEncryptionLogs}
+            onClose={handleCloseTooltip1}
+            tooltipRef={customTooltipRef}
+            title={CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.title}
+            imageSrc={getUrl("image/nested-encryption.png")}
+          />
+        )}
 
         {/* 流量混淆提示框 - 确保条件正确 */}
-
-        <CustomTooltipLeft
-          logs={trafficObfuscationLogs}
-          onClose={handleCloseTooltip2}
-          tooltipRef={customTooltip2Ref}
-          title="流量混淆"
-          imageSrc={getUrl("image/traffic-obfuscation.png")}
-        />
-
-      
+        {showTooltip2 && (
+          <CustomTooltipLeft
+            logs={trafficObfuscationLogs}
+            onClose={handleCloseTooltip2}
+            tooltipRef={customTooltip2Ref}
+            title="流量混淆"
+            imageSrc={getUrl("image/traffic-obfuscation.png")}
+          />
+        )}
       </div>
     );
   }

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<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}