组件解析器配置指南

组件解析器（componentParsers）是 Design-to-Code 的核心配置，用于将设计稿中的组件实例映射为目标框架的组件标签和属性。通过编写 JSON 配置，你可以精确控制输出代码中的标签名、属性、文本、图标、子节点等行为。

快速入门

最小配置

将设计稿中名为 Button 的组件渲染为 <el-button>：

json

{
  "__imports__": {
    "el-button": { "from": "element-plus", "named": "ElButton" }
  },
  "Button": {
    "name": "el-button"
  }
}

Vue 输出：

vue

<template>
  <el-button></el-button>
</template>
<script setup>
import { ElButton } from "element-plus";
</script>

React 输出：

jsx

import { ElButton } from "element-plus";

export default function Page() {
  return <ElButton></ElButton>;
}

组件匹配规则

配置中的 key（如 "Button"）会与设计稿中的组件名进行匹配。匹配时会自动做以下归一化处理：

转为小写
移除所有空格

因此，以下名称都能匹配到 "Button" 配置： Button、button、BUTTON、But ton

优先使用设计组件的 aliasName（别名）匹配，无别名时使用 componentNormName。

配置结构总览

componentParsers: {
  "__imports__": { ... },       // 全局 import 声明
  "@icons": { ... },            // 公共图标配置
  "@text": { ... },             // 公共文本配置
  "ComponentA": { ... },        // 组件规则 A
  "ComponentB": { ... },        // 组件规则 B
  ...
}

保留 key	类型	说明
`__imports__`	`Record<string, ImportDeclaration>`	全局 import 声明，按标签名索引
`@icons`	`PublicIconsConfig`	图标前缀图层的渲染配置
`@text`	`PublicTextConfig`	TEXT 节点的渲染配置

其他所有 key 都被视为组件规则（ComponentParserRule）。

全局配置 codeOptions

以下配置项在 codeOptions 中设置，与 componentParsers 配合使用：

配置项	类型	默认值	说明
`slot_prefix`	`string`	`"#"`	插槽标识前缀，图层名以此开头时渲染为插槽
`icon_prefix`	`string \| string[]`	`["@"]`	图标标识前缀，图层名以此开头时渲染为图标组件
`ignore_prefixes`	`string[]`	`["_"]`	忽略前缀，图层名以此开头时跳过渲染
`ignore_component`	`string[]`	—	忽略的组件名列表，匹配的组件不生成文件也不渲染

slot_prefix

当子图层名称以 slot_prefix 开头时，该图层及其子节点会渲染为插槽：

设计稿图层结构：

Dialog
├── _title
├── _body
└── #footer          ← 以 # 开头
    ├── Button 1
    └── Button 2

Vue 输出：

vue

<el-dialog>
  <template #footer>
    <el-button>取消</el-button>
    <el-button>确定</el-button>
  </template>
</el-dialog>

React 输出：

jsx

<ElDialog footer={<><ElButton>取消</ElButton><ElButton>确定</ElButton></>}>
</ElDialog>

icon_prefix

当子图层名称以 icon_prefix 开头时，该图层渲染为图标组件。图层名去掉前缀后转为 PascalCase 作为组件名：

设计稿图层： @arrow-down → 输出组件： <ArrowDown />

需要配合 @icons 和 __imports__ 使用才能生效。

ignore_prefixes

以指定前缀开头的图层会被完全跳过，不渲染到输出代码中。适用于设计稿中的装饰性图层、辅助标注等。

json

{ "ignore_prefixes": ["_", "."] }

_background、.helper-line 等图层将不会出现在输出中。

ignore_component

指定的组件名列表，匹配的组件不会生成独立的 .vue / .tsx 文件，其实例也不会渲染到页面中。

json

{ "ignore_component": ["Decorator", "Placeholder"] }

导入声明 imports

为所有使用到的组件标签注册 import 语句。key 是输出的标签名（对应 name 字段的值或图标组件名）。

json

