ABP Framework Blazor UI

架构 overview

ABP Blazor UI 系统构建在 Blazorise 组件库之上，为构建数据驱动应用提供结构化方法，包含 CRUD 操作、主题和本地化的一致模式。

核心组件和依赖

Blazor UI 系统以Volo.Abp.BlazoriseUI包为中心，与 Blazorise 组件库集成，提供 ABP 特定功能。

CRUD 页面系统

AbpCrudPageBase<T>类为在 Blazor 应用程序中实现创建、读取、更新、删除操作提供标准化模式，包括对分页、排序、过滤和基于权限的操作的内置支持。

CRUD 页面基类结构

AbpCrudPageBase类层次结构提供多个重载以适应不同场景：

类签名	用例
`AbpCrudPageBase<TAppService, TEntityDto, TKey>`	使用默认请求 DTO 的基本 CRUD
`AbpCrudPageBase<TAppService, TEntityDto, TKey, TGetListInput>`	自定义列表输入 DTO
`AbpCrudPageBase<TAppService, TEntityDto, TKey, TGetListInput, TCreateInput>`	自定义创建输入 DTO
`AbpCrudPageBase<TAppService, TEntityDto, TKey, TGetListInput, TCreateInput, TUpdateInput>`	完全自定义

关键属性和方法

成员	类型	用途
`AppService`	`TAppService`	注入的应用服务
`Entities`	`IReadOnlyList<TListViewModel>`	当前页面实体
`NewEntity`	`TCreateViewModel`	正在创建的实体
`EditingEntity`	`TUpdateViewModel`	正在编辑的实体
`CreateModal`, `EditModal`	`Modal`	Blazorise 模态框引用
`GetEntitiesAsync()`	`Task`	从服务器加载实体
`CreateEntityAsync()`	`Task`	创建新实体
`UpdateEntityAsync()`	`Task`	更新现有实体
`DeleteEntityAsync()`	`Task`	删除实体

示例实现

Identity 模块的UserManagement组件演示了 CRUD 模式：

@inherits AbpCrudPageBase<IIdentityUserAppService, IdentityUserDto, Guid, GetIdentityUsersInput, IdentityUserCreateDto, IdentityUserUpdateDto>

数据网格和扩展系统

AbpExtensibleDataGrid<T>组件提供功能丰富的数据网格，内置对分页、排序以及可扩展列和操作的支持。

数据网格组件架构

表格列配置

TableColumn类提供广泛的自定义选项：

属性	类型	用途
`Title`	`string`	列标题文本
`Data`	`string`	属性路径或字段名
`Width`	`string`	列宽（CSS）
`Sortable`	`bool`	启用/禁用排序
`Visible`	`bool`	显示/隐藏列
`Component`	`Type`	自定义组件类型
`ValueConverter`	`Func<object, string>`	值转换函数
`DisplayFormat`	`string`	显示格式字符串
`Actions`	`List<EntityAction>`	关联操作

实体操作系统

实体操作为网格行提供上下文操作：

属性	类型	用途
`Text`	`string`	操作显示文本
`Clicked`	`Func<object, Task>`	点击事件处理程序
`Visible`	`Func<object, bool>`	可见性条件
`Disabled`	`bool`	启用/禁用状态
`Color`	`object`	操作按钮颜色
`Icon`	`string`	图标标识符
`ConfirmationMessage`	`Func<object, string>`	确认对话框文本

项目模板和托管模型

ABP 提供多个 Blazor 项目模板，支持不同的托管模型和架构模式。

模板结构

模板类型	项目结构	托管模型
`Blazor Server`	具有服务器端渲染的单个项目	Server
`Blazor WebAssembly`	客户端/服务器分离	WebAssembly
`Blazor WebApp`	混合自动渲染	Auto
`Blazor Tiered`	具有身份验证服务器的多层	Server/WebAssembly

关键包引用

模板包括跨托管模型的一致包引用：

<PackageReference Include="Blazorise.Bootstrap5" Version="1.8.0" />
<PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.8.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.5" />

模块集成

ABP 模块提供与核心 Blazor UI 系统无缝集成的 Blazor UI 组件。每个模块遵循组件组织和依赖关系的一致模式。

模块结构模式

示例模块实现

租户管理模块演示了标准模块模式：

模块类：AbpTenantManagementBlazorModule配置依赖项和服务
CRUD 页面：TenantManagement.razor继承自AbpCrudPageBase
导航：TenantManagementBlazorMenuContributor添加菜单项
本地化：与AbpTenantManagementResource集成

常见模块依赖项

所有 Blazor 模块共享以下依赖模式：

<ProjectReference Include="Volo.Abp.AspNetCore.Components.Web.Theming" />
<ProjectReference Include="Volo.Abp.AutoMapper" />
<PackageReference Include="[Module].Application.Contracts" />