2.7 KiB
2.7 KiB
PDF ↔ 思维导图集成实施计划(基于 Grok 方案)
阶段 0:准备
- 明确依赖:
@pdfme/pdfjs-dist(或pdfjs-dist)、simple-mind-map、自研事件总线、Yjs/Supabase 持久化。 - 输出数据结构草案:
PDFQuote、app://pdf/{fileId}?page=&range=协议、Yjs/Supabase 存储字段。 - 收集 MinerU OCR 样例,定义图片型 PDF 的转换策略。
阶段 0 Checklist
- 依赖/许可确认(pdf.js、simple-mind-map、矿U OCR)
PDFQuote/URI schema 初稿- MinerU OCR 样例与坐标规范
阶段 1:基础 Viewer 与选区
- 开发
PDFViewerWithQuote组件:基于 pdf.js,监听selectionchange,生成rects并绘制 overlay。 - 提供
onQuoteCreate回调与activeQuote反向高亮,实现跨页滚动定位。
阶段 1 Checklist
- 初始化 pdf.js viewer + text layer
- 选区捕获逻辑(支持跨页、多 range)
- 高亮 overlay 渲染/清理
PDFQuote对象结构与类型定义- 反向滚动 + 高亮入口
阶段 2:思维导图节点接入
- 在 simple-mind-map 注册
pdfQuote节点,封装渲染样式与点击事件。 - 建立全局事件:
pdf:quote-created、mindmap:jump-to-pdf,实现双向联动。
阶段 2 Checklist
- 自定义节点 renderer(UI/交互)
- PDF→mindmap 插入流程
- mindmap→PDF 因点击触发跳转
- Slash/工具栏入口(浮动工具栏 “打开 PDF 引用”)
阶段 3:持久化与 URI 协议
- 将
PDFQuote/节点引用写入 Yjs + Supabase,统一app://pdf/{fileId}?page=&range=协议。 - 页面加载解析 URI,完成跳转与权限校验。
阶段 3 Checklist
- Supabase
pdf_quotesSchema / 迁移(含 API) - Yjs 引用同步 schema
- URI 解析器 + 跳转钩子
- 权限/安全校验(RLS + API 鉴权)
阶段 4:图片型 PDF(MinerU 支持)
- 调用 MinerU OCR,生成虚拟 TextLayer 供前端选择/高亮。
- 统一文本/图片型 PDF 的渲染与编辑接口。
阶段 4 Checklist
- OCR 数据解析 & 坐标转换
- 自定义 TextLayer(基于 OCR)
- 高亮 overlay 兼容
- 失败回退/提示
阶段 5:性能与体验
- 虚拟滚动、懒加载、移动端选区、暗色主题适配。
阶段 5 Checklist
- 大文档性能基线
- 移动端/触屏交互
- UI 适配(暗色、缩放)
- 错误兜底
阶段 6:QA 与文档
- Playwright/Storybook 覆盖“选区 → 节点 → 跳转”闭环。
- 输出使用指南、API 文档、发布说明。
阶段 6 Checklist
- 自动化测试脚本
- 开发/运营文档
- 发布与观察项