CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/App.razor

<div class="container">
    <a style="float:right" href="/classic-index">Back OLD Home Page</a>
    <h3>Blazor WASM UI</h3>

    @if (Progress?.IsLoading != false)
    {
        <span>Waiting server ready...</span>
        <span>@(Progress?.LoadedTags ?? 0)</span>
        <span>/</span>
        <span>@(Progress?.TotalTrackCount ?? 0)</span>
    }
    else if (Libraries == null)
    {
        <span>Loading file set...</span>
    }
    else if (MediaTags == null)
    {
        <span>Loading tags...</span>
    }
    else
    {
       <ul class="nav nav-tabs justify-content-center nav-fill" id="RootTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                    Browse
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                    Search
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">
                    Playlists
                </button>
            </li>
        </ul>
        <div class="tab-content" id="RootTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="row justify-content-evenly mt-2">
                    <LibSelector Libraries="@Libraries" SelectedLibs="@SelectedLibs" OnValueChanged="SelectedLibraryChanged"></LibSelector>
                    <div class="row mt-2">
                        <div class="col-12">
                            @if (CurrentLibrary != null)
                            {
                                <div class="row">
                                    @foreach (var d in CurrentLibrary.Discs.OrderByDescending(p => p.Key))
                                    {
                                        <div class="col-md-3">
                                            @*TODO: Card Component*@
                                            <div class="card mb-3 shadow-sm" @onclick="()=>SelectDisc(d.Key)">
                                                <img class="card-img-top" src="@ApiClient.ImageUrl(CurrentLibraryKey,d.Key)">
                                                <div class="card-body">
                                                    <p class="card-text">@d.Value.Name</p>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-sm btn-outline-secondary">Track @d.Value.MainTracks.Count</button>
                                                            <button type="button" class="btn btn-sm btn-outline-secondary">SubSet @d.Value.SubTracks.Count</button>
                                                        </div>
                                                        <small class="text-muted">@GetDiscDurationDisplay(CurrentLibraryKey,d.Key)</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </div>
                            }
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalToggleLabel">@CurrentDisc?.Name</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                @*TODO: Disc Modal*@
                                <div class="container-fluid">
                                    <div class="row">
                                        @if (CurrentDisc != null)
                                        {
                                            <div class="col-md-4"><img class="card-img-top" src="@ApiClient.ImageUrl(CurrentLibraryKey,CurrentDiscKey)"></div>
                                            <div class="col-md-8">
                                                <ul class="nav nav-tabs justify-content-center nav-fill" id="ModalDiscTab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link active" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-main" type="button" role="tab" aria-controls="home" aria-selected="true">
                                                            Main
                                                        </button>
                                                    </li>
                                                    @foreach (var subSet in CurrentDisc.SubTracks.OrderBy(p => p.Key).WithIndex())
                                                    {
                                                        <li class="nav-item" role="presentation">
                                                            <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index" type="button" role="tab" aria-controls="home" aria-selected="true">
                                                                @subSet.item.Value.Name
                                                            </button>
                                                        </li>
                                                    }
                                                </ul>
                                                <div class="tab-content" id="ModalDiscTabContent">
                                                    <div class="tab-pane fade show active" id="tracks-main" role="tabpanel" aria-labelledby="home-tab">
                                                        <TrackSetTable
                                                            LibraryKey="@CurrentLibraryKey"
                                                            DiscKey="@CurrentDiscKey"
                                                            TrackSetKey="null"
                                                            Tracks="@CurrentDisc?.MainTracks"></TrackSetTable>
                                                    </div>
                                                    @foreach (var subSet in CurrentDisc.SubTracks.OrderBy(p => p.Key).WithIndex())
                                                    {
                                                        <div class="tab-pane fade show" id="tracks-@subSet.index" role="tabpanel" aria-labelledby="home-tab">
                                                            <TrackSetTable LibraryKey="@CurrentLibraryKey"
                                                               DiscKey="@CurrentDiscKey"
                                                               TrackSetKey="@subSet.item.Key"
                                                               Tracks="@subSet.item.Value.Tracks"></TrackSetTable>
                                                    </div>
                                                    }
                                                </div>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="container">
                    <h1>此处应有搜索界面</h1>
                </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div class="container">
                    <h1>此处应有列表界面</h1>
                </div>
            </div>
        </div>
   }

</div>