yggdrasil/components/skeletons/
post_detail_skeleton.rs

1//! 文章详情页骨架屏
2//!
3//! 在文章详情数据加载期间展示面包屑、标题、摘要、元信息、封面与正文占位。
4
5use crate::components::skeletons::atoms::*;
6use dioxus::prelude::*;
7
8/// 文章详情/预览页共享的正文骨架屏片段：面包屑 + 标题 + 摘要 + 元信息 + 封面 +
9/// 正文段落 + 页脚占位。供 [`PostDetailSkeleton`] 与
10/// [`crate::components::skeletons::post_preview_skeleton::PostPreviewSkeleton`]
11/// 复用，两者视觉上唯一差异是预览页顶部多一段预览横幅。
12#[component]
13pub fn PostDetailBody() -> Element {
14    rsx! {
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
61/// 文章详情页骨架屏组件。
62///
63/// 结构：面包屑 + 标题(h1) + 摘要 + 元信息 + 封面图 + 正文(多段) + 页脚占位。
64#[component]
65pub fn PostDetailSkeleton() -> Element {
66    rsx! {
67        article { class: "post-single max-w-none",
68            PostDetailBody {}
69        }
70    }
71}
yggdrasil/components/skeletons/post_detail_skeleton.rs

yggdrasil/components/skeletons/
post_detail_skeleton.rs
