重新设计 Jenkins（第二部分）

Jenkins 2.516.1中最显著的变化之一是重新设计了页眉。新的页眉将传统的顶部栏和面包屑导航合并成一个单一的、简化的组件。其结果是更简洁、更现代的界面，不仅外观更好，而且通过节省宝贵的垂直空间——每页大约60像素——提高了可用性。

除了外观，新的页眉还是完全响应式的。面包屑和操作会根据不同的屏幕尺寸动态调整。此外，诸如管理Jenkins之类的全局操作，以前只能从仪表板访问，现在已直接嵌入到页眉中，从而可以在任何页面上访问。

重新设计像Jenkins这样可扩展的平台意味着必须仔细考虑每个更改对插件生态系统的影响。在整个重新设计的过程中，始终将保持与现有插件的兼容性放在首位。这涉及广泛的测试、明确的弃用路径以及为插件作者提供迁移指南。目标是尽可能为插件开发人员承担繁重的工作，使插件只需要进行小的调整。

可访问性是重新设计的核心焦点。我们改进了界面上的色彩对比度，使Jenkins更容易供所有人使用，包括有视觉障碍的人。交互式元素现在具有更高的对比度，并且我们增强了整个UI的键盘导航。

我们还引入了新的边框变量供开发人员使用：`--jenkins-border` 和 `--jenkins-border—​subtle`。这些边框会根据上下文自动改变大小和颜色，确保它们始终可见且易于访问。当您的系统设置为增强对比度模式时，边框会自动调整——确保组件在Jenkins中始终可见且易于区分。

管道是Jenkins自动化构建、测试和部署软件过程的核心。它们勾勒出从代码提交到生产的整个工作流程。随着这些管道变得越来越复杂，跟踪进度或识别问题可能会变得困难。这就是管道可视化变得至关重要的地方——将一系列抽象的步骤转化为清晰、交互式的流程。

Pipeline Graph View插件正是这样做的，它在一个清晰、直观的图中显示了每次运行的每个阶段。其设计旨在帮助用户一目了然地快速掌握管道的结构和状态。

今年，该插件已被完全重建，社区的反馈非常棒。我们将插件从Webpack迁移到Rspack和Vite，并用函数式组件替换了类组件。这次清理删除了数千行代码，提高了性能和可维护性。

新的界面基于Jenkins Design Library，现在支持全屏滚动、固定页眉以及管道图的平移和缩放功能。新的动画、加载骨架和清晰的阶段进度指示器创造了更流畅、更响应式的用户体验。

统一视图将管道图、阶段详细信息和日志整合到一个布局中，因此您现在可以在一个地方跟踪执行情况和输出。布局是可自定义的——图可以移动，列可以调整大小或隐藏。

最后，性能得到了显著提升。该插件加载速度更快，滚动更顺畅，并且比以往任何时候都更有效地处理大型管道。

想了解更多关于Pipeline Graph View的信息吗？请阅读我们之前的文章。

Jenkins 2.516.1 是迄今为止最可自定义的Jenkins版本。主题比以往任何时候都多，并且有了全新的动态更改主题的方式。只需将鼠标悬停在您的用户帐户图标上，即可访问新的主题选择器。

通过各种主题让Jenkins成为您自己的

想创建自己的主题吗？我们通过全新的Maven原型使其变得简单——查看它。

此外，还有Customizable Header Plugin。这使您可以完全自定义新的页眉——更改徽标、链接或操作，以根据您组织的工作流程和品牌定制Jenkins。

Jenkins由数百名贡献者驱动，但使用其专有技术（特别是Jelly和Stapler）对新来者来说可能是一个挑战。

在过去的几年里，Jenkins取得了长足的进步，我们对未来充满期待。

如果您想参与Jenkins的UI和UX讨论，请加入用户体验SIG。

通过Design Library利用您的插件中的新组件和模式。

您可以在 YouTube 上观看我们的月度会议，并可以在 GitHub 上查看正在进行的工作。