xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate tags_skeleton and admin_skeleton to SkeletonBox

Browse Source
This commit is contained in:
xfy 2026-06-04 15:47:21 +08:00
parent 6ed12ff1cb
commit 4fbc938422
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/admin_skeleton.rs
View File

@ -1,5 +1,7 @@
use dioxus::prelude::*;
use crate::components::skeletons::atoms::SkeletonBox;
/// 仅仪表盘内容区骨架（不含 header/footer）
#[component]
pub fn AdminDashboardSkeleton() -> Element {
@ -9,26 +11,26 @@ pub fn AdminDashboardSkeleton() -> Element {
div { class: "grid grid-cols-1 md:grid-cols-3 gap-6",
for _ in 0..3 {
div { class: "rounded-xl bg-white dark:bg-[#2e2e33] border border-gray-200 dark:border-[#333] p-6 text-center space-y-3",
div { class: "h-9 w-16 mx-auto bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
div { class: "h-4 w-20 mx-auto bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
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",
div { class: "h-12 bg-gray-200 dark:bg-[#2a2a2a] rounded-full animate-pulse" }
div { class: "h-12 bg-gray-200 dark:bg-[#2a2a2a] rounded-full animate-pulse" }
SkeletonBox { class: "h-12 rounded-full" }
SkeletonBox { class: "h-12 rounded-full" }
}
// 最近文章列表骨架
div { class: "space-y-4",
div { class: "h-6 w-24 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
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-gray-100 dark:border-[#333]",
div { class: "h-4 w-[45%] bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
div { class: "h-3 w-20 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
SkeletonBox { class: "h-4 w-[45%] rounded" }
SkeletonBox { class: "h-3 w-20 rounded" }
}
}
}
@ -46,15 +48,15 @@ pub fn AdminSkeleton() -> Element {
header { class: "sticky top-0 z-40 w-full border-b border-gray-200 dark:border-[#333] bg-white/80 dark:bg-[#1d1e20]/80 backdrop-blur-sm",
nav { class: "max-w-3xl mx-auto px-6 h-[60px] flex items-center justify-between",
// Logo 占位
div { class: "w-32 h-7 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
SkeletonBox { class: "w-32 h-7 rounded" }
// 导航项 + 右侧按钮占位
div { class: "flex items-center gap-4",
div { class: "hidden md:flex items-center gap-2",
div { class: "w-12 h-5 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
div { class: "w-12 h-5 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
div { class: "w-10 h-5 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
SkeletonBox { class: "w-12 h-5 rounded" }
SkeletonBox { class: "w-12 h-5 rounded" }
SkeletonBox { class: "w-10 h-5 rounded" }
}
div { class: "w-10 h-5 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
SkeletonBox { class: "w-10 h-5 rounded" }
}
}
}
@ -67,8 +69,8 @@ pub fn AdminSkeleton() -> Element {
// Footer 骨架
footer { class: "w-full border-t border-gray-200 dark:border-[#333] py-6",
div { class: "max-w-3xl mx-auto px-6 flex justify-between items-center",
div { class: "h-4 w-32 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
div { class: "h-4 w-24 bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse" }
SkeletonBox { class: "h-4 w-32 rounded" }
SkeletonBox { class: "h-4 w-24 rounded" }
}
}
}