feat: finish main layout

src/pages/_layout.tsx

@@ -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;

src/pages/connections.tsx

@@ -0,0 +1,5 @@
+const ConnectionsPage = () => {
+  return <h1>Connection</h1>;
+};
+
+export default ConnectionsPage;

src/pages/home.tsx

@@ -1,18 +1,10 @@
-import { useState } from "react";
-import { TextField } from "@material-ui/core";
+import { Typography } from "@mui/material";
 
 const HomePage = () => {
-  const [port, setPort] = useState("7890");
-
   return (
-    <div>
-      <TextField
-        label="Port"
-        fullWidth
-        value={port}
-        onChange={(e) => setPort(e.target.value)}
-      />
-    </div>
+    <Typography variant="h1" textAlign="center" mt={10}>
+      Hello Clash!
+    </Typography>
   );
 };
 

src/pages/log.tsx

@@ -0,0 +1,5 @@
+const LogPage = () => {
+  return <h1>Log</h1>;
+};
+
+export default LogPage;

src/pages/profiles.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { invoke } from "@tauri-apps/api";
-import { Button, Grid, TextField } from "@material-ui/core";
+import { Button, Grid, TextField } from "@mui/material";
 
 const ProfilesPage = () => {
   const [url, setUrl] = useState("");

src/pages/proxy.tsx

@@ -0,0 +1,5 @@
+const ProxyPage = () => {
+  return <h1>Proxy</h1>;
+};
+
+export default ProxyPage;

src/pages/setting.tsx

@@ -0,0 +1,5 @@
+const SettingPage = () => {
+  return <h1>Setting</h1>;
+};
+
+export default SettingPage;