Skip to main content
Yggdrasil

yggdrasil/components/skeletons/
writing_guide_skeleton.rs

1//! 写作指南页骨架屏：页头照常显示，三步与配置卡片占位。
2
3use crate::components::skeletons::atoms::SkeletonBox;
4use crate::pages::writing_guide::WritingHeader;
5use leptos::prelude::*;
6
7/// 写作指南页骨架屏组件。
8#[component]
9pub fn WritingGuideSkeleton() -> impl IntoView {
10    view! {
11        <article class="writing-page">
12            <WritingHeader/>
13            <div role="status" aria-label="正在加载写作指南">
14                <div class="writing-steps" aria-hidden="true">
15                    {(0..2)
16                        .map(|_| {
17                            view! {
18                                <div class="writing-step">
19                                    <div class="writing-step-rail">
20                                        <SkeletonBox class="h-7 w-7 rounded-full"/>
21                                    </div>
22                                    <div class="writing-step-body">
23                                        <SkeletonBox class="h-4 w-28"/>
24                                        <SkeletonBox class="h-3 mt-3 w-full"/>
25                                        <SkeletonBox class="h-28 mt-4 w-full rounded-[14px]"/>
26                                    </div>
27                                </div>
28                            }
29                        })
30                        .collect_view()}
31                </div>
32            </div>
33        </article>
34    }
35}