yggdrasil/components/
admin_skeleton.rs

1//! 后台仪表盘骨架屏
2//!
3//! 仅在 AdminLayout 的内容区展示，不包含 Header 与 Footer，
4//! 用于校验登录状态期间保持视觉稳定。
5
6use dioxus::prelude::*;
7
8use crate::components::skeletons::atoms::SkeletonBox;
9
10/// 仪表盘内容区骨架屏组件（不含 header/footer）。
11///
12/// 包含统计卡片、快捷操作按钮与最近文章列表三组占位块。
13#[component]
14pub fn AdminDashboardSkeleton() -> Element {
15    rsx! {
16        div { class: "space-y-8",
17            // 统计卡片骨架
18            div { class: "grid grid-cols-1 md:grid-cols-3 gap-6",
19                for _ in 0..3 {
20                    div { class: "rounded-2xl bg-paper-entry border border-paper-border p-6 text-center space-y-3",
21                        SkeletonBox { class: "h-9 w-16 mx-auto rounded" }
22                        SkeletonBox { class: "h-4 w-20 mx-auto rounded" }
23                    }
24                }
25            }
26
27            // 快捷操作骨架
28            div { class: "grid grid-cols-1 md:grid-cols-2 gap-4",
29                SkeletonBox { class: "h-12 rounded-full" }
30                SkeletonBox { class: "h-12 rounded-full" }
31            }
32
33            // 最近文章列表骨架
34            div { class: "space-y-4",
35                SkeletonBox { class: "h-6 w-24 rounded" }
36                div { class: "space-y-0",
37                    for _ in 0..5 {
38                        div { class: "flex justify-between items-center py-3 border-b border-paper-border",
39                            SkeletonBox { class: "h-4 w-[45%] rounded" }
40                            SkeletonBox { class: "h-3 w-20 rounded" }
41                        }
42                    }
43                }
44            }
45        }
46    }
47}
yggdrasil/components/admin_skeleton.rs

yggdrasil/components/
admin_skeleton.rs
