yggdrasil/components/skeletons/
admin_comments_skeleton.rs

1//! 后台评论管理骨架屏
2//!
3//! 镜像后台 AdminComments 页面的结构：Header（标题+描述）+ 状态筛选 Tabs + 5 条评论卡片行。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::{
8    SkeletonBox, SkeletonCard, SkeletonCellShape, SkeletonTable, SkeletonTableColumn,
9};
10/// 评论表格骨架屏组件（纯表格部分，供 AdminCommentsPage 内部加载态使用）。
11#[component]
12pub fn AdminCommentsTableSkeleton() -> 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 w-48",
22            header_box_class: "h-3 w-16",
23            cell_class: "px-5 py-3.5",
24            cell_shape: SkeletonCellShape::AvatarStacked {
25                avatar: "h-8 w-8 rounded-full shrink-0",
26                line1: "h-3.5 w-20 rounded",
27                line2: "h-2.5 w-28 rounded",
28            },
29        },
30        SkeletonTableColumn {
31            header_class: "px-5 py-3.5",
32            header_box_class: "h-3 w-20",
33            cell_class: "px-5 py-3.5",
34            cell_shape: SkeletonCellShape::Single("h-4 w-3/4 rounded"),
35        },
36        SkeletonTableColumn {
37            header_class: "px-5 py-3.5 w-56",
38            header_box_class: "h-3 w-16",
39            cell_class: "px-5 py-3.5",
40            cell_shape: SkeletonCellShape::Single("h-3.5 w-32 rounded"),
41        },
42        SkeletonTableColumn {
43            header_class: "px-4 py-3.5 w-24",
44            header_box_class: "h-3 w-10 mx-auto",
45            cell_class: "px-4 py-3.5",
46            cell_shape: SkeletonCellShape::Single("h-5 w-14 mx-auto rounded-full"),
47        },
48        SkeletonTableColumn {
49            header_class: "px-4 py-3.5 w-28",
50            header_box_class: "h-3 w-14",
51            cell_class: "px-4 py-3.5",
52            cell_shape: SkeletonCellShape::Single("h-4 w-20"),
53        },
54        SkeletonTableColumn {
55            header_class: "px-5 py-3.5 w-36",
56            header_box_class: "h-3 w-12 ml-auto",
57            cell_class: "px-5 py-3.5",
58            cell_shape: SkeletonCellShape::Single("h-6 w-24 ml-auto rounded"),
59        },
60    ];
61    rsx! {
62        SkeletonCard { class: Some("shadow-xs overflow-hidden"),
63            SkeletonTable { columns, rows: 8 }
64        }
65    }
66}
67
68/// 后台评论管理全页骨架屏组件（供 AdminLayout 路由级 fallback 使用）。
69#[component]
70pub fn AdminCommentsSkeleton() -> Element {
71    rsx! {
72        div { class: "w-full max-w-7xl mx-auto space-y-6",
73            // 页头：标题与描述
74            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",
75                div { class: "space-y-1.5",
76                    SkeletonBox { class: "h-9 w-36 rounded-lg" }
77                    SkeletonBox { class: "h-4 w-64 rounded" }
78                }
79            }
80
81            // 状态筛选 Tabs
82            div { class: "flex gap-3 border-b border-[var(--color-paper-border)]/70 pb-3 mb-6",
83                SkeletonBox { class: "h-8 w-16 rounded-full" }
84                SkeletonBox { class: "h-8 w-20 rounded-full" }
85                SkeletonBox { class: "h-8 w-20 rounded-full" }
86                SkeletonBox { class: "h-8 w-20 rounded-full" }
87            }
88
89            // 评论列表表格
90            AdminCommentsTableSkeleton {}
91
92            // 分页栏
93            div { class: "flex justify-between items-center pt-4",
94                SkeletonBox { class: "h-4 w-32 rounded" }
95                div { class: "flex gap-2",
96                    SkeletonBox { class: "h-8 w-16 rounded-full" }
97                    SkeletonBox { class: "h-8 w-16 rounded-full" }
98                }
99            }
100        }
101    }
102}
yggdrasil/components/skeletons/admin_comments_skeleton.rs

yggdrasil/components/skeletons/
admin_comments_skeleton.rs