{
  "__imports__": {
    "el-button": { "from": "element-plus", "named": "ElButton" },
    "el-input": { "from": "element-plus", "named": "ElInput" },
    "SearchIcon": { "from": "@element-plus/icons-vue", "named": "SearchIcon" }
  }
}

ImportDeclaration 字段

字段	类型	必填	说明
`from`	`string`	是	包名，如 `"element-plus"`
`named`	`string`	否	具名导入名，如 `"ElButton"`
`default`	`boolean`	否	是否默认导入

生成示例：

配置	输出
`{ "from": "element-plus", "named": "ElButton" }`	`import { ElButton } from "element-plus"`
`{ "from": "antd", "default": true }`	`import antd from "antd"`
`{ "from": "style.css" }`	`import "style.css"`

组件规则

每个组件规则支持以下字段：

字段	类型	说明
`name`	`string`	输出标签名
`props`	`PropsConfig`	属性提取配置
`text`	`TextConfig \| TextConfig[]`	文本提取配置
`icon`	`IconConfig \| IconConfig[]`	图标解析配置
`attr`	`AttrConfig \| AttrConfig[]`	样式→属性映射
`traverse`	`TraverseConfig`	子节点遍历控制
`object`	`ObjectConfig`	对象解析器（将子实例聚合为数组）

name — 标签重命名

将设计组件名替换为目标框架的组件标签名。

json

{
  "Button": {
    "name": "el-button"
  }
}

设计稿中的 Button 实例将输出为 <el-button> 而非默认的 <Button>。

注意： name 的值需要在 __imports__ 中有对应的声明才能生成 import 语句。

props — 属性提取

从设计组件的 variant 属性 中提取值，输出为组件属性。

typescript

interface PropsConfig {
  filter?: string[];                      // 过滤掉的属性值
  showTrueValue?: boolean;                // 是否显式输出 true
  customProps?: Record<string, string>;   // 自定义属性绑定
}

基本用法

json

{
  "Button": {
    "name": "el-button",
    "props": {}
  }
}

设计稿中的 Button 有 variant 属性 size=large, type=primary：

Vue 输出： <el-button size="large" type="primary">

filter — 过滤默认值

将不需要输出的值加入过滤列表。默认已过滤 "md"、"default"、"false"。

json

{
  "Button": {
    "name": "el-button",
    "props": {
      "filter": ["md", "default", "normal"]
    }
  }
}

variant size=md 会被过滤，不会出现在输出中。

showTrueValue — 布尔值显式输出

默认情况下，布尔属性 true 使用简写形式。设为 true 后显式输出值：

showTrueValue	Vue 输出	React 输出
`false`（默认）	`<el-checkbox disabled>`	`<ElCheckbox disabled>`
`true`	`<el-checkbox :disabled="true">`	`<ElCheckbox disabled={true}>`

json

{
  "Checkbox": {
    "name": "el-checkbox",
    "props": {
      "showTrueValue": true
    }
  }
}

customProps — 自定义属性绑定

配合 object 解析器使用。值为 "{name}" 格式时引用子组件 object 聚合的数组：

json

{
  "Tabs": {
    "name": "el-tabs",
    "props": {
      "customProps": {
        "items": "{tabs}",
        "type": "card"
      }
    }
  }
}

items 引用子组件 object 名为 tabs 的数组 → :items="[...]"
type 不是 "{...}" 格式 → 直接输出 type="card"

text — 文本提取

从设计组件的子 TEXT 节点中提取文本内容。

typescript

interface TextConfig {
  nodeName?: string;    // 目标文本图层名称
  textAttr?: string;    // 输出为属性名（不设置则作为 children）
}

案例 1：文本作为 children

json

{
  "Button": {
    "name": "el-button",
    "text": { "nodeName": "_text" }
  }
}

设计稿：

Button
└── _text: "提交"

输出： <el-button>提交</el-button>

案例 2：文本作为属性

json

{
  "Input": {
    "name": "el-input",
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" }
  }
}

设计稿：

