yggdrasil/components/skeletons/
friends_admin_skeleton.rs

1//! 后台友链管理骨架屏
2//!
3//! 镜像后台 FriendsAdmin 页面的结构：Header（标题+描述）+ 表单卡片 + 列表卡片。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::SkeletonBox;
8
9/// 后台友链列表卡片骨架屏组件（供 LinkList 组件内部加载态使用）。
10#[component]
11pub fn FriendsAdminListSkeleton() -> Element {
12    rsx! {
13        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",
14            SkeletonBox { class: "h-6 w-32 rounded" }
15            div { class: "space-y-4 divide-y divide-[var(--color-paper-border)]/50",
16                for _ in 0..4 {
17                    div { class: "pt-4 flex items-center justify-between gap-4",
18                        div { class: "flex items-center gap-3.5 flex-1 min-w-0",
19                            SkeletonBox { class: "h-10 w-10 rounded-2xl shrink-0" }
20                            div { class: "space-y-1.5 flex-1 min-w-0",
21                                SkeletonBox { class: "h-4 w-32 rounded" }
22                                SkeletonBox { class: "h-3 w-48 rounded" }
23                            }
24                        }
25                        SkeletonBox { class: "h-8 w-24 rounded-lg" }
26                    }
27                }
28            }
29        }
30    }
31}
32
33/// 后台友链管理全页骨架屏组件（供 AdminLayout 路由级 fallback 使用）。
34#[component]
35pub fn FriendsAdminSkeleton() -> Element {
36    rsx! {
37        div { class: "w-full max-w-7xl mx-auto space-y-8",
38            // 页头
39            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",
40                div { class: "space-y-1.5",
41                    SkeletonBox { class: "h-9 w-36 rounded-lg" }
42                    SkeletonBox { class: "h-4 w-60 rounded" }
43                }
44                SkeletonBox { class: "h-9 w-28 rounded-full" }
45            }
46
47            // 表单卡片占位
48            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",
49                SkeletonBox { class: "h-6 w-28 rounded" }
50                div { class: "grid grid-cols-1 md:grid-cols-2 gap-5",
51                    div { class: "space-y-2",
52                        SkeletonBox { class: "h-3.5 w-16 rounded" }
53                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
54                    }
55                    div { class: "space-y-2",
56                        SkeletonBox { class: "h-3.5 w-20 rounded" }
57                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
58                    }
59                    div { class: "space-y-2",
60                        SkeletonBox { class: "h-3.5 w-20 rounded" }
61                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
62                    }
63                    div { class: "space-y-2",
64                        SkeletonBox { class: "h-3.5 w-24 rounded" }
65                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
66                    }
67                    div { class: "space-y-2 md:col-span-2",
68                        SkeletonBox { class: "h-3.5 w-16 rounded" }
69                        SkeletonBox { class: "h-16 w-full rounded-2xl" }
70                    }
71                }
72                SkeletonBox { class: "h-10 w-24 rounded-full" }
73            }
74
75            // 友链列表卡片占位
76            FriendsAdminListSkeleton {}
77        }
78    }
79}
yggdrasil/components/skeletons/friends_admin_skeleton.rs

yggdrasil/components/skeletons/
friends_admin_skeleton.rs
