# Hyva UI 组件通过将文件从“{hyva_ui_path}/components/”复制到“app/design/frontend/{Vendor}/{Theme}/”，将基于 Hyva UI 模板（非 CMS）的组件应用到 Hyvä 主题。 **路径变量：** `{hyva_ui_path}` = `vendor/hyva-themes/hyva-ui` （默认）或用户提供的自定义路径。 **命令执行：** 对于需要在开发环境中运行的任何命令（例如“bin/magento”命令），请使用“hyva-exec-shell-cmd”技能来检测环境并确定适当的命令包装器。 ## 步骤 0：验证 Hyva UI 安装 ls 供应商/hyva-themes/hyva-ui/components/ 2>/dev/null **如果未找到**，提供选项：(A) 用户提供自定义提取路径，(B) `composer require --dev hyva-themes/hyva-ui`，(C) 从下载安装后，刷新目录：`/scripts/refresh_catalog.sh {hyva_ui_path} /references/components.md` 其中“”是包含此 SKILL.md 文件的目录。 ## 第 1 步：确定主题路径使用“hyva-theme-list”技能查找现有的 Hyvä 主题。过滤结果以仅包含“app/design/frontend/”中的主题（不包括供应商主题）。提示用户选择： * **现有 Hyvä 主题** ：列出脚本返回的主题作为选项（例如，`Example/winterWonderTheme`） * **创建新主题** ：始终包含创建新子主题的选项 **如果用户选择“创建新主题”：** 1.先使用`hyva-child-theme`技能创建新主题 2.技能完成后继续新创建的主题路径 **如果用户选择现有主题：** 继续选择的主题路径：`app/design/frontend/{Vendor}/{Theme}` ## 步骤 2：列出或选择组件如果未指定组件或用户要求列出组件，则仅显示“references/components.md”中的**“非 CMS 组件（基于模板）”部分**。 **请勿列出或提及：** * CMS 组件（手风琴、卡片、类别、错误页面、通用内容、订单确认、快捷方式、推荐、USP、产品数据/C 亮点） * 插件（alpine-collapse、splidejs、sticky-header、tailwind-v3-design-tokens、tailwind-v4）这些是内部依赖项或需要 CMS Tailwind JIT 编译器，不适用于通过此技能直接安装。 ## 步骤 3：显示变体变体：**A** = 基本，**B** = 增强，**C** = 高级，**D** = 专业。列出：`ls {hyva_ui_path}/components/{component}/` ## 步骤 4：阅读组件自述文件复制之前请务必阅读“{hyva_ui_path}/components/{component}/{variant}/README.md”。向用户呈现：依赖项、配置选项、特殊要求。 ## 步骤 5：复制组件文件 **在复制之前**，检查已存在哪些目标文件以跟踪创建和更新： # 列出源文件查找 {hyva_ui_path}/components/{component}/{variant}/src -type f # 对于每个源文件，检查目标文件是否存在 # 例如，对于 src/Magento_Catalog/templates/product/view/gallery.phtml # 检查：{theme_path}/Magento_Catalog/templates/product/view/gallery.phtml 跟踪每个文件： * **已创建** : 复制之前目标文件不存在 * **更新** ：目标文件已存在（将被覆盖）然后复制： cp -r {hyva_ui_path}/components/{组件}/{变体}/src/* {主题路径}/ `src/` 目录包含直接映射到主题结构的 Magento 模块文件夹（`Magento_Theme/`、`Magento_Catalog/` 等）。对于现有布局 XML 文件，**合并**内容而不是覆盖。 ## 步骤 5.5：添加 XML 配置选项检查 README 是否包含 XML 配置（查找 `”结构创建 * 如果 `` 存在：在其中添加 `` 元素 * 如果缺少部分：在 `` 之前添加新的 `` 4. 通知：“向 `{theme_path}/etc/view.xml` 添加了默认值的配置选项。” 保留现有的 view.xml 内容并保留 README 中的 XML 注释。 ## 步骤 6：处理依赖关系检查 README 中的依赖项并自动安装它们（不要求用户选择插件）： * **插件依赖项：** 从 `{hyva_ui_path}/plugins/{plugin}/src/` 复制所需文件（例如，用于 gallery/D-splide 的 splidejs） * **组件依赖：** 首先应用依赖组件 * **外部包：** 例如，`composer require hyva-themes/magento2-hyva- payment-icons` ## 步骤 7：要求重新编译样式 * **重建 Tailwind：** 总是问：“你需要重新编译 Tailwind CSS 样式吗？”永远不要自动构建——外部工具可能已经在处理这个问题了。如果用户想要编译，请使用目标主题的“hyva-compile-tailwind-css”技能。 ## 步骤 8：输出摘要应用所有更改后，输出修改摘要： ### 8.1：列出修改的文件显示在此组件安装期间创建或修改的所有文件。使用步骤 5 中的跟踪正确标记每个文件： * **(created)** : 文件之前不存在，是新创建的 * **（更新）** ：文件已经存在并被覆盖修改后的文件： - {theme_path}/Magento_Catalog/templates/product/view/gallery.phtml（已更新） - {theme_path}/Magento_Theme/templates/html/header.phtml（已创建） - {主题路径}/etc/view.xml（已更新） ### 8.2：XML 配置表如果 XML 配置已添加到“{theme_path}/etc/view.xml”，请解析 README 中的 XML 块并显示选项表： # 从 README 中提取 XML 配置块并解析它 php /scripts/parse_readme_xml.php --format=table < xml_block.txt 该表显示了每个选项的列： * **Option** ：没有公共前缀的完整选项路径（例如“magnifier.enable”） * **Value** : 配置的默认值 * **描述** ：XML 注释中的解释性文本示例输出（自动删除诸如“gallery.”之类的常见前缀）：选项 |价值|描述 --------------------------------+------------------------+---------------------------------------------------- 导航 |拇指|图库导航样式（假/拇指/计数器）放大镜.启用 |假 |打开/关闭放大镜（真/假）对于 Markdown 输出（例如，创建文档时），请使用 `--format=md`。 ## 步骤 9：最后步骤 1. **查看**复制的模板以进行特定于商店的定制 ## 快速参考 {hyva_ui_path}/组件/{组件}/{变体}/ ├── README.md # 使用说明 ├── media/ # 预览图片 └── src/ # 复制到主题的文件请参阅“references/components.md”以获取完整的组件目录（仅向用户显示非 CMS 部分）。

海沃 UI 组件

包含技能