xfy
45f4e9cde0
跟随 Catppuccin 配色迁移，清理 src/ 中绕过 paper-* 语义 token 的 硬编码 dark:[#hex] 任意值，改用 Tailwind 默认灰阶（gray-700/800）， 它们随主题切换自然适配。 - post.rs 状态徽章：dark:bg-[#333]/dark:text-[#9b9c9d] → gray-800/gray-400/500 （同步更新测试断言） - comments/* 与 skeletons/* 的 dark:[#2a2a2a]/[#2e2e33]/[#333]/[#5a5a62] → 对应 gray-600/700/800 - trash.rs 状态灯发光圈 rgba 由旧鼠尾草绿(92,122,94) 改 Latte green(64,160,43) - ui.rs BTN_SECONDARY 注释更新为新 Teal 强调色值 注：src/pages/admin/posts.rs 的 clippy redundant_closure 报错为既有问题， 与本次配色迁移无关，不在范围内。
61 lines
2.3 KiB
Rust
61 lines
2.3 KiB
Rust
//! 文章详情页骨架屏
|
|
//!
|
|
//! 在文章详情数据加载期间展示面包屑、标题、摘要、元信息、封面与正文占位。
|
|
|
|
use crate::components::skeletons::atoms::*;
|
|
use dioxus::prelude::*;
|
|
|
|
/// 文章详情页骨架屏组件。
|
|
///
|
|
/// 结构：面包屑 + 标题(h1) + 摘要 + 元信息 + 封面图 + 正文(多段) + 页脚占位。
|
|
#[component]
|
|
pub fn PostDetailSkeleton() -> Element {
|
|
rsx! {
|
|
article { class: "post-single",
|
|
// 面包屑占位
|
|
SkeletonBox { class: "h-4 w-48 rounded mb-6" }
|
|
|
|
// 标题占位 (模拟 h1)
|
|
SkeletonBox { class: "h-10 w-4/5 rounded mb-4" }
|
|
|
|
// 摘要占位
|
|
SkeletonBox { class: "h-5 w-2/3 rounded mb-4" }
|
|
|
|
// 元信息行 (作者 · 日期 · 阅读时间)
|
|
div { class: "flex items-center gap-2 mb-8",
|
|
SkeletonBox { class: "h-4 w-16 rounded" }
|
|
SkeletonBox { class: "h-4 w-1 rounded" }
|
|
SkeletonBox { class: "h-4 w-24 rounded" }
|
|
SkeletonBox { class: "h-4 w-1 rounded" }
|
|
SkeletonBox { class: "h-4 w-20 rounded" }
|
|
}
|
|
|
|
// 封面图占位 (模拟 PostCover 16:9 比例)
|
|
SkeletonBox { class: "w-full aspect-video rounded-lg mb-8" }
|
|
|
|
// 正文段落占位 (模拟多段 PostContent)
|
|
div { class: "space-y-4 mb-8",
|
|
SkeletonBox { class: "h-4 w-full rounded" }
|
|
SkeletonBox { class: "h-4 w-full rounded" }
|
|
SkeletonBox { class: "h-4 w-5/6 rounded" }
|
|
SkeletonBox { class: "h-4 w-full rounded" }
|
|
SkeletonBox { class: "h-4 w-full rounded" }
|
|
SkeletonBox { class: "h-4 w-3/4 rounded" }
|
|
// 空行模拟段落间距
|
|
div { class: "h-2" }
|
|
SkeletonBox { class: "h-4 w-full rounded" }
|
|
SkeletonBox { class: "h-4 w-full rounded" }
|
|
SkeletonBox { class: "h-4 w-2/3 rounded" }
|
|
}
|
|
|
|
// PostFooter 占位
|
|
div { class: "border-t border-gray-200 dark:border-gray-700 pt-6 mt-8",
|
|
div { class: "flex items-center justify-between",
|
|
SkeletonBox { class: "h-4 w-32 rounded" }
|
|
SkeletonBox { class: "h-4 w-24 rounded" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|