fix(ui): apply mount animation inside each page component to avoid skeleton interception

src/components/frontend_layout.rs

@@ -60,12 +60,8 @@ pub fn FrontendLayout() -> Element {
                 },
             }
             main { class: "flex-1 w-full max-w-4xl mx-auto px-6 py-6 md:py-12 overflow-hidden",
-                div {
-                    key: "{route}",
-                    class: "animate-page-enter",
                 SuspenseBoundary { fallback: move |_| route_skeleton(&route), Outlet::<Route> {} }
             }
-            }
             Footer {}
         }
     }

src/pages/about.rs

@@ -13,6 +13,7 @@ use dioxus::prelude::*;
 #[component]
 pub fn About() -> Element {
     rsx! {
+        div { class: "animate-page-enter",
             header { class: "page-header mb-6",
                 h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "关于" }
             }
@@ -21,3 +22,4 @@ pub fn About() -> Element {
             }
         }
     }
+}

src/pages/archives.rs

@@ -101,12 +101,14 @@ fn group_posts(posts: &[PostListItem]) -> Vec<YearGroup> {
 #[component]
 pub fn Archives() -> Element {
     rsx! {
+        div { class: "animate-page-enter",
             header { class: "page-header mb-6",
                 h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "归档" }
             }
             ArchivesContent {}
         }
     }
+}
 
 /// 归档页面内容组件。
 ///

src/pages/home.rs

@@ -40,10 +40,12 @@ pub fn HomePage(page: i32) -> Element {
     let current_page = page.max(1);
 
     rsx! {
+        div { class: "animate-page-enter",
             HomeInfo {}
             HomePosts { current_page }
         }
     }
+}
 
 /// 首页文章列表与分页展示组件。
 ///

src/pages/post_detail.rs

@@ -41,7 +41,7 @@ pub fn PostDetail(slug: String) -> Element {
     match post_data {
         Some(Ok(post)) => {
             rsx! {
-                article { class: "post-single", key: "{post.slug}",
+                article { class: "post-single animate-page-enter", key: "{post.slug}",
                     PostHeader { post: post.clone() }
 
                     // 如果文章设置了封面图，则渲染封面组件。

src/pages/search.rs

@@ -44,6 +44,7 @@ pub fn Search() -> Element {
     };
 
     rsx! {
+        div { class: "animate-page-enter",
             header { class: "page-header mb-6",
                 h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "搜索" }
             }
@@ -85,7 +86,7 @@ pub fn Search() -> Element {
             } else if search_res().as_ref().map(|r| r.is_err()).unwrap_or(false) {
                 div { class: "text-center text-red-500 dark:text-red-400 py-20", "搜索失败" }
             } else {
-            div { class: "flex flex-col items-center justify-center mt-24 mb-12 page-enter",
+                div { class: "flex flex-col items-center justify-center mt-24 mb-12",
                     img {
                         class: "w-56 h-auto rounded-lg select-none dark:brightness-90",
                         src: "/images/xiantiaoxiaogou_02.webp",
@@ -96,3 +97,4 @@ pub fn Search() -> Element {
             }
         }
     }
+}

src/pages/tags.rs

@@ -27,12 +27,14 @@ use crate::router::Route;
 #[component]
 pub fn Tags() -> Element {
     rsx! {
+        div { class: "animate-page-enter",
             header { class: "page-header mb-6",
                 h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "标签" }
             }
             TagsContent {}
         }
     }
+}
 
 /// 标签云内容组件。
 ///
@@ -105,12 +107,14 @@ fn TagsContent() -> Element {
 #[component]
 pub fn TagDetail(tag: String) -> Element {
     rsx! {
+        div { class: "animate-page-enter",
             header { class: "page-header mb-6",
                 h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "{tag}" }
             }
             TagDetailContent { tag: tag.clone() }
         }
     }
+}
 
 /// 标签详情内容组件。
 ///