feat(editor): tiptap 编辑器有内容时自动调淡背景图透明度

无内容时背景图保持 60% 透明度;当编辑器内有内容(非纯空白)时,
背景图淡出到 10%,与聚焦时行为一致。content signal 由 onUpdate
回调实时维护,输入即触发重渲染,无需额外状态。
This commit is contained in:
xfy 2026-07-02 11:11:04 +08:00
parent 48107d8e18
commit fe22d6dad8

View File

@ -469,10 +469,21 @@ fn write_editor(post_id: Option<i32>) -> Element {
div {
class: "relative group 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",
img {
src: "/images/xiantiaoxiaogou_input_bg.webp",
alt: "",
class: "absolute bottom-1.5 right-1.5 opacity-60 group-focus-within:opacity-10 transition-opacity duration-300 pointer-events-none z-0",
{
// 无内容时半透明(60%);有内容或聚焦时淡出(10%)。
// content 是 onUpdate 回调实时维护的 signal编辑即触发重渲染。
let bg_opacity = if content().trim().is_empty() {
"opacity-60"
} else {
"opacity-10"
};
rsx! {
img {
src: "/images/xiantiaoxiaogou_input_bg.webp",
alt: "",
class: "absolute bottom-1.5 right-1.5 group-focus-within:opacity-10 transition-opacity duration-300 pointer-events-none z-0 {bg_opacity}",
}
}
}
}
}