Feat: Route FrontWrapper

路由包装组件，改善 404 页面效果，Vite 环境变量修改

.env

@@ -0,0 +1,7 @@
+DB_NAME=paul_api_next
+DB_USER=root
+DB_PASS=233456
+DB_PORT=8889
+DB_LINK=localhost
+
+PAUL_SITENAME="保罗 API Next"

midway.config.ts

@@ -14,5 +14,6 @@ export default defineConfig({
         }
       ]
     },
+    envPrefix: "PAUL_"
   },
 });

src/components/Layout/Footer.tsx

@@ -17,6 +17,7 @@ function Footer() {
         </div>
         <div className="col-m-6 right to-center">
           <p className="links">
+            <a href="https://paul.ren" target="_blank">作者主页</a>
             <Link to="/notice">使用约定</Link>
             <Link to="/log">维护记录</Link>
           </p>

src/components/Layout/FrontWrapper.tsx

@@ -0,0 +1,46 @@
+// React
+import React, { useEffect, useLayoutEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+
+// Components
+import Aside from "@/components/Layout/Aside";
+import Footer from "@/components/Layout/Footer";
+
+
+// Interface
+interface FrontWrapperProps {
+  title?: string
+  element: JSX.Element
+}
+
+
+// Components
+function FrontWrapper(props: FrontWrapperProps) {
+  const location = useLocation();
+
+  useEffect(() => {
+    const name = import.meta.env.PAUL_SITENAME;
+
+    if (props.title) {
+      document.title = `${props.title} - ${name}`;
+    }
+    else if (name) {
+      document.title = String(name);
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    window.scrollTo({ top: 0, left: 0 });
+  }, [location.pathname]);
+
+  return (
+    <>
+      <Aside />
+      {props.element}
+      <Footer />
+    </>
+  );
+}
+
+export default FrontWrapper;

src/index.css

@@ -317,7 +317,37 @@ footer .links a:last-child::after{
   transform: rotate(45deg) translateX(50%);
 }
 
-/* 4 - 附加
+/* 4 - 404 页面
+------------------------------ */
+.no-match{
+  margin: auto;
+  max-width: 30em;
+  user-select: none;
+  text-align: center;
+  margin-bottom: 3em;
+}
+
+.no-match h1{
+  line-height: 1;
+  font-size: 3em;
+  font-weight: bold;
+}
+
+.no-match p{
+  opacity: .6;
+}
+
+.no-match .board{
+  margin: 0 auto;
+  color: #263555;
+  max-width: 20em;
+  padding: 2em 1em;
+  border-radius: 1em;
+  background-color: #bbf7ec;
+  border: 2px solid #263555;
+}
+
+/* 5 - 附加
 ------------------------------ */
 .gt-meta{
   margin-top: 0;

src/index.tsx

@@ -7,10 +7,6 @@ import "./index.css";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 
-// Components
-import Aside from "./components/Layout/Aside";
-import Footer from "./components/Layout/Footer";
-
 
 // Routes
 import Home from "./pages/index";
@@ -24,22 +20,43 @@ import Bing from "./pages/bing";
 import NoMatch from "./pages/404";
 
 
+// RouteWrapper
+import FrontWrapper from "./components/Layout/FrontWrapper";
+
+
+// Components
 function App() {
   return (
     <Router>
-      <Aside />
       <Routes>
-        <Route path="/" element={<Home />} />
+        <Route path="/" element={
-        <Route path="/notice" element={<Notice />} />
+          <FrontWrapper element={<Home />} />}
-        <Route path="/log" element={<Log />} />
+        />
-        <Route path="/netease" element={<Netease />} />
+        <Route path="/notice" element={
-        <Route path="/wallpaper" element={<Wallpaper />} />
+          <FrontWrapper title="使用约定" element={<Notice />} /> }
-        <Route path="/acgm" element={<ACGM />} />
+        />
-        <Route path="/bili" element={<Bili />} />
+        <Route path="/log" element={
-        <Route path="/bing" element={<Bing />} />
+          <FrontWrapper title="更新记录" element={<Log />} />}
-        <Route path="*" element={<NoMatch />} />
+        />
+        <Route path="/netease" element={
+          <FrontWrapper title="网易云解析" element={<Netease />} />}
+        />
+        <Route path="/wallpaper" element={
+          <FrontWrapper title="随机动漫壁纸" element={<Wallpaper />} />}
+        />
+        <Route path="/acgm" element={
+          <FrontWrapper title="随机动漫音乐" element={<ACGM />} />}
+        />
+        <Route path="/bili" element={
+          <FrontWrapper title="哔哩哔哩小窗" element={<Bili />} />}
+        />
+        <Route path="/bing" element={
+          <FrontWrapper title="必应每日壁纸" element={<Bing />} />}
+        />
+        <Route path="*" element={
+          <FrontWrapper title="404" element={<NoMatch />} />}
+        />
       </Routes>
-      <Footer />
     </Router>
   );
 }

src/pages/404.tsx

@@ -2,11 +2,21 @@
 import React from "react";
 
 
+// UI
+import Miku from "@/images/404.webp";
+
+
 // Components
-function NoMatch() {
+function NoMatch(){
   return (
     <main>
+      <div className="no-match">
+        <img src={Miku} alt="404" />
+        <div className="board">
           <h1>404</h1>
+          <p>并没有这个页面啦</p>
+        </div>
+      </div>
     </main>
   )
 }

src/pages/index.tsx

@@ -1,9 +1,7 @@
 import React from "react";
 
-import { useRequest } from 'ahooks';
+import { useRequest } from "ahooks";
-import { getDate } from '../api/date';
+
-import fetchGithubStars from '../api/star';
-import { getBookByParams, getBookByQuery } from '../api/book';
 import getStat from "../api/stat";
 
 import { Link } from "react-router-dom";

src/pages/log.tsx

@@ -12,6 +12,9 @@ function Log() {
     <main>
       <ArticleHead title="更新记录" desc="本项目的维护及更新记录" />
       <article className="post">
+        <h3>2022.4.18</h3>
+        <p>路由布局结构修改为 React-Router 官方提供的 <a href="https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f" rel="nofollow" target="_blank">方案</a>，改善 404 页面效果</p>
+
         <h3>2022.4.13</h3>
         <p>陆续还原网易云、随机动漫音乐等 API 的说明页面，引入 PrismJS 实现代码高亮</p>
         <p>网易云 API 增加别名字段，随机动漫音乐 API 增加缓存的字段（番名）</p>