Input
└── placeholder: "请输入用户名"

输出： <el-input placeholder="请输入用户名" />

案例 3：多个文本提取

json

{
  "Dialog": {
    "name": "el-dialog",
    "text": [
      { "nodeName": "_title" },
      { "nodeName": "_body" }
    ]
  }
}

设计稿：

Dialog
├── _title: "确认删除"
└── _body: "此操作不可撤销"

输出： <el-dialog>确认删除此操作不可撤销</el-dialog>

icon — 图标解析

从设计组件的子图层中提取图标，支持多种输出模式。

typescript

interface IconConfig {
  nodeName: string | { name: string; deepFind?: boolean };
  attrName: string;
  getComponentName?: boolean | "string";
  childComponent?: boolean | {
    parentType?: "slot" | "frame";
    parentTag?: string;
  };
}

字段	类型	说明
`nodeName`	`string \| { name, deepFind }`	目标图层名称或查找规则
`attrName`	`string`	输出属性名（如 `"icon"`）
`getComponentName`	`boolean \| "string"`	以组件名方式输出（而非字符串）
`childComponent`	`boolean \| object`	以子组件方式输出

案例 1：图标作为字符串属性（默认）

json

{
  "Button": {
    "name": "el-button",
    "icon": {
      "nodeName": "icon",
      "attrName": "icon"
    }
  }
}

设计稿中 Button 有子图层 icon，图层名为 el-icon-search：

输出： <el-button icon="el-icon-search">

案例 2：深度查找 deepFind

当图标被包裹在多层 frame 中时，使用 deepFind 递归查找：

json

{
  "icon": {
    "nodeName": { "name": "icon", "deepFind": true },
    "attrName": "icon"
  }
}

设计稿：

Button
└── icon-wrapper
    └── search-icon    ← deepFind 会递归找到这里

输出： <el-button icon="search-icon">

案例 3：getComponentName — 组件引用

getComponentName: true 输出为绑定表达式：

json

{
  "icon": {
    "nodeName": "SearchIcon",
    "attrName": "icon",
    "getComponentName": true
  }
}

框架	输出
Vue	`<el-button :icon="SearchIcon">`
React	`<ElButton icon={<SearchIcon />}>`

getComponentName: "string" 输出为字符串（如 Tag 的 closable 场景）：

json

{
  "icon": {
    "nodeName": "close",
    "attrName": "closable",
    "getComponentName": "string"
  }
}

输出： <el-tag closable="close"> （图层存在时输出属性值）

案例 4：childComponent — 图标作为子组件

4a. 直接子组件

json

{
  "icon": {
    "nodeName": "Star",
    "attrName": "icon",
    "childComponent": true
  }
}

输出：

vue

<el-button>
  <Star />
</el-button>

4b. slot 包裹（仅 Vue）

json

{
  "icon": {
    "nodeName": "Close",
    "attrName": "icon",
    "childComponent": { "parentType": "slot", "parentTag": "template" }
  }
}

Vue 输出：

vue

<el-button>
  <template #icon>
    <Close />
  </template>
</el-button>

4c. frame 包裹

json

{
  "icon": {
    "nodeName": "Search",
    "attrName": "icon",
    "childComponent": { "parentType": "frame", "parentTag": "div" }
  }
}

输出：

vue

<el-button>
  <div>
    <Search />
  </div>
</el-button>

多图标提取

配置为数组可同时提取多个图标位：

json

{
  "Input": {
    "name": "el-input",
    "icon": [
      { "nodeName": "prefix-icon", "attrName": "prefix-icon" },
      { "nodeName": "suffix-icon", "attrName": "suffix-icon" }
    ]
  }
}

输出： <el-input prefix-icon="search" suffix-icon="clear" />

attr — 样式映射属性

从设计组件的视觉样式中提取值，通过映射表转换为组件属性。

typescript

interface AttrConfig {
  valueFrom: "background" | "borderColor" | "color" | "radius"
           | "borderStyle" | "opacity" | "gap" | "padding" | "boxShadow";
  attrName: string;
  mappings: Record<string, string>;
}

