300 lines
8.7 KiB
TypeScript
300 lines
8.7 KiB
TypeScript
import { useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { WorldGeo } from "./components/world-geo";
|
|
|
|
import NetflixSvg from "@/assets/svg/anti-forensics-forwarding/Netflix.svg?react";
|
|
import NetflixActiveSvg from "@/assets/svg/anti-forensics-forwarding/NetflixActive.svg?react";
|
|
import SpotifySvg from "@/assets/svg/anti-forensics-forwarding/Spotify.svg?react";
|
|
import SpotifyActiveSvg from "@/assets/svg/anti-forensics-forwarding/SpotifyActive.svg?react";
|
|
import InstagramSvg from "@/assets/svg/anti-forensics-forwarding/Instagram.svg?react";
|
|
import InstagramActiveSvg from "@/assets/svg/anti-forensics-forwarding/InstagramActive.svg?react";
|
|
import TelegramSvg from "@/assets/svg/anti-forensics-forwarding/Telegram.svg?react";
|
|
import TelegramActiveSvg from "@/assets/svg/anti-forensics-forwarding/TelegramActive.svg?react";
|
|
import GoogleSvg from "@/assets/svg/anti-forensics-forwarding/Google.svg?react";
|
|
import GoogleActiveSvg from "@/assets/svg/anti-forensics-forwarding/GoogleActive.svg?react";
|
|
import GmailSvg from "@/assets/svg/anti-forensics-forwarding/Gmail.svg?react";
|
|
import GmailActiveSvg from "@/assets/svg/anti-forensics-forwarding/GmailActive.svg?react";
|
|
import AmazonSvg from "@/assets/svg/anti-forensics-forwarding/Amazon.svg?react";
|
|
import AmazonActiveSvg from "@/assets/svg/anti-forensics-forwarding/AmazonActive.svg?react";
|
|
import EbaySvg from "@/assets/svg/anti-forensics-forwarding/Ebay.svg?react";
|
|
import EbayActiveSvg from "@/assets/svg/anti-forensics-forwarding/EbayActive.svg?react";
|
|
import AppleNewsSvg from "@/assets/svg/anti-forensics-forwarding/AppleNews.svg?react";
|
|
import AppleNewsActiveSvg from "@/assets/svg/anti-forensics-forwarding/AppleNewsActive.svg?react";
|
|
import CNNSvg from "@/assets/svg/anti-forensics-forwarding/CNN.svg?react";
|
|
import CNNActiveSvg from "@/assets/svg/anti-forensics-forwarding/CNNActive.svg?react";
|
|
import BrowserSvg from "@/assets/svg/anti-forensics-forwarding/Browser.svg?react";
|
|
import BrowserActiveSvg from "@/assets/svg/anti-forensics-forwarding/BrowserActive.svg?react";
|
|
import YouTubeSvg from "@/assets/svg/anti-forensics-forwarding/YouTube.svg?react";
|
|
import YouTubeActiveSvg from "@/assets/svg/anti-forensics-forwarding/YouTubeActive.svg?react";
|
|
import FacebookSvg from "@/assets/svg/anti-forensics-forwarding/Facebook.svg?react";
|
|
import FacebookActiveSvg from "@/assets/svg/anti-forensics-forwarding/FacebookActive.svg?react";
|
|
import { RootState } from "@/store";
|
|
|
|
import {
|
|
TRAFFIC_OBFUSCATION,
|
|
NESTED_ENCRYPTION,
|
|
DYNAMIC_ROUTE_GENERATOR,
|
|
APP_DIVERSION,
|
|
PASS_AUTHENTICATION,
|
|
} from "./data/mockData";
|
|
|
|
import "./index.scss";
|
|
import { App } from "antd";
|
|
|
|
export const DIALOGTYPE = {
|
|
ADDNode: {
|
|
title: "添加节点",
|
|
desc: "",
|
|
successText: "添加",
|
|
},
|
|
AddNetwork: {
|
|
title: "构建网络",
|
|
desc: "",
|
|
successText: "构建",
|
|
},
|
|
};
|
|
|
|
export const NODEDIALOGTYPE = {
|
|
ClearFailNode: {
|
|
title: "清除掉线节点",
|
|
desc: "",
|
|
successText: "清除",
|
|
},
|
|
ClearWargingNode: {
|
|
title: "恶意节点",
|
|
desc: "",
|
|
successText: "清除",
|
|
},
|
|
};
|
|
|
|
export const Apps = [
|
|
{
|
|
name: "Netflix",
|
|
icon: NetflixSvg,
|
|
activeIcon: NetflixActiveSvg,
|
|
},
|
|
{
|
|
name: "Spotify",
|
|
icon: SpotifySvg,
|
|
activeIcon: SpotifyActiveSvg,
|
|
},
|
|
{
|
|
name: "Instagram",
|
|
icon: InstagramSvg,
|
|
activeIcon: InstagramActiveSvg,
|
|
},
|
|
{
|
|
name: "Telegram",
|
|
icon: TelegramSvg,
|
|
activeIcon: TelegramActiveSvg,
|
|
},
|
|
{
|
|
name: "Google",
|
|
icon: GoogleSvg,
|
|
activeIcon: GoogleActiveSvg,
|
|
},
|
|
{
|
|
name: "Gmail",
|
|
icon: GmailSvg,
|
|
activeIcon: GmailActiveSvg,
|
|
},
|
|
{
|
|
name: "Amazon",
|
|
icon: AmazonSvg,
|
|
activeIcon: AmazonActiveSvg,
|
|
},
|
|
{
|
|
name: "Ebay",
|
|
icon: EbaySvg,
|
|
activeIcon: EbayActiveSvg,
|
|
},
|
|
{
|
|
name: "AppleNews",
|
|
icon: AppleNewsSvg,
|
|
activeIcon: AppleNewsActiveSvg,
|
|
},
|
|
{
|
|
name: "CNN",
|
|
icon: CNNSvg,
|
|
activeIcon: CNNActiveSvg,
|
|
},
|
|
{
|
|
name: "Browser",
|
|
icon: BrowserSvg,
|
|
activeIcon: BrowserActiveSvg,
|
|
},
|
|
{
|
|
name: "YouTube",
|
|
icon: YouTubeSvg,
|
|
activeIcon: YouTubeActiveSvg,
|
|
},
|
|
{
|
|
name: "Facebook",
|
|
icon: FacebookSvg,
|
|
activeIcon: FacebookActiveSvg,
|
|
},
|
|
];
|
|
|
|
export const CONST_TOOLTIP_TYPE = {
|
|
NESTED_ENCRYPTION: {
|
|
type: "NESTED_ENCRYPTION",
|
|
title: "嵌套加密",
|
|
},
|
|
TRAFFIC_OBFUSCATION: {
|
|
type: "TRAFFIC_OBFUSCATION",
|
|
title: "流量混淆",
|
|
},
|
|
DYNAMIC_ROUTE_GENERATOR: {
|
|
type: "DYNAMIC_ROUTE_GENERATOR",
|
|
title: "动态路由生成",
|
|
},
|
|
// 应用分流
|
|
APP_DIVERSION: {
|
|
type: "APP_DIVERSION",
|
|
title: "应用分流",
|
|
},
|
|
// 通行认证
|
|
PASS_AUTHENTICATION: {
|
|
type: "PASS_AUTHENTICATION",
|
|
title: "通行认证",
|
|
},
|
|
};
|
|
|
|
const DecentralizedElasticNetwork = () => {
|
|
const { proxy_info, path_list, newHomeProxies } = useSelector(
|
|
(state: RootState) => state.web3Reducer
|
|
);
|
|
|
|
const [tooltipType, setTooltipType] = useState(
|
|
CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type
|
|
);
|
|
const [tooltipClosed, setTooltipClosed] = useState(false);
|
|
|
|
const [selectedApp, setSelectedApp] = useState<any>(null);
|
|
const appDiversion = useMemo(() => {
|
|
return Apps.map((item) => {
|
|
const findApp = APP_DIVERSION.find(
|
|
(appItem) => item.name === appItem.name
|
|
);
|
|
return {
|
|
...item,
|
|
...findApp,
|
|
};
|
|
});
|
|
}, []);
|
|
const currentValue = useMemo(() => {
|
|
let value = null;
|
|
switch (tooltipType) {
|
|
case CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type:
|
|
value = [NESTED_ENCRYPTION];
|
|
break;
|
|
case CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type:
|
|
value = [TRAFFIC_OBFUSCATION];
|
|
break;
|
|
case CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type:
|
|
value = DYNAMIC_ROUTE_GENERATOR
|
|
break;
|
|
case CONST_TOOLTIP_TYPE.APP_DIVERSION.type:
|
|
value = selectedApp ? [selectedApp] : []
|
|
break;
|
|
case CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type:
|
|
value = [PASS_AUTHENTICATION]
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return value;
|
|
}, [tooltipType,selectedApp]);
|
|
|
|
const handleClickApp = (item: any) => {
|
|
console.log("item", item);
|
|
setSelectedApp(item);
|
|
};
|
|
|
|
|
|
useEffect(()=>{
|
|
()=>{
|
|
setTooltipClosed(false);
|
|
}
|
|
},[])
|
|
|
|
return (
|
|
<div className="decentralized w-full h-full flex flex-col relative">
|
|
<div className="flex items-center gap-[60px] absolute top-12 left-12 z-10">
|
|
{tooltipType === CONST_TOOLTIP_TYPE.APP_DIVERSION.type && appDiversion.map((item) => {
|
|
return (
|
|
<div
|
|
key={item.name}
|
|
className="flex items-center justify-center w-16 h-16 relative rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
|
|
onClick={() => handleClickApp(item)}
|
|
>
|
|
{selectedApp?.name === item?.name ? (
|
|
<item.activeIcon />
|
|
) : (
|
|
<item.icon />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="mt-2 w-full h-full flex-1">
|
|
<WorldGeo
|
|
currentValue={currentValue}
|
|
newHomeProxies={newHomeProxies}
|
|
selectedApp={selectedApp}
|
|
tooltipType={tooltipType}
|
|
tooltipClosed={tooltipClosed}
|
|
setTooltipClosed={setTooltipClosed}
|
|
/>
|
|
</div>
|
|
<div className="absolute bottom-6 left-[50%] translate-x-[-50%] w-[calc(100%-51px)] p-6 bg-indigo-950 bg-opacity-10 rounded-md outline outline-1 outline-zinc-200 outline-opacity-40 backdrop-blur-lg inline-flex justify-start items-center gap-4">
|
|
<div
|
|
className="bt1 cursor-pointer"
|
|
onClick={() => {
|
|
setTooltipType(CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type);
|
|
}}
|
|
>
|
|
通行认证
|
|
</div>
|
|
|
|
<div
|
|
className="bt1 cursor-pointer"
|
|
onClick={() => {
|
|
setTooltipType(CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type);
|
|
setTooltipClosed(true);
|
|
}}
|
|
>
|
|
嵌套加密
|
|
</div>
|
|
<div
|
|
className="bt1 cursor-pointer"
|
|
onClick={() => {
|
|
setTooltipType(CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type);
|
|
}}
|
|
>
|
|
动态路由生成
|
|
</div>
|
|
<div
|
|
className="bt1 cursor-pointer"
|
|
onClick={() => {
|
|
setTooltipType(CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type);
|
|
setTooltipClosed(true);
|
|
}}
|
|
>
|
|
流量混淆
|
|
</div>
|
|
<div
|
|
className="bt1 cursor-pointer"
|
|
onClick={() => {
|
|
setTooltipType(CONST_TOOLTIP_TYPE.APP_DIVERSION.type);
|
|
}}
|
|
>
|
|
应用分流
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DecentralizedElasticNetwork;
|