yggdrasil/components/skeletons/
profile_skeleton.rs

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

yggdrasil/components/skeletons/
profile_skeleton.rs