valueFrom 支持的样式来源

valueFrom	取值来源	常见场景
`"background"`	填充色（第一个 fillPaint 的 hex 值）	按钮类型、状态色
`"borderColor"`	描边色（第一个 strokePaint 的 hex 值）	输入框状态、边框风格
`"color"`	文本色或填充色	文字颜色映射
`"radius"`	圆角值	圆形按钮、卡片形状
`"borderStyle"`	是否有虚线描边（`"solid"` 或 `"dashed"`）	选项卡类型
`"opacity"`	透明度（0~1）	禁用状态
`"gap"`	自动布局间距	紧凑/宽松布局
`"padding"`	内边距	尺寸大小
`"boxShadow"`	阴影类型（`"shadow"` / `"inner"` / `""` / `"both"`）	悬浮、凹陷效果

案例 1：背景色 → 按钮类型

json

{
  "Button": {
    "name": "el-button",
    "attr": {
      "valueFrom": "background",
      "attrName": "type",
      "mappings": {
        "#409EFF": "primary",
        "#67C23A": "success",
        "#E6A23C": "warning",
        "#F56C6C": "danger",
        "#909399": "info"
      }
    }
  }
}

设计稿中 Button 的背景色为 #409EFF → 输出： <el-button type="primary">

案例 2：圆角 → 圆形按钮

json

{
  "attr": {
    "valueFrom": "radius",
    "attrName": "round",
    "mappings": {
      "20": "true",
      "50": "true"
    }
  }
}

圆角值为 20 或 50 时 → 输出： <el-button round="true">

案例 3：描边色 → 输入框状态

json

{
  "attr": {
    "valueFrom": "borderColor",
    "attrName": "status",
    "mappings": {
      "#F56C6C": "error",
      "#67C23A": "success"
    }
  }
}

多个 attr 规则

配置为数组可从多个样式维度提取属性：

json

{
  "Button": {
    "name": "el-button",
    "attr": [
      {
        "valueFrom": "background",
        "attrName": "type",
        "mappings": { "#409EFF": "primary" }
      },
      {
        "valueFrom": "radius",
        "attrName": "round",
        "mappings": { "20": "true" }
      }
    ]
  }
}

mappings 中的颜色值使用大写 hex 格式（如 #409EFF），系统会自动将提取的颜色转为大写后匹配。

traverse — 子节点遍历

控制组件的子节点是否参与代码生成。

typescript

interface TraverseConfig {
  filter?: string;   // 要过滤的子节点名称
}

行为说明

配置	行为
不写 `traverse`	不遍历子节点 — 由 text/icon/attr 完全控制输出
`traverse: {}`	遍历所有子节点 — 子实例正常递归渲染
`traverse: { filter: "_arrow" }`	遍历并过滤 — 子节点中名为 `_arrow` 的跳过渲染

案例 1：不遍历（默认）

json

{
  "Button": {
    "name": "el-button",
    "text": { "nodeName": "_text" }
  }
}

Button 的所有子节点不会渲染为子元素，仅提取 _text 的文本作为内容。

案例 2：遍历子节点

json

{
  "Badge": {
    "name": "el-badge",
    "text": { "nodeName": "_value" },
    "traverse": {}
  }
}

Badge 的子实例（如内嵌的 Button）会正常渲染为子元素：

vue

<el-badge>
  <el-button>新消息</el-button>
</el-badge>

案例 3：遍历并过滤

json

{
  "Select": {
    "name": "el-select",
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" },
    "traverse": { "filter": "_arrow" }
  }
}

Select 内部的 _arrow 装饰图层被过滤，Option 子实例正常渲染：

vue

<el-select placeholder="请选择">
  <el-option>选项一</el-option>
  <el-option>选项二</el-option>
</el-select>

注意： traverse 与 slot_prefix、ignore_prefixes 共同工作。处理优先级为：
slot_prefix（#）→ 渲染为插槽
object 聚合 → 聚合为数据对象
ignore_prefixes（_）→ 跳过渲染
正常子节点 → 递归渲染

