Skip to main content

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///
11/// 包含：标题行(24px bold) + 摘要两行 + 元信息行(日期+标签)。
12#[component]
13pub fn PostCardSkeleton() -> Element {
14    rsx! {
15        article { class: "mb-12 flex flex-col bg-[var(--color-paper-entry)] rounded-[2rem] border border-transparent overflow-hidden",
16            div { class: "p-8 flex flex-col gap-3",
17                // 标题占位 (模拟 h2 text-2xl/3xl font-extrabold)
18                SkeletonBox { class: "h-7 w-3/4 rounded" }
19                // 摘要两行 (模拟 text-base line-clamp-2)
20                SkeletonBox { class: "h-4 w-full rounded" }
21                SkeletonBox { class: "h-4 w-5/6 rounded" }
22                // 元信息行 (日期 + 分隔 + 标签，模拟 text-sm)
23                div { class: "flex flex-wrap items-center gap-3 mt-4",
24                    SkeletonBox { class: "h-3.5 w-20 rounded" }
25                    SkeletonBox { class: "h-3.5 w-1 rounded" }
26                    SkeletonBox { class: "h-3.5 w-16 rounded" }
27                }
28            }
29        }
30    }
31}