xfy
519c0ae3a9
将 /admin 路由下硬编码的 Tailwind gray + hex 配色统一迁移到 input.css 定义的 paper-* 主题变量系统，使后台视觉完全对齐前台： - 底色：bg-white → bg-paper-theme（米白，与前台一致） - 卡片/表格：bg-white dark:bg-[#2e2e33] → bg-paper-entry - 主操作按钮（写文章/保存/分页）：bg-gray-900 黑 → bg-paper-accent 鼠尾草绿 - 文字/边框/hover：gray-* + dark:hex → text-paper-*/border-paper-* - 清理 trash 页散落的 #5c7a5e/#7da97f/#e8f0e8 等 hex，路由到变量 - 骨架占位统一复用 ADMIN_* 常量与 SkeletonBox 保留 green/amber/red 状态语义色（通过/待审/删除）与 toggle 白色滑块。 统一采用 bg-paper-* 工具类语法，与 header/post_card 主流写法一致。 dx check + clippy + 402 tests 全通过。
48 lines
1.7 KiB
Rust
48 lines
1.7 KiB
Rust
//! 后台仪表盘骨架屏
|
||
//!
|
||
//! 仅在 AdminLayout 的内容区展示，不包含 Header 与 Footer，
|
||
//! 用于校验登录状态期间保持视觉稳定。
|
||
|
||
use dioxus::prelude::*;
|
||
|
||
use crate::components::skeletons::atoms::SkeletonBox;
|
||
|
||
/// 仪表盘内容区骨架屏组件（不含 header/footer）。
|
||
///
|
||
/// 包含统计卡片、快捷操作按钮与最近文章列表三组占位块。
|
||
#[component]
|
||
pub fn AdminDashboardSkeleton() -> Element {
|
||
rsx! {
|
||
div { class: "space-y-8",
|
||
// 统计卡片骨架
|
||
div { class: "grid grid-cols-1 md:grid-cols-3 gap-6",
|
||
for _ in 0..3 {
|
||
div { class: "rounded-xl bg-paper-entry border border-paper-border p-6 text-center space-y-3",
|
||
SkeletonBox { class: "h-9 w-16 mx-auto rounded" }
|
||
SkeletonBox { class: "h-4 w-20 mx-auto rounded" }
|
||
}
|
||
}
|
||
}
|
||
|
||
// 快捷操作骨架
|
||
div { class: "grid grid-cols-1 md:grid-cols-2 gap-4",
|
||
SkeletonBox { class: "h-12 rounded-full" }
|
||
SkeletonBox { class: "h-12 rounded-full" }
|
||
}
|
||
|
||
// 最近文章列表骨架
|
||
div { class: "space-y-4",
|
||
SkeletonBox { class: "h-6 w-24 rounded" }
|
||
div { class: "space-y-0",
|
||
for _ in 0..5 {
|
||
div { class: "flex justify-between items-center py-3 border-b border-paper-border",
|
||
SkeletonBox { class: "h-4 w-[45%] rounded" }
|
||
SkeletonBox { class: "h-3 w-20 rounded" }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|