snowykami/neo-blog
1
0
Fork 0
mirror of https://github.com/snowykami/neo-blog.git synced 2025-09-04 00:06:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
远野千束
2025-07-28 14:32:02 +08:00
parent faa793a68d
commit dc698da285
4 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/app/(main)/layout.tsx
View File

@ -14,13 +14,13 @@ export default function RootLayout({
const pathname = usePathname() const pathname = usePathname()
return ( 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"> <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 /> <Navbar />
</header> </header>
<motion.main <motion.main
key={pathname} key={pathname}
initial={{ opacity: 0, y: 16 }} initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, scale: 1 }}
transition={{ transition={{
type: 'tween', type: 'tween',
ease: 'easeOut', ease: 'easeOut',
@ -28,6 +28,7 @@ export default function RootLayout({
}} }}
className="pt-16" className="pt-16"
> >
<BackgroundProvider> <BackgroundProvider>
<div className='container mx-auto px-4 sm:px-6 lg:px-10 max-w-7xl'>{children}</div> <div className='container mx-auto px-4 sm:px-6 lg:px-10 max-w-7xl'>{children}</div>
</BackgroundProvider> </BackgroundProvider>

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

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

7
web/src/components/blog-post.tsx
View File

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

4
web/src/components/scroll-to-top.client.tsx
View File

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