From d41eb4b3cd16c0dc1ee53986108a295b4bbf5e4b Mon Sep 17 00:00:00 2001 From: xfy Date: Thu, 25 Jun 2026 16:24:26 +0800 Subject: [PATCH] =?UTF-8?q?refactor(write):=20=E6=BB=9A=E5=8A=A8=E6=9D=A1?= =?UTF-8?q?=E4=BB=8E=E5=86=85=E5=AE=B9=E5=8C=BA=E5=86=85=E9=83=A8=E7=A7=BB?= =?UTF-8?q?=E5=88=B0=E7=AA=97=E5=8F=A3=E8=BE=B9=E7=BC=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将 /admin/write 从「锁一屏 + 内容区内部滚动」改为「整页自然滚动」， 滚动条出现在浏览器窗口右侧而非中间内容区边缘。 admin_layout: write 路由 root 由 h-dvh overflow-hidden 改为 min-h-dvh 自然文档流，main 去掉 overflow-hidden。 write.rs: 根 div 与内容区去掉 flex-1/min-h-0/overflow-y-auto 等滚动 约束；编辑器高度由 flex-1 改为 h-[60vh]（min-h-[400px] 兜底）；底部 操作栏去掉 flex-shrink-0，改为跟随页面滚动。 整页滚动时 Header 仍 sticky 吸顶（带毛玻璃），保存栏随内容滚走。 --- src/components/admin_layout.rs | 6 +++--- src/pages/admin/write.rs | 23 ++++++++++------------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/src/components/admin_layout.rs b/src/components/admin_layout.rs index 51552d5..0576bf3 100644 --- a/src/components/admin_layout.rs +++ b/src/components/admin_layout.rs @@ -96,14 +96,14 @@ pub fn AdminLayout() -> Element { let is_write_route = matches!(route, Route::Write {}) || matches!(route, Route::WriteEdit { .. }); let main_class = if is_write_route { - "flex-1 w-full max-w-5xl mx-auto px-6 flex flex-col overflow-hidden" + "flex-1 w-full max-w-5xl mx-auto px-6 flex flex-col" } else { "flex-1 w-full max-w-5xl mx-auto px-6 py-8" }; - // Write 路由：页面固定高度，不滚动，由编辑器内部处理滚动 + // 所有路由统一自然文档流：浏览器右侧滚动条，整页滚动。 let root_class = if is_write_route { - "h-dvh flex flex-col overflow-hidden bg-paper-theme" + "min-h-dvh flex flex-col bg-paper-theme" } else { "min-h-screen flex flex-col bg-paper-theme" }; diff --git a/src/pages/admin/write.rs b/src/pages/admin/write.rs index 61ac082..6984d9d 100644 --- a/src/pages/admin/write.rs +++ b/src/pages/admin/write.rs @@ -421,19 +421,16 @@ fn write_editor(post_id: Option) -> Element { "w-full text-sm bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none border-b border-[var(--color-paper-tertiary)] focus:border-[var(--color-paper-primary)] transition-colors pb-1.5"; rsx! { - div { class: "relative flex flex-col flex-1 min-h-0 overflow-hidden", + div { class: "relative flex flex-col", if loading() { div { class: "absolute inset-0 z-10 bg-paper-theme", WriteSkeleton {} } } - // 可滚动主体：元信息 + 编辑器 + 内联错误提示。 - // 底部操作栏留在此容器外（固定吸底），保证保存/状态按钮始终可见。 - // flex flex-col：让内部 flex-1 编辑器能撑满剩余高度； - // overflow-y-auto：内容超出时滚动（min-h-0 允许 flex 子项收缩触发滚动）。 - div { class: "flex-1 min-h-0 overflow-y-auto flex flex-col", - // 顶部元信息区域 - 固定高度，不滚动 + // 整页自然滚动：元信息 + 编辑器 + 错误提示 + 底部操作栏一起随浏览器滚动。 + div { class: "flex flex-col", + // 顶部元信息区域 div { class: "flex-shrink-0 space-y-5 pt-8", // 标题区域 - 大字号无框输入 div { @@ -723,9 +720,9 @@ fn write_editor(post_id: Option) -> Element { } } - // 编辑器区域 - 沾满剩余高度，但保证最小编辑空间。 - // min-h-[400px]：窗口过矮时不被元信息挤压到不可用；flex-1：窗口充裕时填充。 - div { class: "flex-1 min-h-[400px] flex flex-col my-4", + // 编辑器区域 - 整页滚动下用视口高度，保证充裕的编辑空间。 + // h-[60vh]：随窗口高度自适应；min-h-[400px]：窗口过矮时仍可用。 + div { class: "h-[60vh] min-h-[400px] flex flex-col my-4", div { class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-xl overflow-hidden bg-[var(--color-paper-entry)] shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none", id: "tiptap-editor", @@ -769,10 +766,10 @@ fn write_editor(post_id: Option) -> Element { } } } - } // 滚动主体容器闭合 + } // 内容区闭合 - // 底部操作栏 - 固定吸底，不在滚动区域内 - div { class: "flex-shrink-0 flex items-center gap-2 pt-2 pb-4 border-t border-[var(--color-paper-border)]", + // 底部操作栏 - 跟随页面滚动 + div { class: "flex items-center gap-2 pt-2 pb-4 border-t border-[var(--color-paper-border)]", button { class: "px-4 py-1.5 text-sm text-[var(--color-paper-secondary)] hover:text-[var(--color-paper-primary)] transition-colors cursor-pointer", onclick: move |_| {