Camunda BPM平台中Optimize组件对含点号流程节点名称的处理优化

在Camunda BPM平台的Optimize组件使用过程中，我们发现当流程定义中包含带有点号（.）的节点名称时，在分析页面会出现渲染错误。这个问题影响了用户对流程实例的分析体验，特别是在需要查看异常流程节点时。

问题现象

当用户部署一个包含特殊字符（如点号）节点名称的流程定义后，在Optimize的分析页面选择特定流程实例时，系统会显示错误页面而非预期的分析视图。例如，名为"flow.node.name.with.dot"的节点就会触发这个问题。

技术背景

这个问题源于Optimize前端在处理流程节点ID时的DOM查询逻辑。原始代码直接使用节点ID作为CSS选择器，而没有对ID中的特殊字符进行转义处理。在CSS选择器语法中，点号具有特殊含义（类选择器），因此当节点ID包含点号时会导致选择器解析失败。

解决方案

我们采用了CSS.escape()方法来处理节点ID中的特殊字符。这个方法专门用于转义CSS选择器中的特殊字符，确保选择器能够正确匹配DOM元素。修改后的代码会在查询DOM元素前先对节点ID进行转义处理。

核心修改如下：

indicateClickableNodes = () => {
    if (this.props.data) {
      Object.keys(this.props.data).forEach((id) => {
        const node = document.body.querySelector(`[data-element-id=${CSS.escape(id)}]`);
        node?.classList.add('clickable');
      });
    }
};

影响范围

这个问题不仅影响含点号的节点名称，还会影响其他包含特殊字符的节点ID，如多实例子流程等。相同的解决方案可以一并修复这些情况下的渲染问题。

最佳实践建议

1. 在流程设计时，建议避免在节点名称中使用特殊字符，特别是点号、空格等
2. 如果必须使用特殊字符，建议采用驼峰命名法或下划线连接的方式
3. 在开发自定义前端组件时，应对所有动态生成的CSS选择器进行转义处理

版本影响

该修复已包含在Camunda Optimize 3.14.3和3.15.1版本中。使用这些或更新版本的用户将不再遇到此问题。

通过这次优化，Camunda BPM平台进一步提升了在处理复杂流程定义时的稳定性和兼容性，为用户提供了更可靠的分析体验。