yggdrasil/components/skeletons/
posts_skeleton.rs

1//! 后台文章管理列表骨架屏
2//!
3//! 镜像后台 Posts 页面的结构：Header（标题+按钮）+ 搜索栏 + 表格 + 分页栏。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::{
8    SkeletonBox, SkeletonCard, SkeletonCellShape, SkeletonTable, SkeletonTableColumn,
9};
10/// 后台文章管理表格骨架屏组件（供 AllPostsList 内部加载态使用）。
11#[component]
12pub fn PostsTableSkeleton() -> Element {
13    let columns = vec![
14        SkeletonTableColumn {
15            header_class: "px-5 py-3.5",
16            header_box_class: "h-3 w-16",
17            cell_class: "px-5 py-3.5",
18            cell_shape: SkeletonCellShape::Stacked("h-4 w-2/3", "h-3 w-1/3"),
19        },
20        SkeletonTableColumn {
21            header_class: "px-4 py-3.5 w-24",
22            header_box_class: "h-3 w-10 mx-auto",
23            cell_class: "px-4 py-3.5",
24            cell_shape: SkeletonCellShape::Single("h-5 w-14 mx-auto rounded-full"),
25        },
26        SkeletonTableColumn {
27            header_class: "px-4 py-3.5 w-28 hidden md:table-cell",
28            header_box_class: "h-3 w-10",
29            cell_class: "px-4 py-3.5 hidden md:table-cell",
30            cell_shape: SkeletonCellShape::Single("h-4 w-16"),
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-24"),
37        },
38        SkeletonTableColumn {
39            header_class: "px-5 py-3.5 w-48",
40            header_box_class: "h-3 w-12 ml-auto",
41            cell_class: "px-5 py-3.5",
42            cell_shape: SkeletonCellShape::Single("h-6 w-32 ml-auto rounded"),
43        },
44    ];
45    rsx! {
46        SkeletonCard { class: Some("shadow-xs overflow-hidden"),
47            SkeletonTable { columns, rows: 8 }
48        }
49    }
50}
51
52/// 后台文章管理全页骨架屏组件（供 AdminLayout 路由级 fallback 使用）。
53#[component]
54pub fn PostsSkeleton() -> Element {
55    rsx! {
56        div { class: "w-full max-w-7xl mx-auto space-y-6",
57            // 页头：标题 + 操作按钮
58            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",
59                div { class: "space-y-1.5",
60                    SkeletonBox { class: "h-9 w-36 rounded-lg" }
61                    SkeletonBox { class: "h-4 w-56 rounded" }
62                }
63                div { class: "flex items-center gap-3",
64                    SkeletonBox { class: "h-9 w-24 rounded-full" }
65                    SkeletonBox { class: "h-9 w-24 rounded-full" }
66                    SkeletonBox { class: "h-9 w-28 rounded-full" }
67                }
68            }
69
70            // 搜索/筛选工具栏
71            div { class: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4",
72                div { class: "flex gap-3",
73                    SkeletonBox { class: "h-8 w-16 rounded-full" }
74                    SkeletonBox { class: "h-8 w-20 rounded-full" }
75                    SkeletonBox { class: "h-8 w-16 rounded-full" }
76                }
77                div { class: "flex items-center gap-2",
78                    SkeletonBox { class: "h-9 w-72 rounded-2xl" }
79                    SkeletonBox { class: "h-9 w-16 rounded-full" }
80                }
81            }
82
83            // 文章列表表格
84            PostsTableSkeleton {}
85
86            // 分页栏
87            div { class: "flex justify-between items-center pt-4",
88                SkeletonBox { class: "h-4 w-32 rounded" }
89                div { class: "flex gap-2",
90                    SkeletonBox { class: "h-8 w-16 rounded-full" }
91                    SkeletonBox { class: "h-8 w-16 rounded-full" }
92                }
93            }
94        }
95    }
96}
yggdrasil/components/skeletons/posts_skeleton.rs

yggdrasil/components/skeletons/
posts_skeleton.rs
