fix(write): 彻底修复骨架屏高度不撑满
骨架屏在两条渲染路径都被高度链断裂卡住,内容只占页面 40-50%, 底部大片空白。 根因:高度链在两处父容器断裂,导致骨架屏无法引用到确定高度: 1. 未登录态(admin_layout):骨架屏被包在 div.p-10.animate-pulse, 该 div 是普通块级元素,无 flex-1 不撑满 main、非 flex 容器使 骨架屏 flex-1 无效、无 h-full。SSR 初始态走这条。 2. 登录态(write.rs 覆盖层):absolute inset-0 虽撑满,但非 flex 容器,骨架屏 flex-1 无意义;改 h-full 又遇 height:100% 在 非显式高度父容器下解析不可靠的经典坑。 修复:统一让两条路径的父容器都成为 flex flex-col,骨架屏根用 flex-1(比 height:100% 可靠,不依赖父显式 height): - admin_layout 包裹层: p-10.animate-pulse → flex-1.min-h-0. flex.flex-col.animate-pulse(去掉对 write 不合适的 p-10, 非 write 页面 padding 由 main_class 自带) - write.rs 覆盖层: absolute inset-0 → absolute inset-0 flex flex-col - write_skeleton 根: h-full → flex-1
This commit is contained in:
parent
e6ce87b315
commit
6e12b33769
@ -146,7 +146,9 @@ pub fn AdminLayout() -> Element {
|
||||
div { class: "flex-1 flex flex-col min-w-0 h-screen p-2 md:p-4",
|
||||
div { class: "flex-1 bg-[var(--color-paper-theme)] rounded-[2rem] shadow-sm border border-[var(--color-paper-border)] overflow-hidden relative flex flex-col",
|
||||
main { class: "{main_class}",
|
||||
div { class: "p-10 animate-pulse",
|
||||
// flex-1 撑满 main(使 write 骨架屏能引用到确定高度),
|
||||
// 非 write 页面的 py-12 padding 由 main_class 自带,这里不重复加。
|
||||
div { class: "flex-1 min-h-0 flex flex-col animate-pulse",
|
||||
{
|
||||
match route {
|
||||
Route::Write {} => rsx! { WriteSkeleton {} },
|
||||
|
||||
@ -13,9 +13,9 @@ use dioxus::prelude::*;
|
||||
#[component]
|
||||
pub fn WriteSkeleton() -> Element {
|
||||
rsx! {
|
||||
// 根:WriteSkeleton 放在 write.rs 的 absolute inset-0 覆盖层里,
|
||||
// 故用 h-full 撑满该层(父层非 flex,flex-1 无效),内部再 flex flex-col 分配高度。
|
||||
div { class: "relative h-full flex flex-col min-h-0 overflow-hidden",
|
||||
// 根:父层是 flex 容器(write.rs 覆盖层 / admin_layout 包裹层均为 flex flex-col),
|
||||
// 用 flex-1 撑满父层高度(比 height:100% 更可靠,不依赖父显式 height)。
|
||||
div { class: "relative flex-1 flex flex-col min-h-0 overflow-hidden",
|
||||
// 两栏容器:与真实页面一致,左 flex-1 + 右 w-80
|
||||
div { class: "flex-1 min-h-0 flex",
|
||||
// 左栏(主写作区)
|
||||
|
||||
@ -414,7 +414,7 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
||||
// 底栏作为 main 直接子元素永远贴卡片底沿,不随内容滚动,也无需 sticky。
|
||||
div { class: "relative flex flex-col w-full min-h-0 flex-1",
|
||||
if loading() {
|
||||
div { class: "absolute inset-0 z-10 bg-paper-theme", WriteSkeleton {} }
|
||||
div { class: "absolute inset-0 z-10 bg-paper-theme flex flex-col", WriteSkeleton {} }
|
||||
}
|
||||
|
||||
// 两栏容器:flex-1 分配空间,自身不滚动(min-h-0),滚动职责下放给左右两栏。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user