fix: Header 组件地址链接支持 PathBase

This commit is contained in:
Argo Zhang 2020-02-11 12:38:17 +08:00 committed by argo zhang
parent a028c1fbf8
commit 4bb1612b3f
3 changed files with 40 additions and 17 deletions

View File

@ -1,4 +1,5 @@
using Bootstrap.Admin.Pages.Shared; using Bootstrap.Admin.Pages.Extensions;
using Bootstrap.Admin.Pages.Shared;
using Bootstrap.DataAccess; using Bootstrap.DataAccess;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
@ -39,6 +40,12 @@ namespace Bootstrap.Admin.Pages.Components
[Parameter] [Parameter]
public EventCallback<string> DisplayNameChanged { get; set; } public EventCallback<string> DisplayNameChanged { get; set; }
/// <summary>
/// 获得 NavigationManager 实例
/// </summary>
[Inject]
public NavigationManager? NavigationManager { get; set; }
/// <summary> /// <summary>
/// 获得/设置 是否显示 Blazor MVC 切换图标 /// 获得/设置 是否显示 Blazor MVC 切换图标
/// </summary> /// </summary>
@ -53,5 +60,12 @@ namespace Bootstrap.Admin.Pages.Components
EnableBlazor = DictHelper.RetrieveEnableBlazor(); EnableBlazor = DictHelper.RetrieveEnableBlazor();
return base.SetParametersAsync(ParameterView.Empty); return base.SetParametersAsync(ParameterView.Empty);
} }
/// <summary>
/// 返回带 PathBase 的完整路径
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
protected string ToBlazorLink(string url) => NavigationManager.ToBlazorLink(url);
} }
} }

View File

@ -1,5 +1,6 @@
using System.Collections.Generic; using System.Collections.Generic;
using System.Linq; using System.Linq;
using Microsoft.AspNetCore.Components;
namespace Bootstrap.Admin.Pages.Extensions namespace Bootstrap.Admin.Pages.Extensions
{ {
@ -20,7 +21,7 @@ namespace Bootstrap.Admin.Pages.Extensions
/// </summary> /// </summary>
/// <param name="url"></param> /// <param name="url"></param>
/// <returns></returns> /// <returns></returns>
public static string ToBlazorMenuUrl(this string url) => url.Replace("~", "/Pages"); public static string ToBlazorMenuUrl(this string url) => url.Replace("~", "Pages");
/// <summary> /// <summary>
/// 转化为 Mvc 菜单地址 /Pages/Admin/Index => ~/Admin/Index /// 转化为 Mvc 菜单地址 /Pages/Admin/Index => ~/Admin/Index
@ -32,5 +33,13 @@ namespace Bootstrap.Admin.Pages.Extensions
var index = new List<string>() { "/Pages", "/Pages/Admin" }; var index = new List<string>() { "/Pages", "/Pages/Admin" };
return index.Any(u => u.Contains(url, System.StringComparison.OrdinalIgnoreCase)) ? "~/Admin/Index" : url.Replace("/Pages", "~"); return index.Any(u => u.Contains(url, System.StringComparison.OrdinalIgnoreCase)) ? "~/Admin/Index" : url.Replace("/Pages", "~");
} }
/// <summary>
/// 转换为 Blazor 地址 /Admin/Index => {PathBase}/Admin/Index
/// </summary>
/// <param name="nav"></param>
/// <param name="url"></param>
/// <returns></returns>
public static string ToBlazorLink(this NavigationManager? nav, string url) => $"{nav?.BaseUri}{url.TrimStart('/')}";
} }
} }

View File

