yggdrasil/components/skeletons/
settings_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 SettingsAdminSkeleton() -> impl IntoView {
13    view! {
14        <div class="settings-page" aria-hidden="true">
15            <div class="settings-layout">
16                <div class="settings-nav">
17                    {(0..9)
18                        .map(|_| view! { <SkeletonBox class="h-[30px] w-full rounded-[7px]"/> })
19                        .collect_view()}
20                </div>
21                <div class="settings-main">
22                    <AdminPageHeadSkeleton title_width="w-16" subtitle_width="w-80"/>
23                    {(0..3)
24                        .map(|_| {
25                            view! {
26                                <div class="settings-slot">
27                                    <div class="admin-panel settings-card">
28                                        <div class="settings-card-head">
29                                            <div>
30                                                <SkeletonBox class="h-4 w-20 rounded"/>
31                                                <SkeletonBox class="h-3 w-64 rounded mt-2"/>
32                                            </div>
33                                        </div>
34                                        <div class="settings-rows">
35                                            {(0..2)
36                                                .map(|_| {
37                                                    view! {
38                                                        <div class="settings-row">
39                                                            <SkeletonBox class="h-3.5 w-20 rounded"/>
40                                                            <SkeletonBox class="h-9 w-full rounded-lg"/>
41                                                        </div>
42                                                    }
43                                                })
44                                                .collect_view()}
45                                        </div>
46                                    </div>
47                                </div>
48                            }
49                        })
50                        .collect_view()}
51                </div>
52            </div>
53        </div>
54    }
55}
yggdrasil/components/skeletons/settings_admin_skeleton.rs

yggdrasil/components/skeletons/
settings_admin_skeleton.rs
