yggdrasil/components/skeletons/
admin_comments_skeleton.rs

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

yggdrasil/components/skeletons/
admin_comments_skeleton.rs