object — 对象解析器

将子组件实例聚合为数组数据，绑定到父组件的属性上。适用于 Tabs、Menu、Steps 等列表型组件。

typescript

interface ObjectConfig {
  name: string;
  mappings: Record<string, string | ObjectFieldMapping>;
}

interface ObjectFieldMapping {
  text?: TextConfig;    // 复用文本提取
  icon?: IconConfig;    // 复用图标提取
  attr?: AttrConfig;    // 复用样式映射
}

工作原理

子组件规则 配置 object，定义如何从每个子实例中提取字段
父组件规则 配置 customProps: { propName: "{name}" }，引用聚合后的数组
运行时：匹配 object 的子实例不渲染标签，而是聚合为数组绑定到父组件属性

mappings 字段值类型

类型	值	行为
空字符串 `""`	自增序号	输出 `"1"`、`"2"`、`"3"`...
固定字符串	如 `"default"`	每一项都输出相同固定值
`{ text: TextConfig }`	复用文本提取器	从子实例中提取指定 TEXT 节点的内容
`{ icon: IconConfig }`	复用图标提取器	从子实例中提取图标值
`{ attr: AttrConfig }`	复用样式映射	从子实例的样式中提取映射值

完整案例：Tabs + TabItem

配置：

json

{
  "__imports__": {
    "el-tabs": { "from": "element-plus", "named": "ElTabs" }
  },
  "Tabs": {
    "name": "el-tabs",
    "props": {
      "customProps": {
        "items": "{tabs}"
      }
    },
    "traverse": {}
  },
  "TabItem": {
    "object": {
      "name": "tabs",
      "mappings": {
        "key": "",
        "label": {
          "text": { "nodeName": "_label" }
        }
      }
    }
  }
}

设计稿图层结构：

Tabs
├── TabItem 1
│   └── _label: "首页"
├── TabItem 2
│   └── _label: "设置"
└── TabItem 3
    └── _label: "关于"

Vue 输出：

vue

<el-tabs :items="[{ key: '1', label: '首页' }, { key: '2', label: '设置' }, { key: '3', label: '关于' }]">
</el-tabs>

React 输出：

jsx

<ElTabs items={[{ key: '1', label: '首页' }, { key: '2', label: '设置' }, { key: '3', label: '关于' }]}>
</ElTabs>

注意：<TabItem> 标签不会出现在输出中，所有子实例被聚合为 items 数组。

高级案例：使用 attr 提取样式值

json

{
  "StepItem": {
    "object": {
      "name": "steps",
      "mappings": {
        "key": "",
        "title": {
          "text": { "nodeName": "_title" }
        },
        "status": {
          "attr": {
            "valueFrom": "background",
            "attrName": "status",
            "mappings": {
              "#409EFF": "process",
              "#67C23A": "finish",
              "#C0C4CC": "wait"
            }
          }
        }
      }
    }
  }
}

公共图标配置 @icons

配置使用 icon_prefix（默认 @）前缀命名的图层如何渲染为图标组件。

json

{
  "@icons": {
    "width": { "stylePrefix": "fontSize" },
    "background": { "stylePrefix": "color" }
  }
}

配置 key	取值来源	说明
`"width"`	图层宽度 → px	常映射为 `fontSize`
`"height"`	图层高度 → px	常映射为 `height`
`"fontSize"`	文本字号 → px
`"background"`	填充色 → hex	常映射为 `color`
`"color"`	填充色 → hex
`"opacity"`	透明度

PublicIconRenderOption 字段

字段	类型	说明
`stylePrefix`	`string`	输出为属性名（如 `"fontSize"` → `fontSize="24px"`）
`filter`	`string \| string[]`	过滤指定值（不输出）
`classPrefix`	`string`	输出为 class 前缀
`getCssVar`	`boolean`	输出为 CSS 变量

工作流程

