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

LeptonX Lite Angular UI

LeptonX Lite 为 ABP Angular 客户端提供了实现。它是 LeptonX 主题 的一个简化版本。

如果您正在寻找专业、企业级就绪的主题，可以查看作为 ABP 一部分的 LeptonX 主题。

请参阅 主题文档 了解有关主题的信息。

安装

在使用启动模板创建新解决方案时，此主题 已预先安装。如果您使用任何其他模板，可以按照以下步骤安装此主题：

要将 LeptonX-lite 添加到您的项目中，

  • 安装 @abp/ng.theme.lepton-x
yarn add @abp/ng.theme.lepton-x
  • 安装 bootstrap-icons
yarn add bootstrap-icons

  • 然后，我们需要编辑 angular.json 中的 styles 数组，以替换现有样式，新的样式配置请参考以下链接：

  • 样式 - Angular UI

注意：如果您正在从 "ThemeBasic" 或 "Lepton" 主题切换，应移除 "angular.json" 中的旧主题样式。 查看 主题配置 中的样式列表。根据您的主题，可以修改 angular.json 中的样式。

  • 最后，从 app.config.ts 中移除 provideThemeBasicConfig，并在 app.config.ts 中导入相关的提供者：
import { provideThemeLeptonX } from "@abp/ng.theme.lepton-x";
import { provideSideMenuLayout } from "@abp/ng.theme.lepton-x/layouts";

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideSideMenuLayout(),
    provideThemeLeptonX(),
  ],
};

注意：如果您使用 资源所有者密码流程 进行授权，还应该提供以下提供者：

import { provideAccountLayout } from "@abp/ng.theme.lepton-x/account";

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideAccountLayout()
  ],
};

要更改 LeptonX 的徽标和品牌颜色，您有两个选项：

  1. 通过 主题共享 提供者提供徽标和应用程序名称（推荐）
// app.config.ts
import { provideLogo, withEnvironmentOptions } from '@abp/ng.theme.shared';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideLogo(withEnvironmentOptions(environment)),
  ],
};

确保您的环境变量包含徽标 URL 和应用程序名称：

// environment.ts
export const environment = {
  // ...
  application: {
    name: 'MyProjectName',
    logoUrl: '/assets/images/logo.png',
  },
};

LeptonX 品牌组件会自动从 @abp/ng.theme.shared 读取这些值。

  1. 或者通过 styles.scss 中的 CSS 变量覆盖
:root {
  --lpx-logo: url("/assets/images/logo.png");
  --lpx-logo-icon: url("/assets/images/logo-icon.png");
  --lpx-brand: #edae53;
}
  • --lpx-logo 用于在菜单中放置徽标。
  • --lpx-logo-icon 是一个方形图标，在菜单折叠时使用。
  • --lpx-brand 是一种在整个应用程序中使用的颜色，尤其是在活动元素上。

提示：您可以组合使用两种方法。例如，通过 provideLogo(...) 提供主徽标，同时仍然可以使用 CSS 微调视觉效果（尺寸、颜色）。

服务器端

为了在您的服务器端项目（主机项目和/或认证服务器项目）上迁移到 LeptonX，请按照 服务器端迁移 文档进行操作。

自定义

布局

LeptonX Lite 的 Angular 版本为您的 用户界面 提供了 布局组件，基于 ABP 主题化。您可以使用这些布局来 组织您的用户界面。您可以使用 ABP 可替换组件系统 替换 布局组件 以及 布局组件 的某些部分。

主题的主要职责是 提供 布局。所有主题 必须实现以下三种预定义布局：

  • ApplicationLayoutComponent： 默认 布局，用于 主 应用程序页面。
  • AccountLayoutComponent：主要由 账户模块 用于 登录、注册、忘记密码... 等页面。
  • EmptyLayoutComponent： 最小化 布局，不包含任何布局组件。

布局组件 以及所有可替换组件都在 eThemeLeptonXComponents 枚举中预定义。

如何替换组件

import { ReplaceableComponentsService } from '@abp/ng.core'; // 导入 ReplaceableComponentsService
import { eIdentityComponents } from '@abp/ng.identity'; // 导入 eIdentityComponents 枚举
import { eThemeLeptonXComponents } from '@abp/ng.theme.lepton-x'; // 导入 eThemeLeptonXComponents 枚举
import { Component, inject } from '@angular/core';

//...

@Component(/* 组件元数据 */)
export class AppComponent {
  private replaceableComponents = inject(ReplaceableComponentsService);

  constructor() {
    this.replaceableComponents.add({
      component: YourNewApplicationLayoutComponent,
      key: eThemeLeptonXComponents.ApplicationLayout,
    });
  }
}

请参阅 组件替换 文档以获取更多关于如何替换组件的信息。

