yggdrasil/components/skeletons/
write_skeleton.rs

1//! 写文章页骨架屏
2//!
3//! 与写作页同一版式：页头（返回、面包屑、保存状态与按钮）、居中的标题与正文、
4//! 右侧属性抽屉。路由级 fallback 与编辑器初始化时共用。
5
6use crate::components::skeletons::atoms::SkeletonBox;
7use leptos::prelude::*;
8
9/// 写文章页骨架屏组件。
10#[component]
11pub fn WriteSkeleton() -> impl IntoView {
12    view! {
13        <div class="write-page" aria-hidden="true">
14            <div class="write-head">
15                <div class="write-head-left">
16                    <SkeletonBox class="h-[34px] w-[34px] rounded-lg"/>
17                    <SkeletonBox class="h-3.5 w-40 rounded"/>
18                </div>
19                <div class="write-head-actions">
20                    <SkeletonBox class="h-3.5 w-24 rounded mr-2"/>
21                    <SkeletonBox class="h-[34px] w-16 rounded-lg"/>
22                    <SkeletonBox class="h-[34px] w-16 rounded-lg"/>
23                </div>
24            </div>
25            <div class="write-body">
26                <div class="write-main">
27                    <div class="write-doc">
28                        <SkeletonBox class="h-10 w-4/5 rounded-md"/>
29                        <SkeletonBox class="h-3.5 w-64 rounded mt-4"/>
30                        <div class="write-rule"></div>
31                        <div class="space-y-3">
32                            <SkeletonBox class="h-4 w-full rounded"/>
33                            <SkeletonBox class="h-4 w-11/12 rounded"/>
34                            <SkeletonBox class="h-4 w-4/5 rounded"/>
35                            <SkeletonBox class="h-4 w-full rounded mt-6"/>
36                            <SkeletonBox class="h-4 w-3/4 rounded"/>
37                        </div>
38                    </div>
39                </div>
40                <div class="write-drawer-slot write-skeleton-drawer">
41                    <div class="write-drawer">
42                        <SkeletonBox class="h-4 w-20 rounded"/>
43                        {(0..3)
44                            .map(|_| {
45                                view! {
46                                    <div>
47                                        <SkeletonBox class="h-3 w-16 rounded mb-2"/>
48                                        <SkeletonBox class="h-9 w-full rounded-lg"/>
49                                    </div>
50                                }
51                            })
52                            .collect_view()}
53                        <SkeletonBox class="w-full aspect-[21/9] rounded-[10px]"/>
54                    </div>
55                </div>
56            </div>
57        </div>
58    }
59}
yggdrasil/components/skeletons/write_skeleton.rs

yggdrasil/components/skeletons/
write_skeleton.rs
