fix: 收敛Markdown编辑器高度

This commit is contained in:
sunlei 2026-07-01 19:25:29 +08:00
parent d386d73641
commit abc882f1e6
3 changed files with 18 additions and 4 deletions

View File

@ -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/高度模型,避免暗色模式脱节和首次空编辑器出现内部滚动条。
## 部署说明

View File

@ -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));
}
}

View File

@ -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;/,
);