0 个字段

字段类型

基础输入

📝文本输入

📄多行文本

🔢数字输入

选择类

📋下拉选择

☑复选框

○单选框

↔穿梭框

日期时间

📅日期选择

🕐时间选择

其他控件

⚡开关

━━滑块

⭐评分

📤上传

操作按钮

🔘按钮

字段布局设计

列数：

▼

1

拖入字段

拖入字段

2

拖入字段

拖入字段

3

拖入字段

拖入字段

表单预览

🎨

添加字段后将在此处预览表单效果

功能说明

字段类型

页面设计器支持以下字段类型（与 XTO UI 表单组件同步）：

类型	对应组件	特殊属性
input	XInput	maxlength, clearable
textarea	XTextarea	rows, maxlength
number	XInputNumber	min, max, step, precision
select	XSelect	options, clearable
date	XDatePicker	type, format, valueFormat
time	XTimePicker	format
switch	XSwitch	activeText, inactiveText
checkbox	XCheckbox	-
radio	XRadioGroup	options
rate	XRate	max, allowHalf
slider	XSlider	min, max, step
upload	XUpload	limit, accept
transfer	XTransfer	data

操作流程

1. 拖拽添加 - 从左侧面板拖拽字段类型到中间字段列表
2. 拖拽排序 - 在字段列表中拖拽调整顺序
3. 点击编辑 - 点击字段在右侧抽屉中编辑属性
4. 导出Schema - 复制或下载 JSON Schema 文件

Schema 格式

导出的 JSON Schema 格式：

{
  "id": "form_xxx",
  "name": "表单名称",
  "version": "1.0.0",
  "fields": [
    {
      "name": "username",
      "label": "用户名",
      "type": "input",
      "placeholder": "请输入用户名",
      "props": {},
      "rules": []
    }
  ],
  "layout": {
    "labelWidth": "100px",
    "labelPosition": "right"
  }
}