tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化加载台和错误

Browse Source
This commit is contained in:
tone
2025-05-18 15:56:54 +08:00
parent 0f1ecb683e
commit a561d729e2
1 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
tone-page-web/app/(with-header-footer)/blog/[id]/page.tsx
View File

@@ -11,6 +11,7 @@ import 'highlight.js/styles/github.css'
import { PhotoProvider, PhotoView } from 'react-photo-view'; import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css'; import 'react-photo-view/dist/react-photo-view.css';
import rehypeRaw from 'rehype-raw' import rehypeRaw from 'rehype-raw'
import { Skeleton } from "@/components/ui/skeleton";
export default function Blog() { export default function Blog() {
const params = useParams(); const params = useParams();
@@ -30,37 +31,49 @@ export default function Blog() {
return ( return (
<div className="w-full overflow-x-hidden"> <div className="w-full overflow-x-hidden">
{data && ( <div className="max-w-200 mx-auto px-5 overflow-x-hidden mb-10">
<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>}
<h1 className="text-center text-3xl font-bold mt-10">{data.title}</h1> {isLoading && (
<p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p> <div className="flex flex-col gap-2 mt-10">
<ReactMarkdown <Skeleton className="w-full h-10" />
remarkPlugins={[remarkGfm]} <Skeleton className="w-full h-20" />
rehypePlugins={[rehypeRaw, rehypeHighlight]} <Skeleton className="w-full h-10" />
children={data.content} <Skeleton className="w-full h-20" />
components={{ <Skeleton className="w-full h-30" />
h1: ({ node, ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />, </div>
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} />, {data && (
h4: ({ node, ...props }) => <h4 className="text-lg font-bold" {...props} />, <>
h5: ({ node, ...props }) => <h5 className="text-md font-bold" {...props} />, <h1 className="text-center text-3xl font-bold mt-10">{data.title}</h1>
p: ({ node, ...props }) => <p className="py-1 text-zinc-700" {...props} />, <p className="text-sm text-zinc-500 text-center my-5">发布于：{new Date(data.createdAt).toLocaleString()}</p>
img: ({ node, src, ...props }) => ( <ReactMarkdown
<PhotoProvider> remarkPlugins={[remarkGfm]}
<PhotoView src={src as string}> rehypePlugins={[rehypeRaw, rehypeHighlight]}
<img src={src} {...props} /> children={data.content}
</PhotoView> components={{
</PhotoProvider> h1: ({ node, ...props }) => <h1 className="text-3xl font-bold py-2" {...props} />,
), h2: ({ node, ...props }) => <h2 className="text-2xl font-bold py-1" {...props} />,
th: ({ node, ...props }) => <th className="text-ellipsis text-nowrap border border-zinc-300 p-2" {...props} />, h3: ({ node, ...props }) => <h3 className="text-xl font-bold py-0.5" {...props} />,
td: ({ node, ...props }) => <td className="border border-zinc-300 p-1" {...props} />, h4: ({ node, ...props }) => <h4 className="text-lg font-bold" {...props} />,
table: ({ node, ...props }) => <div className="overflow-x-auto"><table {...props} /></div>, h5: ({ node, ...props }) => <h5 className="text-md font-bold" {...props} />,
pre: ({ node, ...props }) => <pre className="rounded-sm overflow-hidden shadow" {...props} />, p: ({ node, ...props }) => <p className="py-1 text-zinc-700" {...props} />,
blockquote: ({ node, ...props }) => <blockquote className="pl-3 border-l-5" {...props} />, img: ({ node, src, ...props }) => (
}} <PhotoProvider>
/> <PhotoView src={src as string}>
</div> <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> </div>
) )
} }