@ -20,7 +20,7 @@
<div class="dropdown-arrow arrow-primary"></div> <div class="dropdown-arrow arrow-primary"></div>
<div id="msgHeaderTaskContent" class="dropdown-header bg-primary">您有 <span id="msgHeaderTask">0</span> 个未完成的任务</div> <div id="msgHeaderTaskContent" class="dropdown-header bg-primary">您有 <span id="msgHeaderTask">0</span> 个未完成的任务</div>
<div class="dropdown-footer"> <div class="dropdown-footer">
<a href="/Pages/Admin/Tasks">查看所有任务</a> <a href="@ToBlazorLink("/Pages/Admin/Tasks")">查看所有任务</a>
</div> </div>
</div> </div>
</div> </div>
@ -35,7 +35,7 @@
<div class="dropdown-arrow arrow-info"></div> <div class="dropdown-arrow arrow-info"></div>
<div id="msgHeaderMsgContent" class="dropdown-header bg-info">您有 <span id="msgHeaderMsg">0</span> 个未读的消息</div> <div id="msgHeaderMsgContent" class="dropdown-header bg-info">您有 <span id="msgHeaderMsg">0</span> 个未读的消息</div>
<div class="dropdown-footer"> <div class="dropdown-footer">
<a href="/Pages/Admin/Messages">查看所有消息</a> <a href="@ToBlazorLink("/Pages/Admin/Messages")">查看所有消息</a>
</div> </div>
</div> </div>
</div> </div>
@ -50,7 +50,7 @@
<div class="dropdown-arrow arrow-success"></div> <div class="dropdown-arrow arrow-success"></div>
<div id="msgHeaderUserContent" class="dropdown-header bg-success">您有 <span id="msgHeaderUser">0</span> 条新用户通知</div> <div id="msgHeaderUserContent" class="dropdown-header bg-success">您有 <span id="msgHeaderUser">0</span> 条新用户通知</div>
<div class="dropdown-footer"> <div class="dropdown-footer">
<a href="~/Admin/Notifications">查看所有通知</a> <a href="@ToBlazorLink("/Pages/Admin/Notifications")">查看所有通知</a>
</div> </div>
</div> </div>
</div> </div>
@ -65,7 +65,7 @@
<div class="dropdown-arrow arrow-warning"></div> <div class="dropdown-arrow arrow-warning"></div>
<div id="msgHeaderAppContent" class="dropdown-header bg-warning">您有 <span id="msgHeaderApp">0</span> 条程序异常通知</div> <div id="msgHeaderAppContent" class="dropdown-header bg-warning">您有 <span id="msgHeaderApp">0</span> 条程序异常通知</div>
<div class="dropdown-footer"> <div class="dropdown-footer">
<a href="/Pages/Admin/Exceptions">查看所有异常</a> <a href="@ToBlazorLink("/Pages/Admin/Exceptions")">查看所有异常</a>
</div> </div>
</div> </div>
</div> </div>
@ -80,32 +80,32 @@
<div class="dropdown-arrow arrow-danger"></div> <div class="dropdown-arrow arrow-danger"></div>
<div id="msgHeaderDbContent" class="dropdown-header bg-danger">您有 <span id="msgHeaderDb">0</span> 条数据库异常通知</div> <div id="msgHeaderDbContent" class="dropdown-header bg-danger">您有 <span id="msgHeaderDb">0</span> 条数据库异常通知</div>
<div class="dropdown-footer"> <div class="dropdown-footer">
<a href="/Pages/Admin/Exceptions">查看所有异常</a> <a href="@ToBlazorLink("/Pages/Admin/Exceptions")">查看所有异常</a>
</div> </div>
</div> </div>
</div> </div>
<!-- db dropdown end --> <!-- db dropdown end -->
<div class="dropdown"> <div class="dropdown">
<a class="shadow-success" href="/Account/Lock" data-toggle="tooltip" title="系统锁屏"> <a class="shadow-success" href="@ToBlazorLink("/Account/Lock")" data-toggle="tooltip" title="系统锁屏">
<i class="fa fa-tv"></i> <i class="fa fa-tv"></i>
</a> </a>
</div> </div>
} }
<div class="@(EnableBlazor ? "dropdown" : "dropdown d-none")"> <div class="@(EnableBlazor ? "dropdown" : "dropdown d-none")">
<a class="shadow-success dropdown-mvc" href="/Admin/Index" data-toggle="tooltip" title="NETCore MVC 模式"> <a class="shadow-success dropdown-mvc" href="@ToBlazorLink("/Admin/Index")" data-toggle="tooltip" title="NETCore MVC 模式">
<img src="/images/netcore2.png" /> <img src="@ToBlazorLink("/images/netcore2.png")" />
</a> </a>
</div> </div>
</div> </div>
<div class="dropdown userinfo"> <div class="dropdown userinfo">
<div data-toggle="dropdown" class="dropdown-toggle shadow-default"> <div data-toggle="dropdown" class="dropdown-toggle shadow-default">
<img alt="" src="@Icon.ToBlazorLink()" /> <img alt="" src="@ToBlazorLink(Icon.ToBlazorLink())" />
<span class="username text-truncate d-inline-block">@DisplayName</span> <span class="username text-truncate d-inline-block">@DisplayName</span>
</div> </div>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item"> <div class="dropdown-item">
<div class="d-flex flex-fill align-items-center"> <div class="d-flex flex-fill align-items-center">
<img src="@Icon.ToBlazorLink()"> <img src="@ToBlazorLink(Icon.ToBlazorLink())">
<div class="flex-fill"> <div class="flex-fill">
<div class="username text-truncate">@DisplayName</div> <div class="username text-truncate">@DisplayName</div>
<div>登录名:@RootLayout?.UserName</div> <div>登录名:@RootLayout?.UserName</div>
@ -113,19 +113,19 @@
</div> </div>
</div> </div>
<div class="dropdown-item"> <div class="dropdown-item">
<a href="/Pages/Admin/Profiles"><i class=" fa fa-suitcase"></i>个人中心</a> <a href="@ToBlazorLink("/Pages/Admin/Profiles")"><i class=" fa fa-suitcase"></i>个人中心</a>
<a href="/Pages/Admin/Index"><i class="fa fa-cog"></i>设置</a> <a href="@ToBlazorLink("/Pages/Admin/Index")"><i class="fa fa-cog"></i>设置</a>
<a href="/Pages/Admin/Notifications"><i class="fa fa-bell"></i>通知<span id="logoutNoti" class="badge badge-pill badge-success"></span></a> <a href="@ToBlazorLink("/Pages/Admin/Notifications")"><i class="fa fa-bell"></i>通知<span id="logoutNoti" class="badge badge-pill badge-success"></span></a>
</div> </div>
<div class="dropdown-item"> <div class="dropdown-item">
<a href="/Account/Logout"><i class="fa fa-key"></i>注销</a> <a href="@ToBlazorLink("/Account/Logout")"><i class="fa fa-key"></i>注销</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/Pages"><i class="fa fa-home"></i>首页</a></li> <li class="breadcrumb-item"><a href="@ToBlazorLink("/Pages")"><i class="fa fa-home"></i>首页</a></li>
<li class="breadcrumb-item d-none" id="breadNav"></li> <li class="breadcrumb-item d-none" id="breadNav"></li>
</ol> </ol>
</nav> </nav>