yggdrasil/components/skeletons/
post_preview_skeleton.rs

1//! 草稿/文章预览页骨架屏
2//!
3//! 镜像 `/admin/preview/:slug`（[`crate::pages::admin::preview::PostPreview`]）的真实结构。
4//! 与公开文章详情页骨架屏（[`crate::components::skeletons::post_detail_skeleton::PostDetailSkeleton`]）的唯一差异：顶部多一组预览横幅占位
5//! （状态徽章 + 继续编辑 / 返回列表按钮），其余标题/摘要/元信息/封面/正文/页脚占位一致。
6//!
7//! 同时服务于两处加载态，保证视觉连续：
8//! - [`crate::components::admin_layout`] 登录态校验期（避免落入默认的仪表盘骨架屏）。
9//! - [`crate::pages::admin::preview::PostPreview`] 内 `use_server_future` 取数 pending 期。
10
11use crate::components::skeletons::atoms::SkeletonBox;
12use crate::components::skeletons::post_detail_skeleton::PostDetailBody;
13use dioxus::prelude::*;
14
15/// 草稿/文章预览页骨架屏组件。
16///
17/// 结构（与真实页面逐段对应）：预览横幅 + 与 [`PostDetailSkeleton`] 共享的正文
18/// （面包屑/标题/摘要/元信息/封面图/正文(多段)/页脚占位，见 [`PostDetailBody`]）。
19///
20/// [`PostDetailSkeleton`]: crate::components::skeletons::post_detail_skeleton::PostDetailSkeleton
21#[component]
22pub fn PostPreviewSkeleton() -> Element {
23    rsx! {
24        // w-full：admin_layout 登录校验期会把骨架屏挂进 div.flex.flex-col 包裹层，
25        // 此时 article 作为 flex item，其 margin:auto(来自 .post-single)会禁用 stretch、
26        // 无显式宽度则 shrink-to-fit 收缩变窄。w-full 强制撑满交叉轴，与真实文章
27        // (直接挂 main block 下、自然满宽)几何对齐。其他后台骨架屏根节点同理用 w-full。
28        article { class: "post-single w-full",
29            // 预览横幅占位：左侧「预览模式」文字 + 状态徽章，右侧继续编辑 / 返回列表两枚按钮。
30            // 类名与 preview.rs 真实横幅一致，确保占位与真实元素几何对齐。
31            div { class: "flex flex-wrap items-center justify-between gap-3 mb-6 p-3 rounded-2xl bg-[var(--color-paper-entry)] border border-[var(--color-paper-border)]",
32                div { class: "flex items-center gap-2",
33                    SkeletonBox { class: "h-4 w-16 rounded" }
34                    SkeletonBox { class: "h-5 w-14 rounded-full" }
35                }
36                div { class: "flex items-center gap-2",
37                    SkeletonBox { class: "h-9 w-24 rounded-full" }
38                    SkeletonBox { class: "h-9 w-20 rounded-full" }
39                }
40            }
41
42            PostDetailBody {}
43        }
44    }
45}
yggdrasil/components/skeletons/post_preview_skeleton.rs

yggdrasil/components/skeletons/
post_preview_skeleton.rs
