04-示例数据.md
13.3 KB
示例数据
完整表单配置示例
示例 1：用户信息表单
{
key: "field_1",
value: "",
component_props: {
tag: "input",
name: "name",
label: "姓名",
placeholder: "请输入姓名",
required: true,
default: ""
}
}
示例 2：性别选择
{
key: "field_2",
value: "",
component_props: {
tag: "gender",
name: "gender",
label: "性别",
required: true,
default: "",
options: [
{
title: "男",
value: "男",
checked: false
},
{
title: "女",
value: "女",
checked: false
}
]
}
}
示例 3：手机号输入
{
key: "field_3",
value: "",
component_props: {
tag: "phone",
name: "phone",
label: "手机号",
placeholder: "请输入手机号",
required: true,
default: ""
}
}
示例 4：单项选择（带补充信息）
{
key: "field_4",
value: "",
component_props: {
tag: "radio",
name: "category",
label: "报名类型",
required: true,
direction: "vertical",
default: "",
options: [
{
title: "个人报名",
value: "personal",
checked: true,
color: "#1989fa"
},
{
title: "团队报名",
value: "team",
checked: false,
color: "#ff976a"
},
{
title: "其他",
value: "other",
checked: false,
is_input: true, // 启用补充输入
input_required: true, // 补充信息必填
input_placeholder: "请说明具体类型",
desc_text: "请选择最符合的报名类型",
desc_type: "text",
desc_btn_name: "查看说明"
}
]
}
}
示例 5：多项选择
{
key: "field_5",
value: [],
component_props: {
tag: "checkbox",
name: "hobbies",
label: "兴趣爱好",
required: false,
direction: "vertical",
options: [
{
title: "运动",
value: "sport",
checked: false,
background_color: "#f0f9ff"
},
{
title: "阅读",
value: "reading",
checked: false,
background_color: "#fff0f0"
},
{
title: "音乐",
value: "music",
checked: false,
background_color: "#f0fff0"
},
{
title: "旅游",
value: "travel",
checked: false,
background_color: "#fffaf0"
}
]
}
}
示例 6：下拉选择
{
key: "field_6",
value: "",
component_props: {
tag: "select",
name: "city",
label: "所在城市",
placeholder: "请选择城市",
required: true,
options: [
{ text: "北京", value: "beijing" },
{ text: "上海", value: "shanghai" },
{ text: "广州", value: "guangzhou" },
{ text: "深圳", value: "shenzhen" }
]
}
}
示例 7：地址选择
{
key: "field_7",
value: "",
component_props: {
tag: "address",
name: "address",
label: "详细地址",
placeholder: "请选择省市区",
required: true
}
}
示例 8：日期选择
{
key: "field_8",
value: "",
component_props: {
tag: "date",
name: "birthday",
label: "出生日期",
placeholder: "请选择日期",
required: true
}
}
示例 9：图片上传
{
key: "field_9",
value: [],
component_props: {
tag: "image_uploader",
name: "photos",
label: "上传照片",
required: true,
max_count: 3, // 最多3张
max_size: 5, // 最大5MB
default: []
}
}
示例 10：多行文本
{
key: "field_10",
value: "",
component_props: {
tag: "textarea",
name: "description",
label: "个人简介",
placeholder: "请输入个人简介",
required: false,
default: ""
}
}
示例 11：电子签名
{
key: "field_11",
value: "",
component_props: {
tag: "sign",
name: "signature",
label: "本人签名",
required: true,
default: ""
}
}
示例 12：评分
{
key: "field_12",
value: "",
component_props: {
tag: "rate",
name: "rating",
label: "活动评分",
required: true,
x_score: 5, // 默认5分
default: ""
}
}
示例 13：身份证号
{
key: "field_13",
value: "",
component_props: {
tag: "id_card",
name: "id_card",
label: "身份证号",
placeholder: "请输入身份证号",
required: true
}
}
示例 14：邮箱
{
key: "field_14",
value: "",
component_props: {
tag: "email",
name: "email",
label: "电子邮箱",
placeholder: "请输入邮箱地址",
required: false
}
}
示例 15：预约控件
{
key: "field_15",
value: "",
component_props: {
tag: "appointment",
name: "appointment_time",
label: "预约时间",
required: true,
appointment_title: "选择预约时间段",
options: [
{
title: "03月27日",
placeholder: "剩余余量 98",
disabled: false,
columns: [
{
checked: false,
disabled: false,
value: "1",
text: "09:00-10:30 余98"
},
{
checked: false,
disabled: false,
value: "2",
text: "14:00-15:30 余50"
},
{
checked: false,
disabled: true,
value: "3",
text: "16:00-17:30 余0"
}
]
},
{
title: "03月28日",
placeholder: "剩余余量 120",
disabled: false,
columns: [
{
checked: false,
disabled: false,
value: "4",
text: "09:00-10:30 余120"
},
{
checked: false,
disabled: false,
value: "5",
text: "14:00-15:30 余80"
}
]
}
]
}
}
示例 16：表格编辑
{
key: "field_16",
value: "",
component_props: {
tag: "table_editor",
name: "table_data",
label: "物品清单",
default: "<table><tr><th>名称</th><th>数量</th></tr><tr><td>物品A</td><td>10</td></tr></table>"
}
}
示例 17：集合组
{
key: "field_17",
value: "",
component_props: {
tag: "group",
name: "group_info",
label: "物品信息",
field_groups: [
{
tag: "input",
name: "item_name",
label: "物品名称",
field_name: "field_18",
group_field_name: "field_17",
placeholder: "请输入物品名称",
required: true
},
{
tag: "number",
name: "item_count",
label: "数量",
field_name: "field_19",
group_field_name: "field_17",
placeholder: "请输入数量",
required: true
}
]
}
}
示例 18：规则说明
{
key: "field_20",
value: "",
component_props: {
tag: "rule",
name: "rule_info",
label: "活动规则",
default: "",
desc_text: "1. 活动时间：2024年3月1日-3月31日\n2. 参与资格：18岁以上\n3. 每人限参与一次",
desc_type: "text",
desc_btn_name: "查看完整规则"
}
}
示例 19：只读字段
{
key: "field_21",
value: "系统自动生成",
component_props: {
tag: "input",
name: "readonly_field",
label: "申请编号",
readonly: true, // 只读
default: "系统自动生成"
}
}
示例 20：带提示的字段
{
key: "field_22",
value: "",
component_props: {
tag: "input",
name: "username",
label: "用户名",
placeholder: "请输入用户名",
required: true,
note: "用户名长度为4-16个字符，支持字母、数字、下划线"
}
}
示例 21：带扫码的输入框
{
key: "field_23",
value: "",
component_props: {
tag: "input",
name: "qr_code",
label: "二维码",
placeholder: "请输入或扫描二维码",
required: true,
is_camera_scan: true,
camera_scan_type: "QR_CODE" // ALL_CODE | QR_CODE | BAR_CODE
}
}
示例 22：分割线
{
key: "field_24",
value: "",
component_props: {
tag: "divider",
name: "divider",
label: "分割线"
}
}
示例 23：富文本说明
{
key: "field_25",
value: "",
component_props: {
tag: "note",
name: "rich_text",
label: "活动详情",
default: "<p>这是一段<strong>富文本</strong>内容</p>"
}
}
复杂表单完整示例
const formConfig = [
// 基本信息
{
key: "field_name",
value: "",
component_props: {
tag: "name",
label: "姓名",
required: true,
placeholder: "请输入姓名"
}
},
{
key: "field_gender",
value: "",
component_props: {
tag: "gender",
label: "性别",
required: true
}
},
{
key: "field_phone",
value: "",
component_props: {
tag: "phone",
label: "手机号",
required: true,
placeholder: "请输入手机号"
}
},
// 报名信息
{
key: "field_type",
value: "",
component_props: {
tag: "radio",
label: "报名类型",
required: true,
direction: "vertical",
options: [
{ title: "个人报名", value: "personal", checked: true },
{ title: "团队报名", value: "team" },
{
title: "其他",
value: "other",
is_input: true,
input_placeholder: "请说明具体类型"
}
]
}
},
// 附加信息
{
key: "field_hobbies",
value: [],
component_props: {
tag: "checkbox",
label: "兴趣爱好",
direction: "vertical",
options: [
{ title: "运动", value: "sport" },
{ title: "阅读", value: "reading" },
{ title: "音乐", value: "music" }
]
}
},
// 时间选择
{
key: "field_date",
value: "",
component_props: {
tag: "date",
label: "活动日期",
required: true,
placeholder: "请选择日期"
}
},
// 图片上传
{
key: "field_photo",
value: [],
component_props: {
tag: "image_uploader",
label: "上传照片",
required: true,
max_count: 3,
max_size: 5
}
},
// 说明文字
{
key: "field_note",
value: "",
component_props: {
tag: "note",
label: "注意事项",
default: "<p>请确保所填信息真实有效</p>"
}
},
// 电子签名
{
key: "field_sign",
value: "",
component_props: {
tag: "sign",
label: "本人签名",
required: true
}
}
]
数据提交格式
提交到后端的格式
{
form_code: "form_001",
data: {
field_name: "张三",
field_gender: "男",
field_phone: "13800138000",
field_type: {
key: "field_type",
value: "personal",
type: "radio"
},
field_hobbies: {
key: "field_hobbies",
value: ["sport", "music"],
type: "checkbox"
},
field_date: "2024-03-15",
field_photo: {
key: "field_photo",
value: [
{ url: "https://...", name: "photo1.jpg" }
],
type: "image_uploader"
},
field_sign: {
key: "field_sign",
value: "data:image/png;base64,...",
type: "sign"
}
}
}
LangChain Agent 使用的提示词模板
const FORM_GENERATION_PROMPT = `
你是一个表单配置生成专家。根据用户的自然语言描述，生成符合以下规范的表单字段配置。
## 组件类型映射
用户描述 → 组件类型：
- "姓名/名字" → name
- "性别" → gender
- "手机号/电话" → phone
- "邮箱" → email
- "身份证" → id_card
- "单选/单项选择" → radio
- "多选/多项选择" → checkbox
- "下拉/选择" → select
- "日期" → date
- "时间" → time
- "地址/省市区" → address
- "图片上传" → image_uploader
- "文件上传" → file_uploader
- "多行文本/描述/简介" → textarea
- "数字" → number
- "评分/打分" → rate
- "签名/电子签名" → sign
- "富文本/说明" → note
- "分割线" → divider
## 必填属性
- "必填/必须/一定要" → required: true
- "可选/非必须" → required: false
## 配置模板
### 文本输入
{
key: "field_{index}",
value: "",
component_props: {
tag: "input",
name: "{field_name}",
label: "{显示名称}",
placeholder: "请输入{显示名称}",
required: {是否必填}
}
}
### 单选/多选
{
key: "field_{index}",
value: "",
component_props: {
tag: "{radio|checkbox}",
name: "{field_name}",
label: "{显示名称}",
required: {是否必填},
direction: "vertical",
options: [
{ title: "{选项1}", value: "{value1}" },
{ title: "{选项2}", value: "{value2}" }
]
}
}
### 图片上传
{
key: "field_{index}",
value: [],
component_props: {
tag: "image_uploader",
name: "{field_name}",
label: "{显示名称}",
required: {是否必填},
max_count: {数量},
max_size: {大小MB}
}
}
请根据用户需求生成对应的表单配置JSON。
`;