From 4fbc9384221669b3b28d341f3125fcbdb2e1b90f Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Thu, 4 Jun 2026 15:47:21 +0800
Subject: [PATCH] refactor: migrate tags_skeleton and admin_skeleton to
 SkeletonBox

---
 src/components/admin_skeleton.rs | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/admin_skeleton.rs b/src/components/admin_skeleton.rs
index e5b4afb..1f5caf1 100644
--- a/src/components/admin_skeleton.rs
+++ b/src/components/admin_skeleton.rs
@@ -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" }
                 }
             }
         }