fix(admin): unify write page shell with other admin pages + sticky footer

The write route had a separate shell in AdminLayout (main element acted
as its own rounded card + scroll container), while all other admin pages
used a dedicated rounded-card div wrapping a centered main. This caused
visible margin/spacing differences.

Changes:
- AdminLayout: remove is_write_route shell branching; all admin pages now
  share the same rounded-card div + centered main shell.
- write.rs: drop redundant max-w-7xl mx-auto on root div (main already
  provides it); make bottom action bar sticky bottom-0 with negative
  margins to bleed to card edges and a translucent backdrop so scrolling
  content doesn't bleed through.
This commit is contained in:
xfy 2026-07-08 17:42:25 +08:00
parent 5c37b17cb8
commit 25c3172b7c
2 changed files with 12 additions and 13 deletions

View File

@ -60,11 +60,9 @@ pub fn AdminLayout() -> Element {
| Route::PostsTrashPage { .. } | Route::PostsTrashPage { .. }
); );
let main_class = if is_write_route { // 所有 admin 页面共用同一 shell:外层圆角卡片(滚动容器) + 内部 main 负责居中限宽。
"flex-1 flex flex-col relative w-full h-full overflow-y-auto px-10 py-12 rounded-[2rem] bg-[var(--color-paper-theme)] shadow-sm border border-[var(--color-paper-border)]" // 取消 write 路由的特例化分支,视觉与其它 admin 页面统一。
} else { let main_class = "flex-1 w-full max-w-7xl mx-auto px-10 py-12";
"flex-1 w-full max-w-7xl mx-auto px-10 py-12"
};
let root_class = "min-h-dvh flex bg-[var(--color-paper-entry)] text-[var(--color-paper-primary)] font-sans"; let root_class = "min-h-dvh flex bg-[var(--color-paper-entry)] text-[var(--color-paper-primary)] font-sans";
@ -127,13 +125,9 @@ pub fn AdminLayout() -> Element {
div { class: "{root_class}", div { class: "{root_class}",
{nav_content} {nav_content}
div { class: "flex-1 flex flex-col min-w-0 h-screen p-2 md:p-4", div { class: "flex-1 flex flex-col min-w-0 h-screen p-2 md:p-4",
if !is_write_route {
div { class: "flex-1 bg-[var(--color-paper-theme)] rounded-[2rem] shadow-sm border border-[var(--color-paper-border)] overflow-y-auto relative flex flex-col", div { class: "flex-1 bg-[var(--color-paper-theme)] rounded-[2rem] shadow-sm border border-[var(--color-paper-border)] overflow-y-auto relative flex flex-col",
main { class: "{main_class}", Outlet::<Route> {} } main { class: "{main_class}", Outlet::<Route> {} }
} }
} else {
main { class: "{main_class}", Outlet::<Route> {} }
}
} }
} }
} }

View File

@ -411,7 +411,9 @@ fn write_editor(post_id: Option<i32>) -> Element {
// 元信息表单复用样式见模块级 META_LABEL_CLASS / META_INPUT_CLASS。 // 元信息表单复用样式见模块级 META_LABEL_CLASS / META_INPUT_CLASS。
rsx! { rsx! {
div { class: "relative flex flex-col w-full max-w-7xl mx-auto min-h-full", // 根容器:与 admin shell 对齐(main 已提供 max-w-7xl mx-auto + px-10 py-12),
// 这里只承担内部纵向布局 + min-h-full(让底部 sticky 操作栏能贴住卡片底沿)。
div { class: "relative flex flex-col w-full min-h-full",
if loading() { if loading() {
div { class: "absolute inset-0 z-10 bg-paper-theme", WriteSkeleton {} } div { class: "absolute inset-0 z-10 bg-paper-theme", WriteSkeleton {} }
} }
@ -535,8 +537,11 @@ fn write_editor(post_id: Option<i32>) -> Element {
} }
} // 内容区闭合 } // 内容区闭合
// 底部操作栏 - 跟随页面滚动 // 底部操作栏 - sticky 贴底:内容滚动时停在视口底部(圆角卡片滚动容器的底部)。
div { class: "flex items-center gap-4 pt-4 pb-4 border-t border-[var(--color-paper-border)]", // sticky 相对最近的 overflow-y-auto 祖先(layout 的圆角卡片)定位。
// -mt-12 + -mx-10 + px-10 py-4:抵消 main 的 py-12 px-10,让操作栏贴满卡片底沿宽度。
// bg + backdrop-blur:滚动内容从下方滑过时不穿透。
div { class: "sticky bottom-0 -mt-12 -mx-10 px-10 py-4 flex items-center gap-4 border-t border-[var(--color-paper-border)] bg-[var(--color-paper-theme)]/95 backdrop-blur-sm",
button { button {
class: "px-6 py-2 rounded-full text-sm font-medium text-[var(--color-paper-secondary)] hover:text-[var(--color-paper-primary)] transition-colors cursor-pointer", class: "px-6 py-2 rounded-full text-sm font-medium text-[var(--color-paper-secondary)] hover:text-[var(--color-paper-primary)] transition-colors cursor-pointer",
onclick: move |_| { onclick: move |_| {