表单类配置项

通用表单交互类配置项，涵盖文本输入、下拉选择、开关、数字、颜色、日期时间等常见表单控件。这些配置项用于在自定义组件的属性配置面板中收集用户输入，供组件读取并渲染。

panelInput - 文本输入配置项

适用属性数值类型：字符串。

交互方式：用于短文本类配置（标题、占位说明、尺寸字符串等）。

说明：能力与 Neo Design Input 一致，详见 Input 输入框。

功能特性：

单行输入：适合标题、高度、提示文案等字符串配置
占位提示：可通过 placeholder 引导填写
值写入：用户输入的内容会写入对应 name 字段的 value（string），供组件通过 props 读取
条件展示：可配合 visibleOn / hiddenOn 与其他配置项联动

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "panelInput",
  "name": "height",
  "label": "高度",
  "placeholder": "例如 500px 或 100%",
  "visibleOn": "!autoHeight"
}

组件属性：

name: 字段名称
label: 标签文本
value: 当前值或初始值（string）
placeholder: 占位文案
disabled: 是否禁用
visibleOn / hiddenOn: 与其他字段联动显示（见上文）
onChange: 值变化回调

panelSelect - 下拉选择配置项

适用属性数值类型：单一值（与 options[].value 类型一致）。

交互方式：从固定选项中选择属性值，例如主题（暗黑、蓝色系、橙色系等）。

说明：能力与 Neo Design Select 一致（选项结构、禁用项等），详见 Select 选择器。

功能特性：

下拉单选：从 options 中选择一项
选项结构：options 为 { label, value }[]
值写入：选中项的 value 写入对应 name 字段，供组件通过 props 读取
占位与禁用：支持 placeholder、disabled

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "panelSelect",
  "name": "columnCount",
  "label": "表单列数",
  "value": 1,
  "placeholder": "请选择表单列数",
  "options": [
    { "label": "单列", "value": 1 },
    { "label": "双列", "value": 2 },
    { "label": "三列", "value": 3 }
  ]
}

组件属性：

name: 字段名称
label: 标签文本
value: 当前选中值（与 options[].value 类型一致）
options: 选项列表，{ label: string; value: unknown }[]
placeholder: 占位文案
disabled: 是否禁用
visibleOn / hiddenOn: 联动显示
onChange: 值变化回调

panelSwitch - 开关配置项

适用属性数值类型：布尔值。

交互方式：控制「是否显示」「是否禁用」等开关类属性。

说明：对应 Neo Design Switch，详见 Switch 开关。

功能特性：

开关展示：支持选中/未选中文案（checkedChildren、unCheckedChildren）
值写入：布尔值写入对应 name 字段的 value，供组件通过 props 读取

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "panelSwitch",
  "name": "disableSearch",
  "label": "禁用搜索",
  "defaultChecked": false,
  "hiddenOn": "hiddenHeader"
}

组件属性：

name: 字段名称
label: 标签文本
value / defaultChecked: 当前值或默认是否选中（boolean）
checkedChildren: 选中时展示文案，可为字符串或返回 ReactNode 的函数
unCheckedChildren: 未选中时展示文案，可为字符串或返回 ReactNode 的函数
disabled: 是否禁用
size: 尺寸，small | default
visibleOn / hiddenOn: 联动显示
onChange: 值变化回调

panelNumber - 数字输入配置项

适用属性数值类型：number | null。

交互方式：配置条数、精度、步长等数值。

说明：对应 Neo Design InputNumber，详见 InputNumber 数字输入框。

功能特性：

数字输入：支持最小值、最大值、步长、精度
值写入：number | null 写入对应 name 字段的 value，供组件通过 props 读取

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "panelNumber",
  "name": "paginationPageSize",
  "label": "每页展示条数",
  "value": 20,
  "min": 1,
  "max": 500,
  "visibleOn": "!disablePagination"
}

组件属性：

