props 属性编辑

组件属性编辑面板插件，根据物料 Meta 定义动态渲染属性配置表单，用于配置选中组件的属性值。

工作原理

属性面板根据当前选中组件的物料定义，自动渲染对应的属性编辑表单：

1. 选中组件 → 从物料缓存中获取该组件的 Meta 定义
2. 提取 schema.properties 属性配置 → 合并节点实际 props 值
3. 通过 ConfigRender 渲染器动态生成表单控件
4. 修改属性值 → 调用 setProp 更新节点 Schema

物料定义结构

每个物料的 Meta 定义由 snippet（面板展示）和 component（属性配置）两部分组成：

{
  "snippet": {
    "name": "按钮",
    "component": "Button",
    "icon": "icon-anniu",
    "schema": {
      "props": {
        "size": "default",
        "type": "default",
        "plain": false
      },
      "children": "按钮文本"
    }
  },
  "component": {
    "schema": {
      "properties": [
        {
          "label": "基本属性",
          "content": [
            {
              "label": "容器文本",
              "property": "children",
              "bindState": true,
              "widget": {
                "component": "HtmlText",
                "props": { "showRadioButton": false }
              },
              "labelPosition": "left"
            }
          ]
        }
      ]
    },
    "configure": {
      "isContainer": true,
      "slots": ["default", "prefixIcon", "suffixIcon"]
    }
  }
}

snippet 字段

字段	类型	说明
name	string	物料面板中显示的名称
component	string	组件名
icon	string	面板图标类名
schema.props	object	拖拽生成节点时的默认属性
schema.children	string	默认子内容文本

component.schema.properties 字段

properties 是属性分组数组，定义了属性面板中显示的表单控件：

{
  "label": "基本属性",
  "content": [
    {
      "label": "按钮大小",
      "description": "按钮的大小",
      "property": "size",
      "bindState": true,
      "defaultValue": "default",
      "widget": {
        "component": "Select",
        "props": {
          "options": [
            { "label": "默认", "value": "default" },
            { "label": "迷你", "value": "mini" }
          ]
        }
      },
      "labelPosition": "left"
    }
  ]
}

字段	类型	说明
label	string	分组/属性显示名称
description	string	属性描述说明
property	string	对应节点 props 中的属性名
bindState	boolean	是否支持绑定状态变量
defaultValue	any	属性默认值
widget	object	表单控件配置
labelPosition	string	标签位置："left" / "top" / "none"

component.configure 字段

字段	类型	说明
isContainer	boolean	是否为容器组件（可拖入子组件）
slots	string[]	支持的插槽名称列表
nestingRule	object	嵌套规则：childWhiteList / childBlackList

属性值绑定

当 bindState 为 true 时，属性值支持绑定页面状态变量，绑定后值变为 JSExpression：

{
  "placeholder": {
    "type": "JSExpression",
    "value": "this.state.searchText"
  }
}

属性存储结构

属性值存储在节点 Schema 的 props 字段中：

{
  "id": "abc12345",
  "component": "Button",
  "props": {
    "size": "default",
    "type": "primary",
    "plain": false,
    "children": "提交"
  }
}