yggdrasil/components/skeletons/
dashboard_skeleton.rs

1//! 后台仪表盘骨架屏
2//!
3//! 仅在 AdminLayout 的内容区展示，校验登录状态与路由挂起期间与仪表盘同一版式：
4//! 标题行、四格数字、左栏柱图与近期文章、右栏评论与站点。
5
6use leptos::prelude::*;
7
8use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
9
10/// 仪表盘内容区骨架屏组件。
11#[component]
12pub fn AdminDashboardSkeleton() -> impl IntoView {
13    view! {
14        <div class="admin-dash" aria-hidden="true">
15            <AdminPageHeadSkeleton title_width="w-44" subtitle_width="w-56"/>
16            <div class="dash-tiles">
17                {(0..4)
18                    .map(|_| {
19                        view! {
20                            <div class="admin-panel dash-tile">
21                                <SkeletonBox class="h-3.5 w-12 rounded"/>
22                                <SkeletonBox class="dash-tile-value-skeleton"/>
23                                <SkeletonBox class="h-3 w-24 rounded mt-2"/>
24                            </div>
25                        }
26                    })
27                    .collect_view()}
28            </div>
29            <div class="dash-cols">
30                <div class="dash-col">
31                    <div class="admin-panel dash-chart">
32                        <SkeletonBox class="h-4 w-28 rounded"/>
33                        <SkeletonBox class="dash-chart-skeleton"/>
34                    </div>
35                    <div class="admin-panel dash-list">
36                        <div class="dash-panel-head dash-panel-head-rule">
37                            <SkeletonBox class="h-4 w-20 rounded"/>
38                        </div>
39                        <div class="dash-list-body">
40                            {(0..5)
41                                .map(|_| view! { <SkeletonBox class="dash-row-skeleton"/> })
42                                .collect_view()}
43                        </div>
44                    </div>
45                </div>
46                <div class="dash-col">
47                    <div class="admin-panel dash-list">
48                        <div class="dash-panel-head dash-panel-head-rule">
49                            <SkeletonBox class="h-4 w-20 rounded"/>
50                        </div>
51                        <div class="dash-list-body">
52                            {(0..4)
53                                .map(|_| view! { <SkeletonBox class="dash-comment-skeleton"/> })
54                                .collect_view()}
55                        </div>
56                    </div>
57                </div>
58            </div>
59        </div>
60    }
61}
yggdrasil/components/skeletons/dashboard_skeleton.rs

yggdrasil/components/skeletons/
dashboard_skeleton.rs
