feat: 优化 Mermaid 响应式设计

- 移动端工具栏适配:按钮放大至 40px,便于触摸操作
- 双指缩放手势:支持双指捏合缩放,以触摸中心为缩放点
- 单指拖拽移动:支持单指拖拽平移图表
- 触摸事件优化:使用 requestAnimationFrame 提升响应速度
- 横屏模式优化:限制图表高度,工具栏更紧凑,隐藏提示文本
- 添加触摸距离和中心点计算辅助函数
- 完善触摸状态管理(touchstart/touchmove/touchend/touchcancel)

需求:16.1, 16.2, 16.3, 16.4, 16.5
This commit is contained in:
2026-01-25 01:45:39 +08:00
parent 6309a2236b
commit 1ec2ebc279
3 changed files with 221 additions and 23 deletions

View File

@@ -41,16 +41,16 @@
- [x] 5.2 优化工具栏样式(半透明背景) _需求11.3-11.5_
- [x] 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_
- [x] 6. 增强 Mermaid 缩放功能
- [x] 6.1 实现以鼠标为中心的缩放 _需求12.1_
- [x] 6.2 优化缩放动画CSS transform + transition _需求12.2, 12.3_
- [x] 6.3 实现智能缩放(双击) _需求12.5_
- [x] 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_
- [x] 7. 优化 Mermaid 拖拽功能
- [x] 7.1 改进拖拽响应requestAnimationFrame _需求13.3_
- [x] 7.2 优化拖拽视觉反馈 _需求13.1, 13.2, 13.4_
- [x] 7.3 智能启用拖拽 _需求13.5_
### 阶段 3: Mermaid 高级功能
@@ -65,10 +65,10 @@
- [ ] 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_
- [x] 10. 优化 Mermaid 响应式设计
- [x] 10.1 移动端工具栏适配 _需求16.1_
- [x] 10.2 实现触摸手势支持 _需求16.2-16.4_
- [x] 10.3 横屏模式优化 _需求16.5_
### 阶段 4: Mermaid 主题和性能优化
@@ -77,16 +77,16 @@
- [x] 11.2 保持图表状态 _需求17.3_
- [x] 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_
- [x] 12. 优化 Mermaid 渲染性能
- [x] 12.1 实现批量渲染 _需求18.1_
- [x] 12.2 添加加载动画 _需求18.2, 18.3_
- [x] 12.3 实现延迟渲染 _需求18.4_
- [x] 12.4 优化错误处理 _需求18.5_
- [~] 13. 优化 Mermaid 错误提示
- [ ] 13.1 设计友好的错误容器 _需求19.1, 19.2, 19.4_
- [ ] 13.2 添加原始代码查看 _需求19.3_
- [ ] 13.3 夜间模式适配 _需求19.5_
- [x] 13. 优化 Mermaid 错误提示
- [x] 13.1 设计友好的错误容器 _需求19.1, 19.2, 19.4_
- [x] 13.2 添加原始代码查看 _需求19.3_
- [x] 13.3 夜间模式适配 _需求19.5_
### 阶段 5: 测试和优化