yggdrasil/components/
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",
19            // 两栏容器:与真实页面一致,左 flex-1 + 右 w-80
20            div { class: "flex-1 min-h-0 flex",
21                // 左栏(主写作区)
22                div { class: "flex-1 min-w-0 min-h-0 overflow-y-auto px-6 py-8 flex flex-col",
23                    // 标题输入
24                    SkeletonBox { class: "h-10 w-3/4 rounded-lg" }
25
26                    // 编辑器区域:flex-1 撑满左栏剩余高度
27                    div { class: "flex-1 min-h-[400px] flex flex-col my-4",
28                        div { class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-2xl overflow-hidden bg-[var(--color-paper-entry)] shadow-sm p-4",
29                            // 工具栏
30                            div { class: "flex gap-2 pb-3 border-b border-[var(--color-paper-border)]",
31                                for _ in 0..8 {
32                                    SkeletonBox { class: "w-8 h-8 rounded" }
33                                }
34                            }
35                            // 正文占位行
36                            div { class: "space-y-3 pt-4",
37                                SkeletonBox { class: "h-4 w-[90%] rounded" }
38                                SkeletonBox { class: "h-4 w-full rounded" }
39                                SkeletonBox { class: "h-4 w-[85%] rounded" }
40                                SkeletonBox { class: "h-4 w-[95%] rounded" }
41                                SkeletonBox { class: "h-4 w-[60%] rounded" }
42                                SkeletonBox { class: "h-4 w-full rounded" }
43                                SkeletonBox { class: "h-4 w-[75%] rounded" }
44                            }
45                        }
46                    }
47                }
48
49                // 右栏(侧边栏):w-80 border-l,分节式
50                div { class: "w-80 flex-shrink-0 min-h-0 overflow-y-auto border-l border-[var(--color-paper-border)] flex flex-col",
51                    // 链接节
52                    div { class: "p-6 border-b border-[var(--color-paper-border)]",
53                        SkeletonBox { class: "h-3 w-10 rounded mb-3" }
54                        SkeletonBox { class: "h-8 w-full rounded-2xl" }
55                    }
56                    // 标签节
57                    div { class: "p-6 border-b border-[var(--color-paper-border)]",
58                        SkeletonBox { class: "h-3 w-10 rounded mb-3" }
59                        SkeletonBox { class: "h-8 w-full rounded-2xl" }
60                    }
61                    // 摘要节
62                    div { class: "p-6 border-b border-[var(--color-paper-border)]",
63                        SkeletonBox { class: "h-3 w-10 rounded mb-3" }
64                        SkeletonBox { class: "h-16 w-full rounded-2xl" }
65                    }
66                    // 封面图节
67                    div { class: "p-6",
68                        SkeletonBox { class: "h-3 w-12 rounded mb-3" }
69                        SkeletonBox { class: "h-14 w-full rounded-2xl" }
70                    }
71                }
72            }
73
74            // 底部操作栏:与真实页面 px-6 py-4 border-t 一致
75            div { class: "flex-shrink-0 px-6 py-4 flex items-center gap-4 border-t border-[var(--color-paper-border)]",
76                SkeletonBox { class: "h-9 w-[56px] rounded-full" }
77                div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
78                SkeletonBox { class: "h-9 w-[96px] rounded-full" }
79                div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
80                SkeletonBox { class: "h-9 w-[72px] rounded-full" }
81            }
82        }
83    }
84}
yggdrasil/components/write_skeleton.rs

yggdrasil/components/
write_skeleton.rs
