From db8e88e1feddbf7cda7120f7a9d4be813e81eac9 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Wed, 3 Jun 2026 17:01:39 +0800
Subject: [PATCH] feat: add skeleton screens module and PostCardSkeleton
 component

---
 src/components/mod.rs                         |  1 +
 src/components/skeletons/archive_skeleton.rs  |  8 +++++++
 src/components/skeletons/home_skeleton.rs     |  8 +++++++
 src/components/skeletons/mod.rs               |  6 +++++
 .../skeletons/post_card_skeleton.rs           | 24 +++++++++++++++++++
 .../skeletons/post_detail_skeleton.rs         |  8 +++++++
 src/components/skeletons/search_skeleton.rs   |  8 +++++++
 src/components/skeletons/tags_skeleton.rs     |  8 +++++++
 8 files changed, 71 insertions(+)
 create mode 100644 src/components/skeletons/archive_skeleton.rs
 create mode 100644 src/components/skeletons/home_skeleton.rs
 create mode 100644 src/components/skeletons/mod.rs
 create mode 100644 src/components/skeletons/post_card_skeleton.rs
 create mode 100644 src/components/skeletons/post_detail_skeleton.rs
 create mode 100644 src/components/skeletons/search_skeleton.rs
 create mode 100644 src/components/skeletons/tags_skeleton.rs

diff --git a/src/components/mod.rs b/src/components/mod.rs
index 5a53425..29403e5 100644
--- a/src/components/mod.rs
+++ b/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;
diff --git a/src/components/skeletons/archive_skeleton.rs b/src/components/skeletons/archive_skeleton.rs
new file mode 100644
index 0000000..713f9d6
--- /dev/null
+++ b/src/components/skeletons/archive_skeleton.rs
@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn ArchiveSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}
diff --git a/src/components/skeletons/home_skeleton.rs b/src/components/skeletons/home_skeleton.rs
new file mode 100644
index 0000000..60f485e
--- /dev/null
+++ b/src/components/skeletons/home_skeleton.rs
@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn HomeSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}
diff --git a/src/components/skeletons/mod.rs b/src/components/skeletons/mod.rs
new file mode 100644
index 0000000..6fbd950
--- /dev/null
+++ b/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;
diff --git a/src/components/skeletons/post_card_skeleton.rs b/src/components/skeletons/post_card_skeleton.rs
new file mode 100644
index 0000000..f16c01b
--- /dev/null
+++ b/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" }
+            }
+        }
+    }
+}
diff --git a/src/components/skeletons/post_detail_skeleton.rs b/src/components/skeletons/post_detail_skeleton.rs
new file mode 100644
index 0000000..b9d275f
--- /dev/null
+++ b/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..." }
+    }
+}
diff --git a/src/components/skeletons/search_skeleton.rs b/src/components/skeletons/search_skeleton.rs
new file mode 100644
index 0000000..d3a5d25
--- /dev/null
+++ b/src/components/skeletons/search_skeleton.rs
@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn SearchSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}
diff --git a/src/components/skeletons/tags_skeleton.rs b/src/components/skeletons/tags_skeleton.rs
new file mode 100644
index 0000000..6fa0644
--- /dev/null
+++ b/src/components/skeletons/tags_skeleton.rs
@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn TagsSkeleton() -> Element {
+    rsx! {
+        div { class: "animate-pulse", "Loading..." }
+    }
+}