品牌组件

品牌组件 是一个简单的组件，可用于显示您的品牌。它包含一个 徽标 和一个 公司名称。您可以通过 CSS 更改徽标，但如果您想更改徽标组件，其键为 eThemeLeptonXComponents.Logo。

///...
this.replaceableComponents.add({
  component: YourNewLogoComponent,
  key: eThemeLeptonXComponents.Logo,
});
///...

品牌组件

面包屑导航组件

在拥有大量页面的网站上，面包屑导航 可以极大地 提升用户找到所需内容的方式。就 可用性 而言，面包屑减少了网站 访问者 为了到达 更高层级页面 所需采取的操作次数，并且 提高了 网站 部分 和 页面 的 可查找性。

///...
this.replaceableComponents.add({
  component: YourNewSidebarComponent,
  key: eThemeLeptonXComponents.Breadcrumb,
});
///...

面包屑导航组件

导航栏组件

侧边栏菜单已被用作 相关页面目录，用于 服务 提供、指向 特定服务 或主题的 导航项，甚至是用户可能感兴趣的 链接。

///...
this.replaceableComponents.add({
  component: YourNewSidebarComponent,
  key: eThemeLeptonXComponents.Navbar,
});
///...

侧边栏菜单组件

页面提示组件

为典型的用户操作提供上下文 反馈消息，包含多种 可用 且 灵活 的 提示消息。提示适用于任意长度的文本，并带有 可选 的 关闭按钮。

页面提示组件

///...
this.replaceableComponents.add({
  component: YourNewPageAlertContainerComponent,
  key: eThemeLeptonXComponents.PageAlertContainer,
});
///...

工具栏组件

面包屑导航组件

工具栏项目用于为工具栏 添加额外功能。工具栏是一个 水平条，包含 一组 工具栏项目。

///...
this.replaceableComponents.add({
  component: YourNewNavItemsComponent,
  key: eThemeLeptonXComponents.NavItems,
});
///...

工具栏项目

工具栏由两部分组成。第一部分是语言切换。第二部分是用户个人资料元素。您可以单独替换这些部分中的每一个。

语言切换组件

考虑一个 多语言 网站，您首先想到的可能是 语言切换组件。导航栏 是 嵌入语言切换 的 绝佳位置。通过将语言切换嵌入网站的导航栏中，您可以使网站用户 更轻松地找到它，并且 无需费力在网站上寻找即可轻松切换语言。

语言切换组件

///...
this.replaceableComponents.add({
  component: YourNewLanguagesComponent,
  key: eThemeLeptonXComponents.Languages,
});
///...

用户菜单组件

用户菜单 是当您单击页面 右上角 （工具栏中）的 姓名 或 个人资料图片 时 下拉 的 菜单。它会下拉显示诸如 设置、注销 等选项。

用户菜单组件

///...
this.replaceableComponents.add({
  component: YourNewCurrentUserComponent,
  key: eThemeLeptonXComponents.CurrentUser,
});
///...

注意：Volo 应用程序中的语言选择组件不可替换。它是设置菜单的一部分。

移动导航栏组件

移动导航栏组件 用于在移动设备上显示 导航栏菜单。移动导航栏组件是一个 下拉菜单，包含语言选择和个人资料菜单。

移动用户菜单组件

///...
this.replaceableComponents.add({
  component: YourNewMobileNavbarComponent,
  key: eThemeLeptonXComponents.MobileNavbar,
});
///...

移动导航栏项目

移动导航栏由两部分组成。移动导航栏包含语言切换和个人资料。您可以单独替换这些部分中的每一个。

移动语言选择组件的键是 eThemeLeptonXComponents.MobileLanguageSelection。

移动个人资料组件的键是 eThemeLeptonXComponents.MobileUserProfile。

页脚组件

Angular 页脚组件

页脚是网站最底部的部分。此部分的内容可以修改。 注入 FooterLinksService 并使用 FooterLinksService 的 setFooterInfo 方法来分配路径/链接和描述。 descUrl 和 footerLinks 可以为空。常量 footerLinks 显示在页脚右侧。

///...

const footerLinks = [
  {
    link: "/components/bootstrap/badge",
    text: "管理您的个人资料",
  },
  {
    link: "/components/bootstrap/border",
    text: "我的安全日志",
  },
];

const footerInfo: FooterNav = {
  desc: "首页",
  descUrl: "/components/home",
  footerLinks: footerLinks,
};

this.footerLinksService.setFooterInfo(footerInfo);

///...

如果您想更改页脚组件，其键为 eThemeLeptonXComponents.Footer。

///...
this.replaceableComponents.add({
  component: YourNewFooterComponent,
  key: eThemeLeptonXComponents.Footer,
});
///...
在本文档中