SuperAPI AI 工具集

angular-ui-patterns

前端与建站

查看项目

更新于 10-15 21:49

技能介绍

用途:为现代 Angular 应用提供 UI 状态处理模式,覆盖加载状态、错误处理与数据展示,适用于构建 UI 组件、处理异步数据或管理组件状态。

核心原则:不展示过期 UI,仅在真正加载时显示加载态;错误必须呈现给用户;支持乐观更新;用 @defer 渐进展示内容;允许优雅降级,部分数据优于无数据。

主要能力:

  1. 加载状态:仅当无数据可显示时才显示加载指示;提供骨架屏与加载圈的选用场景(已知内容形状、列表/卡片、首屏加载用骨架屏;未知形状、弹窗操作、按钮提交、内联操作用加载圈);给出加载状态决策树。
  2. 控制流:使用 @if/@else 条件渲染、@for 配合 track 与 @empty 空状态、@defer 配合 @placeholder/@loading/@error 渐进加载。
  3. 错误处理:分层为字段级内联错误、Toast、页面级错误横幅、全屏错误;强调不得静默吞掉错误,并提供错误状态组件模式。
  4. 按钮状态:异步操作期间禁用触发按钮并显示加载指示,避免重复点击。
  5. 空状态:每个列表/集合必须提供空状态,支持图标、标题、描述与操作按钮。
  6. 表单:结合响应式表单、字段校验错误提示与提交中状态。
  7. 对话框:提供确认对话框服务模式,返回布尔结果。

使用方式:在 Angular 组件模板中按上述模式组织状态分支,配合 Signal 状态存储与注入服务;技能文档给出组件示例与反模式对照。

适用场景:构建列表、表单、对话框等 UI 组件,处理异步数据加载与提交,管理组件状态。

限制:仅当任务明确匹配上述范围时使用;输出不能替代针对具体环境的验证、测试或专家评审;若缺少必要输入、权限、安全边界或成功标准,应停止并请求澄清。具体安装命令、收费与平台信息暂未提供。