Skip to main content

yggdrasil/components/skeletons/
logs_skeleton.rs

1//! 后台运行日志页骨架屏
2//!
3//! 与日志页同一版式:标题行、级别与筛选栏、占满剩余高度的日志区。根节点沿用页面的内部滚动
4//! 容器类,撑满主内容区高度。
5
6use leptos::prelude::*;
7
8use crate::components::skeletons::atoms::{AdminPageHeadSkeleton, SkeletonBox};
9
10/// 后台运行日志页骨架屏组件。
11#[component]
12pub fn LogsSkeleton() -> impl IntoView {
13    view! {
14        <div class="logs-page" aria-hidden="true">
15            <AdminPageHeadSkeleton
16                title_width="w-28"
17                subtitle_width="w-64"
18                class="logs-head"
19                actions=|| {
20                    view! {
21                        <SkeletonBox class="h-[34px] w-24 rounded-lg"/>
22                        <SkeletonBox class="h-[34px] w-24 rounded-lg"/>
23                    }
24                }
25            />
26            <div class="logs-filters">
27                <SkeletonBox class="h-[30px] w-72 rounded-lg"/>
28                <SkeletonBox class="h-[30px] w-32 rounded-lg"/>
29                <SkeletonBox class="h-[30px] w-56 rounded-lg"/>
30            </div>
31            <div class="admin-panel logs-pane">
32                <div class="logs-skeleton">
33                    {(0..12)
34                        .map(|_| view! { <SkeletonBox class="h-3.5 w-full rounded"/> })
35                        .collect_view()}
36                </div>
37            </div>
38        </div>
39    }
40}