feat: layout and start

src/styles/core.scss

@@ -107,7 +107,8 @@ p,
 section,
 span,
 image,
-img {
+img,
+nav {
   box-sizing: border-box;
 }
 

src/ui/Layout/index.module.scss

+.navbar {
+  --height: 48px;
+  width: 100%;
+  height: var(--height);
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  padding: 0 1rem;
+  gap: 1rem;
+  box-sizing: border-box;
+  .logo {
+    height: 100%;
+    filter: brightness(1.5);
+    margin-right: -10px; // 以后删除这个，现在这么写是因为图片边框有点大
+  }
+  a {
+    color: white;
+    font-family: sans-serif;
+    text-decoration: none;
+    font-size: 0.825rem;
+    line-height: var(--height);
+    // height: fit-content;
+  }
+}

src/ui/Layout/index.tsx

+import { NavLink, Outlet } from "react-router-dom";
+
+import { useConfig } from "@/config";
+
+const NeosConfig = useConfig();
+import styles from "./index.module.scss";
+
+export const NeosLayout = () => {
+  return (
+    <>
+      <nav className={styles.navbar}>
+        <img
+          className={styles.logo}
+          src={`${NeosConfig.assetsPath}/neos_logo.png`}
+          alt="NEOS"
+        />
+
+        <NavLink to="/">主页</NavLink>
+        <NavLink to="/match">匹配</NavLink>
+        <NavLink to="/build">组卡</NavLink>
+        <span style={{ flexGrow: 1 }} />
+        <NavLink to="/home">我的</NavLink>
+      </nav>
+      <Outlet />
+    </>
+  );
+};

src/ui/Neos.tsx

@@ -6,6 +6,7 @@ import {
   RouterProvider,
 } from "react-router-dom";
 
+import { NeosLayout } from "./Layout";
 import LazyLoad, { Loading } from "./LazyLoad";
 
 const Start = React.lazy(() => import("./Start"));
@@ -17,10 +18,28 @@ const Replay = React.lazy(() => import("./Replay"));
 const SSO = React.lazy(() => import("./SSO"));
 const Home = React.lazy(() => import("./Home"));
 
+// TODO: finish this
+const _router = createBrowserRouter([
+  {
+    path: "/",
+    element: <NeosLayout />,
+    children: [
+      {
+        path: "/",
+        element: <LazyLoad lazy={<Start />} />,
+      },
+      {
+        path: "/match",
+        element: <LazyLoad lazy={<Match />} />,
+      },
+    ],
+  },
+]);
+
 // 暂且先这么写，为后重构为createBrowserRouter打基础
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route>
+    <Route path="/" element={<NeosLayout />}>
       <Route path="/" element={<LazyLoad lazy={<Start />} />} />
       <Route path="/home" element={<LazyLoad lazy={<Home />} />} />
       <Route path="/match" element={<LazyLoad lazy={<Match />} />} />

src/ui/Start/index.module.scss

@@ -11,24 +11,6 @@ body * {
   font-size: 1em;
 }
 
-.mycard-header {
-  position: relative;
-  z-index: 5000;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, .6);
-  border-bottom: 1px solid rgba(150, 150, 150, .2);
-  width: 100%;
-  height: 40px;
-}
-
-.mycard-header > a:first-child {
-  display: inline-block;
-  position: absolute;
-  left: 2%;
-  top: 0;
-}
-
 .wrapper {
   position: relative;
 }
@@ -37,49 +19,71 @@ body * {
   z-index: 20;
 }
 
