From abc882f1e62815a42f9fd8269f55c9c5dd93f609 Mon Sep 17 00:00:00 2001
From: sunlei <yemu2333@outlook.com>
Date: Wed, 1 Jul 2026 19:25:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=94=B6=E6=95=9BMarkdown=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                          |  2 +-
 .../src/components/markdown/KtMilkdownEditor.scss  | 14 +++++++++++---
 .../components/markdown/KtMilkdownEditor.spec.ts   |  6 ++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 6c32aef..495be5e 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ pnpm run build:antdv-next
 - QQBot / 账号连接页拆分 OneBot 连接、QQ 登录、NapCat 运行和运行说明列；更新登录通过 SSE 展示 quick / password / captcha / new-device / qrcode 每步中文进度，密码登录触发 QQ 安全验证时在弹窗内完成腾讯验证码并回交 API，新设备验证二维码和腾讯验证码分开展示；行操作“运行态”打开只读抽屉，展示 NapCat runtime/protocol/session behavior profile、风险模式和登录事件证据。
 - QQBot / 插件平台页保留在线命令能力表，并提供 manifest 校验、本地插件安装、安装记录、运行事件和账号绑定抽屉，接口走 `/qqbot/plugin-platform/*`。
 - 博客管理 / 文章管理提供“预览”行操作，打开隐藏二级路由 `/blog/article/:articleId/preview`；预览页按 NapCat WebUI 的微服务嵌入形态实现，iframe 独占容器，文章标题、状态、预览 Host 和返回/刷新/新窗口操作放在右下角悬浮卡片，不占用 iframe 布局空间。新增隐藏路由和按钮权限需要同步 API `blog-menu.sql` / `vben-admin-init.sql` 中的 `BlogArticlePreview` 与 `BlogArticlePreviewButton`。
-- 博客管理 / 文章表单支持 Markdown、富文本 HTML、源码 HTML 三种编辑模式：Markdown 继续使用 Milkdown/Crepe 并保存 `contentFormat=markdown`；富文本 HTML 使用 Tiptap 并保存 `contentFormat=html`；源码 HTML 用于保留 WordPress/Argon 运行时 DOM，同样保存 `contentFormat=html`。Milkdown/Crepe 必须先引入 `@milkdown/crepe/theme/common/style.css`，再引入具体主题 CSS，否则生产包只有主题变量没有工具栏/菜单布局样式；组件 SCSS 还必须把 `--crepe-color-*` 映射到 Admin `hsl(var(--...))` 主题 token，并覆盖 common 默认大 padding/root overflow，避免暗色模式脱节和首次空编辑器出现内部滚动条。
+- 博客管理 / 文章表单支持 Markdown、富文本 HTML、源码 HTML 三种编辑模式：Markdown 继续使用 Milkdown/Crepe 并保存 `contentFormat=markdown`；富文本 HTML 使用 Tiptap 并保存 `contentFormat=html`；源码 HTML 用于保留 WordPress/Argon 运行时 DOM，同样保存 `contentFormat=html`。Milkdown/Crepe 必须先引入 `@milkdown/crepe/theme/common/style.css`，再引入具体主题 CSS，否则生产包只有主题变量没有工具栏/菜单布局样式；组件 SCSS 还必须把 `--crepe-color-*` 映射到 Admin `hsl(var(--...))` 主题 token，并用固定高度外壳、隐藏溢出的 root 和正文 flex 滚动区覆盖 common 默认大 padding/高度模型，避免暗色模式脱节和首次空编辑器出现内部滚动条。
 
 ## 部署说明
 
diff --git a/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.scss b/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.scss
index 07e6f63..6cfe54b 100644
--- a/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.scss
+++ b/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.scss
@@ -1,5 +1,6 @@
 .kt-milkdown-editor {
   display: flex;
+  height: var(--kt-milkdown-min-height, 360px);
   min-height: var(--kt-milkdown-min-height, 360px);
   flex-direction: column;
   overflow: hidden;
@@ -17,7 +18,8 @@
   }
 
   &__root {
-    min-height: inherit;
+    min-height: 0;
+    height: 100%;
     width: 100%;
     flex: 1;
     overflow: hidden;
@@ -52,23 +54,29 @@
     --crepe-color-inline-area: hsl(var(--muted));
 
     min-height: inherit;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     color: hsl(var(--foreground));
     background: hsl(var(--background));
   }
 
   .milkdown .editor {
-    min-height: inherit;
+    min-height: 0;
+    flex: 1;
+    overflow: auto;
     padding: 0;
     outline: none;
   }
 
   .milkdown .ProseMirror {
-    min-height: calc(var(--kt-milkdown-min-height, 360px) - 36px);
+    min-height: 100%;
     padding: 18px 22px;
     outline: none;
   }
 
   .milkdown .milkdown-top-bar {
+    flex: 0 0 auto;
     border-bottom: 1px solid hsl(var(--border));
   }
 }
diff --git a/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.spec.ts b/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.spec.ts
index 563b729..f658377 100644
--- a/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.spec.ts
+++ b/apps/web-antdv-next/src/components/markdown/KtMilkdownEditor.spec.ts
@@ -35,7 +35,13 @@ describe('ktMilkdownEditor styles', () => {
   });
 
   it('keeps the first empty editor render from creating an internal scrollbar', () => {
+    expect(styleSource).toMatch(
+      /\.kt-milkdown-editor\s*\{[\s\S]*?height:\s*var\(--kt-milkdown-min-height,\s*360px\);/,
+    );
     expect(styleSource).toMatch(/&__root\s*\{[\s\S]*?overflow:\s*hidden;/);
+    expect(styleSource).toMatch(
+      /\.milkdown \.editor\s*\{[\s\S]*?min-height:\s*0;[\s\S]*?flex:\s*1;[\s\S]*?overflow:\s*auto;/,
+    );
     expect(styleSource).toMatch(
       /\.milkdown \.ProseMirror\s*\{[\s\S]*?padding:\s*18px 22px;/,
     );