From dc938fdb01254c91f7240a1b76bb13c15203b69d Mon Sep 17 00:00:00 2001
From: tone <tonesc@qq.com>
Date: Sat, 20 Dec 2025 23:18:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=8D=9A=E5=AE=A2?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=E3=80=81=E8=AF=AD=E4=B9=89=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(with-header-footer)/blog/[id]/page.tsx   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx b/apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx
index 14235e0..d08979f 100644
--- a/apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx
+++ b/apps/frontend/app/(with-header-footer)/blog/[id]/page.tsx
@@ -59,18 +59,20 @@ export default function Blog() {
                     </div>
                 )}
                 {data && (
-                    <>
-                        <h1 className="text-center text-3xl font-bold mt-10">{data.title}</h1>
-                        <p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p>
+                    <article className="w-full">
+                        <header className="flex flex-col items-center">
+                            <h1 className="text-center text-2xl sm:text-3xl font-bold mt-10 transition-all duration-500">{data.title}</h1>
+                            <time className="text-sm text-zinc-500 text-center my-2 sm:my-5 mb-5 transition-all duration-500">发布于：{new Date(data.createdAt).toLocaleString()}</time>
+                        </header>
                         <ReactMarkdown
                             remarkPlugins={[remarkGfm]}
                             rehypePlugins={[rehypeRaw, rehypeHighlight]}
                             components={{
-                                h1: ({ ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
-                                h2: ({ ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
-                                h3: ({ ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
-                                h4: ({ ...props }) => <h4 className="text-lg font-bold" {...props} />,
-                                h5: ({ ...props }) => <h5 className="text-md font-bold" {...props} />,
+                                h1: ({ ...props }) => <h2 className="text-3xl font-bold py-2" {...props} />,
+                                h2: ({ ...props }) => <h3 className="text-2xl font-bold py-1" {...props} />,
+                                h3: ({ ...props }) => <h4 className="text-xl font-bold py-0.5" {...props} />,
+                                h4: ({ ...props }) => <h5 className="text-lg font-bold" {...props} />,
+                                h5: ({ ...props }) => <h6 className="text-md font-bold" {...props} />,
                                 p: ({ ...props }) => <p className="py-1 text-zinc-700" {...props} />,
                                 img: ({ src }) => (
                                     <PhotoProvider className="w-full">
@@ -89,7 +91,7 @@ export default function Blog() {
                                 a: ({ ...props }) => <a className="hover:underline" {...props} />,
                             }}
                         >{data.content}</ReactMarkdown>
-                    </>
+                    </article>
                 )}
 
                 {data && (