DarkFoxTechnology ThinkFlow .cursorrules file for JavaScript

1. 技术栈选择
前端：Vue.js 
后端：Node.js
数据库：MongoDB
实时通信：Socket.IO
项目参考架构(仅供参考，可随时变更)：
src/
├── components/         // 可复用的 UI 组件
├── utils/              // 工具函数（如导出图片、数据转换等）
├── stores/             // 状态管理（如 Vuex 或 Pinia）
├── views/              // 页面视图
├── konva/              // Konva.js 相关逻辑
│   ├── MindMap.js      // 思维导图核心逻辑
│   ├── Node.js         // 节点组件
│   ├── Connection.js   // 连接线组件
│   └── utils.js        // Konva 工具函数
└── App.vue             // 主入口

状态管理：
思维导图通常涉及复杂的状态（如节点数据、选中状态、缩放比例等），使用状态管理工具Vuex来管理这些状态。如果项目复杂度高，使用 Pinia（Vuex 的轻量替代）。
UI 组件库：如果需要快速构建 UI，可以考虑 Element Plus 或 Vuetify。
代码质量：
ESLint 和 Prettier：配置代码规范和格式化工具，确保代码风格一致。
Git Hooks：使用 Husky 和 lint-staged，在提交代码前自动运行 lint 和测试。
TypeScript：如果项目复杂度高，建议使用 TypeScript 增强代码的可维护性和类型安全。

2. 前端实现
节点展示：使用图形库Konva.js来绘制思维导图。
快捷键支持：为常用操作（如添加节点、删除节点、撤销/重做）添加快捷键支持。
撤销/重做功能：实现撤销/重做功能，支持多步操作。
自动保存：定期自动保存思维导图数据，防止数据丢失。
响应式设计：确保思维导图在不同设备（桌面、平板、手机）上都能正常显示和操作。
节点交互：实现节点的添加、删除、编辑功能。
布局算法：实现自动布局（如层次布局、力导向布局）和手动调整布局。
节点折叠/展开：支持折叠和展开子节点，简化复杂思维导图的显示。
搜索与过滤：支持按关键词搜索节点，并高亮显示结果。
多选操作：支持框选多个节点，进行批量操作（如移动、删除）。

3. 后端实现
API设计：设计RESTful API来处理前端请求，如获取思维导图、添加节点、删除节点等。
节点样式：支持自定义节点样式（如颜色、形状、大小）。
连接线样式：支持自定义连接线样式（如颜色、粗细、箭头）。
节点布局：实现自动布局算法（如层次布局、力导向布局），确保节点分布合理。
节点折叠/展开：支持折叠和展开子节点，以简化复杂思维导图的显示。
实时更新：使用Socket.IO实现实时更新，确保多个用户可以同时编辑思维导图。当用户添加、删除或编辑节点时，通过 Socket.IO 将操作广播给其他用户。
使用 Operational Transformation (OT) 或 CRDT 算法解决冲突。
角色管理：实现不同用户的权限控制（如只读、编辑、管理员）。
操作记录：记录用户的操作历史，方便追踪和审计
导出功能：Konva.js 内置了导出图片的功能，可以通过 stage.toDataURL() 实现。建议将导出功能封装为工具函数；
导入功能：支持从 JSON、Markdown 或其他格式导入思维导图数据。
数据验证：对导入的数据进行验证，确保格式正确。
导出功能：支持导出为图片（PNG、JPEG）、PDF、JSON 等格式。
数据兼容性：确保导出的数据可以重新导入并恢复原有状态。
实时同步：使用 Socket.IO 实现多用户实时编辑。
冲突解决：使用 Operational Transformation (OT) 或 CRDT 算法解决编辑冲突。
用户标识：为每个用户分配唯一标识，并在界面上显示当前编辑者。

