ABP：如何在 LeptonX Lite MVC 中覆蓋用戶菜單組件

介紹#

User Menu 就是登錄後，右上角用戶名和下拉菜單功能的代碼。

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

通過反編譯查看源碼發現，目錄結構比上面文檔中描述的多一個 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

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