name: 字段名称
label: 标签文本
value / defaultValue: 当前值或默认值（number | null）
min / max: 最小值、最大值
step: 步长（number 或 string）
precision: 小数位数
disabled: 是否禁用
size: large | middle | small
visibleOn / hiddenOn: 联动显示
onChange: 值变化回调

panelColor - 颜色选择器配置项

适用属性数值类型：颜色字符串（#RRGGBB 或 rgba(r,g,b,a)）。

交互方式：配置字体色、背景色、边框色等（含透明度）。

说明：基于 react-color 的 SketchPicker。

功能特性：

弹层选色：点击色块打开选择器，支持透明度
值写入：#RRGGBB 或 rgba(r,g,b,a) 颜色字符串写入对应 name 字段的 value，供组件通过 props 读取
清除颜色：可清空为 undefined
禁用态：禁用时仅展示色块，不可编辑

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "panelColor",
  "name": "backgroundColor",
  "label": "背景颜色",
  "defaultValue": "rgba(255, 255, 255, 1)"
}

组件属性：

name: 字段名称
label: 标签文本
value / defaultValue: 颜色字符串
disabled: 是否禁用
className: 自定义类名
onChange: 回调参数为 string \| undefined

neoCascader - 级联选择配置项

适用属性数值类型：数组（各级选中 value 组成的路径）。

交互方式：多级关联选项的单选（部分版本支持多选）。

说明：能力与 Neo Design Cascader 一致，详见 Cascader 级联选择。

功能特性：

级联结构：通过 options 的树形结构（含 children）展示多级菜单
选中值：通常为各级选中项 value 组成的数组（选中路径）
值写入：选中结果写入对应 name 字段的 value，供组件通过 props 读取
条件展示：可配合 visibleOn / hiddenOn 联动

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoCascader",
  "name": "region",
  "label": "地区",
  "placeholder": "请选择省 / 市 / 区",
  "options": [
    {
      "label": "浙江省",
      "value": "zj",
      "children": [{ "label": "杭州市", "value": "hz" }]
    }
  ]
}

常用属性（与 Neo Design 文档一致）：

name / label
value / defaultValue：选中路径，一般为 string[] 或 number[]
options：级联数据源
placeholder、disabled、allowClear
multiple（若版本支持多选级联）
visibleOn / hiddenOn、onChange

neoRadio - 单选配置项

适用属性数值类型：单一值（字符串、数字等）。

交互方式：选项较少时的单选配置。

说明：能力与 Neo Design Radio 一致，详见 Radio 单选框。

功能特性：

互斥单选：同一组内只能选中一项
选项展示：常用 Radio.Group 配合 options 或子节点渲染多个 Radio
值写入：当前选中项的 value 写入对应 name 字段，供组件通过 props 读取
布局：支持按钮样式、排列方向等（见文档）

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoRadio",
  "name": "layoutMode",
  "label": "布局",
  "options": [
    { "label": "横向", "value": "horizontal" },
    { "label": "纵向", "value": "vertical" }
  ]
}

常用属性：

name / label
value / defaultValue
options：{ label, value }[]（若设计器支持）
disabled、optionType（如 button）
visibleOn / hiddenOn、onChange

neoCheckbox - 多选框

适用属性数值类型：数组（多选时为选中值列表）。

交互方式：选项较少时的多选配置。

说明：能力与 Neo Design Checkbox 一致，详见 Checkbox 多选框。

功能特性：

单框布尔：单个 Checkbox 表示是否勾选（boolean）
组多选：Checkbox.Group 从多个选项中勾选若干项，value 为选中值的数组
全选/半选：组场景下可配合 indeterminate 等能力（见文档）
值写入：布尔或 value[] 写入对应 name 字段，供组件通过 props 读取

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoCheckbox",
  "name": "features",
  "label": "展示项",
  "options": [
    { "label": "标题", "value": "title" },
    { "label": "副标题", "value": "subtitle" }
  ]
}

常用属性：