4. 部署
本地开发
环境变量：使用 .env 文件管理开发环境变量。
热重载：配置 Webpack 或 Vite 的热重载功能，提高开发效率。
生产部署
容器化：使用 Docker 容器化应用，方便部署和扩展。
CI/CD：配置 CI/CD 流水线（如 GitHub Actions、GitLab CI），实现自动化测试和部署。
监控与日志：使用 Sentry 或 LogRocket 监控前端错误，使用 ELK 或 Prometheus 监控后端性能。

5. 测试与优化
测试：
使用 Jest 或 Vitest 进行单元测试。
覆盖率：确保单元测试覆盖率达到 80% 以上。
使用 Cypress 进行端到端测试。
使用 Chrome DevTools 的 Performance 面板分析性能瓶颈。
Lighthouse：使用 Lighthouse 进行性能评分，并优化加载速度。

性能优化：Konva.js 基于 Canvas 渲染，性能较好，但仍需注意以下优化点：
        节点数量：避免一次性渲染过多节点，可以使用虚拟滚动或分页加载。
        事件监听：为每个节点添加事件监听器时，使用事件委托（Event Delegation）来减少内存占用。
        图层分离：将静态内容（如背景）和动态内容（如节点）分离到不同的 Layer 中，以减少重绘。
        虚拟滚动：对于包含大量节点的思维导图，使用虚拟滚动技术，只渲染可见区域的节点。
        事件委托：使用事件委托减少事件监听器的数量，提高性能。
        图层分离：将静态内容（如背景）和动态内容（如节点）分离到不同的 Layer 中，以减少重绘。
        批量绘制：使用 layer.batchDraw() 减少绘制次数，提高性能。
模块化设计
组件拆分：将思维导图的各个部分（如节点、连接线、工具栏）拆分为独立组件。
工具函数封装：将通用功能（如导出图片、数据转换）封装为工具函数，方便复用。
垃圾回收：及时销毁不再使用的节点和连接线，避免内存泄漏。
数据分片：对于超大型思维导图，将数据分片加载，避免一次性加载过多数据。

6. 文档与维护
快速入门：编写快速入门指南，帮助用户快速上手。
功能说明：详细说明每个功能的使用方法。
FAQ：整理常见问题解答，减少用户咨询。
项目结构：说明项目目录结构和模块划分。
API 文档：记录后端 API 和前端组件的接口说明。
部署指南：提供详细的部署步骤和注意事项。
Git 分支：采用 Git Flow 或 GitHub Flow 管理分支。
版本发布：遵循语义化版本控制（SemVer），并编写发布说明。

7.安全性
数据验证：对用户输入的数据进行验证，防止恶意数据注入。
权限控制：实现不同用户的权限控制（如只读、编辑、管理员）。
数据加密：对敏感数据进行加密存储和传输。
HTTPS：确保生产环境使用 HTTPS 加密通信。
CORS：配置正确的 CORS 策略，防止跨站请求攻击。

8.拓展性
插件系统：设计插件系统，支持第三方扩展功能。
API 开放：提供开放的 API，方便开发者自定义功能。
主题支持：支持自定义主题，允许用户切换不同的界面风格。
多语言支持：使用 i18n 实现多语言支持。
本地化：根据用户地区自动切换语言和日期格式。

9. 错误处理与日志
错误边界：在关键组件中添加错误边界，防止整个应用崩溃。
友好提示：在用户操作失败时，提供友好的错误提示。
加载状态：在异步操作（如保存、导出）期间显示加载状态。
日志记录
前端日志：使用 Sentry 或 LogRocket 记录前端错误。
后端日志：使用 Winston 或 Bunyan 记录后端日志。

10.用户体验优化
交互设计
拖拽体验：优化节点拖拽的流畅性和准确性。
动画效果：为节点添加、删除、移动等操作添加平滑的动画效果。
响应式设计
移动端适配：确保思维导图在移动设备上能正常显示和操作。
缩放与平移：支持手势缩放和平移，提升移动端体验。
主题与样式
主题切换：支持浅色和深色主题切换。
自定义样式：允许用户自定义节点和连接线的样式。