feat(blog): 添加文章不存在时的处理逻辑

引入 `notFound` 函数以处理文章不存在的情况。
在 `BlogPostPage` 中添加逻辑，当 `post` 为空时调用 `notFound()` 函数。
在 `BlogPage` 中添加获取文章列表的逻辑，并将文章列表作为 prop 传递给 `BlogPosts` 组件。
在 `BlogPost` 组件中，移除原有的数据获取逻辑，改为直接接受 `post` 作为 prop。
在 `BlogPosts` 组件中，移除原有的数据获取逻辑，改为直接接受 `posts` 作为 prop。

Author: ExquisiteCore

frontend/app/(site)/blog/[id]/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+import { notFound } from "next/navigation";
 import BlogPost from "@/components/BlogPost";
 import type { PostDetail } from "@/types/api";
 
@@ -108,17 +109,19 @@ export default async function BlogPostPage({
   const { id } = await params;
   const post = await getPost(id);
 
+  if (!post) {
+    notFound();
+  }
+
   return (
     <>
-      {post && (
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(generateArticleJsonLd(post)),
-          }}
-        />
-      )}
-      <BlogPost id={id} />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(generateArticleJsonLd(post)),
+        }}
+      />
+      <BlogPost post={post} />
     </>
   );
 }

frontend/app/(site)/blog/page.tsx

@@ -1,19 +1,43 @@
 import { Metadata } from "next";
 import BlogPosts from "@/components/BlogPosts";
+import type { PostSummary } from "@/types/api";
 
 export const metadata: Metadata = {
   title: "博客",
   description: "ExquisiteCore的技术博客，分享全栈开发、游戏开发和技术思考",
 };
 
-export default function BlogPage() {
+function getApiBaseUrl(): string {
+  return process.env.INTERNAL_API_BASE_URL || "http://localhost:8080/api";
+}
+
+async function getPosts(): Promise<PostSummary[]> {
+  try {
+    const response = await fetch(`${getApiBaseUrl()}/posts`, {
+      next: { revalidate: 60 },
+    });
+
+    if (response.ok) {
+      const body = await response.json();
+      const data = body?.data ?? body;
+      if (Array.isArray(data)) return data;
+    }
+  } catch (error) {
+    console.error("获取文章列表失败:", error);
+  }
+  return [];
+}
+
+export default async function BlogPage() {
+  const posts = await getPosts();
+
   return (
     <div className="max-w-6xl mx-auto">
       <h1 className="text-4xl font-bold mb-4 text-center">博客</h1>
       <p className="text-center text-base-content/70 mb-12 max-w-2xl mx-auto">
         这里是我的技术博客，分享全栈开发、游戏开发和各种有趣的技术探索
       </p>
-      <BlogPosts />
+      <BlogPosts posts={posts} />
     </div>
   );
 }

frontend/components/BlogPost.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import http from '@/lib/axios';
 import MarkdownRenderer from './MarkdownRenderer';
 import type { PostDetail } from '@/types/api';
 
@@ -15,70 +13,10 @@ function formatDate(dateString: string) {
 }
 
 interface BlogPostProps {
-  id: string;
+  post: PostDetail;
 }
 
-export default function BlogPost({ id }: BlogPostProps) {
-  const [post, setPost] = useState<PostDetail | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    async function fetchPost() {
-      try {
-        setLoading(true);
-        const response = await http.get<PostDetail>(`/posts/id/${id}`, undefined, {
-          withToken: false,
-        });
-
-        if (response && response.id) {
-          setPost(response);
-        } else {
-          console.error('API响应格式不符合预期:', response);
-          setError('文章不存在');
-        }
-      } catch (err) {
-        console.error(`获取文章 ${id} 失败:`, err);
-        setError('获取文章失败');
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchPost();
-  }, [id]);
-
-  if (loading) {
-    return (
-      <div className="py-12 text-center">
-        <span className="loading loading-spinner loading-lg"></span>
-      </div>
-    );
-  }
-
-  if (error || !post) {
-    return (
-      <div className="py-12 text-center">
-        <div className="alert alert-error shadow-lg max-w-md mx-auto">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <span>{error || '文章不存在或已被删除'}</span>
-        </div>
-      </div>
-    );
-  }
-
+export default function BlogPost({ post }: BlogPostProps) {
   const coverImage = post.cover_images && post.cover_images.length > 0 ? post.cover_images[0] : null;
 
   return (

frontend/components/BlogPosts.tsx

@@ -1,8 +1,4 @@
-'use client';
-
-import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import http from '@/lib/axios';
 import type { PostSummary } from '@/types/api';
 
 function formatDate(dateString: string) {
@@ -14,67 +10,11 @@ function formatDate(dateString: string) {
   });
 }
 
-export default function BlogPosts() {
-  const [posts, setPosts] = useState<PostSummary[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    async function fetchPosts() {
-      try {
-        setLoading(true);
-        const response = await http.get<PostSummary[]>('/posts', undefined, {
-          withToken: false,
-        });
-
-        if (Array.isArray(response)) {
-          setPosts(response);
-        } else {
-          console.error('API响应格式不符合预期:', response);
-          setError('获取文章列表失败');
-        }
-      } catch (err) {
-        console.error('获取文章列表失败:', err);
-        setError('获取文章列表失败，请稍后重试');
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchPosts();
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="py-12 text-center">
-        <span className="loading loading-spinner loading-lg"></span>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="py-12 text-center">
-        <div className="alert alert-error shadow-lg max-w-md mx-auto">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <span>{error}</span>
-        </div>
-      </div>
-    );
-  }
+interface BlogPostsProps {
+  posts: PostSummary[];
+}
 
+export default function BlogPosts({ posts }: BlogPostsProps) {
   if (posts.length === 0) {
     return (
       <div className="py-12 text-center">