♻️ refactor: 优化布局组件，调整动画效果并修复ScrollToTop组件的依赖

web/src/app/(main)/layout.tsx

@@ -14,13 +14,13 @@ export default function RootLayout({
   const pathname = usePathname()
   return (
     <>
-      <header className="fixed top-0 left-0 w-full z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur flex justify-center border-b border-slate-200 dark:border-slate-800">
-        <Navbar />
-      </header>
+    <header className="fixed top-0 left-0 w-full z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur flex justify-center border-b border-slate-200 dark:border-slate-800">
+          <Navbar />
+        </header>
       <motion.main
         key={pathname}
-        initial={{ opacity: 0, y: 16 }}
-        animate={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
         transition={{
           type: 'tween',
           ease: 'easeOut',
@@ -28,6 +28,7 @@ export default function RootLayout({
         }}
         className="pt-16"
       >
+        
         <BackgroundProvider>
           <div className='container mx-auto px-4 sm:px-6 lg:px-10 max-w-7xl'>{children}</div>
         </BackgroundProvider>

web/src/app/(main)/p/[id]/page.tsx

@@ -12,5 +12,9 @@ export default async function PostPage({ params }: Props) {
   const post = await getPostById(id, cookieStore.get('token')?.value || '');
   if (!post)
     return <div>文章不存在</div>
-  return <BlogPost post={post} />
+  return (
+    <div className="flex flex-col h-100vh">
+      <BlogPost post={post} />
+    </div>
+  )
 }

web/src/components/blog-post.tsx

@@ -1,7 +1,6 @@
 import { Suspense } from "react";
 import type { Post } from "@/models/post";
 import { Calendar, Clock, FileText, Flame, Heart, MessageCircle, PenLine, SquarePen } from "lucide-react";
-import { MDXRemote } from "next-mdx-remote-client/rsc";
 import ScrollToTop from "@/components/scroll-to-top.client";
 import { RenderMarkdown } from "@/components/markdown";
 import { isMobileByUA } from "@/utils/server/device";
@@ -134,10 +133,10 @@ async function PostContent({ post }: { post: Post }) {
 
 async function BlogPost({ post }: { post: Post }) {
   return (
-    <div className="">
-      <ScrollToTop />
+    <div className="h-full">
+      {/* <ScrollToTop /> */}
       <PostHeader post={post} />
-        <PostContent post={post} />
+      <PostContent post={post} />
     </div>
   );
 }

web/src/components/scroll-to-top.client.tsx

@@ -1,9 +1,11 @@
 'use client'
+import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 export default function ScrollToTop() {
+  const pathname = usePathname();
   useEffect(() => {
     window.scrollTo(0, 0);
-  }, []);
+  }, [pathname]);
   return null;
 }