mcpField
M
magento-ui-component-developer

magento-ui-component-developer

github.com/maxnorm开发31182 次安装40 周前更新
代码仓库

关于 magento-ui-component-developer

面向 Magento 开发者的专业技能，指导使用 UI Component 框架构建管理端和前端的数据驱动界面，涵盖配置、数据管理与 KnockoutJS 模板。

主要功能

  1. 01配置组件层级与 XML 文件
  2. 02构建可筛选和排序的数据网格
  3. 03开发动态与多步骤表单
  4. 04实现数据提供器与分页
  5. 05使用 KnockoutJS 数据绑定

适用场景

  1. 01创建管理端网格和表单
  2. 02构建产品、订单或客户管理界面
  3. 03实现带校验的复杂表单
  4. 04制作模态框和报告界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/maxnorm/magento2-agent-skills --skill magento-ui-component-developer

安装后在 Claude Code 中输入/magento-ui-component-developer确认已加载。

详细介绍

Magento 2 UI 组件开发者

擅长使用 Magento 强大的 UI Component 框架，为管理后台和前端应用创建复杂的数据驱动型界面。

适用场景

  • 创建管理后台网格和表单
  • 构建数据驱动型界面
  • 开发自定义 UI 组件
  • 实现带验证功能的复杂表单
  • 创建模态对话框和弹出窗口
  • 构建报告和分析界面

UI Component 架构

  • 组件层级：掌握父子组件关系和继承
  • XML 配置：精通组件定义和配置文件
  • 数据提供程序：实现高效的数据源和集合管理
  • KnockoutJS 集成：构建响应式模板和数据绑定
  • 组件通信：处理组件间通信和事件

组件类型

列表组件（网格）
  • 数据网格：创建支持筛选和排序的高级数据网格
  • 产品网格：产品管理界面
  • 订单网格：订单管理系统
  • 客户网格：客户数据管理界面
  • 自定义实体网格：用于自定义数据实体的网格
表单组件
  • 产品表单：复杂的产品编辑界面
  • 配置表单：系统配置界面
  • 客户表单：客户数据录入表单
  • 多步骤表单：向导式表单界面
  • 动态表单：包含条件字段显示功能的表单
模态组件
  • 动态模态框：模态对话框和弹出窗口
  • 表单模态框：模态对话框中的表单
  • 确认对话框：确认和提醒对话框
  • 自定义模态框：专用模态框实现

UI Component 开发流程

1. 组件规划与设计
  • 需求分析：定义组件功能和用户交互
  • 数据架构：规划数据结构和数据提供程序需求
  • UX 设计：设计易于使用的界面和工作流
  • 性能考量：规划可扩展性和优化方案
  • 集成策略：规划与现有系统的集成
2. 组件结构设置
  • XML 配置：创建组件定义文件
  • 目录结构：组织组件文件及其依赖项
  • 数据提供程序：实现数据源和集合处理
  • 模板文件：创建用于渲染的 KnockoutJS 模板
  • JavaScript 模块：构建组件逻辑和交互
3. 数据管理
  • 集合构建：创建高效的数据集合
  • 筛选与排序：实现高级筛选和排序功能
  • 分页：通过分页处理大型数据集
  • 搜索功能：实现搜索和筛选机制
  • 数据验证：确保数据完整性并进行验证
4. 用户界面开发
  • 响应式设计：创建适用于不同设备的界面
  • 无障碍访问：实现 WCAG 合规性和键盘导航
  • 用户体验：优化交互，让操作直观易用
  • 性能：确保快速加载和流畅交互
  • 跨浏览器：确保兼容各种浏览器

XML 配置

组件定义
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">vendor_module.grid_data_source</item>
        </item>
    </argument>
    <columns name="columns">
        <column name="id">
            <settings>
                <filter>text</filter>
                <label translate="true">ID</label>
            </settings>
        </column>
    </columns>
</listing>
表单配置
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Name</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

数据提供程序

集合数据提供程序
  • 实现 \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface
  • 创建高效的数据集合
  • 处理筛选、排序和分页
  • 优化数据库查询
表单数据提供程序
  • 加载并保存表单数据
  • 处理表单字段依赖关系
  • 实现数据验证
  • 管理表单状态

KnockoutJS 模板

模板开发
  • 创建用于组件渲染的 KnockoutJS 模板
  • 实现数据绑定
  • 处理用户交互
  • 管理组件状态
数据绑定
  • 双向数据绑定
  • 计算型可观察对象
  • 可观察数组
  • 自定义绑定

最佳实践

性能
  • 高效集合：优化数据收集查询
  • 延迟加载：按需加载数据
  • 缓存：缓存频繁访问的数据
  • 分页：为大型数据集实现适当的分页
代码组织
  • 模块化结构：将组件组织到逻辑模块中
  • 可复用组件：创建可复用的组件模式
  • 文档：维护清晰的组件文档
  • 测试：为组件功能编写测试
用户体验
  • 响应式设计：确保界面适配移动设备
  • 无障碍访问：实现 WCAG 合规性
  • 错误处理：提供清晰的错误消息
  • 加载状态：显示适当的加载指示器

参考资料

专注于创建直观、高性能的 UI 组件，以提升用户体验和工作效率。

评论

支持 Markdown