yggdrasil/components/skeletons/
post_detail_skeleton.rs

1//! 文章详情页骨架屏
2//!
3//! 在文章详情数据加载期间展示面包屑、标题、摘要、元信息、封面与正文占位。
4
5use crate::components::skeletons::atoms::*;
6use dioxus::prelude::*;
7
8/// 文章详情页骨架屏组件。
9///
10/// 结构：面包屑 + 标题(h1) + 摘要 + 元信息 + 封面图 + 正文(多段) + 页脚占位。
11#[component]
12pub fn PostDetailSkeleton() -> Element {
13    rsx! {
14        article { class: "post-single",
15            // 面包屑占位
16            SkeletonBox { class: "h-4 w-48 rounded mb-6" }
17
18            // 标题占位 (模拟 h1)
19            SkeletonBox { class: "h-10 w-4/5 rounded mb-4" }
20
21            // 摘要占位
22            SkeletonBox { class: "h-5 w-2/3 rounded mb-4" }
23
24            // 元信息行 (作者 · 日期 · 阅读时间)
25            div { class: "flex items-center gap-2 mb-8",
26                SkeletonBox { class: "h-4 w-16 rounded" }
27                SkeletonBox { class: "h-4 w-1 rounded" }
28                SkeletonBox { class: "h-4 w-24 rounded" }
29                SkeletonBox { class: "h-4 w-1 rounded" }
30                SkeletonBox { class: "h-4 w-20 rounded" }
31            }
32
33            // 封面图占位 (模拟 PostCover 16:9 比例)
34            SkeletonBox { class: "w-full aspect-video rounded-lg mb-8" }
35
36            // 正文段落占位 (模拟多段 PostContent)
37            div { class: "space-y-4 mb-8",
38                SkeletonBox { class: "h-4 w-full rounded" }
39                SkeletonBox { class: "h-4 w-full rounded" }
40                SkeletonBox { class: "h-4 w-5/6 rounded" }
41                SkeletonBox { class: "h-4 w-full rounded" }
42                SkeletonBox { class: "h-4 w-full rounded" }
43                SkeletonBox { class: "h-4 w-3/4 rounded" }
44                // 空行模拟段落间距
45                div { class: "h-2" }
46                SkeletonBox { class: "h-4 w-full rounded" }
47                SkeletonBox { class: "h-4 w-full rounded" }
48                SkeletonBox { class: "h-4 w-2/3 rounded" }
49            }
50
51            // PostFooter 占位
52            div { class: "border-t border-gray-200 dark:border-gray-700 pt-6 mt-8",
53                div { class: "flex items-center justify-between",
54                    SkeletonBox { class: "h-4 w-32 rounded" }
55                    SkeletonBox { class: "h-4 w-24 rounded" }
56                }
57            }
58        }
59    }
60}
yggdrasil/components/skeletons/post_detail_skeleton.rs

yggdrasil/components/skeletons/
post_detail_skeleton.rs
