EventCatalog项目中的Tree View路径重复问题分析与修复

在EventCatalog项目2.23.1版本中，开发团队引入了一个新的Tree View功能，这个功能为用户提供了更直观的导航体验。然而，在实际使用过程中，用户发现了一个影响导航功能的路径问题。

问题现象

当用户在配置了基础路径(basePath)的环境中启用Tree View功能时，系统生成的导航链接会出现基础路径被重复添加的情况。例如，当用户访问https://mydomain.tld/basePath/docs/页面时，点击某个域名的链接后，系统会错误地生成https://mydomain.tld/basePath/basePath/domains/mydomain/1.0.0/这样的URL，而正确的URL应该是https://mydomain.tld/basePath/domains/mydomain/1.0.0/。

问题根源

经过开发团队分析，这个问题源于Tree View组件中的路径生成逻辑存在缺陷。在生成导航链接时，系统错误地重复添加了基础路径部分。具体来说，问题出现在Tree View组件的路径处理函数中，该函数没有正确处理已经包含基础路径的情况。

解决方案

开发团队提出了两种解决方案：

1. 直接修复方案：修改路径生成逻辑，确保基础路径不会被重复添加。这需要对路径拼接逻辑进行重构，确保在生成最终URL时只包含一次基础路径。

2. 更健壮的解决方案：通过分析当前路径，智能识别出正确的路径结构。具体实现方式是使用路径分割技术，从当前URL中提取出"docs"或"visualiser"这样的关键路径段，作为新的基础路径参考点。

最终，团队采用了第二种更健壮的解决方案，因为它不仅解决了当前问题，还能更好地适应未来可能的路径结构变化。核心修复代码如下：

const basePathname = currentPath.split('/').find(p => p === 'docs' || p === 'visualiser') ?? 'docs';

这段代码通过分割当前路径，找到关键路径段("docs"或"visualiser")，如果找不到则默认使用"docs"作为基础路径名。这种方法确保了生成的URL结构始终正确。

技术启示

这个问题的解决过程为我们提供了几个重要的技术启示：

1. 路径处理要谨慎：在Web应用中处理路径时，必须特别注意基础路径的处理，避免重复或遗漏。

2. 考虑多种使用场景：开发功能时要考虑不同的部署环境，特别是当应用可能被部署在子路径下时。

3. 采用健壮的解决方案：简单的修复可能解决眼前问题，但更健壮的解决方案能够预防未来可能出现的问题。

这个问题的及时修复确保了EventCatalog的Tree View功能在各种部署环境下都能正常工作，为用户提供了流畅的导航体验。