跳到主要内容

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 服务器的 .env 文件中添加 WOODPECKER_DEV_WWW_PROXY=http://localhost:8010。 按照 调试 部分所述启动 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（代码检查器无论如何都会阻止您这样做 😉）
  • eslint
  • Volar & vue-tsc 用于 .vue 文件的类型检查
    • 按照此指南 所述使用 Volar 的接管模式

消息和翻译​

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

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