feat(editor): tiptap 编辑器有内容时自动调淡背景图透明度
无内容时背景图保持 60% 透明度;当编辑器内有内容(非纯空白)时, 背景图淡出到 10%,与聚焦时行为一致。content signal 由 onUpdate 回调实时维护,输入即触发重渲染,无需额外状态。
This commit is contained in:
parent
48107d8e18
commit
fe22d6dad8
@ -469,10 +469,21 @@ fn write_editor(post_id: Option<i32>) -> Element {
|
|||||||
div {
|
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",
|
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",
|
id: "tiptap-editor",
|
||||||
img {
|
{
|
||||||
src: "/images/xiantiaoxiaogou_input_bg.webp",
|
// 无内容时半透明(60%);有内容或聚焦时淡出(10%)。
|
||||||
alt: "",
|
// content 是 onUpdate 回调实时维护的 signal,编辑即触发重渲染。
|
||||||
class: "absolute bottom-1.5 right-1.5 opacity-60 group-focus-within:opacity-10 transition-opacity duration-300 pointer-events-none z-0",
|
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}",
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user