name / label
value / defaultValue：多选时为数组
options：组模式下的选项列表
disabled
visibleOn / hiddenOn、onChange

neoDatePicker - 日期选择框

适用属性数值类型：日期（具体形态以平台绑定为准）。

交互方式：选择单日或日期范围。

说明：能力与 Neo Design DatePicker 一致，详见 DatePicker 日期选择框。

功能特性：

日期 / 周 / 月等：通过 picker 切换选择粒度（以文档为准）
范围选择：可使用 RangePicker 选择起止日期（若平台单独暴露类型则按其 type 配置）
格式化：format、showTime 等控制展示与是否含时间
值写入：一般为日期对象或格式化字符串（与平台绑定约定一致），写入对应 name 字段的 value

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoDatePicker",
  "name": "startDate",
  "label": "开始日期",
  "placeholder": "请选择日期",
  "format": "YYYY-MM-DD"
}

常用属性：

name / label
value / defaultValue
format、picker、showTime、allowClear
disabled、disabledDate
visibleOn / hiddenOn、onChange

neoTimePicker - 时间选择框

适用属性数值类型：时间（具体形态以平台绑定为准）。

交互方式：选择时刻（可与日期组合或单独使用，视组件封装而定）。

说明：能力与 Neo Design TimePicker 一致，详见 TimePicker 时间选择框。

功能特性：

时间选择：时、分、秒及步长配置（见文档）
格式化：format 控制展示与回填格式
值写入：时间类值或字符串写入对应 name 字段的 value，依平台约定

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoTimePicker",
  "name": "remindTime",
  "label": "提醒时间",
  "format": "HH:mm",
  "placeholder": "请选择时间"
}

常用属性：

name / label
value / defaultValue
format、allowClear、disabled
visibleOn / hiddenOn、onChange

neoRate - 评分

适用属性数值类型：数值。

交互方式：星级或分值评分。

说明：能力与 Neo Design Rate 一致，详见 Rate 评分。

功能特性：

星标展示：默认星级点击评分
半选与总数：allowHalf、count 等扩展行为（见文档）
值写入：数值型评分写入对应 name 字段的 value

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoRate",
  "name": "satisfaction",
  "label": "满意度",
  "count": 5,
  "allowHalf": true
}

常用属性：

name / label
value / defaultValue
count、allowHalf、disabled
visibleOn / hiddenOn、onChange

neoSlider - 滑动输入条

适用属性数值类型：number；开启区间模式（range）时为 [number, number]。

交互方式：在区间内拖动取值。

说明：能力与 Neo Design Slider 一致，详见 Slider 滑动输入条。

功能特性：

区间与步长：min、max、step
范围滑块：开启 range 时用双滑块选择区间，值为 [number, number]；关闭时为单个 number。
刻度与提示：marks、tooltip 等（见 Neo Design 文档）。
值写入：非区间时为 number，区间时为 [number, number]，写入对应 name 字段的 value。

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoSlider",
  "name": "opacity",
  "label": "透明度",
  "min": 0,
  "max": 100,
  "step": 1
}

常用属性：

name / label
value / defaultValue
min、max、step、marks、disabled
visibleOn / hiddenOn、onChange

neoTransfer - 穿梭框

适用属性数值类型：数组（已选项的 key 列表，与 dataSource 配合）。

交互方式：左右两栏之间移动选项。

说明：能力与 Neo Design Transfer 一致，详见 Transfer 穿梭框。

功能特性：

双栏列表：左侧源列表、右侧已选列表
搜索与禁用：支持过滤、单项或整侧禁用
值写入：已选 key 列表 targetKeys 与完整 dataSource 配合，写入对应 name 字段
大数据：可按文档使用懒加载、分页等模式

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoTransfer",
  "name": "selectedKeys",
  "label": "字段分配",
  "dataSource": [
    { "key": "a", "title": "选项 A" },
    { "key": "b", "title": "选项 B" }
  ]
}

常用属性：

