Files
mnote/design/pdf-plan.md
T

85 lines
2.7 KiB
Markdown
Raw Permalink Normal View History

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