Feat: Route FrontWrapper

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

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>
-      <h1>404</h1>
+      <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 { getDate } from '../api/date';
-import fetchGithubStars from '../api/star';
-import { getBookByParams, getBookByQuery } from '../api/book';
+import { useRequest } from "ahooks";
+
 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>