yggdrasil/components/skeletons/
system_skeleton.rs

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

yggdrasil/components/skeletons/
system_skeleton.rs