name / label
dataSource：含 key、title（及 disabled 等）
targetKeys / selectedKeys（命名以文档为准）
titles、showSearch、disabled
visibleOn / hiddenOn、onChange

neoTreeSelect - 树选择

适用属性数值类型：单选时为节点 value；多选时为 value[]。

交互方式：在树形数据中单选或多选节点。

说明：能力与 Neo Design TreeSelect 一致，详见 TreeSelect 树选择。

功能特性：

树形数据：treeData 描述父子节点
单选 / 多选：multiple、treeCheckable 等（见文档）
搜索与异步：可搜索节点；支持异步加载子节点时按文档配置
值写入：选中节点的 value 或 value[] 写入对应 name 字段

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoTreeSelect",
  "name": "categoryId",
  "label": "类目",
  "placeholder": "请选择类目",
  "treeData": [
    {
      "title": "一级",
      "value": "1",
      "children": [{ "title": "二级", "value": "1-1" }]
    }
  ]
}

常用属性：

name / label
treeData / treeDataSimpleMode（若使用）
value / defaultValue
multiple、treeCheckable、showSearch、allowClear
visibleOn / hiddenOn、onChange

neoUpload - 上传

适用属性数值类型：文件列表（平台约定的 URL、id 或文件对象结构，以绑定为准）。

交互方式：选择并上传文件（点击或拖拽）。

说明：能力与 Neo Design Upload 一致，详见 Upload 上传。

功能特性：

点击 / 拖拽：支持多种触发方式（见文档）
列表与预览：fileList、预览、移除
限制：accept、maxCount、大小校验、beforeUpload
上传地址与请求：action、headers、data 等与后端对接
值写入：文件列表或平台约定的 URL / id 结构写入对应 name 字段的 value

使用方法：

在组件模型文件（model.ts）/ 属性配置（propsSchema）中添加使用：

json

{
  "type": "neoUpload",
  "name": "attachments",
  "label": "附件",
  "maxCount": 5,
  "accept": ".pdf,.png"
}

常用属性：

name / label
action、headers、data、name（字段名）
fileList / defaultFileList
multiple、accept、maxCount、beforeUpload、disabled
visibleOn / hiddenOn、onChange

组件属性配置项

使用平台组件

表单类配置项

panelInput - 文本输入配置项

panelSelect - 下拉选择配置项

panelSwitch - 开关配置项

panelNumber - 数字输入配置项

panelColor - 颜色选择器配置项

neoCascader - 级联选择配置项

neoRadio - 单选配置项

neoCheckbox - 多选框

neoDatePicker - 日期选择框

neoTimePicker - 时间选择框

neoRate - 评分

neoSlider - 滑动输入条

neoTransfer - 穿梭框

neoTreeSelect - 树选择

neoUpload - 上传

表单类配置项 ​

panelInput - 文本输入配置项 ​

panelSelect - 下拉选择配置项 ​

panelSwitch - 开关配置项 ​

panelNumber - 数字输入配置项 ​

panelColor - 颜色选择器配置项 ​

neoCascader - 级联选择配置项 ​

neoRadio - 单选配置项 ​

neoCheckbox - 多选框 ​

neoDatePicker - 日期选择框 ​

neoTimePicker - 时间选择框 ​

neoRate - 评分 ​

neoSlider - 滑动输入条 ​

neoTransfer - 穿梭框 ​

neoTreeSelect - 树选择 ​

neoUpload - 上传 ​

表单类配置项

panelInput - 文本输入配置项

panelSelect - 下拉选择配置项

panelSwitch - 开关配置项

panelNumber - 数字输入配置项

panelColor - 颜色选择器配置项

neoCascader - 级联选择配置项

neoRadio - 单选配置项

neoCheckbox - 多选框

neoDatePicker - 日期选择框

neoTimePicker - 时间选择框

neoRate - 评分

neoSlider - 滑动输入条

neoTransfer - 穿梭框

neoTreeSelect - 树选择

neoUpload - 上传