106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
import { useMemo } from "react";
|
|
import { Route, Routes } from "react-router-dom";
|
|
import { useRecoilValue } from "recoil";
|
|
import {
|
|
createTheme,
|
|
List,
|
|
Paper,
|
|
ThemeProvider,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { atomPaletteMode } from "../states/setting";
|
|
import LogPage from "../pages/log";
|
|
import HomePage from "../pages/home";
|
|
import ProxyPage from "../pages/proxy";
|
|
import SettingPage from "../pages/setting";
|
|
import ProfilesPage from "../pages/profiles";
|
|
import ConnectionsPage from "../pages/connections";
|
|
import ListItemLink from "../components/list-item-link";
|
|
import Traffic from "../components/traffic";
|
|
|
|
const Layout = () => {
|
|
const paletteMode = useRecoilValue(atomPaletteMode);
|
|
|
|
const routers = [
|
|
{
|
|
label: "代理",
|
|
link: "/proxy",
|
|
},
|
|
{
|
|
label: "规则",
|
|
link: "/profiles",
|
|
},
|
|
{
|
|
label: "连接",
|
|
link: "/connections",
|
|
},
|
|
{
|
|
label: "日志",
|
|
link: "/log",
|
|
},
|
|
{
|
|
label: "设置",
|
|
link: "/setting",
|
|
},
|
|
];
|
|
|
|
const theme = useMemo(() => {
|
|
const bgcolor = paletteMode === "light" ? "#f5f5f5" : "#000";
|
|
document.documentElement.style.background = bgcolor;
|
|
|
|
return createTheme({
|
|
palette: {
|
|
mode: paletteMode,
|
|
primary: {
|
|
main: "#5b5c9d",
|
|
},
|
|
text: {
|
|
primary: "#637381",
|
|
secondary: "#909399",
|
|
},
|
|
},
|
|
});
|
|
}, [paletteMode]);
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<Paper square elevation={0} className="layout">
|
|
<div className="layout__sidebar">
|
|
<Typography
|
|
variant="h3"
|
|
component="h1"
|
|
sx={{ my: 2, px: 2, textAlign: "center", userSelect: "none" }}
|
|
>
|
|
Clash Verge
|
|
</Typography>
|
|
|
|
<List sx={{ userSelect: "none" }}>
|
|
{routers.map((router) => (
|
|
<ListItemLink key={router.label} to={router.link}>
|
|
{router.label}
|
|
</ListItemLink>
|
|
))}
|
|
</List>
|
|
|
|
<div className="layout__traffic">
|
|
<Traffic />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="layout__content">
|
|
<Routes>
|
|
<Route path="/" element={<HomePage />} />
|
|
<Route path="/proxy" element={<ProxyPage />} />
|
|
<Route path="/profiles" element={<ProfilesPage />} />
|
|
<Route path="/log" element={<LogPage />} />
|
|
<Route path="/connections" element={<ConnectionsPage />} />
|
|
<Route path="/setting" element={<SettingPage />} />
|
|
</Routes>
|
|
</div>
|
|
</Paper>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|