nanhaoluo
1c15e46ad6
- 在工具栏添加全屏按钮（⛶ 图标） - 实现全屏模式进入和退出功能 - 全屏模式下保持缩放和拖拽功能可用 - 支持 ESC 键退出全屏 - 退出全屏时恢复图表原始状态（缩放级别和滚动位置） - 全屏模式下禁用页面滚动 - 添加全屏按钮激活状态样式 - 在清理函数中添加全屏事件监听器清理 - 全屏模式下工具栏始终可见，背景更明显 - 全屏容器占满整个视口，居中显示图表 需求：14.1, 14.2, 14.3, 14.4, 14.5
4.5 KiB
4.5 KiB
实施计划：PJAX、Lazyload 和 Mermaid 全面优化
概述
本实施计划整合了 PJAX 页面无刷新跳转、Lazyload 图片懒加载和 Mermaid 图表渲染的全面优化。
实施策略：
- 向后兼容：保持现有 API 和配置不变
- 性能优先：优化渲染性能，减少卡顿
- 用户体验：增强交互功能，提升视觉效果
任务
阶段 1: PJAX 和 Lazyload 核心修复
-
1. 创建统一的资源清理管理器
- 封装
cleanupPjaxResources()函数 - 清理 Lazyload Observer、Zoomify、Tippy、Mermaid 实例
- 清理动态 style 和 script 标签
- 需求：1.1-1.4, 2.3, 6.1
- 封装
-
2. 优化 Lazyload 生命周期
- 2.1 添加 Observer 存在性检查 需求：2.1, 2.2
- 2.2 优化图片加载函数（使用 requestAnimationFrame） 需求：3.1-3.3
- 2.3 实现滚动监听降级方案 需求：2.4, 8.2
-
3. 重构 PJAX 事件处理器
- 3.1 优化
pjax:beforeReplace事件 需求：1.1-1.4 - 3.2 优化
pjax:complete事件（消除重复初始化） 需求：1.5, 1.6, 4.1-4.4 - 3.3 优化
pjax:end事件 需求：1.7
- 3.1 优化
-
4. 实现内联脚本执行器
- 提取并执行新页面的 script 标签
- 添加错误隔离机制
- 需求：4.1-4.5
阶段 2: Mermaid 显示效果优化
-
5. 优化 Mermaid 工具栏
- 5.1 实现工具栏自动隐藏 需求：11.1, 11.2
- 5.2 优化工具栏样式（半透明背景） 需求：11.3-11.5
- 5.3 添加按钮提示（tooltip） 需求：20.2
-
6. 增强 Mermaid 缩放功能
- 6.1 实现以鼠标为中心的缩放 需求：12.1
- 6.2 优化缩放动画（CSS transform + transition） 需求：12.2, 12.3
- 6.3 实现智能缩放（双击） 需求：12.5
- 6.4 优化缩放按钮状态 需求：12.4, 20.3
-
7. 优化 Mermaid 拖拽功能
- 7.1 改进拖拽响应（requestAnimationFrame） 需求：13.3
- 7.2 优化拖拽视觉反馈 需求：13.1, 13.2, 13.4
- 7.3 智能启用拖拽 需求：13.5
阶段 3: Mermaid 高级功能
-
8. 实现 Mermaid 全屏模式
- 8.1 添加全屏按钮 需求：14.1
- 8.2 全屏模式功能保持 需求：14.2, 14.3
- 8.3 全屏模式退出（ESC 键） 需求：14.4, 14.5
-
9. 实现 Mermaid 导出功能
- 9.1 添加导出按钮和菜单 需求：15.1
- 9.2 实现 PNG 导出 需求：15.2, 15.4
- 9.3 实现 SVG 导出 需求：15.3, 15.4
- 9.4 添加导出错误处理 需求：15.5
-
10. 优化 Mermaid 响应式设计
- 10.1 移动端工具栏适配 需求：16.1
- 10.2 实现触摸手势支持 需求：16.2-16.4
- 10.3 横屏模式优化 需求：16.5
阶段 4: Mermaid 主题和性能优化
-
11. 优化 Mermaid 主题同步
- 11.1 实现主题自动切换 需求：17.1, 17.2
- 11.2 保持图表状态 需求：17.3
- 11.3 添加主题切换动画 需求：17.4, 17.5
-
12. 优化 Mermaid 渲染性能
- 12.1 实现批量渲染 需求：18.1
- 12.2 添加加载动画 需求：18.2, 18.3
- 12.3 实现延迟渲染 需求：18.4
- 12.4 优化错误处理 需求：18.5
-
13. 优化 Mermaid 错误提示
- 13.1 设计友好的错误容器 需求：19.1, 19.2, 19.4
- 13.2 添加原始代码查看 需求：19.3
- 13.3 夜间模式适配 需求：19.5
阶段 5: 测试和优化
-
14. 单元测试
- 14.1 PJAX 资源清理测试
- 14.2 Lazyload 功能测试
- 14.3 Mermaid 渲染测试
-
15. 集成测试
- 15.1 PJAX 完整流程测试
- 15.2 Mermaid 交互测试
- 15.3 响应式测试
-
16. 性能测试
- 16.1 内存泄漏检测
- 16.2 渲染性能测试
- 16.3 交互性能测试
-
17. 浏览器兼容性测试
- 测试主流浏览器和移动端浏览器
- 测试降级方案
-
18. 文档和代码审查
- 更新代码注释和 JSDoc
- 代码风格检查
实施优先级
P0 (必须完成):
- 任务 1-4: PJAX 和 Lazyload 核心修复
- 任务 5: Mermaid 工具栏优化
- 任务 11: Mermaid 主题同步
- 任务 12: Mermaid 性能优化
P1 (重要):
- 任务 6-7: Mermaid 缩放和拖拽优化
- 任务 10: Mermaid 响应式设计
- 任务 13: Mermaid 错误提示优化
P2 (可选):
- 任务 8: Mermaid 全屏模式
- 任务 9: Mermaid 导出功能
P3 (增强):
- 任务 14-18: 测试和文档