抠丁客 抠丁客
项目
编辑 (2025/12/28)

Lepton X MVC UI

Lepton X 主题已实现，可直接与 ABP 配合使用。对于 Razor Pages，无需自定义实现。

安装

  • 使用 CLI 将包安装到您的 Web 项目中。
abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX

  • 从项目中移除 Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton 和 Volo.Abp.LeptonTheme.Management.Web 的引用，因为切换到 LeptonX 后不再需要它们。

  • 确保在您的 Module 类中已移除旧主题并添加了 LeptonX。

[DependsOn(
        // ...
        // 移除以下行
-       typeof(LeptonThemeManagementWebModule),
-       typeof(AbpAspNetCoreMvcUiLeptonThemeModule),

        // 添加下面这行
+       typeof(AbpAspNetCoreMvcUiLeptonXThemeModule),
)]
  • 在 AbpBundlingOptions 中将 LeptonThemeBundles 替换为 LeptonXThemeBundles。
    options.StyleBundles.Configure(
            LeptonXThemeBundles.Styles.Global, // 👈 此处
            bundle =>
            {
                bundle.AddFiles("/global-styles.css");
            }
        );

源代码

您可以根据您的 ABP 许可证下载 LeptonX 主题的源代码。

访问 Lepton X 源代码 部分以下载源代码。

自定义

在开始自定义主题之前，您可以考虑下载主题的源代码。您可以在源代码中找到相关组件的原始代码。

外观

您可以使用 LeptonXThemeOptions 来设置默认主题、添加或移除外观样式以及布局背景样式。

  • DefaultStyle：定义默认的回退主题。默认值为 Dim
Configure<LeptonXThemeOptions>(options =>
{
    options.DefaultStyle = LeptonXStyleNames.Dark;
});
  • Styles：定义可从 UI 中选择的外观。

lepton-x-selectable-themes

Configure<LeptonXThemeOptions>(options =>
{
    // 移除现有样式
    options.Styles.Remove(LeptonXStyleNames.Light);

    // 添加新样式
    options.Styles.Add("red", 
        new LeptonXThemeStyle(
        LocalizableString.Create<YourResource>("Theme:Red"),
        "bi bi-circle-fill"));
});

为了在选择自定义主题时能正常切换，必须在 wwwroot/Themes/LeptonX/Global/side-menu/css/ 文件夹下添加 red.css 和 bootstrap-red.css 文件。

如果您的布局是 TopMenu，则必须将它们添加到 wwwroot/Themes/LeptonX/Global/top-menu/css/ 文件夹下。

工具栏

LeptonX 包含独立的桌面版和移动版工具栏。您可以独立管理工具栏。工具栏名称可在 LeptonXToolbars 类中访问。

  • LeptonXToolbars.Main
  • LeptonXToolbars.MainMobile
public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
{
    if (context.Toolbar.Name == LeptonXToolbars.Main)
    {
        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
    }

    if (context.Toolbar.Name == LeptonXToolbars.MainMobile)
    {
        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
    }

    return Task.CompletedTask;
}

您可以访问 工具栏文档 以获得更好的理解。

您可以使用以下 javascript API 在样式更改时添加额外的逻辑。

leptonx.CSSLoadEvent.on(event => {
    console.log("样式已从 " + event.detail.previousTheme + " 更改为 "+ event.detail.theme);
});

LeptonXThemeMvcOptions

MVC Razor Pages UI 的布局选项可以通过 LeptonXThemeMvcOptions 进行管理。

  • ApplicationLayout：主应用程序的布局。默认值为 LeptonXMvcLayouts.SideMenu

    Configure<LeptonXThemeMvcOptions>(options =>
{
    options.ApplicationLayout = LeptonXMvcLayouts.SideMenu;
    // 或者您自定义实现的布局：
    options.ApplicationLayout = "~/Shared/_Layout.cshtml";
});

  • MobileMenuSelector：定义在移动菜单中显示的项。默认值为主菜单项的前 2 项。

    Configure<LeptonXThemeMvcOptions>(options =>
{
    options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
});

    leptonx-mobile-menu-preview

  • AccountLayoutBackgroundStyle：定义账户布局的背景样式。

    Configure<LeptonXThemeMvcOptions>(options =>
{
    options.AccountLayoutBackgroundStyle = "background-image: url('/images/login-background-image.svg') !important;";
});

    leptonx-account-layout-background-style

布局

LeptonX 为您的 Web 应用程序提供了两种 现成的布局。一种是 菜单项位于顶部，另一种是 菜单项位于侧边。

顶部菜单布局

Top menu layout

侧边菜单布局

Side menu layout

布局定义在 Themes/LeptonX/Layouts/Application 文件夹中，您可以通过在相同文件夹下创建同名文件（SideMenuLayout.cshtml 或 TopMenuLayout.cshtml）来覆盖它。

在 Themes/LeptonX/Layouts/Application 文件夹中定义了一些分部视图。您可以通过在相同文件夹下创建同名文件来覆盖它们。

  • _Footer.cshtml
  • _Sidebar.cshtml
  • _Toolbar.cshtml

自定义页脚部分

在 Themes/LeptonX/Layouts/Application 文件夹下添加 _Footer.cshtml 文件来自定义页脚：

<div class="text-center py-2 lpx-footer">
    <span class="copyright-text">
       @DateTime.Now.Year © AbpSolution1<br />
    </span>
</div>

Customizing Footer

您同样可以自定义 _Sidebar.cshtml 和 _Toolbar.cshtml 文件。

账户布局

Account layout

账户布局定义在 Themes/LeptonX/Layouts/Account 文件夹中，您可以通过在相同文件夹下创建同名文件（Default.cshtml）来覆盖它。其中有一个分部视图，名为 Footer.cshtml。您可以通过相同方式来覆盖它。

