refactor: 侧边栏菜单 Active 使用绑定

src/admin/Bootstrap.Admin/Components/DefaultLayoutComponentBase.cs

@@ -1,4 +1,5 @@
-using Bootstrap.Admin.Models;
+using Bootstrap.Admin.Extensions;
+using Bootstrap.Admin.Models;
 using Bootstrap.Admin.Shared;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Authorization;
@@ -69,7 +70,12 @@ namespace Bootstrap.Admin.Components
         public string HomeUrl { get; protected set; } = "/Pages";
 
         /// <summary>
-        /// 
+        /// 获得/设置 当前请求路径
+        /// </summary>
+        protected string RequestUrl { get; set; } = "";
+
+        /// <summary>
+        /// OnInitializedAsync 方法
         /// </summary>
         /// <returns></returns>
         protected override async Task OnInitializedAsync()
@@ -81,11 +87,31 @@ namespace Bootstrap.Admin.Components
             }
             else
             {
-                Model = new NavigatorBarModel(state.User.Identity.Name);
+                RequestUrl = new UriBuilder(NavigationManager?.Uri ?? "").Path;
+                Model = new NavigatorBarModel(state.User.Identity.Name, RequestUrl.ToMvcMenuUrl());
                 IsAdmin = state.User.IsInRole("Administrators");
                 UserName = state.User.Identity.Name ?? "";
                 DisplayName = Model.DisplayName;
             }
         }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="firstRender"></param>
+        protected override void OnAfterRender(bool firstRender)
+        {
+            if (!firstRender) ResetSideBar();
+        }
+
+        /// <summary>
+        /// 更新侧边栏方法
+        /// </summary>
+        public void ResetSideBar()
+        {
+            RequestUrl = new UriBuilder(NavigationManager?.Uri ?? "").Path;
+            Model = new NavigatorBarModel(UserName, RequestUrl.ToMvcMenuUrl());
+            SideBar?.Update(Model);
+        }
     }
 }

src/admin/Bootstrap.Admin/Components/SideBarBase.cs

@@ -4,14 +4,23 @@ using Microsoft.AspNetCore.Components;
 namespace Bootstrap.Admin.Components
 {
     /// <summary>
-    /// 
+    /// 侧边栏组件
     /// </summary>
     public class SideBarBase : BootstrapComponentBase
     {
         /// <summary>
-        /// 
+        /// 获得/设置 侧边栏绑定 Model 实例
         /// </summary>
         [Parameter]
         public NavigatorBarModel Model { get; set; } = new NavigatorBarModel("");
+
+        /// <summary>
+        /// 视图更新方法
+        /// </summary>
+        public void Update(NavigatorBarModel model)
+        {
+            Model = model;
+            StateHasChanged();
+        }
     }
 }

src/admin/Bootstrap.Admin/Extensions/UrlHelperExtensions.cs

@@ -1,4 +1,7 @@
-namespace Bootstrap.Admin.Extensions
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Bootstrap.Admin.Extensions
 {
     /// <summary>
     /// Url 地址辅助操作类
@@ -6,17 +9,28 @@
     public static class UrlHelperExtensions
     {
         /// <summary>
-        /// 转换为 Blazor 地址 移除开始 ~ 字符
+        /// 转换为 Blazor 地址 ~/Admin/Index => /Admin/Index
         /// </summary>
         /// <param name="url"></param>
         /// <returns></returns>
         public static string ToBlazorLink(this string url) => url.TrimStart('~');
 
         /// <summary>
-        /// 转化为 Blazor 菜单地址
+        /// 转化为 Blazor 菜单地址 ~/Admin/Index => /Pages/Admin/Index
         /// </summary>
         /// <param name="url"></param>
         /// <returns></returns>
         public static string ToBlazorMenuUrl(this string url) => url.Replace("~", "/Pages");
+
+        /// <summary>
+        /// 转化为 Mvc 菜单地址 /Pages/Admin/Index => ~/Admin/Index
+        /// </summary>
+        /// <param name="url"></param>
+        /// <returns></returns>
+        public static string ToMvcMenuUrl(this string url)
+        {
+            var index = new List<string>() { "/Pages", "/Pages/Admin" };
+            return index.Any(u => u.Contains(url, System.StringComparison.OrdinalIgnoreCase)) ? "~/Admin/Index" : url.Replace("/Pages", "~");
+        }
     }
 }

src/admin/Bootstrap.Admin/Shared/NavItem.razor

@@ -12,6 +12,6 @@
 else
 {
     <li class="nav-item">
-        <a href="@Menu.Url.ToBlazorMenuUrl()" id="@string.Format("menus_{0}",Menu.Id)" class="nav-link @Menu.Active"><i class="@Menu.Icon"></i><span class="flex-fill">@Menu.Name</span></a>
+        <a href="@Menu.Url.ToBlazorMenuUrl()" id="@string.Format("menus_{0}",Menu.Id)" class="@(Menu.Active =="active" ? "nav-link active" : "nav-link")"><i class="@Menu.Icon"></i><span class="flex-fill">@Menu.Name</span></a>
     </li>
 }

src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js

@@ -59,8 +59,6 @@
             var menuId = 'menus_' + id;
             var $curMenu = $('.sidebar .active').first();
             if ($curMenu.attr('id') !== menuId) {
-                $curMenu.removeClass('active');
-                var $menu = $('#' + menuId).addClass('active');
                 // set website title
                 $('head title').text($menu.text());
                 this.resetTab(id);