yggdrasil/components/skeletons/
archive_skeleton.rs

1//! 归档页骨架屏
2//!
3//! 在归档数据加载期间展示标签索引与按年份/月份分组的文章列表占位。
4
5use crate::components::skeletons::atoms::*;
6use crate::components::skeletons::tags_skeleton::TagsSkeleton;
7use dioxus::prelude::*;
8
9/// 归档页骨架屏组件。
10///
11/// 结构：可选标签索引 + 统计行 + 左侧年份 + 月份时间线。
12/// 页面内部的独立文章加载边界传 `include_tags: false`，避免重复标签卡片。
13/// 模拟 2 个年份，每个年份 2 个月，每个月 3 篇文章。
14#[component]
15pub fn ArchiveSkeleton(#[props(default = true)] include_tags: bool) -> Element {
16    rsx! {
17        div { class: "archive-skeleton", role: "status", aria_label: "正在加载文章归档",
18            if include_tags {
19                TagsSkeleton {}
20            }
21            div { class: "archive-timeline", aria_hidden: "true",
22                div { class: "archive-toolbar",
23                    SkeletonBox { class: "h-5 w-40 rounded" }
24                    SkeletonBox { class: "h-3 w-16 rounded" }
25                }
26                for y in 0..2 {
27                    div { key: "{y}", class: "archive-year",
28                        div { class: "archive-year-heading",
29                            SkeletonBox { class: "h-2 w-20 rounded mb-3" }
30                            SkeletonBox { class: "h-14 w-32 rounded mb-3" }
31                            SkeletonBox { class: "h-3 w-28 rounded" }
32                        }
33                        div { class: "archive-months",
34                            for m in 0..2 {
35                                div { key: "{m}", class: "archive-month",
36                                    div { class: "archive-month-header",
37                                        SkeletonBox { class: "h-5 w-32 rounded" }
38                                        SkeletonBox { class: "h-3 w-8 rounded" }
39                                    }
40                                    for e in 0..3 {
41                                        div { key: "{e}", class: "archive-entry",
42                                            SkeletonBox { class: "h-4 w-5 rounded mt-1" }
43                                            div {
44                                                SkeletonBox { class: "h-5 w-3/4 rounded mb-2" }
45                                                SkeletonBox { class: "h-3 w-28 rounded" }
46                                            }
47                                        }
48                                    }
49                                }
50                            }
51                        }
52                    }
53                }
54            }
55        }
56    }
57}
yggdrasil/components/skeletons/archive_skeleton.rs

yggdrasil/components/skeletons/
archive_skeleton.rs
