yggdrasil/components/skeletons/
posts_trash_skeleton.rs

1//! 后台回收站骨架屏
2//!
3//! 与回收站同一版式：标题行（说明、清空回收站）、表格与底栏分页。
4
5use leptos::prelude::*;
6
7use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
8
9/// 回收站表格骨架屏（列表加载中使用）。
10#[component]
11pub fn PostsTrashTableSkeleton() -> impl IntoView {
12    view! {
13        <div class="admin-panel admin-table-wrap" aria-hidden="true">
14            <table class="admin-table admin-trash-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-12 rounded"/>
25                        </th>
26                        <th class="admin-trash-deleted">
27                            <SkeletonBox class="h-3 w-12 rounded"/>
28                        </th>
29                        <th class="admin-trash-left">
30                            <SkeletonBox class="h-3 w-14 rounded"/>
31                        </th>
32                        <th class="admin-trash-actions"></th>
33                    </tr>
34                </thead>
35                <tbody>
36                    {(0..6)
37                        .map(|_| {
38                            view! {
39                                <tr>
40                                    <td class="admin-table-check">
41                                        <SkeletonBox class="h-4 w-4 rounded"/>
42                                    </td>
43                                    <td class="admin-trash-title">
44                                        <SkeletonBox class="h-4 w-3/4 rounded"/>
45                                        <SkeletonBox class="h-3 w-1/3 rounded mt-1.5"/>
46                                    </td>
47                                    <td class="admin-trash-status">
48                                        <SkeletonBox class="h-3.5 w-14 rounded"/>
49                                    </td>
50                                    <td class="admin-trash-deleted">
51                                        <SkeletonBox class="h-3.5 w-20 rounded"/>
52                                    </td>
53                                    <td class="admin-trash-left">
54                                        <SkeletonBox class="h-1 w-full rounded-full"/>
55                                    </td>
56                                    <td class="admin-trash-actions">
57                                        <SkeletonBox class="h-[30px] w-20 rounded-md ml-auto"/>
58                                    </td>
59                                </tr>
60                            }
61                        })
62                        .collect_view()}
63                </tbody>
64            </table>
65        </div>
66    }
67}
68
69/// 回收站全页骨架屏（AdminLayout 路由级 fallback）。
70#[component]
71pub fn PostsTrashSkeleton() -> impl IntoView {
72    view! {
73        <div class="admin-trash" aria-hidden="true">
74            <AdminPageHeadSkeleton
75                title_width="w-20"
76                subtitle_width="w-80 max-w-full"
77                actions=|| view! { <SkeletonBox class="h-[34px] w-24 rounded-lg"/> }
78            />
79            <PostsTrashTableSkeleton/>
80        </div>
81    }
82}
yggdrasil/components/skeletons/posts_trash_skeleton.rs

yggdrasil/components/skeletons/
posts_trash_skeleton.rs
