fix: 修复长文档分页与滚动同步

README.md

@@ -12,11 +12,12 @@
 - 动态主题清单、CSS 和静态资源接口；
 - Markdown、Front Matter、安全过滤和扩展语法渲染核心；
 - 表格、任务列表、脚注、代码高亮、KaTeX 和 Mermaid；
-- iframe 隔离的 A4 页面预览与主题切换；
+- iframe 隔离的真实分页预览、双向滚动同步与主题切换；
+- 五种纸张、页边距、页眉、页码和浏览器配置缓存；
 - 内置 Typora 风格主题，以及仅供本机使用的三套白色 Typora 默认主题导入工具；
 - Docker 与 PDF 渲染目录预留。
 
-Chromium PDF 下载、完整导出配置面板和本地资源文件处理将在后续阶段实现。
+Chromium PDF 下载和本地资源文件处理将在后续阶段实现。
 
 ## 本地开发
 
@@ -35,6 +36,44 @@ npm run dev
 
 页面支持直接编辑 Markdown，或选择本地 `.md` 文件。文件内容将读取到当前浏览器页面并发送给内网转换服务，不写入数据库。
 
+编辑区和分页预览使用双向比例滚动同步。在任意一侧滚动时，另一侧会跟随到相同的全文阅读进度，方便定位并修改较长文档。
+
+## Mermaid 长标签
+
+流程图节点标签的默认最大宽度为 320px。单个 Mermaid 区块可以通过 config frontmatter 覆盖：
+
+````markdown
+```mermaid
+---
+config:
+  flowchart:
+    wrappingWidth: 360
+---
+flowchart TB
+  A["较长的节点名称<br/>第二行说明"] --> B["下一个节点"]
+```
+````
+
+需要自动换行时可以使用 Mermaid Markdown String：
+
+````markdown
+```mermaid
+flowchart LR
+  A["`这是一段可以由 Mermaid 自动换行的较长节点文字`"]
+```
+````
+
+个别节点仍需缩小字体时，优先使用 Mermaid 自带的 `classDef`：
+
+````markdown
+```mermaid
+flowchart LR
+  A["较长节点"] --> B["普通节点"]
+  classDef compact font-size:12px;
+  class A compact;
+```
+````
+
 ## 本地导入 Typora 默认主题
 
 项目不会打包或提交 Typora 官方默认主题。如本机已安装 Typora，可以将 GitHub、Pixyll 和 Whitey 三套适合打印的白色默认主题及 Typora 基础 CSS 复制到 Git 忽略的本地主题目录：