feat: 增加 ECharts 渲染与预览交互增强
- 新增可复用的 markdown-echarts 工作区,支持安全的 YAML 围栏、默认值、语义校验、错误占位和 SVG 渲染 - 将 ECharts 接入统一 Markdown、快速预览、精确预览与 PDF 链路,并复用 Mermaid 的不可跨页和超高图单页适配策略 - 默认示例加入 ECharts,增加源文本折叠、顶部文档状态、页码输入跳转与滚动同步 - 快速预览改用外层容器滚动,使滚动条与精确预览统一贴在预览区域右侧,并兼容显示缩放 - 完善 Docker 工作区复制、可配置 Compose 镜像、测试覆盖和进度文档
This commit is contained in:
+87
-6
@@ -31,8 +31,8 @@ fa07472 feat: 实现网页实时预览
|
||||
ec48bce chore: 初始化项目骨架
|
||||
```
|
||||
|
||||
最新阶段已完成渲染边界逻辑修复,以及前后端分页载荷、文档类型、
|
||||
物理单位、主题资源加载和 Markdown 请求逻辑的复用收敛。
|
||||
最新阶段已完成 Markdown ECharts YAML 围栏、统一 SVG 渲染与分页,
|
||||
并完善默认示例、源文本收起、顶栏文档状态和快速页码跳转。
|
||||
|
||||
## 2. 已完成
|
||||
|
||||
@@ -248,6 +248,52 @@ ec48bce chore: 初始化项目骨架
|
||||
- 后续分页回归应覆盖 Windows 100%、125% 和 150% 系统显示缩放,分别
|
||||
记录快速预览、精确预览和最终 PDF 的页数及分页边界。
|
||||
|
||||
### 3.9 Markdown ECharts 图表
|
||||
|
||||
- 新增可独立复用的 `packages/markdown-echarts` 工作区,为 Markdown-it
|
||||
提供安全的 `echarts` YAML 围栏。
|
||||
- 围栏支持版本、固定高度或宽高比、主题、图注和 ECharts `option`;
|
||||
高度默认 80mm,主题默认跟随文档。
|
||||
- 当前支持 line、bar、scatter、pie、radar、heatmap、boxplot 和
|
||||
candlestick 系列,并校验各系列的数据结构和必要坐标系。
|
||||
- 每个系列必须使用非空 `series[].data`、`dataset.source` 或具有有效
|
||||
上游数据的内置 transform;缺少数据等错误会显示包含配置路径的局部
|
||||
占位,不中断整篇 Markdown。
|
||||
- YAML 会转换为安全纯数据对象;禁止函数、自定义标签、锚点和别名、
|
||||
外部 URL、HTML formatter、原型污染属性及 `custom` 系列。
|
||||
- 浏览器按需加载 ECharts 模块,以 SVG 渲染,并可冻结为内联 SVG 或
|
||||
SVG Data URL 图片;快速预览与 PDF 使用同一套运行时。
|
||||
- 分页遵循 Mermaid 的不可拆分规则:当前页空间足够时原位放置,不足时
|
||||
移到下一页,超高图表等比例缩放到单页内,不跨页切割。
|
||||
- PDF 输出等待 ECharts、Mermaid、字体和图片全部完成后再分页,并分别
|
||||
返回 ECharts 与 Mermaid 错误数量。
|
||||
- 包内 README 已记录围栏语法、默认值、验证规则、错误行为、安全边界、
|
||||
Markdown-it 接入和浏览器渲染方式。
|
||||
|
||||
### 3.10 工作区布局与页码导航
|
||||
|
||||
- 默认 Markdown 示例新增 ECharts 柱状图,打开网页即可验证 YAML 围栏、
|
||||
SVG 渲染和分页。
|
||||
- 文件名及渲染、分页、导出错误状态从源文本标题栏迁移到顶部应用标题
|
||||
旁,长文件名支持省略和完整悬停提示。
|
||||
- 源文本区域支持收起和展开;桌面端收起为 48px 左侧窄栏,预览区扩展
|
||||
到剩余宽度并保持纸张居中,窄屏收起为 44px 顶部横条。
|
||||
- 折叠内容使用真实 `display:none`,不会残留可聚焦文本框或进入无障碍
|
||||
树;按钮提供 `aria-controls` 和 `aria-expanded`。
|
||||
- 当前页从预览标题行移到缩放工具栏左侧,显示为
|
||||
`第 [n] / 总页数 页`,避免重复信息。
|
||||
- 页码输入支持 Enter 和失焦提交,自动限制到 1~总页数;空值和非法
|
||||
小数恢复当前页。
|
||||
- 快速预览直接定位 iframe 内 `.pagedjs_page`;精确预览定位
|
||||
`.precise-pdf-page`。滚动预览时输入框同步当前页。
|
||||
- 精确预览会动态识别桌面内部滚动容器或窄屏主窗口滚动容器,目标页顶端
|
||||
与实际可视滚动区域对齐。
|
||||
- 快速预览 iframe 只负责生成分页内容并回传自然高度,滚动统一交给外层
|
||||
`.preview-scroll`;滚动条因此与精确预览一样贴在右侧预览容器边缘,
|
||||
不再贴着居中的纸张右边缘。
|
||||
- 快速预览的页码识别和跳转会合并外层滚动位置、iframe 位置、内部分页
|
||||
位置与显示缩放比例,50%~400% 视觉缩放不会破坏页码同步。
|
||||
|
||||
## 4. 已执行验证
|
||||
|
||||
2026-07-27 在当前完整工作区成功执行:
|
||||
@@ -261,9 +307,10 @@ git diff --check
|
||||
|
||||
结果:
|
||||
|
||||
- ECharts 围栏测试:27 项通过;
|
||||
- 共享配置测试:9 项通过;
|
||||
- 渲染器测试:8 项通过;
|
||||
- 前端测试:55 项通过;
|
||||
- 渲染器测试:10 项通过;
|
||||
- 前端测试:63 项通过;
|
||||
- 后端测试:29 项通过;
|
||||
- 全项目类型检查通过;
|
||||
- 生产构建通过;
|
||||
@@ -271,7 +318,26 @@ git diff --check
|
||||
|
||||
已使用浏览器插件完成视觉验证:
|
||||
|
||||
- 重构后的初始 Markdown 和主题资源加载正常,快速预览生成 1 页;
|
||||
- 默认示例中的 ECharts 柱状图生成 1 个内联 SVG,无错误占位;
|
||||
- 顶栏文件名、分页状态与操作按钮在桌面和窄屏均无重叠;
|
||||
- 桌面端源文本收起后宽度从 576px 降为 48px,预览区从 864px 扩展
|
||||
到 1392px;窄屏折叠条为 44px;
|
||||
- 快速预览输入第 2 页后目标页顶端对齐 iframe 视口,滚动回首页和第二页
|
||||
时输入框分别同步为 1 和 2;
|
||||
- 页码输入 0 和 99 时分别限制到 1 和总页数;
|
||||
- 精确预览输入第 2 页后,目标页与桌面滚动容器顶部误差为 0;
|
||||
- 快速预览改用外层滚动容器后,右侧容器边界为 1440px,纸张边界约为
|
||||
1400px,滚动条稳定贴在容器最右侧而非纸张边缘;
|
||||
- 快速预览输入第 1 页后目标页与外层可视区域顶部误差为 0,外层滚动到
|
||||
第 2 页时页码输入框同步更新为 2;
|
||||
- 快速预览在 50% 和 150% 下的可滚动高度分别随内容显示高度缩放,
|
||||
iframe 自身保持无滚动;切换精确/快速模式后仍使用同一右侧滚动条;
|
||||
- 桌面端收起源文本后,预览滚动容器从 48px 延伸至窗口右边缘,纸张仍
|
||||
在扩展后的预览区域内居中;
|
||||
- 窄屏精确预览自动使用主窗口滚动,并正确跳转到第 2 页;
|
||||
- 页码控件在窄屏独占首行,缩放控件在下一行铺满,没有与预览模式或主题
|
||||
选择器重叠;
|
||||
- 当前默认 Markdown 和主题资源加载正常,快速预览生成 2 页;
|
||||
- 编辑 Markdown 后标题、表格、Mermaid 和分页状态均完成防抖重绘;
|
||||
- 从本地 GitHub 主题切换到内置 Typora 风格主题后 iframe 正常重建;
|
||||
- 本轮浏览器回归期间控制台无警告或错误;
|
||||
@@ -290,6 +356,17 @@ git diff --check
|
||||
- Mermaid A/B PDF 页数、逐页文字和抽样视觉结果一致;
|
||||
- 抽查第 2、6、27、53、65 页,Mermaid 尺寸、分页位置和末页内容正常。
|
||||
|
||||
2026-07-27 已重新构建并启动本地发布候选镜像:
|
||||
|
||||
- 使用完整多阶段 `deploy/Dockerfile` 构建
|
||||
`yixiong/md-to-pdf:v0.3.0`,镜像大小约 612 MB;
|
||||
- Compose 强制重建后容器健康检查通过,服务继续监听
|
||||
`http://localhost:8080`;
|
||||
- 首页返回 200,`POST /api/render` 的 ECharts 冒烟请求返回
|
||||
`code`、`echarts` 功能标识和 `md-echarts` 安全占位;
|
||||
- 容器内 `@md-to-pdf/markdown-echarts` 工作区包可正常加载;
|
||||
- 当前镜像已通过发布前手动验收,并作为 `v0.3.0` 发布镜像保留运行。
|
||||
|
||||
此前主题阶段已使用浏览器插件完成视觉验证:
|
||||
|
||||
- 导入并打开 `tmp/数据中台项目周报_2026_W30.md`;
|
||||
@@ -332,7 +409,11 @@ git diff --check
|
||||
- `apps/web/src/mermaid-static-image.ts` 负责锁定 Mermaid 盒模型并转换为静态矢量 SVG 图片。
|
||||
- `apps/web/src/paged-table-handler.ts` 负责跨页表格表头处理。
|
||||
- `apps/web/src/PrecisePdfPreview.tsx` 和 `pdf-render-queue.ts` 负责 PDF.js 精确预览和 Canvas 生命周期。
|
||||
- `apps/web/src/PreviewPageControl.tsx` 和 `preview-page.ts` 负责当前页输入、
|
||||
页码边界、滚动页识别和快速跳转。
|
||||
- `apps/web/src/preview-zoom.ts` 和 `PreviewZoomControl.tsx` 负责预览缩放缓存、边界和控制界面。
|
||||
- `packages/markdown-echarts` 负责 ECharts YAML 协议、验证、安全过滤、
|
||||
Markdown-it 插件、浏览器 SVG 渲染和分页样式。
|
||||
- `apps/server/src/pdf-engine.ts` 负责 Chromium 生命周期、并发、网络限制、分页调用和 PDF 输出。
|
||||
- `apps/web/src/ExportSettingsDrawer.tsx` 是导出设置界面。
|
||||
- `apps/web/src/export-settings.ts` 负责版本化浏览器缓存。
|
||||
@@ -369,7 +450,7 @@ git diff --check
|
||||
## 7. 首版验收目标
|
||||
|
||||
- 可以选择或粘贴 Markdown;
|
||||
- 网页正确预览常用 Markdown、公式和 Mermaid;
|
||||
- 网页正确预览常用 Markdown、公式、Mermaid 和 ECharts;
|
||||
- 可以下载真实 PDF;
|
||||
- PDF 文本可搜索;
|
||||
- 预览与 PDF 基本一致;
|
||||
|
||||
Reference in New Issue
Block a user