scaffold

用途

Scaffold 是一个用于生成 Angular 组件的技能，专门针对 SAP 的 fundamental-ngx 组件库。它帮助开发者快速创建符合 fundamental-ngx 设计模式的可运行组件，减少手动编写样板代码和查找 API 的时间。

支持多种模式：dialog（模态对话框，含模板/组件引用/对象三种变体）、table（数据表格，含 fd-table/fdp-table/ui5-table 变体）、card（带标题和内容的内容卡片）、form（带表单项和验证的表单布局）、shell（带 shellbar 和导航的应用外壳）、layout-grid（响应式网格布局）。
通过 @fundamental-ngx/mcp MCP 服务器获取准确、最新的信息，包括变体决策树、组合模式、常见陷阱、相关组件、组件选择器、输入属性、所需导入以及真实示例。
若 MCP 服务器不可用，可回退到直接读取 libs/mcp-server/src/data/usage-guides.ts。
生成完整的 Angular 组件文件：TypeScript（.component.ts）、HTML 模板（.component.html）和 SCSS（.component.scss）。
遵循现代 Angular 实践：ChangeDetectionStrategy.OnPush、基于信号的 state（signal()、computed()）、input()/output()、@if/@for 控制流、host: {} 替代 @HostBinding/@HostListener、不添加 standalone: true（Angular 19 起默认）。
生成后可在 NX 工作区或 Angular CLI 项目中运行构建验证编译，并报告和修复导入错误或类型不匹配。

技能通过参数 $ARGUMENTS 接收模式名称。若参数为空，会询问用户想要哪种模式。流程分为六个阶段：

识别模式：从参数中解析模式名称，若指定了变体则记录。
收集上下文：调用 MCP 工具 get_usage_guide、get_component_api、get_component_examples 获取信息。
选择变体：若模式有多个变体，用户指定则使用，否则展示决策树让用户选择。
确定目标位置：询问生成路径和组件名称，若只提供名称则默认到 src/app/components/<name>/。
生成组件：创建 TypeScript、HTML、SCSS 文件，遵循关键规则（属性指令如 <button fd-button>、元素选择器如 <fd-card>、使用 @if/@for/@switch 等）。
验证：在 NX 或 Angular CLI 项目中运行构建，报告并修复问题。

输出格式包含生成的文件列表、所需导入以及后续步骤清单。

适用于使用 fundamental-ngx 组件库的 Angular 项目开发，需要快速搭建符合设计规范的组件时。特别适合需要遵循 SAP 设计系统、使用现代 Angular 特性（信号、控制流）的项目。