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