图层名 @arrow-down 匹配 icon_prefix
去前缀后转 PascalCase → ArrowDown
从 __imports__ 查找并注册 import
按 @icons 配置提取样式属性

设计稿：

@arrow-down  (width: 24, fill: #333333)

输出：

vue

<ArrowDown fontSize="24px" color="#333333" />

公共文本配置 @text

配置所有 TEXT 节点渲染为指定的文本组件，并提取排版样式为属性。

json

{
  "@text": {
    "name": "Typography",
    "fontSize": {},
    "fontWeight": { "filter": ["400"] },
    "color": {}
  }
}

字段	说明
`name`	文本组件名称（如 `"Typography"`），需在 `__imports__` 注册
`fontSize`	提取字号 → `fontSize="14px"`
`fontWeight`	提取字重 → `fontWeight="700"`
`color`	提取文本色 → `color="#333333"`
`textAlign`	提取对齐方式 → `textAlign="center"`
`lineHeight`	提取行高 → `lineHeight="20px"`
`letterSpacing`	提取字间距 → `letterSpacing="0.5px"`

每个属性的 filter 可过滤掉不需要的默认值（如过滤 fontWeight: 400）。

设计稿：

TEXT: "标题" (fontSize: 16, fontWeight: 700, color: #333333)

输出：

vue

<Typography fontSize="16px" fontWeight="700" color="#333333">标题</Typography>

完整配置示例

以下是一个完整的 Element Plus 组件解析器配置，涵盖所有常用功能：

json

{
  "__imports__": {
    "el-button": { "from": "element-plus", "named": "ElButton" },
    "el-input": { "from": "element-plus", "named": "ElInput" },
    "el-select": { "from": "element-plus", "named": "ElSelect" },
    "el-option": { "from": "element-plus", "named": "ElOption" },
    "el-checkbox": { "from": "element-plus", "named": "ElCheckbox" },
    "el-radio": { "from": "element-plus", "named": "ElRadio" },
    "el-switch": { "from": "element-plus", "named": "ElSwitch" },
    "el-tag": { "from": "element-plus", "named": "ElTag" },
    "el-dialog": { "from": "element-plus", "named": "ElDialog" },
    "el-tabs": { "from": "element-plus", "named": "ElTabs" },
    "SearchIcon": { "from": "@element-plus/icons-vue", "named": "SearchIcon" },
    "ArrowDown": { "from": "@element-plus/icons-vue", "named": "ArrowDown" },
    "Typography": { "from": "@custom/ui", "named": "Typography" }
  },

  "@icons": {
    "width": { "stylePrefix": "fontSize" },
    "background": { "stylePrefix": "color" }
  },

  "@text": {
    "name": "Typography",
    "fontSize": {},
    "fontWeight": { "filter": ["400"] },
    "color": {}
  },

  "Button": {
    "name": "el-button",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "_text" },
    "icon": {
      "nodeName": { "name": "icon", "deepFind": true },
      "attrName": "icon"
    },
    "attr": [
      {
        "valueFrom": "background",
        "attrName": "type",
        "mappings": {
          "#409EFF": "primary",
          "#67C23A": "success",
          "#E6A23C": "warning",
          "#F56C6C": "danger",
          "#909399": "info"
        }
      },
      {
        "valueFrom": "radius",
        "attrName": "round",
        "mappings": { "20": "true", "50": "true" }
      }
    ]
  },

  "Input": {
    "name": "el-input",
    "props": {},
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" },
    "icon": [
      { "nodeName": { "name": "prefix-icon", "deepFind": true }, "attrName": "prefix-icon" },
      { "nodeName": { "name": "suffix-icon", "deepFind": true }, "attrName": "suffix-icon" }
    ],
    "attr": {
      "valueFrom": "borderColor",
      "attrName": "status",
      "mappings": {
        "#F56C6C": "error",
        "#67C23A": "success"
      }
    }
  },

  "Select": {
    "name": "el-select",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" },
    "traverse": { "filter": "_arrow" }
  },

  "Option": {
    "name": "el-option",
    "props": {},
    "text": { "nodeName": "_text" }
  },

  "Checkbox": {
    "name": "el-checkbox",
    "props": { "filter": ["default"], "showTrueValue": true },
    "text": { "nodeName": "_label" },
    "attr": {
      "valueFrom": "background",
      "attrName": "checked",
      "mappings": { "#409EFF": "true" }
    }
  },

  "Switch": {
    "name": "el-switch",
    "props": {},
    "attr": {
      "valueFrom": "background",
      "attrName": "model-value",
      "mappings": {
        "#409EFF": "true",
        "#DCDFE6": "false"
      }
    }
  },

  "Tag": {
    "name": "el-tag",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "_text" },
    "attr": [
      {
        "valueFrom": "background",
        "attrName": "type",
        "mappings": {
          "#409EFF": "primary",
          "#67C23A": "success",
          "#E6A23C": "warning",
          "#F56C6C": "danger",
          "#909399": "info"
        }
      },
      {
        "valueFrom": "radius",
        "attrName": "round",
        "mappings": { "20": "true" }
      }
    ],
    "icon": {
      "nodeName": "close",
      "attrName": "closable",
      "getComponentName": "string"
    }
  },

  "Dialog": {
    "name": "el-dialog",
    "props": { "filter": ["default"] },
    "text": [
      { "nodeName": "_title" },
      { "nodeName": "_body" }
    ],
    "traverse": { "filter": "_mask" }
  },

  "Tabs": {
    "name": "el-tabs",
    "props": {
      "customProps": { "items": "{tabs}" }
    },
    "traverse": {}
  },

  "TabItem": {
    "object": {
      "name": "tabs",
      "mappings": {
        "key": "",
        "label": { "text": { "nodeName": "_label" } }
      }
    }
  }
}

