feat: add skeleton screens module and PostCardSkeleton component

src/components/mod.rs

@@ -6,5 +6,6 @@ pub mod nav;
 pub mod page_layout;
 pub mod post;
 pub mod post_card;
+pub mod skeletons;
 pub mod suspense_wrapper;
 pub mod write_skeleton;

src/components/skeletons/archive_skeleton.rs

@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn ArchiveSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}

src/components/skeletons/home_skeleton.rs

@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn HomeSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}

src/components/skeletons/mod.rs

@@ -0,0 +1,6 @@
+pub mod archive_skeleton;
+pub mod home_skeleton;
+pub mod post_card_skeleton;
+pub mod post_detail_skeleton;
+pub mod search_skeleton;
+pub mod tags_skeleton;

src/components/skeletons/post_card_skeleton.rs

@@ -0,0 +1,24 @@
+use dioxus::prelude::*;
+
+/// 文章卡片骨架屏 - 模拟 PostCard 的视觉结构
+/// 包含：标题行(24px bold) + 摘要2行 + 元信息行(日期+标签)
+#[component]
+pub fn PostCardSkeleton() -> Element {
+    rsx! {
+        article {
+            class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333] animate-pulse",
+            // 标题占位 (模拟 h2 text-2xl font-bold)
+            div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
+            // 摘要第一行
+            div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
+            // 摘要第二行
+            div { class: "h-4 w-5/6 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
+            // 元信息行 (日期 + 标签)
+            div { class: "flex items-center gap-3 mt-3",
+                div { class: "h-3.5 w-20 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
+                div { class: "h-3.5 w-1 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
+                div { class: "h-3.5 w-16 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
+            }
+        }
+    }
+}

src/components/skeletons/post_detail_skeleton.rs

@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn PostDetailSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}

src/components/skeletons/search_skeleton.rs

@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn SearchSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}

src/components/skeletons/tags_skeleton.rs

@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn TagsSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}