orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

!72 增加功能：Blazor 移除 Pages 硬编码 

* refactor: 移除 Pages 硬编码
* refactor: 重构资源路径问题
* style: 重构 userinfo 样式
This commit is contained in:
Argo 2020-02-25 12:51:04 +08:00
parent 7192fe8313
commit e8c39fb25e
10 changed files with 175 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/admin/Bootstrap.Admin/Pages/Components/DefaultLayoutComponentBase.cs
View File

@ -70,7 +70,7 @@ namespace Bootstrap.Admin.Pages.Components
/// <summary>
/// 获得/设置 系统首页
/// </summary>
public string HomeUrl { get; protected set; } = "/Pages";
public string HomeUrl { get; protected set; } = "Pages";
/// <summary>
/// 获得/设置 当前请求路径
@ -134,7 +134,6 @@ namespace Bootstrap.Admin.Pages.Components
DisplayName = Model.DisplayName;
WebTitle = Model.Title;
WebFooter = Model.Footer;
if (HomeUrl.StartsWith("/")) HomeUrl = NavigationManager.ToBlazorLink(HomeUrl);
}
}

7
src/admin/Bootstrap.Admin/Pages/Components/HeaderBase.cs
View File

@ -66,12 +66,5 @@ namespace Bootstrap.Admin.Pages.Components
EnableBlazor = DictHelper.RetrieveEnableBlazor();
return base.SetParametersAsync(ParameterView.Empty);
}
/// <summary>
/// 返回带 PathBase 的完整路径
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
protected string ToBlazorLink(string url) => NavigationManager.ToBlazorLink(url);
}
}

6
src/admin/Bootstrap.Admin/Pages/Components/SideBarBase.cs
View File

@ -9,12 +9,6 @@ namespace Bootstrap.Admin.Pages.Components
/// </summary>
public class SideBarBase : ComponentBase
{
/// <summary>
/// 获得 NavigationManager 实例
/// </summary>
[Inject]
public NavigationManager? NavigationManager { get; set; }
/// <summary>
/// 获得/设置 侧边栏绑定 Model 实例
/// </summary>

19
src/admin/Bootstrap.Admin/Pages/Extensions/UrlHelperExtensions.cs
View File

@ -1,7 +1,6 @@
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Components;
namespace Bootstrap.Admin.Pages.Extensions
{
@ -11,18 +10,18 @@ namespace Bootstrap.Admin.Pages.Extensions
public static class UrlHelperExtensions
{
/// <summary>
/// 转换为 Blazor 地址 ~/Admin/Index => /Admin/Index
/// 转换为 Blazor 地址 ~/Admin/Index => Admin/Index
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public static string ToBlazorLink(this string url) => url.TrimStart('~');
public static string ToBlazorLink(this string url) => (url.StartsWith("http://", StringComparison.OrdinalIgnoreCase) || url.StartsWith("https://", StringComparison.OrdinalIgnoreCase)) ? url : url.Replace("~/", "");
/// <summary>
/// 转化为 Blazor 菜单地址 ~/Admin/Index => /Pages/Admin/Index
/// 转化为 Blazor 菜单地址 ~/Admin/Index => Pages/Admin/Index
/// </summary>
/// <param name="url"></param>
/// <returns></returns>
public static string ToBlazorMenuUrl(this string url) => url.Replace("~", "Pages");
public static string ToBlazorMenuUrl(this string url) => url.Replace("~/", "Pages/");
/// <summary>
/// 转化为 Mvc 菜单地址 /Pages/Admin/Index => ~/Admin/Index
@ -32,15 +31,7 @@ namespace Bootstrap.Admin.Pages.Extensions
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", "~");
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) => (url.StartsWith("http://", StringComparison.OrdinalIgnoreCase) || url.StartsWith("https://", StringComparison.OrdinalIgnoreCase)) ? url : $"{nav?.BaseUri}{url.TrimStart('/')}";
}
}

30
src/admin/Bootstrap.Admin/Pages/Shared/Header.razor
View File

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

4
src/admin/Bootstrap.Admin/Pages/Shared/SideBar.razor
View File

