init: 初始化仓库，并添加基础页面

src/App.tsx

@@ -0,0 +1,72 @@
+import type { ParentComponent } from "solid-js";
+import { A, useLocation } from "@solidjs/router";
+import { createSignal } from "solid-js";
+
+const asideList = [
+  { label: "账号", url: "/account" },
+  { label: "设置", url: "/setting" },
+];
+const userInfo = {
+  name: "张三",
+  id: "123456",
+  dept: "大数据学院",
+  class: "3班",
+  gender: "男",
+};
+const infoList = [
+  ["名字", userInfo.name],
+  ["学号", userInfo.id],
+  ["学院", userInfo.dept],
+  ["班级", userInfo.class],
+  ["性别", userInfo.gender],
+];
+
+const App: ParentComponent = (props) => {
+  const location = useLocation();
+
+  return (
+    <div class="flex h-screen w-full flex-col">
+      <header class="m-2 flex shrink-0 flex-row items-center justify-between space-x-2 rounded-lg border-2 border-cyan-500/20 bg-zinc-100 px-5 py-2">
+        <div class="rounded-xl bg-cyan-300/50 px-2 py-1 text-xl">
+          <A href="/">标题</A>
+        </div>
+        <details class="relative rounded-xl bg-zinc-700/50 px-2 py-1 text-xl">
+          <summary>个人信息</summary>
+          <div class="absolute top-full right-0 w-max gap-y-2 rounded-xl border border-zinc-100 bg-zinc-400/50 p-2">
+            {infoList.map(([label, value]) => (
+              <p class="text-lg">
+                {label}: <span>{value}</span>
+              </p>
+            ))}
+          </div>
+        </details>
+      </header>
+      <div class="flex min-h-0 min-w-0 flex-1">
+        <aside class="m-2 flex shrink-0 flex-col gap-y-1 rounded-lg border-2 border-cyan-500/20 bg-zinc-100 px-2 py-2">
+          {asideList.map((item) => {
+            return (
+              <A
+                href={item.url}
+                class={
+                  location.pathname === item.url ||
+                  (location.pathname === "/" && item.url === "/account"
+                    ? true
+                    : false)
+                    ? "rounded-xl border border-zinc-100 bg-blue-300/50 p-2"
+                    : "p-2"
+                }
+              >
+                {item.label}
+              </A>
+            );
+          })}
+        </aside>
+        <main class="m-2 flex flex-1 flex-col justify-center rounded-lg border-2 border-cyan-500/20 bg-zinc-100 px-2 py-2 text-center">
+          {props.children}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default App;

src/assets/solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/index.tsx

@@ -0,0 +1,30 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+import "./index.css";
+import App from "./App.tsx";
+import { Router, Route } from "@solidjs/router";
+import { lazy } from "solid-js";
+
+const root = document.getElementById("root");
+
+render(
+  () => (
+    <Router>
+      <Route path="/" component={App}>
+        <Route
+          path=""
+          component={lazy(() => import("./pages/accouts/Account.tsx"))}
+        />
+        <Route
+          path="account"
+          component={lazy(() => import("./pages/accouts/Account.tsx"))}
+        />
+        <Route
+          path="setting"
+          component={lazy(() => import("./pages/settings/Setting.tsx"))}
+        />
+      </Route>
+    </Router>
+  ),
+  root!,
+);

src/pages/accouts/Account.tsx

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

src/pages/settings/Setting.tsx

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