yggdrasil/components/skeletons/
posts_trash_skeleton.rs

1//! 后台回收站骨架屏
2//!
3//! 镜像后台 PostsTrash 页面的结构：Header（标题+副标题）+ 自动清理配置卡片 + 表格。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::{
8    SkeletonBox, SkeletonCard, SkeletonCellShape, SkeletonTable, SkeletonTableColumn,
9};
10/// 后台回收站表格骨架屏组件（供 PostsTrash 页面内部加载态使用）。
11#[component]
12pub fn PostsTrashTableSkeleton() -> Element {
13    let columns = vec![
14        SkeletonTableColumn {
15            header_class: "px-4 py-3.5 w-10 text-center",
16            header_box_class: "h-4 w-4 rounded mx-auto",
17            cell_class: "px-4 py-3.5 text-center",
18            cell_shape: SkeletonCellShape::Single("h-4 w-4 rounded mx-auto"),
19        },
20        SkeletonTableColumn {
21            header_class: "px-5 py-3.5",
22            header_box_class: "h-3 w-16",
23            cell_class: "px-5 py-3.5",
24            cell_shape: SkeletonCellShape::Stacked("h-4 w-1/3", "h-3 w-1/4"),
25        },
26        SkeletonTableColumn {
27            header_class: "px-4 py-3.5 w-24",
28            header_box_class: "h-3 w-14 mx-auto",
29            cell_class: "px-4 py-3.5",
30            cell_shape: SkeletonCellShape::Single("h-5 w-14 mx-auto rounded-full"),
31        },
32        SkeletonTableColumn {
33            header_class: "px-4 py-3.5 w-32",
34            header_box_class: "h-3 w-16",
35            cell_class: "px-4 py-3.5",
36            cell_shape: SkeletonCellShape::Single("h-4 w-20"),
37        },
38        SkeletonTableColumn {
39            header_class: "px-4 py-3.5 w-24",
40            header_box_class: "h-3 w-14 mx-auto",
41            cell_class: "px-4 py-3.5",
42            cell_shape: SkeletonCellShape::Single("h-5 w-14 mx-auto rounded-full"),
43        },
44        SkeletonTableColumn {
45            header_class: "px-5 py-3.5 w-36",
46            header_box_class: "h-3 w-16 ml-auto",
47            cell_class: "px-5 py-3.5",
48            cell_shape: SkeletonCellShape::Single("h-6 w-24 ml-auto rounded"),
49        },
50    ];
51    rsx! {
52        SkeletonCard { class: Some("shadow-xs overflow-hidden"),
53            SkeletonTable { columns, rows: 8 }
54        }
55    }
56}
57
58/// 后台回收站全页骨架屏组件（供 AdminLayout 路由级 fallback 使用）。
59#[component]
60pub fn PostsTrashSkeleton() -> Element {
61    rsx! {
62        div { class: "w-full max-w-7xl mx-auto space-y-6",
63            // 页头：标题与副标题 + 按钮
64            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",
65                div { class: "space-y-1.5",
66                    SkeletonBox { class: "h-9 w-28 rounded-lg" }
67                    SkeletonBox { class: "h-4 w-60 rounded" }
68                }
69                div { class: "flex items-center gap-3",
70                    SkeletonBox { class: "h-9 w-28 rounded-full" }
71                    SkeletonBox { class: "h-9 w-28 rounded-full" }
72                }
73            }
74
75            div { class: "space-y-6",
76                // 自动清理配置卡片占位
77                SkeletonCard { class: Some("p-6 space-y-4"),
78                    div { class: "flex justify-between items-center",
79                        div { class: "space-y-1",
80                            SkeletonBox { class: "h-5 w-32 rounded" }
81                            SkeletonBox { class: "h-3.5 w-64 rounded" }
82                        }
83                        SkeletonBox { class: "h-6 w-12 rounded-full" }
84                    }
85                }
86
87                // 回收站表格
88                PostsTrashTableSkeleton {}
89            }
90        }
91    }
92}
yggdrasil/components/skeletons/posts_trash_skeleton.rs

yggdrasil/components/skeletons/
posts_trash_skeleton.rs
