feat(header): 搜索入口改为图标按钮
将前台 Header 文本导航中的「搜索」项移除,改在 Header 右侧(主题切换按钮 左边)以放大镜图标 Link 呈现。样式与 ThemeToggle 对齐(圆形 padding、 currentColor 图标),适配明暗主题。 - nav.rs: 导航项列表去掉 Search,更新文档注释 - header.rs: 新增 SearchIconLink 组件(SVG 内联,fill=currentColor) - frontend_layout.rs: right_content 在 ThemeToggle 前插入 SearchIconLink
This commit is contained in:
parent
fac247f60a
commit
3831d1af01
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 376 B |
@ -6,7 +6,7 @@
|
|||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
use crate::components::footer::Footer;
|
use crate::components::footer::Footer;
|
||||||
use crate::components::header::Header;
|
use crate::components::header::{Header, SearchIconLink};
|
||||||
use crate::components::nav::use_nav_items;
|
use crate::components::nav::use_nav_items;
|
||||||
use crate::components::skeletons::archive_skeleton::ArchiveSkeleton;
|
use crate::components::skeletons::archive_skeleton::ArchiveSkeleton;
|
||||||
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
|
use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
|
||||||
@ -56,6 +56,7 @@ pub fn FrontendLayout() -> Element {
|
|||||||
max_width: "max-w-4xl",
|
max_width: "max-w-4xl",
|
||||||
nav_items,
|
nav_items,
|
||||||
right_content: rsx! {
|
right_content: rsx! {
|
||||||
|
SearchIconLink {}
|
||||||
ThemeToggle {}
|
ThemeToggle {}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -170,3 +170,30 @@ fn MobileNavItem(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// 搜索图标链接:置于 Header 右侧(主题切换左边),点击跳转搜索页。
|
||||||
|
///
|
||||||
|
/// 样式与 `ThemeToggle` 对齐(圆形 padding + currentColor 图标),保持右侧
|
||||||
|
/// 图标组视觉一致。SVG 来自 `public/icons/search_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg`,
|
||||||
|
/// 改用 `fill: "currentColor"` 以适配明暗主题。
|
||||||
|
#[component]
|
||||||
|
pub fn SearchIconLink() -> Element {
|
||||||
|
rsx! {
|
||||||
|
Link {
|
||||||
|
class: "p-2 rounded-full text-paper-secondary hover:text-paper-accent transition-colors duration-200",
|
||||||
|
to: Route::Search {},
|
||||||
|
aria_label: "搜索",
|
||||||
|
title: "搜索",
|
||||||
|
svg {
|
||||||
|
xmlns: "http://www.w3.org/2000/svg",
|
||||||
|
height: "24px",
|
||||||
|
view_box: "0 -960 960 960",
|
||||||
|
width: "24px",
|
||||||
|
fill: "currentColor",
|
||||||
|
path {
|
||||||
|
d: "M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -10,7 +10,8 @@ use crate::router::Route;
|
|||||||
/// 参数:
|
/// 参数:
|
||||||
/// - `route`:当前路由
|
/// - `route`:当前路由
|
||||||
///
|
///
|
||||||
/// 返回:包含首页、归档、标签、搜索、关于的导航配置数组。
|
/// 返回:包含首页、归档、标签、关于的导航配置数组。
|
||||||
|
/// 搜索以图标形式置于 Header 右侧(主题切换左边),不在此文本导航中。
|
||||||
pub fn use_nav_items(route: Route) -> Vec<NavItemConfig> {
|
pub fn use_nav_items(route: Route) -> Vec<NavItemConfig> {
|
||||||
vec![
|
vec![
|
||||||
NavItemConfig {
|
NavItemConfig {
|
||||||
@ -28,11 +29,6 @@ pub fn use_nav_items(route: Route) -> Vec<NavItemConfig> {
|
|||||||
label: "标签",
|
label: "标签",
|
||||||
is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }),
|
is_active: matches!(route, Route::Tags {}) || matches!(route, Route::TagDetail { .. }),
|
||||||
},
|
},
|
||||||
NavItemConfig {
|
|
||||||
route: Route::Search {},
|
|
||||||
label: "搜索",
|
|
||||||
is_active: matches!(route, Route::Search {}),
|
|
||||||
},
|
|
||||||
NavItemConfig {
|
NavItemConfig {
|
||||||
route: Route::About {},
|
route: Route::About {},
|
||||||
label: "关于",
|
label: "关于",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user