yggdrasil/components/skeletons/
notes_admin_skeleton.rs

1//! 后台笔记骨架屏
2//!
3//! 与笔记管理同一版式：标题行、快速记录、类型选项卡与筛选、笔记行；
4//! 笔记本管理为左栏列表与右栏表单。
5
6use leptos::prelude::*;
7
8use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
9
10/// 笔记行骨架（列表加载中使用）。
11#[component]
12pub fn NoteRowsSkeleton() -> impl IntoView {
13    view! {
14        <div class="admin-panel admin-notes-list" aria-hidden="true">
15            <ul>
16                {(0..6)
17                    .map(|_| {
18                        view! {
19                            <li class="admin-notes-row">
20                                <SkeletonBox class="h-[30px] w-[30px] rounded-lg"/>
21                                <span class="admin-notes-main">
22                                    <SkeletonBox class="h-4 w-3/5 rounded"/>
23                                    <SkeletonBox class="h-3 w-2/5 rounded mt-2"/>
24                                </span>
25                                <SkeletonBox class="h-3 w-10 rounded"/>
26                            </li>
27                        }
28                    })
29                    .collect_view()}
30            </ul>
31        </div>
32    }
33}
34
35/// 笔记管理全页骨架屏（AdminLayout 路由级 fallback）。
36#[component]
37pub fn AdminNotesSkeleton() -> impl IntoView {
38    view! {
39        <div class="admin-notes" aria-hidden="true">
40            <AdminPageHeadSkeleton
41                title_width="w-20"
42                subtitle_width="w-64"
43                actions=|| {
44                    view! {
45                        <SkeletonBox class="h-[34px] w-24 rounded-lg"/>
46                        <SkeletonBox class="h-[34px] w-24 rounded-lg"/>
47                    }
48                }
49            />
50            <SkeletonBox class="h-[120px] w-full rounded-[20px]"/>
51            <div class="admin-toolbar admin-notes-toolbar">
52                <SkeletonBox class="h-8 w-56 rounded-full"/>
53                <div class="admin-toolbar-filters">
54                    <SkeletonBox class="h-[30px] w-60 rounded-lg"/>
55                    <SkeletonBox class="h-[30px] w-24 rounded-lg"/>
56                </div>
57            </div>
58            <NoteRowsSkeleton/>
59        </div>
60    }
61}
62
63/// 加载占位：左栏列表与右栏表单。
64#[component]
65pub fn NotebooksSkeleton() -> impl IntoView {
66    view! {
67        <div class="admin-notebooks-grid" aria-hidden="true">
68            <div class="admin-panel admin-notebooks-list">
69                <div class="admin-notebooks-tabs">
70                    <SkeletonBox class="h-[30px] w-full rounded-lg"/>
71                </div>
72                {(0..4)
73                    .map(|_| {
74                        view! {
75                            <div class="px-4 py-2.5">
76                                <SkeletonBox class="h-4 w-3/4 rounded"/>
77                                <SkeletonBox class="h-3 w-1/3 rounded mt-1.5"/>
78                            </div>
79                        }
80                    })
81                    .collect_view()}
82            </div>
83            <div class="admin-panel admin-notebook-editor">
84                <div class="admin-notebook-fields">
85                    <SkeletonBox class="h-5 w-24 rounded"/>
86                    <SkeletonBox class="h-9 w-full rounded-lg"/>
87                    <SkeletonBox class="h-16 w-full rounded-lg"/>
88                </div>
89            </div>
90        </div>
91    }
92}
93
94/// 笔记本管理全页骨架屏（AdminLayout 路由级 fallback）。
95#[component]
96pub fn AdminNotebooksSkeleton() -> impl IntoView {
97    view! {
98        <div class="admin-notebooks" aria-hidden="true">
99            <AdminPageHeadSkeleton
100                title_width="w-24"
101                subtitle_width="w-64"
102                actions=|| view! { <SkeletonBox class="h-[34px] w-28 rounded-lg"/> }
103            />
104            <NotebooksSkeleton/>
105        </div>
106    }
107}
yggdrasil/components/skeletons/notes_admin_skeleton.rs

yggdrasil/components/skeletons/
notes_admin_skeleton.rs
