yggdrasil/components/skeletons/
profile_skeleton.rs

1//! 后台个人信息骨架屏
2//!
3//! 镜像后台 Profile 页面（/admin/profile）的结构：
4//! 页头（标题+描述）+ 身份卡（圆形头像 + 文字行）+ 基本资料卡 + 安全卡。
5
6use dioxus::prelude::*;
7
8use crate::components::skeletons::atoms::SkeletonBox;
9use crate::components::ui::ADMIN_CARD_CLASS;
10
11/// 后台个人信息骨架屏组件。
12#[component]
13pub fn ProfileSkeleton() -> Element {
14    rsx! {
15        div { class: "w-full max-w-2xl mx-auto space-y-8",
16            // 页头
17            div { class: "space-y-2 pb-6 border-b border-[var(--color-paper-border)]/50",
18                SkeletonBox { class: "h-9 w-32 rounded-lg" }
19                SkeletonBox { class: "h-4 w-72 rounded" }
20            }
21
22            // 身份卡：圆形头像 + 文字行
23            div { class: "{ADMIN_CARD_CLASS} p-6 md:p-8 flex items-center gap-6",
24                SkeletonBox { class: "h-24 w-24 rounded-full flex-shrink-0" }
25                div { class: "flex-1 space-y-2.5",
26                    SkeletonBox { class: "h-6 w-40 rounded" }
27                    SkeletonBox { class: "h-4 w-24 rounded" }
28                    SkeletonBox { class: "h-3 w-32 rounded" }
29                }
30            }
31
32            // 基本资料卡：卡头 + 三条输入行 + 按钮行
33            div { class: "{ADMIN_CARD_CLASS} p-6 md:p-8 space-y-6",
34                div { class: "flex items-center gap-3",
35                    SkeletonBox { class: "h-10 w-10 rounded-full flex-shrink-0" }
36                    div { class: "space-y-2",
37                        SkeletonBox { class: "h-5 w-24 rounded" }
38                        SkeletonBox { class: "h-3.5 w-56 rounded" }
39                    }
40                }
41                div { class: "space-y-2 max-w-xl",
42                    SkeletonBox { class: "h-3.5 w-16 rounded" }
43                    SkeletonBox { class: "h-9 w-full rounded-2xl" }
44                }
45                div { class: "space-y-2 max-w-xl",
46                    SkeletonBox { class: "h-3.5 w-16 rounded" }
47                    SkeletonBox { class: "h-9 w-full rounded-2xl" }
48                }
49                div { class: "flex justify-end",
50                    SkeletonBox { class: "h-9 w-24 rounded-full" }
51                }
52            }
53
54            // 安全卡：卡头 + 输入行 + 双列输入 + 按钮行
55            div { class: "{ADMIN_CARD_CLASS} p-6 md:p-8 space-y-6",
56                div { class: "flex items-center gap-3",
57                    SkeletonBox { class: "h-10 w-10 rounded-full flex-shrink-0" }
58                    div { class: "space-y-2",
59                        SkeletonBox { class: "h-5 w-16 rounded" }
60                        SkeletonBox { class: "h-3.5 w-48 rounded" }
61                    }
62                }
63                div { class: "space-y-2 max-w-xl",
64                    SkeletonBox { class: "h-3.5 w-16 rounded" }
65                    SkeletonBox { class: "h-9 w-full rounded-2xl" }
66                }
67                div { class: "grid sm:grid-cols-2 gap-4 max-w-xl",
68                    SkeletonBox { class: "h-9 w-full rounded-2xl" }
69                    SkeletonBox { class: "h-9 w-full rounded-2xl" }
70                }
71                div { class: "flex justify-end",
72                    SkeletonBox { class: "h-9 w-24 rounded-full" }
73                }
74            }
75        }
76    }
77}
yggdrasil/components/skeletons/profile_skeleton.rs

yggdrasil/components/skeletons/
profile_skeleton.rs
