fix(admin): SQL 编辑器 gutter 与 content 背景割裂
现象:行号区和代码输入区背景色看起来不一致,有割裂感。 根因:三层背景色各不相同——容器用 paper-entry(mantle #e6e9ef)、 标题栏用 paper-theme(base #eff1f5)、CodeMirror 自带 base 背景。 容器与编辑器同处 base/mantle 之间,层次扁平,CodeMirror 的 base 浮不出层次,gutter 与 content 的细微差异被放大。 修复:建立 crust > mantle > base 三层明确递进—— - 容器改 paper-code-block(crust #dce0e8,最深) - 标题栏改 paper-entry(mantle,中) - CodeMirror 保持自带 base(最浅) 编辑器作为「浅色岛」浮在深色容器上(VS Code / Sublime 的 IDE 经典范式),gutter 与 content 同为 base 完全融合,割裂消失。
This commit is contained in:
parent
a7a97fc299
commit
e1b312e651
@ -898,10 +898,13 @@ fn SqlConsoleTab() -> Element {
|
||||
|
||||
rsx! {
|
||||
div { class: "space-y-5",
|
||||
// 编辑器卡片:标题栏 + CodeMirror 一体化
|
||||
div { class: "rounded-2xl overflow-hidden border border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]",
|
||||
// 编辑器卡片:标题栏 + CodeMirror 一体化。
|
||||
// 容器用 code-block(crust) 比标题栏 entry(mantle) 深一档,CodeMirror 自带
|
||||
// base 背景则更浅——三层形成 crust > mantle > base 的层级,让编辑器作为
|
||||
// 「浅色岛」浮在深色容器上(IDE 经典范式),消除 gutter/content 割裂。
|
||||
div { class: "rounded-2xl overflow-hidden border border-[var(--color-paper-border)] bg-[var(--color-paper-code-block)]",
|
||||
// 标题栏
|
||||
div { class: "flex justify-between items-center px-4 py-2.5 border-b border-[var(--color-paper-border)] bg-[var(--color-paper-theme)]",
|
||||
div { class: "flex justify-between items-center px-4 py-2.5 border-b border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]",
|
||||
div { class: "flex items-center gap-2",
|
||||
span { class: "w-2 h-2 rounded-full bg-[var(--color-paper-accent)]" }
|
||||
span { class: "font-mono text-sm font-semibold text-[var(--color-paper-primary)]", "SQL" }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user