ABP：如何在 LeptonX Lite MVC 中覆盖用户菜单组件

介绍#

用户菜单 就是登录后，右上角用户名和下拉菜单功能的代码。

ABP 中不同主题的代码位置不一样。

LeptonX Lite 主题#

这个主题虽然是免费使用，但源码并没有公开出来。

如何覆盖默认文件：
https://github.com/abpframework/abp/blob/ce9a51b2a686145a233b48a377adb206c860c0ed/docs/en/ui-themes/lepton-x-lite/asp-net-core.md#how-to-override-the-user-menu-component-in-leptonx-lite-mvc

如果按照上面的文档覆盖不了，那可能是低版本源码中目录结构和上面稳定不一样，比如我目前版本是：Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite, Version=3.1.5.0

通过反编译查看源码发现，目录结构比上面文档中描述的多一个 工具栏 层级：

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

Basic 主题#

如果是 Basic 主题，可以参考：https://github.com/abpframework/abp/blob/ce9a51b2a686145a233b48a377adb206c860c0ed/modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Toolbar/UserMenu/UserMenuViewComponent.cs