feat: 实现网页实时预览
This commit is contained in:
SkyJourney
@@ -0,0 +1,240 @@
|
||||
# Markdown PDF 导出器进度
|
||||
|
||||
最后更新：2026-07-25
|
||||
|
||||
## 1. 当前概况
|
||||
|
||||
项目目录：
|
||||
|
||||
```text
|
||||
C:\Projects\md-to-pdf
|
||||
```
|
||||
|
||||
当前分支：
|
||||
|
||||
```text
|
||||
main
|
||||
```
|
||||
|
||||
已有提交：
|
||||
|
||||
```text
|
||||
7224dfd feat: 实现 Markdown 渲染核心
|
||||
ec48bce chore: 初始化项目骨架
|
||||
```
|
||||
|
||||
当前工作区存在未提交修改，主要是网页实时预览、预览 API、动态主题注册和本地 Typora 主题导入。接手时必须保留并审查这些修改，不要重置工作区。
|
||||
|
||||
## 2. 已完成
|
||||
|
||||
### 2.1 项目骨架
|
||||
|
||||
- 建立 npm workspaces。
|
||||
- 建立 React + Vite 前端。
|
||||
- 建立 Fastify 后端。
|
||||
- 建立 `packages/core` 共享包。
|
||||
- 建立主题、测试和 Docker 目录。
|
||||
- 初始化本地 Git 仓库。
|
||||
|
||||
### 2.2 导出配置模型
|
||||
|
||||
`packages/core/src/export-config.ts` 已包含：
|
||||
|
||||
- 配置版本号；
|
||||
- A3、A4、A5、Letter、Legal、Tabloid 和自定义纸张；
|
||||
- 横向、纵向；
|
||||
- 四边页边距；
|
||||
- 页眉和页脚左右中区域；
|
||||
- 页码位置和格式；
|
||||
- PDF 元数据；
|
||||
- 打印背景、缩放和一级标题分页选项；
|
||||
- Zod 数据校验；
|
||||
- 默认 A4 技术文档预设。
|
||||
|
||||
### 2.3 主题接口
|
||||
|
||||
`packages/core/src/theme.ts`、`themes/typora-like` 和动态主题注册器已包含：
|
||||
|
||||
- 版本化主题清单；
|
||||
- 主题 ID、名称、版本、作者、许可证；
|
||||
- DOM 预设；
|
||||
- 支持能力声明；
|
||||
- 主体 CSS 和打印 CSS；
|
||||
- 自制 Typora 风格主题；
|
||||
- `#write` 兼容文档结构；
|
||||
- 内置主题和 `.local/themes` 本地主题动态扫描；
|
||||
- 主题 CSS 相对资源重写与受限资源接口；
|
||||
- 目录匹配、真实路径包含关系和外部 URL 安全检查。
|
||||
|
||||
内置主题为项目自有实现，没有复制 Typora 官方默认主题。用户可以通过导入工具将本机已安装的 Typora GitHub 默认主题复制到 Git 忽略的 `.local/themes/typora-github`，该副本仅供本机使用，不进入仓库或发布包。
|
||||
|
||||
### 2.4 Markdown 渲染核心
|
||||
|
||||
提交 `7224dfd` 已完成：
|
||||
|
||||
- `packages/renderer` 独立工作区；
|
||||
- Front Matter 解析；
|
||||
- Markdown 到安全 HTML；
|
||||
- 标题锚点；
|
||||
- 表格；
|
||||
- 任务列表；
|
||||
- 脚注；
|
||||
- highlight.js 代码高亮；
|
||||
- KaTeX 数学公式；
|
||||
- Mermaid 安全占位；
|
||||
- sanitize-html 安全过滤；
|
||||
- 元数据规范化；
|
||||
- 功能检测；
|
||||
- 统一 `<article id="write">` 输出；
|
||||
- 5 项渲染单元测试。
|
||||
|
||||
## 3. 当前未提交工作
|
||||
|
||||
以下内容已写入工作区，但尚未提交：
|
||||
|
||||
### 3.1 后端预览 API
|
||||
|
||||
- 将 Fastify 应用拆分为可测试的 `buildApp()`。
|
||||
- `POST /api/render`：接收 Markdown 并返回安全渲染结果。
|
||||
- `GET /api/themes`：动态返回内置和本地可用主题。
|
||||
- `GET /api/themes/:themeId/css`：返回主题 CSS 和打印 CSS。
|
||||
- `GET /api/themes/:themeId/assets/*`：返回经过路径校验的主题字体和图片。
|
||||
- 增加请求体积和参数类型检查。
|
||||
- 增加 4 项后端 API 测试。
|
||||
|
||||
### 3.2 网页预览
|
||||
|
||||
- Markdown 文本编辑区；
|
||||
- 本地 `.md` 文件读取；
|
||||
- 250ms 防抖实时预览；
|
||||
- 固定 210mm 宽度的 A4 纸张效果；
|
||||
- 内置和本地主题选择；
|
||||
- iframe 隔离主题 CSS，避免主题影响应用界面；
|
||||
- KaTeX 样式；
|
||||
- highlight.js 样式；
|
||||
- Mermaid 浏览器渲染；
|
||||
- Mermaid 改为按需加载；
|
||||
- Mermaid 使用逐个 `render()` 后注入安全 SVG；
|
||||
- 桌面双栏与移动端上下布局；
|
||||
- PDF 按钮保留为下一阶段入口。
|
||||
|
||||
### 3.3 文档及依赖
|
||||
|
||||
- README 已更新为预览阶段状态。
|
||||
- 增加 `npm run theme:import-typora` 本地主题导入命令。
|
||||
- `.local/` 已加入 Git 忽略规则。
|
||||
- 增加 Mermaid、KaTeX、highlight.js 和后端测试依赖。
|
||||
- `package-lock.json` 已更新。
|
||||
|
||||
## 4. 已执行验证
|
||||
|
||||
2026-07-25 在当前完整工作区成功执行：
|
||||
|
||||
```text
|
||||
npm test
|
||||
npm run typecheck
|
||||
npm run build
|
||||
git diff --check
|
||||
```
|
||||
|
||||
结果：
|
||||
|
||||
- 渲染器测试：5 项通过；
|
||||
- 后端测试：4 项通过；
|
||||
- 全项目类型检查通过；
|
||||
- 生产构建通过；
|
||||
- `git diff --check` 通过，仅出现工作区 LF 将来可能转为 CRLF 的提示。
|
||||
|
||||
已使用浏览器插件完成视觉验证：
|
||||
|
||||
- 导入并打开 `tmp/数据中台项目周报_2026_W30.md`；
|
||||
- 参考 `tmp/数据中台项目周报_2026_W30.pdf` 的 Typora 输出；
|
||||
- A4 纸张宽度、标题、长表格和滚动布局正常；
|
||||
- 本地 Typora GitHub 主题及 Open Sans 字体加载正常；
|
||||
- 内置主题与本地主题切换正常；
|
||||
- KaTeX、代码高亮和 Mermaid 正常显示；
|
||||
- 浏览器控制台无警告或错误。
|
||||
|
||||
视觉验证所启动的开发服务进程树已清理，3001 和 5173 端口无残留监听。
|
||||
|
||||
## 5. 当前注意事项
|
||||
|
||||
- 工作区不是干净状态，禁止重置。
|
||||
- `apps/web/src/App.tsx` 是当前预览实现的主要文件。
|
||||
- `apps/server/src/app.ts` 是新增的可测试 Fastify 应用。
|
||||
- `apps/server/src/theme-registry.ts` 负责内置和本地主题发现、CSS 处理及资源安全。
|
||||
- `.local/themes/typora-github` 是用户本机副本，已被 Git 忽略，不得提交。
|
||||
- Mermaid 已按需加载，但生产构建仍提示 `mermaid.core` 和 `cynefin` 两个分块超过 500 kB；这不影响功能，可后续优化。
|
||||
- PDF 生成尚未实现。
|
||||
- 资源目录上传、本地相对图片、临时目录和路径安全尚未实现。
|
||||
- Dockerfile 和 Compose 尚未实现。
|
||||
|
||||
## 6. 推荐接手顺序
|
||||
|
||||
### 阶段一：提交网页预览
|
||||
|
||||
网页预览、动态主题、本地 Typora 主题导入、全量验证和视觉检查均已完成。用户确认后创建独立提交：
|
||||
|
||||
```text
|
||||
feat: 实现网页实时预览
|
||||
```
|
||||
|
||||
### 阶段二：实现真实 PDF
|
||||
|
||||
开始编码前必须先给出具体设计和详细任务清单，等待用户确认。设计至少覆盖：
|
||||
|
||||
1. 增加 Playwright 和固定版本 Chromium。
|
||||
2. 抽取可复用的完整 HTML 文档组装器。
|
||||
3. 预览和 PDF 共用文章 HTML、主题 CSS、打印 CSS及资源。
|
||||
4. 等待字体、图片、KaTeX 和 Mermaid 完成。
|
||||
5. 实现 `POST /api/pdf`，响应 `application/pdf`。
|
||||
6. 前端启用“导出 PDF”按钮并下载文件。
|
||||
7. 增加 PDF 接口与端到端测试。
|
||||
|
||||
### 阶段三：导出配置界面
|
||||
|
||||
- 纸张尺寸；
|
||||
- 横向或纵向；
|
||||
- 四边页边距；
|
||||
- 页眉页脚开关；
|
||||
- 左中右内容区域；
|
||||
- 当前页和总页数；
|
||||
- 多种页码预设；
|
||||
- Front Matter 元数据覆盖；
|
||||
- 浏览器本地配置预设；
|
||||
- 配置 JSON 导入和导出。
|
||||
|
||||
### 阶段四：资源与安全
|
||||
|
||||
- Markdown 文件夹或 ZIP；
|
||||
- 相对图片解析；
|
||||
- 每请求独立临时目录；
|
||||
- 路径穿越防护；
|
||||
- 文件数量、大小和超时限制；
|
||||
- Chromium 并发和网络访问限制；
|
||||
- 请求结束可靠清理。
|
||||
|
||||
### 阶段五：容器化与交付
|
||||
|
||||
- Dockerfile；
|
||||
- Docker Compose；
|
||||
- Chromium 字体与中文字体；
|
||||
- 非 root 用户；
|
||||
- 健康检查；
|
||||
- 临时目录容量限制；
|
||||
- 内网部署说明；
|
||||
- 完整 PDF 样例和视觉回归验证。
|
||||
|
||||
## 7. 首版验收目标
|
||||
|
||||
- 可以选择或粘贴 Markdown；
|
||||
- 网页正确预览常用 Markdown、公式和 Mermaid；
|
||||
- 可以下载真实 PDF；
|
||||
- PDF 文本可搜索；
|
||||
- 预览与 PDF 基本一致；
|
||||
- 支持 A4、Letter、方向和边距；
|
||||
- 支持基础页眉、页脚和页码；
|
||||
- 支持主题切换扩展；
|
||||
- 相对图片可用；
|
||||
- 转换后不保留用户文档；
|
||||
- Docker Compose 可在内网启动。
|
||||
Reference in New Issue
Block a user