VRSystem/EasyTemplate.Page/Components/IdSelector/EngineIdSelector.razor

<div class="modal-backdrop fade show" style="background-color: rgba(0,0,0,0.5);"></div>
<div class="modal fade show" tabindex="-1" style="display: block;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择油机ID (1-36)</h5>
                <button type="button" class="btn-close" @onclick="OnCancel"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        @for (int i = 1; i <= 36; i++)
                        {
                            var isUsed = usedEngineIds.Contains(i);
                            var item = i;
                            <div class="col-2 mb-2">
                                <button class="btn w-100 @(isUsed ? "btn-secondary disabled" : "btn-outline-primary")" 
                                        disabled="@isUsed"
                                        @onclick="() => OnSelect(item)">
                                    @item
                                </button>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="OnCancel">取消</button>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter] public List<int> usedEngineIds { get; set; } = new();
    [Parameter] public EventCallback<int> OnSelected { get; set; }
    [Parameter] public EventCallback OnCancelled { get; set; }

    private async Task OnSelect(int id)
    {
        await OnSelected.InvokeAsync(id);
    }

    private async Task OnCancel()
    {
        await OnCancelled.InvokeAsync();
    }
}