mirror of
https://github.com/clash-verge-rev/clash-verge-rev.git
synced 2026-01-29 08:45:41 +08:00
feat: finish main layout
This commit is contained in:
74
src/pages/_layout.tsx
Normal file
74
src/pages/_layout.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
import { List, Paper, Typography } from "@mui/material";
|
||||
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 routers = [
|
||||
{
|
||||
label: "代理",
|
||||
link: "/proxy",
|
||||
},
|
||||
{
|
||||
label: "规则",
|
||||
link: "/profiles",
|
||||
},
|
||||
{
|
||||
label: "连接",
|
||||
link: "/connections",
|
||||
},
|
||||
{
|
||||
label: "日志",
|
||||
link: "/log",
|
||||
},
|
||||
{
|
||||
label: "设置",
|
||||
link: "/setting",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
Reference in New Issue
Block a user