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

fix(layout): 后台导航栏与正文宽度对齐

Browse Source 
Header 的导航宽度写死 max-w-3xl（前台阅读宽度），后台直接复用导致
导航栏(768px)比正文(max-w-5xl=1024px)窄 256px，左边缘错位。

给 Header 加 max_width prop（默认 max-w-3xl 保持前台行为不变），后台
两处调用点传 max-w-5xl，与 admin_layout 的 main 同宽对齐。
This commit is contained in:
xfy 2026-07-01 15:52:49 +08:00
parent 7de97d8222
commit 3faff98dc8
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/admin_layout.rs
View File

@ -118,7 +118,7 @@ pub fn AdminLayout() -> Element {
(true, Some(_)) => { (true, Some(_)) => {
rsx! { rsx! {
div { class: "{root_class}", div { class: "{root_class}",
Header { nav_items: admin_nav_items, right_content } Header { nav_items: admin_nav_items, right_content, max_width: "max-w-5xl" }
main { class: "{main_class}", Outlet::<Route> {} } main { class: "{main_class}", Outlet::<Route> {} }
Footer {} Footer {}
} }
@ -137,7 +137,7 @@ pub fn AdminLayout() -> Element {
// 使用与真实布局完全相同的结构包裹内容骨架，避免 checked 变化时的布局闪烁 // 使用与真实布局完全相同的结构包裹内容骨架，避免 checked 变化时的布局闪烁
rsx! { rsx! {
div { class: "{root_class}", div { class: "{root_class}",
Header { nav_items: admin_nav_items, right_content } Header { nav_items: admin_nav_items, right_content, max_width: "max-w-5xl" }
main { class: "{main_class}", main { class: "{main_class}",
div { class: if show_skeleton() { "" } else { "opacity-0" }, div { class: if show_skeleton() { "" } else { "opacity-0" },
{ {

10
src/components/header.rs
View File

@ -29,14 +29,20 @@ pub struct NavItemConfig {
/// Props： /// Props：
/// - `nav_items`：导航项列表 /// - `nav_items`：导航项列表
/// - `right_content`：右侧自定义内容（如主题切换、登出按钮） /// - `right_content`：右侧自定义内容（如主题切换、登出按钮）
/// - `max_width`：内部导航的宽度类，需与正文 `max-w-*` 一致以保证左右边缘对齐。
/// 默认 `max-w-3xl`（前台阅读宽度）；后台传 `max-w-5xl` 与之同宽。
#[component] #[component]
pub fn Header(nav_items: Vec<NavItemConfig>, right_content: Element) -> Element { pub fn Header(
nav_items: Vec<NavItemConfig>,
right_content: Element,
#[props(default = "max-w-3xl")] max_width: &'static str,
) -> Element {
let mut mobile_open = use_signal(|| false); let mut mobile_open = use_signal(|| false);
let menu_id = use_memo(|| "mobile-nav-menu".to_string()); let menu_id = use_memo(|| "mobile-nav-menu".to_string());
rsx! { rsx! {
header { class: "sticky top-0 z-40 w-full border-b border-paper-border bg-paper-theme/80 backdrop-blur-sm", header { class: "sticky top-0 z-40 w-full border-b border-paper-border bg-paper-theme/80 backdrop-blur-sm",
nav { class: "max-w-3xl mx-auto px-6 h-[60px] flex items-center justify-between", nav { class: "{max_width} mx-auto px-6 h-[60px] flex items-center justify-between",
Link { Link {
class: "text-2xl font-bold font-serif text-paper-primary hover:text-paper-accent transition-colors duration-200", class: "text-2xl font-bold font-serif text-paper-primary hover:text-paper-accent transition-colors duration-200",
to: Route::Home {}, to: Route::Home {},