@ -9,8 +9,8 @@
</a>
</div>
<div class="nav-header flex-fill align-items-center">
<a href="@NavigationManager.ToBlazorLink("/Pages/Admin/Profiles")">
<img src="@NavigationManager.ToBlazorLink(Model.Icon.ToBlazorLink())" />
<a href="@("~/Admin/Profiles".ToBlazorMenuUrl())">
<img src="@Model.Icon.ToBlazorLink()" />
<span class="username d-inline-block text-truncate flex-fill">@DisplayName</span>
</a>
</div>

4
src/admin/Bootstrap.Admin/wwwroot/css/site.css
View File

@ -475,6 +475,10 @@ pre {
right: 26px;
}
.userinfo {
margin-top: 2px;
}
.userinfo .dropdown-toggle, .header .nav .dropdown > a {
color: #777;
}

156
src/admin/Bootstrap.Admin/wwwroot/css/theme.css
View File

@ -79,95 +79,91 @@ aside .bg, aside .nav-brand, aside .nav-header, .header .nav, .userinfo .dropdow
padding: 0;
}
.userinfo {
margin-top: 2px;
.userinfo img {
height: 29px;
width: 29px;
border-radius: 2px;
}
.userinfo img {
height: 29px;
width: 29px;
border-radius: 2px;
}
.userinfo .dropdown-toggle {
display: block;
padding: 6px 6px;
border-radius: 4px;
transition: all .25s linear;
}
.userinfo .dropdown-toggle {
display: block;
padding: 6px 6px;
border-radius: 4px;
transition: all .25s linear;
}
.userinfo .dropdown-toggle, .header .nav .dropdown > a {
border: 1px solid #eee;
}
.userinfo .dropdown-toggle, .header .nav .dropdown > a {
border: 1px solid #eee;
}
.userinfo .dropdown-toggle:after {
vertical-align: middle;
}
.userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover {
color: #333;
border: solid 1px #337ab7;
}
.userinfo .dropdown-item {
display: flex;
width: 270px;
padding: 0;
justify-content: space-around;
background-color: #fff;
}
.userinfo .dropdown-item a {
text-align: center;
color: #777;
padding: 15px 10px;
flex: 1 1 33.333%;
}
.userinfo .dropdown-item a:hover {
color: #333;
}
.userinfo .dropdown-item a i {
font-size: 1.025rem;
display: block;
margin-bottom: 4px;
}
.userinfo .dropdown-item:first-child {
border-radius: 4px 4px 0 0;
}
.userinfo .dropdown-item:first-child a:hover {
color: #333;
}
.userinfo .dropdown-item:last-child {
border-radius: 0 0 4px 4px;
}
.userinfo .dropdown-item:last-child a {
color: #ca3a39;
border-radius: 0 0 0.15rem 0.15rem;
background: #a9d96c;
background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
}
.userinfo .dropdown-item:last-child a:hover {
color: #d40c0b;
}
.userinfo .username {
max-width: 90px;
.userinfo .dropdown-toggle:after {
vertical-align: middle;
}
.userinfo .badge {
left: 224px;
right: auto;
top: 6px;
.userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover {
color: #333;
border: solid 1px #337ab7;
}
.userinfo .dropdown-item {
display: flex;
width: 270px;
padding: 0;
justify-content: space-around;
background-color: #fff;
}
.userinfo .dropdown-item a {
text-align: center;
color: #777;
padding: 15px 10px;
flex: 1 1 33.333%;
}
.userinfo .dropdown-item a:hover {
color: #333;
}
.userinfo .dropdown-item a i {
font-size: 1.025rem;
display: block;
margin-bottom: 4px;
}
.userinfo .dropdown-item:first-child {
border-radius: 4px 4px 0 0;
}
.userinfo .dropdown-item:first-child a:hover {
color: #333;
}
.userinfo .dropdown-item:last-child {
border-radius: 0 0 4px 4px;
}
.userinfo .dropdown-item:last-child a {
color: #ca3a39;
border-radius: 0 0 0.15rem 0.15rem;
background: #a9d96c;
background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
}
.userinfo .dropdown-item:last-child a:hover {
color: #d40c0b;
}
.userinfo .username {
max-width: 90px;
vertical-align: middle;
}
.userinfo .badge {
left: 224px;
right: auto;
top: 6px;
}
.header .nav .dropdown > a {
border-radius: 4px;
padding: 6px 12px;

4
src/client/Bootstrap.Client/Controllers/Api/InterfaceController.cs
View File

@ -3,10 +3,6 @@ using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using System;
using System.IO;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;
namespace Bootstrap.Client.Controllers.Api

148
src/client/Bootstrap.Client/wwwroot/css/theme.css
View File

@ -80,91 +80,87 @@ aside .bg, aside .nav-brand, aside .nav-header, .header .nav, .userinfo .dropdow
padding: 0;
}
.userinfo {
margin-top: 2px;
.userinfo img {
height: 29px;
width: 29px;
border-radius: 2px;
}
.userinfo img {
height: 29px;
width: 29px;
border-radius: 2px;
}
.userinfo .dropdown-toggle {
display: block;
padding: 6px 6px;
border-radius: 4px;
transition: all .25s linear;
}
.userinfo .dropdown-toggle {
display: block;
padding: 6px 6px;
border-radius: 4px;
transition: all .25s linear;
}
.userinfo .dropdown-toggle, .header .nav .dropdown > a {
border: 1px solid #eee;
}
.userinfo .dropdown-toggle, .header .nav .dropdown > a {
border: 1px solid #eee;
}
.userinfo .dropdown-toggle:after {
vertical-align: middle;
}
.userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover {
color: #333;
border: solid 1px #337ab7;
}
.userinfo .dropdown-item {
display: flex;
width: 270px;
padding: 0;
justify-content: space-around;
background-color: #fff;
}
.userinfo .dropdown-item a {
text-align: center;
color: #777;
padding: 15px 10px;
flex: 1 1 33.333%;
}
.userinfo .dropdown-item a i {
font-size: 1.025rem;
display: block;
margin-bottom: 4px;
}
.userinfo .dropdown-item:first-child {
border-radius: 4px 4px 0 0;
}
.userinfo .dropdown-item:first-child a:hover {
color: #333;
}
.userinfo .dropdown-item:last-child {
border-radius: 0 0 4px 4px;
}
.userinfo .dropdown-item:last-child a {
color: #ca3a39;
border-radius: 0 0 0.15rem 0.15rem;
background: #a9d96c;
background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
}
.userinfo .dropdown-item:last-child a:hover {
color: #d40c0b;
}
.userinfo .username {
max-width: 90px;
.userinfo .dropdown-toggle:after {
vertical-align: middle;
}
.userinfo .badge {
left: 224px;
right: auto;
top: 6px;
.userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle, .nav [data-toggle="dropdown"]:hover {
color: #333;
border: solid 1px #337ab7;
}
.userinfo .dropdown-item {
display: flex;
width: 270px;
padding: 0;
justify-content: space-around;
background-color: #fff;
}
.userinfo .dropdown-item a {
text-align: center;
color: #777;
padding: 15px 10px;
flex: 1 1 33.333%;
}
.userinfo .dropdown-item a i {
font-size: 1.025rem;
display: block;
margin-bottom: 4px;
}
.userinfo .dropdown-item:first-child {
border-radius: 4px 4px 0 0;
}
.userinfo .dropdown-item:first-child a:hover {
color: #333;
}
.userinfo .dropdown-item:last-child {
border-radius: 0 0 4px 4px;
}
.userinfo .dropdown-item:last-child a {
color: #ca3a39;
border-radius: 0 0 0.15rem 0.15rem;
background: #a9d96c;
background-image: linear-gradient(to bottom, #a9d96c 0%, #799e51 100%);
}
.userinfo .dropdown-item:last-child a:hover {
color: #d40c0b;
}
.userinfo .username {
max-width: 90px;
vertical-align: middle;
}
.userinfo .badge {
left: 224px;
right: auto;
top: 6px;
}
.header .nav .dropdown > a {
border-radius: 4px;
padding: 6px 12px;