Blazor学习之路-20260108动态菜单

选一个Blazor的成熟的UI库，在MudBlazor和BootstrapBlazor 两个之间不能确定。

由于之前做WPF都是用MaterialDesign库，暂定MudBlazor吧。

简单感觉下MudBlazor的库，MudBlazor.dll文件有9M大，如果WebAssembly在前端加载，需要下载dll时，可能需要一些加载时间。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

通过默认的vs样板创建Mud工程，默认只包含三个菜单。

将来系统菜单希望是能配置的。因此简单对NavMenu做了处理。暂时自定义菜单，将来实现通过配置文件或者数据库加载菜单。

<MudNavMenu>
    @foreach(var item in MenuItems)
    {
        if(item.SubItems == null )
        {
            <MudNavLink Href="@item.Href" Match="@item.Match" Icon="@item.Icon" >@item.Title</MudNavLink>
        }
        else
        {
            <MudNavGroup 
                Title="@item.Title"
                Icon="@item.Icon"
                Expanded="@item.Expanded">
                
                @foreach (var subItem in item.SubItems)
                {
                    <MudNavLink Href="@subItem.Href" Match="@subItem.Match" Icon="@subItem.Icon">@subItem.Title</MudNavLink>
                }
                </MudNavGroup>
        }
    }

</MudNavMenu>

public class NavMenuItem
{
    public NavLinkMatch Match { get; set; } = NavLinkMatch.All;
    public string Href { get; set; } = "/";
    public string Title { get; set; } = string.Empty;
    public string Icon { get; set; } = string.Empty;
    public bool Expanded { get; set; } = true;
    public List<string> Roles { get; set; } = [];
    public List<NavMenuItem>? SubItems { get; set; } = null;
}


public partial class NavMenu
{
    private List<NavMenuItem> MenuItems { get; set; } = [];

    protected override Task OnInitializedAsync()
    {
        // 2026-1-8 完成菜单的自定义加载，通过配置文件或者数据库读取
        // 同时配合修改NavMenu.razor
        // 再加上权限设置
        // 参考 https://blog.csdn.net/gitblog_01027/article/details/151278567
        MenuItems =
        [
            new()
            {   Href = "/",
                Match = NavLinkMatch.All,
                Icon = Icons.Material.Filled.Dashboard,
                Title = "主页"
            },
            new()
            {
                Href = "counter",
                Match = NavLinkMatch.Prefix,
                Icon = Icons.Material.Filled.Calculate,
                Title = "计数器"
            },
             new()
            {
                Href = "weather",
                Match = NavLinkMatch.Prefix,
                Icon = Icons.Material.Filled.WbSunny,
                Title = "天气"
            },
              new()
              {
                  Href = "",
                  Match = NavLinkMatch.Prefix,
                  Icon = Icons.Material.Filled.Settings,
                  Title = "Settings",
                  Expanded = false,
                  SubItems =
                  [
                      new NavMenuItem()
                      {
                          Href = "counter",
                          Match = NavLinkMatch.Prefix,
                          Icon = Icons.Material.Filled.Person,
                          Title = "Users"
                      },
                    new NavMenuItem()
                    {
                        Href = "settings/security",
                        Match = NavLinkMatch.Prefix,
                        Icon = Icons.Material.Filled.Security,
                        Title = "Security"
                    }
                ]
              }
        ];


        return base.OnInitializedAsync();
    }
}