yggdrasil/components/skeletons/
runner_skeleton.rs

1//! 后台代码试运行沙箱骨架屏
2//!
3//! 镜像后台 Runner 页面的结构：Header（标题+描述）+ 语言切换 Pills + 沙箱配置/代码编辑器 + 输出面板。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::SkeletonBox;
8
9/// 后台代码试运行沙箱骨架屏组件。
10#[component]
11pub fn RunnerSkeleton() -> Element {
12    rsx! {
13        div { class: "w-full max-w-7xl mx-auto space-y-8",
14            // 页头
15            div { class: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-[var(--color-paper-border)]/70",
16                div { class: "space-y-1.5",
17                    SkeletonBox { class: "h-9 w-48 rounded-lg" }
18                    SkeletonBox { class: "h-4 w-96 rounded" }
19                }
20                SkeletonBox { class: "h-8 w-36 rounded-full" }
21            }
22
23            // 配置卡片：语言切换 Tabs + 资源覆盖
24            div { class: "bg-[var(--color-paper-entry)]/40 rounded-2xl p-6 sm:p-8 space-y-6 border border-[var(--color-paper-border)]/70 shadow-xs",
25                SkeletonBox { class: "h-6 w-36 rounded" }
26                div { class: "space-y-2.5",
27                    SkeletonBox { class: "h-3.5 w-16 rounded" }
28                    div { class: "flex flex-wrap gap-2.5",
29                        SkeletonBox { class: "h-8 w-20 rounded-full" }
30                        SkeletonBox { class: "h-8 w-20 rounded-full" }
31                        SkeletonBox { class: "h-8 w-16 rounded-full" }
32                        SkeletonBox { class: "h-8 w-16 rounded-full" }
33                        SkeletonBox { class: "h-8 w-20 rounded-full" }
34                    }
35                }
36                div { class: "space-y-2",
37                    SkeletonBox { class: "h-3.5 w-28 rounded" }
38                    SkeletonBox { class: "h-10 w-full rounded-2xl" }
39                }
40            }
41
42            // 沙箱代码编辑器卡片占位
43            div { class: "bg-[var(--color-paper-entry)]/40 rounded-2xl p-6 space-y-4 border border-[var(--color-paper-border)]/70 shadow-xs",
44                div { class: "flex justify-between items-center pb-3 border-b border-[var(--color-paper-border)]/60",
45                    SkeletonBox { class: "h-5 w-24 rounded" }
46                    SkeletonBox { class: "h-8 w-20 rounded-full" }
47                }
48                SkeletonBox { class: "h-64 w-full rounded-2xl" }
49            }
50        }
51    }
52}
yggdrasil/components/skeletons/runner_skeleton.rs

yggdrasil/components/skeletons/
runner_skeleton.rs
