feat(pages): add empty state to tags and tag detail pages

This commit is contained in:
xfy 2026-06-29 13:50:05 +08:00
parent 373498870a
commit 528a79fb83

View File

@ -18,6 +18,7 @@ use crate::api::posts::{get_posts_by_tag, list_tags, PostListResponse, TagListRe
use crate::components::post_card::PostCard; use crate::components::post_card::PostCard;
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton; use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::tags_skeleton::{TagDetailSkeleton, TagsSkeleton}; use crate::components::skeletons::tags_skeleton::{TagDetailSkeleton, TagsSkeleton};
use crate::components::empty_state::EmptyState;
use crate::router::Route; use crate::router::Route;
/// 标签云页面组件,对应路由 `/tags`。 /// 标签云页面组件,对应路由 `/tags`。
@ -49,6 +50,14 @@ fn TagsContent() -> Element {
match tags_data { match tags_data {
Some(Ok(tags)) => { Some(Ok(tags)) => {
if tags.is_empty() {
rsx! {
EmptyState {
title: "暂无标签",
description: "当前还没有任何标签。"
}
}
} else {
let total = tags.iter().map(|t| t.post_count).sum::<i64>(); let total = tags.iter().map(|t| t.post_count).sum::<i64>();
rsx! { rsx! {
div { class: "mt-2 text-base text-paper-secondary", div { class: "mt-2 text-base text-paper-secondary",
@ -74,6 +83,7 @@ fn TagsContent() -> Element {
} }
} }
} }
}
Some(Err(_)) => { Some(Err(_)) => {
rsx! { rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20", "加载失败" } div { class: "text-center text-red-500 dark:text-red-400 py-20", "加载失败" }
@ -116,6 +126,14 @@ fn TagDetailContent(tag: String) -> Element {
match posts_data { match posts_data {
Some(Ok((posts, total))) => { Some(Ok((posts, total))) => {
if posts.is_empty() {
rsx! {
EmptyState {
title: "暂无文章",
description: "该标签下还没有发布任何文章。"
}
}
} else {
rsx! { rsx! {
div { class: "mt-2 text-base text-paper-secondary", div { class: "mt-2 text-base text-paper-secondary",
"" ""
@ -127,6 +145,7 @@ fn TagDetailContent(tag: String) -> Element {
} }
} }
} }
}
Some(Err(_)) => { Some(Err(_)) => {
rsx! { rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20", "加载失败" } div { class: "text-center text-red-500 dark:text-red-400 py-20", "加载失败" }