From f80cb74d11f3299c481a2fb264051c5bf1295f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=81=E5=86=9C=E9=98=BF=E6=A5=A0?=
 <zhangyuge946@163.com>
Date: Fri, 11 Sep 2026 01:03:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E8=B0=83=E6=95=B4=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=8C=BA=E4=B8=BA=E9=BB=98=E8=AE=A4=E5=90=83=E6=BB=A1?=
 =?UTF-8?q?=E8=A7=86=E5=8F=A3=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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）。
---
 web/src/components/Editor.tsx |  2 +-
 web/src/index.css             | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Editor.tsx b/web/src/components/Editor.tsx
index 5fa29d6..119706b 100644
--- a/web/src/components/Editor.tsx
+++ b/web/src/components/Editor.tsx
@@ -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
diff --git a/web/src/index.css b/web/src/index.css
index 96548bd..07ddc3b 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -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;