feat(web): 调整编辑区为默认吃满视口高度
- index.css:.pn-ae-grid 锁高 calc(100vh - 110px)(topbar 62 + content padding 24×2)、 min-height 520px;.pn-ae-main 与其 antd .ant-card-body 拉成纵向 flex,把剩余高度让给 .pn-ae-body-wrap(flex:1 1 auto / min-height 280px / overflow hidden); ≤1023px 用 calc(100vh - 102px),≤900px 堆叠断点回落 height:auto 避免压扁 - Editor.tsx:CodeMirror 内联 minHeight 420 → 240,矮视口下可收缩而不撑破容器 原实现高度随内容撑开:新建空文档编辑区仅 420px 偏小,3000 行长文把页面撑到 8.4 万像素、 只能整页滚动。改为视口内布局后滚动交给 CodeMirror 的 .cm-scroller:1280×720 下两种场景 编辑卡均为 610px,长文页面保持一屏(实测见 docs/editor-live-rendering.md §12.7)。
This commit is contained in:
@@ -128,7 +128,7 @@ export default function Editor({
|
||||
basicSetup={{ lineNumbers: true, foldGutter: false, highlightActiveLine: true }}
|
||||
theme={isDarkMode(mode) ? 'dark' : 'light'}
|
||||
height="100%"
|
||||
style={{ height: '100%', minHeight: 420 }}
|
||||
style={{ height: '100%', minHeight: 240 }}
|
||||
onCreateEditor={(view) => {
|
||||
viewRef.current = { view }
|
||||
appliedSourceMode.current = sourceMode
|
||||
|
||||
+30
-1
@@ -1659,6 +1659,23 @@ button.ant-btn.pn-admin-mobile-act {
|
||||
grid-template-columns: minmax(0, 1fr) 280px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
/* 编辑卡默认吃满视口剩余高度:短文也有开阔的编辑区,长文在编辑器内部滚动
|
||||
而不再把页面撑到几万像素(topbar 62px + content padding 24px×2)。 */
|
||||
height: calc(100vh - 110px);
|
||||
min-height: 520px;
|
||||
}
|
||||
/* 编辑卡(含 antd Card 的 body)拉成纵向 flex,把剩余高度让给编辑区 */
|
||||
.pn-ae-main {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.pn-ae-main > .ant-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
/* 编辑卡与发布卡的 Card 基础样式由 ui/card 承接(gap-0/p-6 等) */
|
||||
/* 提权至 (0,1,1)+:压过 antd .ant-input 的同名字段(cssinjs 无 layer 且后注入)。
|
||||
@@ -1746,8 +1763,11 @@ button.pn-ae-tool svg {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pn-ae-body-wrap {
|
||||
min-height: 420px;
|
||||
/* 吃掉卡片内的剩余高度(滚动由 CodeMirror 的 .cm-scroller 承担) */
|
||||
flex: 1 1 auto;
|
||||
min-height: 280px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pn-ae-upload-alert {
|
||||
margin-top: 10px;
|
||||
@@ -1801,9 +1821,18 @@ button.pn-ae-tool svg {
|
||||
.ant-divider.pn-ae-divider {
|
||||
margin: 14px 0;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.pn-ae-grid {
|
||||
/* 该断点下 content padding 收紧为 20px */
|
||||
height: calc(100vh - 102px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.pn-ae-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
/* 堆叠布局:回到内容高度,避免编辑区被压扁 */
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
.pn-ae-side {
|
||||
position: static;
|
||||
|
||||
Reference in New Issue
Block a user