yggdrasil/components/skeletons/
logs_skeleton.rs

1//! 后台运行日志页骨架屏
2//!
3//! 镜像 Logs 页面的内部滚动结构：页头（标题+状态/跟随/导出）+ 筛选栏
4//! （级别 chips + target 选择器 + 关键字输入）+ 清理策略折叠卡 + 等宽日志行列表。
5
6use dioxus::prelude::*;
7
8use crate::components::skeletons::atoms::SkeletonBox;
9
10/// 后台运行日志页骨架屏组件。
11///
12/// Logs 是 internal-scroll 路由（AdminLayout 卡片不滚动、页面自组织分区），
13/// 骨架根节点与真实页面同为 `flex-1 min-h-0 flex flex-col` + 自带内边距，
14/// 保证骨架 → 内容切换时高度约束一致、无跳动。
15#[component]
16pub fn LogsSkeleton() -> Element {
17    rsx! {
18        div { class: "w-full flex-1 min-h-0 flex flex-col px-6 py-8",
19            // 页头：标题 + 副标题 / 状态胶囊 + 跟随开关 + 导出按钮
20            div { class: "flex-shrink-0 flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-[var(--color-paper-border)]/70 mb-4",
21                div { class: "space-y-1.5",
22                    SkeletonBox { class: "h-9 w-40 rounded-lg" }
23                    SkeletonBox { class: "h-4 w-72 rounded" }
24                }
25                div { class: "flex items-center gap-3",
26                    SkeletonBox { class: "h-8 w-20 rounded-full" }
27                    SkeletonBox { class: "h-6 w-24 rounded-full" }
28                    SkeletonBox { class: "h-8 w-24 rounded-full" }
29                }
30            }
31
32            // 筛选栏卡片：级别 chips + target 选择器 + 搜索框
33            div { class: "flex-shrink-0 bg-[var(--color-paper-entry)]/40 rounded-2xl p-4 sm:p-5 space-y-4 border border-[var(--color-paper-border)]/70 shadow-xs mb-4",
34                div { class: "flex flex-wrap gap-2",
35                    SkeletonBox { class: "h-7 w-16 rounded-full" }
36                    SkeletonBox { class: "h-7 w-14 rounded-full" }
37                    SkeletonBox { class: "h-7 w-14 rounded-full" }
38                    SkeletonBox { class: "h-7 w-16 rounded-full" }
39                    SkeletonBox { class: "h-7 w-16 rounded-full" }
40                }
41                div { class: "flex flex-col sm:flex-row gap-3",
42                    SkeletonBox { class: "h-8 w-full sm:w-40 rounded-lg" }
43                    SkeletonBox { class: "h-10 flex-1 rounded-2xl" }
44                }
45            }
46
47            // 清理策略折叠卡（收起态一条）
48            SkeletonBox { class: "flex-shrink-0 h-14 w-full rounded-2xl mb-4" }
49
50            // 日志区：等宽行占位（flex-1 占满剩余高度）
51            div { class: "flex-1 min-h-0 bg-[var(--color-paper-entry)]/40 rounded-2xl border border-[var(--color-paper-border)]/70 shadow-xs p-4 space-y-3 overflow-hidden",
52                SkeletonBox { class: "h-4 w-[92%] rounded" }
53                SkeletonBox { class: "h-4 w-[78%] rounded" }
54                SkeletonBox { class: "h-4 w-[85%] rounded" }
55                SkeletonBox { class: "h-4 w-[70%] rounded" }
56                SkeletonBox { class: "h-4 w-[88%] rounded" }
57                SkeletonBox { class: "h-4 w-[64%] rounded" }
58                SkeletonBox { class: "h-4 w-[80%] rounded" }
59            }
60        }
61    }
62}
yggdrasil/components/skeletons/logs_skeleton.rs

yggdrasil/components/skeletons/
logs_skeleton.rs
