myesn

myEsn2E9

hi
github

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

介绍#

image

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

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

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。