yggdrasil/components/skeletons/
assets_skeleton.rs

1//! 后台素材管理骨架屏
2//!
3//! 镜像后台 Assets 页面的结构：Header（标题+描述）+ 筛选/搜索工具栏 + 12 个网格缩略图卡片。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::SkeletonBox;
8
9/// 后台素材管理骨架屏组件。
10#[component]
11pub fn AssetsSkeleton() -> Element {
12    rsx! {
13        div { class: "w-full max-w-7xl mx-auto space-y-6",
14            // 页头：标题 + 描述
15            div { class: "space-y-2 mb-8",
16                SkeletonBox { class: "h-9 w-36 rounded-lg" }
17                SkeletonBox { class: "h-4 w-72 rounded" }
18            }
19
20            // 顶栏：筛选 tabs + 搜索框 + 排序按钮
21            div { class: "flex flex-wrap items-end justify-between gap-4 mb-6",
22                // Tabs 占位
23                div { class: "flex gap-2 border-b border-paper-border pb-2",
24                    SkeletonBox { class: "h-8 w-16 rounded-full" }
25                    SkeletonBox { class: "h-8 w-20 rounded-full" }
26                    SkeletonBox { class: "h-8 w-20 rounded-full" }
27                }
28                // 右侧 搜索 + 排序 占位
29                div { class: "flex items-center gap-3 mb-6",
30                    SkeletonBox { class: "h-9 w-56 rounded-2xl" }
31                    SkeletonBox { class: "h-8 w-16 rounded-full" }
32                    SkeletonBox { class: "h-8 w-16 rounded-full" }
33                }
34            }
35
36            // 响应式缩略图网格
37            div { class: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4",
38                for _ in 0..12 {
39                    div { class: "aspect-square rounded-2xl border border-paper-border bg-paper-entry overflow-hidden p-2 flex flex-col justify-between",
40                        SkeletonBox { class: "w-full flex-1 rounded-xl" }
41                        div { class: "mt-2 flex justify-between items-center",
42                            SkeletonBox { class: "h-3 w-20 rounded" }
43                            SkeletonBox { class: "h-3 w-10 rounded" }
44                        }
45                    }
46                }
47            }
48        }
49    }
50}
yggdrasil/components/skeletons/assets_skeleton.rs

yggdrasil/components/skeletons/
assets_skeleton.rs
