yggdrasil/components/skeletons/
assets_skeleton.rs

1//! 后台素材管理骨架屏
2//!
3//! 与素材页同一版式：标题行、引用状态选项卡与搜索排序、缩略图网格。
4
5use leptos::prelude::*;
6
7use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
8
9/// 缩略图网格骨架（列表加载中使用）。
10#[component]
11pub fn AssetsGridSkeleton() -> impl IntoView {
12    view! {
13        <ul class="asset-grid" aria-hidden="true">
14            {(0..12)
15                .map(|_| {
16                    view! {
17                        <li class="asset-tile">
18                            <span class="asset-tile-open">
19                                <SkeletonBox class="aspect-[4/3] w-full rounded-none"/>
20                                <span class="asset-tile-text">
21                                    <SkeletonBox class="h-3.5 w-3/4 rounded"/>
22                                    <SkeletonBox class="h-3 w-1/2 rounded mt-1.5"/>
23                                </span>
24                            </span>
25                        </li>
26                    }
27                })
28                .collect_view()}
29        </ul>
30    }
31}
32
33/// 素材管理全页骨架屏（AdminLayout 路由级 fallback）。
34#[component]
35pub fn AssetsSkeleton() -> impl IntoView {
36    view! {
37        <div class="admin-assets" aria-hidden="true">
38            <div class="admin-assets-main">
39                <AdminPageHeadSkeleton
40                    title_width="w-20"
41                    subtitle_width="w-64"
42                    actions=|| {
43                        view! {
44                            <SkeletonBox class="h-[34px] w-[34px] rounded-lg"/>
45                            <SkeletonBox class="h-[34px] w-20 rounded-lg"/>
46                        }
47                    }
48                />
49                <div class="admin-toolbar">
50                    <SkeletonBox class="h-8 w-64 rounded-full"/>
51                    <div class="admin-toolbar-filters">
52                        <SkeletonBox class="h-[30px] w-60 rounded-lg"/>
53                        <SkeletonBox class="h-[30px] w-24 rounded-lg"/>
54                    </div>
55                </div>
56                <AssetsGridSkeleton/>
57            </div>
58        </div>
59    }
60}
yggdrasil/components/skeletons/assets_skeleton.rs

yggdrasil/components/skeletons/
assets_skeleton.rs