组件

Abp 帮助您构建高度可定制的 UI。您可以轻松地自定义主题以满足您的需求。虚拟文件系统使得管理物理上不存在于文件系统（磁盘）上的文件成为可能。它主要用于将 (js, css, image..) 文件嵌入程序集，并在运行时像物理文件一样使用它们。

应用程序（或另一个模块）可以覆盖模块的虚拟文件，就像在虚拟文件的相同文件夹中放置一个同名且同扩展名的文件一样。

LeptonX 基于 ABP 构建，因此您可以轻松地按照 Abp Mvc UI 自定义 指南自定义您的 Asp.Net Core Mvc 用户界面。

通用组件

在所有布局中常用的组件。

面包屑导航

Breadcrumb

面包屑导航可以通过 IPageLayout 服务进行自定义。有关更多信息，请参阅 PageLayout - 面包屑导航。

如果需要替换该组件，您可以按照以下步骤操作。

  • 面包屑组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/Common/BreadCrumb/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 面包屑组件（C# 文件） 定义在 Themes/LeptonX/Components/Common/BreadCrumb/ContentBreadCrumbViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

内容标题

Content title

页面标题可以通过 IPageLayout 服务进行自定义。有关更多信息，请参阅 PageLayout - 页面标题。

如果需要替换该组件，您可以按照以下步骤操作。

  • 内容标题组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/Common/ContentTitle/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 内容标题组件（C# 文件） 定义在 Themes/LeptonX/Components/Common/ContentTitle/ContentTitleViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

常规设置

General settings

常规设置可以通过以下文件替换。

  • 常规设置组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/Common/GeneralSettings/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 常规设置组件（C# 文件） 定义在 Themes/LeptonX/Components/Common/GeneralSettings/GeneralSettingsViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

主头部品牌标识

Main header branding

应用程序名称和徽标可以通过 IBrandingProvider 服务进行自定义。有关更多信息，请参阅 Razor 页面：品牌标识。

如果需要替换该组件，您可以按照以下步骤操作。

  • 主头部品牌标识组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/Common/MainHeaderBranding/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 主头部品牌标识组件（C# 文件） 定义在 Themes/LeptonX/Components/Common/MainHeaderBranding/MainHeaderBrandingViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

移动版常规设置

Mobile general settings

  • 移动版常规设置组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/Common/MobileGeneralSettings/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 移动版常规设置组件（C# 文件） 定义在 Themes/LeptonX/Components/Common/MobileGeneralSettings/MobileGeneralSettingsViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

页面提醒

Page alerts

  • 页面提醒组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/PageAlerts/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 页面提醒组件（C# 文件） 定义在 Themes/LeptonX/Components/PageAlerts/PageAlertsViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

侧边菜单组件

在侧边菜单布局中使用的组件。

主菜单

Sidebar Main menu

  • 主菜单组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/SideMenu/MainMenu/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 主菜单组件（C# 文件） 定义在 Themes/LeptonX/Components/SideMenu/MainMenu/MainMenuViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

主菜单组件使用分部视图来渲染菜单项。该分部视图定义在 Themes/LeptonX/Components/SideMenu/MainMenu/_MenuItem.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

移动导航栏

Mobile navbar

  • 移动导航栏组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/SideMenu/MobileNavbar/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 移动导航栏组件（C# 文件） 定义在 Themes/LeptonX/Components/SideMenu/MobileNavbar/MobileNavbarViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

语言切换器

Language switch

  • 语言切换器组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/SideMenu/Toolbar/LanguageSwitch/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 语言切换器组件（C# 文件） 定义在 Themes/LeptonX/Components/SideMenu/Toolbar/LanguageSwitch/LanguageSwitchViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

用户菜单

User menu

  • 用户菜单组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/SideMenu/Toolbar/UserMenu/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 用户菜单组件（C# 文件） 定义在 Themes/LeptonX/Components/SideMenu/Toolbar/UserMenu/UserMenuViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

LeptonX 实现了 ABP 菜单 ABP 导航/菜单。因此您可以查看该文档以了解如何向用户菜单添加/移除菜单项。

顶部菜单组件

在顶部菜单布局中使用的组件。

主头部

Main header

  • 主头部组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/TopMenu/MainHeader/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 主头部组件（C# 文件） 定义在 Themes/LeptonX/Components/TopMenu/MainHeader/MainHeaderViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

主头部工具栏

Main header toolbar

  • 主头部工具栏组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/TopMenu/MainHeaderToolbar/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 主头部工具栏组件（C# 文件） 定义在 Themes/LeptonX/Components/TopMenu/MainHeaderToolbar/MainHeaderToolbarViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

在替换主头部工具栏组件之前，请访问 ABP 工具栏 文档以了解如何向主头部工具栏添加/移除菜单项。

主菜单

Main menu

  • 主菜单组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/TopMenu/MainMenu/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 主菜单组件（C# 文件） 定义在 Themes/LeptonX/Components/TopMenu/MainMenu/MainMenuViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

用户菜单

User menu

  • 用户菜单组件页面（.cshtml 文件） 定义在 Themes/LeptonX/Components/TopMenu/UserMenu/Default.cshtml 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

  • 用户菜单组件（C# 文件） 定义在 Themes/LeptonX/Components/TopMenu/UserMenu/UserMenuViewComponent.cs 文件中，您可以通过在相同文件夹下创建同名文件来覆盖它。

在替换用户菜单组件之前，请访问 ABP 导航/菜单 文档以了解如何向用户菜单添加/移除菜单项。

在本文档中