yggdrasil/components/skeletons/
posts_skeleton.rs

1//! 后台文章管理列表骨架屏
2//!
3//! 模拟后台 Posts 页面的表格结构。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::SkeletonBox;
8use crate::components::ui::ADMIN_TABLE_CLASS;
9
10/// 后台文章管理列表骨架屏组件。
11///
12/// 渲染带表头的表格占位，包含 10 行数据行。
13#[component]
14pub fn PostsSkeleton() -> Element {
15    rsx! {
16        div { class: "{ADMIN_TABLE_CLASS}",
17            table { class: "w-full text-sm",
18                thead {
19                    tr { class: "border-b border-paper-border",
20                        th { class: "px-4 py-3",
21                            SkeletonBox { class: "h-3 w-10" }
22                        }
23                        th { class: "px-4 py-3 w-24",
24                            SkeletonBox { class: "h-3 w-10 mx-auto" }
25                        }
26                        th { class: "px-4 py-3 w-32",
27                            SkeletonBox { class: "h-3 w-10" }
28                        }
29                        th { class: "px-4 py-3 w-24",
30                            SkeletonBox { class: "h-3 w-10 ml-auto" }
31                        }
32                    }
33                }
34                tbody {
35                    for _ in 0..10 {
36                        tr { class: "border-b border-paper-border last:border-0",
37                            td { class: "px-4 py-3",
38                                SkeletonBox { class: "h-4 w-1/3" }
39                            }
40                            td { class: "px-4 py-3",
41                                SkeletonBox { class: "h-5 w-14 mx-auto rounded" }
42                            }
43                            td { class: "px-4 py-3",
44                                SkeletonBox { class: "h-4 w-20" }
45                            }
46                            td { class: "px-4 py-3",
47                                SkeletonBox { class: "h-4 w-12 ml-auto" }
48                            }
49                        }
50                    }
51                }
52            }
53        }
54    }
55}
yggdrasil/components/skeletons/posts_skeleton.rs

yggdrasil/components/skeletons/
posts_skeleton.rs
