From a561d729e288d1d2de3af115f6475e812c126c5c Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sun, 18 May 2025 15:56:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A0=E8=BD=BD=E5=8F=B0?=
 =?UTF-8?q?=E5=92=8C=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(with-header-footer)/blog/[id]/page.tsx   | 75 +++++++++++--------
 1 file changed, 44 insertions(+), 31 deletions(-)

diff --git a/tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx b/tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx
index 45edb53..d33f118 100644
--- a/tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx
+++ b/tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx
@@ -11,6 +11,7 @@ import 'highlight.js/styles/github.css'
 import { PhotoProvider, PhotoView } from 'react-photo-view';
 import 'react-photo-view/dist/react-photo-view.css';
 import rehypeRaw from 'rehype-raw'
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Blog() {
     const params = useParams();
@@ -30,37 +31,49 @@ export default function Blog() {
 
     return (
         <div className="w-full overflow-x-hidden">
-            {data && (
-                <div className="max-w-200 mx-auto px-5 overflow-x-hidden mb-10">
-                    <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>
-                    <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        rehypePlugins={[rehypeRaw, rehypeHighlight]}
-                        children={data.content}
-                        components={{
-                            h1: ({ node, ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
-                            h2: ({ node, ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
-                            h3: ({ node, ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
-                            h4: ({ node, ...props }) => <h4 className="text-lg font-bold" {...props} />,
-                            h5: ({ node, ...props }) => <h5 className="text-md font-bold" {...props} />,
-                            p: ({ node, ...props }) => <p className="py-1 text-zinc-700" {...props} />,
-                            img: ({ node, src, ...props }) => (
-                                <PhotoProvider>
-                                    <PhotoView src={src as string}>
-                                        <img src={src}  {...props} />
-                                    </PhotoView>
-                                </PhotoProvider>
-                            ),
-                            th: ({ node, ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />,
-                            td: ({ node, ...props }) => <td className="border border-zinc-300 p-1" {...props} />,
-                            table: ({ node, ...props }) => <div className="overflow-x-auto"><table {...props} /></div>,
-                            pre: ({ node, ...props }) => <pre className="rounded-sm overflow-hidden shadow" {...props} />,
-                            blockquote: ({ node, ...props }) => <blockquote className="pl-3 border-l-5" {...props} />,
-                        }}
-                    />
-                </div>
-            )}
+            <div className="max-w-200 mx-auto px-5 overflow-x-hidden mb-10">
+                {error && <div className="my-20 text-center text-zinc-600">{error.message}</div>}
+                {isLoading && (
+                    <div className="flex flex-col gap-2 mt-10">
+                        <Skeleton className="w-full h-10" />
+                        <Skeleton className="w-full h-20" />
+                        <Skeleton className="w-full h-10" />
+                        <Skeleton className="w-full h-20" />
+                        <Skeleton className="w-full h-30" />
+                    </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>
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypeRaw, rehypeHighlight]}
+                            children={data.content}
+                            components={{
+                                h1: ({ node, ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
+                                h2: ({ node, ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
+                                h3: ({ node, ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
+                                h4: ({ node, ...props }) => <h4 className="text-lg font-bold" {...props} />,
+                                h5: ({ node, ...props }) => <h5 className="text-md font-bold" {...props} />,
+                                p: ({ node, ...props }) => <p className="py-1 text-zinc-700" {...props} />,
+                                img: ({ node, src, ...props }) => (
+                                    <PhotoProvider>
+                                        <PhotoView src={src as string}>
+                                            <img src={src}  {...props} />
+                                        </PhotoView>
+                                    </PhotoProvider>
+                                ),
+                                th: ({ node, ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />,
+                                td: ({ node, ...props }) => <td className="border border-zinc-300 p-1" {...props} />,
+                                table: ({ node, ...props }) => <div className="overflow-x-auto"><table {...props} /></div>,
+                                pre: ({ node, ...props }) => <pre className="rounded-sm overflow-hidden shadow" {...props} />,
+                                blockquote: ({ node, ...props }) => <blockquote className="pl-3 border-l-5" {...props} />,
+                            }}
+                        />
+                    </>
+                )}
+            </div>
         </div>
     )
 }
\ No newline at end of file