BizFormDesigner 表单设计器

低代码表单设计器：左字段面板（10 类常用字段，拖入或点击新增）· 中画布（拖拽排序、点选、复制、删除）· 右属性面板（标签 / 占位 / 必填 / 栅格宽度 / 选项编辑 / 取值范围）；editable=false 一键切预览态渲染可交互表单（必填规则自动生成）。schema 为纯 JSON（getSchema / setSchema），问卷、审批表、动态业务表单的搭建底座。

基础用法

字段面板

单行文本

邮箱

网址

多行文本

数字

下拉

单选

多选

日期

开关

评分

滑块

画布（2 个字段）

⋮⋮

客户名称*单行文本

⋮⋮

客户等级下拉

请选择

属性面板

选中画布字段后配置属性

面板拖入 / 点击新增字段，画布拖拽排序、选中后右栏改属性。

<script setup lang="ts">
/** 场景：基础——面板新增 / 拖拽排序 / 属性编辑三栏联动 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  {
    id: 'f-name',
    type: 'input',
    label: '客户名称',
    placeholder: '请输入客户名称',
    required: true,
    span: 12,
  },
  {
    id: 'f-level',
    type: 'select',
    label: '客户等级',
    placeholder: '请选择',
    options: [
      { label: 'A 类', value: 'a' },
      { label: 'B 类', value: 'b' },
    ],
    span: 12,
  },
])
</script>

<template>
  <BizFormDesigner v-model="fields" />
</template>

显示代码

属性编辑

字段面板

单行文本

邮箱

网址

多行文本

数字

下拉

单选

多选

日期

开关

评分

滑块

画布（2 个字段）

⋮⋮

跟进渠道单选

电话拜访

⋮⋮

意向分滑块

属性面板

选中画布字段后配置属性

选中字段后编辑标签、占位、必填、栅格；选项类字段维护 label/value 列表；数字类配置范围。

<script setup lang="ts">
/** 场景：属性编辑——选项类字段维护选项，数字类配置范围 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  {
    id: 'f-channel',
    type: 'radio',
    label: '跟进渠道',
    options: [
      { label: '电话', value: 'tel' },
      { label: '拜访', value: 'visit' },
    ],
  },
  { id: 'f-score', type: 'slider', label: '意向分', min: 0, max: 100 },
])
</script>

<template>
  <BizFormDesigner v-model="fields" />
</template>

显示代码

预览与校验

工单标题

紧急程度

低中高

问题描述

editable=false 切预览态：必填规则自动生成，validate / getFormData 取填写结果。

<script setup lang="ts">
/** 场景：预览与校验——editable=false 渲染可交互表单，validate / getFormData */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField, BizFormDesignerInstance } from 'vue3-ep-biz-lib'

const editable = ref(false)
const result = ref('')

const fields = ref<BizFormDesignerField[]>([
  { id: 'f-title', type: 'input', label: '工单标题', required: true, placeholder: '一句话描述问题' },
  {
    id: 'f-urgency',
    type: 'radio',
    label: '紧急程度',
    required: true,
    options: [
      { label: '低', value: 'low' },
      { label: '中', value: 'mid' },
      { label: '高', value: 'high' },
    ],
  },
  { id: 'f-desc', type: 'textarea', label: '问题描述', span: 24 },
])

const designerRef = ref<BizFormDesignerInstance | null>(null)