对应的 codeOptions：

json

{
  "slot_prefix": "#",
  "icon_prefix": ["@"],
  "ignore_prefixes": ["_"],
  "ignore_component": ["Decorator"],
  "componentParsers": { ... }
}

字段速查表

ComponentParserRule

字段	类型	说明	示例
`name`	`string`	输出标签名	`"el-button"`
`props`	`PropsConfig`	variant 属性提取	`{ "filter": ["md"] }`
`props.filter`	`string[]`	过滤的属性值	`["md", "default"]`
`props.showTrueValue`	`boolean`	布尔值显式输出	`true`
`props.customProps`	`Record<string, string>`	自定义属性绑定	`{ "items": "{tabs}" }`
`text`	`TextConfig \| TextConfig[]`	文本提取	`{ "nodeName": "_text" }`
`text.nodeName`	`string`	目标文本图层名	`"_text"`
`text.textAttr`	`string`	输出为属性名	`"placeholder"`
`icon`	`IconConfig \| IconConfig[]`	图标解析	`{ "nodeName": "icon", "attrName": "icon" }`
`icon.nodeName`	`string \| { name, deepFind }`	图标图层查找规则	`{ "name": "icon", "deepFind": true }`
`icon.attrName`	`string`	输出属性名	`"icon"`
`icon.getComponentName`	`boolean \| "string"`	组件名输出模式	`true`
`icon.childComponent`	`boolean \| { parentType, parentTag }`	子组件输出模式	`{ "parentType": "slot", "parentTag": "template" }`
`attr`	`AttrConfig \| AttrConfig[]`	样式映射	`{ "valueFrom": "background", ... }`
`attr.valueFrom`	`string`	样式来源	`"background"`
`attr.attrName`	`string`	输出属性名	`"type"`
`attr.mappings`	`Record<string, string>`	值映射表	`{ "#409EFF": "primary" }`
`traverse`	`TraverseConfig`	子节点遍历控制	`{ "filter": "_arrow" }`
`traverse.filter`	`string`	过滤的子节点名	`"_mask"`
`object`	`ObjectConfig`	对象解析器	`{ "name": "tabs", "mappings": {...} }`
`object.name`	`string`	数组引用名	`"tabs"`
`object.mappings`	`Record<string, string \| ObjectFieldMapping>`	字段映射	`{ "key": "", "label": { "text": {...} } }`

