yggdrasil/components/skeletons/
posts_trash_skeleton.rs

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

yggdrasil/components/skeletons/
posts_trash_skeleton.rs
