feat: 完善导出设置与打印预览
This commit is contained in:
SkyJourney
+76
-35
@@ -19,12 +19,13 @@ main
|
||||
已有提交：
|
||||
|
||||
```text
|
||||
ec14f79 feat: 扩展本地主题兼容能力
|
||||
fa07472 feat: 实现网页实时预览
|
||||
7224dfd feat: 实现 Markdown 渲染核心
|
||||
ec48bce chore: 初始化项目骨架
|
||||
```
|
||||
|
||||
当前工作区存在未提交修改，主要是主题基础 CSS 组合、安全的 CSS `@import` 展开、三套本地 Typora 默认主题导入和主题开发文档。接手时必须保留并审查这些修改，不要重置工作区。
|
||||
当前工作区存在未提交修改，主要是导出配置版本 2、导出设置抽屉、浏览器缓存和实时纸张尺寸及页边距预览。接手时必须保留并审查这些修改，不要重置工作区。
|
||||
|
||||
## 2. 已完成
|
||||
|
||||
@@ -105,34 +106,62 @@ ec48bce chore: 初始化项目骨架
|
||||
- 桌面双栏与移动端上下布局；
|
||||
- 5 项渲染器测试和 4 项后端测试。
|
||||
|
||||
### 2.6 主题兼容增强
|
||||
|
||||
提交 `ec14f79` 已完成：
|
||||
|
||||
- 主题清单可选基础 CSS；
|
||||
- 基础 CSS、主体 CSS、打印 CSS 固定组合顺序；
|
||||
- 安全的相对 CSS `@import` 展开和资源 URL 重写；
|
||||
- CSS 导入深度、循环、外部 URL 和越界路径检查；
|
||||
- GitHub、Pixyll 和 Whitey 三套本地 Typora 白色主题导入；
|
||||
- 可恢复替换和默认防覆盖；
|
||||
- 主题开发指南；
|
||||
- 后端测试增至 6 项。
|
||||
|
||||
## 3. 当前未提交工作
|
||||
|
||||
以下内容已写入工作区，但尚未提交：
|
||||
|
||||
### 3.1 主题清单与服务端主题注册
|
||||
### 3.1 导出配置版本 2
|
||||
|
||||
- 主题清单新增可选 `base` 字段。
|
||||
- CSS 按基础 CSS、主体 CSS、打印 CSS 的顺序组合，预览与未来 PDF 可复用同一结果。
|
||||
- 支持带引号或 `url()` 写法的相对 `@import`。
|
||||
- 限制导入深度为 8 层，并检测循环引用。
|
||||
- 阻止外部 URL、绝对路径和 `..` 越界导入。
|
||||
- 按每个 CSS 文件所在目录重写相对字体和图片 URL。
|
||||
- 增加基础 CSS 组合、相对导入、循环导入和外部导入测试，后端测试增至 6 项。
|
||||
- 纸张只保留 A3、A4、A5、US-Letter 和 US-Legal。
|
||||
- 固定纸张尺寸分别为 297×420、210×297、148×210、216×279 和 216×356mm。
|
||||
- 默认 A4 纵向，四边页边距均为 16mm。
|
||||
- 统一采用 96 CSS px/in、72 PDF pt/in 和 25.4mm/in 的物理单位换算。
|
||||
- 保留横向和纵向。
|
||||
- 页脚模型收敛为页码设置，支持五种页码样式、对齐和起始页码。
|
||||
- 校验页边距之和必须为正文保留正尺寸区域。
|
||||
- 增加 6 项共享配置测试。
|
||||
|
||||
### 3.2 本地 Typora 默认主题导入
|
||||
### 3.2 导出设置和浏览器缓存
|
||||
|
||||
- 导入器从本机 Typora 安装目录读取 `resources/style`。
|
||||
- 一次导入 GitHub、Pixyll 和 Whitey 三套适合打印的白色默认主题。
|
||||
- 每套本地主题包含独立的 Typora 基础 CSS、主题 CSS 和所需资源。
|
||||
- 主题版本从 Typora `resources/package.json` 读取；当前本机版本为 1.14.7。
|
||||
- 默认拒绝覆盖已有主题；`--replace` 使用暂存目录并将旧副本备份到 `.local/theme-backups/<时间戳>`。
|
||||
- 当前三套主题及替换操作产生的备份均位于被 Git 忽略的 `.local`，不得提交或发布。
|
||||
- 增加响应式右侧导出设置抽屉。
|
||||
- 支持五种纸张、方向和四边页边距。
|
||||
- 已提供页眉左中右内容、页脚页码样式、位置、起始页码和分隔线控件。
|
||||
- 配置和主题选择写入版本化 `localStorage`，不缓存 Markdown 正文。
|
||||
- 缓存缺失、损坏或版本过期时恢复默认配置。
|
||||
- 切换到更小纸张时自动等比例收敛过大的旧页边距。
|
||||
- 增加 3 项浏览器缓存测试和 3 项打印媒体预览测试。
|
||||
|
||||
### 3.3 文档及依赖
|
||||
### 3.3 实时纸张预览
|
||||
|
||||
- README 已更新三套本地 Typora 主题的导入和替换说明。
|
||||
- 新增 `docs/THEMES.md`，说明主题目录、清单字段、CSS 加载顺序、`#write` DOM、相对资源、安全限制和自定义主题流程。
|
||||
- `npm run theme:import-typora` 保持为本地导入入口。
|
||||
- 纸张尺寸、方向和四边页边距实时作用于预览。
|
||||
- 删除本地主题专用的 8mm 外边距特例。
|
||||
- 在主题 CSS 后追加共享几何 CSS，统一清除 `body` 和 `#write` 的页面宽度、内外边距限制。
|
||||
- 网页预览将主题的 `@media print` 规则按原始位置转换为屏幕预览规则，使 Typora GitHub 等主题使用与 PDF 相同的打印字号和行高。
|
||||
- 固定逻辑页面后续按 96 CSS px/in 分页，预览显示倍率只缩放外层，不参与正文换行和分页计算。
|
||||
- 页眉和页码配置将在下一阶段分页预览中显示。
|
||||
|
||||
### 3.4 Mermaid 配置与错误隔离
|
||||
|
||||
- 使用 Mermaid 官方 npm 包，当前锁定安装版本为 11.16.0。
|
||||
- 无区块配置时显式使用 `default` 主题和 `classic` 外观。
|
||||
- Mermaid 区块内容原样交给官方解析器，支持区块内部的 YAML `config` frontmatter。
|
||||
- 允许区块覆盖主题、外观、主题变量、布局及图表专属配置。
|
||||
- 固定 `strict` 安全级别、自动启动开关、文本和边数量限制、错误输出策略，并禁止区块注入原始 `themeCSS`。
|
||||
- 单个 Mermaid 图表解析或渲染失败时显示局部错误，其余图表继续渲染。
|
||||
- 增加 Mermaid 站点配置、单图错误隔离及区块 frontmatter 保留测试。
|
||||
|
||||
## 4. 已执行验证
|
||||
|
||||
@@ -147,7 +176,9 @@ git diff --check
|
||||
|
||||
结果：
|
||||
|
||||
- 渲染器测试：5 项通过；
|
||||
- 共享配置测试：6 项通过；
|
||||
- 渲染器测试：6 项通过；
|
||||
- 前端测试：10 项通过；
|
||||
- 后端测试：6 项通过；
|
||||
- 全项目类型检查通过；
|
||||
- 生产构建通过；
|
||||
@@ -157,6 +188,17 @@ git diff --check
|
||||
|
||||
已使用浏览器插件完成视觉验证：
|
||||
|
||||
- 导出设置抽屉桌面布局正常；
|
||||
- 尺寸选择器只包含五种目标纸张；
|
||||
- 默认 A4 纵向及 16mm 四边距正确；
|
||||
- A5 横向和 12.5mm 上边距实时反映到纸张；
|
||||
- GitHub 主题的 `#write` 宽度、最大宽度、内外边距已由共享几何层接管；
|
||||
- 刷新页面后纸张、方向、页边距、页眉和页码配置可以恢复；
|
||||
- 恢复默认功能正常；
|
||||
- 浏览器控制台无警告或错误。
|
||||
|
||||
此前主题阶段已使用浏览器插件完成视觉验证：
|
||||
|
||||
- 导入并打开 `tmp/数据中台项目周报_2026_W30.md`；
|
||||
- 参考 `tmp/数据中台项目周报_2026_W30.pdf` 的 Typora 输出；
|
||||
- GitHub、Pixyll 和 Whitey 三套保留的本地主题均可正常切换；
|
||||
@@ -172,6 +214,9 @@ git diff --check
|
||||
|
||||
- 工作区不是干净状态，禁止重置。
|
||||
- `apps/web/src/App.tsx` 是当前预览实现的主要文件。
|
||||
- `apps/web/src/ExportSettingsDrawer.tsx` 是导出设置界面。
|
||||
- `apps/web/src/export-settings.ts` 负责版本化浏览器缓存。
|
||||
- `packages/core/src/export-config.ts` 是纸张、页边距、页眉页脚和页码的共享模型。
|
||||
- `apps/server/src/app.ts` 是新增的可测试 Fastify 应用。
|
||||
- `apps/server/src/theme-registry.ts` 负责内置和本地主题发现、CSS 处理及资源安全。
|
||||
- `.local/themes/typora-*` 是用户本机副本，已被 Git 忽略，不得提交。
|
||||
@@ -184,17 +229,20 @@ git diff --check
|
||||
|
||||
## 6. 推荐接手顺序
|
||||
|
||||
### 阶段一：提交主题兼容增强
|
||||
### 阶段一：完成分页预览
|
||||
|
||||
网页实时预览已在 `fa07472` 提交。当前主题基础 CSS、三套本地 Typora 主题导入、主题开发文档、全量验证和视觉检查均已完成。用户确认后创建独立提交：
|
||||
导出设置、缓存和实时纸张几何已经完成。下一步按已确认设计引入 Paged.js，并实现：
|
||||
|
||||
```text
|
||||
feat: 扩展本地主题兼容能力
|
||||
```
|
||||
- 逐页预览；
|
||||
- 页眉左中右内容及变量替换；
|
||||
- 页脚页码、总页数、对齐和起始页码；
|
||||
- Mermaid 整体换页和超高图按页面正文高度等比例缩放；
|
||||
- 字体、图片和 Mermaid 完成后再分页；
|
||||
- 预览与未来 PDF 共用分页 HTML 和 CSS。
|
||||
|
||||
### 阶段二：实现真实 PDF
|
||||
|
||||
开始编码前必须先给出具体设计和详细任务清单，等待用户确认。设计至少覆盖：
|
||||
分页预览完成并提交后再实现：
|
||||
|
||||
1. 增加 Playwright 和固定版本 Chromium。
|
||||
2. 抽取可复用的完整 HTML 文档组装器。
|
||||
@@ -204,15 +252,8 @@ feat: 扩展本地主题兼容能力
|
||||
6. 前端启用“导出 PDF”按钮并下载文件。
|
||||
7. 增加 PDF 接口与端到端测试。
|
||||
|
||||
### 阶段三：导出配置界面
|
||||
### 阶段三：导出配置扩展
|
||||
|
||||
- 纸张尺寸；
|
||||
- 横向或纵向；
|
||||
- 四边页边距；
|
||||
- 页眉页脚开关；
|
||||
- 左中右内容区域；
|
||||
- 当前页和总页数；
|
||||
- 多种页码预设；
|
||||
- Front Matter 元数据覆盖；
|
||||
- 浏览器本地配置预设；
|
||||
- 配置 JSON 导入和导出。
|
||||
|
||||
Reference in New Issue
Block a user