用途
layout-patterns 是一个基于 SAP fundamental-styles 组件的 UI 布局模式技能。它的目标不是介绍单个组件，而是展示如何把多个组件正确组合，构建出完整、可投入生产的界面。当用户询问“如何构建某个模式”、需要组合多个组件、想要完整可运行的示例，或询问常见 UI 模式（登录、仪表盘、主从布局等）时，适合使用本技能。
主要能力
该技能提供多种常见 UI 布局模式，每种模式都说明了所用组件、适用时机和完整示例代码。资料中明确列出的模式包括：
- 登录表单（Login Form）：包含邮箱/密码字段、校验和操作按钮的完整登录表单。使用 fd-form-item、fd-form-label、fd-input、fd-button、fd-message-strip 等组件。适用于认证页面、登录表单、用户凭据输入。
- 主从布局（Master-Detail Layout）：左侧主列表、右侧详情面板的两栏布局，点击主列表项显示其详情。使用 fd-list、fd-panel、fd-toolbar、fd-button 等组件。适用于邮件客户端、文件浏览器、设置页面等任何列表-详情关系。
- 带操作的数据表格（Data Table with Actions）：带可选行、批量操作工具栏和逐行操作按钮的表格。使用 fd-table、fd-checkbox、fd-toolbar、fd-button 等组件。适用于用户管理表格、产品目录、订单列表等需要批量操作的数据。
- 多步骤向导（Multi-Step Wizard）：用于复杂表单或流程的分步向导。使用 fd-wizard、fd-form-item、fd-input、fd-button 等组件。适用于多步表单（注册、结账、配置）、引导式工作流、设置向导、复杂数据录入流程。
- 带校验的表单（Form with Validation）：包含字段校验、错误消息和正确无障碍支持的完整表单。使用 fd-form-item、fd-form-label、fd-input、fd-select、fd-form-message、fd-button 等组件。
使用方式
每个模式都以完整示例代码的形式给出，直接使用 fundamental-styles 的 CSS 类名（如 fd-form-item、fd-input、fd-button、fd-list、fd-panel、fd-table、fd-wizard 等）编写 HTML 结构。示例中同时包含无障碍相关属性，例如：
- 必填字段使用 fd-form-label--required，并添加 aria-required="true"。
- 主操作按钮使用 fd-button--emphasized。
- 错误消息默认隐藏，校验失败时用 JavaScript 显示。
- 使用语义化 HTML5 输入类型（email、password）。
- 图标按钮添加描述性的 aria-label。
- 使用 fd-object-status 表示语义化状态。
各模式还给出了关键实现要点，例如：主从布局使用 flexbox 实现两栏、主列表固定宽度（如 300px）、活动列表项使用 is-selected 类、面板添加 overflow-y: auto 实现滚动、为列表项实现键盘导航（方向键）；数据表格在首列使用 fd-checkbox 进行行选择、选中行添加 is-selected 类、根据选择状态显示/隐藏工具栏、表格内操作使用 fd-button--compact；向导使用 fd-wizard__step--completed 表示已完成步骤、fd-wizard__step--current 表示当前步骤、只显示当前步骤内容、允许“下一步”前校验当前步骤、最后一步将“下一步”改为“完成”。
适用场景
该技能适用于需要快速搭建标准界面结构的场景，包括认证与登录页、列表-详情型页面、数据管理与批量操作表格、分步表单与引导式流程，以及需要字段校验的表单页面。
限制
资料中未提供该技能的安装命令、依赖版本、收费或价格信息、支持的框架或平台范围，以及除上述模式之外的其他模式说明。这些内容暂未提供。