ASP.NET Core MVC / Razor Pages UI：工具栏

工具栏系统用于在用户界面中定义工具栏。模块（或您的应用程序）可以向工具栏添加项目，然后主题会在布局中渲染该工具栏。

只有一个名为“Main”的标准工具栏（定义为常量：StandardToolbars.Main）。基础主题将主工具栏渲染效果如下：

在上面的截图中，主工具栏添加了两个项目：语言切换组件和用户菜单。您可以在此处添加自己的项目。

此外，LeptonX Lite 主题和LeptonX 主题分别为桌面端和移动端视图提供了2个不同的工具栏，这些工具栏均被定义为常量。

LeptonX Lite 主题

• LeptonXLiteToolbars.Main
• LeptonXLiteToolbars.MainMobile

LeptonXLiteToolbars.Main	LeptonXLiteToolbars.MainMobile

LeptonX 主题

• LeptonXToolbars.Main
• LeptonXToolbars.MainMobile

LeptonXToolbars.Main	LeptonXToolbars.MainMobile

示例：添加通知图标

在本示例中，我们将在语言切换项目的左侧添加一个通知（铃铛）图标。工具栏中的项目应该是一个视图组件。因此，首先在您的项目中创建一个新的视图组件：

NotificationViewComponent.cs

public class NotificationViewComponent : AbpViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        return View("/Pages/Shared/Components/Notification/Default.cshtml");
    }
}

Default.cshtml

<div id="MainNotificationIcon" style="color: white; margin: 8px;">
    <i class="far fa-bell"></i>
</div>

现在，我们可以创建一个实现 IToolbarContributor 接口的类：

public class MyToolbarContributor : IToolbarContributor
{
    public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
    {
        if (context.Toolbar.Name == StandardToolbars.Main)
        {
            context.Toolbar.Items
                .Insert(0, new ToolbarItem(typeof(NotificationViewComponent)));
        }

        return Task.CompletedTask;
    }
}

您可以使用授权来决定是否添加 ToolbarItem。

if (await context.IsGrantedAsync("MyPermissionName"))
{
    //...添加工具栏项目
}

您可以使用 RequirePermissions 扩展方法作为快捷方式。这种方式性能更优，因为ABP会对所有项目进行权限检查优化。

context.Toolbar.Items.Insert(0, new ToolbarItem(typeof(NotificationViewComponent)).RequirePermissions("MyPermissionName"));

这个类将 NotificationViewComponent 添加为 Main 工具栏的第一个项目。

最后，您需要将此贡献者添加到 AbpToolbarOptions 中，在您模块的 ConfigureServices 方法中进行配置：

Configure<AbpToolbarOptions>(options =>
{
    options.Contributors.Add(new MyToolbarContributor());
});

这样就完成了，当您运行应用程序时，将在工具栏上看到通知图标：

本示例中的 NotificationViewComponent 只是简单地返回一个不包含任何数据的视图。在实际应用中，您可能需要查询数据库（或调用HTTP API）来获取通知数据并传递给视图。如果需要，您可以为工具栏项目添加 JavaScript 或 CSS 文件到全局捆绑中。

IToolbarManager

IToolbarManager 用于渲染工具栏。它通过工具栏名称返回工具栏项目。这通常由主题在布局中渲染工具栏时使用。