Skip to main content
Yggdrasil

yggdrasil/components/skeletons/
system_skeleton.rs

1//! 后台系统骨架屏
2//!
3//! 与系统页同一版式：标题行、五个 tab 与服务器指标卡片。
4
5use leptos::prelude::*;
6
7use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
8
9/// 后台系统骨架屏组件。
10#[component]
11pub fn SystemSkeleton() -> impl IntoView {
12    view! {
13        <div class="admin-system" aria-hidden="true">
14            <AdminPageHeadSkeleton title_width="w-16" subtitle_width="w-80"/>
15            <SkeletonBox class="h-8 w-96 max-w-full rounded-full sys-tabs"/>
16            <div class="sys-metrics">
17                {(0..8)
18                    .map(|_| {
19                        view! {
20                            <div class="admin-panel sys-metric">
21                                <SkeletonBox class="h-3 w-16 rounded"/>
22                                <SkeletonBox class="h-6 w-24 rounded mt-2"/>
23                            </div>
24                        }
25                    })
26                    .collect_view()}
27            </div>
28        </div>
29    }
30}