yggdrasil/components/skeletons/
post_card_skeleton.rs

1//! 文章卡片骨架屏
2//!
3//! 模拟 PostCard 组件的视觉占位，用于列表页加载。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::SkeletonBox;
8
9/// 文章卡片骨架屏组件。
10/// Props:
11/// - `has_cover`：是否展示封面占位
12/// - `compact`：首页紧凑文章流，与真实卡片共用版式类
13#[component]
14pub fn PostCardSkeleton(
15    #[props(default = false)] has_cover: bool,
16    #[props(default = false)] compact: bool,
17) -> Element {
18    let article_class: &'static str = if compact {
19        "post-card-editorial post-card-compact"
20    } else {
21        "mb-10 flex flex-col bg-[var(--color-paper-entry)] rounded-[2rem] border border-transparent overflow-hidden"
22    };
23
24    rsx! {
25        article { class: article_class,
26            if has_cover {
27                div { class: "post-card-cover overflow-hidden",
28                    SkeletonBox { class: "w-full aspect-[21/9] !rounded-none" }
29                }
30            }
31            div { class: "post-card-body p-8 flex flex-col gap-3.5 min-w-0",
32                div { class: "flex flex-wrap items-center gap-3",
33                    SkeletonBox { class: "h-3.5 w-20" }
34                    SkeletonBox { class: "h-3.5 w-16" }
35                }
36                // 标题占位
37                SkeletonBox { class: "h-7 w-3/4 rounded" }
38                // 摘要两行
39                SkeletonBox { class: "h-4 w-full rounded" }
40                SkeletonBox { class: "h-4 w-5/6 rounded" }
41                div { class: "flex flex-wrap items-center gap-3 mt-1",
42                    SkeletonBox { class: "h-4 w-16" }
43                    SkeletonBox { class: "h-4 w-20" }
44                }
45            }
46        }
47    }
48}
yggdrasil/components/skeletons/post_card_skeleton.rs

yggdrasil/components/skeletons/
post_card_skeleton.rs
