PxCook可通过四种方式实现UI组件复用识别：一、启用智能图层解析与组件聚类分析；二、基于图层命名规范强制映射组件类型；三、导入外部组件定义JSON进行静态绑定；四、使用pxcook-cli命令行工具批量扫描与标记。

如果您在使用 PxCook 打开设计稿时，发现相同视觉结构的 UI 元素（如按钮、搜索栏、卡片）多次出现但未被统一标注为同一类组件，则可能是工具未触发组件复用识别逻辑。以下是实现该功能的多种可行路径：

一、启用智能图层解析与组件聚类分析

PxCook 3.9.92 及以上版本内置基于图层命名规则与视觉相似度的组件聚类能力，需确保设计稿中图层具备可识别语义，系统方可自动归并同类结构。

1、在 PxCook 中打开 PSD 或 Sketch 导出的 .pxc 文件，确认图层树已完整加载。

2、点击顶部菜单栏【标注】→【智能标注设置】，勾选「启用组件结构识别」与「合并视觉相似图层」两项。

3、在弹出的配置面板中，将「相似度阈值」设为 85% 以上，避免误合并；将「最小图层数量」设为 2，确保仅对重复出现的元素启动聚类。

4、点击【重新分析图层】，等待状态栏显示“组件聚类完成”，此时相同结构的图层组将在左侧图层面板中以「Component:Button_01」等统一前缀标识。

二、基于图层命名规范强制映射组件类型

当设计稿图层采用标准化命名（如 Button/Primary、Input/Search、Card/Profile），PxCook 可通过正则匹配方式将图层批量识别为预设组件类型，并生成对应 smart 字段供 D2C 流程调用。

1、进入【设置】→【组件识别规则】→【添加命名规则】。

2、输入规则名称：例如「Antd Button 映射」。

3、在「图层匹配模式」中填写正则表达式：^Button\/(Primary|Default|Danger)$。

4、在「映射组件类型」下拉框中选择 Button，并勾选「写入 smart.component.type 字段」。

5、保存后点击【全量应用命名规则】，所有匹配图层右侧将显示组件图标及类型标签。

三、导入外部组件定义 JSON 进行静态绑定

对于已建立设计系统的团队，可将组件库的结构定义（如 Ant Design Mobile 或 Element Plus 的组件 Schema）导出为 JSON 文件，交由 PxCook 加载后进行静态比对识别，无需依赖图层命名或视觉特征。

1、准备组件定义文件 component_schema.json，内容需包含 name、selector、boundingBoxRules 等字段，示例中必须含 "name": "Searchbar" 及其像素级尺寸约束。

2、在 PxCook 中点击【文件】→【导入组件定义】，选择该 JSON 文件。

3、导入成功后，在【标注】面板底部切换至「组件定义匹配模式」。

4、点击【执行结构匹配】，PxCook 将遍历所有图层，对满足尺寸、子元素数量、文本节点存在性等约束的图层打上对应组件标签。

四、使用 pxcook-cli 命令行工具批量扫描与标记

针对 Sketch 或 Figma 导出的多页面 .pxc 文件集合，可通过命令行工具执行离线批量识别，输出带组件标记的增强版 .pxc 文件，适用于 CI/CD 集成场景。

1、在终端中执行：pxcook-cli scan --input ./designs/ --output ./annotated/ --rule component-detect-v2。

2、确认输出目录中生成的新 .pxc 文件名含 _component_tagged 后缀。

3、用图形界面版 PxCook 打开该文件，查看图层属性面板中的 smart.component 字段是否已填充完整。

4、若某图层未被识别，检查其所在画板尺寸是否超出 CLI 默认阈值 1920×1080，可在命令中添加 --max-width 1440 参数调整。