chore: init project

src/assets/styles/index.scss

@@ -0,0 +1,67 @@
+html {
+  background-color: #fff;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  &__sidebar {
+    height: 100vh;
+    flex: 1 1 25%;
+    border-right: 1px solid #ccc;
+
+    > h1 {
+      text-align: center;
+      color: #303133;
+    }
+
+    > h3 {
+      text-align: center;
+      color: #909399;
+    }
+  }
+
+  &__links {
+    $link-height: 60px;
+
+    border-top: 1px solid #ccc;
+
+    > a {
+      display: block;
+      width: 100%;
+      height: $link-height;
+      line-height: $link-height;
+      text-align: center;
+      user-select: none;
+      font-size: 24px;
+      color: #606266;
+      border-bottom: 1px solid #ccc;
+      text-decoration: none;
+
+      &.active {
+        background-color: #eee;
+      }
+    }
+  }
+
+  &__content {
+    flex: 1 1 75%;
+    padding: 20px 30px;
+    box-sizing: border-box;
+  }
+}

src/main.tsx

@@ -0,0 +1,40 @@
+import "./assets/styles/index.scss";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter, NavLink, Route, Routes } from "react-router-dom";
+import HomePage from "./pages/home";
+import ProfilesPage from "./pages/profiles";
+import { version } from "../package.json";
+
+function Layout() {
+  return (
+    <div className="layout">
+      <div className="layout__sidebar">
+        <h1>Clash Verge</h1>
+        <h3>{version}</h3>
+
+        <div className="layout__links">
+          <NavLink to="/">Home</NavLink>
+          <NavLink to="/profiles">Profiles</NavLink>
+        </div>
+      </div>
+
+      <div className="layout__content">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/profiles" element={<ProfilesPage />} />
+        </Routes>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <Layout />
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById("root")
+);

src/pages/home.tsx

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { TextField } from "@material-ui/core";
+
+const HomePage = () => {
+  const [port, setPort] = useState("7890");
+
+  return (
+    <div>
+      <TextField
+        label="Port"
+        fullWidth
+        value={port}
+        onChange={(e) => setPort(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export default HomePage;

src/pages/profiles.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { invoke } from "@tauri-apps/api";
+import { Button, Grid, TextField } from "@material-ui/core";
+
+const ProfilesPage = () => {
+  const [url, setUrl] = useState("");
+
+  const onClick = async () => {
+    if (!url) return;
+    const data = await invoke("get_config_data", { url });
+    console.log(data);
+  };
+
+  return (
+    <div>
+      <Grid
+        container
+        spacing={2}
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Grid item xs={9}>
+          <TextField
+            label="Profile Url"
+            fullWidth
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+          />
+        </Grid>
+        <Grid item>
+          <Button size="large" variant="contained" onClick={onClick}>
+            View
+          </Button>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default ProfilesPage;

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />