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

2026-03-25 22:37:10 +08:00
commit be4bc8a3af
20 changed files with 1828 additions and 0 deletions
--- a/src/App.tsx
+++ b/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;