style(runner): optimize CodeMirror editor height auto-scaling and scrolling limit
This commit is contained in:
parent
f60bc4beaa
commit
3bb67f6673
15
input.css
15
input.css
@ -852,3 +852,18 @@
|
|||||||
|
|
||||||
/* ========== Blur-up 渐进图片加载(已移入 @layer components) ========== */
|
/* ========== Blur-up 渐进图片加载(已移入 @layer components) ========== */
|
||||||
@source "./src/**/*.{rs,html}";
|
@source "./src/**/*.{rs,html}";
|
||||||
|
|
||||||
|
/* ========== CodeMirror 代码运行器高度自适应优化 ========== */
|
||||||
|
.code-runner-editor {
|
||||||
|
min-height: 120px;
|
||||||
|
max-height: 400px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.code-runner-editor .cm-editor {
|
||||||
|
flex: 1 1 auto !important;
|
||||||
|
}
|
||||||
|
.code-runner-editor .cm-scroller {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -259,13 +259,9 @@ pub fn CodeRunner(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// CodeMirror 容器:组件自身在 WASM 端按此 id 挂载编辑器。
|
|
||||||
// 服务端渲染时仅展示空容器,避免在 SSR 阶段拉起 JS 编辑器。
|
|
||||||
// relative 定位,使骨架屏覆盖层(未就绪时)能贴合容器尺寸。
|
|
||||||
div {
|
div {
|
||||||
id: "{container_id}",
|
id: "{container_id}",
|
||||||
class: "code-runner-editor font-mono text-sm relative",
|
class: "code-runner-editor font-mono text-sm relative",
|
||||||
style: "min-height: 160px; display: flex; flex-direction: column",
|
|
||||||
|
|
||||||
// 骨架屏:CodeMirror 尚未挂载就绪时(SSR + hydration 完成前)显示。
|
// 骨架屏:CodeMirror 尚未挂载就绪时(SSR + hydration 完成前)显示。
|
||||||
// editor_ready 由挂载 effect 置 true 后,此处 if 分支消失,骨架屏从 DOM 移除。
|
// editor_ready 由挂载 effect 置 true 后,此处 if 分支消失,骨架屏从 DOM 移除。
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user