const submit = async (): Promise<void> => {
  const ok = await designerRef.value?.validate()
  if (ok !== true) {
    ElMessage.warning('请补全必填项')
    return
  }
  result.value = JSON.stringify(designerRef.value?.getFormData())
  ElMessage.success('校验通过，数据见下方')
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <ElButton size="small" @click="editable = !editable">
        {{ editable ? '切到预览' : '切到设计' }}
      </ElButton>
    </div>
    <BizFormDesigner ref="designerRef" v-model="fields" :editable="editable" />
    <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center">
      <ElButton v-if="!editable" type="primary" size="small" @click="submit">提交（校验）</ElButton>
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">{{ result }}</span>
    </div>
  </div>
</template>

显示代码

Schema 导入导出

字段面板

单行文本

邮箱

网址

多行文本

数字

下拉

单选

多选

日期

开关

评分

滑块

画布（0 个字段）

从左侧拖入或点击字段

属性面板

选中画布字段后配置属性

（未导出）

getSchema 导出 JSON、setSchema 整表导入——表单配置持久化的标准链路。

<script setup lang="ts">
/** 场景：schema 导入导出——getSchema 持久化、setSchema 整表还原 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField, BizFormDesignerInstance } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([])
const saved = ref('')
const designerRef = ref<BizFormDesignerInstance | null>(null)

const exportSchema = (): void => {
  saved.value = JSON.stringify(designerRef.value?.getSchema() ?? [])
}

const importSchema = (): void => {
  if (saved.value === '') return
  designerRef.value?.setSchema(JSON.parse(saved.value) as BizFormDesignerField[])
}
</script>

<template>
  <div>
    <BizFormDesigner ref="designerRef" v-model="fields" />
    <div style="margin-top: 10px; display: flex; gap: 8px">
      <ElButton size="small" @click="exportSchema">导出 schema</ElButton>
      <ElButton size="small" :disabled="saved === ''" @click="importSchema">导入还原</ElButton>
      <ElButton size="small" @click="designerRef?.clear()">清空画布</ElButton>
    </div>
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary); word-break: break-all">
      {{ saved === '' ? '（未导出）' : saved.slice(0, 120) + '…' }}
    </p>
  </div>
</template>

显示代码

事件联动

字段面板

单行文本

邮箱

网址

多行文本

数字

下拉

单选

多选

日期

开关

评分

滑块

画布（1 个字段）

⋮⋮

字段一单行文本

属性面板

选中画布字段后配置属性

change（列表变化）/ select（选中字段）联动外部逻辑。

<script setup lang="ts">
/** 场景：事件——change / select 联动外部逻辑 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  { id: 'f-1', type: 'input', label: '字段一' },
])

const logs = ref<string[]>([])

const onChange = (): void => {
  logs.value.unshift(`change：共 ${fields.value.length} 个字段`)
  if (logs.value.length > 5) logs.value.pop()
}

const onSelect = (field: BizFormDesignerField | null): void => {
  logs.value.unshift(field === null ? 'select：取消选中' : `select：${field.label}`)
  if (logs.value.length > 5) logs.value.pop()
}
</script>

<template>
  <div>
    <BizFormDesigner v-model="fields" @change="onChange" @select="onSelect" />
    <p v-for="(log, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ log }}
    </p>
  </div>
</template>

显示代码

裁剪面板

字段面板

文本

下拉

日期

画布（0 个字段）

从左侧拖入或点击字段

属性面板

选中画布字段后配置属性

palette 只保留业务允许的字段类型。

<script setup lang="ts">
/** 场景：裁剪面板——palette 只保留业务允许的字段类型 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([])
</script>

<template>
  <BizFormDesigner
    v-model="fields"
    :palette="[
      { type: 'input', label: '文本' },
      { type: 'select', label: '下拉' },
      { type: 'date', label: '日期' },
    ]"
  />
</template>

显示代码

多类型组合

字段面板

单行文本

邮箱

网址

多行文本

数字

下拉

单选

多选

日期

开关

评分

滑块

画布（7 个字段）

⋮⋮

姓名*单行文本

⋮⋮

入职日期日期

⋮⋮

所属部门下拉

请选择

⋮⋮

技能标签多选

前端后端测试

⋮⋮

面试评分评分

⋮⋮

期望薪资（k）滑块

⋮⋮

备注多行文本

属性面板

选中画布字段后配置属性

初始 schema 覆盖 7 类字段：半行栅格、必填星标、评分 / 滑块 / 多选组合排布。

<script setup lang="ts">
/** 场景：多类型初始 schema——半行栅格 + 评分 / 滑块 / 多选组合 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  { id: 'f-name', type: 'input', label: '姓名', required: true, span: 12, placeholder: '请输入姓名' },
  { id: 'f-date', type: 'date', label: '入职日期', span: 12, placeholder: '请选择日期' },
  {
    id: 'f-dept',
    type: 'select',
    label: '所属部门',
    span: 12,
    options: [
      { label: '研发部', value: 'rd' },
      { label: '产品部', value: 'pd' },
      { label: '运营部', value: 'op' },
    ],
  },
  { id: 'f-tags', type: 'checkbox', label: '技能标签', span: 12, options: [
    { label: '前端', value: 'fe' },
    { label: '后端', value: 'be' },
    { label: '测试', value: 'qa' },
  ] },
  { id: 'f-score', type: 'rate', label: '面试评分', span: 12, max: 5 },
  { id: 'f-salary', type: 'slider', label: '期望薪资（k）', span: 12, min: 10, max: 60 },
  { id: 'f-note', type: 'textarea', label: '备注', span: 24, placeholder: '其他说明' },
])
</script>

<template>
  <BizFormDesigner v-model="fields" />
</template>

显示代码

远端配置还原

字段面板

单行文本

邮箱

网址

多行文本

数字

下拉

单选

多选

日期

开关

评分

滑块

画布（0 个字段）

从左侧拖入或点击字段

属性面板

选中画布字段后配置属性

模拟接口下发 JSON 字符串，setSchema 整表还原为可编辑设计稿。

<script setup lang="ts">
/** 场景：接口下发配置——JSON 字符串 setSchema 整表还原（模拟远端表单配置） */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField, BizFormDesignerInstance } from 'vue3-ep-biz-lib'

