yggdrasil/components/skeletons/
system_skeleton.rs

1//! 后台系统管理骨架屏
2//!
3//! 镜像后台 System 页面的结构：Header（标题+副标题）+ 5 个功能 Tabs + 4 个统计卡片 + 数据行列表。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::{
8    SkeletonBox, SkeletonCard, SkeletonCellShape, SkeletonTable, SkeletonTableColumn,
9};
10
11/// 后台系统管理骨架屏组件。
12#[component]
13pub fn SystemSkeleton() -> Element {
14    let table_columns = vec![
15        SkeletonTableColumn {
16            header_class: "px-5 py-3.5",
17            header_box_class: "h-3 w-16",
18            cell_class: "px-5 py-3.5",
19            cell_shape: SkeletonCellShape::Single("h-4 w-28"),
20        },
21        SkeletonTableColumn {
22            header_class: "px-4 py-3.5",
23            header_box_class: "h-3 w-12",
24            cell_class: "px-4 py-3.5",
25            cell_shape: SkeletonCellShape::Single("h-4 w-16"),
26        },
27        SkeletonTableColumn {
28            header_class: "px-4 py-3.5",
29            header_box_class: "h-3 w-16",
30            cell_class: "px-4 py-3.5",
31            cell_shape: SkeletonCellShape::Single("h-4 w-20"),
32        },
33        SkeletonTableColumn {
34            header_class: "px-4 py-3.5",
35            header_box_class: "h-3 w-16",
36            cell_class: "px-4 py-3.5",
37            cell_shape: SkeletonCellShape::Single("h-4 w-20"),
38        },
39        SkeletonTableColumn {
40            header_class: "px-4 py-3.5",
41            header_box_class: "h-3 w-16",
42            cell_class: "px-4 py-3.5",
43            cell_shape: SkeletonCellShape::Single("h-4 w-24"),
44        },
45        SkeletonTableColumn {
46            header_class: "px-5 py-3.5",
47            header_box_class: "h-3 w-12 ml-auto",
48            cell_class: "px-5 py-3.5",
49            cell_shape: SkeletonCellShape::Single("h-4 w-12 ml-auto"),
50        },
51    ];
52    rsx! {
53        div { class: "w-full max-w-7xl mx-auto space-y-6",
54            // 页头：标题与副标题 + 运行状态指示
55            div { class: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-[var(--color-paper-border)]/70 mb-6",
56                div { class: "space-y-1.5",
57                    SkeletonBox { class: "h-9 w-36 rounded-lg" }
58                    SkeletonBox { class: "h-4 w-64 rounded" }
59                }
60                SkeletonBox { class: "h-8 w-32 rounded-full" }
61            }
62
63            // 5 个功能 Tabs
64            div { class: "flex gap-3 border-b border-[var(--color-paper-border)]/70 pb-3 mb-6",
65                SkeletonBox { class: "h-8 w-24 rounded-full" }
66                SkeletonBox { class: "h-8 w-24 rounded-full" }
67                SkeletonBox { class: "h-8 w-24 rounded-full" }
68                SkeletonBox { class: "h-8 w-20 rounded-full" }
69                SkeletonBox { class: "h-8 w-20 rounded-full" }
70            }
71
72            // 4 个统计卡片网格
73            div { class: "grid grid-cols-2 lg:grid-cols-4 gap-4",
74                for i in 0..4 {
75                    SkeletonCard { key: "{i}", class: Some("p-5 shadow-xs space-y-2"),
76                        SkeletonBox { class: "h-3.5 w-16 rounded" }
77                        SkeletonBox { class: "h-8 w-24 rounded-lg" }
78                    }
79                }
80            }
81
82            // 数据表格卡片占位
83            SkeletonCard { class: Some("shadow-xs overflow-hidden"),
84                div { class: "px-5 py-4 border-b border-[var(--color-paper-border)]/70",
85                    SkeletonBox { class: "h-4 w-40 rounded" }
86                }
87                SkeletonTable { columns: table_columns, rows: 6 }
88            }
89        }
90    }
91}
yggdrasil/components/skeletons/system_skeleton.rs

yggdrasil/components/skeletons/
system_skeleton.rs
