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,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[],
+  logs?: string[];
-  onClose: () => void, 
+  onClose: () => void;
-  tooltipRef: React.RefObject<HTMLDivElement>,
+  tooltipRef: React.RefObject<HTMLDivElement>;
-  title: string,
+  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) => (
+                  {visibleLogs.map(
-                    log && log.trim() !== '' && (
+                    (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);

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

@@ -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 [showTooltip1, setShowTooltip1] = useState(true);
-    const [showTooltip2, setShowTooltip2] = useState(false);
+    const [showTooltip2, setShowTooltip2] = useState(true);
-
-    // 模拟日志数据
-    const [nestedEncryptionLogs] = useState<string[]>([
-      "初始化嵌套加密...",
-      "生成密钥对...",
-      "应用第一层加密...",
-      "应用第二层加密...",
-      "应用第三层加密...",
-      "加密完成，准备传输...",
-    ]);
-
-    const [trafficObfuscationLogs] = useState<string[]>([
-      "初始化流量混淆...",
-      "分析流量特征...",
-      "应用随机填充...",
-      "调整数据包时间间隔...",
-      "模拟HTTP流量...",
-      "混淆完成，准备传输...",
-    ]);
 
     // 添加调试日志
     useEffect(() => {
@@ -517,8 +502,8 @@ export const WorldGeo = memo(
           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 });
 
           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); // 确保另一个是关闭的
+        setShowTooltip2(true); // 确保另一个是关闭的
-          // 在下一个渲染周期后定位tooltip
         setTimeout(() => {
           positionCustomTooltip();
-          }, 0);
-        } else if (tooltipType === "TRAFFIC_OBFUSCATION") {
-          setShowTooltip1(false); // 确保另一个是关闭的
-          setShowTooltip2(true);
-          // 在下一个渲染周期后定位tooltip
-          setTimeout(() => {
           positionCustomTooltip2();
         }, 0);
-        }
       } else {
-        setShowTooltip1(false);
+        // setShowTooltip1(false);
-        setShowTooltip2(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>
     );
   }

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}