Refly项目中的Canvas节点数量限制优化方案

在Refly项目的AI工作区模块中，Canvas（画布）作为核心交互界面，承担着节点编辑与管理的重要功能。近期开发团队发现了一个潜在的性能风险：当前实现未对画布中的节点数量进行限制，这可能导致两个关键问题：

1. 网络传输负担：当用户创建的节点数量过多时，序列化后的数据包体积会显著增大
2. 客户端内存压力：大规模节点数据可能引发浏览器内存溢出(OOM)错误

技术实现方案

核心设计思路

采用前端防御性编程策略，在节点添加操作的最上游进行数量校验。具体实现位置选择在useAddNode这个React自定义Hook中，这是所有节点添加操作的统一入口点。

关键技术点

1. 阈值设定：建议初始限制为100个节点（可根据实际性能测试调整）
2. 用户提示：当达到限制时，通过非阻塞式通知提醒用户
3. 校验时机：在节点创建前进行预检查，避免无效操作

代码实现建议

在packages/ai-workspace-common/src/hooks/canvas/use-add-node.ts中增加如下逻辑：

const MAX_NODES = 100;

function useAddNode() {
  // 现有逻辑...
  
  const addNode = useCallback((nodeData) => {
    if(currentNodes.length >= MAX_NODES) {
      showToast('已达到最大节点数量限制');
      return;
    }
    // 原有添加逻辑
  }, [currentNodes]);
}

技术决策考量

选择在Hook层实现限制而非UI组件层，主要基于以下考虑：

• 关注点分离：保持业务逻辑与UI展示解耦
• 一致性保证：无论通过何种方式添加节点（拖拽、菜单、快捷键）都会触发校验
• 可维护性：修改只需调整单一入口点

扩展优化方向

1. 动态限制策略：根据设备性能自动调整上限
2. 分级警告：在接近限制时（如80%）提前提示
3. 性能监控：集成Sentry等工具监控实际运行性能

该方案已在Refly项目的f2d56ba提交中实现，经过测试可有效防止节点过量导致的性能问题，同时保持了良好的用户体验。对于开发者而言，这种防御性编程模式也值得在其他需要资源限制的场景中借鉴。