跳到主要内容

UI 开发

要开发 UI，您需要安装 Node.js 和 pnpm。此外，建议使用 VS-Code 和推荐的插件选择来获得自动格式化、代码检查和类型检查等功能。UI 使用 Vue 3 编写为单页应用程序，访问 Woodpecker REST API。

设置​

UI 代码位于 web/ 中。在终端中使用 cd web/ 切换到该文件夹，并通过运行 pnpm install 安装所有依赖项。对于生产构建，生成的 UI 代码通过使用 go-embed 集成到 Woodpecker 服务器中。

测试 UI 更改需要我们在每次调整代码后通过运行 pnpm build 重新构建 UI 并重新启动 Woodpecker 服务器。为了避免这种情况，您可以使用集成到 Woodpecker 服务器中的开发代理。这个集成的开发代理将把所有非 API 请求转发到一个单独的 HTTP 服务器，该服务器只提供 UI 文件。

UI 代理架构

通过运行 pnpm start 在本地启动带有热重载的 UI 服务器。要启用对 UI 服务器的请求转发，您必须通过将 WOODPECKER_DEV_WWW_PROXY=http://localhost:8010 添加到您的 .env 文件来启用 Woodpecker 服务器内的开发代理。 按照调试部分中的说明启动 Woodpecker 服务器后，您现在应该能够在 http://localhost:8000 下访问 UI。

与远程服务器一起使用​

如果您想在可能比本地测试实例具有更复杂数据的"真实世界"Woodpecker 服务器上测试您的 UI 更改，您可以使用这些环境变量运行 pnpm start：

  • VITE_DEV_PROXY：您的服务器 URL，例如 https://ci.woodpecker-ci.org
  • VITE_DEV_USER_SESS_COOKIE：浏览器中 user_sess cookie 的值

然后，在 http://localhost:8010 打开 UI。

工具和框架​

以下列表包含 Woodpecker UI 使用的一些工具和框架。对于某些要点，我们添加了一些指导原则/提示来帮助您开发。

  • Vue 3
    • 使用 setup 和组合 API
    • 将（可重用）组件放在 web/src/components/ 中
    • 视图应该在 web/src/router.ts 中有一个路由，并位于 web/src/views/ 中
  • Tailwind CSS
  • Vite（类似于 Webpack）
  • Typescript
    • 避免使用 any 和 unknown（linter 会阻止您这样做 😉）
  • eslint
  • Volar & vue-tsc 用于 .vue 文件中的类型检查
    • 使用 Volar 的接管模式，如此指南所述

消息和翻译​

Woodpecker 使用 Vue I18n 作为翻译库。新翻译必须添加到 web/src/assets/locales/en.json。英文源文件将自动导入到 Weblate（Woodpecker 使用的翻译系统）中，社区将在其中基于英文源翻译所有其他语言。 您不得在 PR 中提供除英语之外的翻译，否则 weblate 可能会使 git 产生冲突（当有人已经翻译了该语言文件而更改尚未进入主分支时）

有关翻译的更多信息，请参阅翻译。