const designerRef = ref<BizFormDesignerInstance | null>(null)
const fields = ref<BizFormDesignerField[]>([])

/** 模拟接口返回的表单配置字符串 */
const remoteConfig = JSON.stringify([
  { id: 'r1', type: 'input', label: '客户名称', required: true, span: 12 },
  { id: 'r2', type: 'number', label: '合同金额（元）', min: 0, max: 100000000, span: 12 },
  { id: 'r3', type: 'switch', label: '自动续约', span: 12, defaultValue: true },
  { id: 'r4', type: 'date', label: '签署日期', span: 12 },
])

const loadFromRemote = (): void => {
  designerRef.value?.setSchema(JSON.parse(remoteConfig) as BizFormDesignerField[])
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <ElButton size="small" type="primary" plain @click="loadFromRemote">加载远端配置（setSchema）</ElButton>
    </div>
    <BizFormDesigner ref="designerRef" v-model="fields" />
  </div>
</template>

显示代码

问卷模式

产品满意度调研（3 题）

题型面板

单选题

多选题

量表题

简答题

日期题

下拉题

画布（3 个字段）

⋮⋮

Q1. 你从哪里了解到本产品？*单选

朋友推荐搜索引擎社交媒体

⋮⋮

Q2. 整体满意度评分*评分

⋮⋮

Q3. 你最希望改进的功能？多行文本

属性面板

选中画布字段后配置属性

survey 开启后字段面板切换为问卷题型（单选 / 多选 / 量表 / 简答 / 日期 / 下拉），画布按 Q1/Q2 编号，顶部出现「投放问卷」入口。

<script setup lang="ts">
/** 问卷模式基础：survey 开启后题型面板换为问卷六题、画布按 Q1/Q2 编号、顶部出现「投放问卷」 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  { id: 'q1', type: 'radio', label: '你从哪里了解到本产品？', required: true, options: [
    { label: '朋友推荐', value: 'a' }, { label: '搜索引擎', value: 'b' }, { label: '社交媒体', value: 'c' },
  ] },
  { id: 'q2', type: 'rate', label: '整体满意度评分', required: true, max: 5 },
  { id: 'q3', type: 'textarea', label: '你最希望改进的功能？', placeholder: '请输入建议' },
])
</script>

<template>
  <BizFormDesigner v-model="fields" survey survey-title="产品满意度调研" />
</template>

显示代码

答卷态

培训反馈问卷

共 3 题 · 带 * 为必答

本次培训对你的工作帮助程度

帮助很大一般帮助不大

希望后续增加的主题（可多选）

工程效率质量保障安全合规

讲师满意度

editable=false 渲染带标题头的可作答问卷；required 即必答题，validate() 拦截未答项，getFormData() 取答卷。

<script setup lang="ts">
/** 答卷态：editable=false 渲染带标题头的可作答问卷，必答题（required）校验拦截 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  { id: 'q1', type: 'radio', label: '本次培训对你的工作帮助程度', required: true, options: [
    { label: '帮助很大', value: 'a' }, { label: '一般', value: 'b' }, { label: '帮助不大', value: 'c' },
  ] },
  { id: 'q2', type: 'checkbox', label: '希望后续增加的主题（可多选）', options: [
    { label: '工程效率', value: 'a' }, { label: '质量保障', value: 'b' }, { label: '安全合规', value: 'c' },
  ] },
  { id: 'q3', type: 'rate', label: '讲师满意度', required: true },
])

const fd = ref<InstanceType<typeof BizFormDesigner>>()

const submit = async (): Promise<void> => {
  const ok = await fd.value?.validate()
  if (ok) ElMessage.success(`答卷提交成功：${JSON.stringify(fd.value?.getFormData())}`)
}
</script>

<template>
  <div style="max-width: 640px">
    <BizFormDesigner ref="fd" v-model="fields" survey survey-title="培训反馈问卷" :editable="false" />
    <el-button type="primary" style="margin-top: 12px" @click="submit">提交问卷</el-button>
  </div>
</template>

显示代码

投放问卷

NPS 净推荐值调研（1 题）

题型面板

单选题

多选题

量表题

简答题

日期题

下拉题

画布（1 个字段）

⋮⋮

Q1. 你有多大可能把我们推荐给朋友（NPS）？*评分

属性面板

选中画布字段后配置属性

点击顶部「投放问卷」查看链接与二维码；survey-key 固定后链接不随会话变化。

投放弹窗：链接一键复制 + 二维码（复用 BizCode）；survey-key 固定后链接不随会话变化。

<script setup lang="ts">
/** 投放问卷：弹窗内链接一键复制 + 二维码（复用 BizCode），survey-key 自定义投放地址 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  { id: 'n1', type: 'rate', label: '你有多大可能把我们推荐给朋友（NPS）？', required: true, max: 10 },
])
</script>

<template>
  <div style="max-width: 860px">
    <BizFormDesigner
      v-model="fields"
      survey
      survey-title="NPS 净推荐值调研"
      survey-key="nps-2026q4"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击顶部「投放问卷」查看链接与二维码；survey-key 固定后链接不随会话变化。
    </p>
  </div>
</template>

显示代码

回收统计

组件库满意度（已回收 4 份）

共 3 题 · 带 * 为必答

最喜欢的功能模块

组件库文档站设计器

文档易用性评分

一句话建议

统计结果（getSurveyStats 渲染）

expose.getSurveyStats(answers) 结构化输出：选择题选项分布（含占比）、量表均分、简答文本集合；图表由业务侧渲染（示例用 CSS 分布条）。

<script setup lang="ts">
/** 回收统计：getSurveyStats(answers) 结构化输出，业务侧渲染分布条 / 均分 / 简答集合 */
import { computed, ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField, BizSurveyAnswer } from 'vue3-ep-biz-lib'

const fields = ref<BizFormDesignerField[]>([
  { id: 'q1', type: 'radio', label: '最喜欢的功能模块', options: [
    { label: '组件库', value: 'a' }, { label: '文档站', value: 'b' }, { label: '设计器', value: 'c' },
  ] },
  { id: 'q2', type: 'rate', label: '文档易用性评分', max: 5 },
  { id: 'q3', type: 'textarea', label: '一句话建议' },
])

const answers = ref<BizSurveyAnswer[]>([
  { id: 'a1', submittedAt: Date.now() - 30000, values: { q1: 'a', q2: 5, q3: '示例够多，照抄就能用' } },
  { id: 'a2', submittedAt: Date.now() - 60000, values: { q1: 'a', q2: 4, q3: '希望增加暗黑主题' } },
  { id: 'a3', submittedAt: Date.now() - 90000, values: { q1: 'c', q2: 5, q3: '' } },
  { id: 'a4', submittedAt: Date.now() - 120000, values: { q1: 'b', q2: 4, q3: '搜索很好用' } },
])

const fd = ref<InstanceType<typeof BizFormDesigner>>()
const stats = computed(() => (fd.value ? fd.value.getSurveyStats(answers.value) : []))
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <div style="max-width: 860px">
      <BizFormDesigner ref="fd" v-model="fields" survey survey-title="组件库满意度（已回收 4 份）" :editable="false" />
    </div>
    <div style="max-width: 640px">
      <h5 style="margin: 0 0 8px; font-size: 14px">统计结果（getSurveyStats 渲染）</h5>
      <div v-for="st in stats" :key="st.fieldId" style="padding: 8px 0; border-top: 1px dashed var(--el-border-color-lighter)">
        <p style="margin: 0 0 6px; font-size: 13px; font-weight: 600">{{ st.label }}（{{ st.count }} 人作答）</p>
        <div v-for="d in st.distribution" :key="d.label" style="display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 2px 0">
          <span style="width: 60px; color: var(--el-text-color-secondary)">{{ d.label }}</span>
          <span style="flex: 1; height: 8px; background: var(--el-fill-color-darker); border-radius: 4px; overflow: hidden">
            <i style="display: block; height: 100%; width: 0; border-radius: 4px; background: var(--el-color-primary); transition: width 0.3s" :style="{ width: d.percent + '%' }" />
          </span>
          <span style="width: 56px; text-align: right; color: var(--el-text-color-placeholder)">{{ d.count }} · {{ d.percent }}%</span>
        </div>
        <p v-if="st.average !== undefined" style="margin: 4px 0 0; font-size: 12px; color: var(--el-color-warning)">均分 {{ st.average }}</p>
        <p v-for="(t, i) in st.texts" :key="i" style="margin: 2px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">“{{ t }}”</p>
      </div>
    </div>
  </div>
</template>

显示代码

编程式载入问卷

开发者大会报名回执（0 题）

题型面板

单选题

多选题

量表题

简答题

日期题

下拉题

画布（0 个字段）

从左侧拖入或点击字段

属性面板

选中画布字段后配置属性

expose.setSchema() 灌入既有问卷模板（NPS / 报名回执等），问卷模式照常编号与投放。

<script setup lang="ts">
/** 编程式载入问卷：setSchema 灌入既有 NPS / 报名模板，survey 模式照常编号与投放 */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const fd = ref<InstanceType<typeof BizFormDesigner>>()

const fields = ref<BizFormDesignerField[]>([])

const TEMPLATE: BizFormDesignerField[] = [
  { id: 't1', type: 'input', label: '姓名', required: true, placeholder: '请输入姓名' },
  { id: 't2', type: 'input', label: '手机号', required: true, placeholder: '用于接收回执' },
  { id: 't3', type: 'checkbox', label: '参加的分论坛', required: true, options: [
    { label: '前端工程化', value: 'fe' }, { label: '数据智能', value: 'ai' }, { label: '云端架构', value: 'cloud' },
  ] },
  { id: 't4', type: 'date', label: '期望的线下场次日期' },
]
</script>

<template>
  <div style="max-width: 860px">
    <el-button size="small" style="margin-bottom: 10px" @click="fd?.setSchema(TEMPLATE)">载入报名问卷模板</el-button>
    <BizFormDesigner ref="fd" v-model="fields" survey survey-title="开发者大会报名回执" />
  </div>
</template>

显示代码

模式对比

表单模式

问卷模式

模式偏好小调研（2 题）

题型面板

单选题

多选题

量表题

简答题

日期题

下拉题

画布（2 个字段）

⋮⋮

Q1. 你更常用哪种模式？单选

表单设计器问卷模式

⋮⋮

Q2. 补充说明多行文本

属性面板

选中画布字段后配置属性

同一组件 survey 开关切换：表单模式（10 类字段面板）↔ 问卷模式（题型面板 + Q 编号）。

<script setup lang="ts">
/** 问卷与普通表单对比：同一组件 survey 开关切换（表单模式字段面板 / 问卷模式题型面板与 Q 编号） */
import { ref } from 'vue'
import { BizFormDesigner } from 'vue3-ep-biz-lib'
import type { BizFormDesignerField } from 'vue3-ep-biz-lib'

const survey = ref(true)

const fields = ref<BizFormDesignerField[]>([
  { id: 'c1', type: 'radio', label: '你更常用哪种模式？', options: [
    { label: '表单设计器', value: 'form' }, { label: '问卷模式', value: 'survey' },
  ] },
  { id: 'c2', type: 'textarea', label: '补充说明' },
])
</script>

<template>
  <div style="max-width: 860px">
    <el-switch v-model="survey" active-text="问卷模式" inactive-text="表单模式" style="margin-bottom: 10px" />
    <BizFormDesigner v-model="fields" :survey="survey" :survey-title="survey ? '模式偏好小调研' : ''" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	BizFormDesignerField[]	[]	字段列表（schema）
palette	BizFormPaletteItem[]	内置 10 类	字段面板可拖入类型
editable	boolean	true	设计态；false 为预览态
survey	boolean	false	问卷模式：题型面板 / Q 编号 / 投放入口；忽略外部 palette
survey-title	string	'问卷调查'	问卷标题（投放弹窗与答卷态头部）
survey-key	string	自动生成	投放 key（拼投放链接 #/survey/<key>）
label-width	string	'80px'	预览态标签宽度

Events

事件名	参数	说明
update:modelValue	(fields)	schema 变化
change	(fields)	同 update（任何编辑操作后）
select	(field | null)	画布选中字段变化

Expose

名称	类型	说明
getSchema	() => BizFormDesignerField[]	导出 schema（深拷贝）
setSchema	(fields) => void	整表导入
clear	() => void	清空画布
validate	() => Promise<boolean>	预览态必填校验
getFormData	() => Record<string, unknown>	取预览态填写数据
openShare	() => void	打开问卷投放弹窗（survey 模式）
getSurveyStats	(answers: BizSurveyAnswer[]) => BizSurveyFieldStats[]	问卷回收统计：选择题分布 / 量表均分 / 简答文本集合
getSurveyLink	() => string	当前投放链接（survey 模式）

TIP

字段类型：input / textarea / number / select / radio / checkbox / date / switch / rate / slider。选项类（select / radio / checkbox）与范围类（number / rate / slider）的属性面板按类型自动显隐。运行时渲染直接复用预览态逻辑：editable=false + setSchema(配置) 即成表单页。