介绍#
User Menu 就是登录后，右上角用户名和下拉菜单功能的代码。
ABP 中不同主题的代码位置不一样。
LeptonX Lite 主题#
这个主题虽然是免费使用，但源码并没有公开出来。
如果按照上面的文档覆盖不了，那可能是低版本源码中目录结构和上面稳定不一样，比如我目前版本是：Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite, Version=3.1.5.0
通过反编译查看源码发现，目录结构比上面文档中描述的多一个 Toolbar 层级：
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Volo.Abp.UI.Navigation;
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite.Themes.LeptonXLite.Components.Toolbar.UserMenu;
public class UserMenuViewComponent : AbpViewComponent
{
protected IMenuManager MenuManager { get; }
public UserMenuViewComponent(IMenuManager menuManager)
{
MenuManager = menuManager;
}
public virtual async Task<IViewComponentResult> InvokeAsync()
{
return View("~/Themes/LeptonXLite/Components/Toolbar/UserMenu/Default.cshtml", await MenuManager.GetAsync("User").ConfigureAwait(continueOnCapturedContext: false));
}
}
那么就需要在 Web项目中创建 /Themes/LeptonXLite/Components/Toolbar/UserMenu/Default.cshtml 进行覆盖。
经过我小小的努力，大概还原出了默认的 Default.cshtml：
@using Localization.Resources.AbpUi
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.MultiTenancy
@using Volo.Abp.UI.Navigation
@using Volo.Abp.Users
@inject ICurrentUser CurrentUser
@inject ICurrentTenant CurrentTenant
@inject IHtmlLocalizer<AbpUiResource> L
@model ApplicationMenu
<div class="dropdown">
<div class="lpx-user-profile dropdown-toggle" role="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="true">
@if (CurrentUser.TenantId != null)
{
<small><i>@CurrentTenant.Name</i>\</small>
@CurrentUser.UserName
}
else
{
@CurrentUser.UserName
}
</div>
@if (Model.Items.Any())
{
<div class="dropdown-menu" aria-labelledby="userDropdown" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(0px, 20px, 0px);">
@foreach (var menuItem in Model.Items)
{
var elementId = string.IsNullOrEmpty(menuItem.ElementId) ? string.Empty : $"id=\"{menuItem.ElementId}\"";
var cssClass = string.IsNullOrEmpty(menuItem.CssClass) ? string.Empty : menuItem.CssClass;
var disabled = menuItem.IsDisabled ? "disabled" : string.Empty;
var url = string.IsNullOrEmpty(menuItem.Url) ? "#" : Url.Content(menuItem.Url);
<a class="dropdown-item @cssClass @disabled" href="@url" target="@menuItem.Target" @Html.Raw(elementId)>
@if (menuItem.Icon != null)
{
if (menuItem.Icon.StartsWith("fa"))
{
<span class="lpx-menu-item-icon">
<i class="lpx-icon @menuItem.Icon"></i>
</span>
}
}
<span>@menuItem.DisplayName</span>
</a>
@if (Model.Items.IndexOf(menuItem) != Model.Items.Count - 1)
{
<div class="dropdown-divider"></div>
}
}
</div>
}
</div>
我是先查看浏览器元素，然后再参考 Basic 主题的源码进行调整：https://github.com/abpframework/abp/blob/ce9a51b2a686145a233b48a377adb206c860c0ed/modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Toolbar/UserMenu/Default.cshtml