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

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

Browse Source
This commit is contained in:
xfy 2026-07-03 17:24:38 +08:00
parent d361bca220
commit 46860f7c41
7 changed files with 73 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/frontend_layout.rs
View File

@ -60,11 +60,7 @@ 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> {} }
}
SuspenseBoundary { fallback: move |_| route_skeleton(&route), Outlet::<Route> {} }
}
Footer {}
}

12
src/pages/about.rs
View File

@ -13,11 +13,13 @@ use dioxus::prelude::*;
#[component]
pub fn About() -> Element {
rsx! {
header { class: "page-header mb-6",
h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "关于" }
}
article { class: "prose dark:prose-invert max-w-none text-paper-content leading-relaxed",
p { "世界……遗忘我……" }
div { class: "animate-page-enter",
header { class: "page-header mb-6",
h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "关于" }
}
article { class: "prose dark:prose-invert max-w-none text-paper-content leading-relaxed",
p { "世界……遗忘我……" }
}
}
}
}

8
src/pages/archives.rs
View File

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

6
src/pages/home.rs
View File

@ -40,8 +40,10 @@ pub fn HomePage(page: i32) -> Element {
let current_page = page.max(1);
rsx! {
HomeInfo {}
HomePosts { current_page }
div { class: "animate-page-enter",
HomeInfo {}
HomePosts { current_page }
}
}
}

2
src/pages/post_detail.rs
View File

@ -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() }
// 如果文章设置了封面图，则渲染封面组件。

88
src/pages/search.rs
View File

@ -44,53 +44,55 @@ pub fn Search() -> Element {
};
rsx! {
header { class: "page-header mb-6",
h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "搜索" }
}
div { class: "mb-8",
div { class: "flex gap-2",
input {
class: "flex-1 px-4 py-2 border border-paper-border rounded-lg bg-paper-entry text-paper-primary placeholder:text-paper-tertiary focus:outline-none focus:border-paper-accent focus:ring-1 focus:ring-paper-accent/30",
r#type: "text",
placeholder: "输入关键词搜索文章...",
value: query(),
oninput: move |e| query.set(e.value()),
onkeydown: move |e| {
if e.key() == Key::Enter {
on_search()
}
},
}
button {
class: "px-6 py-2 bg-paper-accent text-white rounded-full font-medium hover:brightness-110 active:scale-[0.98] transition-all duration-200",
onclick: move |_| on_search(),
"搜索"
div { class: "animate-page-enter",
header { class: "page-header mb-6",
h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "搜索" }
}
div { class: "mb-8",
div { class: "flex gap-2",
input {
class: "flex-1 px-4 py-2 border border-paper-border rounded-lg bg-paper-entry text-paper-primary placeholder:text-paper-tertiary focus:outline-none focus:border-paper-accent focus:ring-1 focus:ring-paper-accent/30",
r#type: "text",
placeholder: "输入关键词搜索文章...",
value: query(),
oninput: move |e| query.set(e.value()),
onkeydown: move |e| {
if e.key() == Key::Enter {
on_search()
}
},
}
button {
class: "px-6 py-2 bg-paper-accent text-white rounded-full font-medium hover:brightness-110 active:scale-[0.98] transition-all duration-200",
onclick: move |_| on_search(),
"搜索"
}
}
}
}
// 根据搜索状态展示骨架屏、结果列表、空状态或错误提示。
if is_searching() {
DelayedSkeleton { SearchSkeleton {} }
} else if let Some(Ok(PostListResponse { posts, total: _ })) = search_res() {
if posts.is_empty() {
EmptyState {
title: "未找到相关文章",
description: "换个关键词再试一次吧",
// 根据搜索状态展示骨架屏、结果列表、空状态或错误提示。
if is_searching() {
DelayedSkeleton { SearchSkeleton {} }
} else if let Some(Ok(PostListResponse { posts, total: _ })) = search_res() {
if posts.is_empty() {
EmptyState {
title: "未找到相关文章",
description: "换个关键词再试一次吧",
}
} else {
for post in posts.iter() {
PostCard { key: "{post.id}", post: post.clone() }
}
}
} 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 {
for post in posts.iter() {
PostCard { key: "{post.id}", post: post.clone() }
}
}
} 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",
img {
class: "w-56 h-auto rounded-lg select-none dark:brightness-90",
src: "/images/xiantiaoxiaogou_02.webp",
alt: "空状态提示",
draggable: "false",
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",
alt: "空状态提示",
draggable: "false",
}
}
}
}

16
src/pages/tags.rs
View File

@ -27,10 +27,12 @@ use crate::router::Route;
#[component]
pub fn Tags() -> Element {
rsx! {
header { class: "page-header mb-6",
h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "标签" }
div { class: "animate-page-enter",
header { class: "page-header mb-6",
h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "标签" }
}
TagsContent {}
}
TagsContent {}
}
}
@ -105,10 +107,12 @@ fn TagsContent() -> Element {
#[component]
pub fn TagDetail(tag: String) -> Element {
rsx! {
header { class: "page-header mb-6",
h1 { class: "text-4xl font-bold text-paper-primary tracking-tight", "{tag}" }
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() }
}
TagDetailContent { tag: tag.clone() }
}
}