111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
import { Outlet, NavLink } from "react-router-dom";
|
||
import { useSelector } from "react-redux";
|
||
import { cn } from "@/lib/utils";
|
||
import { isMac } from "@/utils/os";
|
||
|
||
import LogoSvg from "@/assets/svg/logo.svg?react";
|
||
import AnonymousSvg from "@/assets/svg/layout/anonymous.svg?react";
|
||
import TitleSvg from "@/assets/svg/layout/title.svg?react";
|
||
|
||
import ChevronDownSvg from "@/assets/svg/layout/chevron-down.svg?react";
|
||
import Decentralized from "@/assets/svg/layout/decentralized.svg?react";
|
||
import PoolSvg from "@/assets/svg/layout/pool.svg?react";
|
||
import HomeSvg from "@/assets/svg/layout/home.svg?react";
|
||
import AntiDarkAnalysisNetworkSvg from "@/assets/svg/layout/anti-dark-analysis-network.svg?react";
|
||
import "./index.scss";
|
||
|
||
import type { RootState } from "@/store";
|
||
|
||
export default function Layout() {
|
||
const [_, setActive] = useState(0);
|
||
const { coreVersion } = useSelector(
|
||
(state: RootState) => state.serviceReducer
|
||
);
|
||
|
||
const navList = [
|
||
{
|
||
id: "new-home",
|
||
title: "首页",
|
||
icon: <HomeSvg className="w-5 h-5" />,
|
||
},
|
||
{
|
||
id: "home",
|
||
title: "去中心化的弹性网络",
|
||
icon: <Decentralized className="w-5 h-5" />,
|
||
},
|
||
{
|
||
id: "anti-forensics-forwarding",
|
||
title: "面向溯源对抗的数据转发",
|
||
icon: <PoolSvg className="w-5 h-5" />,
|
||
},
|
||
{
|
||
id: "anti-dark-analysis-network",
|
||
title: "抗暗特征分析的隐匿网络应用",
|
||
icon: <AntiDarkAnalysisNetworkSvg className="w-5 h-5" />,
|
||
},
|
||
// {
|
||
// id: 'proxies',
|
||
// title: '节点池',
|
||
// icon: <PoolSvg className="w-5 h-5" />,
|
||
// },
|
||
];
|
||
|
||
const handleClickMenu = (index: number) => {
|
||
setActive(index);
|
||
};
|
||
|
||
return (
|
||
<div data-tauri-drag-region className="layout flex">
|
||
<div
|
||
data-tauri-drag-region
|
||
className={cn(
|
||
"px-2 py-3 select-none side w-[240px] h-full overflow-hidden flex flex-col gap-y-3 flex-shrink-0 relative",
|
||
isMac && "mt-6"
|
||
)}
|
||
>
|
||
<header className="flex items-center">
|
||
<LogoSvg className="w-8 h-8" />
|
||
<div className="ml-[9px] flex flex-col items-center justify-center">
|
||
<TitleSvg />
|
||
<AnonymousSvg />
|
||
{/* <span className="text-white text-[18px] font-bold tracking-wide">匿名反溯源网络系统</span> */}
|
||
{/* <span className="text-white text-[8px] font-medium">Anonymous anti traceability network system</span> */}
|
||
</div>
|
||
</header>
|
||
<nav className="flex flex-col flex-1 gap-y-2">
|
||
{navList.map((item, index) => {
|
||
return (
|
||
<NavLink
|
||
key={item.id}
|
||
to={"/" + item.id}
|
||
className={({ isActive }) =>
|
||
cn(
|
||
"pl-[11px] py-2 flex items-center gap-2 rounded text-white text-sm",
|
||
isActive && "bg-[#213265] "
|
||
)
|
||
}
|
||
onClick={() => handleClickMenu(index)}
|
||
>
|
||
{item.icon}
|
||
<span>{item.title}</span>
|
||
</NavLink>
|
||
);
|
||
})}
|
||
</nav>
|
||
<footer className="h-[55px] p-4 items-center gap-2 inline-flex absolute left-4 bottom-[20px]">
|
||
<div className="w-[156px] text-white/40 text-sm font-normal leading-tight">
|
||
<div>版本:{coreVersion || "v0.0.1"}</div>
|
||
{/* <div>环境：DEV</div> */}
|
||
</div>
|
||
<ChevronDownSvg fill="rgba(255, 255, 255, 0.4)" />
|
||
</footer>
|
||
</div>
|
||
<main className="flex-1 bg-white mt-10 mb-1 mr-1 rounded-xl overflow-y-hidden overflow-x-auto w-full scrollbar-visible">
|
||
<div className="min-w-[1693px] h-full">
|
||
<Outlet />
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|