eaf-ui

用途

本技能用于指导 EAF（Enterprise Application Foundation）UI 的开发、维护与扩展。EAF 是构建在 ASP.NET Boilerplate（ABP）之上的开源中间件平台，其 UI 层采用 Angular 18 前端来消费 EAF 的 REST API。目标是编写功能可用、易维护、高性能且可扩展的 UI 代码，并遵循 Angular 与 TypeScript 最佳实践。

技术栈

• Angular 版本：18
• TypeScript 版本：5.2
• Node.js 版本：20.20.0
• UI 框架：Bootstrap 5
• 组件库：PrimeNG 17
• 图表：Chart.js
• 响应式编程：RxJS 7
• 构建工具：Angular CLI
• 状态管理：RxJS，可选 NgRx
• HTTP：Angular HttpClient

项目结构

angular/ 目录下包含：src/app 中的 components、pages、services、models、guards、interceptors、shared、layout、core；src 下另有 assets、environments、styles；根级包含 angular.json、package.json、tsconfig.json。

主要能力与实践模式

• 独立组件（Standalone Components）：Angular 中默认使用独立组件，示例以 standalone: true 并导入 CommonModule。
• Signals 响应式状态：使用 signal、computed、effect 管理响应式状态。
• 依赖注入服务：通过 @Injectable 与 HttpClient 提供 API 服务，示例包含 getAll、create、delete 等方法。
• EAF 特定 UI 模式：包含身份验证服务（AuthService），使用 api/TokenAuth 的 Authenticate 接口，使用 localStorage 存储 token，并提供 logout、isAuthenticated、getCurrentUser；JWT HTTP 拦截器为请求添加 Authorization: Bearer；路由守卫包含 authGuard 与 permissionGuard，支持 returnUrl 与权限数据。
• PrimeNG 数据表格：使用 p-table，配合 paginator、rows 以及 header、body 模板。
• 响应式表单：使用 FormBuilder、FormGroup、Validators 构建表单并校验。
• 组件模式：区分智能组件（容器）与展示组件（哑组件），展示组件使用 input、output。
• 内容投影：通过 ng-content 的 select 支持 card-header、card-body、card-footer 插槽。
• 路由：提供路由配置示例，包含重定向、懒加载 loadComponent、canActivate、data 权限及通配路由；支持 loadChildren 懒加载子路由。
• 状态管理：以 Signals 管理本地状态的示例（user、loading、error 及 computed 派生状态）。
• 测试：提供组件测试示例，使用 TestBed、jasmine.createSpyObj 与 of 模拟服务返回。

适用场景

适用于开发和维护 EAF 平台的 Angular 前端：对接 EAF REST API、实现登录鉴权与权限控制、构建数据表格与表单页面、组织路由与组件结构、编写组件测试。

限制

资料中未提供收费、价格、平台支持范围、性能效果等事实，暂未提供。示例中关于 Angular 19 最佳实践的标题与正文（Angular 18）存在版本表述差异，按资料原文未作改动；NgRx 为可选项；资料未提供安装命令、初始化步骤或版本升级说明。