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

refactor(write): 封面区空态矮横条 + 主体可滚动

Browse Source 
优化编辑器可用高度，避免封面区过度挤压:

A. 封面区空态改为矮横条(h-14，图标+提示+URL链横向排列)，
   不再占用 16:9 的大块空间；有图/上传中时才展开 aspect-video。

B. 元信息区+编辑器+错误提示包裹进 overflow-y-auto 滚动容器，
   底部操作栏固定吸底(border-t 分隔)。
   编辑器区从纯 flex-1 改为 min-h-[400px]，保证最小编辑空间，
   窗口过矮时不被元信息挤压到不可用。
This commit is contained in:
xfy 2026-06-24 15:23:32 +08:00
parent 8971fbe1a2
commit 198a9b292a
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/admin/write.rs
View File

@ -427,6 +427,9 @@ fn write_editor(post_id: Option<i32>) -> Element {
}
}
// 可滚动主体：元信息 + 编辑器 + 内联错误提示。
// 底部操作栏留在此容器外（固定吸底），保证保存/状态按钮始终可见。
div { class: "flex-1 min-h-0 overflow-y-auto",
// 顶部元信息区域 - 固定高度，不滚动
div { class: "flex-shrink-0 space-y-5 pt-8",
// 标题区域 - 大字号无框输入
@ -448,10 +451,16 @@ fn write_editor(post_id: Option<i32>) -> Element {
oninput: move |evt| summary.set(evt.value()),
}
// 封面图上传区：16:9 拖拽/点击/粘贴三合一，保留外链 URL 输入。
// 封面图上传区：空态矮横条（不挤压编辑器），有图时展开 16:9 预览。
// 容器统一绑定拖拽与粘贴事件；内部按 cover_image / cover_uploading 切换空态、上传中、预览。
div {
class: "relative aspect-video w-full rounded-xl border border-dashed overflow-hidden transition-all duration-200 group/cover",
class: "relative w-full rounded-xl border border-dashed overflow-hidden transition-all duration-200 group/cover",
// 空态矮横条；有图/上传中展开成 16:9。
class: if cover_image().is_empty() && !cover_uploading() {
"h-14"
} else {
"aspect-video"
},
class: if cover_drag_active() {
"border-[var(--color-paper-accent)] bg-[var(--color-paper-accent-soft)]"
} else if cover_image().is_empty() {
@ -569,13 +578,13 @@ fn write_editor(post_id: Option<i32>) -> Element {
}
}
// —— 空态：图标 + 三入口提示 + URL 文字链 ——
// —— 空态：横向矮横条，图标+提示+URL 链 ——
if cover_image().is_empty() && !cover_uploading() {
// label 包裹整个空态：点击天然触发隐藏的 file input，无需 JS。
label { class: "absolute inset-0 flex flex-col items-center justify-center gap-2 cursor-pointer px-4 text-center",
label { class: "absolute inset-0 flex flex-row items-center gap-3 cursor-pointer px-4 text-left",
// 上传图标（Feather 风格线框，与项目现有图标体系一致）。
svg {
class: "w-8 h-8 text-[var(--color-paper-secondary)]",
class: "w-5 h-5 shrink-0 text-[var(--color-paper-secondary)]",
xmlns: "http://www.w3.org/2000/svg",
view_box: "0 0 24 24",
fill: "none",
@ -592,12 +601,12 @@ fn write_editor(post_id: Option<i32>) -> Element {
y2: "15",
}
}
span { class: "text-sm text-[var(--color-paper-secondary)]",
"拖拽图片到此 · 点击选择 · 粘贴"
span { class: "text-sm text-[var(--color-paper-secondary)] shrink-0",
"拖拽 · 点击 · 粘贴封面图"
}
// URL 文字链：阻止 label 的默认 file 触发，切换到 URL 输入模式。
span {
class: "text-[11px] font-medium tracking-wider text-[var(--color-paper-tertiary)] hover:text-[var(--color-paper-accent)] transition-colors",
class: "text-[11px] font-medium tracking-wider text-[var(--color-paper-tertiary)] hover:text-[var(--color-paper-accent)] transition-colors ml-auto shrink-0",
onclick: move |evt| {
evt.prevent_default();
evt.stop_propagation();
@ -710,8 +719,9 @@ fn write_editor(post_id: Option<i32>) -> Element {
}
}
// 编辑器区域 - 沾满剩余高度
div { class: "flex-1 min-h-0 flex flex-col my-4",
// 编辑器区域 - 沾满剩余高度，但保证最小编辑空间。
// min-h-[400px]：窗口过矮时不被元信息挤压到不可用；flex-1：窗口充裕时填充。
div { class: "flex-1 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",
@ -755,9 +765,10 @@ fn write_editor(post_id: Option<i32>) -> Element {
}
}
}
} // 滚动主体容器闭合
// 底部操作栏 - 在编辑器下方，左对齐
div { class: "flex-shrink-0 flex items-center gap-2 pt-2 pb-4",
// 底部操作栏 - 固定吸底，不在滚动区域内
div { class: "flex-shrink-0 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 |_| {