From e9b00d572953de518f72eab22b545e718a194373 Mon Sep 17 00:00:00 2001
From: besscroft <besscroft@foxmail.com>
Date: Mon, 8 Apr 2024 15:02:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(default)/layout.tsx   |  9 ++++-
 app/admin/layout.tsx       | 23 ++++++-----
 components/Header.tsx      | 16 +++-----
 components/Transitions.tsx | 80 ++++++++++++++++++++++++++++++++++++++
 components/VaulDrawer.tsx  | 62 +++++++++++++----------------
 5 files changed, 135 insertions(+), 55 deletions(-)
 create mode 100644 components/Transitions.tsx

diff --git a/app/(default)/layout.tsx b/app/(default)/layout.tsx
index 7b5d869..1208320 100644
--- a/app/(default)/layout.tsx
+++ b/app/(default)/layout.tsx
@@ -1,4 +1,5 @@
 import Header from '~/components/Header'
+import Transitions, { Animate } from '~/components/Transitions'
 
 export default async function DefaultLayout({
   children,
@@ -7,8 +8,12 @@ export default async function DefaultLayout({
 }>) {
   return (
     <>
-      <Header/>
-      {children}
+      <Transitions className="h-full flex flex-col">
+        <Header/>
+        <Animate className="flex-1">
+          {children}
+        </Animate>
+      </Transitions>
     </>
   );
 }
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index 0966550..6510ccc 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -1,5 +1,6 @@
 import DashHeader from '~/components/DashHeader'
 import { BaseSide } from '~/components/BaseSide'
+import Transitions, { Animate } from '~/components/Transitions'
 
 export default function AdminLayout({
   children,
@@ -9,15 +10,19 @@ export default function AdminLayout({
   return (
     <>
       <div className="flex flex-col h-screen">
-        <DashHeader/>
-        <div className="grid flex-1 sm:grid-cols-[200px_1fr] h-full w-full bg-gray-100 dark:bg-zinc-900">
-          <aside className="hidden w-[200px] flex-col sm:flex">
-            <BaseSide/>
-          </aside>
-          <main className="flex w-full h-full flex-1 flex-col overflow-hidden p-2">
-            {children}
-          </main>
-        </div>
+        <Transitions className="h-full flex flex-col">
+          <DashHeader/>
+          <div className="grid flex-1 sm:grid-cols-[200px_1fr] h-full w-full bg-gray-100 dark:bg-zinc-900">
+            <aside className="hidden w-[200px] flex-col sm:flex">
+              <BaseSide/>
+            </aside>
+            <main className="flex w-full h-full flex-1 flex-col overflow-hidden p-2">
+              <Animate className="flex-1">
+                {children}
+              </Animate>
+            </main>
+          </div>
+        </Transitions>
       </div>
     </>
   );
diff --git a/components/Header.tsx b/components/Header.tsx
index 711925d..e822f7e 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,24 +1,20 @@
-'use client'
-
-import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Link } from '@nextui-org/react'
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/react'
 import Logo from '~/components/Logo'
 import DynamicNavbar from '~/components/DynamicNavbar'
-import { useRouter } from 'next-nprogress-bar'
+import Link from 'next/link'
 
 export default function Header() {
-  const router = useRouter()
-
   return (
     <Navbar>
       <NavbarBrand>
         <Logo />
       </NavbarBrand>
       <NavbarContent className="hidden sm:flex gap-4 select-none" justify="center">
-        <NavbarItem onClick={() => router.push('/')} className="cursor-pointer">
-          首页
+        <NavbarItem className="cursor-pointer">
+          <Link href="/">首页</Link>
         </NavbarItem>
-        <NavbarItem onClick={() => router.push('/about')} className="cursor-pointer">
-          关于
+        <NavbarItem className="cursor-pointer">
+          <Link href="/about">关于</Link>
         </NavbarItem>
       </NavbarContent>
       <NavbarContent justify="end">
diff --git a/components/Transitions.tsx b/components/Transitions.tsx
new file mode 100644
index 0000000..fcdb3b0
--- /dev/null
+++ b/components/Transitions.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import { useRouter } from 'next-nprogress-bar'
+import {
+  createContext,
+  MouseEventHandler,
+  PropsWithChildren,
+  use,
+  useTransition,
+} from 'react'
+
+export const DELAY = 200;
+
+const sleep = (ms: number) =>
+  new Promise<void>((resolve) => setTimeout(() => resolve(), ms));
+const noop = () => {};
+
+type TransitionContext = {
+  pending: boolean;
+  navigate: (url: string) => void;
+};
+const Context = createContext<TransitionContext>({
+  pending: false,
+  navigate: noop,
+});
+export const usePageTransition = () => use(Context);
+
+type Props = PropsWithChildren<{
+  className?: string;
+}>;
+
+export default function Transitions({ children, className }: Props) {
+  const [pending, start] = useTransition();
+  const router = useRouter();
+
+  const navigate = (href: string) => {
+    start(async () => {
+      router.push(href);
+      await sleep(DELAY);
+    });
+  };
+
+  const onClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    const a = (e.target as Element).closest("a");
+    if (a) {
+      e.preventDefault();
+      const href = a.getAttribute("href");
+      if (href) {
+        navigate(href);
+      }
+    }
+  };
+
+  return (
+    <Context.Provider value={{ pending, navigate }}>
+      <div onClickCapture={onClick} className={className}>
+        {children}
+      </div>
+    </Context.Provider>
+  );
+}
+
+export function Animate({ children, className }: Props) {
+  const { pending } = usePageTransition();
+  return (
+    <AnimatePresence>
+      {!pending && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className={className}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
\ No newline at end of file
diff --git a/components/VaulDrawer.tsx b/components/VaulDrawer.tsx
index 54a4c50..3091e15 100644
--- a/components/VaulDrawer.tsx
+++ b/components/VaulDrawer.tsx
@@ -23,7 +23,6 @@ import {
   SunIcon
 } from '@radix-ui/react-icons'
 
-
 export default function VaulDrawer() {
   const { data: session, status } = useSession()
   const router = useRouter()
@@ -56,39 +55,34 @@ export default function VaulDrawer() {
                     <Listbox
                       aria-label="移动端菜单"
                     >
-                      {
-                        pathname.startsWith('/admin') ?
-                          pathname === '/admin' ?
-                            <ListboxItem
-                              key="home"
-                              startContent={<HomeIcon className={iconClasses} />}
-                              onClick={() => router.push('/')}
-                            >
-                              <Drawer.Close className="w-full text-left">
-                                首页
-                              </Drawer.Close>
-                            </ListboxItem>
-                            :
-                            <ListboxItem
-                              key="home"
-                              startContent={<DesktopIcon className={iconClasses} />}
-                              onClick={() => router.push('/admin')}
-                            >
-                              <Drawer.Close className="w-full text-left">
-                                控制台
-                              </Drawer.Close>
-                            </ListboxItem>
-                          :
-                          <ListboxItem
-                            key="home"
-                            startContent={<DesktopIcon className={iconClasses} />}
-                            onClick={() => router.push('/admin')}
-                          >
-                            <Drawer.Close className="w-full text-left">
-                              控制台
-                            </Drawer.Close>
-                          </ListboxItem>
-                      }
+                      <ListboxItem
+                        key="home"
+                        startContent={<HomeIcon className={iconClasses} />}
+                        onClick={() => router.push('/')}
+                      >
+                        <Drawer.Close className="w-full text-left">
+                          首页
+                        </Drawer.Close>
+                      </ListboxItem>
+                      <ListboxItem
+                        key="about"
+                        startContent={<InfoCircledIcon className={iconClasses} />}
+                        onClick={() => router.push('/about')}
+                        showDivider
+                      >
+                        <Drawer.Close className="w-full text-left">
+                          关于
+                        </Drawer.Close>
+                      </ListboxItem>
+                      <ListboxItem
+                        key="admin"
+                        startContent={<DesktopIcon className={iconClasses} />}
+                        onClick={() => router.push('/admin')}
+                      >
+                        <Drawer.Close className="w-full text-left">
+                          控制台
+                        </Drawer.Close>
+                      </ListboxItem>
                       <ListboxItem
                         key="upload"
                         startContent={<RocketIcon className={iconClasses} />}