如何为GitHub Action添加进度条追踪工作流执行进度

你看到的橙色进度条是GitHub Actions原生日志分组功能自带的UI效果，不需要接入第三方工具或自定义样式，只要按规范输出工作流日志命令就可以自动生成。

核心规则 #

GitHub Actions的日志解析器会识别特定格式的workflow命令，当你声明日志分组时，运行页会自动生成对应带橙色进度标识的折叠区块：

• 分组执行过程中，橙色进度条会动态展示执行状态
• 分组内所有命令执行完成后，进度条自动标记为完成
• 分组内如果输出错误日志，进度条会同步切换为错误状态标识

具体用法 #

在run步骤中按顺序输出分组开始、分组结束的命令即可：

1. 分组开始命令：echo "::group::<你要展示在进度条旁的名称>"
2. 把需要归到这个进度条下的所有执行命令放在开始命令之后
3. 分组结束命令：echo "::endgroup::"

配置示例 #

name: 项目CI流程
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 安装依赖
        run: |
          echo "::group::安装项目npm依赖"
          npm ci
          echo "::endgroup::"

      - name: 构建产物
        run: |
          echo "::group::构建生产环境包"
          npm run build
          echo "::endgroup::"

      - name: 部署流程
        run: |
          echo "::group::上传产物到部署服务"
          # 这里写你的部署逻辑
          echo "::endgroup::"

注意事项 #

• 日志分组不支持嵌套，必须等上一个分组用::endgroup::关闭后再开启新分组，否则进度条层级会显示错乱
• 进度条的橙色是GitHub UI的固定样式，不支持自定义修改颜色
• 如果需要提前终止分组进度统计，在对应位置输出echo "::endgroup::"即可

内容的提问来源于stack exchange，提问作者Quentin TREHEUX