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

fix(admin): 重建结果消息改绝对定位,避免撑高容器顶起按钮

Browse Source 
RebuildCacheBar 原用 flex-col 把「已重建 x 篇文章」消息排在按钮下方,
参与文档流。其祖先 header 为 md:items-end(底边固定),消息出现时
新增高度全部转化为按钮上移,「重建内容/重建全部」被顶起、「发布文章」
相对下沉,三者错位。

改为外层 relative + 消息 absolute top-full 脱离文档流:出现/消失都
不影响按钮行高度,布局稳定。双 target 编译通过。
This commit is contained in:
xfy 2026-07-16 14:36:33 +08:00
parent f39cb35a31
commit 78a8d188d1
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/admin/posts.rs
View File

@ -295,9 +295,10 @@ fn RebuildCacheBar() -> Element {
}; };
rsx! { rsx! {
// 竖向布局：按钮行 + 结果消息行（右对齐，消息行不撑高按钮行）。 // 消息绝对定位到按钮行下方，脱离文档流：出现/消失都不撑高祖先容器，
// 避免 header 的 md:items-end 把固定底边转化为按钮上移（"按钮被顶上去" bug）。
// 自持 rebuilding / rebuild_result state，与父组件零耦合。 // 自持 rebuilding / rebuild_result state，与父组件零耦合。
div { class: "flex flex-col items-end gap-1", div { class: "relative flex items-center gap-3",
div { class: "flex items-center gap-3", div { class: "flex items-center gap-3",
Tooltip { Tooltip {
tip: "重建 content_html 为空的文章渲染缓存".to_string(), tip: "重建 content_html 为空的文章渲染缓存".to_string(),
@ -332,9 +333,9 @@ fn RebuildCacheBar() -> Element {
} }
} }
} }
// 重建结果消息：独立成行，右对齐，与按钮行同属本组件。 // 重建结果消息：绝对定位到按钮行正下方，脱离文档流，不影响布局高度。
if let Some(msg) = rebuild_result() { if let Some(msg) = rebuild_result() {
div { class: "text-xs text-paper-secondary whitespace-pre-line", "{msg}" } div { class: "absolute top-full right-0 mt-1 text-xs text-paper-secondary whitespace-pre-line", "{msg}" }
} }
} }
} }