-.neos-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 20;
-  padding: 22em 0 4em;
-}
-
-.neos-header::after {
-  background-image: url(/neos-assets/monster.png);
-  background-position: center -50px;
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-repeat: no-repeat;
-  z-index: 1;
-}
-
-.neos-header h1 {
-  margin-bottom: 1em;
-  padding: 0 1.5em;
+.main {
+  height: 650px;
+  width: 650px;
+  margin: auto;
+  margin-top: 50px; // FIXME
   position: relative;
-  z-index: 2;
+  .neos-pic {
+    max-width: 100%;
+    max-height: 100%;
+    z-index: 1;
+  }
+  .neos-logo {
+    filter: brightness(2) drop-shadow(0 0 0.75rem #ffffffb8)
+      drop-shadow(0 0 0.1rem #373737c6);
+    position: absolute;
+    bottom: 0%;
+    width: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 
-.neos-header button {
+.start-btn {
+  color: white;
+  font-family: sans-serif;
+  text-decoration: none;
+  appearance: none;
+  cursor: pointer;
   position: relative;
-  background-color: transparent;
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  white-space-collapse: collapse;
+  text-wrap: nowrap;
+  user-select: none;
+  max-width: 100%;
+  flex-shrink: 0;
+  height: 48px;
+  border-radius: 9999px;
+  text-shadow: rgba(0, 0, 0, 0.25) 0px 3px 8px;
+  gap: 8px;
+  margin: 0px;
+  font: inherit inherit inherit inherit inherit inherit inherit inherit inherit
+    inherit inherit inherit inherit;
+  transition: border 120ms ease 0s, background-color, color, box-shadow, opacity;
+  padding: 0px 24px;
+  border-width: initial;
   border-style: none;
-  color: rgba(255, 255, 255, .8);
-  font-family: var(--theme-font);
-  font-size: 2.5em;
-  font-weight: bold;
-  text-shadow: 0 0 0.5em #a2162d, 0 0 0.5em #f80000d6;
-  z-index: 2;
+  border-color: initial;
+  border-image: initial;
+  background: linear-gradient(
+    92.88deg,
+    rgb(69, 94, 181) 9.16%,
+    rgb(86, 67, 204) 43.89%,
+    rgb(103, 63, 215) 64.72%
+  );
+  transition: 0.2s;
+  &:hover {
+    filter: brightness(1.2);
+  }
 }
 
-.neos-header button:hover {
-  text-shadow: 0 0 0.5em #2137bd, 0 0 0.5em #2137bd;
-}
+// 以下是粒子动画的样式
 
 .particles-container {
   width: 100%;

src/ui/Start/index.tsx

 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { useConfig } from "@/config";
 
@@ -7,46 +7,31 @@ import styles from "./index.module.scss";
 const NeosConfig = useConfig();
 
 const Start: React.FC = () => {
-  const navigate = useNavigate();
   return (
     <>
-      <div className={styles["mycard-header"]}>
-        <a href="https://mycard.moe/">
-          <img
-            src={`${NeosConfig.assetsPath}/mycard_logo.png`}
-            alt="MyCard"
-            width={130}
-            height={40}
-          />
-        </a>
-      </div>
       <div className={styles.wrapper}>
         <div className={styles["particles-container"]}>
-          {Array.from({ length: 100 }).map((_) => (
-            <div className={styles["particle-container"]}>
+          {Array.from({ length: 100 }).map((_, key) => (
+            <div key={key} className={styles["particle-container"]}>
               <div className={styles["particle"]} />
             </div>
           ))}
         </div>
-        <div role="banner" className={styles["neos-header"]}>
-          <div>
-            <h1>
-              <img
-                src={`${NeosConfig.assetsPath}/neos_logo.png`}
-                width={540}
-                height={250}
-                alt="YGO NEOS"
-              />
-            </h1>
-            <button
-              onClick={() => {
-                navigate("/sso");
-              }}
-            >
-              登录萌卡进行游玩
-            </button>
-          </div>
-        </div>
+        <main className={styles["main"]}>
+          <img
+            className={styles["neos-logo"]}
+            src={`${NeosConfig.assetsPath}/neos_logo.png`}
+            alt="YGO NEOS"
+          />
+          <img
+            className={styles["neos-pic"]}
+            src={`${NeosConfig.assetsPath}/neos.png`}
+            alt="neos"
+          />
+        </main>
+        <Link to="/sso" className={styles["start-btn"]}>
+          登录游戏
+        </Link>
       </div>
     </>
   );