yggdrasil/components/skeletons/
settings_admin_skeleton.rs

1//! 后台站点配置骨架屏
2//!
3//! 镜像 SiteSettingsPage 的分区化布局（页头 + 左侧分类导航 + 右侧内容卡片）。
4//! 根容器沿用页面的 flex-1 min-h-0 flex 撑满高度并自带 px-6 py-12 内边距，
5//! 避免骨架屏只占顶部、下方留出大片空白；左右两列结构对齐，减少加载时的布局跳动。
6
7use dioxus::prelude::*;
8
9use crate::components::skeletons::atoms::SkeletonBox;
10/// 后台站点配置骨架屏组件。
11#[component]
12pub fn SettingsAdminSkeleton() -> Element {
13    rsx! {
14        // 镜像 SiteSettingsPage 根容器：flex-1 min-h-0 flex 撑满 main 高度。
15        // main 在 internal-scroll 变体下无 padding，故内边距由本骨架自带。
16        div { class: "w-full flex-1 min-h-0 flex flex-col px-6 py-8 sm:py-12",
17            // 页头（固定）
18            div { class: "flex-shrink-0 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",
19                div { class: "space-y-1.5",
20                    SkeletonBox { class: "h-9 w-36 rounded-lg" }
21                    SkeletonBox { class: "h-4 w-60 rounded" }
22                }
23            }
24
25            // 顶部横向分类导航栏占位
26            div { class: "flex-shrink-0 flex items-center gap-2 overflow-x-auto pb-3 mb-6 border-b border-[var(--color-paper-border)]/60 scrollbar-none",
27                for _ in 0..8 {
28                    SkeletonBox { class: "h-8 w-20 rounded-full shrink-0" }
29                }
30            }
31
32            // 右侧/居中内容占位（镜像配置卡片堆叠）
33            div { class: "flex-1 min-w-0 min-h-0 overflow-hidden max-w-5xl mx-auto w-full space-y-8",
34                div { class: "bg-[var(--color-paper-entry)]/40 rounded-2xl p-6 sm:p-8 space-y-6 border border-[var(--color-paper-border)]/70 shadow-xs",
35                    div { class: "flex items-center gap-3",
36                        SkeletonBox { class: "w-10 h-10 rounded-full" }
37                        div { class: "space-y-1.5",
38                            SkeletonBox { class: "h-5 w-36 rounded" }
39                            SkeletonBox { class: "h-3 w-56 rounded" }
40                        }
41                    }
42                    div { class: "space-y-2 max-w-xl",
43                        SkeletonBox { class: "h-4 w-20 rounded" }
44                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
45                        SkeletonBox { class: "h-3 w-44 rounded" }
46                    }
47                    SkeletonBox { class: "h-4 w-64 rounded" }
48                    div { class: "flex items-center justify-between pt-1",
49                        SkeletonBox { class: "h-3 w-24 rounded" }
50                        SkeletonBox { class: "h-10 w-24 rounded-full" }
51                    }
52                }
53            }
54        }
55    }
56}
yggdrasil/components/skeletons/settings_admin_skeleton.rs

yggdrasil/components/skeletons/
settings_admin_skeleton.rs
