yggdrasil/components/skeletons/
write_skeleton.rs

1//! 文章编辑器页骨架屏
2//!
3//! 在写文章/编辑文章页面加载时展示，镜像 Write 页面的左右两栏结构：
4//! 左栏(标题+编辑器) + 右栏(链接/标签/摘要/封面) + 底部操作栏。
5
6use crate::components::skeletons::atoms::*;
7use dioxus::prelude::*;
8
9/// 文章编辑器页骨架屏组件。
10///
11/// 镜像 Write 页面的左右两栏布局：左栏主写作区(标题、编辑器)，
12/// 右栏侧边栏(链接、标签、摘要、封面图)，底部贴底操作栏。
13#[component]
14pub fn WriteSkeleton() -> Element {
15    rsx! {
16        // 根:父层是 flex 容器(write.rs 覆盖层 / admin_layout 包裹层均为 flex flex-col),
17        // 用 flex-1 撑满父层高度(比 height:100% 更可靠,不依赖父显式 height)。
18        div { class: "relative flex-1 flex flex-col min-h-0 overflow-hidden bg-[var(--color-paper-theme)]",
19            // 顶部工具条骨架
20            div { class: "flex-shrink-0 px-6 py-3 border-b border-[var(--color-paper-border)]/60 flex items-center justify-between gap-4 select-none",
21                div { class: "flex items-center gap-3",
22                    SkeletonBox { class: "h-7 w-20 rounded-full" }
23                    div { class: "w-px h-4 bg-[var(--color-paper-border)]/60" }
24                    SkeletonBox { class: "h-5 w-24 rounded-md" }
25                    SkeletonBox { class: "h-4 w-10 rounded-full" }
26                }
27                div { class: "hidden md:flex items-center gap-3",
28                    SkeletonBox { class: "h-4 w-28 rounded" }
29                }
30                SkeletonBox { class: "h-7 w-20 rounded-full" }
31            }
32
33            // 两栏容器：与真实页面一致，左 flex-1 + 右 w-80
34            div { class: "flex-1 min-h-0 flex",
35                // 左栏 (主写作区)
36                div { class: "flex-1 min-w-0 min-h-0 overflow-y-auto px-6 sm:px-10 md:px-14 py-8 flex flex-col items-center",
37                    div { class: "w-full max-w-4xl flex-1 flex flex-col",
38                        // 标题输入骨架
39                        SkeletonBox { class: "h-12 w-3/4 rounded-xl mb-4" }
40
41                        // 编辑器区域骨架
42                        div { class: "flex-1 min-h-[480px] flex flex-col mb-4",
43                            div { class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)]/70 rounded-2xl overflow-hidden bg-[var(--color-paper-entry)]/40 p-6 space-y-4 shadow-xs",
44                                SkeletonBox { class: "h-5 w-[90%] rounded-md" }
45                                SkeletonBox { class: "h-5 w-full rounded-md" }
46                                SkeletonBox { class: "h-5 w-[85%] rounded-md" }
47                                SkeletonBox { class: "h-5 w-[95%] rounded-md" }
48                                SkeletonBox { class: "h-5 w-[60%] rounded-md" }
49                                SkeletonBox { class: "h-5 w-full rounded-md" }
50                                SkeletonBox { class: "h-5 w-[75%] rounded-md" }
51                            }
52                        }
53                    }
54                }
55
56                // 右栏 (侧边栏)
57                div { class: "w-80 sm:w-88 flex-shrink-0 min-h-0 overflow-y-auto border-l border-[var(--color-paper-border)]/70 flex flex-col bg-[var(--color-paper-theme)]",
58                    // 侧栏标题栏
59                    div { class: "px-5 py-4 border-b border-[var(--color-paper-border)]/60 flex items-center justify-between",
60                        SkeletonBox { class: "h-4 w-20 rounded" }
61                        SkeletonBox { class: "h-4 w-4 rounded" }
62                    }
63                    // 链接节
64                    div { class: "p-5 border-b border-[var(--color-paper-border)]/60 space-y-2.5",
65                        SkeletonBox { class: "h-3 w-16 rounded" }
66                        SkeletonBox { class: "h-8 w-full rounded-2xl" }
67                    }
68                    // 标签节
69                    div { class: "p-5 border-b border-[var(--color-paper-border)]/60 space-y-2.5",
70                        SkeletonBox { class: "h-3 w-16 rounded" }
71                        SkeletonBox { class: "h-8 w-full rounded-2xl" }
72                    }
73                    // 摘要节
74                    div { class: "p-5 border-b border-[var(--color-paper-border)]/60 space-y-2.5",
75                        SkeletonBox { class: "h-3 w-16 rounded" }
76                        SkeletonBox { class: "h-20 w-full rounded-2xl" }
77                    }
78                    // 封面图节
79                    div { class: "p-5 space-y-2.5",
80                        SkeletonBox { class: "h-3 w-16 rounded" }
81                        SkeletonBox { class: "h-14 w-full rounded-2xl" }
82                    }
83                }
84            }
85
86            // 底部操作栏
87            div { class: "flex-shrink-0 px-6 py-3.5 flex items-center justify-between border-t border-[var(--color-paper-border)]/80 bg-[var(--color-paper-theme)] shadow-xs",
88                SkeletonBox { class: "h-9 w-24 rounded-full" }
89                div { class: "flex items-center gap-3",
90                    SkeletonBox { class: "h-9 w-28 rounded-full" }
91                    div { class: "w-px h-5 bg-[var(--color-paper-border)]/60" }
92                    SkeletonBox { class: "h-9 w-24 rounded-full" }
93                }
94            }
95        }
96    }
97}
yggdrasil/components/skeletons/write_skeleton.rs

yggdrasil/components/skeletons/
write_skeleton.rs
