[P3][performance] 前端节点列表无虚拟化，数百节点时渲染成瓶颈

[XiNian-dada]

现状

web/src/components/NodeList.vue:11 使用 v-for 全列表渲染：

<div v-for="node in nodes" :key="node.identity.node_id">

web/src/stores/nodes.ts:25 每次增量更新都重建数组：

const nodes = computed(() => Array.from(nodesMap.value.values()));

影响

• 200+ 节点时，每次增量触发完整数组重建
• DOM 渲染所有节点，无论是否在视口内
• 滚动性能下降，尤其在低端设备

建议

1. 虚拟滚动：

   • 使用 vue-virtual-scroller 或 tanstack-virtual
   • 只渲染视口内 + buffer 区域的节点

2. computed 优化（可选）：

   • 避免每次增量都 Array.from() 重建
   • 或使用 shallowRef + 手动触发更新

验收

• 节点列表支持虚拟滚动
• 500 节点时滚动帧率 > 30 FPS
• DOM 节点数 < 50（视口 + buffer）
• 前端测试通过

来源

• report/project-report-2026-06-11.md 性能瓶颈 [P1][maintainability] 缺少 CI 工作流（test / clippy / shellcheck / cross / audit） #7