如何在GitHub Actions中实现类似Jenkins Active Choice参数的动态UI

GitHub Actions原生的workflow_dispatch事件不支持实时动态关联参数（类似Jenkins Active Choice Parameters的效果），但可以通过以下两种方案实现你需要的功能：

方案1：使用GitHub CLI + 脚本实现动态触发 #

这种方案适合习惯终端操作的用户，通过脚本先收集分类选择，再动态生成可选的子项，最后用GitHub CLI触发工作流。

步骤1：定义基础工作流文件 #

在仓库的.github/workflows/dynamic-params.yml中创建如下工作流，包含静态的多选参数（后续由脚本过滤实际可选值）：

name: Dynamic Dropdown Workflow
on:
  workflow_dispatch:
    inputs:
      category:
        description: '选择分类（可多选）'
        type: choice
        options:
          - Color
          - Fruit
        multiple: true
      items:
        description: '选择具体项'
        type: choice
        options:
          - Green
          - Blue
          - Red
          - Apple
          - Orange
        multiple: true
jobs:
  process-selection:
    runs-on: ubuntu-latest
    steps:
      - name: Output selected options
        run: |
          echo "Selected categories: ${{ github.event.inputs.category }}"
          echo "Selected items: ${{ github.event.inputs.items }}"

步骤2：编写触发脚本 #

创建一个Bash脚本trigger-workflow.sh，实现分类选择、动态生成子项、收集选择并触发工作流：

#!/bin/bash

# 收集分类选择
echo "=== 选择分类（可多选，输入编号用空格分隔） ==="
echo "1. Color"
echo "2. Fruit"
read -p "请输入选项编号：" category_input

# 解析分类
selected_cats=()
for num in $category_input; do
  case $num in
    1) selected_cats+=("Color") ;;
    2) selected_cats+=("Fruit") ;;
    *) echo "⚠️ 无效选项 $num，已忽略" ;;
  esac
done

# 根据分类生成可选子项
available_items=()
if [[ " ${selected_cats[@]} " =~ "Color" ]]; then
  available_items+=("Green" "Blue" "Red")
fi
if [[ " ${selected_cats[@]} " =~ "Fruit" ]]; then
  available_items+=("Apple" "Orange")
fi

# 收集子项选择
echo -e "\n=== 可选子项 ==="
for idx in "${!available_items[@]}"; do
  echo "$((idx+1)). ${available_items[$idx]}"
done
read -p "请输入要选择的子项编号（可多选，空格分隔）：" item_input

# 解析子项
selected_items=()
for num in $item_input; do
  if [[ $num -ge 1 && $num -le ${#available_items[@]} ]]; then
    selected_items+=("${available_items[$((num-1))]}")
  else
    echo "⚠️ 无效选项 $num，已忽略"
  fi
done

# 用GitHub CLI触发工作流
echo -e "\n🔧 正在触发工作流..."
gh workflow run dynamic-params.yml \
  -f category="${selected_cats[*]}" \
  -f items="${selected_items[*]}"

步骤3：运行脚本 #

1. 确保已安装并登录GitHub CLI（执行gh auth login完成登录）
2. 给脚本添加执行权限：chmod +x trigger-workflow.sh
3. 运行脚本：./trigger-workflow.sh

方案2：自定义前端页面实现可视化动态下拉 #

如果需要更友好的Web UI，可以构建一个简单的HTML页面，通过JavaScript处理动态下拉逻辑，再调用GitHub API触发工作流。

示例HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>触发动态参数工作流</title>
  <style>
    label { display: block; margin: 10px 0 5px; }
    select { padding: 5px; min-width: 200px; }
    button { margin-top: 15px; padding: 8px 16px; }
  </style>
</head>
<body>
  <div>
    <label>选择分类（可多选）：</label>
    <select id="categorySelect" multiple size="2">
      <option value="Color">Color</option>
      <option value="Fruit">Fruit</option>
    </select>
  </div>

  <div>
    <label>选择具体项：</label>
    <select id="itemSelect" multiple></select>
  </div>

  <button onclick="triggerWorkflow()">触发工作流</button>

  <script>
    const categorySelect = document.getElementById('categorySelect');
    const itemSelect = document.getElementById('itemSelect');
    // 定义分类与子项的映射
    const categoryMap = {
      Color: ['Green', 'Blue', 'Red'],
      Fruit: ['Apple', 'Orange']
    };

    // 监听分类选择变化，动态更新子项
    categorySelect.addEventListener('change', () => {
      const selectedCats = Array.from(categorySelect.selectedOptions).map(opt => opt.value);
      // 合并并去重子项
      const combinedItems = [...new Set(selectedCats.flatMap(cat => categoryMap[cat]))].sort();
      // 更新子项下拉框
      itemSelect.innerHTML = '';
      combinedItems.forEach(item => {
        const option = document.createElement('option');
        option.value = item;
        option.textContent = item;
        itemSelect.appendChild(option);
      });
    });

    // 触发工作流的函数
    async function triggerWorkflow() {
      const repoOwner = '[你的GitHub用户名]';
      const repoName = '[你的仓库名]';
      const branch = 'main'; // 替换为你的目标分支

      const token = prompt('请输入GitHub个人访问令牌（需拥有repo权限）：');
      if (!token) return alert('令牌不能为空');

      const selectedCats = Array.from(categorySelect.selectedOptions).map(opt => opt.value);
      const selectedItems = Array.from(itemSelect.selectedOptions).map(opt => opt.value);

      try {
        const response = await fetch(
          `https://api.github.com/repos/${repoOwner}/${repoName}/actions/workflows/dynamic-params.yml/dispatches`,
          {
            method: 'POST',
            headers: {
              'Authorization': `token ${token}`,
              'Accept': 'application/vnd.github.v3+json'
            },
            body: JSON.stringify({
              ref: branch,
              inputs: {
                category: selectedCats.join(','),
                items: selectedItems.join(',')
              }
            })
          }
        );

        if (response.ok) {
          alert('工作流已成功触发！');
        } else {
          const errorText = await response.text();
          alert(`触发失败：${errorText}`);
        }
      } catch (err) {
        alert(`请求错误：${err.message}`);
      }
    }
  </script>
</body>
</html>

使用说明 #

1. 替换代码中的[你的GitHub用户名]和[你的仓库名]为实际值
2. 生成一个拥有repo权限的GitHub个人访问令牌（PAT）
3. 将页面托管在GitHub Pages或其他静态服务器，访问即可使用

注意事项 #

• GitHub Actions原生不支持实时动态参数联动，以上方案都是通过外部逻辑实现选择后再触发工作流
• 方案1依赖GitHub CLI，适合开发人员使用；方案2适合需要可视化操作的场景

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