yggdrasil/components/skeletons/
posts_skeleton.rs

1//! 后台文章列表骨架屏
2//!
3//! 与文章列表同一版式：标题行、状态选项卡与筛选、表格与底栏分页。
4
5use leptos::prelude::*;
6
7use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
8
9/// 文章表格骨架屏（列表加载中使用）。
10#[component]
11pub fn PostsTableSkeleton() -> impl IntoView {
12    view! {
13        <div class="admin-panel admin-table-wrap" aria-hidden="true">
14            <table class="admin-table admin-posts-table">
15                <thead>
16                    <tr>
17                        <th class="admin-table-check">
18                            <SkeletonBox class="h-4 w-4 rounded"/>
19                        </th>
20                        <th>
21                            <SkeletonBox class="h-3 w-10 rounded"/>
22                        </th>
23                        <th>
24                            <SkeletonBox class="h-3 w-10 rounded"/>
25                        </th>
26                        <th class="admin-posts-tags">
27                            <SkeletonBox class="h-3 w-10 rounded"/>
28                        </th>
29                        <th class="admin-posts-words">
30                            <SkeletonBox class="h-3 w-8 rounded ml-auto"/>
31                        </th>
32                        <th>
33                            <SkeletonBox class="h-3 w-14 rounded"/>
34                        </th>
35                        <th class="admin-table-actions"></th>
36                    </tr>
37                </thead>
38                <tbody>
39                    {(0..8)
40                        .map(|_| {
41                            view! {
42                                <tr>
43                                    <td class="admin-table-check">
44                                        <SkeletonBox class="h-4 w-4 rounded"/>
45                                    </td>
46                                    <td class="admin-posts-title">
47                                        <SkeletonBox class="h-4 w-3/4 rounded"/>
48                                        <SkeletonBox class="h-3 w-1/3 rounded mt-1.5"/>
49                                    </td>
50                                    <td class="admin-posts-status">
51                                        <SkeletonBox class="h-3.5 w-14 rounded"/>
52                                    </td>
53                                    <td class="admin-posts-tags">
54                                        <SkeletonBox class="h-3.5 w-20 rounded"/>
55                                    </td>
56                                    <td class="admin-posts-words">
57                                        <SkeletonBox class="h-3.5 w-10 rounded ml-auto"/>
58                                    </td>
59                                    <td class="admin-posts-date">
60                                        <SkeletonBox class="h-3.5 w-28 rounded"/>
61                                    </td>
62                                    <td class="admin-table-actions">
63                                        <SkeletonBox class="h-6 w-6 rounded-md ml-auto"/>
64                                    </td>
65                                </tr>
66                            }
67                        })
68                        .collect_view()}
69                </tbody>
70            </table>
71        </div>
72    }
73}
74
75/// 文章列表全页骨架屏（AdminLayout 路由级 fallback）。
76#[component]
77pub fn PostsSkeleton() -> impl IntoView {
78    view! {
79        <div class="admin-posts" aria-hidden="true">
80            <AdminPageHeadSkeleton
81                title_width="w-20"
82                subtitle_width="w-44"
83                actions=|| {
84                    view! {
85                        <SkeletonBox class="h-[34px] w-[34px] rounded-lg"/>
86                        <SkeletonBox class="h-[34px] w-28 rounded-lg"/>
87                    }
88                }
89            />
90            <div class="admin-toolbar">
91                <SkeletonBox class="h-8 w-72 rounded-full"/>
92                <div class="admin-toolbar-filters">
93                    <SkeletonBox class="h-[30px] w-60 rounded-lg"/>
94                    <SkeletonBox class="h-[30px] w-28 rounded-lg"/>
95                </div>
96            </div>
97            <PostsTableSkeleton/>
98        </div>
99    }
100}
yggdrasil/components/skeletons/posts_skeleton.rs

yggdrasil/components/skeletons/
posts_skeleton.rs
