From 41995741095e302f81d0769dbd6191395afedb07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?= Date: Mon, 18 Apr 2022 23:18:13 +0800 Subject: [PATCH] Feat: Route FrontWrapper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 路由包装组件，改善 404 页面效果，Vite 环境变量修改 --- .env | 7 ++++ midway.config.ts | 1 + src/components/Layout/Footer.tsx | 1 + src/components/Layout/FrontWrapper.tsx | 46 ++++++++++++++++++++++++ src/images/404.webp | Bin 0 -> 100212 bytes src/index.css | 32 ++++++++++++++++- src/index.tsx | 47 +++++++++++++++++-------- src/pages/404.tsx | 14 ++++++-- src/pages/index.tsx | 6 ++-- src/pages/log.tsx | 3 ++ 10 files changed, 135 insertions(+), 22 deletions(-) create mode 100644 .env create mode 100644 src/components/Layout/FrontWrapper.tsx create mode 100644 src/images/404.webp diff --git a/.env b/.env new file mode 100644 index 0000000..da03b7a --- /dev/null +++ b/.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" diff --git a/midway.config.ts b/midway.config.ts index 9609c40..b54050e 100644 --- a/midway.config.ts +++ b/midway.config.ts @@ -14,5 +14,6 @@ export default defineConfig({ } ] }, + envPrefix: "PAUL_" }, }); diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index f207735..96e43bb 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -17,6 +17,7 @@ function Footer() {

+ 作者主页 使用约定 维护记录

diff --git a/src/components/Layout/FrontWrapper.tsx b/src/components/Layout/FrontWrapper.tsx new file mode 100644 index 0000000..3676f60 --- /dev/null +++ b/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 ( + <> +