codeOptions

字段	类型	默认值	说明
`slot_prefix`	`string`	`"#"`	插槽前缀
`icon_prefix`	`string \| string[]`	`["@"]`	图标前缀
`ignore_prefixes`	`string[]`	`["_"]`	忽略前缀
`ignore_component`	`string[]`	—	忽略组件列表

组件解析器配置指南 ​

目录 ​

快速入门 ​

最小配置 ​

组件匹配规则 ​

配置结构总览 ​

全局配置 codeOptions ​

slot_prefix ​

icon_prefix ​

ignore_prefixes ​

ignore_component ​

导入声明 __imports__ ​

ImportDeclaration 字段 ​

组件规则 ​

name — 标签重命名 ​

props — 属性提取 ​

基本用法 ​

filter — 过滤默认值 ​

showTrueValue — 布尔值显式输出 ​

customProps — 自定义属性绑定 ​

text — 文本提取 ​

案例 1：文本作为 children ​

案例 2：文本作为属性 ​

案例 3：多个文本提取 ​

icon — 图标解析 ​

案例 1：图标作为字符串属性（默认） ​

案例 2：深度查找 deepFind ​

案例 3：getComponentName — 组件引用 ​

案例 4：childComponent — 图标作为子组件 ​

4a. 直接子组件 ​

4b. slot 包裹（仅 Vue） ​

4c. frame 包裹 ​

多图标提取 ​

attr — 样式映射属性 ​

valueFrom 支持的样式来源 ​

案例 1：背景色 → 按钮类型 ​

案例 2：圆角 → 圆形按钮 ​

案例 3：描边色 → 输入框状态 ​

多个 attr 规则 ​

traverse — 子节点遍历 ​

行为说明 ​

案例 1：不遍历（默认） ​

案例 2：遍历子节点 ​

案例 3：遍历并过滤 ​

object — 对象解析器 ​

工作原理 ​

mappings 字段值类型 ​

完整案例：Tabs + TabItem ​

高级案例：使用 attr 提取样式值 ​

公共图标配置 @icons ​

PublicIconRenderOption 字段 ​

工作流程 ​

公共文本配置 @text ​

完整配置示例 ​

字段速查表 ​

ComponentParserRule ​

codeOptions ​

组件解析器配置指南

目录

快速入门

最小配置

组件匹配规则

配置结构总览

全局配置 codeOptions

slot_prefix

icon_prefix

ignore_prefixes

ignore_component

导入声明 imports

ImportDeclaration 字段

组件规则

name — 标签重命名

props — 属性提取

基本用法

filter — 过滤默认值

showTrueValue — 布尔值显式输出

customProps — 自定义属性绑定

text — 文本提取

案例 1：文本作为 children

案例 2：文本作为属性

案例 3：多个文本提取

icon — 图标解析

案例 1：图标作为字符串属性（默认）

案例 2：深度查找 deepFind

案例 3：getComponentName — 组件引用

案例 4：childComponent — 图标作为子组件

4a. 直接子组件

4b. slot 包裹（仅 Vue）

4c. frame 包裹

多图标提取

attr — 样式映射属性

valueFrom 支持的样式来源

案例 1：背景色 → 按钮类型

案例 2：圆角 → 圆形按钮

案例 3：描边色 → 输入框状态

多个 attr 规则

traverse — 子节点遍历

行为说明

案例 1：不遍历（默认）

案例 2：遍历子节点

案例 3：遍历并过滤

object — 对象解析器

工作原理

mappings 字段值类型

完整案例：Tabs + TabItem

高级案例：使用 attr 提取样式值

公共图标配置 @icons

PublicIconRenderOption 字段

工作流程

公共文本配置 @text

完整配置示例

字段速查表

ComponentParserRule

codeOptions