Compare commits

..

9 Commits

4 changed files with 66 additions and 30 deletions

View File

@ -334,6 +334,12 @@
height: auto;
}
.dark .md-content img:not(.blur-img-placeholder):not(.blur-img-full),
.dark .md-content .blur-img,
.dark .lightbox-img {
filter: brightness(0.9);
}
.md-content-img-zoomable {
cursor: zoom-in;
transition: opacity 0.2s ease-out;
@ -628,10 +634,6 @@
background: transparent;
}
/* 暗色模式灰底 */
.dark .blur-img {
background: var(--color-paper-code-bg, #2a2a2a);
}
}
@keyframes fadeIn {

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -12,6 +12,7 @@ use dioxus::prelude::*;
use crate::api::posts::{search_posts, PostListResponse};
use crate::components::post_card::PostCard;
use crate::components::empty_state::EmptyState;
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::search_skeleton::SearchSkeleton;
@ -72,7 +73,10 @@ pub fn Search() -> Element {
DelayedSkeleton { SearchSkeleton {} }
} else if let Some(Ok(PostListResponse { posts, total: _ })) = search_res() {
if posts.is_empty() {
div { class: "text-center text-paper-secondary py-20", "未找到相关文章" }
EmptyState {
title: "未找到相关文章",
description: "换个关键词再试一次吧",
}
} else {
for post in posts.iter() {
PostCard { key: "{post.id}", post: post.clone() }
@ -80,6 +84,15 @@ 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",
img {
class: "w-56 h-auto rounded-lg select-none dark:brightness-90",
src: "/images/xiantiaoxiaogou_02.webp",
alt: "空状态提示",
draggable: "false",
}
}
}
}
}

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::skeletons::delayed_skeleton::DelayedSkeleton;
use crate::components::skeletons::tags_skeleton::{TagDetailSkeleton, TagsSkeleton};
use crate::components::empty_state::EmptyState;
use crate::router::Route;
/// 标签云页面组件,对应路由 `/tags`。
@ -49,25 +50,34 @@ fn TagsContent() -> Element {
match tags_data {
Some(Ok(tags)) => {
let total = tags.iter().map(|t| t.post_count).sum::<i64>();
rsx! {
div { class: "mt-2 text-base text-paper-secondary",
""
span { class: "font-medium text-paper-primary", "{tags.len()}" }
" 个标签,"
span { class: "font-medium text-paper-primary", "{total}" }
" 篇文章"
if tags.is_empty() {
rsx! {
EmptyState {
title: "暂无标签",
description: "当前还没有任何标签。"
}
}
ul { class: "flex flex-wrap gap-4 mt-6",
for tag in tags {
li { key: "{tag.name}",
Link {
class: "inline-flex items-center px-3 py-1.5 text-base font-medium bg-paper-accent-soft text-paper-accent rounded-lg hover:bg-paper-accent hover:text-white transition-all duration-200",
to: Route::TagDetail {
tag: tag.name.clone(),
},
"{tag.name}"
sup { class: "ml-1 text-sm text-paper-secondary", "{tag.post_count}" }
} else {
let total = tags.iter().map(|t| t.post_count).sum::<i64>();
rsx! {
div { class: "mt-2 text-base text-paper-secondary",
""
span { class: "font-medium text-paper-primary", "{tags.len()}" }
" 个标签,"
span { class: "font-medium text-paper-primary", "{total}" }
" 篇文章"
}
ul { class: "flex flex-wrap gap-4 mt-6",
for tag in tags {
li { key: "{tag.name}",
Link {
class: "inline-flex items-center px-3 py-1.5 text-base font-medium bg-paper-accent-soft text-paper-accent rounded-lg hover:bg-paper-accent hover:text-white transition-all duration-200",
to: Route::TagDetail {
tag: tag.name.clone(),
},
"{tag.name}"
sup { class: "ml-1 text-sm text-paper-secondary", "{tag.post_count}" }
}
}
}
}
@ -116,14 +126,25 @@ fn TagDetailContent(tag: String) -> Element {
match posts_data {
Some(Ok((posts, total))) => {
rsx! {
div { class: "mt-2 text-base text-paper-secondary",
""
span { class: "font-medium text-paper-primary", "{total}" }
" 篇文章"
if posts.is_empty() {
rsx! {
EmptyState {
title: "暂无文章",
description: "该标签下还没有发布任何文章。"
}
}
for post in posts.iter() {
PostCard { key: "{post.id}", post: post.clone() }
} else {
rsx! {
div { class: "mt-2 mb-8 text-base text-paper-secondary",
""
span { class: "font-medium text-paper-primary", "{total}" }
" 篇文章"
}
div { class: "mt-8",
for post in posts.iter() {
PostCard { key: "{post.id}", post: post.clone() }
}
}
}
}
}